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