web前端開發(fā)工程是是一個(gè)很新的職業(yè)，在國(guó)內(nèi)乃至國(guó)際上真正開始受到重視的時(shí)間不超過五年。web前端開發(fā)，是從網(wǎng)頁(yè)制作演變而來的，名稱上有很明顯的時(shí)代特征。隨著人們對(duì)用戶體驗(yàn)的要求越來越高，前端開發(fā)的技術(shù)難度越來越大，web前端開發(fā)工程師這一職業(yè)終于從設(shè)計(jì)和制作不分的局面中獨(dú)立出來。

       早期的前端其實(shí)就是table布局，后來發(fā)展到所謂的div+css網(wǎng)站重構(gòu)，再到現(xiàn)在的讓人眼花繚亂的各種各樣的新技術(shù)，web前端技術(shù)發(fā)展是非常快速的，因此選擇了前端這個(gè)行業(yè)就意味著不停的學(xué)習(xí)吧。讓我們先看看張克軍繪制的前端知識(shí)體系結(jié)構(gòu)：

      前端開發(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)簽的分類，

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

      3.按性質(zhì)分類：block-level 和 inline-level

      4.按語義分類：

            Headings:h1,h2,h3,h4,h5,h6

            paragraphs:p

            Text formatting:em,strong,sub,del,ins,small

            Lists:ul,li,ol,dl,dt,dd

            Tables:table,thead,tbody,tr,th,td

            Forms and input: form,input,select,textarea

            Others:div,span,a,img,<!---->

            HTML5:header,footer,article,section

       XHTML

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

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

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

      屬性不能簡(jiǎn)寫

      用ID屬性代替name屬性

      XHTML元素必須被正確地嵌套

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

     標(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)站。

      不要使用table布局，table是用來表格顯示的。

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

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

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

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

      CSS

      1.css基礎(chǔ)知識(shí)

        層疊和繼承

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

        盒模型

        定位

        浮動(dòng)

     2.css進(jìn)階

        css sprite

        瀏覽器兼容性

        IE haslayout和block format content

        css frameworks 

        css3

        css性能優(yōu)化

        less and sass

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

        瀏覽器兼容性

        絕大部分情況下，我們需要考慮瀏覽器的兼容性，目前正在使用的瀏覽器版本非常多，IE6，IE7，IE8，IE9，IE10，Chrome，F(xiàn)irefox，Safari。

        IE haslayout和block format content

        IE haslayout是一個(gè)Internet explore for Windows的私有概念，他決定了一個(gè)元素如何顯示以及約束其包含的內(nèi)容、如何與其他元素交互和建立聯(lián)系、如何響應(yīng)和傳遞應(yīng)用程序事件、用戶事件等。而有些HTML元素則默認(rèn)就有l(wèi)ayout。目前只有IE6和IE7有這個(gè)概念。BFC是W3C css2.1規(guī)范中的一個(gè)概念，他決定了元素如何應(yīng)對(duì)其內(nèi)容進(jìn)行定位。以及與其他元素的關(guān)系和相互作用。這個(gè)其實(shí)和瀏覽器的兼容性有關(guān)，因?yàn)闆Q大部分的兼容性問題都是他們引起的。參考：css BFC和IE haslayout介紹。

        css framework

        css框架是一系列css文件的集合體，包含了基本的元素重置，頁(yè)面排版、網(wǎng)格布局、表單樣式，通用規(guī)則等代碼塊，用于簡(jiǎn)化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，F(xiàn)irefox等現(xiàn)代瀏覽器都支持css3。css3提供了好多以前需要用JavaScript和切圖才能搞定的功能，目前主要功能更有：圓角、多背景、@font-face、動(dòng)畫與漸變、漸變色、box陰影、RGBa-加入透明色、文字陰影。

       css性能優(yōu)化

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

       less and sass

       less和sass都是css預(yù)處理器，用來為css增加一些編輯的特性，無需考慮瀏覽器的兼容問題，例如你可以在css中使用變量、簡(jiǎn)單的程序邏輯、函數(shù)等等在編程語言中的一些基本技巧，可以讓你的css更加簡(jiǎn)潔。適應(yīng)性更強(qiáng)，代碼更直觀等諸多好處。

        sass基于ruby開發(fā)，less既可以在客戶端運(yùn)行，也可以借助node.js或者rhino在服務(wù)器端運(yùn)行。