移動網(wǎng)頁設(shè)計與開發(fā)

HTML5+CSS3+JavaScript

目錄

第1章網(wǎng)絡(luò)平臺

1.1對術(shù)語的簡短說明

1.2你是誰，你需要知道些什么

1.3了解什么是HTML5

1.4真正的HTML5

1.5CSS3及其他

1.6瀏覽器支持

1.7測試，再測試，進行更多的測試

總結(jié)

第2章結(jié)構(gòu)和語義

2.1HTML5的新元素

2.2網(wǎng)頁易讀性倡議的無障礙的富因特網(wǎng)應(yīng)用程序組件（WAI-AR1A）

2.3語義標(biāo)記的重要性

2.4微格式

2.5RDFa

2.6微數(shù)據(jù)

2.7數(shù)據(jù)屬性

2.8Web組件：標(biāo)記的未來？

總結(jié)

第3章設(shè)置響應(yīng)性CSS

3.1媒體查詢

3.2lavaScript中的媒體查詢

3.3自適應(yīng)網(wǎng)頁設(shè)計與響應(yīng)式網(wǎng)頁設(shè)計

3.4窗口關(guān)聯(lián)的長度單位

3.5響應(yīng)式設(shè)計和被替換的對象

總結(jié)

第4章CSS布局的新方法

4.1多欄結(jié)構(gòu)

4.2彈性布局盒(Flexbox)

4.3網(wǎng)格布局

4.4更遠的未來

總結(jié)

第5章現(xiàn)代JavaScript

5.1lavaScript的新功能

5.2.【avaScript庫

5.3polyfill和shim

5.4測試和調(diào)試

總結(jié)

第6章Device(設(shè)備)API

6,1地＞理定位(Geolocation)

6.2方向(Orientation)

6.3全屏(Fullscreen)

6.4振動(Vibration)

6.5巾，池狀態(tài)(BattervStatus)

6.6網(wǎng)絡(luò)信息、

6.7攝像頭和麥克風(fēng)

6.8網(wǎng)絡(luò)存儲(WebStorage)

6.9拖放(Drag和Drop)

6.10文件交互

6.11Mozilla公司的火狐OS系統(tǒng)和WebAPI

6.12PhoneGap和本地封裝器

總結(jié)

第7章圖像和圖形

7.1矢量和位圖比較

7.2可縮放矢量圖形

7.3canvas元素

7.4選擇SVG或canvas的情況

總結(jié)

第8章新表單

8.1新輸入類型

8.2新屬性

8.3數(shù)據(jù)單(datalists)

8.4屏幕控件與部件

8.5將信息顯示給用戶

8.6客戶端表單驗證

8.7客戶端驗證API(ConstraintValidationAPI)

8.8表單和CSS

總結(jié)

第9章多媒體

9.1媒體元素

9.2媒體框架結(jié)構(gòu)

9.3MediaAPI（媒體API）

9.4媒體事件

9.5高級媒體交互

總結(jié)

第10章網(wǎng)絡(luò)應(yīng)用程序

10.1網(wǎng)絡(luò)應(yīng)用程序

10.2混合應(yīng)用程序

10.3電視應(yīng)用程序

10.4Webinos

10.5應(yīng)用程序緩存

總結(jié)

第11章前景

11.1Web組件

總結(jié)

11.2CSS的前景

總結(jié)

附錄A瀏覽器支持

所討論的瀏覽器

啟用實驗性特性

第1章：網(wǎng)絡(luò)平臺

第2章：結(jié)構(gòu)和語義

第3章：設(shè)備響應(yīng)性CSS

第4章：CSS布局的新方法

第5章：現(xiàn)代JavaScript

第6章：Device（設(shè)備）API

第7章：圖像和圖形

第8章：新表單

第9章：多媒體

第10章：網(wǎng)絡(luò)應(yīng)用程序

第11章：前景

第1章網(wǎng)絡(luò)平臺

在這一章里，我將談?wù)撘恍┍匾木W(wǎng)絡(luò)技術(shù)，一些非常有用的知識，以及多設(shè)備網(wǎng)絡(luò)工作

的要求和規(guī)定。本章的目的確保我們的起點相同，這是一種比喻一我知道我們現(xiàn)在確實起

點相同，因為你正在閱讀這段話一但下一章才真正開始涉及技術(shù)內(nèi)容。

如果讀者渴望馬上學(xué)習(xí)這些技術(shù)，則可以跳過這一章并直接閱讀第2章。但我強烈建議

讀者不要這樣做。因為第1章含有一些有趣且實用的背景信息。此外，技術(shù)含量較少的

內(nèi)容使我有機會表現(xiàn)我那令人驚嘆的幽默感。

1.1對術(shù)語的簡短說明

在整本書中，我會經(jīng)常提到網(wǎng)站，但這個術(shù)語只是一個方便的簡稱，其目的是避免重復(fù)。

本書所講述的功能，與網(wǎng)站、網(wǎng)絡(luò)應(yīng)用程序和打包的HTML混合應(yīng)用程序相關(guān)一簡而言

之，就是任何可以使用HTML、CSS和JavaScript的東西。但是這樣太過啰唆，所以，除

了需要作更具體說明的情況，大多數(shù)時候我只是簡單地使用“網(wǎng)站”一詞。

此外，當(dāng)我提及呈現(xiàn)網(wǎng)頁或應(yīng)用程序的軟件時，我會使用“瀏覽器"或"用戶代理"。這樣做

的目的同樣是為了避免重復(fù)。再重申一次，我正在努力地避免重復(fù)。

1.2你是誰，你需要知道些什么

在我開始談?wù)摷夹g(shù)之前，我首先要說明一下對你的一些推測，以及有效使用本書所需的知

識。首先，讓我們來討論討論你是誰。你有可能是專家，或是你想成為專家，又或者你是

個喜歡使用網(wǎng)絡(luò)的人；不過，無論你是誰，你一定具備HTML、CSS和JavaScript的應(yīng)用

知識一可能還沒達到深入、精通的水平，但卻無需我向你解釋它們的概念或?qū)懛ā?/p>

或許你剛剛學(xué)會創(chuàng)建網(wǎng)站并需要更新你的技能，或許你正在學(xué)校學(xué)習(xí)網(wǎng)絡(luò)開發(fā)并想學(xué)習(xí)額

外的課程，又或許你是一個從業(yè)的開發(fā)人員，但是沒機會了解網(wǎng)絡(luò)編碼的最新發(fā)展。無論

你屬于哪種情況，我推斷，你都想要了解如何運用現(xiàn)代方式創(chuàng)建網(wǎng)站，因為這種網(wǎng)站能跨

多設(shè)備運行，并且支持所有設(shè)備的維度和功能一這無疑是你挑選本書的原因。

這本書需要你具備網(wǎng)絡(luò)開發(fā)的相關(guān)知識。它既不是一本初學(xué)者指南，也不是一本高級讀物。

