下圖是前端工程師圖解：

前端開發(fā)的核心是HTML + CSS + JavaScript俩功。本質(zhì)上它們構(gòu)成一個(gè)MVC框架取逾，即HTML作為信息模型（Model）说莫，CSS控制樣式（View）得运，JavaScript負(fù)責(zé)調(diào)度數(shù)據(jù)和實(shí)現(xiàn)某種展現(xiàn)邏輯（Controller）姑蓝。

HTML

1.標(biāo)簽的分類

• 標(biāo)簽表示一個(gè)元素

• 按性質(zhì)劃分: Block-Level和Inline-Level

• 按語義劃分:

Headings: h1, h2, h3, h4, h5, h6Paragraphs: pText Formatting: em, strong, sub, del, ins, smallLists: ul, li, ol, dl, dt, ddTables: table, thead, tbody, tr, th, tdForms and Input: form, input, select, textareaOthers: div, span, a, img, HTML5: header, footer, article, section

2.XHTML

XHTML 于2000年的1月26日成為 W3C 標(biāo)準(zhǔn)鹅心。W3C 將 XHTML 定義為最新的HTML版本。XHTML 將逐漸取代 HTML纺荧。XHTML是通過把 HTML 和 XML 各自的長處加以結(jié)合形成的旭愧。XHTML 語法規(guī)則如下：

• 屬性名和標(biāo)簽名稱必須小寫

• 屬性值必須加引號(hào)

• 屬性不能簡寫

• 用 Id 屬性代替 name 屬性

• XHTML 元素必須被正確地嵌套

• XHTML 元素必須被關(guān)閉

3.標(biāo)簽的語義化為表達(dá)語義而標(biāo)記文檔，而不是為了樣式宙暇，結(jié)構(gòu)良好的文檔可以向?yàn)g覽器傳達(dá)盡可能多的語義输枯，不論是瀏覽器位于掌上電腦還是時(shí)髦的桌面圖形瀏覽器。結(jié)構(gòu)良好的文檔都能向用戶傳達(dá)可視化的語義占贫，即使是在老的瀏覽器桃熄，或是在被用戶關(guān)閉了 CSS 的現(xiàn)代瀏覽器中。同時(shí)結(jié)構(gòu)良好的HTML代碼也有助于搜索引擎索引你的網(wǎng)站型奥。（web前端學(xué)習(xí)交流群：328058344 禁止閑聊瞳收，非喜勿進(jìn)！）

• 不要使用table布局厢汹，table是用來表格顯示的螟深。

• 不要到處濫用div標(biāo)簽，div是用來分塊用的

• 不要使用樣式標(biāo)簽烫葬，如font, center, big, small, b, i界弧，樣式可以用CSS來控制，b和i可以用strong和em來代替搭综。

• 不要使用換行標(biāo)簽和空格來控制樣式垢箕，請(qǐng)用CSS。

• 盡量不要使用內(nèi)聯(lián)CSS

CSS

1.基礎(chǔ)

• 層疊和繼承

• 優(yōu)先級(jí)

• 盒模型

• 定位

• 浮動(dòng)

2.進(jìn)階

• CSS Sprite：CSS Sprite主要用于前端性能優(yōu)化的一種技術(shù)兑巾，原理是通過將多張背景圖片合成在一張圖片上從而減少HTTP請(qǐng)求条获，加快載入速度。

• 瀏覽器兼容性：絕大部分情況下我們需要考慮瀏覽器的兼容性闪朱，目前正在使用的瀏覽器版本非常多月匣，IE6, IE7, IE8, IE9, IE10, Chrome, Firefox, Safari钻洒。

