XHTML 入门教程 XHTML 结构化之二：案例分析：W3Cschool 的结构化标记

无论如何，不要跳过这一节。阅读这一章将提高你的技能，减轻你网页的重量，让你更清楚地了解标记和设计之间的区别。本章中的概念虽然很容易学习，但是它们可以大大提高网站的性能，以及设计、构建和更新网站的便利性。

在这一节中，您将学习如何编写逻辑的、紧凑的标记，从而使您能够将带宽流量减少大约50%，从而减少您的服务器负载和压力，同时减少站点的负载时间。要做到这一点，可以消除那些表现元素，消除那些没有好处的坏习惯。

这些坏习惯折磨着许多网站，尤其是那些把CSS代码与主要的基于表单的布局混合在一起的网站。即使对于在其他领域很有经验的设计师来说，这也是很拙劣并且不经济的。同时，这个问题的可能性是相等的，无论是对于手工编码的网站，还是对于使用Dreamweaver和GoLive等可见编辑工具创建的网站。

本节会提出一些常见错误，因此您可以识别和预防它们，并学习如何改正错误。我们详细阐述了惟一标识符属性（id），并展示了它如何允许您编写非常紧凑的XHTML代码，无论您是创建混合布局还是创建纯CSS布局。

每个元素都必须结构化吗？

正如我们在前面一节中所讨论的，每一个元素都可以被结构化，这样CSS就可以将一个有序的或无序的列表呈现为一个彻头彻尾的导航栏，并对其产生反转按钮效果。文档的内容可以用共同的元素标记，这些元素通过特定的结构化属性标记表示它们在网站设计中的语义作用。

<div id="header"><h1><a href="https://www.w3cschool.cn/">W3Cschool在线教程</a></h1></div>
<div id="navfirst">
<ul id="menu">
<li id="h"><a href="https://www.w3cschool.cn/html/" title="html教程">html教程</a></li>
<li id="x"><a href="https://www.w3cschool.cn/xml/" title="XML教程">XML教程</a></li>
<li id="b"><a href="https://www.w3cschool.cn/javascript/" title="javascript教程">javascript教程</a></li>
<li id="s"><a href="https://www.w3cschool.cn/css/" title="css教程">css教程</a></li>
<li id="d"><a href="https://www.w3cschool.cn/webdevelopment/" title="前端开发规范">前端开发规范</a></li>
<li id="m"><a href="https://www.w3cschool.cn/jquery/" title="jQuery教程">jQuery教程</a></li>
<li id="w"><a href="https://www.w3cschool.cn/wzjszn/" title="网站建设指南">网站建设指南</a></li>
</ul>
</div>

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。

<div id="navsecond">
<h2>HTML教程</h2>
<ul>
<li><a href="https://www.w3cschool.cn/html/" title="HTML教程">HTML</a></li>
<li><a href="https://www.w3cschool.cn/xhtml/" title="XHTML教程">XHTML</a></li>
<li><a href="https://www.w3cschool.cn/css/" title="CSS教程">CSS</a></li>
<li><a href="https://www.w3cschool.cn/tcpip/" title="TCP/IP教程">TCP/IP</a></li>
</ul>
<h2>XML教程</h2>
<ul>
<li><a href="https://www.w3cschool.cn/xml/" title="XML教程">XML</a></li>
<li><a href="https://www.w3cschool.cn/xslt/xsl-languages.html" title="XSL语言">XSL</a></li>
... ...
... ...
</div>

在浏览器中的展示效果：

你可以使用任何命名。"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 的差异：

<div id="searchform">在这里搜索表单组件。页面的这一部分是独一无二的。</div>
<div class="blogentry">
   <h2>今天的博客文章</h2>
   <p>博客内容在这里。</p>
   <p>下面是博客内容的另一段。</p>
   <p>正如页面上可能有很多段落一样，博客中也可能有很多条目。 博客页面可以使用类“blogentry”（或任何其他类）的多个实例。</p>
</div>
<div class="blogentry">
   <h2>昨天的博客文章</h2>
   <p>事实上，我们在这里又是一个层级的“blogentry”。</p>
   <p>它们像兔子一样繁殖。</p>
   <p>如果在这个页面上有十个博客文章，那么也可能会有十个类的“blogentry”。</p>
</div>

在浏览器中的展示效果：

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

然而不是所有的站点都需要 div。blog 站点可以仅仅使用 h1, H2, 和 h2 标题和 <p> 段落，新闻站点也一样。我们在这里展示 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（以及某些浏览器）中的限制。

语义标记和可用性

现在，我们已经讨论过了用途广泛的 XHTML 元素（特别是 div 和 id），让我们在看看关于本站首页的例子。首先让我们回顾一下这个位于报头位置的菜单：

<div id="header"><h1><a href="https://www.w3cschool.cn/">W3Cschool在线教程</a></h1></div>
<div id="navfirst">
<ul id="menu">
<li id="h"><a href="https://www.w3cschool.cn/html/" title="html教程">html教程</a></li>
<li id="x"><a href="https://www.w3cschool.cn/xml/" title="XML教程">XML教程</a></li>
<li id="j"><a href="https://www.w3cschool.cn/javascript/" title="javascript教程">javascript教程</a></li>
<li id="c"><a href="https://www.w3cschool.cn/css/" title="css教程">css教程</a></li>
<li id="q"><a href="https://www.w3cschool.cn/webdevelopment/" title="前端开发规范">前端开发规范</a></li>
<li id="u"><a href="https://www.w3cschool.cn/jquery/" title="jQuery教程">jQuery教程</a></li>
<li id="w"><a href="https://www.w3cschool.cn/wzjszn/" title="网站建设指南">网站建设指南</a></li>
</ul>
</div>

在浏览器中的展示效果：

我们拥有七个链接，每个链接被分配一个id来对应相应的内容：例如名为 h 的 id 对应 HTML 教程，以此类推。同时这些链接被封装于名为 menu 的列表元素内，名为 menu 的 id 标明了这个列表的职能 - 一个菜单列表，而更外围的名为 navfirst 的 div 则用来标注页面中的这个节 (section)，将之与诸如主要内容 (maincontent)、侧栏 (sidebar) 和页脚 (footer) 之类的元素区别开来。

div 和 ul 两个元素提供了真实的结构，即标明了其中内容的职能（导航栏）和它在文档中所属的位置（页面的报头位置）。相反地，传统的表格布局无法提供有关数据的任何语义信息，同时会轻松地吃掉三倍的带宽。

请注意这些标记没有包含img标签，所以不会牵扯到 width、height、background 或者 border 等等属性。同时它没有使用表格单元格，也不会涉及相关的一系列属性。它非常地干净小巧，同时提供了所有可供理解它的信息。

通过与 CSS 配合使用，这些标记向网站访问者提供了可靠的可快速加载的布局。同时也提供了为访问者创造更灵活多样的外观的可能性。并且在无 CSS 的环境中，我们的结构良好的标记依然可以毫不混乱地提供所有的内容。

敏锐的读者可能已经注意到，a元素中包含的文本没有被浏览器显示，这要感谢结构化标签与CSS完美的配合，这样我们才能用几行CSS规则来定义一个触发机制，当用户使用图形浏览器时，他们会看到一个不错的导航按钮，当用户使用纯文本阅读器时，他们会得到完整的文本，所以对于所有用户来说，内容都是一样的。

而且由于标签不包含图像和表单，这个导航栏组件可以被站点中的任何页面引用，而不会改变结构，从而赋予它不同的视觉效果。总之，通过模块化代码，我们提高了代码的可重用性。