HTML5網(wǎng)頁設(shè)計(jì)探析

宋昭壽，胡忠旭，漆麗娟

（昭通師范高等?？茖W(xué)校計(jì)科系，云南 昭通 657000）

HTML5網(wǎng)頁設(shè)計(jì)探析

宋昭壽，胡忠旭，漆麗娟

（昭通師范高等?？茖W(xué)校計(jì)科系，云南 昭通 657000）

HTML5是Web 應(yīng)用發(fā)展的方向，它更注重網(wǎng)頁的表現(xiàn)和應(yīng)用.通過對(duì)HTML5新特性、屬性的分析，對(duì)比此前的網(wǎng)頁設(shè)計(jì)技術(shù)HTML4.01、XHTML1.0和CSS； 并用實(shí)例說明HTML5在簡潔化、語義化標(biāo)簽、離線存儲(chǔ)、WebSocket協(xié)議、Web forms2.0等方面給網(wǎng)頁設(shè)計(jì)帶來的影響.

HTML5; CSS; Web Forms2.0; 網(wǎng)頁設(shè)計(jì)

引言

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

本文就HTML5給網(wǎng)頁設(shè)計(jì)帶來的各個(gè)方面的影響進(jìn)行分析，對(duì)比新老技術(shù)中實(shí)現(xiàn)方案的不同，并就HTML5當(dāng)前面臨的問題做說明.

1 文檔類型定義更簡潔

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

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

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

2 網(wǎng)頁結(jié)構(gòu)標(biāo)記語義化，網(wǎng)頁布局更簡潔

HTML5中增加了語義化標(biāo)簽如：header, nav,section, article, aside, footer；與之前的HTML版本比較，在HTML5中可以更方便、快捷的實(shí)現(xiàn)網(wǎng)頁布局.

在之前版本中的頁面結(jié)構(gòu)，一般使用div元素加上描述id或class來標(biāo)記，一個(gè)基本的頁面機(jī)構(gòu)如下圖所示：

圖1 HTML4、XHTML頁面結(jié)構(gòu)

在HTML5中，提供了語義化的Tag，對(duì)于圖1的頁面結(jié)構(gòu)，可以通過相關(guān)的標(biāo)記輕松實(shí)現(xiàn)而且這種標(biāo)簽將有利于搜索引擎的索引整理、小屏幕設(shè)備和視障人士使用.

圖2 HTML5頁面結(jié)構(gòu)

HTML5中增加的新標(biāo)簽有：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；同時(shí)不再支持這些標(biāo)簽：acronym，applet，basefont，big，center，dir，font ，frame，frameset，isindex，noframes，strike，tt.

3 不依賴于Flash、Silverlight的動(dòng)畫圖形顯示

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

4 WebSocket協(xié)議，更好的節(jié)省服務(wù)器資源和帶寬并實(shí)時(shí)通訊

現(xiàn)在，很多網(wǎng)站為了實(shí)現(xiàn)即時(shí)通訊，所用的技術(shù)都是輪詢[7].輪詢是在特定的時(shí)間間隔（如每1秒），由瀏覽器對(duì)服務(wù)器發(fā)出HTTP request，然后由服務(wù)器返回最新的數(shù)據(jù)給客戶端的瀏覽器.這種模式帶來的缺點(diǎn)是，瀏覽器需要不斷的向服務(wù)器發(fā)出請(qǐng)求，服務(wù)器返回?cái)?shù)據(jù)，然而HTTP request 的header是非常長的，里面包含的數(shù)據(jù)可能只是一個(gè)很小的值，這樣會(huì)占用很多的帶寬和服務(wù)器資源.

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

5 離線存儲(chǔ)與本地?cái)?shù)據(jù)庫

在HTML5中可以很方便的實(shí)現(xiàn)離線存儲(chǔ)，在用戶沒有與因特網(wǎng)連接時(shí)，照樣可以訪問站點(diǎn)或應(yīng)用，在用戶與因特網(wǎng)連接時(shí)，自動(dòng)更新緩存數(shù)據(jù).

實(shí)現(xiàn)這樣的功能，可以采取如下步驟進(jìn)行：

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

圖3 ：HTML5文檔中manifest屬性關(guān)聯(lián)

圖4 ： offlinetest.manifest文檔結(jié)構(gòu)

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

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

