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