一手掌握HTML5技術的關鍵特色

過去十多年來，技術的發展變化很大，例如網路幾乎無所不在，隨時可以接取網頁的應用、Web 2.0的風潮席捲整個網頁世界；市占最高的微軟IE也逐步改版，坊間也出現許多種類型的瀏覽器，像是Mozilla Firefox、Apple Safari、Google Chrome，紛紛強調具有更優異的執行效能與對開放標準的高支援性，大幅縮短網頁應用程式與原生應用程式之間的效能差距，讓使用者願意接受不同的選擇，連帶地，也讓開發人員更願意採用HTML5這類標準。

不過，如同前一篇所提到，智慧型手機和平板電腦在這幾年快速竄紅，影響力也已擴及企業，使得這樣新興個人端連網環境，已經無法輕易被忽視。而這些行動裝置上所搭配的瀏覽器，都可以大幅支援HTML5規格，完全不像PC環境，仍有很多包袱，例如須考量廣大舊版瀏覽器用戶（如市佔仍有7%的IE6），而必須背負對新版網頁標準相容性不足的問題。

換句話說，開發人員除了要注意網頁能否在各種瀏覽器之間執行的效果差異，還需要想辦法在舊版瀏覽器環境中做出類似效果。

HTML5涵蓋的範圍

一般而言，HTML5的出現是為了接替HTML4，同時也是集合歷代HTML規格的最新修訂版，因此現行網站的所有網頁，對於支援HTML5的瀏覽器來說，都是可以執行的，相對地，若用不支援HTML5的瀏覽器，去開啟以HTML5新增的規格撰寫內容的網頁，就會產生不相容的狀況。

然而，就廣義來說，HTML5也是3種網頁前端開發技術的總集：包含HTML、CSS3（Cascading Style Sheets Level-3）、和JavaScript。

CSS的目的是，能以樣式表為網頁提供視覺呈現的統一效果。JavaScript則是瀏覽器開啟網頁時，能同時執行應用的指令碼語言（Web Scripting Language），程式碼需透過瀏覽器直譯和執行，而不像其他程式語言需先經過編譯，轉成Binary Code，它可用來操作網頁元素的產生與控制計算，並提供函式庫，裡面預設提供物件和方法，以便和網頁的文件物件模型（Document Object Model，DOM）互動。

值得注意的是，要善用HTML5的重要特色，基本上，可能都需要同時搭配CSS或JavaScript，才有可能辦到。

有哪些特色？從W3C的觀點來看，他們整理出8個：語意、離線與儲存、裝置存取、連線、多媒體、效能與整合與CSS 3。接下來，我們將針對其中幾項加以介紹。

網頁可直接播放多媒體

若在網頁上要呈現視訊、聲音，使用者端設備需安裝可播放的應用程式、編解碼器（Codec），或者仰賴Flash，搭配同樣需額外安裝的播放軟體進行。而這些對瀏覽器而言，都是需外掛的程式，而非內建機制。隨著Adobe不再開發手機與Linux平臺的Flash播放軟體，以及瀏覽器對HTML5標準的積極支援，未來你將會看到更多直接透過瀏覽器本身播放影音檔的例子。

在HTML5中，網頁要播放視訊和聲音的方法非常簡單，只要用<video>和<audio>標籤即可。例如<audio src=”http://www.ithome.com.tw/audio/tech.mp3”> </audio >，即是在網頁上播放檔名為tech.mp3的音訊檔。

回顧過去，網頁無法直接播放視訊畫，而播放聲音也沒有特定標準，所以很多網頁都採用Flash來呈現多媒體；如今，Flash應用將出現無法跨平臺的狀況（Adobe決定不繼續投入手機和Linux上的Flash應用），將會影響很大。