• IE HasLayout和Block Format Content：IE HasLayout是一個(gè) Internet Explorer for Windows的私有概念，它決定了一個(gè)元素如何顯示以及約束其包含的內(nèi)容锄开、如何與其他元素交互和建立聯(lián)系素标、如何響應(yīng)和傳遞應(yīng)用程序事件、用戶事件等萍悴。這種渲染特性可以通過某些 CSS 屬性被不可逆轉(zhuǎn)地觸發(fā)头遭。而有些 HTML 元素則默認(rèn)就具有”layout”。目前只有IE6和IE7有這個(gè)概率癣诱。BFC是 W3C CSS 2.1 規(guī)范中的一個(gè)概念计维，它決定了元素如何對(duì)其內(nèi)容進(jìn)行定位，以及與其他元素的關(guān)系和相互作用撕予。這個(gè)其實(shí)和瀏覽器的兼容性有關(guān)鲫惶，因?yàn)榻^大部分的兼容性問題都是它們引起的。（web前端學(xué)習(xí)交流群：328058344 禁止閑聊实抡，非喜勿進(jìn)Ｇ纺浮）

• CSS Frameworks：CSS框架是一系列CSS文件的集合體，包含了基本的元素重置吆寨，頁面排版赏淌、網(wǎng)格布局、表單樣式啄清、通用規(guī)則等代碼塊,用于簡化web前端開發(fā)的工作六水，提高工作效率。目前常見框架有：

960 Grid System
Blueprint CSS
Bluetrip
Minimum Page

還是一個(gè)比較出名和特殊的框架是Twitter的Bootstrap辣卒。Bootstrap是快速開發(fā)Web應(yīng)用程序的前端工具包掷贾。它是一個(gè)CSS和HTML的集合，它使用了最新的瀏覽器技術(shù)添寺，給你的Web開發(fā)提供了時(shí)尚的版式胯盯，表單，buttons计露，表格博脑，網(wǎng)格系統(tǒng)等等。它是基于Less開發(fā)的票罐。不支持IE6叉趣，在IE7和IE8里效果也不咋地。

CSS3：

雖然CSS3還沒有正式成為標(biāo)準(zhǔn)该押，但是包括IE9+, chrome, Firefox等現(xiàn)代瀏覽器都支持CSS3疗杉。CSS提供了好多以前需要用JavaScript和切圖才能搞定的功能，目前主要功能有：

圓角
多背景
@font-face
動(dòng)畫與漸變
漸變色
Box陰影
RGBa-加入透明色
文字陰影

• CSS性能優(yōu)化：CSS 代碼是控制頁面顯示樣式與效果的最直接“工具”，但是在性能調(diào)優(yōu)時(shí)他們通常被 Web 開發(fā)工程師所忽略烟具，而事實(shí)上不規(guī)范的 CSS 會(huì)對(duì)頁面渲染的效率有嚴(yán)重影響梢什，尤其是對(duì)于結(jié)構(gòu)復(fù)雜的 Web 2.0 頁面，這種影響更是不可磨滅朝聋。所以嗡午，寫出規(guī)范的、高性能的 CSS 代碼會(huì)極大的提高應(yīng)用程序的效率冀痕。

• LESS and SASS：CSS 預(yù)處理器荔睹，用來為 CSS 增加一些編程的的特性，無需考慮瀏覽器的兼容性問題言蛇，例如你可以在 CSS 中使用變量僻他、簡單的程序邏輯、函數(shù)等等在編程語言中的一些基本技巧腊尚，可以讓你的 CSS 更見簡潔吨拗，適應(yīng)性更強(qiáng)，代碼更直觀等諸多好處跟伏。SASS基于Ruby開發(fā)丢胚。LESS既可以在客戶端運(yùn)行，也可以借助Node.js或者Rhino在服務(wù)端運(yùn)行受扳。

javascript

1.基礎(chǔ)

• 數(shù)據(jù)類型

• 變量

• 表達(dá)式與運(yùn)算符

• 控制語句

• 函數(shù)

• 異常

• OO

• 事件

• BOM

• 閉包

2.進(jìn)階

• DOM：DOM即文檔對(duì)象模型，HTML DOM 定義了訪問和操作HTML文檔的標(biāo)準(zhǔn)方法兔跌。幾乎所有的現(xiàn)代瀏覽器都能很好的支持DOM了勘高。

