之前寫的一篇很粗淺的《做網(wǎng)站都需要學(xué)什么》，分享了一點(diǎn)經(jīng)驗(yàn)和我個人的理解，不足之處還望朋友們多提意見，今天剛剛讀到一份Web前端開發(fā)技術(shù)的列表，就是網(wǎng)頁設(shè)計和開發(fā)人員需要掌握的技術(shù)，但只是簡單的羅列，我覺得很有些參考價值，所以轉(zhuǎn)過來，并附上簡單的介紹，以供朋友們選擇和借鑒。
什么是Web前端(Front-end)開發(fā)？
Web開發(fā)分前端(Front-end)和后端(Back-end)，后端指的是程序、數(shù)據(jù)庫和服務(wù)器層面的開發(fā)，而前端指的則是直接與用戶接觸的網(wǎng)頁，比如布局、特效、交互等等，前端和后端就好比舞臺上的演員和后臺工作人員。
HTML、CSS、JavaScript這些常見的名詞都屬于前端范疇，以及平面設(shè)計、美工、搜索引擎優(yōu)化等也是這一類的。隨著網(wǎng)站開發(fā)行業(yè)的發(fā)展成熟，各領(lǐng)域的劃分也越來越明確和細(xì)致，傳統(tǒng)的掌握Dreamweaver就能做網(wǎng)頁的認(rèn)識已經(jīng)不能適應(yīng)當(dāng)前和未來的趨勢，那么作為一名前端人員，就應(yīng)該掌握更多、更有針對性的技術(shù)和知識。
Web開發(fā)技術(shù)種類繁多，而且層出不窮，選擇恰當(dāng)?shù)恼Z言和技術(shù)不僅能提高效率，也可以更好的適應(yīng)未來的發(fā)展。
Web前端開發(fā)技術(shù)匯總
XHTML / HTML5
網(wǎng)頁的骨骼，基礎(chǔ)標(biāo)記語言，用于定義網(wǎng)頁元素類型和之間的關(guān)系。HTML5是HTML的一個版本，但因?yàn)榧尤肓嗽S多新特性加之業(yè)界的廣泛關(guān)注和支持，現(xiàn)在已經(jīng)成為下一代Web技術(shù)的核心概念。
CSS2.1 / CSS3
網(wǎng)頁樣式標(biāo)記，用于定制外觀表現(xiàn)。
JavaScript / Ajax
網(wǎng)頁上的編程語言，用于定義元素和瀏覽器行為。Ajax本身不是語言，而是三者的融合。以上三項(xiàng)是開發(fā)人員必備的技術(shù)。
jQuery
最著名、應(yīng)用最廣泛的JavaScript庫，簡化JS操作、提高效率。
HTML5 Boilerplate
HTML5 Boilerplate是一個基于HTML5/CSS/JS的快速、健壯且適應(yīng)性強(qiáng)的模板，主要解決開發(fā)效率和兼容性等Web常見問題。
Modernizr
Modernizr和jQuery一樣也是一個JavaScript庫，但主要用于創(chuàng)建HTML5和CSS3網(wǎng)站，確保新技術(shù)的實(shí)現(xiàn)。
YUI Library
來自雅虎的JavaScript庫，用于創(chuàng)建高級交互界面。
面向?qū)ο蟮腃SS
可能讓你感覺很奇怪，因?yàn)镃SS并不是編程語言，但它確實(shí)存在。
CSS網(wǎng)格布局
其他的同類選擇還有960.gs和blueprint等。
CSS 框架/重置
CSS框架可以理解為CSS版的jQuery，都是為了提高開發(fā)效率，剛才提到的960gs和bluerpint都屬于CSS框架。重置就是在開始應(yīng)用樣式之前設(shè)定一些基礎(chǔ)屬性，便于后面的控制和管理。
漸進(jìn)增強(qiáng)/平穩(wěn)退化
這里有篇文章可以解釋：
http://ued.taobao.com/blog/2008/10/09/understanding-progressiveen-hancement-chs-translation/HTML和CSS的W3C標(biāo)準(zhǔn)
用戶體驗(yàn)和可用性
這不是技術(shù)，而是說你應(yīng)該學(xué)著把網(wǎng)站做的更好用。
網(wǎng)站速度優(yōu)化
學(xué)習(xí)如何提高網(wǎng)站速度。
調(diào)試工具
如Firebug、Web Developer等，兩個都是Firefox插件。
Dojo / MooTools / Prototype
與jQuery同類的JavaScript庫，但用途不盡相同。
Responsive Web Design(適應(yīng)性/響應(yīng)性/彈性網(wǎng)頁設(shè)計)
這個詞的翻譯還沒有最終確定，指的就是一種布局可以適應(yīng)多種瀏覽器窗口和分辨率，而不是之前流行的為不同環(huán)境創(chuàng)建不同的界面。
移動Web開發(fā)
主要針對智能手機(jī)和平板電腦等移動設(shè)備和系統(tǒng)。
移動Web性能。
跨瀏覽器/跨平臺開發(fā)
訪問你網(wǎng)站的用戶可能使用各種瀏覽器、設(shè)備和系統(tǒng)，都要保證正常運(yùn)行和現(xiàn)實(shí)。
文檔對象模型 (DOM)
DOM是一種將HTML文檔作為樹狀的對象結(jié)構(gòu)的編程接口，DOM主要還是和其他技術(shù)比如JS結(jié)合使用。
跨瀏覽器的bug和兼容問題
如果你不是第一天學(xué)Web的話，相信很快就能反映過來，這一條是指著IE說的。
CSS預(yù)處理
常見的有SASS和LESS，主要是簡化CSS編寫，提高效率，并且還可以運(yùn)用變量等CSS沒有的特性。兩個網(wǎng)站上的代碼一看就知道怎么回事了。
版本控制
版本控制主要應(yīng)用于團(tuán)隊(duì)開發(fā)，多人同時編輯一個文件或項(xiàng)目時可以有效避免沖突。常用的工具有Git / GitHub / CVS / Subversion等。
HTML5 API
HTML5兩大塊內(nèi)容，一個語義化標(biāo)簽，純粹是HTML4的升級版，再一個就是時下廣為傳頌的API。當(dāng)你聽說某某站是一個HTML5網(wǎng)站，那么它很可能就用了HTML5 API。
面向?qū)ο缶幊?br>這里更多指的還是面向?qū)ο蟮睦砟詈退季S方式。
后臺語言/技術(shù)
雖然前端不必精通后臺開發(fā)技術(shù)，但你懂的越多，就越容易與后臺人員溝通、協(xié)作。
MySQL
最流行的網(wǎng)站數(shù)據(jù)庫，與PHP是黃金搭檔。
可訪問性
也有翻譯成可用性的，但與好用不同，這一條指的是應(yīng)該考慮哪些感官有障礙的用戶，比如視覺/聽覺上不太好、色彩辨析能力不太好的等等，讓他們也盡可能地使用網(wǎng)站。
WAI-ARIA(Web Accessibility Initiative – Accessible Rich Internet Applications)
很多網(wǎng)頁會利用JS等技術(shù)動態(tài)生成內(nèi)容及交互操作，這不僅對搜索引擎不友好、對上面提到的感官有障礙需要依賴解析器的用戶也不友好，WAI-ARIA就是為了解決這類可用性問題而制定。
微數(shù)據(jù)/微格式
微格式是利用HTML標(biāo)簽的屬性來滲透一些具有特殊意義的值，比如<div class=”tel”>，很簡單的一個類定義，而對于微格式來說，這個標(biāo)簽里的內(nèi)容就是一個電話號碼(telephone)，而不支持微格式的瀏覽器則正常作為class來處理。
HTML5/CSS3 Polyfills
Polyfill指的是一段代碼或一個插件，作用是讓那些老版本的瀏覽器支持它本來不支持的特性，比如讓IE通過Silverlight模擬<canvas>等，可以認(rèn)為是一種逆向增強(qiáng)。
CMS
內(nèi)容管理系統(tǒng)，如WordPress、Drupal和Joomla!等，國內(nèi)的還有dede、ecshop等，論壇程序也屬于CMS。CMS就相當(dāng)于網(wǎng)站的操作系統(tǒng)。
功能性的編程
這個意思就是前端人
數(shù)據(jù)格式
XML、JSON等
國際化/本地化
通俗的說就是支持多國語言和使用習(xí)慣。
內(nèi)容策略
為網(wǎng)站開發(fā)項(xiàng)目制定的適用于所有內(nèi)容編輯(創(chuàng)建、傳播和管理)的策略。
離線Web App
正則表達(dá)式
.htaccess基礎(chǔ)知識
用于配置Apache服務(wù)器。
SVG
一種可用于網(wǎng)頁的矢量圖格式
圖形圖像軟件
Photoshop、Illustrator、Fireworks等。
Web字體
中文意義不大。
SEO基礎(chǔ)知識
搜索引擎優(yōu)化。