已投入Android平臺開發多年的聖星科技創辦人盧育聖表示，這改變（格式轉換）需要時間。會有人開始從Flash應用離開，一旦手機無法播放相關影音，業者就必須想辦法轉到HTML5。但他認為瀏覽器也要內建相關的標準Codec，於是大家就會逐漸往這方向走。畢竟，使用者都喜歡看Video。

目前各大瀏覽器主要支援哪些多媒體解碼格式？視訊方面，像是Ogg Theora、VP8、H.264，而音訊格式，則主要支援Ogg vorbis、WAV、MP3等。

但這樣的支援對於特定應用來說，還是不夠的，例如遊戲。

前微軟資深開發技術推廣經理，現為自由工作者的王森表示，標準的audio標籤是無法混音的，導致非Chrome瀏覽器上的Angry Birds遊戲不能用Audio API，只能用Flash彌補。

他認為，用HTML5開發Casual Game是可以的，但是對於需要大量3D運算的遊戲，目前還沒看到有好的例子出現。另外，開發遊戲需倚賴搭配好的遊戲引擎，以加速開發，而HTML5目前仍缺乏常用的遊戲引擎。

其他人也有類似看法，例如身為Timefire共同創辦人暨CTO的Ray Cromwell，他在〈The problems with HTML5 <Audio>〉一文中表示，HTML5的audio標籤，雖然像音樂播放器，一樣可以做到快轉、循環播放與控制音量，但單靠它，並無法合成聲音、取樣、處理音訊樣本、套用環境特效，或是基本的立體聲移位（stereo panning）。看來，這部份的發展還有待努力。

具有本機儲存的能力提升

對於智慧型手機或平板電腦，目前要達到持續與網路連線的目標，還有一段距離，因此一定必須面對離線時的處理。當網頁技術不斷發展，也許有一天我們不再需要用原生應用程式，而是都用HTML、CSS和JavaScript來寫，那如何保障程式不論離線與否，都可以執行呢？

若使用者不能上線，應用程式就有必要在單機內能夠執行，如同我們目前在個人電腦上執行Word、Excel。

盧育聖認為，這時候Local Storage對網頁應用程式來說，就很重要。讓程式可以在離線環境下執行編輯內容，等到連線恢復時再同步資料，此時，可透過HTML5的Web Sockets以網路傳輸資料，來達到目的。

就本機儲存的功能而言，HTML5分為Web Storage和本機資料庫（SQLite和Indexed Database）。前者的目的，是企圖取代目前網頁以Cookies儲存資料的作法，而這又可細分為暫時性儲存的sessionStorage，以及較長久儲存的localStorage等兩種。sessionStorage是指使用者瀏覽該網站期間所要儲存的資料，而localStorage則是會儲存在磁碟中，即使瀏覽器關閉，以此方式儲存的資料還是存在。

叡揚資訊知識產品國際事務處產品開發經理邱維新表示，以前使用者瀏覽網頁時，要儲存資料，須透過Cookies或存放在網站伺服器端；現在可在瀏覽器存取時，預載在使用者本機記憶體中作為快取。他們主要是利用本機儲存，以Key-Value的方式暫存部分資料，讓使用者不用每次都從伺服器端重載，同時節省頻寬及伺服器的負載程度，並且加快App的反應速度。

但他也說，由於HTML5目前只能做到部分離線處理，因各種瀏覽器在SQLite的支援度不一，所以暫時還沒有考慮使用。未來，如果這方面的功能支援得非常完整，他認為將可以讓App發揮更強大的資料處理能力。

對於HTML5的本機儲存，但仍有一些部分的實作需要考量。王森也有類似觀察，他說，就算是Google Docs，應用上也遇到一些限制，如同步機制。目前網頁應用的同步機制並沒有標準化的做法。此外，這樣的機制能否具有儲存大量資料的能力，也令人感到疑慮。

