什麼是TEAP？TEAP，Turingbook Early Access Program，即圖靈在譯新書的試讀樣章。一本書的翻譯週期約為3到6個月，在這麼長時間內，譯者與讀者沒有溝通和交流是一件不可想象的事兒。TEAP 模仿的是 Manning 的 MEAP，事先公開未經編輯的內容，讀者可以提前閱讀將來才能出版的內容，同時譯者也能收穫寶貴的反饋意見，以便改進翻譯，提高質量。本文為《HTML5祕籍》第1章前兩節。

如果說HTML是一部電影，那HTML5就是一次大轉折。

HTML本來是不會活過21世紀的。官方Web標準組織W3C（全球資訊網聯盟World Wide Web Consortium的簡寫）1998年對HTML就已經撒手不管了。W3C把未來都寄託在XHTML，這個更具現代特色的後續標準身上。 是一群被剝奪了話語權的人，讓HTML起死回生併為本書將要探討的功能奠定了基礎。

本章，你會了解到HTML死亡的原因，以及它又是怎樣復活的；瞭解HTML5的設計原理與功能；還將認識到惱人的瀏覽器支援問題。在這一章，你將第一次看到和善的HTML5文件——既包括其最簡單的形式，也包括一個更具實用性的模板。而在這個模板基礎上，可以構建出任何網站來。

HTML5的故事

大家都知道，HTML是用來編寫網頁的語言。HTML的基本思想（使用元素為內容新增結構）從Web誕生以來就沒有變過。事實上，即使是最陳舊的網頁，在最新的瀏覽器（包括Firefox、Chrome等那時候還沒有的瀏覽器）中仍然可以得到完美的呈現。

年長和成功也會帶來相當大的風險，那就是所有人都想取代你！1998年，W3C停止了對HTML的維護，作為對它的改進，開始制定一個基於XML的後續版本——XHTML 1.0。

XHTML 1.0：更嚴格的標準

XHTML與HTML的語法絕大部分都是相同的，只不過要求更嚴格。很多以前粗心大意的HTML標記，在XHTML中都變成了不能接受的。

例如，假設你想把標題中的最後一個詞標記為斜體，本來應該寫：

<h1>The Life of a <i>Duck</i></h1>

但你一不小心放錯了最後兩個標籤的位置：

<h1>The Life of a <i>Duck</h1></i>

瀏覽器在遇到這個稍微有點亂的標記之後，它知道你想幹什麼。於是，它就把那個詞變成斜體，而且不會抱怨你。可是，標籤不匹配違反了XHTML的規定。如果把頁面複製到一個XHTML驗證器中（或使用Dreamweaver之類的網頁設計工具時），你就會看到一個警告，告訴你哪裡有錯誤。從Web設計的角度看，這種提示很有用，因為你可以發現那些會導致在不同瀏覽器中顯示不一致的微小錯誤，這些錯誤在編輯和增強頁面時還可能導致更嚴重的問題。

最初，XHTML獲得了成功。由於厭倦了瀏覽器的古怪行為和怎麼寫都可以通過的不正常狀態，專業的Web開發人員對XHTML還是非常擁護的。後來，XHTML標準又強迫他們養成更好的習慣，同時放棄HTML中那些半生不熟的格式化功能。可是，與XML工具協同、降低自動化程式處理頁面的難度、方便地移植到移動平臺以及XHTML語言自身的可擴充套件性等這些預期的好處，從來沒有在XHTML身上實現過。

即便如此，XHTML仍然成為最嚴肅的Web設計師所遵循的標準。儘管看起來所有人都挺滿意的，但實際上卻存在一個潛規則：瀏覽器雖然理解XHTML標記，但卻不會嚴格地按照標準執行錯誤檢查。這就意味著頁面仍然可以不遵守XHTML規則，瀏覽器則視而不見（原文有誤，前後矛盾。——譯者注）。事實上，沒有什麼可以阻止Web開發人員把亂糟糟的標記和陳舊的HTML內容混在一起，然後還說這是XHTML頁面。世界上根本就沒有一個瀏覽器站出來反對這種行為。這種情況讓那些負責XHTML標準的人深感不安。

