1.1　HTML5概述

從2010年開始，HTML5和CSS3就一直是網(wǎng)絡(luò)世界倍受追捧的技術(shù)熱點(diǎn)。以HTML5+CSS3為主的網(wǎng)絡(luò)時(shí)代，使互聯(lián)網(wǎng)進(jìn)入了一個(gè)嶄新的發(fā)展階段。

1.1.1　HTML版本概覽

HTML從誕生至今，經(jīng)歷了近30年的發(fā)展，其中經(jīng)歷的版本及發(fā)布日期如表1.1所示。

表1.1　HTML語言的發(fā)展過程

1.1.2　HTML5誕生記

在20世紀(jì)末期，W3C開始琢磨著改良HTML語言，當(dāng)時(shí)的版本是HTML4.01。但是在后來的開發(fā)和維護(hù)過程中，出現(xiàn)了方向性分歧：是開發(fā)XHTML 1，再到XHTML 2，最后終極目標(biāo)是XML；還是堅(jiān)持實(shí)用主義原則，快速開發(fā)出改良的HTML5版本？

2004年W3C成員內(nèi)部的一次研討會上，當(dāng)時(shí)Opera公司的代表伊恩·希克森（Ian Hickson）提出了一個(gè)擴(kuò)展和改進(jìn)HTML的建議。他建議新任務(wù)組可以跟XHTML 2并行，但是在已有HTML的基礎(chǔ)上開展工作，目標(biāo)是對HTML進(jìn)行擴(kuò)展。但是W3C投票表示反對，因?yàn)樗麄冋J(rèn)為HTML已經(jīng)毫無前景，XHTML 2才是未來的方向。

然后，Opera、Apple等瀏覽器廠商，以及部分成員忍受不了W3C的工作機(jī)制和拖沓的行事節(jié)奏，決定脫離W3C，他們成立了WHATWG（Web Hypertext Applications Technology Working Group, Web超文本應(yīng)用技術(shù)工作組），這就為HTML5將來的命運(yùn)埋下了伏筆。

WHATWG決定完全脫離W3C，在HTML的基礎(chǔ)上開展工作，向其中添加一些新東西。這個(gè)工作組的成員里有瀏覽器廠商，因此他們可以保證實(shí)現(xiàn)各種新奇、實(shí)用的點(diǎn)子。結(jié)果，大家不斷提出一些好點(diǎn)子，并且逐一整合到新版本瀏覽器中。

WHATWG的工作效率很高，不久就初見成效。在此期間，W3C的XHTML 2沒有什么實(shí)質(zhì)性的進(jìn)展。在2006年，蒂姆·伯納斯－李寫了一篇博客反思HTML發(fā)展歷史：“你們知道嗎？我們錯了。我們錯在企圖一夜之間就讓W(xué)eb跨入XML時(shí)代，我們的想法太不切實(shí)際了，是的，也許我們應(yīng)該重新組建HTML工作組了。”

W3C在2007年組建了HTML5工作組。這個(gè)工作組面臨的第一個(gè)問題是“我們是從頭開始做起呢，還是在2004年成立的那個(gè)叫WHATWG的工作組既有成果的基礎(chǔ)上開始工作呢？”

答案是顯而易見的，他們當(dāng)然希望從已經(jīng)取得的成果著手，以此為基礎(chǔ)開展工作。工作組投了一次票，同意在WHATWG工作成果的基礎(chǔ)上繼續(xù)開展工作。

第二個(gè)問題就是如何理順兩個(gè)工作組之間的關(guān)系。W3C這個(gè)工作組的編輯應(yīng)該由誰擔(dān)任？是不是還讓W(xué)HATWG的編輯，也就是現(xiàn)在Google的伊恩·希克森來兼任？于是他們又投了一次票，贊成讓伊恩·希克森擔(dān)任W3C HTML5規(guī)范的編輯，同時(shí)兼任WHATWG的編輯，更有助于新工作組開展工作。

