1.6　HTML 5介紹

本節開始介紹HTML 5技術的內容，具體包括HTML 5的發展歷史、特點及使用方法。

1.6.1　HTML 5的發展歷史

HTML 5是萬維網的核心語言、標準通用標簽語言下的一個應用超文本標簽語言（HTML）的第五次重大修改版本。萬維網聯盟（W3C）于2014年10月29日宣布，經過接近8年的艱苦努力，該標準規范終于制定完成。

其實，HTML 5的發展歷程還是非常有意思的，可以說是一波三折。先說說萬維網聯盟（W3C）這個組織。萬維網聯盟（W3C）是一個純粹為了標準化而存在的非營利性組織，其初衷確實很美好，不涉及單獨某一方的利益。但是，由于該組織太過于純粹而忽略了各大瀏覽器廠商的利益，因此來自蘋果的Safari瀏覽器團隊、Mozilla基金會以及Opera軟件等瀏覽器廠商于2004年成立了WHATWG工作小組（Web Hypertext Application Technology Working Group），意為網頁超文本技術工作小組。不難理解，他們意圖回到超文本標簽語言HTML上來。

WHATWG動作很快，因為他們實力都很強，均是多年戰斗在第一線的瀏覽器廠商。該組織成立后不久就提出了作為HTML 5草案前身的Web Applications 1.0，那時候HTML 5還沒有被正式提出。WHATWG致力于Web表單和應用程序，而W3C專注于XHTML 2.0，雙方可謂是漸行漸遠。

當然，這個世界最終還是靠實力說話的，看著自己被冷落的W3C在2006年10月決定停止XHTML的工作并與WHATWG合作。雙方決定進行合作，來創建一個新版本的HTML，并為其建立了一些規則，具體如下：

• 新特性應該基于HTML、CSS、DOM以及JavaScript。
• 減少對外部插件的需求（比如Flash）。
• 更優秀的錯誤處理。
• 更多取代腳本的標簽。
• HTML應該獨立于設備。
• 開發進程應對公眾透明。

以上這些規則就是HTML 5的最初雛形了。

2007年，蘋果、Mozilla基金會以及Opera軟件建議W3C接受WHATWG的HTML 5，正式提出將新版HTML標準定義為HTML 5，于是HTML 5就正式和大家見面了。

HTML 5的第一份正式草案已于2008年1月22日公布。HTML 5仍處于完善之中。然而，當時的大部分瀏覽器已經具備了某些HTML 5支持。隨著瀏覽器JavaScript引擎大幅提速，以及人們對HTML 5預期逐步提高，HTML 5的流行度出現了顯著的上升，但最初的HTML 5并沒有給人們真正更多的驚喜。不過隨著每一次Flash Player爆出漏洞、安全、性能之類的負面新聞時，人們對HTML 5的關注度又大幅升高。

2010年1月，YouTube開始提供HTML 5視頻播放器。

2010年8月，Google聯合Arcade Fire推出了一個HTML 5互動電影：The Wilderness Downtown，此項目由著名作家兼導演Chris Milk創作。之所以叫做互動電影，是因為在開始時電影會問你小時候家住在哪里，而隨后的電影劇情將在這里展開。電影使用了Arcade Fire剛剛推出的新專輯《The Suburbs》中的We Used to Wait作為主題音樂。在電影發表一年后，該電影在戛納廣告大獎賽中獲得了網絡組特別獎項。

2010年4月，蘋果CEO喬布斯發表公開信“Flash之我見”。引發Flash和HTML 5陣營之間的空前口水仗，也刺激了瀏覽器廠商。

2012年1月10日在拉斯維加斯正在舉行的CES大會上，微軟CEO鮑爾默宣布了基于IE9和HTML 5版的割繩子游戲，這是一款由微軟及游戲開發商ZeptoLab共同推出，用于促進IE9的使用及網頁的美化。

2012年12月17日，萬維網聯盟（W3C）正式宣布凝結了大量開發人員心血的HTML 5規范已經正式定稿。根據萬維網聯盟（W3C）的發言稿稱：“HTML 5是開放的Web網絡平臺的奠基石。”

