1. 開篇為什么你學了那么久還是分不清HTML和HTML5說實話我在做前端這幾年被問得最多的問題既不是JavaScript的閉包也不是瀏覽器兼容性而是這種看似基礎(chǔ)到不能再基礎(chǔ)的問題“HTML5和HTML到底是什么關(guān)系CSS3是不是就是CSS的第三個版本那我現(xiàn)在學的是哪個”不光新手容易懵甚至一些寫了兩年業(yè)務(wù)代碼的同事遇到標簽或者CSS動畫時也會下意識說一句“這是HTML5的新特性吧”——然后我一看代碼標簽和屬性用得都沒有錯但概念上完全對不上號。這個現(xiàn)象很有意思。HTML和HTML5的關(guān)系其實很像“微信”和“微信5.0”的關(guān)系微信一直叫微信5.0是它某個大版本階段的代稱你不能說微信5.0就不是微信了。同理HTML5是HTML發(fā)展到第五個主要版本階段的簡稱它依然是HTML本身只是這個階段引入了足夠多的新能力大家為了表達方便干脆直接叫它HTML5。CSS和CSS3的關(guān)系也是類似的邏輯但更不用說——CSS3和CSS2之間有一個完全不同的設(shè)計思路CSS3走的是模塊化路線根本不存在一個統(tǒng)一的“CSS3”標準文本。所以這篇博文的核心目的就是幫你把這條發(fā)展脈絡(luò)徹底捋直HTML是怎么一步步走到今天HTML5這個階段的CSS又是怎么從“小打小鬧”變成“模塊化大雜燴”的以及你在實際寫網(wǎng)頁時哪些能力是HTML5時代才有的哪些能力其實CSS2就已經(jīng)支持了。這不是什么高深的技術(shù)剖析就是一份能讓你真正建立起完整認知框架的“版本世系圖”。如果你正準備做網(wǎng)頁設(shè)計作業(yè)、想系統(tǒng)自學前端、或者只是被面試題里“HTML5新增了哪些特性”問到懷疑人生這篇文章都適合你?？赐昴銜l(fā)現(xiàn)這些術(shù)語背后的邏輯其實特別樸素樸素的就像看一棵樹的年輪一圈一圈長出來的。2. 版本號背后的真實含義HTML的“5”和CSS的“3”到底指什么先聊聊最讓人困惑的版本號。HTML的版本演進路徑大致是HTML 2.0 → HTML 3.2 → HTML 4.01 → XHTML 1.0 → HTML5。這里面有個小趣聞HTML 1.0從來沒有正式成為標準因為最早期的HTML規(guī)范在IETF互聯(lián)網(wǎng)工程任務(wù)組的草案階段就直接被HTML 2.0取代了。所以嚴格來說HTML的第一份正式標準就是2.0版本但大家在口語里往往把1990年代初期蒂姆·伯納斯-李發(fā)明的那個原始標記語言直接稱為HTML 1.0。這也是為什么很多老教材里你會看到“HTML經(jīng)歷了1.0到5.0”這種說法其實不夠嚴謹?shù)膊浑y理解。HTML的版本號不是隨隨便便按順序跳的。2.0是第一批標準化的標簽集包括你熟知的 、、 這些基礎(chǔ)元素。3.2在1997年發(fā)布加入了表格、applet、腳本支持等把網(wǎng)頁從純文本推向了富媒體同年年底12月HTML 4.0發(fā)布次年12月4.01修訂版定稿這個版本引入了樣式表CSS、框架頁面、更豐富的表單控件算是桌面互聯(lián)網(wǎng)時代最成熟的一個版本。很多老程序員直到今天寫郵件模板的時候依然恪守HTML 4.01的規(guī)范——因為郵件客戶端對HTML5的支持至今都很糟糕。而XHTML 1.0出現(xiàn)在2000年本質(zhì)上是把HTML 4.01用XML語法重寫了一遍規(guī)則更嚴格所有標簽必須閉合、屬性必須小寫、標簽必須正確嵌套。當時業(yè)界一片叫好覺得這是未來結(jié)果沒想到這條路直接走死了——因為嚴格程度太高開發(fā)者怨聲載道瀏覽器廠商也不愿意完全放棄對錯誤語法頁面的寬容渲染。于是瀏覽器廠商和W3C之間的分歧在2004年爆發(fā)Opera、Mozilla和Apple聯(lián)合成立了WHATWG組織開始編寫一個更務(wù)實、向后兼容的HTML續(xù)篇這就是HTML5的雛形。再說CSS。CSS的版本演進比HTML清晰一些CSS1在1996年發(fā)布定義了最基礎(chǔ)的字體、顏色、間距等排版屬性CSS2在1998年發(fā)布加入了定位、浮動、z-index、媒體類型等強大的布局能力這條分支后來在2011年還推出了CSS 2.1修訂版并成了支持時間最久的標準之一。但CSS3嚴格來說不是一個可以在W3C官網(wǎng)上直接下載的完整規(guī)范文檔而是一個總稱——它由幾十個相互獨立的模塊組成每個模塊單獨推進、單獨定級比如Selectors Level 3、Media Queries Level 3、Colors Level 3、Flexbox現(xiàn)在叫CSS Flexible Box Layout Module Level 1等。所以你會發(fā)現(xiàn)CSS3的“3”更像一個年代符號而不是一個統(tǒng)一的版本號2009年前后大部分瀏覽器開始引入CSS3的模塊能力人們就把它統(tǒng)稱為CSS3。3. HTML5的誕生故事為什么它不是HTML的“小改款”講HTML5就不能不提它背后的標準之爭因為這個版本的設(shè)計哲學跟前面所有HTML版本完全不同。此前的HTML版本方向始終是“如何用標簽描述更多類型的內(nèi)容”而HTML5要回答的問題是在移動互聯(lián)網(wǎng)、富交互、視頻音頻大量普及的時代瀏覽器本身該具備哪些更底層的應(yīng)用能力這個方向的轉(zhuǎn)變是有現(xiàn)實原因的。2000年代后期Flash正如日中天網(wǎng)頁視頻靠Flash、網(wǎng)頁游戲靠Flash、復(fù)雜動畫還是靠Flash。但Flash有一個致命問題它不開放、不穩(wěn)定、還不支持蘋果的iOS設(shè)備。2010年喬布斯公開發(fā)表《Thoughts on Flash》宣布iPhone和iPad全面不支持Flash這一下子等于把整個Web平臺逼上了絕路如果沒有替代方案移動端的網(wǎng)頁視頻、游戲、動畫全都做不了。HTML5正是在這個歷史節(jié)點上扛起了這面大旗把、、這些原本需要插件才能實現(xiàn)的能力直接做成了瀏覽器原生支持的標準標簽和API。這就是為什么總有人說“HTML5的出現(xiàn)和iPhone的流行有直接關(guān)系”這不是坊間八卦而是真實的技術(shù)史。HTML5在2014年10月28日正式發(fā)布為W3C推薦標準。這個“正式發(fā)布”你如果放在當時看其實已經(jīng)不太重要了——因為等到2014年Chrome、Firefox、Safari、IE9以上版本早就把HTML5的大部分特性支持得差不多了。標準文件的落定更像是給一項已經(jīng)大規(guī)模應(yīng)用的技術(shù)補了一張身份證而不是發(fā)令槍。所以如果今天還有人跟你說“等HTML5標準全面支持之后再學吧”你可以直接告訴他HTML5不是你理解的單一標準而是一個持續(xù)演進的“大家族”你現(xiàn)在寫的每一個語義化標簽、每一次canvas繪圖、每一個操作歷史記錄的API都屬于這個家族的一員。關(guān)于HTML5的具體內(nèi)容你只需要抓住幾個結(jié)構(gòu)性變化第一文檔聲明變得極其簡單就一行 以前HTML 4.01那串冗長的DTD聲明徹底退出歷史舞臺第二新增了一批語義化標簽、、、、、這些標簽沒有太多樣式效果卻能讓搜索引擎和開發(fā)者一眼看懂頁面結(jié)構(gòu)第三多媒體原生支持和直接干掉了Flash的命第四提供了一整套JavaScript API體系地理定位、本地存儲localStorage、拖放、Web Worker、WebSocket、History API等等這正是“網(wǎng)頁應(yīng)用化”的基礎(chǔ)。