HTML5網頁設計探析

宋昭壽，胡忠旭，漆麗娟

（昭通師范高等專科學校計科系，云南 昭通 657000）

HTML5網頁設計探析

宋昭壽，胡忠旭，漆麗娟

（昭通師范高等專科學校計科系，云南 昭通 657000）

HTML5是Web 應用發展的方向，它更注重網頁的表現和應用.通過對HTML5新特性、屬性的分析，對比此前的網頁設計技術HTML4.01、XHTML1.0和CSS； 并用實例說明HTML5在簡潔化、語義化標簽、離線存儲、WebSocket協議、Web forms2.0等方面給網頁設計帶來的影響.

HTML5; CSS; Web Forms2.0; 網頁設計

引言

2000年底，國際W3C組織公布發行了 XHTML 1.0 版本，到現在已經有10 年了.這10 年里，Web飛速發展，XHTML 1.0已經跟不上時代的發展了，于是 HTML 5孕育而生.W3C 在 2008 年1月發布了第一份 HTML 5 工作草案[1].和以前的版本不同，HTML 5 并非僅僅用來顯示Web 內容，它將把Web帶入一個成熟的應用平臺，在這個平臺上，視頻，音頻，圖形，動畫，以及人與Web應用的交互都被標準化.目前Firefox、Google Chrome、Opera、Internet Explorer 9等主流瀏覽器已開始支持HTML5技術.隨著愈來愈多的瀏覽器對HTML5的支持，網絡應用將進入HTML5時代.

本文就HTML5給網頁設計帶來的各個方面的影響進行分析，對比新老技術中實現方案的不同，并就HTML5當前面臨的問題做說明.

1 文檔類型定義更簡潔

HTML4，XHTML中對文檔定義類型的說明都有三種，分別是：Strict（嚴格的）、Transitional（兼容模式） 以及 Frameset（框架模式）.HTML文檔的第一項必須是文檔類型定義聲明[2]，它的作用是告訴瀏覽器，本文檔是采用何種HTML 或 XHTML 規范的，瀏覽器將根據其規范進行解析.

HTML4.01、XHTML1.0采用的三種類型定義格式如下[3-4]：

在HTML5中，這就變得很簡單了，只需要采用一種方式進行聲明，即:[3]

2 網頁結構標記語義化，網頁布局更簡潔

HTML5中增加了語義化標簽如：header, nav,section, article, aside, footer；與之前的HTML版本比較，在HTML5中可以更方便、快捷的實現網頁布局.

在之前版本中的頁面結構，一般使用div元素加上描述id或class來標記，一個基本的頁面機構如下圖所示：

圖1 HTML4、XHTML頁面結構

在HTML5中，提供了語義化的Tag，對于圖1的頁面結構，可以通過相關的標記輕松實現而且這種標簽將有利于搜索引擎的索引整理、小屏幕設備和視障人士使用.

圖2 HTML5頁面結構

HTML5中增加的新標簽有：section，video，progress，nav，meter，time，aside，canvas，command，datalist，details，embed，figcaption，figure，footer，header，hgroup，keygen，mark，output，rp，rt，ruby，source，summary，wbr；同時不再支持這些標簽：acronym，applet，basefont，big，center，dir，font ，frame，frameset，isindex，noframes，strike，tt.

3 不依賴于Flash、Silverlight的動畫圖形顯示

在HTML5中的新對象Canvas給瀏覽器帶來直接在上面繪制矢量圖的能力，意味著可以脫離Flash（Adobe公司）和Silverlight（微軟公司），直接在瀏覽器中顯示圖形或動畫.需要配合Javascript 使用.多媒體對象將不再全部綁定在Object或Embed Tag中，而是視頻有視頻標簽

4 WebSocket協議，更好的節省服務器資源和帶寬并實時通訊

現在，很多網站為了實現即時通訊，所用的技術都是輪詢[7].輪詢是在特定的時間間隔（如每1秒），由瀏覽器對服務器發出HTTP request，然后由服務器返回最新的數據給客戶端的瀏覽器.這種模式帶來的缺點是，瀏覽器需要不斷的向服務器發出請求，服務器返回數據，然而HTTP request 的header是非常長的，里面包含的數據可能只是一個很小的值，這樣會占用很多的帶寬和服務器資源.

在 WebSocket[5]API 中，瀏覽器和服務器只需要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道.兩者之間就可以通過WebSocket通道進行數據的相互傳送.服務器與客戶端之間交換的標頭信息很小，大概只有2字節.而且服務器可以主動傳送數據給客戶端.

5 離線存儲與本地數據庫

在HTML5中可以很方便的實現離線存儲，在用戶沒有與因特網連接時，照樣可以訪問站點或應用，在用戶與因特網連接時，自動更新緩存數據.

實現這樣的功能，可以采取如下步驟進行：

（1）定義一個manifest緩存清單，假設為“offlinetest.manifest”，列出一些需要緩存的資源清單；并在HTML文檔中指定manifest屬性為所定義的manifest清單文件，如：

圖3 ：HTML5文檔中manifest屬性關聯

圖4 ： offlinetest.manifest文檔結構

（2）確保WEB服務器支持“ .manifest”的MIME 類型；可以在.htaccess 文件中添加代碼：AddType text/cache-manifest .manifest，亦可通過修改WEB服務器配置文件http.conf來實現MIME支持，否則服務器不會提供.mainfest類型文件的訪問.

