HTML5 到底是什麼？

01-06

HTML5 是對 HTML 標準的第五次修訂，目前仍未完工。其主要的目標是將互聯網語義化，以便更好地被人類和機器閱讀，並同時提供更好地支持各種媒體的嵌入。HTML5 的語法是向後兼容的。

但論及 HTML5 時，大部分開發者所指的並不僅僅是這個新標準，而是（如 Jeremy Keith 說）

doing anything cool (on the web)

做這些「酷」的東西需要用到的技術和標準，除了 HTML5 標準外，還包括 CSS3 的一些新屬性，以及一些新的 API。

WHATWG 在今年一月份宣布（至少對於 WHATWG 來說），HTML5 將是 HTML 的最後一個版本號，HTML 從此成為了一個不斷在更新和變化的活標準。

大家提到的都是非常好的資料，我這裡再補充一些：

來自 W3C 的 HTML5 草案

http://www.w3.org/TR/html5/

來自 WHATWG 的文檔

http://www.whatwg.org/specs/web-apps/current-work/multipage/

Dive Into HTML5 - 許多泛 HTML5 技術的入門講解

http://diveintohtml5.org/

HTML is the new HTML5

http://blog.whatwg.org/html-is-the-new-html5

背景介紹：

W3C 全稱是萬維網協會（World Wide Web Consortium），是制定互聯網標準的官方組織。

http://en.wikipedia.org/wiki/World_Wide_Web_Consortium

WHATWG 是一個非官方的，由包括來自 Mozilla、Google、Opera 等公司的員工組成的開源社區，是任何人都可以參與的。它對 HTML（前 HTML5 標準）、Web Workers API 等標準的制定和更新做出過很大貢獻。

http://en.wikipedia.org/wiki/WHATWG

---- 2011 年 12 月 13 日更新 ----

之前對 WHATWG 和瀏覽器廠商關係的敘述有謬誤，已更正。更多關於 WHATWG 以及其成員組成的信息，參考 @呂康豪的評論。

小二，上名解

HTML的英文全稱為Hyper Text Markup Language，即超文本標記語言。HTML5是HTML的一個新版本。HTML 不是一種編程語言，而是一種標記語言 (markup language)。

HTML5是萬維網的核心語言、標準通用標記語言下的一個應用超文本標記語言(HTML)的第五次重大修改。

HTML5特性

語義特性(Class：Semantic)

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

本地存儲特性(Class: OFFLINE STORAGE)

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

設備兼容特性 (Class: DEVICE ACCESS)

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

連接特性(Class: CONNECTIVITY)

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

網頁多媒體特性(Class: MULTIMEDIA)

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

三維、圖形及特效特性(Class: 3D, Graphics Effects)

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

性能與集成特性(Class: Performance Integration)

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

CSS3特性(Class: CSS3)

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

簡單的說，html5是w3c組織推出的html最新標準

html5標準推出之前，開發者開發一個產品，需要針對PC端以及安卓端IOS端去撰寫不同的代碼，才能實現各個端展現相同的功能，方便用戶在電腦和移動端上使用產品，沒有違和感，後期維護的時候也需要分別各自維護，對於企業，這無疑是一個巨大的支出，html5標準的出世，完全改變了這一現狀，開發者不需要根據各個端去編寫不同的代碼了，在開發過程中不用去了解各個端的獨特要求，只需要按照html5標準撰寫就可以，符合了html5標準就可以在各端正常運行了，大大減少了開發者的重複勞動，對於企業也降低了開發以及運營、維護成本。

HTML5是HTML最新的修訂版本，2014年10月由萬維網聯盟（W3C）完成標準制定，其設計目的是為了在移動設備上支持多媒體。

阿里雲大學針對HTML5新特性出品了一期完整視頻教程（音頻、視頻、畫布、web存儲、動畫……），本課程中，你將學習到下列這些HTML5新特性（點擊下列課時立即學習）：

HTML5新特性教程：

課時1：HTML5音頻
課時2：HTML5視頻
課時3：HTML5拖放
課時4：HTML5畫布
課時5：HTML5 SVG
課時6：HTML5地理定位
課時7：HTML5 Web存儲
課時8：CSS3邊框
課時9：CSS3背景
課時10：文本效果
課時11：2D效果
課時12：3D效果
課時13：過渡
課時14：動畫課時15：多列