更確切地說，本書是對當(dāng)前的、最新的和不久將來的HTML、CSS、JavaScript以及相關(guān)

技術(shù)特征的點滴見解，并著重講解了那些最有助于在多設(shè)備世界里創(chuàng)建網(wǎng)站的技術(shù)。

此外，你還要具備一些基礎(chǔ)知識，你需要了解瀏覽器上的開發(fā)者工具，但不用達到超級熟

練的程度。在一些JavaScript的例子中，我把結(jié)果輸入工具中的開發(fā)人員控制臺，這是一

種標(biāo)準(zhǔn)化的工作方法。如果你使用的是Chrome、Firefox、1E9+、Opera和Safari這類本

機工具，或是Firebug之類第三方工具，操作方法也一樣。例如，我可能使用這樣一行代

碼：

console.log('HelloWorld');

結(jié)果將會在控制臺中顯示。圖1-1所示為它在Firebug中的顯示。正如我在前文提到的，

我不會經(jīng)常使用控制臺或開發(fā)者工具，但如果你不知道如何使用它們，那你真的應(yīng)該現(xiàn)在

就花時間來學(xué)習(xí)。

console.log（'HelloWorld!"）;

HelloWorld!

圖1-1：在Firebug控制臺顯示的消息"HelloWorld"

當(dāng)你讀到這段話時，無論是已經(jīng)具備所需的所有知識并準(zhǔn)備繼續(xù)前進，還是你已經(jīng)做好準(zhǔn)

備并試圖蒙混過關(guān)。不管是哪種情況，接下來，我們將開始討論技術(shù)相關(guān)的內(nèi)容。

1.3了解什么是HTML5

關(guān)于HTML5到底是什么，還是有些模糊不清。這是我們大家（我們大多數(shù)人，大多數(shù)用

戶）對它的理解與其真實的含義有所偏差。HTML5不是一個用于我們創(chuàng)建網(wǎng)站的全新平

臺，不是一個富多媒體環(huán)境，也不是一個可以跨多設(shè)備運行網(wǎng)站的工具?？傮w來說，

HTML5是一種嘗試，不斷制作網(wǎng)站以滿足我們當(dāng)前使用方式的需求，它由最早的簡單文

本鏈接網(wǎng)絡(luò)轉(zhuǎn)變而來。

大多數(shù)人認(rèn)為，HTML5是一系列相關(guān)關(guān)聯(lián)并相互補充的技術(shù)的集合，這些技術(shù)包括CSS3、

SVG、JavaScriptAPI等。盡管一些研發(fā)人員更愿意使用這種廣義定義，但我真的不喜歡

把所有的技術(shù)混為一談，所以，我更情愿把HTML5稱為網(wǎng)絡(luò)平臺。實際上，我更喜歡

BruceLawson對它的定義一激動人心的網(wǎng)絡(luò)新技術(shù)（NEWT）。這既是一個很酷的簡稱,

并有一個可愛的標(biāo)識。但我不得不承認(rèn)，在這場爭論中，我的想法沒有得到認(rèn)可，網(wǎng)絡(luò)平

臺這個名稱也沒有得到采納。

這個網(wǎng)絡(luò)平臺是巨大的。http:〃/列出了所有與該平臺相關(guān)的技術(shù):這

個目錄確實相當(dāng)長，其中所包含的內(nèi)容遠遠超出了本書的范圍。

所以，我將著重介紹核心內(nèi)容，即那些足以用來編寫跨多設(shè)備運行的網(wǎng)站的技術(shù)，包括

HTML5、CSS3、SVG、Canva和一些設(shè)備API。當(dāng)書中用到這些術(shù)語的時候，我會逐一解

釋。但是，首先我要對HTML5和CSS3的含義作更詳盡的說明。

1.4真正的HTML5

HTML5是HTML4.01的迭代，它在HTML4.01基礎(chǔ)上添加了一些新功能，廢棄或者刪除

了幾項舊功能，并且對一些現(xiàn)有的功能進行了修改。編寫HTML5的目的一是為了規(guī)范許

多開發(fā)人員已使用多年的常見程序編輯和設(shè)計模式，二是為了滿足現(xiàn)代網(wǎng)絡(luò)的需求，這是

因為，現(xiàn)代網(wǎng)絡(luò)與應(yīng)用程序的相關(guān)性和它與文檔的相關(guān)性是一樣大的（也可能更大）。事

實上,WebApplications1.0是HTML5的前身。

HTML5的新功能包括建立可提供含義和可接入性的文檔，我會在第2章中介紹。HTML5

還會有一系列的新窗體功能和UI控件，使得應(yīng)用程序的生成變得更加簡單，這方面的內(nèi)

容可以翻閱第8章。此外，HTML5還包括依然被很多人用來相互聯(lián)系的本機（無插件）

視頻，第9章將講述這個話題。

如今有兩個主要群體正對HTML5產(chǎn)生著影響，他們的角色和職責(zé)大致是這樣的：

WHATWG（讀者不需要知道這個首字母縮略詞是什么意思），這是個由瀏覽器生產(chǎn)商們

和“感興趣各方”組成的財團，通過最重要的規(guī)格編輯器IanHickson,它創(chuàng)建了HTML的

“現(xiàn)存規(guī)范"一這基本上是一個無版本的規(guī)范，它能不斷地合并新功能、更新現(xiàn)有功能；另

一個是W3C（萬維網(wǎng)聯(lián)盟），即萬維網(wǎng)的標(biāo)準(zhǔn)機構(gòu)，它的職責(zé)是獲取無版本規(guī)格的快照,

來創(chuàng)建編號了的版本，以使瀏覽器供應(yīng)商能確保實現(xiàn)的兼容性。

事實上，情況比這要復(fù)雜些，另外，這還涉及很多政治爭論。只有標(biāo)準(zhǔn)的書呆子才會對這

些爭論感興趣，它們不會對讀者有任何的實際影響。

W3C提議，雖然眼下還不能確認(rèn)，到2014年時HTML5應(yīng)當(dāng)進入推薦狀態(tài)一即"完成”狀

態(tài)；隨后，在2016年推出HTML5.1o它還提議，HTML5應(yīng)當(dāng)分解成單獨的模塊，這樣,

就可以在不同的模塊上同時進行操作，而不用擔(dān)心影響到整體的速度。然而，這些對讀者

來說真的無關(guān)緊要，你僅僅需要知道的是當(dāng)瀏覽器里何時會包含HTML5,以及何時可以

使用HTML5。

1.4.1HTML5模板

作為一個具備HTML基本使用知識的人，你要熟悉基本的頁面標(biāo)記。但是對于HTML5,

情況稍有不同一雖然不多，但值得提及。下面的代碼塊是本書中所有例子的基本模塊（也

可以參考范例文件template.html）：

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="utf-8M>

<titlex/title>

