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 進行詳細講解，把自己學到和研究的東西共享出來，歡迎大家來一塊交流學習：）