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