Jeremy Keith在 Fronteers 2010 上的主題演講

下載PPT（PDF）

觀看視頻

今天我想跟大家談一談HTML5的設(shè)計。主要分兩個方面：一方面，當(dāng)然了，就是HTML5。我可以站在這兒只講HTML5，但我并不打算這樣做，因為如果你想了解HTML5的話，你可以Google，可以看書，甚至可以看規(guī)范。

實際上，確實有人會談到規(guī)范的內(nèi)容。史蒂夫·福克納（Steve Faulkner）會講HTML5與可訪問性。而保羅·艾里什（Paul Irish）則會講HTML5提供的各種API。因此，我今天站在這里，不會光講一講HTML5就算完事了。

說老實話，在正式開始之前，我想先交待清楚我所說的HTML5到底是什么意思。這話聽起來有點搞笑：這會子你一直在說HTML5，難道我們還不知道什么是HTML5嗎？大家知道，有一個規(guī)范，它的名字叫HTML5。我所說的HTML5，指的就是這個規(guī)范。但問題是，有些人所說的HTML5，指的不僅僅是這個規(guī)范，還有別的意思。比如說，用HTML5來代指CSS3就是一種常見的叫法。我可不是這樣的。我所說的HTML5，不包含CSS3，就是HTML5。

類似的術(shù)語問題以前也有過。Ajax本來是一種含義明確的技術(shù)，但過了不久，它的含義就變成了“用JavaScript來做一切好玩的東西”。這就是Ajax，對不對？今天，HTML5也面臨同樣的問題，它本來指的是一個特定的規(guī)范，但如今含義卻成了“在Web上做一切好玩的事。”我說的不是這種HTML5，不是這種涵蓋了最近剛剛出現(xiàn)的各種新東東的HTML5。我說的僅僅是規(guī)范本身：HTML5。

剛才已經(jīng)說了，我今天想要講的內(nèi)容不多，也沒有打算介紹HTML5都包含什么。今天我要講的是它的另一方面，即HTML5的設(shè)計。換句話說，我要講的不是規(guī)范里都包含什么，而是規(guī)范里為什么會包含它們，以及在設(shè)計這個規(guī)范的時候，設(shè)計者們是怎么看待這些東西的。

設(shè)計原理

設(shè)計原理本質(zhì)上是一種信念、一種想法、一個概念，是你行動的支柱。不管你是制定規(guī)范，還是制造一種有形的物品，或者編寫軟件，甚至發(fā)明編程語言。你都能找到背后的一個或者多個設(shè)計原理，多人協(xié)作的任何成果都是例證。不僅僅Web開發(fā)領(lǐng)域是這樣。縱觀人類歷史，像國家和社會這樣大規(guī)模的構(gòu)建活動背后，同樣也有設(shè)計原理。

就拿美國為例吧，美國的設(shè)計原理都寫在了《獨(dú)立宣言》中了。

我們認(rèn)為這些真理是不言而喻的，人人生而平等，造物主賦予了每個人不可剝奪的權(quán)利，包括生存、自由和追求幸福。

這里有一句口號：生存、自由和追求幸福。這是被寫進(jìn)憲法中的核心理念，它關(guān)系到我們所有人的一切，也就是我們構(gòu)建自己社會的原則。

還有一個例子，就是卡爾·馬克思（Karl Marx），他的著作在20世紀(jì)曾被奉為建設(shè)社會主義的圭臬。其基本思想大致可以歸結(jié)為下面這條設(shè)計原理：

四條腿的都是好人，兩條腿的都是壞蛋！

《動物莊園》中有意思的是，隨著社會的變遷——變得越來越壞，這條設(shè)計原理也跟著發(fā)生了改變，變成了“四條腿的都是好人，兩條腿的就更好了。”最關(guān)鍵的是，即使是在虛構(gòu)的作品里，設(shè)計原理都是存在的。