</head>

<bodyx/body>

</html>

大家應(yīng)該對這個例子中的大部分代碼比較熟悉，但我想討論兩個興趣點。第一個興趣點是

Doctype?它是一個殘余物，因為在過去，你不得不告訴瀏覽器所寫的是哪種文檔類型

（strictHTML、transitionalHTML、XHTML1.1等其他文檔類型）。然而，在HTML5中，

就沒有必要這樣做了一因為HTML5只青睞一種HTML—所以就不再需要Doctype聲明了。

理論上就是這樣。

現(xiàn)代瀏覽器往往有三種渲染模式：怪異模式(quirksmode)模仿IE5的非標(biāo)準(zhǔn)渲染，這

是為了滿足兼容舊版網(wǎng)頁的需求；標(biāo)準(zhǔn)模式(standardsmode)是現(xiàn)代的標(biāo)準(zhǔn)兼容行為;

近乎標(biāo)準(zhǔn)模式是添加了稍許混雜的標(biāo)準(zhǔn)模式。

想知道使用哪種模式，瀏覽器就要求助于Doctype。我們總是想要使用標(biāo)準(zhǔn)模式，所以在

<!DOCTYPEhtml>

HTML5中，Doctype是能觸發(fā)標(biāo)準(zhǔn)模式的最短可行路線:

第二個興趣點是meta標(biāo)記，它也是標(biāo)準(zhǔn)HTML5模板所做的另一個更改，用來表明

Unicode字符范圍。使用Unicode字符可以呈現(xiàn)頁面上的文本，而UTF-8是一種被萬維

網(wǎng)普遍默認(rèn)使用的Unicode字符，所以大多數(shù)情況都會使用UTF-8。meta標(biāo)記使用

<metacharset="utf-8">

charset屬性：

確實可以這樣：如果客戶要求"用HTML5來創(chuàng)建網(wǎng)站”，則只需更新那兩個標(biāo)記，然后向

他們收取一大筆費用。不要真這么做，我只是開個玩笑。

其實，我本應(yīng)該涵蓋很多其他模式，但是為了清晰和簡潔，我把它們都省略了。如果想要

了解更多模式，則可以訪問深受用戶歡迎的HTML5Boilerplat網(wǎng)站。這里提供了全面的

模板，讀者可以仔細(xì)閱讀，看看這個模板有什么作用一但請牢記，只能把它當(dāng)成參考，不

要一字不差地生搬硬套。

1.4.2新型最佳實踐

除了對核心模板的更改外，HTML5還有一兩個新的最佳實踐，讀者應(yīng)該考慮去實現(xiàn)它們。

開發(fā)人員利用許多不同編寫代碼的方式來編寫HTML5,當(dāng)然，這些方式不應(yīng)該被當(dāng)作一

成不變的規(guī)則，但在我看來，它們會使代碼易于編寫和維護。

HTML5的第一個最佳實踐是，用戶不再需要使用type屬性來調(diào)用最常見的外部資源。在

<linkhref="foo.css"rel="stylesheet"type="text/cssM>

<scriptsrc="foo.js"type="text/javascript"></script>

使用HTML4.01或者XHTML時，我們不得不為每個link、script或style標(biāo)簽聲明類型:

但在萬維網(wǎng)上工作時，CSS和JavaScript事實上是使用這些標(biāo)記的默認(rèn)資源類型，所以每

次都將它們寫出確實有一點冗余。因此可以立即刪除它們，這樣不僅瀏覽器能更好地理解

代碼，而且代碼也能更整潔一些：

<linkhref="foo.css"rel="stylesheet">

<scriptsrc="foo.jsHx/script>

只有在不使用默認(rèn)的CSS或JavaScript時，才需要使用這些標(biāo)簽。例如，某些版本的火狐

瀏覽器具有最新版本JavaScript的實驗實現(xiàn)。并且，為了安全起見，當(dāng)用戶想要使用最新

版本JavaScript時，只需要在type屬性中加上一個標(biāo)記：

<scriptsrc="foo.js"type="application/javascript;version=1.8n></script>

HTML5對語法也非常寬容。無論是使用所有的小寫字符，或是引用屬性值，還是喜歡關(guān)

<imgsrc=foo.png>

<imgsrc=foo.png/>

<IMGSRC=Hfoo.png'7>

閉空元素，HTML5都很樂于分析和理解它們。因此，以下三條代碼的作用是相同的:

注釋:|當(dāng)屬性值有多個值時，就需要使用引號,例如類名列表。如果屬性值包含某些特殊字符，則也需要引號。

某些被稱為布爾值屬性(Booleanattribute)的屬性，只有真或者假兩種值；除非另有指

定，否則它們被推定為以“真”這個值存在，所以用戶不需要提供一個值一除非使用的是類

似XML的語法，那就必需提供值，在這種情況下，需要使用屬性本身的名稱。這就意味

<inputtype="checkbox"checked>

<inputtype="checkbox"checked="checked">

著，以下兩者是等效的：

<imgsrc=Hfoo.png">

我自己的偏好是全部使用小寫，全部引用，但我不喜歡關(guān)閉空元素:

在整本書中，我使用的都是這種模式，因為我覺得這樣更簡潔，并且更易于使用。此外，

我使用的文本編輯器具有語法高亮顯示，這使得代碼變得清晰，方便瀏覽。讀者可以隨心

所欲地使用自己想要的模式，但必須保持一致，以確?？删S護性。

1.5CSS3及其他

正如HTML5對應(yīng)HTML4.01一樣，CSS3對應(yīng)的是CSS2.1。CSS3是對一些現(xiàn)有CSS2.1

功能進行標(biāo)準(zhǔn)化的進化迭代；因為在不同瀏覽器中，這些功能的執(zhí)行會略有差異。另外，

在這個網(wǎng)絡(luò)發(fā)展的新時代，網(wǎng)絡(luò)瀏覽器可以被嵌入任何設(shè)備，所以CSS3還引入了一套全

新的功能，使得CSS能符合新時代的要求。

改造瀏覽器的第一類CSS3功能在很大程度上是視覺效果上的，并且，這些功能基于開發(fā)

人員已經(jīng)使用多年的編輯程序：使用任何來源的字體、圓角，并在文本和框上放置陰影。

登錄之后是一系列新的選擇器，這些選擇器能使文件尋訪式樣變得更容易；此外，它們能

產(chǎn)生更動態(tài)的效果，如2D和3D的轉(zhuǎn)換以及過渡動畫。

除了許多光彩奪目的視覺效果，CSS3的真正革命來自于媒體查詢。媒體查詢是一種語法,

使用這種語法，就可以根據(jù)瀏覽器的尺寸和功能，為瀏覽器提供樣式，這是邁向多設(shè)備式

樣的第一步。第3章會講到媒體查詢，還會講到CSS的一系列其他屬性，這些屬性對于