關於本機儲存如何運用，普奇科技ZK核心開發團隊的工程師王景弘表示，首先要考量用途是傾向於作動態資料的快取，或是靜態資料之類的儲存？由於使用者還是需要資料的同步更新，使用者切換不同瀏覽器去存取網頁的行為也很常見，所以這種單靠本地的資料庫，去儲存所有的資料的狀況，目前還不容易發生。

此外，王景弘也觀察到網頁瀏覽器目前對HTML5本機資料庫提供的支援，仍以No-SQL（這裡所指的是Indexed Database）的部分居多，因為No-SQL是新興的資料儲存方式，還有待發展。

Canvas讓開發人員能直接用網頁繪出圖形

先前HTML不具備繪圖的機制，因此開發人員常需先做出圖片檔才能達到效果，但同時還必須處理圖片互相遮蔽的狀況。而HTML5提供了Canvas（畫布）的方式後，現在開發人員可直接用JavaScript來繪製矩形、圓形、多角形、圖片影像、圖表、動畫。

王景弘說，Canvas預設是透明的，所以就可以任意疊加∕畫在其他元素上。Canvas也可以用來繪製3D圖形，也就是所謂的WebGL。相較之下，以前缺乏有效的方案。

Canvas不只是提供2D與3D繪圖，能應用在遊戲上，在商用軟體的領域中，Canvas也能發揮特色，例如許多應用程式中，常見的統計圖表描繪，目前已經有一些廠商推出基於HTML5 Canvas所開發的圖表庫。

此外，也有廠商思考Canvas能否達到其他目的。叡揚知識產品國際事務處CRM雲端服務部經理楊東城表示，他們會考慮讓使用者在App中，利用畫圖的方式來寫報告，或是記錄客戶的記事。

提供觸碰事件的處理能力

網頁應用程式原本就支援滑鼠事件的處理，然而針對觸碰式的設備，如智慧型手機或平板電腦，若繼續用滑鼠事件對應，相關的操作可能會受到限制。

現在，HTML5將觸碰裝置的使用列入規範，它提供介面讓應用程式可以直接處理觸碰事件，以及多點觸碰裝置。它目前支援touchstart、touchend、touchmove、touchcancel等4種觸碰事件的處理。

王景弘認為，當使用者使用支援觸碰的裝置上網時，使用體驗將大幅改變：舉凡以雙指進行縮放、單指移出∕移入、多點觸碰等，這些都有機會改變人們操作網頁的習慣。隨著這類裝置的普及，人機介面可能會與現在大相逕庭，而這也有助於開發者對操作介面的運用，開拓出新的想像空間。而HTML5 將觸碰事件列入規範，也能避免各家實作不一的窘境。

使伺服器端與個人端能雙向通訊的WebSocket

過去，網頁與瀏覽器之間只能透過HTTP，用Stateless的Request、Response方式來互動，現在HTML5可允許用WebSocket在兩端建立雙向通訊管道，而不需要重新建立連線。但這麼做之後，很多人會擔心應用的安全性會有疑慮。

王景弘提到，當初WebSocket的設計是為了解決無法即時∕隨時傳輸的問題，而沒有考慮到安全性的部份。使用者可能開啟多個WebSocket來對伺服器發動DDoS攻擊，特別是網頁遭到惡意程式碼攻擊時（例如XSS）。也有一些人討論它被用作Proxy的可能性（攻擊、存取其他遠方伺服器）。

因為安全性的問題，Firefox（第4版和第5版）和Opera （第11版)一度移除WebSocket。這規格因為還在草案的關係，變化相當快，去年底IETF新發布的RFC 6455，對規格有所編修。而目前支援RFC 6455的瀏覽器已有Chrome 16和Firefox 11，而Apple Safari 5.0.2/5.1、iOS 4.2/55 支援的WebSocket規格，是較早的草案（hixie-76）。

可獲得使用者地理位置資訊的Geolocation

