【轉載】知識普及：天煞的HTML5到底是個什麼東西

HTML5開始大熱標誌性的事件是蘋果前 CEO Steve Jobs 公開炮轟 Adobe Flash，並指出 Flash 在移動終端的不利因素，而且 HTML5 將獲得勝利。頓時 IT 界、數字營銷界、數字媒體界等相關領域的人開始一窩蜂地議論、追捧、打擊，HTML5成了當仁不讓的明星（就在不久前 Adobe 宣佈停止對 Mobile 端 Flash 的開發與更新）。但是很多人都在問：HTML5是什麼？如何鑑定 HTML5 產品？

DamnDigital 近日製作了一篇由淺入深的知識普及帖，詳細介紹了 HTML5 的方方面面，包括什麼是 HTML5？HTML5有哪些特質？HTML5/4有什麼區別？誰先試水 HTML5 的？HTML5相關站點有哪些？HTML5的經典案例何處尋？

一、什麼是 HTML，以及 HTML5

1. HTML

HTML 是超文本標記語言的英文縮寫，這是一種標記語言，不需要進行編譯，直接由瀏覽器執行。

語言就必須有一個語法的規則，如果沒有規則，誰知道應該把一個 HTML 元素以怎樣的形式展現給用戶呢？目前 HTML 語言的標準是由 W3C（World Wide Web Consortium）負責制定的。依照規則，無論是何種瀏覽器，對於相同的 HTML 代碼，應當展現給用戶相同的效果。

目前 HTML 語言最新版本爲4(HTML4)，此外還有一個可擴展超文本標記語言（XHTML）作爲其擴展版本，提供更爲豐富的功能和更嚴謹的語法規範。

2. HTML5

HTML5草案的前身名爲 Web Applications 1.0。於 2004 年被 WHATWG 提出，於 2007 年被 W3C 接納，併成立了新的 HTML 工作團隊。2008年 1 月 22 日，W3C 發佈了最新的 HTML5 工作草案，HTML 工作組包括 AOL、Apple、Google、IBM、 Microsoft、Mozilla、Nokia、Opera 等數百個開發上。HTML5中增加了許多新特性，例如嵌入音頻、視頻和圖片的函數、客戶端存儲數據、交互式文檔等，通過制定如何處理所有 HTML 元素以及如何從錯誤中恢復的精確規則，HTML5進一步增強了互動性，並有效減少了開發成本。

二、HTML5 有哪些特質

我們來看看 W3.org 列舉出來的 8 個 Class 技術描述：

A. 語義特性（Class：Semantic）

HTML5賦予網頁更好的意義和結構。更加豐富的標籤將隨着對 RDFa 的，微數據與微格式等方面的支持，構建對程序、對用戶都更有價值的數據驅動的 Web。

B. 本地存儲特性（Class：OFFLINE & STORAGE）

基於 HTML5 開發的網頁 APP 擁有更短的啓動時間，更快的聯網速度，這些全得益於 HTML5 APP Cache，以及本地存儲功能。Indexed DB（HTML5本地存儲最重要的技術之一）和 API 說明文檔。

C. 設備兼容特性 (Class：DEVICE ACCESS)

從 Geolocation 功能的 API 文檔公開以來，HTML5爲網頁應用開發者們提供了更多功能上的優化選擇，帶來了更多體驗功能的優勢。HTML5提供了前所未有的數據與應用接入開放接口。使外部應用可以直接與瀏覽器內部的數據直接相連，例如視頻影音可直接與 microphones 及攝像頭相聯

D. 連接特性（Class：CONNECTIVITY）

更有效的連接工作效率，使得基於頁面的實時聊天，更快速的網頁遊戲體驗，更優化的在線交流得到了實現。HTML5擁有更有效的服務器推送技術，Server-Sent Event 和 WebSockets 就是其中的兩個特性，這兩個特性能夠幫助我們實現服務器將數據’推送’到客戶端的功能。

E. 網頁多媒體特性(Class：MULTIMEDIA)