創(chuàng)建響應(yīng)式和適應(yīng)式網(wǎng)站非常有用。

CSS還面臨另一個重大挑戰(zhàn)：如何解決布局的問題一即要使布局能夠真正具備支持被用戶

代理查看的功能。這些功能包括動態(tài)用戶界面屬性和CSS控制網(wǎng)格系統(tǒng)。在第4章中會

有更多相關(guān)內(nèi)容。

不同于CSS2.1,CSS3不是一個單一的規(guī)范。在CSS2.1中，一切都放在同一個文檔里描述,

這種行為導(dǎo)致了文檔太大且太復(fù)雜。相反，CSS3是模塊化的，它是一系列更短更特定的

規(guī)范，可以由瀏覽器通過模塊化的方式來實現(xiàn)。和使用HTML5一樣，如果打算等到

CSS3“準(zhǔn)備就緒"再使用它，那這種想法就太愚蠢了，因為某些模塊將會很快就緒并實現(xiàn)，

而另一些模塊需要等待很長的時間。

CSS模塊有級別數(shù)字，這些數(shù)字可以顯示它們經(jīng)歷了多少迭代；有些模塊已經(jīng)到了級別4,

這些級別4模塊的可以先于級別3的模塊實現(xiàn)。然而，這并不意味著，有一天我們會迎

來CSS4。這種情況是不可能發(fā)生的。因為CSS3是一個簡稱，它表示"任何比CSS2.1更新

穎的東西"，總有一天，這種區(qū)別將被摒棄，一切都將只是CSS。

1.5.1供應(yīng)商特定前綴

當(dāng)瀏覽器以實驗或予標(biāo)準(zhǔn)的方式來實現(xiàn)功能時.，為了能確保安全，避免兼容性問題，瀏覽

器往往使用帶有規(guī)范化屬性名稱的供應(yīng)商特定前綴。例如，當(dāng)CSSApes模塊提出了名為

"gorilla”的新屬性，F(xiàn)irefox和WebKit都在對這種新屬性進行稍有差別的實驗性的實現(xiàn)。

可是，新屬性在兩個瀏覽器中產(chǎn)生的效果是不同的，所以，如果Firefox和WebKit都使

用該屬性名稱時，通常會在屬性名稱前加上供應(yīng)商前綴以避免一些潛在的沖突：

-moz-gorilla:foo;

-webkit-gorilla:foo;

供應(yīng)商特定前綴本是一個偉大的想法，但事實上，情況變得有些混亂。和其他方面問題一

樣，一些前綴的屬性被開發(fā)人員如此廣泛地使用，以至于其他瀏覽器廠商也感覺有必要使

用它們競爭對手的供應(yīng)商前綴，這樣做很公平，但卻讓整件事變得有些荒謬。

瀏覽器廠商正試圖讓這個系統(tǒng)處于他們的掌控之中，但有時，使用供應(yīng)商前綴屬性會難以

避免。大多數(shù)情況下，在我的代碼示例中，我都使用無前綴屬性。

1.5.2CSS框架和預(yù)處理器

如今，使用一些幫手為CSS開發(fā)助一臂之力，成為了非常時髦的事兒，尤其是致力于大

型開發(fā)團隊或是大項目的時候。通常，這些幫手以框架或預(yù)處理器的形式參與進來，并且

往往兩者同時參與CSS開發(fā)。

框架是一套預(yù)先定義的CSS規(guī)則，使用這些規(guī)則可以使開發(fā)更快速。它們通常包括版式

和窗體，很多時候，還包括布局模式。Blueprintcss是一種非常珍貴的老框架，被用于許

多知名網(wǎng)站：但目前流行的框架是Twitter壓出的Bootstrap。Bootstrap提供了許多預(yù)先

格式化的布局、排版和表單選項，以及一系列可重用的組件，甚至還提供JavaScript的擴

展性。

預(yù)處理器是運行于服務(wù)器端的程序，它使用CSS類語言來提供擴展語法和簡寫語法；因

為CSS類語言在生成時，可轉(zhuǎn)變成正確格式化樣式表。這些擴展不但有節(jié)省時間的功能,

如變量和嵌套的規(guī)則；而且還有自定義功能，它們賦予用戶難以置信的權(quán)力。在預(yù)處理器

競爭中，Sass最受歡迎，而LESS緊跟其后，成為前者最主要的競爭對手。

雖然在現(xiàn)代網(wǎng)絡(luò)開發(fā)中，框架和預(yù)處理器兩者都有各自不同的作用，但在本書中，我不會

討論或使用它們。因為，我教授的是更基本的語言，同時也是它們兩者所依賴的語言。

1.6瀏覽器支持

現(xiàn)在，讀者應(yīng)當(dāng)已經(jīng)了解多設(shè)備網(wǎng)絡(luò)非凡的廣泛性和多樣性；另外，在這些設(shè)備上運行的

瀏覽器范圍也相當(dāng)廣，甚至在各式各類的瀏覽器中，還有各種版本和實現(xiàn)（我希望你已經(jīng)

明白這一點，因為序言中大部分的內(nèi)容都在試圖說明這一點）。因此，本書中所提到的一

些功能有可能還沒實現(xiàn)，或有可能在實現(xiàn)方式上略有不同。

對于每個新功能，我都將它們視為完全實現(xiàn)，而不涵蓋每種不同級別的實現(xiàn)水平。另外，

我還在附錄A中介紹了這些新功能的實際實現(xiàn)。

此外，甚至最前沿的標(biāo)準(zhǔn)提案也會發(fā)生變化，即使是當(dāng)某些瀏覽器中已經(jīng)進行了試驗性實

現(xiàn)（這本書還沒寫完時，第4章中的網(wǎng)格布局模塊就已經(jīng)被更新）；所以，當(dāng)讀者讀到

這本書時，本書中的一些語法可能已經(jīng)過時。把不斷演進的標(biāo)準(zhǔn)拿來用紙質(zhì)出版，就會遇

到這種風(fēng)險。但是，我試圖通過關(guān)注那些可能發(fā)生變化的功能，并在同步網(wǎng)站列出一個勘

誤更新表，來盡力降低這種風(fēng)險。

盡管大多數(shù)實現(xiàn)水平往往集中于臺式電腦和筆記本瀏覽器，讀者可能還是想要了解功能的

實現(xiàn)水平。讀者可以密切關(guān)注以下幾個在線資源："CanIUse」顯示了大量技術(shù)在大眾化

瀏覽器的最近、當(dāng)前和未來版本中的支持水平；而HTML5Please顯示了通常使用最先進

功能的安全水平，可大多是CSS3和JavaScript（這就是為什么我有點討厭HTML5Please

這個名稱的原因）。

TheHTML5Test網(wǎng)站不但告訴你瀏覽器支持多少種來自HTML5規(guī)范的功能，而且十分