• JSON：(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式，易于人閱讀和編寫坟桅，同時(shí)也易于機(jī)器解析和生成华望。是目前事實(shí)上數(shù)據(jù)交換的標(biāo)準(zhǔn)格式，幾乎所有語言都支持JSON仅乓，比XML強(qiáng)太多了赖舟。

• AJAX：即“Asynchronous JavaScript and XML”（異步JavaScript和- XML)，AJAX并非縮寫詞夸楣，而是由Jesse James Gaiiett創(chuàng)造的名詞宾抓，由Google發(fā)揚(yáng)光大。用于創(chuàng)建更好更快以及交互性更強(qiáng)的 Web 應(yīng)用程序的技術(shù)豫喧。

• JavaScript Frameworks：極大簡化我們JavaScript編程的工作量石洗，它主要提供了以下幾個(gè)主要功能： DOM操作，跨瀏覽器兼容性紧显，以及程序架構(gòu)讲衫。當(dāng)然像jQuery它本身其實(shí)并不是一個(gè)框架，它是一個(gè)庫(lib)孵班。目前主流的框架或庫有如下幾個(gè)：

jQuery
YUI
DOJO

• HTML5:同CSS3類似涉兽，即雖然沒有成為標(biāo)準(zhǔn)招驴，但是主流的瀏覽器都支持了。HTML5不是HMTL，雖然也提供了一些新標(biāo)簽，但是它的主要用途還是JavaScript忆谓。HTML5主要提供以下功能：

本地音頻視頻播放
Canvas/SVG
地理信息
硬件加速
本地運(yùn)行
本地存儲(chǔ)
從桌面拖放文件到瀏覽器上傳
語義化標(biāo)簽播歼，F(xiàn)orm表單

• 前端模板:主要是為了解決復(fù)雜的數(shù)據(jù)拼接問題，可以將模板語言轉(zhuǎn)換化為HTML結(jié)構(gòu)筋蓖，可以大大簡化工作量，同時(shí)代碼的可維護(hù)性得到很大的提高。目前比較主流前端模板有：

MustCache
JsRender

• 前端MVC:Web應(yīng)用的功能越來越強(qiáng)雕蔽，Javascript代碼也越來越多，大量的JS代碼要以何種架構(gòu)來組織就成了一個(gè)亟待解決的問題宾娜，于是就有人把傳統(tǒng)的MVC架構(gòu)移植到前端來解決這些問題批狐。目前主流前端MVC框架主要有以下這些：
  （web前端學(xué)習(xí)交流群：328058344 禁止閑聊，非喜勿進(jìn)Ｇ八）

Backbone.js
Spine
YUI
Agility.js
Ember.js
Batman.js
Dojo
AngularJS(MVVM)
KnockoutJS(MVVM)

• 模塊化開發(fā):特點(diǎn)是“模塊化開發(fā)嚣艇，按需加載“。這其中CommonJS組織定義了AMD的規(guī)范用來規(guī)范瀏覽器端的模塊定義华弓。RequireJS和SeaJS是實(shí)現(xiàn)了AMD的兩個(gè)優(yōu)秀的框架食零。詳見：http://www.weakweb.com/articles/341.html

• JavaScript單元測(cè)試:QUnit

• JavaScript設(shè)計(jì)模式

• NodeJS:把JavaScript移植到服務(wù)器端了，這樣前端和后端就可以使用同樣的技術(shù)寂屏，方便統(tǒng)一開發(fā)贰谣。而且NodeJS是非阻塞調(diào)用的，在特定領(lǐng)域性能是非常強(qiáng)勁的迁霎。而且這是前端開發(fā)人員進(jìn)軍后臺(tái)開發(fā)的好機(jī)會(huì)吱抚，進(jìn)而前后端統(tǒng)一開發(fā)，但又不用去學(xué)習(xí)其它后臺(tái)開發(fā)語言考廉。