XHTML 2：意想不到的失敗

解決方案就是XHTML 2。這個新版本規定了嚴格的錯誤處理規則，強制要求瀏覽器拒絕無效的XHTML 2頁面，同時也摒棄了很多從HTML沿習下來的怪異行為和編碼慣例。比如說，以編號方式（<h1>、<h2>、<h2>等）區分標題的方法被一個<h>元素取代，這個元素的重要性取決於它在網頁中的位置。類似地，由於允許Web開發人員將任何元素轉換為連結，<a>元素的地位一落千丈。而<img>元素因為增加了一種提供替代內容的新方式，也喪失了原有的alt屬性。

這些變化是XHTML 2的典型特徵。從理論上來看，這些改變更優美也更合理。而從實踐角度說，這就要求每個人都必須改變以前編寫網頁的方式（已經存在網頁必須更新），但付出這些代價卻沒有增加任何新功能，讓這一切變得似乎沒有了價值。與此同時，XHTML 2還宣佈了幾個眾所周知的元素作廢，比如<b>（用於加粗文字）、<i>（變斜體）和<iframe>（用於在網頁中嵌入另一個網頁），但這些元素在Web設計人員中仍然深得人心。

但最糟糕的，還是慢得要死的制定過程。XHTML 2的制定過程整整拖了5年才完成，開發人員的激情早都灰飛煙滅了。

HTML5：起死回生

幾乎與此同時（從2004年開始），有一群人從另外一個角度展望Web的未來。他們想的不是從HTML中挑出各式各樣的毛病（或者乾脆說是主張“不純粹的哲學觀”），而是它還缺少什麼Web開發人員編碼時急需的功能。

歸根結底，HTML最早是作為顯示文件的手段出現的。輔之以JavaScript，它其實已經演變成了一個系統，可以開發搜尋引擎、網上商店、線上地圖、郵件閱讀器以及其他各種能夠想象得到的應用。雖然設計巧妙的Web應用可以實現很多令人讚歎的功能，但開發這樣的應用遠非易事。多數都得編寫大量JavaScript程式碼，還要用到一或多個流行的JavaScript工具包，乃至在Web伺服器上執行的伺服器端Web應用。要讓所有這些方面在不同的瀏覽器中都能緊密配合不出差錯是一個挑戰。即使是贏得了挑戰，你還要記住把這些方面聯絡到一起的那些錯綜複雜的細節。

開發瀏覽器的人對這種情況特別關注。於是，來自Opera Software（開發Opera瀏覽器的公司）和Mozilla Foundation（開發Firefox瀏覽器的組織）的一些具有超前意識的人紛紛建言，希望XHTML能加入一些對開發人員更有用的功能。但他們的建議並沒有被採納，結果Opera、Mozilla和Apple自發地組建了WHATWG（Web Hypertext Application Technology Working Group，Web超文字應用技術工作組），致力於尋找新的解決方案。

WHATWG不想取代HTML，而是考慮以無障礙、向後相容的方式去擴充套件它。這個組織最早的工作成果包含兩個補充規範：Web Application 1.0和Web Forms 2.0。而HTML5正是在這兩個標準的基礎上發展起來的。

注意
HTML5中的數字5表示這個標準是HTML的後續版本（XHTML之前，HTML的版本號是4.01）。當然，這個解釋也不完全正確，因為HTML5支援自HTML 4.01釋出以來的10年間出現在網頁中的所有新東西，包括嚴格的XHTML風格的語法（只要你願意就可以用）和大量的JavaScript創新。但不管怎麼說，這個名字仍然清楚地表明：HTML5雖然支援XHTML的規定，但它要求的則是HTML的規則。