不論是App或網頁應用程式，結合地理位置感知的服務（Location-Based Service）已相當風行，而透過Geolocation的運用，例如使用者所在的經度、緯度、海拔高度，以及行進方向、速度等資訊，網頁應用程式可經由裝置本身的GPS定位功能提供，或從網路上取得，充分發揮設備本身的特色。

楊東城提到，在他們的CRM產品應用中，可運用此功能來記錄使用者的所在地，提供類似打卡的功能。同時，根據使用者目前的位置，還能用來幫助業務員找出正在附近活動的客戶，讓他可以隨時就能去拜訪戶。

除了定位，HTML5還可以讓網頁應用程式存取聲音或影像的輸入裝置，例如麥克風和網路錄影機（HTML Media Capture API）、聯絡人（Contacts API）及裝置傾斜角度（Device Orientation Event API）等本機資料。

Web Workers提供多工，瀏覽器可在背景執行其他程式

運用JavaScript時，通常每次只能執行一個執行緒，現在有了Web Workers的機制，程式碼可以在背景執行，獨立於其他使用介面執行的程式碼之外，讓長期執行的程式可以持續運作，不會受到部分需回應使用者的動作所中斷。盧育聖認為，Web Workers就像多執行緒、多工。若應用程式的執行改成以瀏覽器、網頁技術為主，具有這項機制的HTML5將扮演很重要的角色。

降低圖片用量，讓版面配置更美觀的CSS3

很早的時候（1996年），CSS（Cascading Style Sheets）就已經開始應用在網頁設計上，對初學者而言，除了要搞懂HTML和JavaScript怎麼寫之外，也要了解CSS如何設計與運用。

對於CSS的存在，很多人的認識是為了將網頁的內容與呈現方式分開，而用它來控制網頁的風格和外觀，目前相關規格已發展到Level 3，簡稱為CSS3。到了現在，HTML5在發展上，不只是要借助JavaScript的力量，W3C也將CSS3納入HTML5的範疇內。

CSS細分多個部分，包含選擇器、背景與邊緣、文字特效、2D/3D變形、動畫、多欄呈現和使用介面。

以文字的呈現為例，CSS可以開發人員用word-break和word-wrap等屬性，指定將內容依視窗寬度自動換行，也可以用column-count、column-gap等屬性，來設定欄位數量和欄位間隔距離。

對於顏色的透明度，CSS3也允許開發人員用Opacity屬性來操作。它同時也可以用Gradients來做到顏色漸層的效果。

CSS3中還有一個特別受到很多人歡迎的屬性，那就是border-radius。以網頁開發人員要將特定區塊或按鈕做成是邊緣有圓角的樣式，往往得借助圖片來進行，有這個屬性後，單靠CSS就可以達到目的。

王景弘說，HTML5+CSS3可以簡化一些Layout組成的方式，例如按鈕可以很彈性地放大、縮小。以前要讓按鈕有圓邊、陰影，需透過切九宮格或十幾宮格的方式規畫，相當麻煩。現在在HTML5和CSS3就已經支援，省了很多功夫。

瀏覽器支援CSS3 border-radius與否的差異

想快速了解新舊版瀏覽器對CSS的支援度如何，可以用圖中這個完全以CSS語法呈現的哆啦A夢網頁（http://css3.zxq.net/doraemon/doraemon_css3.html），或波提獅網頁（http://goo.gl/93RAv）來印證。

HTML5可使網頁直接播放視訊

若網頁用HTML的Video標籤來呈現影音檔，支援HTML5的瀏覽器開啟這個網頁後，可以呈現畫面進度、音量大小的控制桿。圖中取自Apple的HTML5示範網站（http://goo.gl/Hm0CT），內容是電影《創：光速戰記》的預告片。

網頁可直接產生圖表，而不需仰賴圖檔或Flash

HTML5的Canvas屬性，可用作視覺化圖表元件的產生，圖中為由RGraph圖表元件用HTML5和JavaScript所示範的長條圖。

相關報導請參考「用HTML5打造次世代網頁」