HTML结构性标记,XHTML 结构化之二：案例分析：W3school 的结构化标记

div、id 和其他帮手

如果被正确地使用，div 可以成为结构化标记的好帮手，而 id 则是一种令人惊讶的小工具，它使你有能力编写极其紧凑的 XHTML，以及巧妙地利用 CSS，并通过标准文档对象模型 (DOM) 向站点添加复杂精巧的行为。

W3C 在其最新的 XHTML2 草案的 XHTML 结构模型中这样定义 div：

div 元素，通过与 id、class 及 role 属性配合，提供向文档添加额外结构的通用机制。这个元素不会将表现的风格定义于内容。所以，创作者可以通过将这个元素与样式表、xml:lang、属性等配合使用，使 XHTML 适应他们自身的需求和口味。

div 是 division 的简写。division 意为分割、区域、分组。比方说，当你将一系列的链接组合在一起，就形成了文档的一个 division。

确定结构的通用机制

所有编写 HTML 的人对段落和标题这类常见的元素都很熟悉，但是有些人对 div 就可能不那么熟悉了。在W3C的描述中我们可以找到理解 div 元素的关键，“一种添加结构的通用机制。”

在本站的首页，我们将教程目录列表封装于一个 div 之中，这是因为教程目录并不是正文的任何元素的一部分。其中，h2元素标记每个教程的标题，同时 ul 列表元素标记每个教程的详细列表。但是在更大更具体的意义中，这个教程目录扮演了一个结构化的角色，即二级导航组件。为了强调这个角色，我们使用 navsecond 这个 id 标注这个 div。

HTML教程

• HTML
• XHTML
• CSS
• TCP/IP

XML教程

• XML
• XSL

... ...

... ...

你可以使用任何命名。"Gladys" 和 "orangebox"都完全符合 XHTML 的命名规则。但是语义的 (semantic) 或者元结构化 (meta-structural) 的命名是最好的(即能够解释其中元素所执行功能的命名)。

当客户决定使用蓝色时，你会觉得将站点某部分命名为 orangebox(橙色框)会非常地傻。下面的这种情况中，你会觉得自己更傻，当距离最后交付只有六个月时，你开始调校样式表，却怎么也想不起来 "Gladys"(格拉迪斯，女子名)到底代表导航区、侧栏还是搜索框。

因此，将 id 标注为 "menu"、"content" 或者 "searchform"会帮助你回忆。进一步讲，标记不等同于设计，结构良好的的页面可以被格式化为你希望的任何样子。这样做的结果是，无论你使用纯粹 CSS 布局或者混合布局，你都会彻底改掉使用表现标记进行思考和创作的习惯。

id Vs. class

id 属性对于 XHTML 并不新鲜；class 属性或者 div 元素也一样。它们都可以回溯到 HTML 时代。id 属性为一个元素分配一个唯一的名字。每个名字只能在被赋予的页面使用一次。(例如，假如你的页面包含 id 为 content 的 div，那么另外一个 div 或者其他别的元素都不能使用这个名字。相反地，class 属性可以被一遍又一遍地使用在页面中(例如，页面中的五个段落都可以使用名为 "small" 或者"footnote" 的 class 名称)。下面的标记将有助于阐明 id 和 class 的差异：

Search form components go here. This

section of the page is unique.

Today's blog post

Blog content goes here.

Here is another paragraph of blog content.

Just as there can be many paragraphs on a page, so too

there may be many entries in a blog. A blog page could use

multiple instances of the class "blogentry" (or any other

class).

Yesterday's blog post

In fact, here we are inside another div of class

"blogentry."

They reproduce like rabbits.

If there are ten blog posts on this page, there might

be ten divs of class "blogentry" as well.

在这个例子中，名为 searchform 的 div 被用来封装包含搜索表单的页面区域，而 div class="blogentry" 则用来封装 blog 中的每个文章入口。在页面中只有一个搜索表单，所以我们选择 id 标注这个唯一的组件。但是 blog 则拥有许多的(文章)入口，所以 class 属性被应用于这种情况。同样地，新闻站点通常拥有多个 div，这些 div 的 class 可以命名为 "newsitem" 或者别的什么。

然而不是所有的站点都需要 div。blog 站点可以仅仅使用 h1, H2, 和 h2 标题和

段落，新闻站点也一样。我们在这里展示 class 为 blogentry 的 div，并不是鼓励你在站点中塞满 div，而仅仅是为了向你展示这个原则：在同一个 HTML 文档中，使用多次 class，但只能使用一次 id。

粘性贴纸理论

把 id 属性比作粘性贴纸来进行思考应该是有帮助的。我会在冰箱上拍一张贴纸来提醒自己去买牛奶，电话上面也会贴一张，提醒我给一位逾期缴纳的客户打电话。还有一个，被贴在账本夹上面，来提醒我这个月 15 号之前必须缴纳的账单。

id同样会标注文档中的特殊区域，以便提醒你哪个区域需要特殊的处理，在这点上，id属性与粘性贴纸是相似的。为了实现所谓的特殊处理，你需要使用这个特殊的id在样式表中编写若干规则，或者在JavaScript文件中添加几行代码。比方说，你的CSS文件中有一些特定的规则，这些规则只应用于id名为searchform的div内的元素。

当某一 id 属性作为一个有磁性的东西(磁铁)被用于一系列特定的 CSS 规则时，它被称为CSS选择器。有许多创建选择器的方法，不过 id 是很容易使用的，并且有多的用途。

id 的力量

id 属性不可思议地强有力。它具有以下的能力：

作为样式表选择器，使我们有能力创作紧凑的最小化的 XHTML。

作为超文本的目标锚，取代过时的 name 属性。

作为从基于 DOM 的脚本来定位特定元素的方法。

作为对象元素的名称。

作为一种综合用途处理 (general purpose processing) 的工具(在 W3C 的例子中，“当把数据从HTML页面中提取到数据库，或将 HTML 文档转换为其他格式等情况下，作为域识别工具来使用。”)。

id的规则

id 值必须以字母或者下划线开始；不能以数字开始。虽然 W3C 验证不会捕获这个错误，但是 XML 解析器会的。同时，如果你将 id 与 JavaScript 在表单中配合使用，那么 id 名称和值必须是合法的 JavaScript 变量。空格和连字号，特别是连字号，是不被允许的。不仅如此，将下划线用于 class 或者 id 名都不是个好主意，这是由于在 CSS2.0(以及某些浏览器)中的限制。