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="navfirst">

<ul id="menu">

<li id="h"><a href="/h.asp" title="html教程">html教程</a></li>

<li id="x"><a href="/x.asp" title="XML教程">XML教程</a></li>

<li id="b"><a href="/b.asp" title="浏览器脚本">浏览器脚本</a></li>

<li id="s"><a href="/s.asp" title="服务器脚本">服务器脚本</a></li>

<li id="d"><a href="/d.asp" title="dot net教程">dot net教程</a></li>

<li id="m"><a href="/m.asp" title="多媒体教程">多媒体教程</a></li>

<li id="w"><a href="/w.asp" 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 规则来定义一个触发机制，当用户使用图形浏览器时，他们会看到漂亮的导航按钮，而当用户使用纯文本的阅读器时，他们也可以得到全部的文本，这样，对所有的用户来说，内容都是一样的。

 

并且，由于标记没有包含图像和表格单元，这个导航栏组件可以在不改变结构的情况下被站点内的任何页面所引用，同时赋予它不同的视觉效果。简而言之，通过对代码进行模块化，我们提高了代码的复用性。