Web開發(fā)者，你準備怎樣迎接HTML 5？
HTML 5作為下一代的Web開發(fā)標準，其特性已經(jīng)慢慢地出現(xiàn)在主流的瀏覽器中，這種新的HTML將會讓瀏覽器不必再依賴Flash、QuickTime、Silverlight等插件，也簡化了原來需要大量JavaScript才能達到的效果。
51CTO推薦閱讀：HTML 5將給開發(fā)者帶來什么？
作為Web開發(fā)人員的我們，需要做的是：如何把HTML 5轉(zhuǎn)化為各種Web應(yīng)用，如何做到現(xiàn)有的Web應(yīng)用過渡到HTML 5。下面將介紹作為Web開發(fā)人員必須知道的HTML 5特性，以及各特性可能的應(yīng)用場景。（相關(guān)閱讀：HTML 5學(xué)前熱身 實用技巧及應(yīng)用詳解）
1、用Canvas繪制圖形
不用懷疑，這張3D的圖畫就是用canvas畫出來的
Canvas的出現(xiàn)顛覆了傳統(tǒng)在Web應(yīng)用中畫圖的方式，傳統(tǒng)的畫圖方式有在服務(wù)器端先畫好圖片，再把圖片發(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中能應(yīng)用canvas對象，需要給元素設(shè)置ID；通常也要設(shè)置其高度和寬度；為了網(wǎng)站的友好性，需要給元素中添加不支持的文字說明，在不支持canvas的瀏覽器中給用戶提醒。
Canvas是HTML 5中最讓人期待的特性之一，目前大部分的Web瀏覽器的支持（Chrome，F(xiàn)irefox，Safari，Opera支持，IE8不支持），canvas可以應(yīng)用于游戲設(shè)計、增強圖形用戶界面。下面是一些非常cool的Canvas應(yīng)用：
非常cool的游戲應(yīng)用：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ā)過程中需要提供多個版本的音頻和視頻文件來兼容瀏覽器。
下圖中可以看到各大瀏覽器和多媒體分享站點支持的格式：
目前瀏覽器對音頻文件的支持情況：
| 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 |
創(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應(yīng)用的發(fā)展，需要在客戶端存儲的場景越來越多，傳統(tǒng)的客戶端存儲方式有cookie、Firefox下有g(shù)lobalStorage、Flash在插件的支持下有其自己的存儲方式，但是這幾種方式都有其局限性（安全性和兼容性）。HTML 5提供的在客戶端存儲方式有：Web Database和Web storage，Web Database適應(yīng)與客戶端復(fù)雜數(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存儲有這樣的缺陷，但是這個特性使得應(yīng)用程序在離線狀態(tài)下也可以正常工作，當程序需要處理大量的數(shù)據(jù)時，可以避免數(shù)據(jù)頻繁地在客戶端和服務(wù)器端的往來，對移動設(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)開始應(yīng)用HTML 5和HTTP Live Streaming技術(shù)，讓更多的用戶可以在移動平臺分享多媒體，這對國內(nèi)的HTML 5的推廣起到了積極的作用，微軟承諾IE9將全面支持HTML 5，這對HTML 5的推廣是一個振奮人心的消息。
可以預(yù)見，未來幾年HTML 5將快速地發(fā)展，作為Web開發(fā)人員，我們更應(yīng)該盡快熟悉HTML 5的各種特性，在項目開發(fā)過程中也應(yīng)該更多考慮如何利用HTML 5的特性加強Web應(yīng)用程序的易用性和可移植性。
原文地址：http://www.cnblogs.com/dangjian/archive/2010/09/07/1820241.html
【編輯推薦】