支持網頁端的 Audio、Video 等多媒體功能，與網站自帶的 APPS、攝像頭、影音功能相得益彰。

F. 三維、圖形及特效特性（Class：3D, Graphics & Effects）

基於 SVG、Canvas、WebGL 及 CSS3 的 3D 功能，用戶會驚歎於在瀏覽器中，所呈現的驚人視覺效果。

G. 性能與集成特性（Class：Performance & Integration）

沒有用戶會永遠等待你的 Loading——HML5會通過 XMLHttpRequest2 等技術，幫助您的 Web 應用和網站在多樣化的環境中更快速的工作。

H. CSS3 特性(Class：CSS3)

在不犧牲性能和語義結構的前提下，CSS3中提供了更多的風格和更強的效果。此外，較之以前的 Web 排版，Web 的開放字體格式（WOFF）也提供了更高的靈活性和控制性。

Apple 官方對 HTML5 的各個特性做了詳細並且動態的展示：http://www.apple.com/HTML5/showcase

三、HTML5與 HTML4 的區別

A.簡化的語法

更簡單的 doctype 聲明是 HTML5 裏衆多新特徵之一。現在你只需要寫，這就行了。HTML5的語法兼容 HTML4 和 XHTML1，但不兼容 SGML。

B. 一個替代 Flash 的新”canvas”標記

對於 Web 用戶來說，Flash 既是一個驚喜，也是一種痛苦。有很多的 Web 開發人員對 HTML5 對 Flash 產生的威脅很不滿。但對於那些忍受着要花幾年時間加載和運行的臃腫的 Flash 視頻的人來說，用新的 “canvas” 標記生成視頻的技術已經到來。

目前， “canvas” 標記並不能提供所有的 Flash 具有的功能，但假以時日，Flash 必將從 web 上淘汰。我們拭目以待，因爲很多人還並不認同這種觀點。

C. 新的 “header” 和 “footer” 標記

HTML5的設計是要更好的描繪網站的解剖結構。這就是爲什麼這些”header” 和”footer” 等新標記的出現，它們是專門爲標誌網站的這些部分設計的。在開發網站時，你不在需要用”div”標記來標註網頁的這些部分。

D. 新的 “section” 和 “article” 標記

跟”header” 和 “footer”標記類似，HTML5中引入的新的”section” 和 “article” 標記可以讓開發人員更好的標註頁面上的這些區域。

據推測，除了讓代碼更有組織外，它也能改善 SEO 效果，能讓搜索引擎更容易的分析你的頁面。

E.新的 “menu” 和 “figure” 標記

新的”menu”標記可以被用作普通的菜單，也可以用在工具條和右鍵菜單上，雖然這些東西在頁面上並不常用。類似的，新的 “figure” 標記是一種更專業的管理頁面上文字和圖像的方式。當然，你可以用樣式表來控制文字和圖像，但使用 HTML5 內置的這個標記更適合。

F. 新的 “audio” 和 “video” 標記

新的”audio” 和 “video” 標記可能是 HTML5 中增加的最有用處的兩個東西了。正如標記名稱，它們是用來嵌入音頻和視頻文件的。

除此之外還有一些新的多媒體的標記和屬性，例如”track”，它是用來提供跟蹤視頻的文字信息的。有了這些標記，HTML5 使 Web2.0 特徵變得越來越友好。問題在於，在 HTML5 還未被廣泛的接受之前，Web2.0還是老的 Web2.0。

G. 全新的表單設計

新的 “form” 和 “forminput” 標記對原有的表單元素進行的全新的修改，它們有很多的新屬性(以及一些修改)。如果你經常的開發表單，你應該花時間更詳細的研究一下。

H. 不再使用 “b” 和 “font” 標記

對我個人來說，這是一個讓我不太理解的改動。我並不認爲去除 “b” 和 “font”標記會帶來多大的好處。我知道，官方的指導說這些標記可以通過 CCS 來做更好的處理，但這樣一來，爲了在文章一兩個地方出現的這種標記，你就需要在獨立的 css 和文本兩個地方來實現這一的功能，豈不笨拙。也許我們以後會習慣這種方法。

