2018-5-8 周周
web前端開發工程是是一個很新的職業,在國內乃至國際上真正開始受到重視的時間不超過五年。web前端開發,是從網頁制作演變而來的,名稱上有很明顯的時代特征。隨著人們對用戶體驗的要求越來越高,前端開發的技術難度越來越大,web前端開發工程師這一職業終于從設計和制作不分的局面中獨立出來。
早期的前端其實就是table布局,后來發展到所謂的div+css網站重構,再到現在的讓人眼花繚亂的各種各樣的新技術,web前端技術發展是非??焖俚?,因此選擇了前端這個行業就意味著不停的學習吧。讓我們先看看張克軍繪制的前端知識體系結構:
前端開發的核心是HTML+CSS+JavaScript。本質上他們構成了一個MVC框架,即HTML作為信息模型(Model),css控制樣式(View),JavaScript負責調度數據和實現某種展現邏輯(Controller)。
HTML
1.標簽的分類,
2.標簽表示一個元素
3.按性質分類: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標準。W3C將XHTML定義為的HTML版本,XHTML將逐漸取代HTML。XHTML是通過把HTML和XML各自的長處加以結合形成的。XHTML語法規則如下:
屬性名和標簽名稱必須小寫
屬性值必須加引號
屬性不能簡寫
用ID屬性代替name屬性
XHTML元素必須被正確地嵌套
XHTML元素必須被關閉
標簽語義化
為表達語義而標記文檔,而不是為了樣式,結構良好的文檔可以向瀏覽器傳達盡可能多的語義,不論是瀏覽器位于掌上電腦還是時髦的桌面圖形瀏覽器。結構良好的文檔都能向用戶傳達可視化的語義即使是在老的瀏覽器,或是在被用戶關閉了CSS的現代瀏覽器中。同時結構良好的HTML代碼也有助于搜索引擎索引你的網站。
不要使用table布局,table是用來表格顯示的。
不要到處濫用div標簽,div是用來分塊用的。
不要使用樣式標簽,如font,center,big,small,b,i,樣式可以用CSS來控制,b和i可以用strong和em來代替。
不要使用換行標簽<br />和空格來控制樣式,請用CSS。
盡量不要使用內聯CSS
CSS
1.css基礎知識
層疊和繼承
優先級
盒模型
定位
浮動
2.css進階
css sprite
瀏覽器兼容性
IE haslayout和block format content
css frameworks
css3
css性能優化
less and sass
css sprite主要用于前端性能優化的一種技術,原理是通過多張背景圖合成在一張圖片上從而減少http請求,加快載入速度。
瀏覽器兼容性
絕大部分情況下,我們需要考慮瀏覽器的兼容性,目前正在使用的瀏覽器版本非常多,IE6,IE7,IE8,IE9,IE10,Chrome,Firefox,Safari。
IE haslayout和block format content
IE haslayout是一個Internet explore for Windows的私有概念,他決定了一個元素如何顯示以及約束其包含的內容、如何與其他元素交互和建立聯系、如何響應和傳遞應用程序事件、用戶事件等。而有些HTML元素則默認就有layout。目前只有IE6和IE7有這個概念。BFC是W3C css2.1規范中的一個概念,他決定了元素如何應對其內容進行定位。以及與其他元素的關系和相互作用。這個其實和瀏覽器的兼容性有關,因為決大部分的兼容性問題都是他們引起的。參考:css BFC和IE haslayout介紹。
css framework
css框架是一系列css文件的集合體,包含了基本的元素重置,頁面排版、網格布局、表單樣式,通用規則等代碼塊,用于簡化web前端開發的工作,提高工作效率。目前常見框架有:
960 grid system
blueprint css
bluetrip
minimum page
還是一個比較出名的和特殊的框架是Twitter的bootstrap,bootstrap是快速開發web應用程序前端的工具包。它是一個css和HTML的集合,它使用了的瀏覽器技術,給你的web開發提供了時尚的版式,表單,buttons,表格,網格系統等等。它是基于less開發的,不支持IE6,在IE7和IE8里效果也不咋地。
css3
雖然css3還沒有正式成為標準,但是IE9+,Chrome,Firefox等現代瀏覽器都支持css3。css3提供了好多以前需要用JavaScript和切圖才能搞定的功能,目前主要功能更有:圓角、多背景、@font-face、動畫與漸變、漸變色、box陰影、RGBa-加入透明色、文字陰影。
css性能優化
css代碼是控制頁面顯示樣式與效果的最直接“工具” ,但是在性能調優時他們通常會被web開發工程師所忽略,而事實上不規范的css會對頁面渲染的效率有嚴重影響,尤其是對于結構復雜的web2.0頁面,這種影響更是不可磨滅的。所以,寫出規范的、高性能的css代碼會極大地提高應用程序的效率。
less and sass
less和sass都是css預處理器,用來為css增加一些編輯的特性,無需考慮瀏覽器的兼容問題,例如你可以在css中使用變量、簡單的程序邏輯、函數等等在編程語言中的一些基本技巧,可以讓你的css更加簡潔。適應性更強,代碼更直觀等諸多好處。
sass基于ruby開發,less既可以在客戶端運行,也可以借助node.js或者rhino在服務器端運行。