HTML5網站制作：程序猿大蝦們學會了嗎？：

HTML5作為下一代的web開發標準，其特性已經慢慢地出現在主流的瀏覽器中，這種新的HTML將會讓瀏覽器不必再依賴Flash、 QuickTime、Silverlight等插件，也簡化了原來需要大量JS才能達到的效果。雖然HTML5還在討論過程中，但是其優越的特性已經得到了大家的認可，各大瀏覽器廠商，一些知名的內容發布網站也都是積極地推動， 尤其是即將發布的IE9會完全支持HTML5。作為Web開發人員的我們，需要做的是：如何把HTML5轉化為各種Web應用，如何做到現有的Web應用過渡到HTML5。下面將介紹作為Web開發人員必須知道的HTML5特性，以及各特性可能的應用場景。

　　1， 用Canvas繪制圖形

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

      2，多媒體音頻和視頻

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

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

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

　　創建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 的頁面。

　　3，Web存儲

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

　　Web存儲有兩種方式：localStorage和sessionStorage，參考這里查看詳細定義，兩者的區別簡單來說，localStorage可以永久保存數據，也就是說關閉瀏覽器，下次打開瀏覽器還能取得存儲的數據，而sessionStorage只在當前的會話中可用。

　　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應用程序的易用性和可移植性。

本文由廣州網站建設公司-三行網絡原創，轉載請保留版權（ 廣州網站建設www.gongxing888.com ）三行網絡——專注于企業網站建設、響應式營銷型網站定制，歡迎來電咨詢！熱線：020-85628720、15915767698

標簽： HTML5網站制作

上一篇：移動端手機全球貿易信息門戶：國內外商家一手掌握@進出口貿易APP開發    下一篇：個人能開阿里巴巴嗎,怎么收費,要交保證金嗎

• 2025做企業獨立站展示型官網多少費用？ 廣州網站建設,廣州網站設計制作,廣州做網站公司
• 參加廣交會——您需要一個產品展示型網站！ 廣州網站建設,廣州網站設計制作,廣州做網站公司
• 做個展示型公司網站要多少錢？ 廣州網站建設,廣州網站設計制作,廣州做網站公司
• 做個展示型網站多少錢？普通簡單的產品展示型網站！ 廣州網站建設,廣州網站設計制作,廣州做網站公司
• 廣州做網站公司 - 專注響應式網站設計 - PC/手機自適應 廣州網站建設,廣州網站設計制作,廣州做網站公司
• 企業官網改版 - 怎么改？ 廣州網站建設,廣州網站設計制作,廣州做網站公司
• 外貿產品展示網站搭建 - 讓全球看見中國質造！ 廣州網站建設,廣州網站設計制作,廣州做網站公司
• 2025廣交會 - 外貿逆勢上揚！3萬多家企業參與！ 廣州網站建設,廣州網站設計制作,廣州做網站公司
• 2025年137屆廣交會 - 琶洲會展 - 來圍觀下！ 廣州網站建設,廣州網站設計制作,廣州做網站公司
• 廣州企業網站設計：有哪些元素需要重點展示的？
• 外貿英文網站制作：打造國際業務的門戶
• 如何加強網站競爭力度
• 網站橫幅廣告圖片設計策略:簡潔為主
• 深圳做外貿網站——如何建站更細致！
• 網站地圖在企業網站建設陣營中的地位
• 廣州網站制作,響應式網站制作,外貿網站制作
• 深圳做網站,深圳建網站,深圳外貿網站建設
• 東莞做網站,東莞建網站,東莞外貿網站制作
• 廣州網站建設,中英文網站制作,企業網站設計
• 外貿網站制作,做外貿網站多錢,外貿企業網站制作
• 外貿網站建設,多語言網站定制,中英文網站制作