這就是他們投票的結(jié)果，也就是我們今天看到的局面：一種格式，兩個(gè)版本。WHATWG網(wǎng)站上有這個(gè)規(guī)范，而W3C網(wǎng)站上同樣也有一份。

如果不了解內(nèi)情，你很可能會產(chǎn)生這樣的疑問：“哪個(gè)版本才是真正的規(guī)范？”當(dāng)然，這兩個(gè)版本內(nèi)容是一樣的，基本上相同。實(shí)際上，這兩個(gè)版本將來還會分道揚(yáng)鑣。現(xiàn)在已經(jīng)有了分道揚(yáng)鑣的跡象。W3C最終要制定一個(gè)具體的規(guī)范，這個(gè)規(guī)范會成為一個(gè)工作草案，定格在某個(gè)歷史時(shí)刻。

而WHATWG還在不斷地迭代。即使目前的HTML5也不能完全涵蓋WHATWG正在從事的工作。最準(zhǔn)確的理解就是WHATWG正在開發(fā)一項(xiàng)簡單的HTML或Web技術(shù)，因?yàn)檫@才是他們工作的核心目標(biāo)。然而，同時(shí)存在兩個(gè)這樣的工作組，這兩個(gè)工作組同時(shí)開發(fā)一個(gè)基本相同的規(guī)范，這無論如何也容易讓人產(chǎn)生誤解，誤解就可能造成麻煩。

其實(shí)這兩個(gè)工作組背后各自有各自的流程，因?yàn)樗鼈兊睦砟钔耆煌Ｔ赪HATWG內(nèi)部，可以說是一種獨(dú)裁的工作機(jī)制。伊恩·希克森是編輯。他會聽取各方意見，在所有成員各抒己見，充分陳述自己的觀點(diǎn)之后，他批準(zhǔn)自己認(rèn)為正確的意見。而W3C則截然相反，可以說是一種民主的工作機(jī)制。所有成員都可以發(fā)表意見，而且每個(gè)人都有投票表決的權(quán)利。這個(gè)流程的關(guān)鍵在于投票表決。從表面上看，WHATWG的工作機(jī)制讓人難以接受，W3C的工作機(jī)制聽起來讓人很舒服，至少體現(xiàn)了人人平等的精神。但在實(shí)踐中，WHATWG的工作機(jī)制運(yùn)行得非常好。這主要?dú)w功于伊恩·希克森。他在聽取各方意見時(shí)，始終可以做到絲毫不帶個(gè)人感情色彩。

從原理上講，W3C的工作機(jī)制很公平，而實(shí)際上卻非常容易在某些流程或環(huán)節(jié)上卡殼，造成工作停滯不前，一件事情要達(dá)成決議往往需要花費(fèi)很長時(shí)間。那到底哪種工作機(jī)制最好呢？個(gè)人認(rèn)為，最好的工作機(jī)制是將二者結(jié)合起來。而事實(shí)也是兩個(gè)規(guī)范制定主體在共同制定一份相同的規(guī)范，這倒是非常有利于兩種工作機(jī)制相互取長補(bǔ)短。

兩個(gè)工作組之所以能夠同心同德，主要原因是HTML5的設(shè)計(jì)思想。因?yàn)閺囊婚_始就確定了設(shè)計(jì)HTML5所要堅(jiān)持的原則。結(jié)果，我們不僅看到了一份規(guī)范，也就是W3C站點(diǎn)上公布的那份文檔，即HTML5語言規(guī)范，還在W3C站點(diǎn)上看到了另一份文檔，也就是HTML5設(shè)計(jì)原理。

1.1.3　HTML5組織

HTML5是W3C與WHATWG合作的結(jié)晶。HTML5開發(fā)主要由下面三個(gè)組織負(fù)責(zé)。

　WHATWG：由來自Apple、Mozilla、Google、Opera等瀏覽器廠商的專家組成，成立于2004年。WHATWG負(fù)責(zé)開發(fā)HTML和Web應(yīng)用API。