• ES5:ECMAScript 5秘豹，也就是最新的JavaScript規(guī)范，對(duì)之前的JavaScript作了很多改進(jìn)昌粤，增加了好多新的特性既绕，比如JSONECMAScript 5，也就是最新的JavaScript規(guī)范婚苹，對(duì)之前的JavaScript作了很多改進(jìn)岸更，增加了好多新的特性，比如JSON膊升。

Others

• 響應(yīng)式設(shè)計(jì)：伴隨著各種智能設(shè)備的流行怎炊，響應(yīng)式設(shè)計(jì)現(xiàn)在是非常火熱。以前做網(wǎng)頁只要面向PC機(jī)的瀏覽器评肆，頁面直接固定寬度就行债查，比如960px，而現(xiàn)在通過手機(jī)的訪問量已經(jīng)超過PC機(jī)瓜挽，并且設(shè)備的尺寸多種多樣盹廷，未來會(huì)更多。在這種背景下久橙，網(wǎng)頁支持所有設(shè)備進(jìn)行訪問是基本要求了俄占，而響應(yīng)式設(shè)計(jì)能很好的解決這些問題。

• Http1.1：GET淆衷，POST方式缸榄，Request/Response 頭部，狀態(tài)碼等祝拯。

• Web移動(dòng)開發(fā)：開發(fā)方式一般是native的方式或者Web方式甚带，作為前端開發(fā)人員來說自然是去學(xué)習(xí)Web移動(dòng)開發(fā)了。PhoneGap是必學(xué)的佳头，前端層面的框架如jQueryMobile, Sencha Touch, jQTouch等都是不錯(cuò)的選擇鹰贵。

• 前端安全：隨著前端技術(shù)的發(fā)展,安全問題已經(jīng)從服務(wù)器悄然來到了每一個(gè)用戶的的面前，盜取用戶數(shù)據(jù), 制造惡意的可以自我復(fù)制的蠕蟲代碼,讓病毒在用戶間傳播,使服務(wù)器當(dāng)?shù)? 更有甚者可能會(huì)在用戶不知覺得情況下,讓用戶成為攻擊者,這絕對(duì)不是駭人聽聞康嘉。富客戶端的應(yīng)用越來越廣碉输，前端的安全問題也隨之增多。常見的攻擊方法有：

• XSS凄鼻，跨站腳本攻擊(Cross Site Script)腊瑟。它指的是惡意攻擊者往Web頁面里插入惡意html代碼，當(dāng)用戶瀏覽該頁之時(shí)块蚌，嵌入的惡意html代碼會(huì)被執(zhí)行，從而達(dá)到惡意用戶的特殊目的膘格。
• CSRF(Cross Site Request Forgery)峭范，跨站點(diǎn)偽造請(qǐng)求。顧名思義就是 通過偽造連接請(qǐng)求在用戶不知情的情況下瘪贱，讓用戶以自己的身份來完成攻擊者需要達(dá)到的一些目的纱控。
• cookie劫持，通過獲取頁面的權(quán)限菜秦，在頁面中寫一個(gè)簡單的到惡意站點(diǎn)的請(qǐng)求甜害，并攜帶用戶的cookie 獲取cookie后通過cookie 就可以直以被盜用戶的身份登錄站點(diǎn)。

• 跨域處理：同源策略規(guī)定跨域之間的腳本是隔離的球昨，一個(gè)域的腳本不能訪問和操作另外一個(gè)域的絕大部分屬性和方法尔店。所謂的跨域處理就是處于不用域之間的腳步互相調(diào)用，目前有很多方法來處理它。

• 調(diào)試工具：前端的調(diào)試工具很多嚣州，比如Firebug鲫售，Webkit核心的web inspector, IE的iedeveloper。HTTP相關(guān)的fiddler, httpwatch等该肴，還有格式化代碼的jsbeatutifier情竹，它有助于閱讀壓縮處理過的JavaScript代碼。IETester可以模擬所有的IE版本匀哄，是調(diào)試IE兼容性的好工具秦效。

• SEO：搜索引擎優(yōu)化

