HTML5作爲下一代的web開發標準，其特性已經慢慢地出現在主流的瀏覽器中，這種新的HTML將會讓瀏覽器不必再依賴Flash、QuickTime、Silverlight等插件，也簡化了原來需要大量JS才能達到的效果。雖然HTML5還在討論過程中，但是其優越的特性已經得到了大家的認可，各大瀏覽器廠商，一些知名的內容發佈網站也都是積極地推動， 尤其是即將發佈的IE9會完全支持HTML5。作爲Web開發人員的我們，需要做的是：如何把HTML5轉化爲各種Web應用，如何做到現有的Web應用過渡到HTML5。下面將介紹作爲Web開發人員必須知道的HTML5特性，以及各特性可能的應用場景。
1， 用Canvas繪製圖形
不用懷疑，這張3D的圖畫就是用canvas畫出來的。
Canvas的出現顛覆了傳統在Web應用中畫圖的方式，傳統的畫圖方式有在服務器端先畫好圖片，再把圖片發到瀏覽器中，或者用Flash，還有用第三方插件。但是這些方法都不是原生的HTML， HTML5 canvas提供了通過javascript繪製圖形的方法，方法簡單但是功能強大，作爲開發工程師可以使用canvas API隨心所欲地控制圖畫。
點擊這裏查看canvas的API：Canvas API
創建一個canvas元素非常簡單：
1 |
<canvas id="myCanvas" width="300" height="200"><BR> |
2 |
你的瀏覽器是老古董了，不支持canvas，扔了吧.<BR> |
3 |
</canvas> |
點擊這裏查看一個canvas顯示的HelloWorld：Canvas-HelloWorld
開發人員開發過程中需要注意的是：爲了Javascript中能應用canvas對象，需要給元素設置ID；通常也要設置其高度和寬度；爲了網站的友好性，需要給元素中添加不支持的文字說明，在不支持canvas的瀏覽器中給用戶提醒。
Canvas是HTML5中最讓人期待的特性之一，目前大部分的Web瀏覽器的支持（Chrome，Firefox，Safari，Opera支持，IE8不支持），canvas可以應用於遊戲設計、增強圖形用戶界面。
下面是一些非常cool的Canvas應用：
非常cool的遊戲應用：Best HTML5 Canvas Games
令人驚訝的canvas動畫效果：8 Simply Amazing HTML5 Canvas and Javascript Animations
2，多媒體音頻和視頻
<audio>和<video>是首批添加到HEML5規範中的標記。它們的加入使得web瀏覽器能夠以一種更方便的方式來處理音頻和視頻文件，結束了在web瀏覽器中安裝播放插件的歷史。比較令人頭疼的是，各大瀏覽器廠商對音頻和視頻格式有重大的分歧，Firefox堅持將開放的ogg標準，而Safari則希望是MP3和MP4的標準，這就造成了我們開發過程中需要提供多個版本的音頻和視頻文件來兼容瀏覽器。
下圖中可以看到各大瀏覽器和多媒體分享站點支持的格式：
目前瀏覽器對音頻文件的支持情況：
| Format | IE 8 | Firefox 3.6 | Opera 10.5 | Chrome 5.0 | Safari 5.0 |
|---|---|---|---|---|---|
| Ogg Vorbis | No | Yes | Yes | Yes | No |
| MP3 | No | No | No | Yes | Yes |
| Wav | No | Yes | Yes | No | Yes |
目前瀏覽器對視頻文件的支持：
| Format | IE 8 | Firefox 3.6 | Opera 10.5 | Chrome 5.0 | Safari 5.0 |
|---|---|---|---|---|---|
| Ogg | No | Yes | Yes | Yes | No |
| MPEG 4 | No | No | No | Yes | Yes |
點擊這裏查看audio和video的屬性：HTML5 Audio HTML5 Video
創建audio和vedio元素：
1 |
<audio controls="controls"><BR> |
2 |
<source src="song.ogg" type="audio/ogg" /><BR> |
3 |
<source src="song.mp3" type="audio/mpeg" /><BR> |
4 |
您的瀏覽器不支持音頻標籤！<BR> |
5 |
</audio> |
1 |
<video width="320" height="240" controls="controls"><BR> |
2 |
<source src="movie.ogg" type="video/ogg" /><BR> |
3 |
<source src="movie.mp4" type="video/mp4" /><BR> |
4 |
您的瀏覽器不支持視頻標籤！<BR> |
5 |
</video> |
點擊這裏查看音頻和視頻標籤在瀏覽器中的效果：Audio - Vedio
就開發者而言，目前的情況是，我們需要準備多個版本的音頻和視頻，並把文件路徑都添加到audio和vedio中，web瀏覽器會跳過不支持的格式，另外，最好添加針對不支持audio和vedio的瀏覽器的文字提示或者其他多媒體播放方式。
Audio和Vedio是兩個簡單而強大的標籤，目前國內外已經有多個多媒體分享網站開始支持或測試HTML5。
如下是一些HTML5 Vedio體驗資源：
Google 聯合 Arcade Fire 推出了一個 HTML5 互動電影： The Wilderness Downtown，點擊這裏可以進入其在 Chrome Experiment 的頁面
HTML5 Video Player
YouTube - Broadcast Yourself（哦，對不起，這是個不存在的網站）
3，Web存儲
隨着Web應用的發展，需要在客戶端存儲的場景越來越多，傳統的客戶端存儲方式有cookie、Firefox下有globalStorage、Flash在插件的支持下有其自己的存儲方式，但是這幾種方式都有其侷限性（安全性和兼容性）。HTML5提供的在客戶端存儲方式有：Web Database和Web storage，Web Database適應與客戶端複雜數據的存儲，其標準還不成熟，瀏覽器的支持也很有限，需要Web開發人員進一步的關注，假如存儲的是簡單的數據，則可以使用Web storage方式，不佔用帶寬，並且得到了主流瀏覽器的支持，包括IE8。
Web存儲有兩種方式：localStorage和sessionStorage，參考這裏查看詳細定義，兩者的區別簡單來說，localStorage可以永久保存數據，也就是說關閉瀏覽器，下次打開瀏覽器還能取得存儲的數據，而sessionStorage只在當前的會話中可用。
下面的例子演示統計用戶訪問網站的次數：
01 |
<script type="text/javascript"> |
02 |
if (typeof(localStorage) == "undefined") { |
03 |
document.write("你的瀏覽器不支持Web存儲"); |
04 |
} else { |
05 |
if (localStorage.pagecount){ |
06 |
localStorage.pagecount=Number(localStorage.pagecount) +1; |
07 |
} |
08 |
else{ |
09 |
localStorage.pagecount=1; |
10 |
} |
11 |
document.write("您已經光臨本站 "+ localStorage.pagecount + " 次了."); |
12 |
} |
13 |
</script> |
點擊這裏查看運行效果：Demo
開發中需要注意的是，Web storage有安全方面的權限的，不要在其中存儲私密的數據， 另外，這個存儲的數據是不能跨瀏覽器讀取的，也就是說用一種瀏覽器打開站點保存的數據，用其他瀏覽器是取不到的。
儘管Web存儲有這樣的缺陷，但是這個特性使得應用程序在離線狀態下也可以正常工作，當程序需要處理大量的數據時，可以避免數據頻繁地在客戶端和服務器端的往來，對移動設備來說，可以極大地減少流量的消耗。
這裏有一篇很好的文章介紹Web存儲：Web Storage全解析
4，其他的簡化了開發的HTML5特性
- 一些常用輸入類型：Email，url，number，date pickers等
- 一些標準屬性：contenteditable 等
- 一些input屬性：placeholder，required，autofocus，min，max，step，
這裏推薦兩篇介紹這些HTML5特性的文章，請參考：你必須知道的28個HTML5特徵、竅門和技術和給網頁設計師的30個HTML5學習資源
以上這些HTML5特性是目前瀏覽器支持較好的特性，也是關注度非常高的HTML5特性，本文是從一個Web開發人員的角度來理解HTML5，目的是希望有更多的Web開發人員能儘快地融入HTML5的開發中來，最近優酷已經開始應用HTML5和HTTP Live Streaming技術，讓更多的用戶可以在移動平臺分享多媒體，這對國內的HTML5的推廣起到了積極的作用，微軟承諾IE9將全面支持HTML5，這對HTML5的推廣是一個振奮人心的消息。可以預見，未來幾年HTML5將快速地發展，作爲Web開發人員，我們更應該儘快熟悉HTML5的各種特性，在項目開發過程中也應該更多考慮如何利用HTML5的特性加強web應用程序的易用性和可移植性。