還有一套虛構(gòu)的作品是以三條設(shè)計原理為基礎(chǔ)構(gòu)建起來的，那就是美國著名小說家艾薩克·阿西莫夫（Issac Asimov）的機(jī)器人經(jīng)典系列。阿西莫夫發(fā)明了機(jī)器人學(xué)這個術(shù)語，并提出了機(jī)器人學(xué)三大法則，然后在這三個簡單的設(shè)計原理基礎(chǔ)上創(chuàng)作了一系列經(jīng)典作品——大約有50本書。無論作品的情節(jié)如何變化，實際上都是從不同的角度來闡釋這三大設(shè)計原理。我想，在座各位對機(jī)器人三大法則都不應(yīng)該陌生。

機(jī)器人不得傷害人類，或袖手旁觀人類受傷害。

機(jī)器人必須服從人類命令，除非命令違反第一法則。

機(jī)器人必須自衛(wèi)，只要不違背第一和第二法則。

這些恐怕是第一次出現(xiàn)在小說中的針對軟件的設(shè)計原理了。雖然基于這三個設(shè)計原理的軟件運(yùn)行在虛構(gòu)的機(jī)器人的“正電子腦”中，但我想這應(yīng)該是軟件設(shè)計原理的事實開端。從此以后，我們才看到大量優(yōu)秀軟件背后的設(shè)計原理。

蒂姆·伯納斯-李（Tim Berners-Lee），Web的發(fā)明者，在W3C的網(wǎng)站上發(fā)表過一份文檔，其中有一個URL給出了他自己的一套設(shè)計原理。這些設(shè)計原理并不那么容易理解，不僅多，而且隨著時時間推移，他還會不斷補(bǔ)充、修改和刪除。不過我還是覺得把自己認(rèn)同的設(shè)計原理寫出來放在某個地方真是個不錯的主意。

實際上，CSS的發(fā)明人之一伯特·波斯（Bert Bos），也在W3C的網(wǎng)站上放著一份文檔，其中講的都是基本的設(shè)計原理，比如怎樣設(shè)計并構(gòu)建一種格式，無論是CSS還是其他格式。推薦大家看一看。

只要你在W3C的站點中隨便找一找，就可以發(fā)現(xiàn)非常多的這種設(shè)計原理，包括蒂姆·伯納斯-李個人的。當(dāng)然，你還會看到他從軟件工程學(xué)校里借用的一些口號：分權(quán)（decentalisation）、容忍（tolerance）、簡易（simplicity）、模塊化（modularity）。這些都是在他發(fā)明新格式的時候，頭腦中無時無刻不在想的那些關(guān)鍵詞。

在座各位對蒂姆·伯納斯-李的貢獻(xiàn)都是非常熟悉的，因為大家每天都在用。他發(fā)明了Web，與羅伯特·卡里奧（Robert Cailliau）共同發(fā)明了Web，而且在發(fā)明Web的同時，也發(fā)明了我們每天都在Web上使用的語言。當(dāng)然，這門語言就是HTML：超文本標(biāo)記語言。

HTML

HTML最早是從2.0版開始的。從來就沒有1.0版。如果有人告訴你說，他最早是從HTML 1.0開始使用HTML的，那他絕對是在忽悠你。從前確實有一個名叫HTML Tags的文檔，其中的部分標(biāo)簽一直用到現(xiàn)在，但那個文檔并非官方的規(guī)范。

使用標(biāo)簽、尖括號、p或h1，等等，并不是蒂姆·伯納斯-李首創(chuàng)的想法。當(dāng)時的SGML里就有了這些概念，而且當(dāng)時的CERN（Conseil Europeen pour la Recherche Nucleaire，歐洲核子研究委員會）也在使用SGML的一個特定的版本。也就是說，即便在那個時代，他也沒有白手起家；這一點在HTML后來的發(fā)展過程中也體現(xiàn)了出來：繼往開來、承前啟后，而不是另立門戶、從頭開始。