有效地記錄了跨多種瀏覽器（包括電視和游戲機瀏覽器）和設(shè)備的實現(xiàn)水平。此外，在此

網(wǎng)站上，用戶還能對多達三個不同瀏覽器進行并排比較。然而，此網(wǎng)站僅僅限于單一的

HTML5支持。

1.7測試，再測試，進行更多的測試

對于目前網(wǎng)絡(luò)設(shè)備的現(xiàn)狀，測試是確保所創(chuàng)建網(wǎng)站是否能跨多個設(shè)備運行的唯一方法。測

試一直貫穿著整個項目，從開始到結(jié)束，都要抓住任何機會進行測試。如果規(guī)劃的是一個

多設(shè)備項目，那么，在整個項目中，多達40%至50%的時間將會用來測試。這是個很嚴(yán)

肅的問題。

如果找不到實際設(shè)備的代替品來做測試，則可以著手建立一個庫，并放入盡可能多的設(shè)備。

如果單位附近有其他機構(gòu)，還可以考慮集中資源，以獲得范圍更廣的設(shè)備。許多城市都在

組建設(shè)備實驗室，其中有各種設(shè)備可供任何人使用，這些設(shè)備均由當(dāng)?shù)亻_發(fā)人員和公司捐

贈。你還可以在線搜索最近的實驗室，或者，考慮在公司或工作的地方參與組建一個實驗

室。

不要只對手機和平板電腦進行測試。如果網(wǎng)站的目標(biāo)對象是年輕愛好者（研究表明，大約

四分之一的美國青少年使用游戲機瀏覽器上網(wǎng)），則應(yīng)該考慮測試游戲機瀏覽器；或者，

如果網(wǎng)站瞄準(zhǔn)的是休閑市場，則應(yīng)該對電視設(shè)備進行測試。

如果無法使用實際設(shè)備，則可以使用一些專用的工具，大多數(shù)（也可能是全部）操作系統(tǒng)

創(chuàng)建者和/或設(shè)備制造商都有可供免費下載的、設(shè)備模擬器的軟件開發(fā)工具包（SDK）。

在手機和平板電腦領(lǐng)域，安卓、WindowsPhone和黑莓都有軟件開發(fā)工具包，毫無疑問,

除了它們之外，還有更多其他的品牌。在蘋果的App商店里可以找到蘋果公司的Xcode,

它有iOS模擬器功能，在測試中，可以在設(shè)備和操作系統(tǒng)版本之間進行切換。

一旦設(shè)置好，許多這樣的軟件開發(fā)工具包還允許USB連接物理設(shè)備，通過配對的瀏覽器

來做調(diào)試。但是，還有個更簡單易行的方法一使用Opera的手機仿真器，一旦將其打開

并連接到Opera的桌面版本，就可以使用在桌面上的開發(fā)人員工具來調(diào)試移動設(shè)備上的

頁面。如果需要使用WebKit—它主導(dǎo)著多設(shè)備引擎，為什么不用呢？一名為weinre的

軟件可以把臺式機上的Chrome或Safari連接到安卓、iOS或黑莓模擬器上。

Adobe有一個叫做EdgeInspect的截圖查看器，可以讓任何使用EdgeInspect應(yīng)用程序

（眼下在iOS和安卓系統(tǒng)上可用）的設(shè)備與Chrome瀏覽器同步。這樣，用戶就能同時在

許多不同的設(shè)備上預(yù)覽網(wǎng)站，并用網(wǎng)絡(luò)檢查器進行遠程調(diào)試。

總結(jié)

本章提供了現(xiàn)代網(wǎng)絡(luò)開發(fā)所需的所有入門信息。在這章里，我消除了HTML5的歧義，并

把讀者引入網(wǎng)絡(luò)平臺；讀者可以了解HTML5的用處并學(xué)習(xí)如何編寫HTML5。此外，我

還簡單介紹了CSS3。

本章的關(guān)鍵信息在后半部分：第一，始終保持更新網(wǎng)絡(luò)平臺功能在常見瀏覽器中的實現(xiàn)水

平；第二，測試，測試，再測試，進行更多的測試；當(dāng)你覺得沒有更多的測試要做，還要

再次測試。然后，再做一次測試，祝你好運。

已經(jīng)解釋很多了！接下來，讓我們卷起袖子開始工作吧。

第2章結(jié)構(gòu)和語義

還記得那個關(guān)于在沙子上建房子的人的寓言嗎？或是用秸桿和棍子做房子的小豬？他們都

是失敗者。他們失敗的原因在于沒有認(rèn)識到結(jié)構(gòu)的重要性。

想創(chuàng)建出色的網(wǎng)站，不但需要良好的結(jié)構(gòu)，而且需要在用HTML開始的網(wǎng)站上進行。用

什么方式給網(wǎng)頁加標(biāo)記將影響到網(wǎng)頁是否具有堅實的結(jié)構(gòu)，這不僅對眼下的結(jié)構(gòu)有影響，

對將來也一樣。在任何應(yīng)用環(huán)境下，無論是創(chuàng)建一個極具交互式的網(wǎng)絡(luò)應(yīng)用程序，還是一

個混合的移動應(yīng)用程序，又或是一個宣傳冊式的單頁網(wǎng)站；建立健全的結(jié)構(gòu)是工作的重點。

堅實的結(jié)構(gòu)不但能使網(wǎng)頁的編寫和維護更方便、更容易；而且能使瀏覽器和其他用戶代理

了解你的網(wǎng)頁。此外，結(jié)構(gòu)嚴(yán)謹(jǐn)?shù)腄OM可以提升性能，使語法分析對瀏覽器來說變得更

容易，并且，它需要的內(nèi)存也較少。

除了結(jié)構(gòu)簡單之外，還需要語義豐厚。為網(wǎng)頁內(nèi)容賦予額外的意思可以產(chǎn)生立竿見影的效

果：查尋引擎可以更容易理解并獲取數(shù)據(jù)。雖然更長遠的好處還有待發(fā)現(xiàn)，但很可能某一

天我們就知道了。

HTML5和相關(guān)的技術(shù)使一切變得簡單。使用HTML5現(xiàn)有的良好實現(xiàn)方法，創(chuàng)建出的網(wǎng)

頁不僅結(jié)構(gòu)堅實、語義豐富，而且執(zhí)行力強、數(shù)據(jù)豐富。

2.1HTML5的新元素

一系列新的語義元素是HTML5的主要新功能之一。當(dāng)用標(biāo)題、列表和段落來標(biāo)記科學(xué)文

檔時，語義元素能從詞根擴展。大多數(shù)擴展后的新元素能為頁面提供更好的結(jié)構(gòu)；還能為

開發(fā)人員提供更多的選項來標(biāo)記各領(lǐng)域內(nèi)容，而非僅限于使用帶有一個相關(guān)聯(lián)id或類的

divo

<divclass="article">...</div>