更多技術優質課程，請點擊關註：阿里雲大學 - 知乎專欄以及阿里雲大學開發者課堂

放上我之前寫的一篇文章，供各位參考。

H5 是國內對HTML5 的簡稱，其實我們每天都在接觸它，它無處不在。從「圍住神經貓」，「擊打企鵝」，「在房祖名中找到張默」這些紅極一時的火爆遊戲，到現在微信朋友圈推送廣告時寶馬、VIVO 的廣告，支付寶十年賬單等等，背後都是 HTML5 技術。

但是很多時候大家對 H5 認識都只是停留在「頁面」這個層次上，甚至還會有一些誤解，下面就是關於 HTML5 的一些常見的誤解：

#### HTML5 是一項新技術

HTML5 原本指 HTML 下一個主要的修訂版本，所用到的技術很早就已經成熟了，而 HTML5本身並非技術，而是標準。現在國內普遍說的 H5 是包括了 CSS3，JavaScript 的說法（嚴格意義上說，這麼叫並不合適，但是已經這麼叫開了，就將錯就錯了）。

那可能有不懂技術的同學會問，到底什麼是 HTML呢？

正規的說法是，HTML(Hyper Text Markup Language，超文本標記語言) 是一門標記語言。所謂「超文本」就是指頁面里可以包含圖片，鏈接，甚至音樂等非文字元素；計算機之間需要溝通，那些是正文，那些是圖片，都需要標記，標記這些的一套規範和標準就是 HTML。

#### HTML5 的性能不好

上面已經說了，HTML5 本身並不是技術，而是一個標準，不涉及性能問題。性能的問題往往是多方面的，軟體層面（瀏覽器對 H5 的支持），硬體層面，包括代碼都可能會導致性能問題。不過現在硬體的更新速度非常快，iPhone4S 的 CPU 是 A5，而 iPhone6 已經是 A8了，按蘋果的說法，速度共提升了7.5倍；移動端瀏覽器大部分是現代瀏覽器，對 HTML5 和 CSS3的支持都很好。

----

### 繪圖功能

SVG 和 Canvas 都能使你在瀏覽器中畫圖，但是基本原理不一樣。

#### SVG(Scalable Vector Graphics)

SVG 即是 `Scalable Vector Graphics`，是一種用來繪製矢量圖的 HTML5標籤。

SVG 基於 XML（EXtensible Markup Language，可拓展標記語言，類似於 HTML），這意味著 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。

在 SVG 中，每個被繪製的圖形均被視為對象。如果 SVG 對象的屬性發生變化，那麼瀏覽器能夠自動重現圖形。

#### Canvas

Canvas，顧名思義，是畫布，通過 JavaScript 來繪製 2D 圖形。

Canvas 是逐像素進行渲染的。

在 canvas 中，一旦圖形被繪製完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那麼整個場景也需要重新繪製，包括任何或許已被圖形覆蓋的對象。

#### WebGL(Web-based Graphics Language)

WebGL 是一個跨平台、免費的底層 3D 繪圖 API 的 Web 標準，是一套用於渲染 2D 和 3D 圖形的標準圖形庫。作為一項強大的圖形技術，WebGL 可以很好的呈現 3D 效果。iOS8 宣布支持 WEBGL 後，百度全景在移動 Web 端支持 WebGL 圖形技術了，可以更逼真的模擬街道環境。

#### Canvas 與 SVG 的主要不同點

Canvas | SVG

------------ | -------------

依賴於解析度 | 不依賴於解析度（矢量）

不支持事件處理器 | 支持事件處理器

弱的文本渲染能力 | 最適合帶有大型渲染區域的應用程序（比如說 Google 地圖）

能夠以.png 或 .jpg 格式保存結果圖像 | 複雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）

最適合圖像密集型的遊戲，其中的許多對象會被頻繁繪製 | 不適合遊戲應用

---

### 動畫的運用

一般來說，也就是兩種。一種是 CSS3 動畫，一種是 JavaScript 動畫。但是很多情況下，JavaScript 也會用於改變 CSS 屬性來實現動畫。

如果是複雜交互的動畫，還是用 JavaScript 比較好。

具體如何處理，那又是比較大的話題了，在這就不細說。

---

### 最後說幾句