2007年，WHATWG陣營獲得了空前的支援。痛定思痛之後，W3C宣佈解散負責制定XHTML 2標準的工作組，並開始致力於將HTML5改造為正式的標準。就這樣，最初的HTML5被分割成多個容易管理的模組，而本來統稱為HTML5的很多功能分散到了幾個獨立的標準中（詳見後面的附註欄）。

HTML5包含哪些功能

如果有人說某某瀏覽器“支援”HTML5，其實根本沒有這回事。實際上，任何瀏覽器支援的都是一個逐步擴充套件的HTML5相關功能的子集。這個結果既好又不好。說好，是因為瀏覽器可以迅速實現HTML5中業已成熟的部分，而任由其他部分繼續發展。說不好，則是因為編寫網頁的人必須檢查瀏覽器是否支援自己想用的功能。（本書將會介紹一些檢測瀏覽器的技術，有的很麻煩，有的則沒有那麼麻煩。）

以下列出了HTML5涵蓋的一些主要功能。

• HTML5核心。這一部分主要由W3C官方的規範組成，涉及新的語義元素（第2章和第3章）、新的增強的Web表單微件（第4章）、音訊和視訊支援（第5章）和通過JavaScript繪圖的Canvas（第6章和第7章）。這一部分的功能大多數都得到了瀏覽器很好的支援。

• 曾經屬於HTML5的功能。這一部分源自WHATWG最初制定的HTML5規範，其中大多數功能需要JavaScript且支援富Web應用開發。最重要的包括本地資料儲存（第9章）、離線應用（第10章）和訊息傳遞（第11章），但本書要介紹的內容還不止這些。

• 有時候會被稱為HTML5的功能。這些通常是指下一代功能，雖然它們從未進入過HTML5標準，但人們還是經常會把它們與HTML5相提並論。這部分包括CSS3（第8章）和地理定位（第12章）。

令人不解的是，導致標準這麼令人困惑的不僅僅是那些不懂技術的管理者和技術作者，甚至連W3C都在有意無意地模糊“真正的”HTML5（已有標準）和“宣傳用”版本（包括所有新冒頭的技術和其他亂七八糟的東西）之間的界限。舉個例子，官方W3C標誌網站（www.w3.org/html/logo）鼓勵人們生成用於宣傳CSS3和SVG的HTML5標誌，而前兩個標準在HTML5出現之前就已經在開發了。

HTML：活著的語言

從W3C到WHATWG，然後再回到W3C，這個過程導致了相當罕見的轉換與磨合。從技術上說，什麼是或什麼不是HTML5由W3C說了算。但與此同時，WHATWG一直在設計未來的HTML功能。直到最近，他們才不再把自己的工作成果稱為HTML5，而是簡單地稱為HTML，表明HTML還會繼續活下去。

因為HTML是一門活著的語言，所以任何時候HTML標準中都可能增添新功能（和新元素）。是否使用這些功能取決編寫網頁的人，而是否支援這些功能則取決開發瀏覽器的人。但所有功能都不再與特定的版本號緊密相關。

Web開發人員聽到這麼一說，第一反應通常是大惑不解。畢竟，誰希望瀏覽器對標準的支援各不相同，而誰又願意在選擇功能時只憑它們將來會得到支援這個可能性呢？然而，冷靜下來想一想，大多數Web開發人員還是不情願地接受了這個現實：不管是好是壞，這不正是今天瀏覽器的現狀嘛，而且從Web誕生的那一天起始終都是這樣的。

前面我們解釋過，今天的瀏覽器樂於接受支援一大堆亂七八糟的功能這個現實。你可以在激進的XHTML頁面中加上像<marquee>元素（用於建立滾動文字，已廢棄）這樣被認為是倒行逆施的東西，任何瀏覽器都不會反對。類似地，即便是在對最老的標準的支援方面，有些瀏覽器也仍然存在一些廣為人知遺漏。比如，有些瀏覽器開發商在完整地支援CSS2之前就開始實現CSS3，結果很多CSS2特性後來都沒有實現。唯一的區別就是HTML5現在把“活著的語言”變成了常規狀態。同樣，就像我們正在用新的、創新性的一章來介紹HTML一樣，它經過了一番輪迴終於又恢復了它的本來面貌，這不也正是一個天大的諷刺嗎？

