HTML 5設計原理

Jeremy Keith在 Fronteers 2010 上的主題演講

下載PPT(PDF) http://adactio.com/extras/slides/designofhtml5.pdf

觀看視頻 http://fronteers.nl/congres/2010/sessions/the-design-of-html5-jeremy-keith

51CTO推薦專題：HTML 5 下一代Web開發標准詳解

今天我想跟大家談一談HTML 5的設計。主要分兩個方面：一方面，當然了，就是HTML 5。我可以站在這兒只講HTML 5，但我並不打算這樣做，因為如果你想了解HTML 5的話，你可以Google，可以看書，甚至可以看規范。

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

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

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

剛才已經說了，我今天想要講的內容不多，也沒有打算介紹HTML 5都包含什麼。今天我要講的是它的另一方面，即HTML 5的設計。換句話說，我要講的不是規范裡都包含什麼，而是規范裡為什麼會包含它們，以及在設計這個規范的時候，設計者們是怎麼看待這些東西的。

設計原理

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

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

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

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

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

各盡所能，各取所需。

這其實就是一種經濟體系背後的設計原理。

還有一個例子，比前面兩個的歷史更久遠一些，不過大同小異：

人人為我，我為人人。

這個極為簡單的設計原理，是兩千年前的拿撒勒猶太人耶稣基督提出來的。而這條原則成為了後來許多宗教的核心教義。原理與實踐有時候並不是同步的。

下面是小說中的一個例子。英國小說家喬治·奧威爾(George Orwell)筆下的《動物莊園》，就是在一條設計原理的基礎上構建起來的虛擬社會。這條設計原理是：

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

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

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

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

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

機器人必須自衛，只要不違背第一和第二法則。

這些恐怕是第一次出現在小說中的針對軟件的設計原理了。雖然基於這三個設計原理的軟件運行在虛構的機器人的“正電子腦”中，但我想這應該是軟件設計原理的事實開端。從此以後，我們才看到大量優秀軟件背後的設計原理。

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

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

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

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

HTML

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

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

換句話說，這篇名為HTML Tags的文檔可以算作HTML的第一個版本，但它卻不是一個正式的版本。第一個正式版本，HTML 2.0，也不是出自W3C之手。HTML 2.0是由IETF，因特網工程任務組(Internet Engineering Task Force)制定的。在W3C成立之前，IETF已經發布了不少標准。但從第三個版本開始往後，W3C，萬維網聯盟(World Wide Web Consortium)開始接手，並負責後續版本的制定工作。

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

從1997年到1999年，HTML的版本從3.2到4.0到4.01，經歷了非常快的發展。問題是到了4.01的時候，W3C的認識發生了倒退， 他們說“好了，這個版本就這樣了，HTML也就這樣了;HTML 4.01是HTML的最後一個版本了，我們用不著HTML工作組了。”

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

從規范本身的內容來看，實際上是相同的，沒有什麼不同。不同之處就是編碼風格，因為對浏覽器來說，讀取符合HTML 4.01、HTML 3.2，或者XHTML 1.0規范的網頁都沒有問題，對浏覽器來說這些網頁都是一樣的，都會生成相同的DOM樹。只不過人們會比較喜歡XHTML 1.0，因為不少人認同它比較嚴格的編碼風格。

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

我就是一個例子!過去的10年，我一直都使用XHTML 1.0文檔類型，原因是這樣一來驗證器就能給我幫上很