舉個例子，在過去，開發(fā)人員可能會使用:

有了HTML5,開發(fā)人員可以選擇使用:

<article>…〈/article〉

萬維網(wǎng)聯(lián)盟的HTML5規(guī)范列出10個結(jié)構(gòu)元素。其中，3個已經(jīng)在HTML4中存在：

body、hl-h6(為方便起見，我們把hl-h6看作一個單一的實體)、address(>其余的7

個薪元素中，4個是所謂的分節(jié)內(nèi)容(sectioningcontent)元素。我會在下文闡明什么是

分節(jié)內(nèi)容(sectioningcontent)元素，但首先我要介紹一下這7個元素。

article文檔或網(wǎng)站的一個獨立部分，如論壇帖子、博客條目或用戶提交的評論。

aside頁面的一個區(qū)域，它和周圍的內(nèi)容關(guān)系不大。它可以被視為單獨的一部分，像一篇

雜志文章的側(cè)邊欄。

nav文檔中的導(dǎo)航區(qū)域，這個區(qū)域包含其他文檔或同一文檔其他領(lǐng)域的鏈接。

section內(nèi)容的一個專題組合，例如書中的一個章節(jié)，標(biāo)簽對話框中的一個頁面，或者網(wǎng)

站主頁上的介紹。

其他三個用來定義分節(jié)內(nèi)容中區(qū)域的結(jié)構(gòu)元素：

footer文檔或文件區(qū)域的頁腳，通常包含其所在section的有關(guān)元數(shù)據(jù)，例如作者的詳細(xì)

信息。

header可能是文檔的標(biāo)題，但也可能是文檔中一個區(qū)域的頭部，通常含有標(biāo)題（hl-h6）

元素來標(biāo)記標(biāo)題。

hgroup用于一組多層次標(biāo)題元素的分組，如副標(biāo)題或標(biāo)語。

HTML5還有一些不影響頁面基本結(jié)構(gòu)的其他新元素，在必要的時候，我會在書中的其他

章節(jié)介紹它們?，F(xiàn)在，讓我們來更深入地了解為什么以上10個新元素會被最先創(chuàng)建出來。

2.1.1新元素的作用

設(shè)定這些新元素的目的是為了提供清晰的文檔大綱，從而使瀏覽器和其他機器（尤其是像

屏幕閱讀器這樣的輔助技術(shù)）能更好地解析文檔大綱。試想，這些大綱就像文檔結(jié)構(gòu)圖，

顯示其內(nèi)容的層次結(jié)構(gòu)。在該層次結(jié)構(gòu)中，標(biāo)題最重要，它與內(nèi)容區(qū)域是父子關(guān)系，等等。

在HTML4中，這項任務(wù)通常使用從hl到h6的標(biāo)題（header）元素來完成：hl是頁面

上獨一無二且最重要的標(biāo)題；h2元素通常是hl的直系子標(biāo)題，以此類推。下面的示例

<hl>GreatApes</hl>

<h2>Gorilla</h2>

<h3>EasternGorilla</h3>

<h3>WesternGorilla</h3>

<h2>0rangutan</h2>

在HTML4中相當(dāng)常見:

嵌套標(biāo)題以這種方式創(chuàng)建該文檔大綱:

GreatApes（類人猿）

a.Gorilla（大猩猩）

i.EasternGorilla（東部大猩猩）

ii.WesternGorilla（西部大猩猩）

b.Orangutan（猩猩）

注釋:1類人猿迷會注意到我遺漏了矮黑猩猩和黑猩猩。這樣做是因為考慮到空間和清晰度，而并非出于任何偏見。

我創(chuàng)建的這個結(jié)構(gòu)視覺感官強，以這種方式使用標(biāo)題來創(chuàng)建文檔大綱被稱為隱式分節(jié)

（implicitsectioning）。

在HTML5中，分節(jié)內(nèi)容元素更早出現(xiàn)，在大綱中創(chuàng)建節(jié)（sections）,而非這些節(jié)

（sections）中的標(biāo)頭（headers）,這被稱為顯式分節(jié)（explicitsectioning）。所以，為

<hl>GreatApes</hl>

<section>

<hl>Gorilla</hl>

了在HTML5中獲得相同的類人猿標(biāo)記結(jié)構(gòu)，則需使用以下代碼：

<article>

<hl>EasternGorilla</hl>

</article>

<article>

<hl>WesternGorilla</hl>

</article>

</section>

<section>

<hl>Orangutan</hl>

</section>

最后產(chǎn)生的大綱會和HTML4的大綱相同，因為每個section元素或article元素在大綱中

創(chuàng)建出一個新節(jié)（section）。section和article就是我前面提到的分節(jié)內(nèi)容元素，還有另

外兩個分節(jié)內(nèi)容元素是：aside和nav。

大綱的每個節(jié)應(yīng)該有一個標(biāo)題一任何標(biāo)題都行。在我的示例中，我全部使用hl標(biāo)題，但

是，使用什么級別的標(biāo)題并不重要，因為分節(jié)內(nèi)容是用來創(chuàng)建新節(jié)的。我甚至可以通過擲

骰子的方式得到不同的數(shù)字，從而決定每個標(biāo)題使用哪個級別，以區(qū)別于其他標(biāo)題。

注釋:我在這里有點油腔滑調(diào)了。讀者可以（而且應(yīng)該）仍然使用從hl到h6的分層方式，因為這有助于向后兼容性,

并會使樣式設(shè)計更容易。

標(biāo)題（或可能一個包含標(biāo)題的hgroup元素）和每個節(jié)都可以包含不同的header和

footer,還可以包含進一步的節(jié)和分節(jié)根（sectioningroot）?這些根是像blockquote和

figure這樣的元素，它們可以有自己的大綱，但對整體的文檔大綱不起作用。

如果我這么解釋讀者還不是很懂，并不能說明你沒認(rèn)真閱讀前面的內(nèi)容。對每個分節(jié)內(nèi)容

元素的作用含糊不清，這種情況非常普遍，所以，為了幫助讀者根據(jù)手頭的任務(wù)來選擇正

確的元素，HTML5Doctor創(chuàng)建了一張流程圖（見圖2-1）。

一張流程圖。它可以協(xié)助選擇元素。如果你善于根據(jù)說話的語氣做出判斷，那么可能已經(jīng)

開始感覺到，我并不是新HTML5結(jié)構(gòu)元素的粉絲。如果真是這樣，那你就猜對了。

2.1.2HTML5分節(jié)元素的不利之處

正如前面那個小節(jié)所暗示的那樣，我的挫敗感越來越容易被察覺，要想掌握其中的一些新

元素，可能相當(dāng)富有挑戰(zhàn)性，特別是在理解article和section之間區(qū)別的時候。概括來說:

一個section可能包含多個article和多個section,并且，一個article可能包含某些

section或article,此外，它們兩者都會在大綱中創(chuàng)建出section0article和section兩者

之間是有區(qū)別的，但是，沒有人一甚至HTML5規(guī)范的創(chuàng)作者也沒能一設(shè)法給出一個清晰

簡潔、方便開發(fā)人員記憶的定義。

html5DoctorHTML5ElementFlowchart

區(qū)域contentelementsandfriends

By(griddle&@boblet

www.htmlS

Ablockofflowcontent

Start(notinlinephrasingcontent)

Sidebar,comments

section,pullquote,

Dglossary,advertising,

Doesitmake

senseonitsown?footnoteetcthat's

tangentiallyrelatedto

e.g.inathepageorcontent...

feedreader―htmiSdoctor.conVasido

CwidyoumoveIsIttogicalDoesithave<div>)

ittoonappendix?toaddaheading?gsemantics?

<navC)