• A/B test：確定兩個(gè)元素或版本（A和B）哪個(gè)版本更好，你需要同時(shí)實(shí)驗(yàn)兩個(gè)版本涎嚼。最后阱州，選擇最好的版本使用。

• 可用性/可訪問性：

• 可用性指的是：產(chǎn)品是否容易上手铸抑，用戶能否完成任務(wù)贡耽，效率如何，以及這過程中用戶的主觀感受可好鹊汛，是從用戶的角度來看產(chǎn)品的質(zhì)量蒲赂。可用性好意味著產(chǎn)品質(zhì)量高刁憋，是企業(yè)的核心競(jìng)爭(zhēng)力滥嘴。
• 可訪問性：上網(wǎng)用戶中那些視力受損的人，通過屏幕閱讀器使用鍵盤命令將網(wǎng)頁的內(nèi)容讀給他們聽至耻。以語義化的HTML（結(jié)構(gòu)和表現(xiàn)相分離的HTML）編寫的網(wǎng)頁文件若皱，就可以讓此類用戶更容易導(dǎo)航，且網(wǎng)頁文件中的重要信息也更有可能被這些用戶找到尘颓。

• 前端流程/部署：Grunt走触，Bower和Yeoman現(xiàn)在幾乎是前端最流行的自動(dòng)化的項(xiàng)目構(gòu)建工具

• 正則表達(dá)式

• 瀏覽器插件開發(fā)

• 瀏覽器原理

溝通能力

優(yōu)秀的前端工程師需要具備良好的溝通能力，因?yàn)槟愕墓ぷ髋c很多人的工作息息相關(guān)疤苹。在任何情況下互广，前端工程師至少都要滿足下列四類客戶的需求。
（web前端學(xué)習(xí)交流群：328058344 禁止閑聊卧土，非喜勿進(jìn)１怪濉）

• 產(chǎn)品經(jīng)理——這些是負(fù)責(zé)策劃應(yīng)用程序的一群人。他們能夠想象出怎樣通過應(yīng)用程序來滿足用戶需求尤莺，以及怎樣通過他們?cè)O(shè)計(jì)的模式賺到錢（往往事與愿違）旅敷。一般來說，這些人追求的是豐富的功能颤霎。

• UI設(shè)計(jì)師——這些人負(fù)責(zé)應(yīng)用程序的視覺設(shè)計(jì)和交互模擬媳谁。他們關(guān)心的是用戶對(duì)什么敏感涂滴、交互的一貫性以及整體的好用性。他們熱衷于流暢靚麗但并不容易實(shí)現(xiàn)的用戶界面韩脑，但考慮問題往往不周全氢妈。

• 項(xiàng)目經(jīng)理——這些人負(fù)責(zé)實(shí)際地運(yùn)行和維護(hù)應(yīng)用程序。項(xiàng)目管理的主要關(guān)注點(diǎn)段多，無外乎正常運(yùn)行時(shí)間（uptime）——應(yīng)用程序始終正呈琢浚可用的時(shí)間、性能和截止日期进苍。項(xiàng)目經(jīng)理追求的目標(biāo)往往是盡量保持事情的簡單化加缘，以及不在升級(jí)更新時(shí)引入新問題。

• 最終用戶——當(dāng)然是應(yīng)用程序的主要消費(fèi)者觉啊。盡管我們不會(huì)經(jīng)常與最終用戶打交道拣宏，但他們的反饋意見至關(guān)重要；沒人想用的應(yīng)用程序毫無價(jià)值杠人。最終用戶要求最多的就是對(duì)個(gè)人有用的功能勋乾，以及競(jìng)爭(zhēng)性產(chǎn)品所具備的功能。

從某種意義上說嗡善，優(yōu)秀的前端工程師就像是一位大使辑莫，需要時(shí)刻抱著外交官的心態(tài)來應(yīng)對(duì)每一天的工作。

如何提高前端技術(shù)