6 為WEB表單設(shè)計(jì)帶來的便利

HTML5中的form組件，又有web forms2.0[6]之稱，是對(duì)HTML4中的form標(biāo)記的擴(kuò)展，增加了form相關(guān)的部分form元素和屬性：內(nèi)置表單驗(yàn)證，輸入框占位符，外部表單關(guān)聯(lián)等，避免了采用HTML4中的冗余的代碼驗(yàn)證和樣式控制，為網(wǎng)頁開發(fā)帶來很多的便利.具體舉例如下：

6.1 內(nèi)置表單驗(yàn)證，使表單驗(yàn)證不再復(fù)雜

6.2 輸入框占位符，輕松實(shí)現(xiàn)良好的人機(jī)交互界面

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

6.3 表單元素外部連接應(yīng)用，使得表單結(jié)構(gòu)更自由

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

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

7 HTML5的其他特性和不足

7.1 HTML5規(guī)范說明詳細(xì)，消除誤解

關(guān)于HTML5規(guī)范的說明達(dá)到900多頁，W3C提供了詳細(xì)的說明，力求消除各種歧義和誤解，最終的說明甚至還會(huì)增加；HTML5標(biāo)準(zhǔn)工作組試圖提供完備的Web解決規(guī)范，希望在2022年以前實(shí)現(xiàn)瀏覽器器互通.

7.2 HTML5提供精確定位的錯(cuò)誤恢復(fù)機(jī)制

HTML5具備強(qiáng)大的錯(cuò)誤處理機(jī)制，提倡重大錯(cuò)誤的平緩恢復(fù)，頁面中有錯(cuò)誤不會(huì)導(dǎo)致整個(gè)頁面不工作，只是以標(biāo)準(zhǔn)方式顯示“broken”標(biāo)記，讓用戶的獲得很好的使用體驗(yàn)和明確的判斷.

7.3 HTML5與CSS3

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

7.4 HTML5面臨的困難

HTML5正在加緊發(fā)展，很多的組織、開發(fā)人員都在關(guān)注HTML5給WEB帶來的更好的體驗(yàn)，但它仍是開發(fā)中的標(biāo)準(zhǔn)，自身已面臨一些困難：HTML5標(biāo)準(zhǔn)統(tǒng)一及何時(shí)推出的問題；瀏覽器支持問題；WEB應(yīng)用相關(guān)支持包括網(wǎng)絡(luò)保障、應(yīng)用人群數(shù)量少等.這些困難將會(huì)給HTML5的發(fā)展帶來一定的阻力.

結(jié)束語

HTML5總結(jié)了之前HTML的優(yōu)缺點(diǎn)，順應(yīng)了WEB應(yīng)用發(fā)展的需要，強(qiáng)化網(wǎng)頁的表現(xiàn)和應(yīng)用，使得WEB應(yīng)用變得愈來愈豐富，它網(wǎng)頁設(shè)計(jì)帶來了新的技術(shù)理念——簡潔、實(shí)用.WEB 應(yīng)用是互聯(lián)網(wǎng)發(fā)展的必然趨勢之一，網(wǎng)頁開發(fā)、設(shè)計(jì)人員在面對(duì)HTML5技術(shù)的時(shí)候，既要了解當(dāng)前技術(shù)可實(shí)現(xiàn)的效果，又要在實(shí)際的工作中不斷摸索和總結(jié)，緊跟網(wǎng)絡(luò)應(yīng)用發(fā)展，不斷嘗試.未來幾年，HTML5將是Web應(yīng)用領(lǐng)域的主流技術(shù)之一.對(duì)于網(wǎng)頁開發(fā)、設(shè)計(jì)人員是一次機(jī)遇，也是一次挑戰(zhàn).

[1] 龍奇.新一代網(wǎng)絡(luò)技術(shù)標(biāo)準(zhǔn)HTML5的研究.科技信息 [J].2011,(10): 245.

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

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

[4] HTML 標(biāo)簽.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高級(jí)程序設(shè)計(jì).[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

云南省教育廳項(xiàng)目（2011C042）

宋昭壽（1958—），男，云南鎮(zhèn)雄人，高級(jí)講師.研究方向：計(jì)算機(jī)教育研究．

[責(zé)任編輯 自正發(fā)]