XHTML结构化

最新推荐文章于 2025-07-27 10:38:50 发布

翻译最新推荐文章于 2025-07-27 10:38:50 发布 · 432 阅读

文章标签：

#XHTML #div #id #class

XHTML 专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨了div与id在网页结构、样式与行为中的应用，展示了如何利用它们创建紧凑的XHTML、高效定位CSS及DOM元素，以及在网页中实现复杂行为。同时，通过实例说明了如何利用id与class来区分不同网页组件，以及id的强大功能，如作为样式选择器、超文本目标锚等。此外，文章还强调了语义标记的重要性，并通过代码实例展示如何通过模块化提高代码复用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

div、id 和其他帮手

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

id的规则

id 值必须以字母或者下划线开始；不能以数字开始
空格和连字号，特别是连字号，是不被允许的。
将下划线用于 class 或者 id 名都不是个好主意，这是由于在 CSS2.0（以及某些浏览器）中的限制

id VS. class

<div id="searchform">Search form components go here. This
section of the page is unique.</div>
<div class="blogentry">
   <h2>Today's blog post</h2>
   <p>Blog content goes here.</p>
   <p>Here is another paragraph of blog content.</p>
   <p>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).</p>
</div>

<div class="blogentry">
   <h2>Yesterday's blog post</h2>
   <p>In fact, here we are inside another div of class
   "blogentry."</p>
   <p>They reproduce like rabbits.</p>
   <p>If there are ten blog posts on this page, there might
   be ten divs of class "blogentry" as well.</p>
</div>

在这个例子中，名为 searchform 的 div 被用来封装包含搜索表单的页面区域，而 div class=”blogentry” 则用来封装 blog 中的每个文章入口。在页面中只有一个搜索表单，所以我们选择 id 标注这个唯一的组件。但是 blog 则拥有许多的（文章）入口，所以 class 属性被应用于这种情况。

“id”的力量

作为样式表选择器，使我们有能力创作紧凑的最小化的 XHTML。
作为超文本的目标锚，取代过时的 name 属性。
作为从基于 DOM 的脚本来定位特定元素的方法。
作为对象元素的名称。
作为一种综合用途处理 (general purpose processing)的工具（在W3C的例子中，“当把数据从HTML页面中提取到数据库，或将HTML文档转换为其他格式等情况下，作为域识别工具来使用。”）。

语义标记和可用性

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

div和ul两个元素提供了真实的结构，即标明了其中内容的职能（导航栏）和它在文档中所属的位置（页面的报头位置）。相反地，传统的表格布局无法提供有关数据的任何语义信息，同时会轻松地吃掉三倍的带宽。
由于标记没有包含图像和表格单元，这个导航栏组件可以在不改变结构的情况下被站点内的任何页面所引用，同时赋予它不同的视觉效果。简而言之，通过对代码进行模块化，我们提高了代码的复用性。

更多请参考：W3School