Web之HTML.doc

1. 注释：浏览器会自动地在段落的前后添加空行。（ 是块级元素）提示：使用空的段落标记 去插入一个空行是个坏习惯。用 标签代替它！（但是不要用 标签去创建列表。不要着急，您将在稍后的篇幅学习到 HTML 列表。）2. 使用 pre 标签对空行和空格进行控制。这是预格式文本。 它保留了 空格和换行。3. 如何实现长短不一的引用语。这是长的引用：这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是短的引用：这是短的引用。使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。4. 文本格式化标签标签描述定义粗体文本。定义大号字。定义着重文字。定义斜体字。定义小号字。定义加重语气。定义下标字。定义上标字。定义插入字。定义删除字。不赞成使用。使用 代替。不赞成使用。使用 代替。不赞成使用。使用样式（style）代替。“计算机输出”标签标签描述定义计算机代码。定义键盘码。定义计算机代码样本。定义打字机代码。定义变量。定义预格式文本。不赞成使用。使用 代替。不赞成使用。使用 代替。不赞成使用。使用 代替。引用、引用和术语定义标签描述定义缩写。定义首字母缩写。定义地址。定义文字方向。定义长的引用。定义短的引用语。定义引用、引证。定义一个定义项目。5. 如何使用样式当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：外部样式表当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。内部样式表当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 标签定义内部样式表。body background-color: redp margin-left: 20px内联样式当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。This is a paragraph标签描述定义样式定义。定义资源引用。定义文档中的节或区域（块级）。定义文档中的行内的小块或区域。规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。定义基准字体。不赞成使用。请使用样式。对文本进行水平居中。不赞成使用。请使用样式。6. HTML 链接语法链接的 HTML 代码很简单。它类似这样：Link texthref 属性规定链接的目标。开始标签和结束标签之间的文字被作为超级链接来显示。HTML 链接 - target 属性使用 Target 属性，你可以定义被链接的文档在何处显示。下面的这行会在新窗口打开文档：Visit W3School!HTML 链接 - name 属性name 属性规定锚（anchor）的名称。您可以使用 name 属性创建 HTML 页面中的书签。书签不会以任何特殊方式显示，它对读者是不可见的。当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。命名锚的语法：锚（显示在页面上的文本）提示：锚的名称可以是任何你喜欢的名字。提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。实例首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：基本的注意事项 - 有用的提示然后，我们在同一个文档中创建指向该锚的链接：有用的提示您也可以在其他页面中创建指向该锚的链接：有用的提示在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。7.替换文本属性（Alt）alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。基本的注意事项 - 有用的提示：假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。8. 如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。图像标签标签描述定义图像。定义图像地图。定义图像地图中的可点击区域。请点击图像上的星球，把它们放大。注释：img 元素中的 usemap 属性引用 map 元素中的 id 或 name 属性（根据浏览器），所以我们同时向 map 元素添加了 id 和 name 属性。9. 表格表格由 标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的表头表格的表头使用 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本：表格标签表格描述定义表格定义表格标题。定义表格的表头。定义表格的行。定义表格单元。定义表格的页眉。定义表格的主体。定义表格的页脚。定义用于表格列的属性。定义表格列的组。10. 定义列表自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 标签开始。每个自定义列表项以 开始。每个自定义列表项的定义以 开始。CoffeeBlack hot drinkMilkWhite cold drink浏览器显示如下：CoffeeBlack hot drinkMilkWhite cold drink定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。列表标签标签描述定义有序列表。定义无序列表。定义列表项。定义定义列表。定义定义项目。定义定义的描述。已废弃。使用 代替它。已废弃。使用 代替它。定义列表自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 标签开始。每个自定义列表项以 开始。每个自定义列表项的定义以 开始。CoffeeBlack hot drinkMilkWhite cold drink浏览器显示如下：CoffeeBlack hot drinkMilkWhite cold drink定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。11. 可以通过 和 将 HTML 元素组合起来。HTML 块元素大多数 HTML 元素被定义为块级元素或内联元素。编者注：“块级元素”译为 block level element，“内联元素”译为 inline element。块级元素在浏览器显示时，通常会以新行来开始（和结束）。例子：, , , HTML 内联元素内联元素在显示时通常不会以新行开始。例子：, , , HTML 元素HTML 元素是块级元素，它是可用于组合其他 HTML 元素的容器。 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用， 元素可用于对大的内容块设置样式属性。 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 元素进行文档布局不是表格的正确用法。 元素的作用是显示表格化的数据。HTML 元素HTML 元素是内联元素，可用作文本的容器。 元素也没有特定的含义。当与 CSS 一同使用时， 元素可用于为部分文本设置样式属性。HTML 分组标签标签描述定义文档中的分区或节（division/section）。定义 span，用来组合文档中的行内元素。HTML 标签定义和用法 可定义文档中的分区或节（division/section）。 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 ，那么该标签的作用会变得更加有效。用法 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 固有的唯一格式表现。可以通过 的 class 或 id 应用额外的样式。不必为每一个 都加上类或 id，虽然这样做也有一定的好处。可以对同一个 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。实例文档中的一个部分会显示为绿色： This is a header This is a paragraph.TIY浏览器支持所有主流浏览器都支持 标签。HTML 与 XHTML 之间的差异在 HTML 4.01 中，div 元素的 align 属性不被赞成使用。在 XHTML 1.0 Strict DTD 中，div 元素的 align 属性不被支持。提示和注释：注释： 是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符。提示：请使用 元素来组合块级元素，这样就可以使用样式对它们进行格式化。提示：即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！12. 表单标签标签描述定义供用户输入的表单定义输入域定义文本域 (一个多行的输入控件)定义一个控制的标签定义域定义域的标题定义一个选择列表定义选项组定义下拉列表中的选项定义一个按钮已废弃。由 代替。13. 基本的注意事项 - 有用的提示：假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 标签中加入：noresize=noresize。为不支持框架的浏览器添加 标签。重要提示：不能将 标签与 标签同时使用！不过，假如你添加包含一段文本的 标签，就必须将这段文字嵌套于 标签内。（在下面的第一个实例中，可以查看它是如何实现的。）提示：如果你打算使用背景图片，你需要紧记一下几点： 背景图像是否增加了页面的加载时间。小贴士：图像文件不应超过 10k。 背景图像是否与页面中的其他图象搭配良好。 背景图像是否与页面中的文字颜色搭配良好。 图像在页面中平铺后，看上去还可以吗？ 对文字的注意力被背景图像喧宾夺主了吗？基本的注意事项 - 有用的提示： 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML 标准（HTML4 和 XHTML）中已被废弃。W3C 在他们的推荐标准中已删除这些属性。应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。14. HTML 头部元素标签描述定义关于文档的信息。定义文档标题。定义页面上所有链接的默认地址或默认目标。定义文档与外部资源之间的关系。定义关于 HTML 文档的元数据。定义客户端脚本。定义文档的样式信息。15. 标签 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容：document.write(Hello World!)Your browser does not support JavaScript!如何应付老式的浏览器如果浏览器压根没法识别 标签，那么 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生，你应该将脚本隐藏在注释标签当中。那些老的浏览器（无法识别 标签的浏览器）将忽略这些注释，所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们，即使代码被嵌套在注释标签内。16. HTML 中有用的字符实体注释：实体名称对大小写敏感！显示结果描述实体名称实体编号空格 大于号>&和号&引号"撇号' (IE不支持)分¢镑£日圆¥欧元€小节§版权©注册商标®商标™乘号×除号÷不间断空格（non-breaking space）HTML 中的常用字符实体是不间断空格( )。浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用   字符实体。17. URL - Uniform Resource Locator当您点击 HTML 页面中的某个链接时，对应的 标签指向万维网上的一个地址。统一资源定位器（URL）用于定位万维网上的文档（或其他数据）。网址，比如/html/index.asp，遵守以下的语法规则：scheme:/host.domain:port/path/filename解释： scheme - 定义因特网服务的类型。最常见的类型是 http host - 定义域主机（http 的默认主机是 www） domain - 定义因特网域名，比如 :port - 定义主机上的端口号（http 的默认端口号是 80） path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。 filename - 定义文档/资源的名称编者注：URL 的英文全称是 Uniform Resource Locator，中文也译为“统一资源定位符”。URL Schemes以下是其中一些最流行的 scheme：Scheme访问用于.http超文本传输协议以 http:/ 开头的普通网页。不加密。https安全超文本传输协议安全网页。解密所有信息交换。ftp文件传输协议用于将文件下载或上传至网站。file您计算机上的文件。18. HTML 4.01 多媒体标签标签描述不赞成。定义内嵌 applet。HTML4 中不赞成，HTML5 中允许。定义内嵌对象。定义内嵌对象。定义对象的参数。HTML 5 多媒体标签标签描述标签定义声音，比如音乐或其他音频流。标签定义嵌入的内容，比如插件。XHTML 模块W3C 已将 XHTML 的定义分为28种模型：模块名称描述Applet Module (Applet模块)定义已被废弃的applet元素。Base Module (基础模块)定义基本元素。Basic Forms Module (基础表单模块)定义基本的表单元素 (forms)。Basic Tables Module (基础表格模块)定义基本的表格元素 (table)。Bi-directional Text Module (双向文本模块)定义bdo元素。Client Image Map Module(客户端图像映射模块)定义浏览器端图像映射元素(image map elements)。Edit Module (编辑模块)定义编辑元素删除和插入。Forms Module (表单模块)定义所有在表单中使用的元素。Frames Module (框架模块)定义frameset元素。Hypertext Module (超文本模块)定义a元素。Iframe Module (内联框架模块)定义iframe元素。Image Module (图像模块)定义图像元素 (img)。Intrinsic Events Module ()定义事件属性 (event)，比如onblur和onchange。Legacy Module (遗留模块)定义被废弃的元素和属性。Link Module (链接模块)定义链接 (link)元素。List Module (列表模块)定义列表元素ol, li, ul, dd, dt,和dl。Metainformation Module (元信息模块)定义meta元素。Name Identification Module (名称识别模块)定义已被废弃的name属性。Object Module (对象模块)定义对象元素 (object)和param元素。Presentation Module (表现模块)定义表现元素比如b和i。Scripting Module (脚本模块)定义脚本 (script)和无脚本 (noscript)元素。Server Image Map Module(服务器端图像映射模块)定义服务器端图像映射(server side image map)元素Structure Module (结构模块)定义以下元素：html, head, title and body。Style Attribute Module (样式属性模块)定义样式属性。Style Sheet Module (样式表模块)定义样式元素。Tables Module (表格模块)定义用于表格中的元素。Target Module (Target模块)定义target属性。Text Module (文本模块)定义文本容器元素 (text container)，比如p和h1。19. *注：已被废弃的元素不应被用于XHTML之中。为表达语义而标记文档，而不是为了样式记住：请最大限度地使用 CSS 来进行布局。在 web 标准的世界里，XHTML 标记与表现无关，它只与文档结构有关。结构良好的文档可以向浏览器传达尽可能多的语义，不论是浏览器位于掌上电脑还是时髦的桌面图形浏览器。结构良好的文档都能向用户传达可视化的语义，即使是在老的浏览器，或是在被用户关闭了 CSS 的现代浏览器中。不是每个站点都能立即抛弃 HTML 表格布局。CSS 的发明者，W3C，直到 2002 年 11 月才将官方网站转换为 CSS 布局。然而，即使是顽固的唯标准主义者也不总是将表现从结构中完全分离处理，至少在 XHTML 1 中是做不到的。但是现在，我们可以向这个理想迈出重大的一步，通过将表现从结构中分离（或者说将数据从设计中），即使是混合的传统的布局也可从中受益。下面有一些提示，可以帮助你通过更结构化的方式进行思维：提纲内的色彩在语法学校，我们中的大部分人都被迫使用标准的提纲格式来写文章。现在，我们成为了设计师，可以多么自由地摆脱提纲的限制，然后大胆地投身于独特的个人表达的自由领域（也许我们的宣传册和商业站点还不是那么独特和个人化）。但是至少我们不会再受到提纲的困扰了。实际上，依照 HTML，我们应该将内容结构化为有组织的层级。在浏览器不支持 CSS 的时期，我们无法在交付可供销售的布局的同时做到这一点。但是今天，在将我们的设计不折不扣地实现的同时，我们有能力交付内在结构良好的文档。当你将供网络使用的文本进行标记，或者当你将已有的文本文档转换为网页时，请使用传统提纲的这些条目进行思考。我的主题介绍性文字补充性的观点相关文字同时，避免使用已被废弃的 HTML 元素比如 ，或者无语义的元素比如 ，来模拟其实不存在的逻辑结构。比如，不要像这样做：我的主题介绍性文字补充性的观点相关文字根据它们的意义使用元素，而不是根据它们的外观我们中一些人已经陷在了一个坏习惯中，当我们仅仅需要一个大号字的文本时使用h1，或者在我们需要在前面加一个圆点符号时使用 li。就像我们在前面的章节讨论过的，浏览器一直都习惯于将设计属性强加于 HTML 元素之上。我们都一直习惯于认为，h1 意味着大号字，而li意味着圆点，或者 blockquote 意味着文本缩进。我们中的大多数人还在使用结构化元素模拟表现效果的方式来胡乱地写作 HTML。同样地，假如设计师希望所有的标题使用相同的字号，她会将所有的标题设置为 h1，即使这么做毫无结构化语义可言。这是主标题，在我将文本按照提纲格式组织的情况下。这不是主标题，但是我希望它与上面的标题使用一样的字体，但是我不知该如何使用CSS。这根本不是一个标题。但是我非常希望页面中的文字使用相同的字体，以达到我希望的，如果我了解CSS，就可以在不打乱文档结构的情况下达到这个设计。我们必须把我们的小把戏放到一边，然后开始根据元素的语义来使用它们，而不是根据它们看上去的样子。实际上，h1可以成为你希望的任何样子。通过 CSS，h1 可以成为非粗体的小号的罗马字体，而 p 文本可以成为粗体的大号字，li 也可以没有圆点（你或者可以使用小猫小狗或者公司标志的 PNG,GIF 或者 JPEG 图片取而代之）等等。从今天开始，我们将要使用 CSS 来决定元素的外观。我们甚至可以根据元素在页面中或者在站点中所在的位置来改变它们的外观。 CSS 可以将表现从结构中彻底抽离，并且允许你按照你喜欢的样式来格式化任何元素。h1, h2, h3, h4, h5, h6 font-family: georgia, palatino, New Century Schoolbook,times, serif;font-weight: normal;font-size: 2em;margin-top: 1em;margin-bottom: 0;你为什么要这么做呢？这么做的目的是为了在图形浏览器中获得品牌化的外观和感觉的同时，在文本浏览器、无线设备、HTML 格式的电子邮件中，文档的结构得到保留。我们并不想在关于 XHTML 的章节讲述更多 CSS 方面的技术。我们只是希望展示文档结构和可视表达是两个完全不同的事物，并且结构化元素应被用来转换文本，而不是强加显示效果。使用结构化元素，而不是无意义的垃圾由于我们已经忘记或者根本不知道 HTML 和 XHTML 的用途是传达结构化的意义，许多 HTML 争论者这样使用标签来插入列表：项目一项目二项目三考虑一下使用有序或者无序列表取而代之：项目一项目二项目三但是li给我一个圆点，而我不需要圆点！你也许会这么说。根据上面的章节，CSS不对元素被期望的外观做任何假定。它等待你来告诉它你所期待的元素外观。关闭圆点是 CSS 的最基本的能力。它有能力使列表看起来和普通文本没有两样，也可以使列表看起来像图形导航栏，具有完整的反转效果。所以，请使用列表元素来标记列表。相似地，使用 strong 来代替 b，使用 em 代替 i，等等。在大多数桌面浏览器缺省状态下，strong 的显示效果和 b 相同，而 em 和 i 相同，同时也可以在不破坏文档结构的情况下创建你期待的视觉效果。尽管 CSS 不会为任何元素的显示作假设，浏览器却作了很多假设，并且我们还没有碰到一个将 strong 显示为其他效果而不是粗体字的浏览器（除非是被设计师创建的 CSS 指示以其他方式显示）。假如你担心某个陌生的浏览器不会将 strong 显示为粗体字，你可以编写这么一条 CSS 规则：strong font-weight: bold;font-style: normal;视觉元素和结构web 标准不仅要求我们使用何种科技，而且还要遵守使用这些技术的方式。使用 XHTML 来编写标记，同时使用 CSS 来处理一部分或者全部的布局，并不一定会使站点更易用更轻便，同时节约多少带宽。就像我们在早期使用的技术那样，XHTML 和 CSS 也会被误用和滥用。冗长的 XHTML 和冗长的 HTML 一样，都会浪费用户的带宽和时间。冗长的过度的 CSS 也不能完全的代替表现 HTML 代码；这只不过是一种糟糕的东西被另一种代替了而已。无论如何，不要跳过本节。阅读本章将增进你的技能，为你的网页减肥，并且使你对标记与设计之间的差异有更清晰的认识。本章中的理念是易于学习的，但是却能极大的提高网站的性能，以及设计、制作和更新网站的便利性。在本节，你将学到如何撰写合乎逻辑的、紧凑的标记，使得你有能力将带宽流量降低50%左右，在减少服务器负担和压力的同时，减少网站的加载时间。通过去除那些表现元素，并改掉那些没有任何好处的坏习惯，我们就可以达到上述的目的。这些坏习惯折磨着网络中的许多站点，特别是那些将 CSS 代码与主要基于表格的布局混合在一起的站点。这种做法笨拙且不经济，即使是对于那些在其他领域很有经验的设计师来说。同时，出现这个问题的几率是均等的，不论是那些手写代码的站点，还是利用可见编辑工具，比如 Dreamweaver 和 GoLive，来创建的站点。本节会提出这些常见的错误，这样你就可以识别和防范它们，并且学会如何改正错误。我们详细阐述唯一标识符属性 (id) - ，并展示它如何使你可以编写极其紧凑的 XHTML 代码，不论你创建的是混合布局还是纯粹的 CSS 布局。每个元素都必须结构化吗？正如上一节中我们讲到的那样，每个元素都可以被结构化，CSS 可使得一个有序或无序的列表显示为彻头彻尾的导航栏，其中还拥有反转按钮效果。文档的内容可以通过普通的元素进行标记，这些元素通过特定的结构化属性标志来指示出它们在网站设计中所扮演的语义角色。我们在公元 2006 年创建了 W3School 的第一个中文测试版，我们在一开始就使用了 CSS 进行布局，并使用 XHTML 来结构化文档。每一个其中的元素都是结构化的，从标题到列表，乃至段落。你可以在 w3school 的每个页面看到具有反转效果的首页按钮和二级菜单按钮。下面是这两个组件的 XHTML 代码：w3school在线教程html教程XML教程浏览器脚本服务器脚本dot net教程多媒体教程建站手册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教程HTMLXHTMLCSSTCP/IPXML教程XMLXSL. . .你可以使用任何命名。Gladys 和 orangebox都完全符合 XHTML 的命名规则。但是语义的 (semantic) 或者元结构化 (meta-structural) 的命名是最好的（即能够解释其中元素所执行功能的命名）。当客户决定使用蓝色时，你会觉得将站点某部分命名为 orangebox（橙色框）会非常地傻。下面的这种情况中，你会觉得自己更傻，当距离最后交付只有六个月时，你开始调校样式表，却怎么也想不起来 Gladys（格拉迪斯，女子名）到底代表导航区、侧栏还是搜索框。因此，将 id 标注为 menu、content 或者 searchform会帮助你回忆。进一步讲，标记不等同于设计，结构良好的的页面可以被格式化为你希望的任何样子。这样做的结果是，无论你使用纯粹 CSS 布局或者混合布局，你都会彻底改掉使用表现标记进行思考和创作的习惯。id Vs. classid 属性对于 XHTML 并不新鲜；class 属性或者 div 元素也一样。它们都可以回溯到 HTML 时代。id 属性为一个元素分配一个唯一的名字。每个名字只能在被赋予的页面使用一次。（例如，假如你的页面包含 id 为 content 的 div，那么另外一个 div 或者其他别的元素都不能使用这个名字。相反地，class 属性可以被一遍又一遍地使用在页面中（例如，页面中的五个段落都可以使用名为 small 或者footnote 的 class 名称）。下面的标记将有助于阐明 id 和 class 的差异：Search form components go here. Thissection of the page is unique. Todays 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). Yesterdays 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文件