前言
web技術(shù)是客戶端與服務(wù)端交互的技術(shù)，所以客戶端的開發(fā)知識也是在Java web學(xué)習(xí)過程中必不可少的部分。不過呢，客戶端技術(shù)涉及到的知識點非常的多，我需要在短短的一篇教程里來給大家講明白是不太科學(xué)的。所以在這我主要想記錄下來我對這四塊技術(shù)的學(xué)習(xí)過程中的一些心得來與大家分享。并且也會留下學(xué)習(xí)資料，希望我和大家一起去探索學(xué)習(xí)。
客戶端開發(fā)工具
工欲善其事，必先利其器。想要提升開發(fā)效率，搭配一套合適的開發(fā)環(huán)境是再重要不過的事情了。現(xiàn)在幾乎所有的主流開發(fā)工具都都支持Web前端技術(shù)。比如MyEclipse、IntelliJ IDEA、Visual Studio 2010等。但是前端開發(fā)工作最核心也是最主要用到的就是瀏覽器和文本編輯器了。
HTML：框架
HTML的全稱為Hypertext Markup Language，中文的意思是超文本標(biāo)簽語言，是一種制作超文本文檔的簡單標(biāo)簽語言，也是用于制作網(wǎng)頁的內(nèi)容。
1. HTML基本構(gòu)成
簡要說明
- <html></html>標(biāo)簽用來標(biāo)識html文檔的開始與結(jié)束
- <head></head>標(biāo)簽用來標(biāo)識html文檔的頭部部分，在這個標(biāo)簽中可以加入<title></title>標(biāo)簽來定義文檔的標(biāo)題，<script></script>標(biāo)簽可以用來添加javascript代碼，<style></style>標(biāo)簽可以用來給html文檔添加樣式
- <body></body> 標(biāo)簽來定義文檔的主體部分，在這個標(biāo)簽里面主要用來描述瀏覽器中顯示出來的內(nèi)容。
更多詳細(xì)教程：菜鳥教程 HTML
Javascript：行為
JavaScript 是互聯(lián)網(wǎng)上最流行的腳本語言，這門語言可用于 HTML 和 web，更可廣泛用于服務(wù)器、PC、筆記本電腦、平板電腦和智能手機(jī)等設(shè)備。
更多詳細(xì)教程：菜鳥教程 JavaScript
DOM操作
HTML DOM (文檔對象模型)
當(dāng)網(wǎng)頁被加載時，瀏覽器會創(chuàng)建頁面的文檔對象模型（Document Object Model）。
更多詳細(xì)教程：菜鳥教程 DOM
通過可編程的對象模型，JavaScript 獲得了足夠的能力來創(chuàng)建動態(tài)的 HTML。
- JavaScript 能夠改變頁面中的所有 HTML 元素
- JavaScript 能夠改變頁面中的所有 HTML 屬性
- JavaScript 能夠改變頁面中的所有 CSS 樣式
- JavaScript 能夠?qū)撁嬷械乃惺录龀龇磻?yīng)
CSS：樣式
什么是 CSS?
- CSS 指層疊樣式表 (Cascading Style Sheets)
- 樣式定義如何顯示 HTML 元素
- 樣式通常存儲在樣式表中
- 把樣式添加到 HTML 4.0 中，是為了解決內(nèi)容與表現(xiàn)分離的問題
- 外部樣式表可以極大提高工作效率
- 外部樣式表通常存儲在 CSS 文件中
- 多個樣式定義可層疊為一
樣式解決了一個很大的問題
HTML 標(biāo)簽原本被設(shè)計為用于定義文檔內(nèi)容，如下實例：
<h1>這是一個標(biāo)題</h1> <p>這是一個段落.</p>
樣式表定義如何顯示 HTML 元素，就像 HTML 3.2 的字體標(biāo)簽和顏色屬性所起的作用那樣。樣式通常保存在外部的 .css 文件中。通過僅僅編輯一個簡單的 CSS 文檔，外部樣式表使你有能力同時改變站點中所有頁面的布局和外觀。
為了解決這個問題，萬維網(wǎng)聯(lián)盟（W3C），這個非營利的標(biāo)準(zhǔn)化聯(lián)盟，肩負(fù)起了 HTML 標(biāo)準(zhǔn)化的使命，并在 HTML 4.0 之外創(chuàng)造出樣式（Style）。
當(dāng)代瀏覽器都支持 CSS .
更多詳細(xì)教程：菜鳥教程 CSS
Ajax：同步或異步訪問服務(wù)器資源
AJAX 是一種在無需重新加載整個網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)。
什么是 AJAX ？
AJAX = 異步 JavaScript 和 XML。
AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。
通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進(jìn)行更新。
傳統(tǒng)的網(wǎng)頁（不使用 AJAX）如果需要更新內(nèi)容，必需重載整個網(wǎng)頁面。
有很多使用 AJAX 的應(yīng)用程序案例：新浪微博、Google 地圖、開心網(wǎng)等等。
更多詳細(xì)教程：菜鳥教程 AJAX
總結(jié)
前端技術(shù)在JavaWeb開發(fā)學(xué)習(xí)中占什么位置呢？我覺得雖然JavaWeb技術(shù)主要是對網(wǎng)站后臺的開發(fā)與架構(gòu)，但是數(shù)據(jù)畢竟是需要傳輸?shù)角岸诉M(jìn)行展示的。而且在對后臺的開發(fā)中我們后端開發(fā)人員可以自己搭建簡易前臺頁面與后臺進(jìn)行交互。我認(rèn)為這是在Java web學(xué)習(xí)中非常重要的。
下節(jié)預(yù)告
Servlet技術(shù)
敬請期待哦～