　W3C：指World Wide Web Consortium，萬維網(wǎng)聯(lián)盟，負(fù)責(zé)發(fā)布HTML5規(guī)范。

　IETF（因特網(wǎng)工程任務(wù)組）：負(fù)責(zé)Internet協(xié)議開發(fā)。HTML5定義的WebSocket API依賴于新的WebSocket協(xié)議，IETF工作組負(fù)責(zé)開發(fā)這個(gè)協(xié)議。

1.1.4　HTML5開發(fā)規(guī)則

為了避免HTML5開發(fā)過程中出現(xiàn)的各種分歧和偏差，HTML5開發(fā)工作組在共識基礎(chǔ)上建立了一套行事規(guī)則：

　新特性應(yīng)該基于HTML、CSS、DOM以及JavaScript。

　減少對外部插件的依賴，如Flash。

　更優(yōu)秀的錯誤處理。

　更多取代腳本的標(biāo)記。

　HTML5應(yīng)該獨(dú)立于設(shè)備。

　開發(fā)進(jìn)程應(yīng)即時(shí)、透明，傾聽技術(shù)社區(qū)的聲音，吸納社區(qū)內(nèi)優(yōu)秀的Web應(yīng)用。

　允許試錯，允許糾偏，從實(shí)踐中來，服務(wù)于實(shí)踐，快速迭代。

1.1.5　HTML5特性

下面簡單介紹HTML5特性和優(yōu)勢，以便增強(qiáng)讀者自學(xué)HTML5的動力和明確目標(biāo)。

1．兼容性

考慮到互聯(lián)網(wǎng)上HTML文檔已經(jīng)存在20多年了，因此支持所有現(xiàn)存HTML文檔是非常重要的。HTML5不是顛覆性的革新，它的核心理念就是要保持與過去技術(shù)的兼容和過渡。一旦瀏覽器不支持HTML5的某項(xiàng)功能，針對該功能的備選行為就會悄悄運(yùn)行。

2．實(shí)用性

HTML5新增加的元素都是對現(xiàn)有網(wǎng)頁和用戶習(xí)慣進(jìn)行跟蹤、分析和概括而推出的。例如，Google分析了上百萬的頁面，從中分析出了DIV標(biāo)簽的通用ID名稱，并且發(fā)現(xiàn)其重復(fù)量很大，如很多開發(fā)人員使用<div id="header">來標(biāo)記頁眉區(qū)域，為了解決實(shí)際問題，HTML5就直接添加一個(gè)<header>標(biāo)簽。也就是說，HTML5新增的很多元素、屬性或者功能都是根據(jù)現(xiàn)實(shí)互聯(lián)網(wǎng)中已經(jīng)存在的各種應(yīng)用進(jìn)行歸納和提煉，而不是在實(shí)驗(yàn)室中進(jìn)行理想化的虛構(gòu)新功能。

3．效率

HTML5規(guī)范是基于用戶優(yōu)先的原則編寫的，其宗旨是用戶即上帝，這意味著在遇到無法解決的沖突時(shí)，規(guī)范會把用戶放到第一位，其次是頁面制作者，再次是瀏覽器解析標(biāo)準(zhǔn)，接著是規(guī)范制定者（如W3C、WHATWG），最后才考慮理論的純粹性。因此，HTML5的絕大部分是實(shí)用的，只是有些情況下還不夠完美。例如，下面的幾種代碼寫法在HTML5中都能被識別。

    id="prohtml5"
    id=prohtml5
    ID="prohtml5"

當(dāng)然，上面幾種寫法比較混亂，不夠嚴(yán)謹(jǐn)，但是從用戶開發(fā)角度考慮，用戶不在乎代碼怎么寫，根據(jù)個(gè)人書寫習(xí)慣反而提高了代碼編寫效率。

4．安全性