2013年5月6日，HTML 5.1正式草案公布。該規范定義了第五次重大版本，第一次要修訂萬維網的核心語言：超文本標簽語言（HTML）。在這個版本中，新功能不斷推出，以幫助Web應用程序的作者努力提高新元素互操作性。根據本次草案的發布內容，HTML 5進行了多達近百項的修改，包括HTML和XHTML的標簽，相關的API、Canvas等，同時HTML 5的圖像<img>標簽及<svg>標簽也進行了改進，性能得到進一步提升。

2014年10月29日，萬維網聯盟（W3C）終于正式宣布，經過幾乎8年的艱辛努力，HTML 5標準規范終于最終制定完成了，并已公開發布。

看過上面的HTML 5的發展歷程，讀者也許覺得足夠寫一本書或拍一部電影了，這當然是題外話。

不過，HTML 5的正式發布確實將會給Web開發帶來革命性的變化。目前，國外支持HTML 5的主流瀏覽器包括Firefox（火狐瀏覽器）、IE9及其更高版本、Chrome（谷歌瀏覽器）、Safari、Opera等。國內支持HTML 5的瀏覽器包括傲游瀏覽器、360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹瀏覽器等，不過國內的很多瀏覽器的內核都是基于Firefox、Chrome或IE開發的。

另外，在移動設備上開發HTML 5應用只有兩種方法，一種是全使用HTML 5的語法，一種就是僅使用JavaScript引擎。純HTML 5移動應用運行緩慢并錯漏百出，但優化后的效果會好轉。盡管不是很多設計人員愿意去做這樣的優化，但依然可以去嘗試。

HTML 5移動端應用的最大優勢就是可以在網頁上直接調試和修改。最初，移動端應用的開發人員可能需要花費非常大的力氣才能達到HTML 5的界面效果，但需要不斷地重復編碼、調試和運行。但現在不同了，對于基于HTML 5標準的移動應用，開發人員可以輕松地進行調試修改。

1.6.2　HTML 5的設計理念

HTML 5的最終設計理念是為了在移動設備上支持多媒體，這也是區別于之前HTML4的主要理念。在桌面Web應用中，HTML4已經能夠很好地完成絕大部分工作了，但HTML4在移動應用上卻顯得能力不足，當然這也是由HTML4的規范所限制的。

HTML 5新的語法特征可以很好地支持移動應用，例如：video、audio和canvas標簽。另外，HTML 5規范還引進了新的功能特性，可以真正改變用戶與網頁的交互方式，具體包括：

• 新的解析規則增強了靈活性。
• 增加很多適應移動應用的新屬性。
• 淘汰了過時的或冗余的屬性。
• 增加了HTML 5文檔間的拖放功能。
• 增加了離線編輯功能。
• 增強了信息傳遞功能。
• 具有詳細的解析規則。
• 增加了多用途互聯網郵件擴展（MIME）和協議處理程序注冊功能。
• 增加了在SQL數據庫中存儲數據的通用標準（Web SQL）。

1.6.3　HTML 5的新特性

HTML 5具有很多HTML4所不具有的新的特性，具體包括：

• 語義特性

HTML 5賦予了網頁更好的意義和結構，更加豐富的標簽，增加了對微數據與微格式等方面的支持，將真正形成以數據驅動的Web應用。

• 本地存儲特性

基于HTML 5開發的網頁應用擁有更短的啟動時間和更快的聯網速度，這全是因為HTML 5具有的APP Cache以及本地存儲功能。

• 設備兼容特性

HTML 5為網頁應用開發人員提供了前所未有的數據與應用接入開放接口，基于這些接口可以讓外部應用直接與瀏覽器內部的數據進行交互，例如：調用移動設備的攝像頭和麥克風，等等。

• 網頁多媒體特性

HTML 5支持網頁端的Audio、Video等多媒體功能，可與網站自帶的影音多媒體功能互為助力。

• 三維、圖形及特效特性

HTML 5支持基于SVG、Canvas、WebGL及CSS3的3D功能，這些功能會在瀏覽器中呈現出驚人的視覺效果。

• 服務器推送特性

HTML 5具有更有效的連接工作效率，使得諸如快速的網頁游戲體驗，優化的在線聊天功能得到了實現。HTML 5擁有更有效的服務器推送技術，譬如Server-Sent Event和Web Sockets技術就是其中的兩個特性，這兩個特性能夠幫助設計人員實現服務器將數據“推送”到客戶端的功能。

