加入RUN!PC粉絲團
最近新增的精選文章
 
最多人點閱的精選文章
 
 
精選文章 - 開發技術
分享到Plurk
分享到FaceBook
 
HTML5開發系列(1-2)
文‧圖/沈炳宏 2012/4/12 下午 03:24:54

HTML5新功能

那麼除了上述的HTML基本組成元件之外,HTML5又多了哪些新東西?我們必須要注意的是,過去HTML所發展的目的在於以標籤語言來呈現文件內容,但由於網頁的發展日新月異,過去單純顯示文字和圖片的內容已經不符合現代應用程式的需求,在Web 2.0的時代瀏覽器會具備更多更強大的功能來執行應用程式,而HTML5則會是第一個原生在瀏覽器上發展,且相容過去HTML規格的應用程式開發規格,以下會分別說明HTML5具備的各種特性。

錯誤處理

除了能夠與過去HTML規格相容之外,HTML5也具備了錯誤處理的能力,通常網頁開發人員在設計網頁時,都會以自己習慣的模式來進行設計文件內容,因此有許多時候設計出來的文件多半是不合乎語法規則的,但由於瀏覽器的兼容性,使得其會盡可能的解析網頁的內容並顯示給使用者,而這也導致不同的瀏覽器廠商在解析同樣一份不是完全合乎邏輯的網頁文件時,會有不同的處理方式,因此即便不同的瀏覽器都有辦法解析網頁內容,但最後呈現給使用者的內容可能是有差異的。

若要解決網頁文件在跨瀏覽器顯示的問題,最直覺的方式就是強制瀏覽器只能解析完全符合規則和語法的網頁,否則將完全不能顯示,如此一來網頁開發人員也被強制一定要設計出嚴謹的網頁內容,而這也是XHTML當初發展的目的,但由於現實因素使得這種方法證明是失敗的。另外一種想法則是轉向到瀏覽器廠商,將可能會遇到不合規則的網頁錯誤處理方式標準化,這種方式是HTML5所傾向使用的,這樣一來瀏覽器在遇到這些網頁時便可以選擇要以HTML5規定的方式來處理錯誤,或者直接判斷為錯誤停止執行。

簡化doctype

如果查看目前多數網站上的網頁原始瑪將可發現,在開頭處都會宣告doctype使用的DTD文件,如程式4所示,其中可看到doctype宣告會指向W3C網站中的DTD文件,表示網頁要使用的元素規則和語法,然而由於HTML已經有提供多個版本,因此使用不同的DTD將會有不同的解譯方式,使得顯示效果也不盡相同。

程式4




在HTML5發展的一個重要目標就是未來撰寫的網頁都仍然能夠相容過去的HTML規則,而這其實也就是純粹的HTML網頁所要提供的功能,因此在HTML5中完全去除了相關的DTD,doctype只需要以來宣告即可。

簡化字元編碼

與doctype宣告需要使用DTD來檢查網頁內容的語法,類似的功能還有meta charset宣告,這是作為字元編碼之用,主要是告知瀏覽器目前的網頁內容是以什麼國家的語言來進行撰寫,並讓瀏覽器以正確的文字編碼方式顯示內容給使用者,在HTML5規格書中強烈建議要在產生的網頁內容中加上文字編碼的宣告,而建議的做法是讓伺服器動態在回應給使用者的網頁標頭中加上該宣告,若無法在伺服器上進行類似的設定,替代的方式可以在網頁的head區塊中加上該宣告。 過去在HTML 4.01中meta元素涵蓋了http-equiv、content和charset等屬性,但在HTML5中只需要寫成即可。

應用程式介面

除了網頁內容的元素簡化和變更之外,在HTML5中更涵蓋了網頁應用程式開發所需要使用的API規格,這些API最主要是透過JavaScript並結合網頁元素來使用,諸如透過video和audio元素來播放影片和聲音,取得瀏覽器歷史資訊,暫存網頁資料至快取達到離線存取功能,使用者地理位置資訊等。

瀏覽器與開發工具的支援

時至今日各大瀏覽器廠商已經整合進更為豐富的HTML5的功能,不過各家瀏覽器功能還是會有所差異,因此網頁開發人員若要設計HTML5的功能,可以先至http://caniuse.com網站比較各種瀏覽器的版本對於HTML5功能的支援程度,此外若電腦或者行動裝置有不同的瀏覽器可以使用,可以直接連接至http://html5test.com網站,該網站能夠動態提供目前使用的瀏覽器針對HTML5的支援程度。

對於網頁開發人員所需的開發工具,目前多數的瀏覽器都內建了開發者工具(表 1),讓開發人員能夠透過該工具了解並處理網頁上的HTML/CSS/JavaScript等元素,包含這些工具的瀏覽器在網頁上點選滑鼠右鍵時,都會有一個[檢查元素]或者類似的功能,在要查看的內容上點選該功能就會在開發者工具中顯示目前所選擇的元素,包含HTML元素和所使用的CSS樣式表,除此之外開發者工具中也提供了console視窗,讓開發人員可以在其中直接輸入JavaScript程式碼動態偵錯,也能夠在其中透過console.log命令列印JavaScript所擷取的物件內容。



表 1



結語

在結束這篇文章之前,可能還會有個疑問HTML5是否可以開始採用?雖然根據HTML5發展的時程表到2022年前才能夠完全確定其規格,但實際上整個HTML5的過程和Web 2.0是類似的,其包含的功能和技術都會隨著時代和需求持續進行演變和改進,各家瀏覽器也不斷地推陳出新改進HTML5支援程度,因此可以確定的是,未來多數的PC和行動裝置上的應用程式,將會以HTML5為主流進行發展,有志開發人員不妨參考。