為保證足夠安全，HTML5引入了一種新的基于來源的安全模型，該模型不僅易用，而且對各種不同的API都通用。這個(gè)安全模型可以不需要借助于任何所謂聰明、有創(chuàng)意卻不安全的hack就能跨域進(jìn)行安全對話。

5．分離

在清晰分離表現(xiàn)與內(nèi)容方面，HTML5邁出了很大的步伐。HTML5在所有可能的地方都努力進(jìn)行了分離，包括HTML和CSS。實(shí)際上，HTML5規(guī)范已經(jīng)不支持老版本HTML的大部分表現(xiàn)功能了。

6．簡化

HTML5要的就是簡單、避免不必要的復(fù)雜性。HTML5的口號是：簡單至上，盡可能簡化。因此，HTML5做了以下改進(jìn)：

　以瀏覽器原生能力替代復(fù)雜的JavaScript代碼。

　簡化的DOCTYPE。

　簡化的字符集聲明。

　簡單而強(qiáng)大的HTML5 API。

7．通用性

通用訪問的原則可以分成三個(gè)概念：

　可訪問性：出于對殘障用戶的考慮，HTML5與WAI（Web可訪問性倡議）和ARIA（可訪問的富Internet應(yīng)用）做到了緊密結(jié)合，WAI-ARIA中以屏幕閱讀器為基礎(chǔ)的元素已經(jīng)被添加到HTML中。

　媒體中立：如果可能的話，HTML5的功能在所有不同的設(shè)備和平臺上應(yīng)該都能正常運(yùn)行。

　支持所有語種：如新的<ruby>元素支持在東亞頁面排版中會用到的Ruby注釋。

8．無插件

在傳統(tǒng)Web應(yīng)用中，很多功能只能通過插件或者復(fù)雜的hack來實(shí)現(xiàn)，但在HTML5中提供了對這些功能的原生支持。插件的方式存在很多問題：

　插件安裝可能失敗。

　插件可以被禁用或屏蔽，如Flash插件。

　插件自身會成為被攻擊的對象。

　因?yàn)椴寮吔纭⒓舨煤屯该鞫葐栴}，插件不容易與HTML文檔的其他部分集成。

以HTML5中的canvas元素為例，有很多非常底層的事情以前是沒辦法做到的，如在HTML4的頁面中就難畫出對角線，而有了canvas就可以很輕易地實(shí)現(xiàn)了。基于HTML5的各類API的優(yōu)秀設(shè)計(jì)，可以輕松地對它們進(jìn)行組合應(yīng)用。例如，從video元素中抓取的幀可以顯示在canvas里面，用戶單擊canvas即可播放這幀對應(yīng)的視頻文件。

最后，用萬維網(wǎng)聯(lián)盟創(chuàng)始人蒂姆·伯納斯－李的評論來小結(jié)，“今天，我們想做的事情已經(jīng)不再是通過瀏覽器觀看視頻或收聽音頻，或者在一部手機(jī)上運(yùn)行瀏覽器。我們希望通過不同的設(shè)備，在任何地方，都能夠共享照片、網(wǎng)上購物、閱讀新聞以及查找信息。雖然大多數(shù)用戶對HTML5和開放Web平臺（Open Web Platform, OWP）并不熟悉，但是它們正在不斷改進(jìn)用戶體驗(yàn)”。

1.1.6　瀏覽器檢測

HTML5發(fā)展的速度非常快，因此不用擔(dān)心瀏覽器的支持問題。用戶可以訪問www.caniuse.com，該網(wǎng)站按照瀏覽器的版本提供了詳盡的HTML5功能支持情況。

如果通過瀏覽器訪問www.html5test.com，該網(wǎng)站會直接顯示用戶瀏覽器對HTML5規(guī)范的支持情況。另外，還可以使用Modernizr（JavaScript庫）進(jìn)行特性檢測，它提供了非常先進(jìn)的HTML5和CSS3檢測功能。建議使用Modernizr檢測當(dāng)前瀏覽器是否支持某些特性。