換句話說，這篇名為HTML Tags的文檔可以算作HTML的第一個版本，但它卻不是一個正式的版本。第一個正式版本，HTML 2.0，也不是出自W3C之手。HTML 2.0是由IETF，因特網(wǎng)工程任務(wù)組（Internet Engineering Task Force）制定的。在W3C成立之前，IETF已經(jīng)發(fā)布了不少標(biāo)準(zhǔn)。但從第三個版本開始往后，W3C，萬維網(wǎng)聯(lián)盟（World Wide Web Consortium）開始接手，并負(fù)責(zé)后續(xù)版本的制定工作。

20世紀(jì)九十年代HTML有過幾次快速的發(fā)展。眾所周知，在那個時代要想構(gòu)建網(wǎng)站，可是一項十分復(fù)雜的工程。瀏覽器大戰(zhàn)曾令人頭疼不已。市場競爭的結(jié)果就是各家瀏覽器里都塞滿了各種專有的特性，都試圖在專有特性上勝人一籌。當(dāng)時的混亂程度不堪回首，HTML到底還重不重要，或者它作為Web格式的前景如何，誰都說不清楚。

從1997年到1999年，HTML的版本從3.2到4.0到4.01，經(jīng)歷了非常快的發(fā)展。問題是到了4.01的時候，W3C的認(rèn)識發(fā)生了倒退，他們說“好了，這個版本就這樣了，HTML也就這樣了；HTML 4.01是HTML的最后一個版本了，我們用不著HTML工作組了。”

W3C并沒有停止開發(fā)這門語言，只不過他們對HTML不再感興趣了。在HTML 4.01之后，他們提出了XHTML 1.0。雖然聽起來完全不同，但XHTML 1.0與HTML 4.01其實是一樣的。我的意思是說，從字面上看這兩個規(guī)范的內(nèi)容是一樣的，詞匯表是一樣的，所有的元素是一樣，所有的屬性也都是一樣的。唯一一點不同之處，就是XHTML 1.0要求使用XML語法。也就是說，所有屬性都必須使用小寫字母，所有元素也必須使用小寫字母，所有屬性值都必須加引號，你還得記著使用結(jié)束標(biāo)簽，記著對img和br要使用自結(jié)束標(biāo)簽。

從規(guī)范本身的內(nèi)容來看，實際上是相同的，沒有什么不同。不同之處就是編碼風(fēng)格，因為對瀏覽器來說，讀取符合HTML 4.01、HTML 3.2，或者XHTML 1.0規(guī)范的網(wǎng)頁都沒有問題，對瀏覽器來說這些網(wǎng)頁都是一樣的，都會生成相同的DOM樹。只不過人們會比較喜歡XHTML 1.0，因為不少人認(rèn)同它比較嚴(yán)格的編碼風(fēng)格。

到了2000年，Web標(biāo)準(zhǔn)項目（Web Standards Project）的活動開展得如火如荼，開發(fā)人員對瀏覽器里包含的那些亂七八糟的專有特性已經(jīng)忍無可忍了。大家都很生氣，就罵那些瀏覽器廠商“遵守個規(guī)范就他媽的真有那么難嗎？”當(dāng)時CSS有了長足的發(fā)展，而且與XHTML 1.0結(jié)合得也很緊密，CSS加XHTML 1.0基本上就可以算是“最佳實踐”了。雖然在我看來HTML 4.01與XHTML 1.0沒有本質(zhì)上的不同，但大家都接受了。專業(yè)的開發(fā)人員能做到元素全部小寫，屬性全部小寫，屬性值也全部加引號：由于專業(yè)人員起到了模范帶頭作用，越來越多的人也都開始支持這種語法。

我就是一個例子！過去的10年，我一直都使用XHTML 1.0文檔類型，原因是這樣一來驗證器就能給我?guī)蜕虾艽蟮拿Γ瑢Σ粚Γ恐灰覍懙氖荴HTML 1.0，然后用驗證器測試，它就能告訴我是不是忘了給屬性值加引號，是不是沒有結(jié)束某個標(biāo)簽，等等等等。而如果我寫的是HTML 4.01，同樣的問題就變成了有效的了，驗證器就不一定會提醒我了。