這個功能將內嵌一個本地的SQL數據庫（Web SQL Database），以加速交互式搜索、緩存以及索引功能.同時，那些離線Web程序也將因此獲益.

6 為WEB表單設計帶來的便利

HTML5中的form組件，又有web forms2.0[6]之稱，是對HTML4中的form標記的擴展，增加了form相關的部分form元素和屬性：內置表單驗證，輸入框占位符，外部表單關聯等，避免了采用HTML4中的冗余的代碼驗證和樣式控制，為網頁開發帶來很多的便利.具體舉例如下：

6.1 內置表單驗證，使表單驗證不再復雜

6.2 輸入框占位符，輕松實現良好的人機交互界面

占位符就是出現在輸入框的提示文本，當你點擊輸入欄，它就自動消失.在此前，需要用JavaScript和jQuery做輸入框占位符，而在HTML5中，可以非常容易的顯示一個占位符.只需給輸入框加上placeholder屬性，在屬性值中輸入你需要給用戶的提示即可.

6.3 表單元素外部連接應用，使得表單結構更自由

通過元素的for屬性，可以將這些表單元素分布在HTML中的各個位置，不一定只包含在form中.，通過這種方式，即給input元素添加 for屬性可以指定其關聯表單的id，輸入元素可以不像HTML4.01,、XHTML1.0那樣，必須將input元素包含在form表單中.

HTML4.01,、XHTML1.0中，如果不提交某個表單中的元素，只能讓后臺程序員不接受此參數或者使用js把所有需要在此表單中提交的內容放入到hidden隱藏區域中，然后提交.

7 HTML5的其他特性和不足

7.1 HTML5規范說明詳細，消除誤解

關于HTML5規范的說明達到900多頁，W3C提供了詳細的說明，力求消除各種歧義和誤解，最終的說明甚至還會增加；HTML5標準工作組試圖提供完備的Web解決規范，希望在2022年以前實現瀏覽器器互通.

7.2 HTML5提供精確定位的錯誤恢復機制

HTML5具備強大的錯誤處理機制，提倡重大錯誤的平緩恢復，頁面中有錯誤不會導致整個頁面不工作，只是以標準方式顯示“broken”標記，讓用戶的獲得很好的使用體驗和明確的判斷.

7.3 HTML5與CSS3

與HTML5一起發展的規范還有CSS3，與CSS3協同工作將使HTML5具有更強大的生命力.通過CSS3規則應用，可以輕松實現圓角、陰影（shadows）、漸變（gradients）等效果.目前，為了解決不同瀏覽器之間命名空間沖突，需要在CSS selecter 聲明部分加上各自瀏覽器的前綴：-webkit（為Chrome/Safari）、-moz（為Firefox）、-ms（為IE）、-o（為Opera）.

7.4 HTML5面臨的困難

HTML5正在加緊發展，很多的組織、開發人員都在關注HTML5給WEB帶來的更好的體驗，但它仍是開發中的標準，自身已面臨一些困難：HTML5標準統一及何時推出的問題；瀏覽器支持問題；WEB應用相關支持包括網絡保障、應用人群數量少等.這些困難將會給HTML5的發展帶來一定的阻力.

結束語

HTML5總結了之前HTML的優缺點，順應了WEB應用發展的需要，強化網頁的表現和應用，使得WEB應用變得愈來愈豐富，它網頁設計帶來了新的技術理念——簡潔、實用.WEB 應用是互聯網發展的必然趨勢之一，網頁開發、設計人員在面對HTML5技術的時候，既要了解當前技術可實現的效果，又要在實際的工作中不斷摸索和總結，緊跟網絡應用發展，不斷嘗試.未來幾年，HTML5將是Web應用領域的主流技術之一.對于網頁開發、設計人員是一次機遇，也是一次挑戰.

[1] 龍奇.新一代網絡技術標準HTML5的研究.科技信息 [J].2011,(10): 245.

[2] （美）鮑爾斯 著 劉申,朱瑜敏,魯奇 譯.精通CSS與HTML設計模式[M].北京:人民郵電出版社,2008:41.

[3] HTML5 differences from HTML4.W3C Working Draft 25 May 2011.http://www.w3.org/TR/html5-diff/.

[4] HTML 標簽.http://www.w3school.com.cn/tags/tag_doctype.asp.

[5] The Web Socket API.Editor's Draft 21 February 2012.http://dev.w3.org/html5/websockets/.

[6] Web Forms 2.0 Working Draft — 5 January 2009.

[7] （荷）柳伯斯,（美）阿伯斯,（美）薩姆.李杰,柳靖,劉淼譯.HTML5高級程序設計.[M] 北京:人民郵電出版社,2011:1140.

Research on HTML5 Web Design

SONG Zhao-shou,HU Zhong-xu,QI Li-juan
(Zhaotong Teachers’College ,Department of Computer Science, Zhaotong 657000, China)

HTML5 is the direction of Web Applicat ion ,it pay more attention to the performance and applicat ion for the web page.The paper analysis the new features and attributes of the HTML5, compared the web design technology between HTML5 and HTML4.01、XHTML1.0 、CSS.Use examples shows the impact s with HTML5, such as concise and semantic tags, off line_stroge, protocol of Web Socket,Web forms 2.0 and so on.

HTML5; CSS; Web Forms2.0; Web design

TP31

A

1008-9128（2012）02-0053-04

2011-12-15

云南省教育廳項目（2011C042）

宋昭壽（1958—），男，云南鎮雄人，高級講師.研究方向：計算機教育研究．

[責任編輯 自正發]