HTML5發展到現在，雖說沒有大規模的普及，但在我們日常生活中，也很容易見到了，HTML5的遊戲、網站、應用也是層出不窮。而作為前端人員，也應該多了解這些API為以後應用打基礎，下面我将給大家介紹 HTML5 新引入的API，并附上各個 API 的浏覽器檢測方法，我主要參考了最近看的《html5揭秘》和《html5進階程式設計》。
首先，我們先介紹下 Modernizr， 它是一個用來檢測浏覽器對 HTML5 和 CSS3 特性支援情況的開源 Javascript 類庫，現在最新的是 2.5.3 版（下載下傳），使用方法很簡單，在頁面裡引入 JS 後，它會自動運作，并建立一個 Modernizr 全局對象，它為每一個可以檢測的特性都建立了一個對應的布爾類型的屬性，我們隻要去調用就行了，例如：
if( Modernizr.canvas ){
// 恩，我知道這個屬性，他是畫圖用的：）
}else{
// canvas 這是個什麼東東？？
} 1.Canvas
Canvas是依賴分辨率的位圖畫布，其繪制的圖形是不可縮放的，你可以通過 Javascript 在 Canvas 上面繪制任何圖形，甚至加載照片，HTML5标準制定了一系列 Canvas API，用于繪制簡單的圖形、定義路徑、建立漸變及應用圖像變換等 。一個 Canvas 就是一個矩形區域，預設情況下寬 300 像素，高 150 像素。
注意：Canvas繪制出來的對象不屬于頁面 DOM 結構或其他任何的命名空間。
// 建立一個 Canvas 元素，并檢查該元素是否擁有 getContext() 方法，然後用雙否定強制傳回一個布爾值
var hasCanvas = !!document.createElement("canvas").getContext;
// Modernizr檢測方法，傳回布爾值
var hasCanvas = Modernizr.canvas ; 2.Audio 和 Video
這兩個元素的出現，讓開發人員不必使用插件就可以播放音頻或視訊，HTML5規範還提供了通用的、完整的、可腳本化控制的API。
// 建立一個 Audio 元素，并檢查該元素是否擁有 canPlayType() 方法，然後用雙否定強制傳回一個布爾值
var hasAudio = !!document.createElement("audio").canPlayType;
// modernizr檢測方法
var hasAudio = Modernizr.audio;
// 建立一個 Video 元素，并檢查該元素是否擁有 canPlayType() 方法，然後用雙否定強制傳回一個布爾值
var hasVideo = !!document.createElement("video").canPlayType;
// modernizr檢測方法
var hasVideo = Modernizr.video; 想檢測是否支援默寫格式，可以這麼寫：
var hasVideo = document.createElement("video").canPlayType('video/ogg; codecs="theora, vorbis"')；
// modernizr檢測方法
var hasVideo = Modernizr.video.ogg; 原生方法會傳回 “probably”，”maybe” 或 “”，分别代表 “完全有把握播放此格式”，”有可能可以播放此格式”，”确定無法播放此格式”。
canPlayType() 方法傳入的參數用文字表達就是在問浏覽器，能否播放封裝在 ogg 容器内的 “theora” 編碼格式的視訊和 “vorbis” 格式的音頻。
3.Web Storage
Web Storage （也稱 DOMStorage）允許開發者把資料存儲在 Javascript 對象中，對象在頁面加載時儲存，并且容易擷取。在打開新視窗或新标簽頁以及重新啟動浏覽器時，開發人員可以選擇是否激活這些資料。存儲的資料不會再網絡上傳輸，并可以儲存高達數兆位元組的大資料。
// 支援的話，全局 window 對象會有一個 localStorage 屬性
var hasWebStorage = window.localStorage;
// modernizr檢測方法
var hasWebStorage = Modernizr.localstorage; 4.Web Workers
Web Workers 可以讓 Web 應用程式具備背景處理能力，它對多線程的支援非常好。是以，使用了 HTML5 的 Javascript 應用程式可以充分利用多核 CPU 帶來的優勢，把耗時長的任務配置設定給 Web Workers 去執行。
注意：在 Web Workers 中執行的腳步無法通路該頁面的 window 對象。
// 支援的話，全局 window 對象會有一個 Worker 屬性
var hasWorker = window.Worker;
// modernizr檢測方法
var hasWorker = Modernizr.webworkers; 5.Offline Web Applications
HTML5 的離線應用緩存使得在無網絡連接配接狀态下運作應用程式成為可能。在第一次通路具備離線通路功能的 Web 站點時，Web伺服器會告訴浏覽器哪些檔案時保證離線正常工作所必需的，這些檔案可以使任意的檔案——HTML、Javascript、圖檔或是視訊。
// 支援的話，全局 window 對象會有一個 applicationCache 屬性
var hasApplicationCache = window.applicationCache;
// modernizr檢測方法
var hasApplicationCache = Modernizr.applicationcache ; 6.Geolocation
HTML5 的地理定位 API 能夠定位出你在世界的什麼地方，并在允許的情況下把該位置資訊共享出去。這個神奇的功能可以建構出許多有趣的應用程式。比如計算跑步的路程，基于 GPS 導航的社交應用等等。它通過 IP 位址、GPS地理定位、Wi-Fi地理定位、手機地理定位、自定義地理定位擷取定位資料。
// 支援的話，全局 navigator 對象會有一個 geolocation 屬性
var hasGeolocation = navigator.geolocation;
// modernizr檢測方法
var hasGeolocation = Modernizr.geolocation; 7.Forms
HTML5 中定義了很多新的輸入框類型：表示搜尋的 search、數字類型輸入框 number、範圍選擇滑塊 range、顔色選擇器 color、電話号碼輸入框 tel、網址輸入框 url、郵件輸入框 email、日期選擇器 date、月份輸入框 month、星期輸入框 week、時間戳輸入框 time、精确表示日期/時間戳出入框 datetime、當地日期和時間輸入框 datetime-local。
// 建立一個 input 元素，該元素預設是 text 類型，改變他的類型，然後檢視改變是否被保留
var o = document.createElement("input");
o.setAttribute("type","color");
return i.type != "text";
// modernizr檢測方法
var hasInputType = Modernizr.inputtypes.color; 8.WebSockets
WebSockets 是 HTML5 中最強大的通信功能，它定義了一個全雙工通信通道（又稱為雙向同時通信，即通信的雙方可以同時發送和接受資訊的資訊互動方式），僅通過 Web 上的一個 Socket 即可進行通信。它不僅僅是對正常 HTTP 通信的另一種增量加強，更代表着一次巨大的進步，對實時的、事件驅動的程式而言更是如此。
// 支援的話，全局 window 對象會有一個 webSocket 屬性
var hasWebSocket = window.webSocket;
// modernizr檢測方法
var hasWebSocket = Modernizr.websockets; 8.Communication
Communication 是 HTML5 中用來實作正在運作的兩個頁面之間（iframe、标簽頁、視窗）進行跨源通信和資訊共享的API。它把 postMessage API 定義為發送消息的标準方式。
// 支援的話，全局 window 對象會有一個 postMessage 屬性
var hasPostMessage = window.postMessage;
// modernizr檢測方法
var hasPostMessage = Modernizr.postmessage; API 的浏覽器支援情況主要介紹這些，以後我會逐個 API 進行詳細講解，把自己學到和研究的東西共享出來，歡迎大家來一塊交流學習：）
![用Visio畫泳道圖[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)