這就是我一直使用XHTML 1.0的原因。我估計很多人都……使用XHTML 1.0的朋友，請把手舉起來。好的。HTML 4.01呢？人少多了。一直沒有舉手的呢，大聲點，你們用什么？HTML5，也很好！更早的呢，還有人使用更早的文檔類型嗎？沒有了？

10年來我一直使用XHTML 1.0，就是因為驗證器能夠真正幫到我。有人用XHTML 1.1嗎？你知道有人用嗎？請舉手，別放下。有人把網(wǎng)頁標(biāo)記為XML文檔嗎？有嗎？那你們使用的就不是XHTML 1.1。

這就是個大問題。XHTML 1.0之后是XHTML 1.1，只是小數(shù)點后面的數(shù)字加了一個1，而且從詞匯表的角度看，規(guī)范本身沒有什么新東西，元素也都相同，屬性也都相同。但對XHTML 1.1來說，唯一的變化是你必須把自己的文檔標(biāo)記為XML文檔。在使用XHTML 1.0的時候，還可以把文檔標(biāo)記為HTML，而我們也正是這樣做的，否則把文檔標(biāo)記為XML沒準(zhǔn)真會把人逼瘋的。

為什么這么說呢？首先，把文檔標(biāo)記為XML后，Internet Explorer不能處理。當(dāng)然，IE9是可以處理了。恐怕有人會講“真是太可愛了”，他們到現(xiàn)在居然都沒有忘了這件事。這艘船終于靠岸了！不過那時候，作為全球領(lǐng)先的瀏覽器，IE無法處理接收到的XML文檔類型的文檔，而規(guī)范又要求你以XML文檔類型來發(fā)送文檔，這不把人逼瘋才怪呢。

所以說XHTML 1.1有點脫離現(xiàn)實，而你不想把文檔以XML格式發(fā)送給那些能夠理解XML的瀏覽器，則是因為XML的錯誤處理模型。XML的語法，無論是屬性小寫，元素小寫，還是始終要給屬性值加引號，這些都沒有問題，都很好，事實上我也喜歡這樣做，但XML的錯誤處理模型卻是這樣的：解析器如果遇到錯誤，停止解析。規(guī)范里就是這么寫的。如果你把XHTML 1.1標(biāo)記為XML文檔類型，假設(shè)你用Firefox打開這個文檔，而文檔中有一個和號（&）沒有正確編碼，就算整個頁面中就這一處錯誤，你看到的也將是黃屏，瀏覽器死掉了。Firefox會說：“沒戲了，頁面中有一個錯誤，你看不到這個網(wǎng)頁了。”根據(jù)XML規(guī)范，這樣處理是正確的，對Firefox而言，遇到錯誤就停止解析，并且不呈現(xiàn)其他任何內(nèi)容是嚴(yán)格按照XML規(guī)范做的。因為它不是HTML，HTML根本就沒有錯誤處理模型，但根據(jù)XML規(guī)范，這樣做沒錯。

這就是為什么你不會把文檔標(biāo)記為XML的另一個原因。接下來，新的版本是XHTML 2，大家注意后面沒有日期，因為這個規(guī)范并沒有完成。

現(xiàn)在就說說XHTML 2，我很愿意把問題說清楚，XHTML 2實際上真是一個非常非常好的規(guī)范，確實非常好……從理論的角度來說。我的意思是說，制定這個規(guī)范的人都是非常非常有頭腦的。直說吧，領(lǐng)導(dǎo)制定這個規(guī)范的家伙是斯蒂芬·彭伯頓（Stephen Pemberton），他應(yīng)該是本地人，是一個聰明過人的家伙。規(guī)范本身也很了不起，如果所有人都同意使用的話，也一定是一個非常好的格式。只不過，還不夠?qū)嶋H。

首先，XHTML 2仍然使用XML錯誤處理模型，你必須保證以XML文檔類型發(fā)送文檔；這一點不言自明：沒人愿意這樣做。其次，XHTML 2有意不再向后兼容已有的HTML的各個版本。他們甚至曾經(jīng)討論過廢除img元素，這對每天都在做Web開發(fā)的人來說確實有點瘋了的味道。但我們知道，他們之所以這樣做，理論上確實有充足的理由——使用object元素可能會更好。

