HTML 5作為下一代的Web開發(fā)標準，其特性已經(jīng)慢慢地出現(xiàn)在主流的瀏覽器中，這種新的HTML將會讓瀏覽器不必再依賴Flash、QuickTime、Silverlight等插件，也簡化了原來需要大量JavaScript才能達到的效果。

51CTO推薦閱讀：HTML 5將給開發(fā)者帶來什么？

作為Web開發(fā)人員的我們，需要做的是：如何把HTML 5轉(zhuǎn)化為各種Web應用，如何做到現(xiàn)有的Web應用過渡到HTML 5。下面將介紹作為Web開發(fā)人員必須知道的HTML 5特性，以及各特性可能的應用場景。（相關(guān)閱讀：HTML 5學前熱身 實用技巧及應用詳解）

1、用Canvas繪制圖形

不用懷疑，這張3D的圖畫就是用canvas畫出來的

Canvas的出現(xiàn)顛覆了傳統(tǒng)在Web應用中畫圖的方式，傳統(tǒng)的畫圖方式有在服務器端先畫好圖片，再把圖片發(fā)到瀏覽器中，或者用Flash，還有用第三方插件。但是這些方法都不是原生的HTML， HTML 5 canvas提供了通過javascript繪制圖形的方法，方法簡單但是功能強大，作為開發(fā)工程師可以使用canvas API隨心所欲地控制圖畫。

查看canvas的API：Canvas API。創(chuàng)建一個canvas元素非常簡單：

view sourceprint?  
<canvas id="myCanvas" width="300" height="200"><BR>    
你的瀏覽器是老古董了，不支持canvas，扔了吧.<BR>    
</canvas>  

查看canvas顯示的HelloWorld：http://www.dang-jian.com/Tools/HTML5Demo/HTML5-Canvas.htm

開發(fā)人員開發(fā)過程中需要注意的是：為了Javascript中能應用canvas對象，需要給元素設(shè)置ID；通常也要設(shè)置其高度和寬度；為了網(wǎng)站的友好性，需要給元素中添加不支持的文字說明，在不支持canvas的瀏覽器中給用戶提醒。

Canvas是HTML 5中最讓人期待的特性之一，目前大部分的Web瀏覽器的支持（Chrome，F(xiàn)irefox，Safari，Opera支持，IE8不支持），canvas可以應用于游戲設(shè)計、增強圖形用戶界面。下面是一些非常cool的Canvas應用：

非常cool的游戲應用：http://savedelete.com/best-html5-canvas-games.html

令人驚訝的canvas動畫效果：http://www.queness.com/post/3885/8-simply-amazing-html5-canvas-and-javascript-animations

#p#

2、多媒體音頻和視頻

<audio>和<video>是首批添加到HTML 5規(guī)范中的標記。它們的加入使得Web瀏覽器能夠以一種更方便的方式來處理音頻和視頻文件，結(jié)束了在Web瀏覽器中安裝播放插件的歷史。比較令人頭疼的是，各大瀏覽器廠商對音頻和視頻格式有重大的分歧，F(xiàn)irefox堅持將開放的ogg標準，而Safari則希望是MP3和MP4的標準，這就造成了我們開發(fā)過程中需要提供多個版本的音頻和視頻文件來兼容瀏覽器。

下圖中可以看到各大瀏覽器和多媒體分享站點支持的格式：

目前瀏覽器對音頻文件的支持情況：

目前瀏覽器對視頻文件的支持：

創(chuàng)建audio和vedio元素：

view sourceprint?  
<audio controls="controls"><BR>    
<source src="song.ogg" type="audio/ogg" /><BR>    
<source src="song.mp3" type="audio/mpeg" /><BR>    
您的瀏覽器不支持音頻標簽！<BR>    
</audio>   
 
view sourceprint?  
<video width="320" height="240" controls="controls"><BR>    
<source src="movie.ogg" type="video/ogg" /><BR>    
<source src="movie.mp4" type="video/mp4" /><BR>    
您的瀏覽器不支持視頻標簽！<BR>    
</video>  

就開發(fā)者而言，目前的情況是，我們需要準備多個版本的音頻和視頻，并把文件路徑都添加到audio和vedio中，Web瀏覽器會跳過不支持的格式，另外，***添加針對不支持audio和vedio的瀏覽器的文字提示或者其他多媒體播放方式。