提示
  要了解當下正在發展中的HTML，包括我們稱為HTML5的部分和少量但始終在變化的新的還沒有得到支援的功能，請訪問http://whatwg.org/html。要跟蹤有關HTML但不那麼官方的新聞，可以訪問WHATWG的部落格http://blog.whatwg.org。

HTML5的三個主要原理

此時此刻，有的讀者可能已經按捺不住了，迫不急待地想知道真正的HTML5頁面到底是什麼樣子的。不過在此之前，有必要先了解一下制定HTML5規範的那些人當時是怎麼想的。只有理解了這門語言背後的設計思想，才能真正明白本書將要介紹的那些古怪的行為、複雜的現象和偶爾會讓人抓耳撓腮問題。

不破壞Web

“不破壞Web”的意思是標準不應該引入會導致已有的網頁無法工作的改變。這種事兒極少發生。

“不破壞Web”還意味著標準不應該出人意料地更改規則，不能認定今天還完美無缺的網頁到了明天就要作廢（即使可以使用也要作廢）。比如，XHTML 2破壞了Web，因為它要求馬上就顯著改變以前編寫網頁的方式。沒錯，原來的網頁還能用，但那都是瀏覽器支援向後相容的功勞。如果你為將來打算，想按照最新標準重寫網頁，就得浪費數不清的時間去糾正XHTML 2已經明令禁止的“錯誤”。

HTML5的立場不一樣。HTML5之前可以接受的，在HTML5之後照樣可以接受。事實也是，符合HTML 4.01標準的網頁在HTML5中仍然是有效的。

注意
  與以往的標準不同，HTML5不僅向瀏覽器開發商明示該支援什麼，還說明並規範化了它們原來的處理方式。由於HTML5標準描述的都是事實，而不是丟擲一堆理想的規則了事，因此它有望成為有史以來受支援程度最高的Web標準。

HTML5怎麼處理廢棄元素

因為HTML5支援所有HTML，所以它支援很多被認為是廢棄的功能。其中包括像<font>這樣的格式化元素，被人厭惡的<blink>和<marquee>等特效元素，以及難對付的HTML框架體系。

這種無所不包的開放性是令很多HTML5新手感到困惑的一個原因。一方面，HTML5無論如何還是應該禁止使用這些過時元素的，因為它們已經很多年沒有出現在官方規範裡了。另一方面，現代瀏覽器依然悄無聲息地支援著這些元素，而HTML5就是要體現瀏覽器真實的處理方式。那麼這個標準到底要怎麼做呢？

為解決這個問題，HTML5規範包含兩個獨立的部分。第一部分（也是本書將要介紹的）面向Web開發人員，要求摒棄過去的那些壞習慣和被廢棄的元素。通過使用HTML5驗證器可以確保遵循HTML5標準的這一部分。

第二部分，也是HTML5規範中篇幅更長的部分，針對的是瀏覽器開發商。它們需要支援HTML中存在的一切，以做到向後相容。理想情況下，HTML5標準中應該包含足夠的資訊，讓人能夠據以從頭開發一個新瀏覽器，而且無論是處理新的還是舊的標記，該瀏覽器都應該能夠與今天的現代瀏覽器完全相容。這一部分就是告訴瀏覽器如何處理那些官方不鼓勵使用但仍然必須支援的廢棄元素。

有時候，HTML5規範也會對如何處理各種錯誤（如漏寫或錯配了標籤）作出正式規定。這一點其實很重要，因為它可以確保有缺陷的頁面在不同瀏覽器中都能夠得到同樣的處理，甚至都規定了將頁面對映為DOM（Document  Object  Model，文件物件模型，即記憶體中表現頁面元素的物件樹，供JavaScript使用）這麼細節的問題。為了寫出標準的這個冗長又乏味的部分，HTML5的制定者們在現代瀏覽器上進行了徹底的測試，以便發現還沒有作出規定的錯誤處理行為。然後再把該行為加到標準中。

