一、HTML5 主要新功能
1、本地音頻視頻播放;
2、動畫;
3、地理信息;
4、硬件加速;
5、本地運行(即使在Internet 連接中斷之後);
6、本地存儲;
7、從桌面拖放文件到瀏覽器上傳;
8、語義化標記;
二、HTML5 應用現狀
現今,各大瀏覽器對HTML5 的支持各有千秋,我們期待著他們在一兩年內趨向一致,你可能以為,既然這樣,現在大概很少人在使用這個未來的標準,事實並不如此,HTML5 現在已經被廣泛應用,正如William Gibson 所言,未來的Web 已經來臨,只是還沒有被廣泛採用。
你可能不知道,Google 的首頁也使用HTML5,不過,目前,他們還僅僅使用了HTML5 的doctype,頁面的其它部分還是舊代碼,但Google 在他們的各種應用中已經在廣泛採用HTML5。最典型的例子是Gmail,HTML5 的離線存儲使用戶即使在離線狀態下也可以使用Gmail,另外,Google Docs 也使用離線存儲,同樣使用離線存儲的其它廠商的類似應用還包括Zoho 的辦公套件和WordPress 的博客平台。如果你對HTML5 的離線存儲功能感興趣,可以看一看Mark Pilgrim 的how to add offline support to your apps 一文。
三、Scribd 基於HTML5 的文檔閱讀器
上圖是Scribd 的新文檔閱讀器,全部基於Web 標準,並未借助Flash
除了視頻,HTML5 還可以在多個方面取代Flash,文檔共享站點Scribd 最近宣布,他們將使用HTML5 取代Flash 實現文檔閱讀器,Scribd 是HTML5 結合CSS 所能實現的驚人功能的最好例子,他們還使用@font-face 實現個性化字體,另外,在翻頁時的變換效果也完全基於CSS3。這些Web 標準工具的結合使用,使Scribd 實現了從Flash 向純HTML 的過度,同時並沒有犧牲文檔在結構,字體,內嵌圖片,圖層等方面的功能。 Scribd 的最新文檔閱讀器甚至支持IE6,這裡有一個實例,使用純HTML 輸出複雜的公式。
四、HTML5 Canvas 與HTML5 視頻
基於HTML5 Canvas 對象的Invaders 經典遊戲
雖然,Scribd 對Canvas 的應用已經出神入化,我們還能找到更多這樣的站點。 Canvas Demos 有一系列關於Canvas 的應用,從各種在線遊戲,到從網頁上提取顏色的Rainbow 應用。
關於視頻,最典型的例子莫過於YouTube 和Vimeo,他們都提供了HTML5 版本。
五、HTML5 地理信息定位
點擊地圖中,黃色小人上方的圓圈,可以告訴Google 地圖你的地理位置
HTML5 的另一個功能是地理信息定位功能,一些瀏覽器提供了geolocation API ,這個API 也由W3C 管理,可以結合HTML5 實現你當前地理位置定位。 Google Maps 在使用該功能,在Google 地圖上,有一個小圓圈,點擊一下,就能告訴Google 地圖你現在的地理位置。目前,Geolocation API 並沒有被眾多桌面瀏覽器廣泛採用(只有Chrome 和Firefox 3.6+ 採用了),但Google Gears 插件可以幫助那些舊瀏覽器實現該功能。
Twitter 藉此實現地理信息感知的tweets 消息,當瀏覽器支持geolocation API 的時候,會自動使用該API,否則,則使用Google Gears。
六、HTML5 的更多意義
HTML5 的意義遠不止上面這些,它最大的意義在於改變了Web 文檔的結構方式,借助header, footer, section, article 這些標籤,我們可以實現更具結構化,語義化的Web 文檔。這樣,搜索引擎可以更容易索引Web 站點,我們也可以搜索到更快,更準確的信息。
已經有數不清的站點在使用HTML5 新標籤,你可以在HTML5Gallery 找到大量這樣的站點。要想現在使用HTML5 的新結構,不妨看看這篇HTML5 教程。
另外,借助Microdata, HTML5 還可以實現更強大的語義結構,這個標準化的數據格式(類似microformats),可以讓你的站點不僅能夠提供數據,還能提供數據定義。 Microdata 對瀏覽器和搜索引擎都意義深遠,搜索引擎可以藉助Microdata 發現你網絡中的好友,而瀏覽器則可以藉此連接到你的社會網絡好友站點,你可以在Google 的Rich Snippets Testing Tool 對此進行體驗。