• Github是一個(gè)優(yōu)秀的代碼托管網(wǎng)站罩引，我們可以在上創(chuàng)建我們個(gè)人的項(xiàng)目各吨，同時(shí)也是學(xué)習(xí)的好地方，我們可以關(guān)注其它優(yōu)秀的項(xiàng)目袁铐。JSFiddle是一個(gè)web開發(fā)人員的練習(xí)場(chǎng)揭蜒，一個(gè)可以在很多方面應(yīng)用的工具。我們可以用他來在線編輯一些HTML,CSS,javascript片段剔桨。你編輯的代碼可以與其他人分享屉更，或嵌入你的博客等
• 閱讀優(yōu)秀的開源代碼
• 關(guān)注技術(shù)發(fā)展趨勢(shì)，了解最新的行業(yè)技術(shù)洒缀，可以通過訂閱知名博客偶垮，閱讀技術(shù)新聞獲取
• 寫博客/記筆記，可以進(jìn)行知識(shí)積累帝洪。

前端修煉之路

入門：打基礎(chǔ)同時(shí)能參與到項(xiàng)目中去。

• HMTL & XHTML
• CSS基礎(chǔ)知識(shí)
• JavaScript基礎(chǔ)知識(shí)
• DOM
• JSON
• AJAX
• JavaScript Frameworks

深入：掌握前端核心技術(shù)脚猾，可以獨(dú)立干活葱峡。

• HTML5標(biāo)簽，TML標(biāo)簽語義化
• CSS Sprite
• 瀏覽器兼容性
• IE HasLayout和Block Format Content
• CSS3
• 精通JavaScript Frameworks
• HTML5
• 前端模板
• 前端MVC
• 模塊化開發(fā)
• Http1.1
• 調(diào)試工具
• 正則表達(dá)式
• 響應(yīng)式設(shè)計(jì)

潛出：把握整個(gè)前端項(xiàng)目龙助，做整個(gè)前端項(xiàng)目的架構(gòu)師砰奕。

• CSS性能優(yōu)化
• LESS and SASS
• JavaScript單元測(cè)試
• JavaScript設(shè)計(jì)模式
• NodeJS
• ES5
• Web移動(dòng)開發(fā)
• 瀏覽器插件開發(fā)
• 前端安全
• 跨域處理
• SEO
• A/B test
• 可用性/可訪問性
• 前端流程/部署
• 瀏覽器原理

出師：一代宗師蛛芥。

• 不停的學(xué)習(xí)新的技術(shù)
• 交互設(shè)計(jì)能力，管理能力

前端的未來

• 走技術(shù)流路線军援，即深入研究前端相關(guān)的各項(xiàng)技術(shù)仅淑，比如瀏覽器原理，JavaScript本身的研究胸哥，W3C各種標(biāo)準(zhǔn)等涯竟。前端技術(shù)發(fā)展很快，各種新技術(shù)層出不窮空厌，這條路走下去是很累的庐船。

• 往交互設(shè)計(jì)方向走，前端工程師做到一定程度后交互設(shè)計(jì)能力也會(huì)得到很大的提高嘲更，對(duì)整個(gè)信息架構(gòu)的把握能力也會(huì)更強(qiáng)筐钟。可以很好的彌補(bǔ)視覺設(shè)計(jì)師在交換設(shè)計(jì)上的不足赋朦。這條路其實(shí)和第一條是不沖突的篓冲，甚至可以理解為同一條路。

• 往后走宠哄，即去學(xué)習(xí)后臺(tái)開發(fā)的技術(shù)壹将，比如JAVA/PHP等，其實(shí)絕大部分傳統(tǒng)的后臺(tái)開發(fā)人員就是這個(gè)狀態(tài)琳拨，即前后臺(tái)都做瞭恰。個(gè)人認(rèn)為這樣的話其實(shí)已經(jīng)走回老路了，畢竟前端就是從原來的后臺(tái)開發(fā)那里獨(dú)立出來的狱庇。

• 往管理方向惊畏，比如項(xiàng)目經(jīng)理，或者干脆轉(zhuǎn)行密任，比如公務(wù)員等颜启。