Flowcontentwithno

additionalsemantics,

SiteorinNewsarticle,weblogore.g.forCSShooks...

navigation(anythingforumpost,comment—MmlSdoctor.conVdiv

you'dusea"skiptoonanarticle,sidebar

nav"linkfor)widgetetc,witha

heading...

一html5doctor.conVnav(figure〉)

html5doctor.conVartfcte

Oneormoreimages,Asectionofthepage,Probably<p>,but

graphics,codesamplesorchapterofanpossibly<address>,

etc,plusoptional<article>,witha岳lockquote>，<pre>_

<figcaption>...

heading...―htmlSdoctor.corrv'semantics

-htm(5doctor.conVfigure—htmCdoctor.conVsectlon

?Sectioningcontentelement

Thesek，urelements(ard由弓，he13dlngs)areused201107-22vl.5

HTML53outlrsngalgorithmtomatethedocument'soutineFormoreinformation：

-?hlmiftrtftctnrcnnVmrtilnawww.lil?dfidottor.c<?n/ie>naittics

圖2-1：如果不知道使用哪個區(qū)域元素才是正確的選擇，

HTML5Doctor會告訴你答案。

在LukeStevens《TheTruthAboutHTML5》(CreateSpace,2012)這本書中，Luke

Stevens對article的隱晦描述是這么評價的：

如果HTML5規(guī)范把事情留給你來解決,那它就失效了,因為HTML5規(guī)范的全部意義就

在于確切地指定你應(yīng)該做什么。但是現(xiàn)在,它的解釋是開放的,并且,到現(xiàn)在為止,還沒

有帶來明顯的益處。它是對現(xiàn)有功能的重復(fù).“…

我太同意他說的話了。我預(yù)測，除非可以找到更加清晰的定義，否則，很多人會嚴(yán)重濫用

這些元素。

出于技術(shù)的原因，我建議在開放的萬維網(wǎng)上不要使用這些新元素。首先，較老的IE版本

(IE8和8以下版本)根本不支持新元素。為了使老IE版本的瀏覽器識別出它們，就不

得不先用JavaScript來創(chuàng)建它們。當(dāng)然，這相當(dāng)簡單，只需使用條件注釋來實現(xiàn)受大眾歡

迎的HTML5Shiv：

ItIE9]>

<scriptsrc=Mhtml5shiv.js"x/script>

<!fendifl-->

但是，這樣做會使訪問者對JavaScript產(chǎn)生依賴。對于每一個使用舊版本IE的訪問者來

說，他們的JavaScript都會失效，使得不能看到任何內(nèi)部含有新元素的內(nèi)容。雖然，這樣

的用戶可能僅僅占很少的一部分，但是可訪問性應(yīng)該意味著每個人都能看到你的內(nèi)容。如

論壇帖子、博客條目或

其次，也是最重要的一點，目前沒有可用的瀏覽器支持新的大綱算法（JAWS屏幕閱讀器

支持，但總是出錯）。所以，你所有的努力并沒有真正起到作用一當(dāng)然，這一點在未來很

可能會有所改變。

當(dāng)然，是否要使用新結(jié)構(gòu)元素，最后還得自己來決定。這不是強制性的一你可以和以前一

樣，仍然使用div元素。其實，我發(fā)現(xiàn)，很難推薦大家來使用這些新元素，除非有人已經(jīng)

為閱讀HTML5規(guī)范做好了準(zhǔn)備，并且能充分理解新元素在文檔大綱中如何確切地起作用

一而且，在他所處的工作環(huán)境中，老式瀏覽器不會成為一個問題。因為這些東西還處于編

寫階段，我將尋找另一種方法來講解頁面結(jié)構(gòu)。幸運的是，正好有一種方法能派上用場，

它就是WAI-ARIAo

2.2網(wǎng)頁易讀性倡議的無障礙的富因特網(wǎng)應(yīng)用程序組件（WAI-

ARIA）

創(chuàng)建網(wǎng)頁易讀性倡議的無障礙的富因特網(wǎng)應(yīng)用程序（AccessibleRichInternetApplications）

組件（WAI-ARIA）的目的，就是為了解決可訪問性的短缺。隨著網(wǎng)絡(luò)超越簡單的文檔標(biāo)

記，進入一個應(yīng)用和交互的時代，可訪問性短缺就產(chǎn)生了。

下面，我們來看看WAI-ARIA是如何做到這一點的。首先，創(chuàng)建一些HTML擴展（或者,

事實上任何基于DOM語言的擴展都可以，例如SVG和XML的擴展）；其次，允許開發(fā)

人員開發(fā)能識別交互式內(nèi)容的瀏覽器和輔助技術(shù)。例如，如果有一個鏈接，單擊它時，就

會使用JavaScript創(chuàng)建一個屏幕上的對話框疊加，但沒有辦法讓瀏覽器識別它；這個標(biāo)記

<ahref=nhttp://exam">Launchpopup</a>

看起來就像一個標(biāo)準(zhǔn)的鏈接：

因為事件附加在使用腳本的鏈接上，所以，對于這里發(fā)生的事件，屏幕閱讀設(shè)備沒有任何

信息，也就不能告訴用戶事件的來龍去脈，用戶對該事件仍然一無所知。WAI-AR1A引入

一個新屬性一aria-haspopup,只要出現(xiàn)上述的情況，它就會告訴用戶到底發(fā)生了什么：

<ahref=""aria-haspopup="true">Launchpopup</a>

用戶可以使用一系列的新屬性，其中之一，就是所謂的landmarkrole。這些屬性能使得

屏幕閱讀器和其他可訪問導(dǎo)航設(shè)備能識別頁面結(jié)構(gòu)，這樣的話，用戶就可以輕松地找到文

檔。在某種程度上，這種解決方案履行了結(jié)構(gòu)職責(zé)，而結(jié)構(gòu)職責(zé)，本應(yīng)是新創(chuàng)造的

HTML5元素所應(yīng)該履行的。

注釋:如前所述，眼下，一些用戶代理和輔助技術(shù)不能正確解析新HTML5文檔大綱，所以，使用landmarkrole可能

會對提高向后兼容性有所幫助。

landmarkrole的應(yīng)用使用了具有一系列預(yù)先定義值的role屬性。這些值并不直接對應(yīng)

HTML5的結(jié)構(gòu)元素，但它們大多都非常的相配。比方說，如果想要定義包含網(wǎng)站一般信

息的文檔區(qū)域，例如標(biāo)識和品牌標(biāo)語，則需添加banner：

<divrole="banner">...</div>

banner大致類似于header元素，并且在大多數(shù)情況下，可以用它來代替header元素。

一些landmarkrole在HTML5中并沒有對應(yīng)物。在HTML5中，沒有合適的元素來指明

網(wǎng)頁的主要內(nèi)容在哪里，所以，要想讓屏幕閱讀器知道關(guān)鍵內(nèi)容的位置，我們可以使用

main：

<divrole="main">...</div>

WAI-ARIA規(guī)范所定義的8個landmarkrole：

application顯示頁面的一個區(qū)域，這個頁面是一個交互式應(yīng)用程序，而不是一個文檔。

banner正如手面提到的，說明一般的網(wǎng)站內(nèi)容，可能包含在標(biāo)頭中；在這種情況下，類

似于header元素。

complementary顯示主要內(nèi)容的相關(guān)內(nèi)容，而不是主要內(nèi)容的組成部分，像一個側(cè)邊欄;

它類似于aside元素。

contentinfo提供法律指令等文檔信息。通常位于頁腳，所以，在這種情況下類似于

footer元素。

form顯示除搜索之外的任何形式，例如，聯(lián)系人表單。

main顯示文檔的核心內(nèi)容。

navigation包含導(dǎo)航這些文件或相關(guān)文件的鏈接組，類似于nav。

search顯示專門用來搜索這個網(wǎng)站或其他網(wǎng)站的格式。

landmarkrole不但可用于導(dǎo)航，而且有助于提供語義值，它還能為CSS制作便捷的樣式

鉤子(hook)o使用確切屬性值選擇符(ExactAttributeValueSelector),就可以輕松地

應(yīng)用規(guī)則，例如,用在頁眉中：

div[role='contentinfo']{background-color:blue;}

這個選擇符幾乎在所有過去10年的瀏覽器(我所知道的)中都已經(jīng)實現(xiàn)，所以，除非使

用一個非常舊的或一個非?；镜臑g覽器，否則確切屬性值選擇符就是有用一但請注意，

復(fù)雜選擇符可能對頁面下載速度有不利的影響。

2.3語義標(biāo)記的重要性

在繼續(xù)探討如何以不同的方式為頁面添加更深層次的豐富含義之前，讓我們先停下來問問

“究竟為什么要使用語義？"我的意思是，我們通常都使用div元素來標(biāo)記一個頁面，難道

<divclass=,,firstn>Thisistheheading.</div>

<divclass="main"xb>Thisisthefirstsentence.</bxbr>Thisisthesecondsentence.</div>

這樣做在本質(zhì)上是錯誤的嗎？（例如，使用以下代碼塊）：

DivyaManian在一篇辯論性文章"OurPointlessPursuitofSemanticValue”中也討論了這個

問題。在文章中，她認(rèn)為，對于大多數(shù)人來說，過于強調(diào)語義標(biāo)記就是浪費時間：

標(biāo)記結(jié)構(gòu)內(nèi)容,但是,和我們教科書上所說的相比,選擇標(biāo)簽所起的作用,實際上要小很

多

然而我要說，對于使用正確的語義元素，有兩個很好的理由。第一，也是最平淡無奇的一

個理由，使用正確的語義元素能夠幫助我們制定一個約定俗成的標(biāo)準(zhǔn)，讓編寫的代碼具有

良好的可維護性。眾所周知，如果使用語義元素，你的同事或繼任者將能夠在你的代碼上

工作，而不用學(xué)習(xí)你的名稱方案。反過來也是一樣的：如果你接手他人的代碼，他或她如

果按照標(biāo)準(zhǔn)來編碼，你就會知道代碼的情況到底如何。

還有另一個更深奧的原因，使用語義元素能增加內(nèi)容的相關(guān)性(aboutness)。簡單地說,

相關(guān)性是衡量意義質(zhì)量的一個標(biāo)準(zhǔn)，內(nèi)容的相關(guān)性描述了內(nèi)容的本質(zhì)。

下面，我們來對這個原理做一個簡單的說明，假設(shè)有一個網(wǎng)頁，其中包含W.H.Auden的

一首詩《葬禮藍調(diào)》：

他是我的南北,我的西東。

是我作息的意義。

是我的日夜,歡唱談話的內(nèi)容。

我以為愛會永恒不朽..….

……我錯了

雖然我們知道這是一首關(guān)于死亡的詩，但是“死亡”這個詞本身并沒有出現(xiàn)在詩中。索引頁

的搜索引擎如何才能知道這首詩是關(guān)于什么主題，并且在該主題的搜索結(jié)果中找到它？當(dāng)

搜索引擎瀏覽該頁面的鏈接文本時，在“閱讀更多”的鏈接文本中沒有提供上下文，可在

"W.H.Auden關(guān)于死亡的詩”的鏈接文本中提供了一些相關(guān)的信息檢索。

正確使用語義元素能帶來同樣的好處。如果頁面上所有的內(nèi)容都用div來標(biāo)記，內(nèi)容就會

<hl>Thisistheheading.</hl>

<p>Thisisthefirstsentence.</p>

<p>Thisisthesecondsentence.</p>

沒有上下文：反之，如果正確使用語義元素來標(biāo)記頁面，內(nèi)容就會有上下文:

現(xiàn)在，哪些是重要標(biāo)題，什么是主體內(nèi)容，就非常清楚了。所以說，通過正確使用語義元

素，可以賦予內(nèi)容一些信息檢索的相關(guān)性。

除了正確使用語義元素來標(biāo)記內(nèi)容，還可以使用很多其他方法來增加文檔的含義，這些含

義是機器所需的、而非用戶所需（通常稱為結(jié)構(gòu)化數(shù)據(jù)）。例如，可以使用定義模式（微

格式）中現(xiàn)有的屬性和元素，或用新屬性（RDFa和微數(shù)據(jù)）來擴展HTML。接下來，我

們將一一對這些方法作簡要介紹。

2.4微格式

微格式由一群草根開發(fā)人員聯(lián)合創(chuàng)建。通過使用現(xiàn)有屬性的標(biāo)準(zhǔn)化標(biāo)記模式，他們給內(nèi)容

添加上了更多的屬性。微格式最大的魅力不在于它是HTML的擴展，而在于它使用當(dāng)前

的開發(fā)方法來工作。它既是一種設(shè)計原則，也是一組標(biāo)準(zhǔn)用法模式。

微格式多種多樣，有相當(dāng)