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