服務熱線：
咨詢郵箱：
大同的網(wǎng)站W(wǎng)eb程序員們，你準備好迎接HTML5了嗎？
更新時間：2015-11-15 18:11:55 來源：大同網(wǎng)站建設 點擊：
HTML5作為下一代的web開發(fā)標準，其特性已經(jīng)慢慢地出現(xiàn)在主流的瀏覽器中，這種新的HTML將會讓瀏覽器不必再依賴Flash、 QuickTime、Silverlight等插件，也簡化了原來需要大量JS才能達到的效果。雖然HTML5還在討論過程中，但是其優(yōu)越的特性已經(jīng)得到了大家的認可，各大瀏覽器廠商，一些知名的內容發(fā)布網(wǎng)站也都是積極地推動， 尤其是IE9會完全支持HTML5。作為Web開發(fā)人員的我們，需要做的是：如何把HTML5轉化為各種Web應用，如何做到現(xiàn)有的Web應用過渡到HTML5。下面將介紹作為Web開發(fā)人員必須知道的HTML5特性，以及各特性可能的應用場景。
大同市宏微信息技術有限公司主要從事技術開發(fā)、技術服務、技術轉讓；電腦圖文設計、制作；網(wǎng)站網(wǎng)頁設計、維護；廣告設計、制作及發(fā)布；公司主要技術人員在大同制作網(wǎng)站、大同建站、大同做網(wǎng)站、大同網(wǎng)站建設、大同網(wǎng)站制作、大同網(wǎng)頁設計、大同網(wǎng)絡開發(fā)、大同網(wǎng)站優(yōu)化等方面有多年豐富的從業(yè)經(jīng)驗。
1， 用Canvas繪制圖形
Canvas的出現(xiàn)顛覆了傳統(tǒng)在Web應用中畫圖的方式，傳統(tǒng)的畫圖方式有在服務器端先畫好圖片，再把圖片發(fā)到瀏覽器中，或者用Flash，還有用第三方插件。但是這些方法都不是原生的HTML， HTML5 canvas提供了通過javascript繪制圖形的方法，方法簡單但是功能強大，作為開發(fā)工程師可以使用canvas API隨心所欲地控制圖畫。
2，多媒體音頻和視頻
<audio>和<video>是首批添加到HEML5規(guī)范中的標記。它們的加入使得web瀏覽器能夠以一種更方便的方式來處理音頻和視頻文件，結束了在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
點擊這里查看audio和video的屬性：HTML5 Audio HTML5 Video
創(chuàng)建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
就開發(fā)者而言，目前的情況是，我們需要準備多個版本的音頻和視頻，并把文件路徑都添加到audio和vedio中，web瀏覽器會跳過不支持的格式，另外，最好添加針對不支持audio和vedio的瀏覽器的文字提示或者其他多媒體播放方式。
Audio和Vedio是兩個簡單而強大的標簽，目前國內外已經(jīng)有多個多媒體分享網(wǎng)站開始支持或測試HTML5。
如下是一些HTML5 Vedio體驗資源：Video showcase from Apple
Google 聯(lián)合 Arcade Fire 推出了一個 HTML5 互動電影： The Wilderness Downtown，點擊這里可以進入其在 Chrome Experiment 的頁面。
3，Web存儲
隨著Web應用的發(fā)展，需要在客戶端存儲的場景越來越多，傳統(tǒng)的客戶端存儲方式有cookie、Firefox下有globalStorage、Flash在插件的支持下有其自己的存儲方式，但是這幾種方式都有其局限性（安全性和兼容性）。HTML5提供的在客戶端存儲方式有：Web Database和Web storage，Web Database適應與客戶端復雜數(shù)據(jù)的存儲，其標準還不成熟，瀏覽器的支持也很有限，需要Web開發(fā)人員進一步的關注，假如存儲的是簡單的數(shù)據(jù)，則可以使用Web storage方式，不占用帶寬，并且得到了主流瀏覽器的支持，包括IE8。
Web存儲有兩種方式：localStorage和sessionStorage，參考這里查看詳細定義，兩者的區(qū)別簡單來說，localStorage可以永久保存數(shù)據(jù)，也就是說關閉瀏覽器，下次打開瀏覽器還能取得存儲的數(shù)據(jù)，而sessionStorage只在當前的會話中可用。
4，其他的簡化了開發(fā)的HTML5特性
一些常用輸入類型：Email，url，number，date pickers等
一些標準屬性：contenteditable 等
一些input屬性：placeholder，required，autofocus，min，max，step，
這里推薦兩篇介紹這些HTML5特性的文章，請參考：你必須知道的28個HTML5特征、竅門和技術和給網(wǎng)頁設計師的30個HTML5學習資源
以上這些HTML5特性是目前瀏覽器支持較好的特性，也是關注度非常高的HTML5特性，本文是從一個Web開發(fā)人員的角度來理解HTML5，目的是希望有更多的Web開發(fā)人員能盡快地融入HTML5的開發(fā)中來，最近優(yōu)酷已經(jīng)開始應用HTML5和HTTP Live Streaming技術，讓更多的用戶可以在移動平臺分享多媒體，這對國內的HTML5的推廣起到了積極的作用，微軟承諾IE9將全面支持HTML5，這對HTML5的推廣是一個振奮人心的消息�？梢灶A見，未來幾年HTML5將快速地發(fā)展，作為Web開發(fā)人員，我們更應該盡快熟悉HTML5的各種特性，在項目開發(fā)過程中也應該更多考慮如何利用HTML5的特性加強web應用程序的易用性和可移植性。 (責任編輯：大同網(wǎng)站設計)
上一篇：揭秘!如何快速提高網(wǎng)站權重-關鍵詞百度指數(shù)疊加 下一篇：微信讓H5火了，但 H5 營銷需小心七大誤區(qū)