當年 Facebook 放棄 HTML5 轉投原生開發的，而今微信卻在中國讓 HTML5 大紅大紫，不得不說時勢弄人。

當年 Facebook 採用的是混合式開發，類似於今天我們說的裡面是前端代碼，然後套了個 PhoneGap 的殼子，打包變成 iOS 應用了。混合式開發一般會佔比，但是 Facebook 的 HTML 的部分佔比過大，而且當年 iOS App 里調用的 Webview 的引擎和瀏覽器 Safari 里用的不一樣，對技術支持的也不好。

在今天，iOS8 的 Webkit 庫，使用 WKWebView 來代替以前的 UIWebView，並且使用 Nitro JavaScript 引擎，這意味著所有第三方瀏覽器運行 JavaScript 可以跟 Safari 一樣快。

HTML5 是定義了 HTML 的標準的最新演進。這個術語代表了兩個不同的概念：

它是 HTML 語言的一個新的版本，具有新的元素，屬性和行為，
以及可以使 Web 站點和應用更加多樣化和功能更強大的更豐富的一套技術。這套技術有時被稱作 HTML5 它的朋友們而且往往被縮減到僅是 HTML5。

從要對全部所有的 Web 開發人員有用這一點出發，這個參考頁面鏈接了有關 HTML5 技術的大量資源，並且基於它們各自的功能，把它們歸類成了若干組。

語義：能夠讓你更恰當地描述你的內容是什麼。
連通性：能夠讓你和伺服器之間通過創新的新技術方法進行通信。
離線存儲：能夠讓網頁在客戶端本地存儲數據以及更高效地離線運行。
多媒體：使 video 和 audio 成為了在所有 Web 中的一等公民。
2D/3D 繪圖效果：提供了一個更加分化範圍的呈現選擇。
性能集成：提供了非常顯著的性能優化和更有效的計算機硬體使用。
設備訪問 Device Access：能夠處理各種輸入和輸出設備。
樣式設計: 讓作者們來創作更加複雜的主題吧！

以上來自 MDN ，詳細請轉到：
HTML5 - HTML （中文）
HTML5 - Web developer guide （英文）

一個視頻搞定你

http://www.boolgeek.com/video/10198

HTML5 表面上看是用來取代 Flash Web 視頻的，然而，它的使命遠不止此。HTML5 是下一代 Web 語言，它不單單是一種標記語言，更為下一代 Web 提供了全新功能，並將引領下一代 Web 實現類似桌面的應用體驗。

HTML5 主要新功能

本地音頻視頻播放
動畫
地理信息
硬體加速
本地運行（即使在 Internet 連接中斷之後）
本地存儲
從桌面拖放文件到瀏覽器上傳
語義化標記

HTML5 應用現狀

現今，

各大瀏覽器對 HTML5 的支持各有千秋

，我們期待著他們在一兩年內趨向一致，你可能以為，既然這樣，現在大概很少人在使用這個未來的標準，事實並不如此，HTML5 現在已經被廣泛應用，正如

William Gibson

所言，未來的 Web 已經來臨，只是還沒有被廣泛採用。

你可能不知道，

Google 的首頁

也使用 HTML5，不過，目前，他們還僅僅使用了

HTML5 的 doctype

，頁面的其它部分還是

舊代碼

，但 Google 在他們的各種應用中已經在廣泛採用 HTML5。最典型的例子是 Gmail，HTML5
的離線存儲使用戶即使在離線狀態下也可以使用 Gmail，另外，Google Docs 也使用離線存儲，同樣使用離線存儲的其它廠商的類似應用還包括
Zoho 的辦公套件和 WordPress 的博客平台。如果你對 HTML5 的離線存儲功能感興趣，可以看一看 Mark Pilgrim 的

how to add offline support to your apps

一文。

Scribd 基於 HTML5 的文檔閱讀器

上圖是 Scribd 的新文檔閱讀器，全部基於 Web 標準，並未藉助 Flash。

除了視頻，HTML5 還可以在多個方面取代 Flash，文檔共享站點

Scribd

HTML5 到底是什麼？

更多技術優質課程，請點擊關註：阿里雲大學 - 知乎專欄 以及 阿里雲大學開發者課堂

更多技術優質課程，請點擊關註：阿里雲大學 - 知乎專欄以及阿里雲大學開發者課堂