i. 不再使用 “frame”， “center”， “big” 標記

事實上，我已經記不清曾經何時用過這些標記了，所以，我並不爲去除這些標記感到悲哀。相同的原因，有更好的標記能實現它們的功能——這很好，任何作廢的標記從標準中剔除都是受歡迎的。

四、早期試行者：

體驗 HTML5 的最好瀏覽器是那些基於 Webkit 引擎的瀏覽器（Apple 開發的開源瀏覽器內核），如 Chrome 和 Safari，Firefox 不太流暢，即使現在 Firefox 9 官方聲稱完美支持 HTML5，但是實際應用中，我們發現還是相對於 Chrome 和 Safari 欠缺許多。

W3C 在 2011 年上半年正式推出了 HTML5 的初步標準，隨之而來是謹慎的 Mircosoft 發佈了完美支持 HTML5 的 IE9.

當然，介於目前瀏覽器市場玲琅滿目，目前除了主流的瀏覽器的最新版本之外，之前的版本都在或多或少的拒絕 HTML5。

五、其他 HTML5 開發相關站點：

URL：http://phonegap.com/

PhoneGap 是一個開源的、基於 JavaScript 語言、用於快速和簡便開發手機應用程序的開發框架，用來構建跨平臺的使用 HTML，CSS 和 JavaScript 的移動應用程序。我們將會放出 phoneGap 的詳細介紹。它是最普及的 HTML5 to App 的工具。

URL：http://jsdo.it

JSDO.IT 是一個 js 代碼分享的網站，強調社區參與和協作，它可以讓程序員，開發者在站內分享自己寫的程序代碼和作品，也可以在站內相互交流，共享 JS 代碼相關的內容，是通過社交網絡或社區爲基礎來建立的代碼分享功能的網站。其界面流暢，帶有自動更新的預覽面板，可接受開源 JS 庫。另外，它還有一個獨特的性能，即可在智能手機中打開瀏覽器查看的“智能手機預覽”命令。這個工具需要用戶註冊並登陸才能使用。

URL：http://HTML5boilerplate.com/

HTML5 Boilerplate 是一個 HTML / CSS / js 模板，是實現跨瀏覽器正常化、性能優化，穩定的可選功能如跨域 Ajax 和 Flash 的最佳實踐。

此網站由業界衆多專業資深前輩共同發起的一個開源開發模板站點，來幫助大家快速使用 HTML5 技術開發網站，同時兼容其他各種舊版本的瀏覽器瀏覽體驗。HTML5 Boilerplate 並不是一套框架，他僅僅是一套模板。大家可以把他當作自己的新項目模板，在此基礎上建立自己的項目。這一網站志在建立一套簡單的模板幫助大家快速的進行開發，一般來說下載了這套模板後，便可以在其上進行修改，測試，查看兼容性瀏覽等。

URL：http://proHTML5.com/

所有程序員開發者，或是對 HTML5 有過些許瞭解的人都聽說過有一本程序員編程手冊《PRO HTML5 PROGRAMMING》，而此網站是此書的線上官方站點，除了提供書中所提及的關於目前 HTML5 提供新特性講解的部分內容，包括使用實例講解 API 的調用方法等等，同時還提供更多線上編程方面的指導學習資料，以及學習實踐工具。值得收藏。

URL：http://www.beautyoftheweb.com/

在 beautyoftheweb 網站上，可以下載到 40 種語言的 IE9 RC 版（開發者體驗版），通過 Bautyoftheweb，開發人員和愛好者即可有規律地對 IE9 平臺上的 HTML5 實現效果進行預覽，目前，此網站上的 IE9 RC 版可以直接下載，同時還可以看線上指導視頻，就算非開發者，程序員也能通過視頻，領略到 HTML5 在 IE9 平臺上帶來的良好體驗感受。目前所有 RC 版下載都是免費得，比較開放，透明。可以說，這是微軟爲了宣傳 IE9 而進行推廣的一個網站。

六、基於 HTML5 的優秀作品