XHTML 结构化之二：案例分析：W3Cschool 的结构化标记

<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 class="blogentry" 则用来封装 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（以及某些浏览器）中的限制。

<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>