Audio和Vedio是兩個簡單而強大的標簽，目前國內(nèi)外已經(jīng)有多個多媒體分享網(wǎng)站開始支持或測試HTML 5。

#p#

3、Web存儲

隨著Web應用的發(fā)展，需要在客戶端存儲的場景越來越多，傳統(tǒng)的客戶端存儲方式有cookie、Firefox下有g(shù)lobalStorage、Flash在插件的支持下有其自己的存儲方式，但是這幾種方式都有其局限性（安全性和兼容性）。HTML 5提供的在客戶端存儲方式有：Web Database和Web storage，Web Database適應與客戶端復雜數(shù)據(jù)的存儲，其標準還不成熟，瀏覽器的支持也很有限，需要Web開發(fā)人員進一步的關(guān)注，假如存儲的是簡單的數(shù)據(jù)，則可以使用Web storage方式，不占用帶寬，并且得到了主流瀏覽器的支持，包括IE8。

Web存儲有兩種方式：localStorage和sessionStorage。兩者的區(qū)別簡單來說，localStorage可以***保存數(shù)據(jù)，也就是說關(guān)閉瀏覽器，下次打開瀏覽器還能取得存儲的數(shù)據(jù)，而sessionStorage只在當前的會話中可用。

下面的例子演示統(tǒng)計用戶訪問網(wǎng)站的次數(shù)：

view sourceprint?  
<script type="text/javascript">   
if (typeof(localStorage) == "undefined") {    
document.write("你的瀏覽器不支持Web存儲");    
} else {    
if (localStorage.pagecount){    
localStorage.pagecount=Number(localStorage.pagecount) +1;    
}    
else{    
localStorage.pagecount=1;    
}    
document.write("您已經(jīng)光臨本站 "+ localStorage.pagecount + " 次了.");    
}    
</script>  

點擊這里查看運行效果：http://www.dang-jian.com/Tools/HTML5Demo/HTML5-Web-Storage.htm

開發(fā)中需要注意的是，Web storage有安全方面的權(quán)限的，不要在其中存儲私密的數(shù)據(jù)， 另外，這個存儲的數(shù)據(jù)是不能跨瀏覽器讀取的，也就是說用一種瀏覽器打開站點保存的數(shù)據(jù)，用其他瀏覽器是取不到的。

盡管Web存儲有這樣的缺陷，但是這個特性使得應用程序在離線狀態(tài)下也可以正常工作，當程序需要處理大量的數(shù)據(jù)時，可以避免數(shù)據(jù)頻繁地在客戶端和服務器端的往來，對移動設(shè)備來說，可以極大地減少流量的消耗。

4、其他的簡化了開發(fā)的HTML 5特性

◆一些常用輸入類型：Email，url，number，date pickers等。

◆一些標準屬性：contenteditable等。

◆一些input屬性：placeholder，required，autofocus，min，max，step。

以上這些HTML 5特性是目前瀏覽器支持較好的特性，也是關(guān)注度非常高的HTML 5特性，本文是從一個Web開發(fā)人員的角度來理解HTML 5，目的是希望有更多的Web開發(fā)人員能盡快地融入HTML 5的開發(fā)中來，最近優(yōu)酷已經(jīng)開始應用HTML 5和HTTP Live Streaming技術(shù)，讓更多的用戶可以在移動平臺分享多媒體，這對國內(nèi)的HTML 5的推廣起到了積極的作用，微軟承諾IE9將全面支持HTML 5，這對HTML 5的推廣是一個振奮人心的消息。

可以預見，未來幾年HTML 5將快速地發(fā)展，作為Web開發(fā)人員，我們更應該盡快熟悉HTML 5的各種特性，在項目開發(fā)過程中也應該更多考慮如何利用HTML 5的特性加強Web應用程序的易用性和可移植性。

原文地址：http://www.cnblogs.com/dangjian/archive/2010/09/07/1820241.html

【編輯推薦】

1. HTML 5學前熱身 實用技巧及應用詳解
2. 現(xiàn)在如何在你的站點上使用HTML 5
3. HTML 5視頻標簽全屬性詳解
4. 為網(wǎng)站提速 探秘HTML 5鏈接預取功能
5. HTML 5將給開發(fā)者帶來什么？