【第160期 January 5, 2011】
 

研發新視界

HTML 5之研究

作者/李彥霖

[發表日期:2010/12/16]



前言

HTML 的全名是Hyper-Text Markup Language,是編寫網頁的基本語言,而HTML 5是HTML下一個世代的版本,目前仍處於發展的階段。最終目標是取代1999年所制定的HTML 4.01和XHTML 1.0標準,使得在網際網路發展的同時可以達到符合當時的網路需求。

廣義上來說,HTML 5實際上指的是包含HTML、CSS和JavaScript在內的一套技術組合。它希望能夠減少瀏覽器對於需要外掛程式的豐富性網路應用服務(plug-in-based rich internet application,RIA),如Adobe Flash、Microsoft Silverlight,與Oracle JavaFX的需求,並且提供更多能有效增強網路應用的標準集。

HTML 5發展

多媒體影音檔案、互動式內容在目前的網頁建構已經十分普及,但舊版的HTML對於這些網頁元素缺職直接支援的標記,導致於網站的開發者必須要透過許多的外掛程式(plug-ins)才能達到豐富的網際網路應用(rich internet application;RIA)的功能,而且這些外掛的程式多數仍是封閉性技術,屬於特定軟體公司所有(如Adobe公司的Flash),此一作法違背了網際網路開方的精神,因此才會有HTML 5的出現。

HTML 5新增了許多舊版不存在的標記,例如增加可以直接對多媒體檔案的支援,可以在網頁中直接播放影片,而不用透過其他外掛程式,如目前流行的Adobe Flash技術,才能正確播放。目前仍許多的瀏覽器如Microsoft Internet Explorer、Opera、Mozilla Firefox、Google Chrome、Apple Safari(版本4以上)等瀏覽器皆支援HTML 5技術,而且網際網路已經從目前的個人電腦慢慢發展到個人行動裝置、平板裝置、電視以及多元的終端裝置,因此所有將搭上網際網路的裝置,都必須重視HTML 5的規格,來研發新的網頁技術進而推出整合式服務。

HTML 5的標準草案目前已進入W3C制定標準5大程序的第1步。負責編纂標準格式文件的Google代表Ian Hickson預期,可能得等到2012年才會推出建議候選版(W3C Candidate Recommendation)。

HTML 5新標記

HTML 5 新增的元素屬性有:contenteditable、contextmenu、draggable、irrelevant、ref、 registrationmark、以及 template;至於存在在 HTML 4.01,但是在 HTML 5 裡面卻被拿掉的屬性則是 accesskey。

以下列出了HTML 4以及對照HTML 5的版本的屬性說明:



HTML 5提供了一些新的元素和屬性,反映典型的現代用法網站。其中有些是技術上類似<div>和<span>標籤,但有一定含義,例如<nav>(網站導航塊)和<footer>。這種標籤將有利於搜索引擎的索引整理、小螢幕裝置和視障人士使用。同時為其他瀏覽要素提供了新的功能,通過一個標準介面,如<audio>和<video>標記。

一些過時的HTML 4標記將取消,其中包括純粹用作顯示效果的標記,如<font>和<center>,因為它們已經被CSS(串樣式列表Cascading Style Sheets)取代。還有一些透過DOM(文檔對象模型Document Object Model)的網路行為。

HTML 5新應用程序介面(API)

HTML 5在DOM的界面之外更提供了許多新的API:
  1. 即時二維繪圖:提供canvas元素,可以用來做即時二維繪圖

  2. 定時媒體播放

  3. 離線儲存資料庫(Offline storage database)

  4. 文件編輯(Document editing)

  5. 拖放(Drag-and-drop)

  6. 跨文件通訊(Cross Document Messaging)

  7. 瀏覽歷史管理

  8. MIME和協議處理程序時表頭登記

  9. Geolocation API:使用者可共享地理位置,並在Web應用的協助下享用位置感知服務(location-aware services)

  10. Web Sockets API:定義全雙工傳輸的通訊通道,它在Web之上通過單個Sockets進行工作:WebSocket是HTML5中非常重要的新特性,允許使用者在瀏覽器中實作雙向通信,以達伺服器得以實作對映的資料即時推送技術,這個技術的意義在於我們可以通過網頁實作以往難以達成的應用。使用者不再需要頻繁的更新頁面以獲取新資料,新資料會自動由伺服器端推送至使用者的電腦畫面上。

  11. Web Workers API:為Web應用提供後台處理的能力。

HTML 5異常處理

支援HTML 5的瀏覽器在處理錯誤的語法上必須有更佳的容錯能力。HTML 5的語法規則與 HTML 4相比,HTML 5的語法比較嚴格,因此HTML 5在設計的時候必須要保證舊的瀏覽器能夠安全的忽略掉新的HTML 5的代碼,即使發生語法錯誤的時候也能顯示正確的結果。

結語

HTML 5擁有開放性的標準,有益於網際網路的發展,網際網路上的應用軟體已經逐漸取代個人電腦上面的軟體,漸漸走向雲端概念的趨勢。因此,HTML 5開放性的特性勢必成為打擊Adobe Flash、Microsoft Silverlight,與Oracle JavaFX之類的技術,目前微軟、google以及Apple皆努力推動此一標準,尤其是Apple,因為Apple旗下的產品並不支援flash。身為資訊人,我們樂見更多開放性標準的開發,HTML 5的發展蓄勢待發,指日可待!

參考資料