HTML5 是什麼?
除非你與世隔絕,否則,一定聽到過關於 HTML5 的各種聲音,HTML5 表面上看是用來取代 Flash Web 視訊的 ,然而,它的使命遠不止此。HTML5 是下一代 Web 語言,它不單單是一種標記語言,更為下一代 Web 提供了全新功能,並將引領下一代 Web 實現類似桌面的應用體驗。
HTML5 主要新功能
- 本地音訊視訊播放
- 動畫
- 地理資訊
- 硬體加速
- 本地執行(即使在 Internet 連線中斷之後)
- 本地儲存
- 從桌面拖放檔案到瀏覽器上傳
- 語義化標記
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 對此進行體驗。
延伸閱讀
- HTML5:實至名歸還是言過其實?
- 關 於 HTML5,開發者可以期待什麼?
- HTML 5 之後是什麼?HTML
- 深入瞭解 HTML 5
- 讓 JavaScript. 拯救 HTML5 的離線儲存
- Web Forms 2.0 行將被 HTML 5 代替
- HTML 5 正在改變 Web
- HTML 5 令人期待的 5 項功能
- 當 HTML 5 遇見 Google
- HTML 5 會為 Flash 和 Silverlight 送終嗎?
- Firefox 訪談:OGG, HTML 5 與 Web 視訊的未來
- XHTML 2: 出師未捷身先死, HTML 5:萬千寵愛於一身
- HTML5 File API:把檔案從桌面拖放到 Web
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/12639172/viewspace-663019/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- HTML5培訓:什麼是HTML5?HTML
- 什麼是HTML5?HTML5發展前景如何?HTML
- 什麼是web前端?前端可以做什麼?html5有什麼用?Web前端HTML
- HTML5培訓分享:HTML5全棧工程師是什麼?HTML全棧工程師
- 說說html5手勢檢測原理是什麼?HTML
- Html5新增了什麼HTML
- HTML5如何學?HTML5該學什麼?HTML
- 為什麼HTML5這麼火?HTML
- HTML5如何學?學HTML5要注意什麼?HTML
- 為什麼你學HTML5前端這麼久,水平還是爛成渣?HTML前端
- 什麼是cookie,什麼是sessionCookieSession
- 這是什麼這是什麼
- 什麼是分而治之?什麼是WBS?
- 什麼是DNS,什麼是HostsDNS
- 什麼是WebAuthn、FIDO 是什麼?Web
- HTML5可以做什麼 HTML5工程師薪資多少HTML工程師
- ###什麼是Linux核心###什麼是MMULinux
- ITIL是什麼意思?ITIL是什麼?
- SNP全稱是什麼? SNP是什麼公司? SNP是什麼意思?
- HTML5開發都要學習什麼?HTML
- 人是什麼?人生是什麼?人為什麼會變?
- ftp是什麼,ftp是什麼東西?FTP
- 什麼是正向代理?什麼是反向代理?
- NLA是什麼?NLA的原理是什麼?
- Java是什麼_Java是做什麼的?Java
- 什麼是this
- 為什麼要有 Servlet ,什麼是 Servlet 容器,什麼是 Web 容器?ServletWeb
- 什麼是框架?為什麼說 Angular 是框架?框架Angular
- IDFA、IMEI、OAID 是什麼,區別是什麼AI
- GNU是什麼?和Linux是什麼關係?Linux
- 什麼是SSRF攻擊?SSRF用途是什麼?
- 什麼是API介面,具體是什麼意思?API
- DRBD是什麼意思?優缺點是什麼?
- 什麼是塊元素?什麼是行內元素?
- 什麼是Tornado?它的特點是什麼?
- html和html5有什麼區別呢?HTML
- nginx 是什麼,能幹什麼?Nginx
- 什麼是zoom?它有什麼作用?OOM
- 什麼是NLA,它有什麼用?