因此，無論XHTML 2在理論上是多么完美的一種格式，但卻從未有機(jī)會付諸實踐。而之所以難以將其付諸實踐，就是因為像你我這樣的開發(fā)人員永遠(yuǎn)不會支持它，它不向后兼容。同樣，瀏覽器廠商也不會，瀏覽器廠商必須要保證向后兼容。

為什么XHTML 1.1沒有像XML那樣得到真正廣泛地應(yīng)用，為什么XHTML 2從未落到實處？因為它違反了一條設(shè)計原理，這條設(shè)計原理就是著名的伯斯塔爾法則（Postel’s Law）。大家都知道：

發(fā)送時要保守；接收時要開放。

沒錯，接收的時候要開放，而這也正是Web得以構(gòu)建的基礎(chǔ)。開發(fā)瀏覽器的人必須敞開胸懷，接收所有發(fā)送給瀏覽器的東西，因為它們過去一直都在接收那些不夠標(biāo)準(zhǔn)的東西，對不對？Web上的很多文檔都不規(guī)范，但那正是Web發(fā)展的動力。從某種角度講，Web走的正是一條混沌發(fā)展之路，雖然混沌，但卻非常美麗誘人。在Web上，格式不規(guī)范的文檔隨處可見，但那又怎樣呢？如果所有人都能夠?qū)懗鼍珳?zhǔn)的XML，所有文檔的格式都十分正確，那當(dāng)然好了。可是，那不現(xiàn)實。現(xiàn)實是伯斯塔爾法則。

作為專業(yè)人士，在發(fā)送文檔的時候，我們會盡量保守一些，盡量采用最佳實踐，盡量確保文檔格式良好。但從瀏覽器的角度說，它們必須以開放的姿態(tài)去接收任何文檔。

有人可能會說XML有錯誤處理模型，XHTML 1.1和XHTML 2都使用該模型，但那個錯誤處理模型太苛刻了。它絕對不符合接收時開放這個法則，遇到一個錯誤就停止解析怎么能叫開放呢？我們只能說它與健壯性法則（也就是伯斯塔爾法則）是對立的。

HTML5

之后，就到了HTML5，但HTML5并不是由W3C直接制定的。故事的經(jīng)過是這樣的，到20世紀(jì)末的時候，還沒有HTML工作組，W3C內(nèi)部的一些人就開始琢磨了，“HTML也許還可以更長壽一點，只要我們對它稍加擴(kuò)展就行了。只要把我們放在XHTML上的時間和精力拿出一部分來，就可以提升一下HTML中的表單，可以讓HTML更接近編程語言，就可以讓它更上一層樓。”

于是，在2004年W3C成員內(nèi)部的一次研討會上，當(dāng)時Opera公司的代表伊恩·希克森（Ian Hickson）提出了一個擴(kuò)展和改進(jìn)HTML的建議。他建議新任務(wù)組可以跟XHTML 2并行，但是在已有HTML的基礎(chǔ)上開展工作，目標(biāo)是對HTML進(jìn)行擴(kuò)展。W3C投票表決的結(jié)果是——“反對”，因為HTML已經(jīng)死了，XHTML 2才是未來的方向。然后，Opera、Apple等瀏覽器廠商，以及其他一些成員說：“那好吧，不指望他們了，我們自已一樣可以做這件事，我們脫離W3C。”他們成立了Web Hypertext Applications Technology Working Group（Web超文本應(yīng)用技術(shù)工作組，WHATWG）——可巧的是，他們自稱工作組，而不是特別小組（task force），這就為HTML5將來的命運(yùn)埋下了伏筆。

WHATWG決定完全脫離W3C，在HTML的基礎(chǔ)上開展工作，向其中添加一些新東西。這個工作組的成員里有瀏覽器廠商，因此他們不僅可以說加就加，而且還能夠一一實現(xiàn)。結(jié)果，大家不斷提出一些好點子，并且逐一做到了瀏覽器中。