• 異步加載特性

HTML 5會通過XMLHttpRequest2等技術，解決以前的跨域問題，有效地避免了用戶在瀏覽器加載過程中無法等待的Loading過程，幫助設計人員在開發的Web應用多樣化的環境中更快速地工作。

• CSS3特性

HTML 5還對CSS3新特性提供了很好的支持，在不犧牲性能和語義結構的前提下，CSS3中特殊風格和增強效果將會在瀏覽器中得到完美體現。

• Web排版

HTML 5較之以前的Web排版，支持全新的Web的開放字體格式（WOFF），該字體格式提供了更高的靈活性和控制性。

1.6.4　HTML 5的新變革

HTML 5規范提供了一些新的元素和屬性，具體如下：

• 取消了一些過時的HTML4標簽

諸如像純粹為了顯示效果的標簽，如u、font、center和strike這些標簽，已經被CSS3樣式表所取代了。b和i標簽雖然保留了下來，但已經沒有粗體或斜體樣式功能了，僅僅就是為了標識一段文字。

• 借鑒XHTML的優點

HTML 5借鑒了XHTML2的一些優點，包括一些用來改善文檔結構的功能。增加了新的語義化的HTML標簽來表示網頁內容，例如：header（表示文檔頁眉）、footer（表示文檔頁腳）、dialog（表示對話框）等。我們知道，之前的開發人員在實現這些功能時一般都是使用div標簽的。

• 全新的表單輸入對象

HTML 5增加了包括日期、URL、Email地址等，全新的表單輸入對象。同時，還引入了微數據對象來幫助機器識別標簽內容的方法，語義化的標簽使得Web處理變得更為簡單。

• 全新的多媒體標簽

HTML 5規范中，多媒體對象將不再全部綁定在object或embed標簽中，而是視頻有視頻的標簽video，音頻有音頻的標簽audio。

• Canvas對象

HTML 5規范提供了全新的canvas標簽，用來在瀏覽器上直接繪制矢量圖，這意味著設計人員可以擺脫Flash和Silverlight，直接在瀏覽器中顯示圖形或動畫。

• 本地數據庫

HTML 5提供了在瀏覽器中內嵌一個本地的SQL數據庫的功能，以加速交互式搜索，緩存以及索引功能。同時，類似離線Web程序也將因此獲益匪淺。

• 瀏覽器中的真正程序

HTML 5將提供API實現瀏覽器內的編輯、拖放，以及各種圖形用戶界面的能力。內容修飾標簽將被棄用，而是直接使用CSS樣式。

1.6.5　HTML 5的新標簽

下面，總結HTML 5規范為設計人員帶來了那些新的標簽元素。

• 語義結構類（詳見表1-1）

• 表單類（詳見表1-2）

• 多媒體類（詳見表1-3）

• 矢量畫布（詳見表1-4）

1.6.6　HTML 5的移動特性及未來

HTML 5移動開發的出現讓移動平臺的競爭由系統平臺轉向了瀏覽器之間，移動端的IE、Chrome、FireFox、Safari、Oprea等瀏覽器，誰能達到在移動端對HTML 5更好的支持，誰就能在以后的移動應用領域占據更多的市場。

下面列舉HTML 5適合移動應用開發的幾大特性：

• 離線緩存為HTML 5開發移動應用提供了基礎。
• 音頻視頻自由嵌入，多媒體形式更為靈活。
• 地理定位，隨時隨地分享位置。
• Canvas繪圖，提升移動平臺的繪圖能力。
• 專為移動平臺定制的表單元素。
• 豐富的交互方式支持。
• 使用成本上的優勢，更低的開發及維護成本。
• CSS3視覺設計師的輔助利器。
• 實時通信。
• 檔案以及硬件支持。
• 語意化。
• 雙平臺（iOS/Android）融合的App開發方式，提高工作效率。

可以預見，HTML 5的移動特性將使得其成為未來前端設計領域的翹楚。未來將是移動應用的天下，從近些年智能手機和平板電腦的蓬勃發展就可以看出來，移動優先已經成為趨勢。HTML 5就是為移動應用而生的，雖然其還處在改進與完善的階段，但筆者相信未來將會有更多的移動應用是基于HTML 5構建的。