Web程序員們，你準備好迎接HTML5了嗎？

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元素很是簡單：

<canvas id="myCanvas" width="300" height="200">

你的瀏覽器是老古董了，不支持canvas，扔了吧.

</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	IE8	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	IE8	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元素：

<audio controls="controls">

<source src="song.ogg" type="audio/ogg" />

<source src="song.mp3" type="audio/mpeg" />

您的瀏覽器不支持音頻標籤！

 

</audio>

<video width="320" height="240" controls="controls">

<source src="movie.ogg" type="video/ogg" />

<source src="movie.mp4" type="video/mp4" />

您的瀏覽器不支持視頻標籤！

</video>

點擊這裏查看音頻和視頻標籤在瀏覽器中的效果：Audio - Vedio

就開發者而言，目前的狀況是，咱們須要準備多個版本的音頻和視頻，並把文件路徑都添加到audio和vedio中，web瀏覽器會跳過不支持的格式，另外，最好添加針對不支持audio和vedio的瀏覽器的文字提示或者其餘多媒體播放方式。

Audio和Vedio是兩個簡單而強大的標籤，目前國內外已經有多個多媒體分享網站開始支持或測試HTML5。

以下是一些HTML5 Vedio體驗資源：

Video showcase from Apple

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只在當前的會話中可用。

下面的例子演示統計用戶訪問網站的次數：

<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("您已經光臨本站 "+ localStorage.pagecount + " 次了.");
}
</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應用程序的易用性和可移植性。