級(jí)別: 初級(jí)
Nicholas Chase, 總裁, Chase and Chase, Inc.
2003 年 1 月 01 日
多
年以來，HTML 只是在不斷變大，卻從未變小，因?yàn)樾掳姹颈仨毦S護(hù)向后兼容性。這一情況將得以改變。XHTML 2.0 的第一個(gè)工作草案于
2002 年 8 月 5
日發(fā)布，一大新聞就是取消了向后兼容性；該語言終于得以繼續(xù)發(fā)展。那么，作為一名開發(fā)人員您將得到什么回報(bào)呢？健壯的表單和事件表現(xiàn)如何呢？它們是研究不
需要大量 JavaScript 的框架以及甚至層次結(jié)構(gòu)菜單的更佳方法。
本文概述了 XHTML 2.0 中的新增功能以及將來可能會(huì)如何使用它。讀者應(yīng)該熟悉 HTML 和／或 XHTML 1.0。熟悉級(jí)聯(lián)樣式表（Cascading Style Sheet (CSS)）是有幫助的，但不是必需的。
告別向后兼容性，引入結(jié)構(gòu)
當(dāng)萬維網(wǎng)聯(lián)盟（World Wide Web Consortium (W3C)）于 2002 年 8 月 5 日發(fā)布 XHTML 2.0 的第一個(gè)工作草案時(shí)，
最讓人吃驚的是：與其先前的版本不同，它不是向后兼容的。
對(duì)于先前的發(fā)行版，如從 HTML 4.01 轉(zhuǎn)到 XHTML 1.0 以及后來從 XHTML 1.0 到 XTHML 1.1，變化都是添加一些內(nèi)容；
可以讀取 XHTML 1.0（過渡的）文檔的瀏覽器也可以理解 HTML 4.01 文檔。而 XHTML 2.0 不是那樣的。
如果您在兩年前宣布我們今天將研究不帶
img 標(biāo)記或
bold 標(biāo)記的 HTML 版本，那么大多數(shù) Web 開發(fā)人員都會(huì)用懷疑的眼光看著您。然而，現(xiàn)在就是這樣。除了徹底替換表單和框架外，XHTML 2.0 還除去了
b 、
i 和
img 標(biāo)記（以及
big 、
small 和
tt ），
甚至不贊成使用
br ，以準(zhǔn)備從將來的發(fā)行版中除去它。但這是為什么呢？
原因在于大多數(shù)標(biāo)記都是
表示性的 。它們的唯一目的就是給予瀏覽器指令，規(guī)定有關(guān)其內(nèi)容應(yīng)該如何顯示，
但卻完全未提供有關(guān)其內(nèi)容是什么的信息。例如，請(qǐng)考慮下面兩個(gè)句子：
Presentational elements are, <i>for the most part</i>, <b>gone</b>.
|
和
Presentational elements are, <em>for the most part</em>, <strong>gone</strong>.
|
在沒有樣式表的情況下，這兩個(gè)句子在瀏覽器中看起來是一樣的，但只有第二個(gè)句子提供了有關(guān)原因的信息。
事實(shí)上，從一開始
em （強(qiáng)調(diào)）和
strong 標(biāo)記就出現(xiàn)在 HTML 中了，
但多年以來作者們基本上已經(jīng)忽略了它們，而專注于表現(xiàn)形式，這是以犧牲內(nèi)容為代價(jià)的。
但這并不意味著只要您想使某些內(nèi)容變成粗體或斜體，就應(yīng)該將它們硬塞進(jìn)這兩個(gè)標(biāo)記中。
相反，除去表示性元素的整個(gè)目的是設(shè)法完成 CSS 的發(fā)明者的初衷，
即應(yīng)該根據(jù)內(nèi)容所表示的東西來標(biāo)記內(nèi)容，而樣式表應(yīng)該用于美化內(nèi)容。例如，
清單 1使用類別（class）來指出內(nèi)容類型。
清單 1. 使用類別指定內(nèi)容類型
<html>
<head><title>Employee Notice</title>
<style type="text/css">
.duedate { color: red;
font-weight: bold; }
.holiday { color: green;
font-style: italic }
</style>
</head>
<body>
<h1>Notice</h1>
<p>Employees should take note of the following important dates:</p>
<ul>
<li class="duedate">8/28/2002 (Progress reports due)</li>
<li class="holiday">9/1/2002 (Labor Day)</li>
<li class="duedate">10/28/2002 (Final reports due)</li>
</ul>
</body>
</html>
|
在該頁面中，日期類型可以由內(nèi)容本身來確認(rèn)，瀏覽器可以使用類別信息來決定如何為其設(shè)計(jì)樣式，
如
圖 1中所示。
圖 1. 類別可以確定顯示哪一類內(nèi)容，樣式表可以對(duì)它進(jìn)行適當(dāng)?shù)母袷交?/b>
用這種觀點(diǎn)研究它：斷開（
br ）標(biāo)記的目的無外乎是為了顯示，因?yàn)閷?shí)際上它并無任何內(nèi)容。XHTML 2.0
不贊成使用
br 標(biāo)記，而提倡使用
line 標(biāo)記。
line 標(biāo)記指定一種特殊的內(nèi)容：
通常是以后跟換行和回車這種方式呈現(xiàn)的一行文本或其它內(nèi)容。例如，文本：
<p>
public class HelloWorld {<br />
public static void main (String[] args){<br />
System.out.println("Hello world!");<br />
}<br />
}
</p>
|
變成
<p>
<line>public class HelloWorld {</line>
<line>public static void main (String[] args){ </line>
<line>System.out.println("Hello world!"); </line>
<line>}</line>
<line>}</line>
</p>
|
這樣，文檔就有了一個(gè)表示行的實(shí)際對(duì)象，同樣，段（
p ）標(biāo)記表示一段內(nèi)容。
為什么所有這些都很重要呢？因?yàn)?Web 不僅正日益成為人與人之間通信的場(chǎng)所，
而且還日益成為軟件應(yīng)用程序（如服務(wù)器和搜索引擎索引器）之間進(jìn)行通信的場(chǎng)所。
而且，每個(gè)人（或者說幾乎每個(gè)人）都使用相同瀏覽器的時(shí)代已經(jīng)一去不復(fù)返了。
開發(fā)人員正不斷為不同設(shè)備（如 PDA 和移動(dòng)電話）重新設(shè)計(jì)內(nèi)容。語音觸發(fā)的（voice-activated）系統(tǒng)已經(jīng)離我們不遠(yuǎn)了。內(nèi)容的結(jié)構(gòu)意義正變得幾乎與內(nèi)容本身一樣重要。
節(jié)
因此，XHTML 2.0 添加了節(jié)（section）和標(biāo)題（heading）。HTML 一直都包含編號(hào)的標(biāo)題 ―
h1 到
h6 ，
直到 2002 年 8 月 5 日的工作草案，還未將其撤消，但這只是一個(gè)時(shí)間問題。
而 XHTML 2.0 使用通用標(biāo)題和節(jié)。例如，可以嵌套節(jié)，從而賦予標(biāo)題含義。
以前用編號(hào)標(biāo)題呈現(xiàn)的文檔（
清單 2）：
清單 2. 文檔中的編號(hào)標(biāo)題
<html>
<head><title>Adding sections</title></head>
<body>
<h1>The Web's future: XHTML 2.0</h1>
<p>by Nicholas Chase</p>
<h2>Good-bye backward compatibility, hello structure</h2>
<p>Why backward compatibility is over.</p>
<h3>Presentation versus Structure</h3>
<p>Using style sheets rather than presentational elements.</p>
<h3>Lines</h3>
<p>Line breaks are deprecated.</p>
<h2>Sections</h2>
<p>Creating more reasonable sections.</p>
<h2>Navigation lists and menus</h2>
<p>Hierarchical menus.</p>
<h2>Links, links, everywhere</h2>
<p>Adding links.</p>
</body>
</html>
|
可以用通用標(biāo)題和節(jié)替換（
清單 3）：
清單 3. 通用標(biāo)題和節(jié)
<html>
<head><title>Adding sections</title></head>
<body>
<section>
<h>The Web's future: XHTML 2.0</h>
<p>by Nicholas Chase</p>
<section>
<h>Good-bye backward compatibility, hello structure</h>
<p>Why backward compatibility is over.</p>
<section>
<h>Presentation vs. Structure</h>
<p>Using style sheets rather than presentational elements.</p>
</section>
<section>
<h>Lines</h>
<p>Line breaks are deprecated.</p>
</section>
</section>
<section>
<h>Sections</h>
<p>Creating more reasonable sections.</p>
</section>
<section>
<h>Navigation lists and menus</h>
<p>Hierarchical menus.</p>
</section>
<section>
<h>Links, links, everywhere</h>
<p>Adding links.</p>
</section>
</section>
</body>
</html>
|
這種結(jié)構(gòu)有兩個(gè)優(yōu)點(diǎn)。首先，應(yīng)用程序（如搜索引擎 crawler）能夠更容易地了解內(nèi)容的相對(duì)重要性，
其次，節(jié)是自包含的。在 HTML 中，節(jié)以其標(biāo)題開始，所以在標(biāo)題的前面不會(huì)出現(xiàn)內(nèi)容（如介紹性內(nèi)容）。
section
元素取消了這種約束，因?yàn)槠鋬?nèi)部的任何內(nèi)容都是節(jié)的一部分。
導(dǎo)航列表和菜單
增加了一個(gè)會(huì)讓 Web 開發(fā)人員大大受益的結(jié)構(gòu)，那就是導(dǎo)航列表。由
nl 標(biāo)記指定的導(dǎo)航列表的工作原理與其“表親”有序列表（
ol ）和無序列表（
ul ）非常相似，但有一點(diǎn)不一樣：導(dǎo)航列表的項(xiàng)僅在列表激活時(shí)才出現(xiàn)。
因此，導(dǎo)航列表與層次結(jié)構(gòu)的彈出菜單十分相似，這種彈出菜單很受歡迎，因?yàn)樗鼈兲峁┝嗽S多導(dǎo)航信息，而且不會(huì)占據(jù)太多的屏幕空間。
例如，肥皂劇站點(diǎn)可能有以下菜單（
清單 4）：
清單 4. 使用導(dǎo)航列表
<nl>
<name>Character Options</name>
<li href="stay.html">Stay</li>
<nl>
<name>Leave</name>
<li href="newjob.html">Job transfer</li>
<li href="divorce.html">Divorce</li>
<li href="fataldisease.html">Fatal disease</li>
</nl>
<li href="backburner.html">Back Burner</li>
</nl>
|
當(dāng)用戶激活名稱（
Character Options ）時(shí)，出現(xiàn)列表項(xiàng)。
關(guān)于當(dāng)用戶激活主列表時(shí)子列表（如
Leave 菜單）是否會(huì)出現(xiàn)，還是用戶必須激活子列表項(xiàng)本身以使其出現(xiàn)，工作草案并未說清楚。
最終作者可能通過樣式或事件來控制這一行為。在任何情況下，當(dāng)輸入焦點(diǎn)從主元素移開時(shí)，列表項(xiàng)就會(huì)消失。
鏈接，鏈接無處不在
您可能已經(jīng)注意到：即使打算將前一個(gè)示例作為菜單，
但它沒有錨（
a ）標(biāo)記。而
href 屬性已經(jīng)被正確放在了
li 元素上。這不是導(dǎo)航列表的特性，而是 XHTML 2.0 的新特性。與超文本相關(guān)的屬性（如
href 、
target 和
accesskey ）現(xiàn)在是公共屬性集合（Common Attribute Collection）的一部分，它包括核心屬性（
class 、
id 和
title ）、國(guó)際化屬性（
xml:lang ，
它替換了 XHTML 1.1 中的
lang ）和事件屬性，事件屬性來自 XML Events 建議書，正如您將在下面看到的。
這意味只要將
href 屬性添加到任何元素，就可以將它轉(zhuǎn)換成鏈接，而不一定要用錨標(biāo)記包圍單個(gè)元素。
這是否表示經(jīng)過四年的努力，XLink 已經(jīng)被 XHTML 2.0 采用了嗎？總而言之，沒有。
事實(shí)上，XLink 和 XHTML 2.0 中規(guī)定的鏈接之間的差異是那些正從事各自建議書的開發(fā)人員之間爭(zhēng)論的根源，
所以在這個(gè)最初的公開工作草案和最后的建議書之間可能會(huì)做些更改。
同時(shí)，可以組合使用該功能、導(dǎo)航列表、
link 元素，以及資源描述框架（Resource Description Framework (RDF)）來復(fù)制 XLink 的大多數(shù)功能。
XForms 是一個(gè)與 XML 相關(guān)的建議書，并確實(shí)已經(jīng)成為 XHTML 2.0 的一部分。
XForms
XML 表單語言（XML Forms Language (XForms)）
是研究表單的一種全新方法 ― 它象 XHTML 的其余部分一樣 ― 內(nèi)容、結(jié)構(gòu)和表現(xiàn)是完全獨(dú)立的。XForms 頁面指定一個(gè)模型，
該模型擁有有關(guān)表單自身的信息，然后，可以在頁面周圍散布表單元素，而不是被局限于單個(gè)表單元素。
這意味著，您甚至可以在頁面的同一區(qū)域中合并不同表單的元素。
可以通過實(shí)例文檔填充表單，實(shí)例文檔是從表單元素上的 XPath 表達(dá)式引用的。
表單元素自身也代表了特殊類型的對(duì)象，而不是描述在頁面上它們是如何顯示的。
當(dāng)更新表單元素中的數(shù)據(jù)時(shí)，會(huì)更新實(shí)例文檔。
當(dāng)用戶提交表單時(shí)，實(shí)際發(fā)送的是實(shí)例文檔。例如，采用下面的簡(jiǎn)單表單（
清單 5）：
清單 5. 簡(jiǎn)單的 HTML 表單
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Preference Form</title>
</head>
<body>
<h1>Preferences Form</h1>
<form action="myformprocessor.jsp">
<p>
Username: <input type="text" name="userid" />
<br />
Password: <input type="password" name="pass"/>
</p>
<p>
Area preference:
<select name="seatingpreference">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</p>
<p>
<input type="submit" />
</p>
</form>
</body>
</html>
|
清單 6顯示了 XForms 版本的表單：
清單 6. XForms 版本的表單
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xforms="http://www.w3.org/2002/01/xforms">
<head>
<title>Preference Form</title>
<xforms:model>
<xforms:submitInfo method="postxml"/>
<xforms:instance xmlns="">
<preferences>
<person userid="">
<password></password>
</person>
<seatingpreference></seatingpreference>
</preferences>
</xforms:instance>
</xforms:model>
</head>
<body>
<h1>Preferences Form</h1>
<p>
<xforms:input ref="preferences/person@userid">
<xforms:caption>Username: </xforms:caption>
</xforms:input>
<br />
<xforms:secret ref="preferences/person/password">
<xforms:caption>Password: </xforms:caption>
</xforms:secret>
</p>
<p>
<xforms:selectOne ref="preferences/seatingpreference" selectUI="listbox">
<xforms:caption>Area preference: </xforms:caption>
<xforms:item>
<xforms:value>1</xforms:value>
<xforms:caption>One</xforms:caption>
</xforms:item>
<xforms:item>
<xforms:value>2</xforms:value>
<xforms:caption>Two</xforms:caption>
</xforms:item>
<xforms:item>
<xforms:value>3</xforms:value>
<xforms:caption>Three</xforms:caption>
</xforms:item>
</xforms:selectOne>
</p>
<p>
<xforms:submit>
<xforms:caption>Submit Report</xforms:caption>
</xforms:submit>
</p>
</body>
</html>
|
術(shù)語說明：XForms 建議書特別說明了不存在單個(gè)表單的 XForms。它是多個(gè) XForms 頁面，不再是單個(gè) XForm 頁面。
表單一般需要進(jìn)行驗(yàn)證。換句話說，數(shù)據(jù)字段必須包含有效數(shù)據(jù)等。XForms
使用 XML 模式來約束所提交的數(shù)據(jù)。另外，可以通過添加 XML Events（它也包括在 XHTML 2.0 中）來進(jìn)一步增強(qiáng) XForms 頁面的功能。
XML Events
您可能已經(jīng)熟悉了通過添加如
onclick 和
onmouseover 之類的事件在 Web 頁面上使用事件。不會(huì)再有了。這些熟悉的屬性已經(jīng)被集成到
XHTML 2.0 中的 XML Events 模塊所替代。XML Events 提供了一種通用的方法來指定事件發(fā)生時(shí)應(yīng)該采取的操作。
它的優(yōu)點(diǎn)是您不受限于如鼠標(biāo)單擊之類的預(yù)定義事件。
相反，可以定義您自己的事件以及觸發(fā)它們時(shí)會(huì)發(fā)生什么。
XML Events 包含下列組件。如鼠標(biāo)單擊之類的事件可以作為目標(biāo)。例如，在
清單 7所示的頁面中：
清單 7. 要單擊的頁面
<html>
<head><title>Rides</title></head>
<body>
<ul id="ridelist">
<li href="monorail.html">Monorail</li>
<li href="Matterhorn.html">Matterhorn</li>
<li href="coaster.html">Roller coaster</li>
</ul>
</body>
</html>
|
用戶可能單擊第二個(gè)
li 元素 Matterhorn。當(dāng)這發(fā)生時(shí)，鼠標(biāo)單擊事件從文檔根行進(jìn)到目標(biāo)（
li ）并再次返回。順序是：
(root) -- html -- body -- ul -- li -- ul -- body -- html -- (root)
|
向下行進(jìn)到目標(biāo)稱為捕捉
（capture）階段，而再次向上行進(jìn)稱為冒泡（bubbling）階段（并不是所有的事件都會(huì)冒泡）。在行進(jìn)期間的任何時(shí)候，事件都可以傳遞已經(jīng)被注
冊(cè)為觀察器的對(duì)象（這表示它正在觀察特定的事件），如果它看到事件，則執(zhí)行特定操作。偵聽器創(chuàng)建觀察器。例如，在下面的序列中：
<ev:listener observer="ridelist" event="mousedown" handler="#myscript"/>
|
偵聽器使
ul 元素（或者更準(zhǔn)確一點(diǎn)說，是整個(gè)列表）成為觀察器，
因而，當(dāng)用戶單擊任何列表項(xiàng)目時(shí)，觀察器（
ridelist ）執(zhí)行
myscript （但仍必須確定調(diào)用任意腳本的機(jī)制）。
XFrames
廣受指責(zé)的框架也在 XHTML 2.0 中被替換了。XFrames
的第一個(gè)工作草案于 2002 年 8 月 6 日初次登場(chǎng)，此前一天 XHTML 2.0 宣布它將使用 XFrames 并試圖解決傳統(tǒng) HTML 框架出現(xiàn)的問題。
大多數(shù)問題是有關(guān)難于創(chuàng)建書簽和刷新頁面，以及不支持框架的搜索引擎無法索引適當(dāng)內(nèi)容。
在 XFrames 文檔中，所包含內(nèi)容的 URI 成為整個(gè)文檔 URI 的一部分。
例如，下面
清單 8中的頁面可能表示帶三個(gè)框架的 HTML 頁面：
清單 8. XFrames 頁面
<html>
<head><title>XFrames</title></head>
<body>
<row>
<frame id="header" />
<column>
<frame id="menu"/>
<frame id="content"/>
</column>
</row>
</body>
</html>
|
請(qǐng)注意，沒有指定每個(gè)框架的 URI，但每個(gè)框架都有其自己唯一的標(biāo)識(shí)符。
因此，這個(gè)文檔的 URI 可能是：
site.xfm#frames(header=header.xhtml,menu=menu.xhtml,content=main.xhtml)
|
然后，理解 XFrames 的瀏覽器將每個(gè)框架的內(nèi)容與適當(dāng)?shù)?URI 相關(guān)聯(lián)。當(dāng)用戶單擊鏈接并更改個(gè)別框架的內(nèi)容時(shí)，頁面的整個(gè) URI 都會(huì)更改，
所以它始終顯示用戶正在查看的實(shí)際內(nèi)容，“收藏”和“后退”按鈕提供了準(zhǔn)確的內(nèi)容。
圖像作為對(duì)象
2002 年 8 月 5 日工作草案的最后一個(gè)主要的更改包括
除去了
img 標(biāo)記并用
object 標(biāo)記替代它。
object 標(biāo)記實(shí)際上在 HTML 4.01 中就已經(jīng)出現(xiàn)，
但開發(fā)人員主要將它用于嵌入多媒體和 Java applet。
然而，它一直都能支持圖像。使用 object 標(biāo)記的主要優(yōu)點(diǎn)在于，它被設(shè)計(jì)成向下級(jí)聯(lián)。
換句話說，如果瀏覽器不能顯示一個(gè)特定對(duì)象，那么它將顯示該對(duì)象的內(nèi)容。
例如，遇到下列代碼片斷的瀏覽器首先試圖裝入電影。如果裝入電影失敗，則裝入圖像。如果裝入圖像失敗，那么它只顯示文本。
<object data="rides.mpeg" type="application/mpeg">
<object data="rollercoaster.jpg" type="image/jpg">
Jack tries to expand his horizons on the racing coasters.
</object>
</object>
|
后續(xù)步驟
2002 年 8 月 5 日的 XHTML 2.0 工作草案中唯一可以確定的事就是不能確定任何事情。
在現(xiàn)在的草案和被作為建議書采納的過程中，幾乎可以肯定它將在某些方面發(fā)生變化，
但強(qiáng)調(diào)結(jié)構(gòu)和語義的目標(biāo)不可能變化。出于這個(gè)原因，
最好研究您現(xiàn)在構(gòu)建的頁面，并開始養(yǎng)成適當(dāng)使用結(jié)構(gòu)和樣式的習(xí)慣。
使用標(biāo)記來指定某些事物是什么，而不是如何顯示它們，并使用 CSS 來完成其余工作。
總的來說，更多地考慮文檔的結(jié)構(gòu)以及您想要它們干什么，而不必太多地考慮它們將如何顯示。
參考資料
關(guān)于作者
|
|
|
Nicholas
Chase 曾參與過很多公司（如 Lucent Technologies、Sun Microsystems、Oracle 和 Tampa
Bay Buccaneers 等）的網(wǎng)站開發(fā)。Nick 曾是一名高中物理教師、低輻射廢物設(shè)備管理人員、在線科幻雜志編輯、多媒體工程師和
Oracle 講師。
最近，他成為 Site Dynamics Interactive Communications（位于佛羅里達(dá)州的 Clearwater）的
CTO，
而且還是三本有關(guān) Web 開發(fā)書籍的作者，包括 Java and XML from Scratch(Que) 和即將出版的
Primer Plus XML Programming(Sams)。他樂意聽取讀者意見，可以通過
nicholas@nicholaschase.com與他聯(lián)系。
|