HTML 5 APIs程序員指南
有關HTML5中的語法元素相信大家已經看到過不少介紹了，但是關于HTML5的APIs的介紹就不那么常見了，而HTML5規范主要就是由這些APIs構成的。
51CTO推薦專題：HTML 5 下一代Web開發標準詳解
HTML5的標準有兩個版本，一個是由W3C發布的，另一個則是由WHATWG發布的。WHATWG現有的HTML5標準中補充了一些W3C標準中沒有的APIs（這些APIs其實W3C也有涉及，只是被單獨列在一個補充標準中了）。
除了規范中介紹的APIs以外，還有一些相關的APIs也遵循了HTML5的標準，并也聲稱自己是HTML5的API。有些APIs已經被采用了一段時間了，但是仍然沒有被明確列入規范之中，而有些HTML5則著手準備對其進行改進。
這篇文章并不準備從代碼的角度去介紹這些APIs，而是會分析他們的用途以及進展情況。還會給出一些參考信息方便讀者更加深入地了解自己感興趣的內容。
HTML5標準中的APIs
首先看看W3C的HTML5規范中的APIs。
多媒體API
多媒體API是HTML5的多媒體元素中的一部分，其中包括 視頻 和 音頻 元素。這些元素本身實現起來并不復雜，但是這些APIs可以使用JavaScript方法，這是很多人不太了解的。其中包括play() 、pause()、load() 以及canPlayType() 這些方法。許多方法不僅可以使用多媒體類型屬性，還可以使用許多其他的屬性（例如poster 屬性），這些方法在視頻元素中尤其常見。通過在API中使用合適的事件和屬性，開發者能夠實現多媒體的自定義控制。
想要了解更多信息，可以看看下面的文章。
- Media Elements, W3C
- Everything you need to know about HTML5 video and audio, dev.opera, Simon Pieters
- HTML5 audio and video: what you must know, NetTuts (a chapter from Introducing HTML5), Bruce Lawson and Remy Sharp
文本軌跡 API
文本軌跡 API（原文為text tracks API）常常和多媒體API一起配合使用。這個API可以與視頻 和音頻 元素的text tracks（例如副標題或是字幕）交互。你可以獲取一個多媒體元素的文本軌跡長度或是數量，或者是它的文本軌跡（副標題、字幕、描述、章節以及元數據）、類型 （kind）、語言 （language）、狀態 （readyState）、模式 （mode）和標簽 （label）。
當瀏覽器使用本地字幕時，這個API就派上用場了，WebVTT就是一個很好的例子。你還可以快速瀏覽以下這些資源：
- Text Track API, W3C
- Web Media Text Tracks Community Group
- Media Multiple Text Tracks API Wiki, W3C
- The YouTube Caption API, Speech Recognition, and WebVTT Captions for HTML5, Google I/O 2011, Naomi Black, Cynthia Boedihardjo, and Jeffrey Posnick
- Captionator.js Polyfill
- WebVTT and video subtitles, Ian Devlin
- Video subtitling and WebVTT, HTML5 Doctor, Tom Leadbetter
拖放功能
拖放API一直受到很多關注。它最初是隨著Microsoft的IE5推出的，現在Firefox、Safari 和Chrome都已經支持這一功能了。那么這個API究竟是做什么的呢？
就像它的名字所說的，這個API在瀏覽器中實現本地的拖放功能。只需要將一個可拖放 屬性設置為true ，用戶就可以移動瀏覽器中任意一個元素了。你還可以在目標區域加入一些事件句柄，用來告訴瀏覽器哪些區域能夠放置用戶拖放的元素。
如果不局限在瀏覽器內部使用這一功能，這個API的作用將更加凸顯。使用拖放API，用戶可以將桌面上的一副圖像直接拖入瀏覽器中，或是將瀏覽器中的一個新建圖標拖到桌面上，并且能夠自動加載相應的內容信息形成一個新的應用程序快捷方式。
下面的文章更加深入地介紹了這一拖放功能。
- Drag and drop API, W3C
- Native, Drag and Drop, HTML5 Doctor, Remy Sharp
- Drag and Drop, MDN
- The drag and drop API, HTML5 Laboratory, Ian Devlin
離線Web Apps/Apps緩存
隨著native apps（包括移動和桌面版本）和web apps的界限變得越來越模糊，應用程序支持離線訪問已經成為大勢所趨。離線Web應用程序（Offline Web Applications）規范詳細介紹了這一技術，即應用程序緩存功能。
應用程序緩存功能是通過一個簡單的列表文件實現的，該文件列出了應用程序離線工作所需的文件。這樣發布者就能夠確保他們的網站可以支持離線訪問了。這個列表文件能夠引導瀏覽器保留一份文件的副本，這樣用戶下次就可以脫機訪問這些內容了。當用戶沒有接入網絡時，瀏覽器就將本地的副本顯示給用戶。理論上講，即使是在地鐵或是其他網絡不佳的環境下，你也能完成郵件編寫工作了，甚至還可以玩web版的“憤怒的小鳥”。
現在瀏覽器已經對這一功能有了很好的支持，尤其是在移動領域（Firefox、Safari、Chrome、Opera、iPhone和Android），你現在就可以使用這一功能了。下面是一些相關的資料：
- Offline Web Applications, W3C
-
- Running your web applications offline with HTML5 AppCache, dev.opera, Shwetank Dixit
- Go offline with application cache, HTML5 Doctor, Mike Robinson
- Offline Browsing in HTML5 with ApplicationCache, Sitepoint, Malcolm Sheridan
- Get off(line), Web Directions, John Allsopp
UI
和離線功能一樣，UI也是HTML5核心標準的一部分。其中有些功能有必要在這里提一提，比如contenteditable屬性，在創建web apps就非常有用。IE瀏覽器從5.5版本推出以后就一直支持這一屬性，還有其他五大主流瀏覽器都支持這一屬性。將該屬性設置為true表示相應的元素是可編輯的。發布者可以在本地存儲中加入這一屬性，從而跟蹤文檔的變化。
想了解更多信息，可以查看最新的標準 ，但是其中有些部分已經被劃分給HTML Editing APIs 了。
歷史
瀏覽器的后退按鈕是一個使用非常頻繁的工具。HTML5的歷史API（History API）可以幫助開發者管理用戶的瀏覽器會話的歷史狀態。
以前的歷史API只是幫用戶回到之前的頁面或是之后的頁面，以及檢查歷史信息的長度。而HTML5則加入了增刪用戶歷史信息的方法，可以保存部分數據用于重構一個頁面狀態，或是更新URL時無需刷新頁面。這個API使用起來非常簡單，并且可以用它來開發非常復雜的應用程序。
關于歷史API的更多信息：
- History API, W3C
- Manipulating History for Fun & Profit, Dive into HTML5, Mark Pilgrim
- Introducing the HTML5 History API, dev.opera, Mike Taylor & Chris Mills
- Manipulating the browser history, MDN
MIME類型和協議處理程序注冊
這個API允許網站將自己注冊成為一些方案的處理程序。下面是一個使用了registerProtocolHandler方法的例子：一個在線電話消息服務可以將自己注冊成一個SMS方案的處理程序，這樣當用戶點擊這個鏈接以后，就能訪問它的Web網站（W3C HTML協議 ）了。
SMS 、TEL 和IRC 這類方案被列入白名單。網站還可以使用registerContentHandler方法將自己注冊為特定內容的處理程序。
想要了解MIME類型和協議處理程序注冊方法，可以先看看HTML5規范 。
WHATWG規范中的APIs
現在，已經介紹過W3C和WHATWG兩個版本HTML5協議中共有的一些標準了。接著將介紹一些附加的APIs，這些APIs被WHATWG收錄在正式的協議文檔中，而W3C則將他們細分為一些更加易于管理的協議。這兩個版本中的APIs用途和主要內容都是相同的。
- Canvas 2D 環境 —— 可以用來在瀏覽器中繪圖。如果不使用2D Context API，canvas 將無法繪圖。它就像是刷子、調色板和顏料，將所有這些繪圖工具都集成在了一起。這個API是非常常用的，幾乎所有的canvas文章中都有它的不同方法和事件的介紹。這里還有更加詳細的介紹：WHATWG Canvas Element, 2D Context 以及W3C HTML Canvas 2D Context Spec 。
- 跨文檔和通道的消息通訊 ——跨文檔通訊定義了一種在文檔之間通訊的方法，它不受源區域的限制。同樣的，通道消息傳遞使用了獨立的代碼實現直接通訊。更多介紹：WHATWG HTML, Cross document messaging 、WHATWG HTML Cross channel messaging 以及W3C HTML5 Web Messaging spec 。
- Microdata ——在文檔中新增了一個語義層，方便搜索引擎、瀏覽器等可以提取網頁信息并提高瀏覽器的服務質量。更多介紹： WHATWG HTML, Microdata 以及W3C Microdata spec 。
- Web Workers ——這是一個在后臺運行的JavaScript調用API。它能夠在不影響前端界面的情況下長期運行任務，從而避免任務執行造成的頁面響應延遲。更多介紹： WHATWG HTML, Web Workers 和W3C Web Workers Spec 。
- Web 存儲 ——有點類似于cookies。更多介紹： WHATWG HTML, Web Storage 和W3C Web Storage spec 。
- Web Sockets ——允許頁面使用WebSocket協議在瀏覽器和服務器間發送兩路消息。更多介紹： WHATWG Web Sockets 和W3C Web Socket API 。
- Server sent events 服務器端發送事件 ——允許服務器以DOM事件的形式向瀏覽器發送推送通知。 更多介紹： WHATWG HTML, Server-sent events 和W3C Server-Sent Events 。
遵循HTML5規范的APIs
由于篇幅限制，這里不會將所有與HTML5相關的APIs都列舉出來。其中一些常常被誤以為是HTML5標準APIs的內容有地理位置 （Geolocation）、索引數據庫（Indexed DB）、選擇器（Selectors），以及文件系統API（Filesystem API）。
W3C成員Mike Smith 編著了一個全方位介紹web平臺和瀏覽器技術 的綜合列表，非常值得一讀。
演示示例和瀏覽器的支持情況
文章之前提到了部分APIs目前得到瀏覽器支持的情況，但是瀏覽器對APIs的支持是在不斷變化的，想要了解最新的進展，可以查看caniuse 。如果你發現有些APIs目前瀏覽器尚不支持，也不必灰心。這里還有一個補充功能用來幫助你模擬本地行為。可以查看HTML5 Cross Browser Polyfills 了解這一功能。
你還可以看看Remy Sharp 的 HTML5 Demos ，通過查看這些源碼進一步了解文章介紹的APIs。
總結
這里只是粗略地介紹了一下這些非常有用而且功能強大的APIs。如果想要更加深入地了解這些APIs的細節，你需要通過代碼去學習，這將給你帶來不一樣的體驗。有些APIs目前還沒有完全成熟，希望這篇文章能夠讓你對此更加有興趣，并對這些將加入到瀏覽器中的功能更感興趣。
原文：http://webapptrend.iteye.com/blog/1386423
【編輯推薦】
