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