修補牛蹄子路

牛蹄子路（cowpath）指的是高低不平但使用頻率很高的路，通過它可以從一個地方到達另一個地方。之所以存在牛蹄子路，就是因為有人走。也許這條路走起來不是最舒服的，但某種程度上卻是最實際的解決之道。

HTML5把標準化這些非官方（但廣泛應用）的技術作為一個目標。或許與新修的高速公路相比，牛蹄子路沒有那麼平坦寬闊，但它贏得勝利的機會更大。因為對於一般的網站設計人員來說，切換到新技術可能會起出他們的能力，或者他們根本就沒有興趣。更大問題在於，使用舊瀏覽器的訪客無法因為新技術而受益。XHTML 2企圖把人們趕出牛蹄子路，結果敗得非常慘。

注意
  修補牛蹄子路有一個明顯的好處：它使用已經得到瀏覽器某種程度支援的既定的技術。假設有一種只適合70%瀏覽器的漂亮的新技術和一種任何情況都能工作但不那麼雅觀的hack，Web開發人員始終都會選擇不那麼雅觀的hack，因為它適合更多的使用者。

“修補牛蹄子路”的方法也需要折中。有時候，這意味著要包容那些得到廣泛支援但設計卻很拙劣的功能。一個例子就是HTML5的拖放（參見9.3.6節），這個功能完全以微軟為IE5設計的拖放機制為基礎。儘管這個拖放功能目前得到了所有瀏覽器的支援，但由於使用起來不靈活而且過度複雜，因此幾乎沒有人不反感它。為此，不少Web設計人員也抱怨“HTML5不僅鼓勵不良行為，而且還給它們正名。”

實用至上

這個原理很簡單：改變應該以實用為目的。改變得越多，代價也就越大。Web開發人員可能更希望標準是精心設計、始終如一，而且沒有怪異行為的。但這個理由還不足以改變一門已經用來建立了數十億網頁的語言。當然，到底需要不需要改變還是要由某個人根據利害來評判。而現有網頁都是怎麼做的或者說試圖怎麼去做，可以作為很好的判斷依據。

例如，（在本書寫作時）YouTube是世界上第三受歡迎的網站，但由於HTML5之前的HTML不真正支援視訊，YouTube一直都得依賴Flash外掛。使用Flash外掛沒什麼問題，因為只要是能上網的電腦，基本上都會安裝這個外掛。不過也有例外，比如某些公司會鎖定它們的計算機，不允許安裝Flash，另外蘋果的裝置（如iPhone和iPad）也不支援Flash。不管有多少電腦安裝了Flash，擴充套件HTML標準，使其直接支援人們今天使用Web的一種最基本方式——看視訊，毋庸置疑是有必要的。

而HTML5中新增了更多互動功能的背後也有著同樣的動機。像拖放、可編輯的HTML內容、在Canvas中繪製二維圖形，都是同樣的情況。這些功能在我們身邊的網頁中並不鮮見，只不過有的通過Adobe Flash或微軟Silverlight等外掛實現，而有的則是利用JavaScript庫或（更艱苦地）完全通過手工編寫JavaScript程式碼來實現。因此，為什麼不在HTML標準中加入官方的支援，讓這些功能在所有瀏覽器中都能一致地工作呢？

注意
Flash等瀏覽器外掛不會一夜之間就消失（甚至隨後幾年都不會）。儘管HTML5有很多創新，但通過它來構建複雜的圖形介面應用仍然不是件輕而易舉的事兒（建議讀者到www.flasharcade.com中那些基於瀏覽器的遊戲）。不過，HTML5的終極目標很清楚：讓網站不依賴外掛也能夠提供視訊、豐富的互動功能以及各種漂亮的效果。（完）