HTML5全面剖析以及功能簡介
除非你與世隔絕,否則,一定聽到過關(guān)于 HTML5 的各種聲音,HTML5 表面上看是用來取代 Flash Web 視頻的,然而,它的使命遠(yuǎn)不止此。HTML5 是下一代 Web 語言,它不單單是一種標(biāo)記
除非你與世隔絕,否則,一定聽到過關(guān)于 HTML5 的各種聲音,HTML5 表面上看是用來取代 Flash Web 視頻的,然而,它的使命遠(yuǎn)不止此。HTML5 是下一代 Web 語言,它不單單是一種標(biāo)記語言,更為下一代 Web 提供了全新功能,并將引領(lǐng)下一代 Web 實現(xiàn)類似桌面的應(yīng)用體驗。
一、HTML5 主要新功能
1、本地音頻視頻播放;
2、動畫;
3、地理信息;
4、硬件加速;
5、本地運行(即使在 Internet 連接中斷之后);
6、本地存儲;
7、從桌面拖放文件到瀏覽器上傳;
8、語義化標(biāo)記;
二、HTML5 應(yīng)用現(xiàn)狀
現(xiàn)今,各大瀏覽器對 HTML5 的支持各有千秋,我們期待著他們在一兩年內(nèi)趨向一致,你可能以為,既然這樣,現(xiàn)在大概很少人在使用這個未來的標(biāo)準(zhǔn),事實并不如此,HTML5 現(xiàn)在已經(jīng)被廣泛應(yīng)用,正如 William Gibson 所言,未來的 Web 已經(jīng)來臨,只是還沒有被廣泛采用。
你可能不知道,Google 的首頁也使用 HTML5,不過,目前,他們還僅僅使用了 HTML5 的 doctype,頁面的其它部分還是舊代碼,但 Google 在他們的各種應(yīng)用中已經(jīng)在廣泛采用 HTML5。最典型的例子是 Gmail,HTML5 的離線存儲使用戶即使在離線狀態(tài)下也可以使用 Gmail,另外,Google Docs 也使用離線存儲,同樣使用離線存儲的其它廠商的類似應(yīng)用還包括 Zoho 的辦公套件和 Wordpress 的博客平臺。如果你對 HTML5 的離線存儲功能感興趣,可以看一看 Mark Pilgrim 的 how to add offline support to your apps 一文。
三、Scribd 基于 HTML5 的文檔閱讀器
上圖是 Scribd 的新文檔閱讀器,全部基于 Web 標(biāo)準(zhǔn),并未借助 Flash
除了視頻,HTML5 還可以在多個方面取代 Flash,文檔共享站點 Scribd 最近宣布,他們將使用 HTML5 取代 Flash 實現(xiàn)文檔閱讀器,Scribd 是 HTML5 結(jié)合 CSS 所能實現(xiàn)的驚人功能的最好例子,他們還使用 @font-face 實現(xiàn)個性化字體,另外,在翻頁時的變換效果也完全基于 CSS3。這些 Web 標(biāo)準(zhǔn)工具的結(jié)合使用,使 Scribd 實現(xiàn)了從 Flash 向純 HTML 的過度,同時并沒有犧牲文檔在結(jié)構(gòu),字體,內(nèi)嵌圖片,圖層等方面的功能。Scribd 的最新文檔閱讀器甚至支持 IE6,這里有一個實例,使用純 HTML 輸出復(fù)雜的公式。
四、HTML5 Canvas 與 HTML5 視頻
基于 HTML5 Canvas 對象的 Invaders 經(jīng)典游戲
雖然,Scribd 對 Canvas 的應(yīng)用已經(jīng)出神入化,我們還能找到更多這樣的站點。Canvas Demos 有一系列關(guān)于 Canvas 的應(yīng)用,從各種在線游戲,到從網(wǎng)頁上提取顏色的 Rainbow 應(yīng)用。
關(guān)于視頻,最典型的例子莫過于 YouTube 和 Vimeo,他們都提供了 HTML5 版本。
五、HTML5 地理信息定位
點擊地圖中,黃色小人上方的圓圈,可以告訴 Google 地圖你的地理位置
HTML5 的