HTML5-权威指南-二-

HTML5 权威指南（二）

原文：The Definitive Guide to HTML5

协议：CC BY-NC-SA 4.0

六、上下文中的 HTML 元素

在接下来的章节中，我将描述 HTML5 定义的元素。其中许多元素也存在于 HTML4 中，但在许多情况下，元素的含义已经改变，或者元素的使用方式已经不同。在我们看这些元素之前，我想把它们放在上下文中，并为后面的内容奠定基础。知道如何使用这些元素和理解它们的重要性一样重要。

理解语义/表现的差异

HTML5 的主要变化之一是哲学上的——元素的语义意义和元素对内容表示的影响之间的分离。原则上，这是一个明智的想法——使用 HTML 元素为内容赋予结构和意义，然后通过对元素应用 CSS 样式来控制内容的表示。并不是每个 HTML 文档的消费者都需要显示它们，通过将表示作为一项独立的工作，您可以使 HTML 更容易处理并自动提取含义。

HTML5 中添加的大多数新元素都为您的内容添加了特定的含义。您可以使用article元素(在第十章中有描述)来表示适合联合的自包含内容，或者使用figure元素来表示一个数字。

HTML4 中存在的大量元素起源于没有将表示和意义分开的概念——这将我们置于一个奇怪的境地。一个很好的例子是b元素。在 HTML5 之前，b元素指示浏览器将开始和结束标签包含的内容显示为粗体文本。在 HTML5 中，你不希望元素只是表示性的，所以你有了一个新的定义。这是:

b元素表示从其周围内容偏移的一段文本，没有传达任何额外的强调或重要性，并且对于该段文本，传统的印刷呈现是粗体文本；例如，文档摘要中的关键字，或者评论中的产品名称。

–HTML:标记语言，w3c.org

这是一种冗长的方式，告诉我们b元素告诉浏览器将文本加粗。b元素没有语义意义；这是所有关于介绍。这个含糊其辞的定义告诉我们一些关于 HTML5 的重要事情:我们正处于一个过渡时期。我们需要保留旧元素，因为它们被广泛使用，在 HTML5 中丢弃 HTML4 元素是不可想象的，因为这肯定会减慢采用。所以我们有一个双速标准。有些元素，尤其是新的元素，只有语义上的意义。其他元素，主要是那些带有一个字母标签的元素，已经被很好地建立起来，以至于我们愿意打破表示/语义的鸿沟，即使我们不愿意尽可能公开地承认这一点。

从下一章开始，当你通读元素的描述时，你会发现在思维的新方式和旧方式之间保持这种张力是有帮助的。这肯定有助于解释你将会遇到的一些小问题。

我的建议是在语义方面出错，在合理的情况下，尽量避免主要(或仅仅)是表示性的元素。定义一个自定义类并应用所需的样式是一件简单的事情。只要你使用基于内容类型的样式(而不仅仅是你希望内容出现的方式)，你至少会保留语义精神。

了解如何选择元素

即使抛开表示问题不谈，HTML5 规范也有一些模糊之处。有些元素非常通用，一开始您可能会觉得这令人不快。

元素是通用的，但那是因为 HTML 元素被用来标记如此多不同种类的内容。我的大部分写作都是为了这样的书，所以当我听到像章节、文章、标题和图这样的术语时，我会想到出版社需要作者提供的结构和风格。当应用于其他类型的内容时，相同的术语具有不同的含义。例如，规范、法律合同和博客文章可能都有部分，但是每个部分的含义完全不同。我们没有图书部分、规范部分、合同部分和博客部分的定义，我们只有通用术语，需要某种程度的解释。在选择应用于内容的元素时，我建议您遵循一些基本规则。下面几节将对它们进行描述。

少可以多

很容易忘乎所以，最终在文档中留下大量标记。您只需要添加标记来赋予内容所需的语义意义。如果不需要定义复杂的标题，就不需要hgroup元素(在第十章中有描述)，只有在引用很重要的文档(比如期刊论文)才需要带有cite元素的详细引用(第八章)。

判断应用多少标记是一个经验问题，但是这里有一个经验法则:问问你自己元素的语义将如何被使用。如果我没有立即的答案，我不会应用该元素。

不要滥用元素

每个元素代表一种特定的内容，甚至是那些棘手的仅用于表示的元素，如b。当标记内容时，只为定义的目的使用元素，避免创建私有语义。如果您找不到具有所需意义的元素，可以考虑使用一个通用元素(如span或div)并使用class全局属性来表示文档中的含义。类不一定只用于 CSS 样式。

具体而一致

你需要选择最具体的元素来代表你的内容。这意味着当存在表示适当内容类型的元素时，抵制使用通用元素构建页面的诱惑。HTML4 中有一种倾向，依靠div元素(在第九章中描述)来构建页面结构，但问题是，对于试图处理你的内容的任何人来说，语义并不立即显而易见。您可能决定创建一个名为article的类，并使用该类应用您的样式，但是这并不像使用article元素那样赋予其他人相同的含义。

同样地，当你使用一个元素时，要确保在你的页面、站点或 web 应用中应用它。这将使您更容易维护您的 HTML 标记，也使其他人更容易处理您的 HTML。

不要对观众做出假设

很容易假设 HTML 的消费者只关心页面如何在浏览器中呈现，因此，您不必担心标记的语义准确性。语义/表示划分的全部目的是使 HTML 更容易以编程方式处理，因此，随着 HTML5 被更广泛地采用和实现，可以预期这种风格的 HTML 消费会逐渐增加。假设您不必担心您的标记的准确性或一致性，您会使处理您的 HTML 更加困难，这将限制用户可以为您的内容找到的目的范围。

理解元素描述

在描述每个元素时，我提供了一个汇总表，其中包含了您需要了解的关键事实，在对内容应用标记时，您可以参考这些事实。表 6-1 是这种总结的一个例子——它描述了ol元素，用来表示一个有序列表。(你可以在第九章的中看到 HTML 列表的全部细节。)

本章中的表格告诉您哪些父元素适合该元素，元素可以包含的内容种类，所需的标记样式，默认的表示样式，以及该元素在 HTML5 中是新的还是更改的。关于合适的父母和内容的信息是基于我在第三章中描述的元素类别，主要是 ?? 流和 ?? 元素。

元素快速参考

下面的表格是我在后面章节中描述的所有 HTML5 元素的快速参考。

文档和元数据元素

表 6-2 总结了文档和元数据元素，在第七章中有详细描述。这些元素用于创建 HTML 文档的上层结构，向浏览器提供关于文档的信息，并定义脚本和 CSS 样式以及在浏览器中禁用脚本时将显示的内容。

文本元素

文本元素被应用于内容以给出基本的结构和含义。表 6-3 总结了这些要素，这些要素在第八章中有详细描述。

分组内容

表 6-4 中的元素用于关联分组中的相关内容。这些元素的全部细节可以在第九章中找到。

切片内容

表 6-5 中的元素用于分解内容，以便每个概念、想法或主题都是独立的。这些元素中有许多是新的，它们为将元素的含义与它们的外观分开提供了很多基础。你可以在第十章中了解更多关于这些元素的知识。

创建表格

表 6-6 中的元素用于创建表格以在网格中显示数据。HTML5 的主要变化是你不能再用表格来管理页面的布局。相反，你必须使用 CSS 表格特性，我在第二十一章中描述过。

创建表单

表 6-7 中的元素用于创建 HTML 表单，你可以用它来请求用户输入。在 HTML5 中，HTML 的这个领域受到了很多关注，它有许多新元素和特性，包括在用户能够提交表单之前在客户端验证输入的能力。我在第 12、13 和 14 章描述了 HTML 表单元素。特别有趣的是新类型的input元素，我在第十二章的中介绍了它，并在第十三章的中深入讨论了它。

嵌入内容

表 6-8 中的元素用于将内容嵌入到 HTML 文档中。其中一些元素在第十五章的中有所描述，其他的将在本书的后面部分介绍。

未实现的元素

有两个元素目前没有浏览器实现，并且在 HTML5 规范中只是模糊地描述。这些元素是command和menu。在高层次上，它们旨在简化菜单和用户界面元素的操作，但我无法在本书中提供任何详细信息。我希望浏览器的后续版本将开始对这些元素的含义形成事实上的共识。

总结

在本章中，我为后面章节中出现的 HTML5 元素的详细描述提供了一些上下文。我还提供了一个快速参考，以便您在将来需要刷新记忆时可以找到某个元素的描述。当您开始学习 HTML 中的元素和属性时，您应该记得我在本章开始时提供的核心建议:尽可能使用最具体的元素，不要误用元素，并且在您的文档中和整个 web 站点或 web 应用中一致地使用元素。

七、创建 HTML 文档

在这一章中，你将看到 HTML5 定义的最基本的元素:文档和元数据元素。这些是您用来创建 HTML 文档和描述其内容的元素。

这些是 HTML 定义的最不有趣的元素，然而它们却至关重要。无论如何，请随意跳过这一章，稍后再回来——但请务必回来。每个 HTML 文档都至少使用这些元素中的一些(通常是全部)，知道如何正确使用它们对于创建符合标准的 HTML5 文档来说至关重要。表 7-1 对本章进行了总结。

设置基本文档结构

让我们从文档元素开始。这些是定义 HTML 文档形状并为浏览器设置初始上下文的构件。只有四个文档元素，但是它们在任何 HTML 文档中都是必需的。

doctype 元素

元素是独一无二的，自成一类。您需要用一个doctype元素开始您创建的每个 HTML 文档；这是告诉浏览器它将处理 HTML 的元素。如果你省略了doctype元素，大多数浏览器仍然可以正确显示你的内容，但是依赖浏览器的这种行为是一种不好的做法。表 7-2 总结了doctype要素。

在 HTML5 中只有一种方法可以使用doctype元素，如清单 7-1 所示。在学习本章的过程中，您将应用每个元素来创建一个简单但完整的 HTML5 文档。清单 7-1 显示了第一行。

清单 7-1。使用 doctype 元素

<!DOCTYPE HTML>

这个元素告诉浏览器两件事:它正在处理 HTML，内容是用哪个版本的 HTML 规范注释的。您不必提供版本号。浏览器将自动检测到您正在使用 HTML5(这是因为这个元素在 HTML5 中的形式与早期的 HTML 版本略有不同)。此元素没有结束标记。您只需在文档的开头放置一个标签。

html 元素

html元素，更恰当地称为根元素，表示文档中 HTML 的开始。表 7-3 总结了html要素。

html元素表示文档中 HTML 标记的开始。清单 7-2 显示了使用中的html元素。

清单 7-2。使用 html 元素

<!DOCTYPE HTML> **<html>** *   …content and elements omitted…* **</html>**

头部元素

head元素包含文档的元数据。在 HTML 中，元数据为浏览器提供关于文档中的内容和标记的信息，但也可以包括脚本和对外部资源的引用(如 CSS 样式表)。您将在本章后面看到元数据元素。表 7-4 总结了head要素。

清单 7-3 显示了使用中的head元素。每个 HTML 文档应该包含一个head元素，反过来，它必须包含一个title元素，如清单所示。title元素的全部细节将在本章的后面给出。

清单 7-3。使用头部元件

`

身体元素

元素封装了 HTML 文档的内容，而元素封装了元数据和文档信息。body元素总是跟在head元素后面，所以它是html元素的第二个子元素。表 7-5 描述了body元素。

清单 7-4 显示了使用中的body元素。

清单 7-4。使用主体元素

`

            I like apples and oranges.         

我给body元素添加了一些简单的内容。我使用的单个元素(p、code和a)在第八章和第九章中有描述。您已经拥有了一个简单但完整的 HTML 文档。你可以在图 7-1 中看到浏览器如何显示该文档。

图 7-1。在浏览器中显示一个简单的 HTML 文档

用元数据元素描述文档

元数据元素允许您提供关于 HTML 文档的信息。它们本身并不满足，但是它们提供了关于随后内容的信息。元数据元素被添加到head元素中。

设置文档标题

元素设置文档的标题或名称。浏览器通常在浏览器窗口或选项卡的顶部显示该元素的内容。表 7-6 描述了title元素。

每个 HTML 文档应该只有一个title元素，由开始和结束标签包围的文本应该对用户有意义。至少，它应该允许用户区分浏览器标签或窗口，并识别它们属于你的 web 应用。清单 7-5 显示了使用中的head元素。

清单 7-5。使用头部元件

`

            I like apples and oranges.         

你可以在图 7-2 中看到浏览器处理head元素的方式。图中显示的是谷歌浏览器，但其他浏览器做的事情大体相似。

图 7-2。使用标题元素的效果

设置相对 URL 的基础

元素设置了一个基本 URL，包含在 HTML 文档中的相对链接将根据这个 URL 进行解析。相对链接是一种省略了 URL 的协议、主机和端口部分的链接，并根据其他 URL 进行评估——或者是由base元素指定的 URL，或者是用于加载当前文档的 URL。base元素还指定了当用户点击链接时链接是如何打开的，以及表单提交后浏览器的行为(我在第十二章中解释了 HTML5 表单)。表 7-7 总结了base要素。

一个 HTML 文档应该最多包含一个base元素。它通常是放置在head元素中的第一个元素。这确保了基本 URL 应用于后续元数据元素中使用的相对 URL。

使用 href 属性

href属性指定了基本 URL，文档其余部分的相对 URL 将根据该基本 URL 进行解析。清单 7-6 显示了使用中的base元素。

清单 7-6。在基本元素中使用 href 属性

`

            I like apples and oranges.         

在这个例子中，我将基本 URL 设置为[titan/listings/](http://titan/listings/)。Titan是我的开发服务器的名称，listings是服务器上包含本书示例的目录。

在文档的后面，我添加了一个a元素来创建一个使用相对 URL page2.html的超链接(我在第八章中解释了如何使用a元素)。当用户点击超链接时，浏览器组合基本 URL 和相对 URL 以创建组合 URL [titan/listings/page2.html](http://titan/listings/page2.html)。

提示如果您不使用base元素，或者使用href属性指定一个基本 URL，那么浏览器将认为它应该根据当前文档的 URL 解析任何相对链接。因此，举例来说，如果你从 URL [myserver.com/app/mypage.html](http://myserver.com/app/mypage.html)加载一个文档，它包含一个相对 URL 为myotherpage.html的超链接，那么浏览器将尝试从完全合格的 URL [myserver.com/app/myotherpage.html](http://myserver.com/app/myotherpage.html)加载第二个页面。

使用目标属性

属性告诉浏览器如何打开 URL。您为该属性指定的值代表一个浏览上下文。当你查看a和iframe元素时，你会在第八章和第十五章看到这些上下文的一些例子以及如何使用它们。

使用元数据描述文档

元素允许您在文档中定义不同种类的元数据。您可以以多种不同的方式使用这个元素，一个 HTML 文档可以包含多个meta元素。表 7-8 提供了meta要素的汇总。

在接下来的小节中，我将向您展示使用meta元素的不同方式。注意，meta元素的每个实例只能用于其中一个目的。如果您想要利用这些特性中的一个以上的特性，您必须向head元素添加多个meta元素。

指定名称/值元数据对

meta元素的第一个用途是在名称/值对中定义元数据，为此使用了name和content属性。清单 7-7 提供了一个演示。

清单 7-7。使用 meta 元素在名称/值对中定义元数据

`

            I like apples and oranges.         

使用name属性指定元素引用的元数据类型，使用content属性提供一个值。表 7-9 列出了可用于meta元素的预定义元数据类型。

除了五个预定义的元数据名称，您还可以使用元数据扩展。转到[wiki.whatwg.org/wiki/MetaExtensions](http://wiki.whatwg.org/wiki/MetaExtensions)查看这些扩展的列表，它们会随着时间的推移而变化。其中一些扩展被广泛使用，而另一些则相当专业，几乎不使用。robots元数据类型是广泛使用的扩展的一个例子。它允许 HTML 文档的作者指定搜索引擎应该如何处理该文档。例如:

<meta name="robots" content="noindex">

大多数搜索引擎会识别的三个值是noindex(不索引该页面)noarchive(不创建该页面的存档或缓存版本)nofollow(不跟踪该页面的链接)。还有更多可用的元数据扩展，我建议您通读在线列表，看看哪些适合您的项目。

提示过去，keywords元数据是告诉搜索引擎应该如何对你的内容进行分类和排名的主要方式。如今，搜索引擎对keywords元数据的关注要少得多，因为它可能会被滥用，给人一种页面相关性和内容的错觉。改善搜索引擎考虑你内容的方式的最好方法是采纳搜索引擎自己的建议——大多数搜索引擎为优化你的页面或整个网站提供指导。你可以在[google.com/support/webmasters/bin/topic.py?topic=15260](http://google.com/support/webmasters/bin/topic.py?topic=15260)找到谷歌的指南。

声明字符编码

元素的另一个用途是声明 HTML 文档内容使用的字符编码。清单 7-8 中显示了一个这样的例子。

清单 7-8。使用 meta 元素声明一个字符编码

`

            I like apples and oranges.         

在这种情况下，我已经指定我的页面使用UTF-8编码。UTF-8 是一种常见的字符编码，因为它可以用最少的字节数表示所有的 Unicode 字符。(当我写这篇文章时，大约 50%的网页使用 UTF-8 编码。)

模拟一个 HTTP 头

元素的最后一个用途是覆盖一个 HTTP(超文本传输协议)头的值。HTTP 通常用于在服务器和浏览器之间传输 HTML 数据。我不打算进一步描述 HTTP，只想说来自服务器的每个响应都包含一系列向浏览器描述内容的头，您可以使用meta元素来模拟或替换其中的三个头。清单 7-9 显示了meta元素这种用法的一般形式。

清单 7-9。使用 meta 元素模拟 HTTP 头

`

            I like apples and oranges.         

您使用http-equiv属性来指定您想要模拟的标题，使用content属性来提供您想要使用的值。在本例中，我指定了refresh标题和一个值5，其效果是要求浏览器每五秒钟重新加载一次页面。

提示如果在刷新间隔后加上分号和 URL，浏览器会在间隔过后加载指定的 URL。有关示例，请参见“noscript 元素”一节。

http-equiv属性有三个允许的值，我在表 7-10 中描述了这些值。

定义 CSS 样式

style元素允许您在 HTML 文档中内联定义 CSS 样式(与link元素相反，后者允许您从外部样式表导入样式)。表 7-11 总结了style要素。

清单 7-10 给出了一个使用中的style元素的例子。

清单 7-10。使用样式元素

`

            I like apples and oranges.         

在这个例子中，我为a元素创建了一个新的样式。它用灰色背景、白色文本和一些填充来显示链接。(如果你是 CSS 新手，可以在第四章获得快速入门，全面覆盖从第十六章开始。)你可以在图 7-3 中看到这种风格的效果。

图 7-3。使用样式元素创建内联样式

您可以在整个 HTML 文档中使用style元素，一个文档可以包含多个style元素。这意味着你不必在head部分定义你所有的风格。如果您通过模板引擎生成页面，这将非常有用，因为这意味着您可以用特定于特定页面的样式来补充模板定义的样式。

指定样式类型

属性让你告诉浏览器你要定义什么样的样式；但是浏览器支持的唯一样式机制是 CSS，所以这个属性的值永远是text/css。

指定样式的范围

如果样式元素中存在scoped属性，那么样式只应用于元素的父元素和父元素的子元素。如果没有scoped属性，HTML 文档中任何地方定义的样式都会应用到文档中的所有元素。

注意当我写这篇文章时，没有一个主流浏览器支持样式的scoped属性。

指定样式的媒体

media属性允许您指定何时将样式应用于文档。清单 7-11 给出了一个如何使用这个属性的例子。

清单 7-11。使用样式元素的媒体属性

`

            I like apples and oranges.         

在清单中，我定义了两个style元素，它们对于media属性有不同的值。当 HTML 在屏幕上显示时，浏览器将应用第一种样式，当页面被打印时，应用第二种样式。

您可以创建非常具体的条件来使用样式。首先，您可以指定您感兴趣的设备。我在表 7-12 中总结了支持的值。

浏览器解释设备属于哪个类别。浏览器一致地处理一些设备类型(比如screen和print，但是其他设备(比如handheld设备类型)可能会得到更自由的解释。检查您的目标浏览器对特定设备的解释是否与您相同是值得的。使用media功能可以让您更加具体。清单 7-12 提供了一个例子。

清单 7-12。向样式元素添加特异性

`

            I like apples and oranges.         

在这个清单中，我使用了width特性来区分两种风格。当浏览器窗口窄于 500 像素时，将使用第一个选项；当窗口宽于 500 像素时，将使用第二个选项。如果你在浏览器中显示来自清单 7-12 的 HTML，然后拖动窗口改变其大小，你可以看到这个特性的效果，如图图 7-4 所示。

图 7-4。根据浏览器窗口宽度应用不同的样式

注意我是如何使用AND将一个设备与一个特性结合起来的。除了AND，还可以用NOT，或者逗号(,来表示或。这允许您创建应用样式的复杂且非常具体的条件。

你通常使用带有min和max修饰符的width来使它们更加灵活；尽管您可以通过省略特定的窗口条件来应用样式。我已经在表 7-13 中列出并描述了可用的特性及其修饰符。除非另有说明，您可以使用min-或max-来修改这些特性，以创建阈值而不是特定值。

与设备一样，每个功能的解释留给浏览器，并且在识别哪些功能以及何时认为这些功能是存在的和可用的方面可能存在变化。如果您依赖这些特性来应用样式，那么您应该进行彻底的测试，并定义一个在预期的特性不可用时将应用的备用样式。

表示外部资源

元素在 HTML 文档和外部资源(通常是 CSS 样式表)之间创建一个关系。表 7-14 总结了link要素。

元素定义了六个局部属性，我在表 7-15 中总结了这些属性。这些属性中最重要的是rel，它定义了 HTML 页面和与link项相关的资源之间关系的本质。我将很快向你展示一些最常见的关系类型。

分配给rel属性的值决定了浏览器如何处理link元素。表 7-16 显示了rel属性的一些更常见的值，并对它们进行了描述。定义了额外的rel值，但这仍然是 HTML5 的一个易变区域。你可以在[iana.org/assignments/link-relations/link-relations.xml](http://iana.org/assignments/link-relations/link-relations.xml)找到rel价值观最完整的定义。

加载样式表

为了以这种方式演示link元素，我创建了一个名为styles.css的样式表，其内容如清单 7-13 所示。

清单 7-13。styles.css 文件

a {     background-color: grey;     color: white;     padding: 0.5em; }

这是以前使用style元素应用的 CSS 样式，但是放在外部样式表中。为了利用这个样式表，使用link元素，如清单 7-14 所示。

清单 7-14。将 link 元素用于外部样式表

`

            I like apples and oranges.         

您可以使用多个link元素来加载多个外部资源。使用外部样式表的优点是可以在多个文档中使用一组样式，而不必复制样式。浏览器加载并应用样式，就像你在style元素中设置 CSS 属性一样，如图图 7-5 所示。

图 7-5。应用通过外部样式表获得的样式

为你的页面定义一个 Favicon

在 CSS 样式表之后，link元素最常见的用途是定义一个与页面相关联的图标。不同的浏览器以不同的方式处理图标，但通常图标出现在页面选项卡上，并且当用户将您的页面添加到收藏夹列表时。为了演示这一点，我采用了 Apress 在[www.apress.com](http://www.apress.com)使用的 favicon。这是一个 32 像素乘 32 像素的图像文件，格式为.ico。浏览器普遍支持这种格式。你可以在图 7-6 中看到这个图像。图像文件是favicon.ico。

图 7-6。进展图标

然后你可以通过添加一个链接元素到你的页面来使用这个图标，如清单 7-15 所示。

清单 7-15。使用链接元素添加图标

`

            I like apples and oranges.         

当加载 HTML 页面时，浏览器会加载并显示 favicon，如图图 7-7 所示。该图显示了 Google Chrome，它在页面选项卡的顶部显示了 favicon。

图 7-7。浏览器标签顶部显示的收藏夹图标

提示如果 favicon 位于/favicon.ico(即在 web 服务器的根目录中)，则不必使用 link 元素。大多数浏览器会在页面加载时自动请求这个文件，即使没有出现link元素。

抢先获取资源

您可以要求浏览器抢先获取您预计很快就会需要的资源。清单 7-16 展示了使用link元素来指定预取。

清单 7-16。预取链接资源

`

            I like apples and oranges.         

我已经将rel属性设置为prefetch，并指定加载一个 HTML 页面page2.html，期望用户点击一个链接来执行一些需要这个页面的其他操作。

注意在编写的时候，只有 Firefox 支持link预取。

使用脚本元素

有两个脚本元素。第一个是script，允许您定义脚本并控制它们的执行。第二个是noscript，允许您定义当浏览器不支持脚本或者禁用脚本时会发生什么。

提示你通常在head元素中使用script元素，但是你也可以在 HTML 文档的任何地方使用它。我建议将所有脚本元素放在文档的head部分，因为这样更容易跟踪，而且大多数人希望在那里找到脚本定义。

脚本元素

script元素允许您在页面中包含脚本，可以在文档中内联定义，也可以引用外部文件。最常用的脚本类型是 JavaScript——这也是我将关注的类型——但是浏览器确实支持其他脚本语言，包括我在第一章 中描述的浏览器战争的一些残余，表 7-17 描述了script元素。您为每个需要定义或导入的脚本使用一个script元素。

该元素的类型根据其使用位置而有所不同。在head元素中定义的script元素是元数据，但是在其他元素(如body或section)中定义的script元素是语法元素。

在接下来的几节中，我将向您展示如何使用script元素来实现不同的效果。表 7-18 描述了script元素定义的属性。

定义内联脚本

定义脚本最简单的方法是内联。这意味着您在 HTML 页面中包含 JavaScript 语句。清单 7-17 提供了一个演示。

清单 7-17。定义内联脚本

`

            I like apples and oranges.         

如果不使用type属性，浏览器会认为你使用的是 JavaScript。这个简单的脚本向 HTML 文档添加了一些文本。默认情况下，一旦在页面中遇到脚本，就会立即执行。你可以在图 7-8 的中看到这样的效果，其中脚本的文本出现在浏览器窗口中，在body中包含的p元素之前。

图 7-8。一个简单脚本的效果

加载外部脚本库

您可以将脚本分成单独的文件，并使用script元素加载它们。这些文件可以很简单(比如下面的演示)，也可以很复杂(比如复杂的库，比如 jQuery)。为了演示一个外部脚本，我创建了一个名为simple.js的文件，其内容如清单 7-18 所示。

清单 7-18。simple.js 脚本文件的内容

document.write("This is from the external script");

该文件包含一条语句，类似于我在内联脚本中使用的语句。清单 7-19 展示了如何使用script元素中的src属性来引用这个文件。

提示如果脚本元素使用了src属性，那么它必须为空。您不能使用同一个 script 元素来定义内联脚本和外部脚本。

清单 7-19。使用 src 属性加载外部脚本

`

            I like apples and oranges.         

src属性的值是您想要加载的脚本文件的 URL。我在与 HTML 文件相同的目录中创建了simple.js文件，所以在这个例子中我可以使用相对 URL。你可以在图 7-9 中看到脚本的效果。

图 7-9。外部脚本的效果

提示注意，我为script元素添加了一个结束标签，尽管该元素没有内容。如果在引用外部脚本时使用自结束标记，浏览器将忽略该元素，并且不加载文件。

推迟脚本的执行

您可以通过使用async和defer属性对脚本的执行进行一些控制。defer属性告诉浏览器在页面被加载和解析之前不要执行脚本。为了理解defer属性可以提供的好处，您需要看看它所解决的问题。清单 7-20 显示了simple2.js脚本文件的内容，该文件包含一条语句。

清单 7-20。simple2.js 脚本文件中包含的语句

document.getElementById("applecode").innerText = "cherries";

我将在本书的第四部分中分解这个语句的各个部分，但是现在只要知道当这个脚本运行时，它将找到一个具有applecode的id属性值的元素，并将该元素的内部文本更改为cherries就足够了。清单 7-21 显示了一个使用script元素引用脚本文件的 HTML 文档。

清单 7-21。引用脚本文件

`

            I like apples and oranges.         

当你加载前面的 HTML 页面时，你没有得到想要的结果，如图图 7-10 所示。

图 7-10。一个脚本计时问题

浏览器在遇到script元素时的默认行为是停止处理 HTML 文档，加载脚本文件，并执行其内容。只有在脚本执行完成后，浏览器才继续解析 HTML。这意味着浏览器在解析 HTML 的其余部分并发现code元素之前，加载并执行了simple2.js中的语句。脚本没有找到它正在寻找的元素，因此没有应用任何更改。脚本完成后，浏览器继续解析 HTML，并找到code元素。但是，到那时对脚本来说已经太晚了，它不会再次执行。解决这个问题的一个显而易见的方法是将script元素放在文档的末尾，如清单 7-22 所示。

清单 7-22。通过移动脚本元素解决脚本计时问题

`

            I like apples and oranges.         

这种方法考虑了浏览器响应script元素的方式，确保在脚本感兴趣的元素被解析之前，脚本不会被加载和执行。正如你在图 7-11 中看到的，你从脚本中得到了你想要的结果。

图 7-11。脚本的效果，应用于一个 a 元素

这种方法非常有效，但是在 HTML5 中，您可以通过使用defer属性达到同样的效果。当浏览器遇到包含defer属性的script元素时，它会推迟加载和执行脚本，直到 HTML 文档中的所有元素都被解析完。清单 7-23 显示了一个使用了defer元素的script元素。

清单 7-23。使用具有 defer 属性的脚本元素

`

            I like apples and oranges.         

将该页面加载到浏览器中的效果与将script元素移动到页面末尾的效果相同。该脚本能够定位code元素并改变文本内容，产生与你在图 7-11 中看到的相同效果。

提示您只能在外部脚本文件上使用defer属性。它不适用于内联脚本。

异步执行脚本

您可以使用async属性解决一个不同的问题。正如我前面提到的，当遇到一个script元素时，默认的浏览器行为是在加载和执行脚本时停止处理页面。每个脚本元素被同步执行(即，当脚本被加载和运行时，没有其他事情发生)并且依次执行(即，按照它们被定义的顺序)。

同步和顺序执行作为处理脚本的默认方式是有意义的，但是有些脚本并不需要这样做，您可以通过使用async属性来提高性能。跟踪脚本就是一个很好的例子。例如，这种类型的脚本可以报告您访问了哪些网站，以便广告商可以根据您的浏览习惯来描述和锁定您，或者它可以收集访问者统计数据以进行网站分析。这种脚本是自包含的，并且倾向于不与 HTML 文档中的元素交互。在等待这种脚本加载并向服务器报告时，延迟页面的呈现是没有任何意义的。

当您使用async属性时，浏览器异步加载并执行脚本，同时继续解析 HTML 中的其他元素，包括其他script元素。对于正确的脚本，这可以显著提高整体负载性能。清单 7-24 显示了应用于script元素的async属性。

清单 7-24。使用异步元素

`

            I like apples and oranges.         

使用async属性的一个重要影响是，页面中的脚本可能不会按照定义的顺序执行。这使得async特性不适合依赖于其他脚本定义的函数或值的脚本。

noscript 元素

noscript元素允许您向禁用 JavaScript 的用户或使用不支持 JavaScript 的浏览器的用户显示内容。表 7-19 总结了noscript要素。

与script元素一样，noscript元素的类型取决于它在文档中的位置。

尽管目前 JavaScript 支持很普遍，但仍有一些专门的浏览器不支持它。即使浏览器实现了 JavaScript，用户也可以禁用它——许多大公司对他们的计算机用户强制执行无 JavaScript 规则。noscript元素允许您通过显示不需要 JavaScript 就能操作的内容来处理这些用户，或者至少说明他们不能使用您的站点或页面，除非他们启用了 JavaScript。清单 7-25 显示了为显示一条简单消息而设置的noscript元素。

清单 7-25。使用 noscript 元素

`

Javascript is required!

You cannot use this page without Javascript

            I like apples and oranges.         

你可以在图 7-12 的中看到noscript元素的效果。为了达到这个效果，我禁用了 Google Chrome 中的 JavaScript 支持，并加载了清单中的 HTML。

图 7-12。noscript 元素的效果

请注意，页面的其余部分照常处理，内容元素仍然显示。

提示你可以向一个页面添加多个noscript元素，使它们对应于需要脚本的各个功能区域。这种方法对于提供不依赖于 JavaScript 的回退标记最有用。

另一种方法是，如果不支持 JavaScript，将用户的浏览器重定向到不同的 URL。你可以通过在noscript元素中放置一个meta元素来实现，如清单 7-26 所示。

清单 7-26。使用 noscript 元素重定向用户的浏览器

`

            I like apples and oranges.         

当不支持 JavaScript 或禁用了 JavaScript 的浏览器试图加载该页面时，这会将用户重定向到[www.apress.com](http://www.apress.com)站点。

总结

在本章中，我已经向您介绍了文档和元数据元素。这些不是 HTML5 定义的最动态、最令人兴奋的元素，但是它们非常重要。理解如何定义 HTML 文档的核心构建块对于获得最佳结果至关重要——尤其是当涉及到用script元素控制脚本执行以及用style和link元素管理样式等方面时。

八、标记文本

我们将从大的结构化文档元素切换到更细粒度的元素:文本级元素(为简洁起见，为文本元素)。当你把这些元素添加到你的文本中，你就增加了结构和意义。当你学习本章中的例子时，这一点会变得很明显。

HTML5 规范明确指出，您应该只根据元素的语义值来使用元素。然而，为了使生活更容易，规范也清楚地表明，与这些元素相关的传统样式是某些元素语义的一部分。这有点瞎扯，但有助于保持与旧 HTML 版本的兼容性。

其中一些元素有非常具体的含义。例如，cite元素仅用于引用另一部作品的标题，如一本书或一部电影。然而，许多其他元素更加模糊，尽管 HTML5 标准的意图是，本质上与表示有关。

我的建议是采取务实的方法。首先，使用特定于任务的元素(如果有的话)。第二，考虑避免那些以前只是表示性的元素，以及那些在回顾中应用了语义的元素——比如b元素——并使用 CSS 来管理表示。最后，不管你选择使用哪种元素，都要在你的 HTML 中一致地使用它们。表 8-1 对本章进行了总结。

创建超链接

超链接是 HTML 中的一项重要功能，它为用户在同一文档内和跨页面浏览内容提供了基础。您使用a元素创建超链接，这在表 8-2 中进行了总结。

a元素定义了六个局部属性，如表 8-3 所述。这些属性中最重要的是href，您将在本节的后面看到。

创建外部超链接

通过将href属性设置为以http://开头的 URL，可以创建指向其他 HTML 文档的超链接。当用户点击超链接时，浏览器将加载指定的页面。清单 8-1 显示了用于链接外部内容的a元素。

清单 8-1。使用 a 元素链接到外部资源

`

在这个例子中，我创建了两个链接到维基百科文章的a元素。单击任一链接都会加载适当的文章并显示给用户。你可以在图 8-1 中看到超链接的默认样式约定。

图 8-1。超链接的默认外观

不是所有的 URL 都必须指向其他网页。虽然http协议是最广泛使用的 URL 形式，但浏览器也支持其他协议，如https和ftp。如果要引用电子邮件地址，可以使用mailto协议；例如，mailto:adam@mydomain.com。

提示您可以使用a元素创建基于图像的超链接(用户点击图像而不是文本来跟随超链接)。这需要使用img元素。你可以在第十五章中找到img元素的细节和一个基于图像的超链接的演示。

创建相对 URL

如果href属性的值不是以一个可识别的协议开始的，比如http://s，那么浏览器会将超链接视为一个相对引用。默认情况下，这意味着浏览器假定目标资源与当前文档位于同一位置。清单 8-2 给出了一个相对 URL 的例子。

清单 8-2。在超链接中使用相对 URL

`

在这个例子中，我已经将属性href的值设置为fruitlist.html。当用户单击链接时，浏览器使用当前文档的 URL 来确定如何加载链接的页面。以为例，如果当前文档是从[www.mydomain.com/docs/exampl…](http://www.mydomain.com/docs/example.html)加载的，那么浏览器将从[www.mydomain.com/doc.fruitli…](http://www.mydomain.com/doc.fruitlist.html)加载目标页面。

提示你可以覆盖这个默认行为，通过base元素提供一个可选的基本 URL，我在第七章中描述过。

创建内部超链接

您可以创建超链接，将另一个元素显示在浏览器窗口中。你可以使用 CSS 样式的 ID 选择器#<id>来完成，如清单 8-3 中的所示。

清单 8-3。创建内部超链接

`

        <p id="fruits">             I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.         

我已经用#fruits的href值创建了一个超链接。当用户单击链接时，浏览器将在文档中查找一个元素，该元素的id属性的值为fruits。如果元素在屏幕上不可见，浏览器将滚动文档使其可见。

提示如果浏览器找不到具有所需id属性值的元素，就会再次搜索，寻找与目标匹配的name属性。

以浏览上下文为目标

属性让你告诉浏览器你想要链接的资源显示在哪里。默认情况下，浏览器使用显示当前文档的窗口、选项卡或框架，这意味着新文档将替换现有文档。然而，你还有其他选择。表 8-4 描述了target属性支持的值。

这些值中的每一个都代表一个浏览上下文。_blank和_self值是不言而喻的；其他的与框架的使用有关，我会在第十五章中解释。

用基本文本元素注释内容

您将看到的第一组文本元素已经在 HTML 中出现了一段时间。其中一些元素在过去代表文本格式，但是随着 HTML 的发展，表示从更广泛的语义中分离出来意味着它们现在有了更广泛的意义。

表示关键词和产品名称

元素用于偏移一段文本，但不表示任何额外的强调或重要性。HTML5 规范中给出的例子是文档摘要中的关键字和评论中的产品名称。表 8-5 描述了b元素。

b元素非常简单:包含在开始和结束标签之间的内容从周围的内容偏移。您通常会用粗体显示内容，但是您可以使用 CSS 来改变应用于b元素的样式。清单 8-4 展示了使用中的b元素。

清单 8-4。使用 b 元素

`

你可以在图 8-2 的中看到b元素的默认样式约定。

图 8-2。使用 b 元素

添加强调

元素代表一段带有强调重音的文本。你可以用它来给读者一种关于句子或段落意思的背景。我将按照描述em元素的表 8-6 向您展示这意味着什么。

清单 8-5。使用 em 元素

`

该元素的样式惯例是使用斜体，如图 8-3 中的所示。

图 8-3。使用 em 元素

在这个例子中，我把重音放在句子开头的 I 上。当考虑em元素时，大声朗读句子并考虑句子可能回答的问题会有所帮助。比如，想象一下，我问:“谁喜欢苹果和橘子？”你的回答会是，“我喜欢苹果和橘子。”(当你大声朗读并把重点放在 I 上时，你就是在表明你是喜欢这些水果的人。)

但如果我问:“你喜欢苹果，还喜欢什么？”你可能会回答:“我喜欢苹果和橙子。“在这种情况下，你的重点应该放在最后一个词上，强调橙子是你喜欢的另一种水果。您可以用 HTML 来表示这种变化，如下所示:

I like apples and **<em>**oranges**</em>**.

表示外国或技术术语

i元素表示与周围内容性质不同的文本范围。这是一个相当宽松的定义，但常见的例子包括来自其他语言的单词，一个技术或科学术语，甚至一个人的思想(相对于语音)。表 8-7 描述了i元素。

清单 8-6 展示了使用中的i元素。

清单 8-6。使用 I 元素

`

你可以在图 8-4 中看到i元素的效果。注意，i元素的样式约定与em元素的相同。这是一个很好的例子，说明了一个元素的含义与其外观是如何不同的。

图 8-4。使用 I 元素

显示错误或改正

使用s元素来表示不再正确或准确的文本范围。样式约定是用一条穿过文本的线来显示文本。表 8-8 描述了s元素。

清单 8-7 展示了使用中的s元素。

清单 8-7。使用 s 元素

`

你可以在图 8-5 中看到s元素的默认样式约定。

图 8-5。使用 s 元素

表示重要的文本

元素表示一段重要的文本。表 8-9 描述了该元素。

清单 8-8 展示了使用中的strong元素。

清单 8-8。使用强力元素

`

我已经从前面的例子中删除了一些文本，使清单更容易阅读。你可以在图 8-6 中看到strong元素的默认样式约定。strong元素和b元素有相同的样式约定。然而，在标记你的内容时，选择正确的元素是很重要的；注意，b元素并没有赋予它所包含的文本任何重要性。

图 8-6。使用强力元素

给文本加下划线

u元素从周围的内容中偏移一段文本，但并不意味着增加任何重要性或强调。这是一个模糊的描述，因为u元素以前只具有表示上的影响(给文本加下划线)而没有真正的语义意义。实际上，这仍然是一个表示元素，它的效果是给文本加下划线(虽然您可以使用 CSS 来改变这种行为，但我不建议以这种方式改变元素的用途；看看如何使用span元素)。表 8-10 总结了u要素。

u元素的样式约定类似于a元素的样式约定，这意味着用户经常会将带下划线的文本误认为是超链接。为了防止这种混淆，尽可能避免使用u元素。清单 8-9 显示了使用中的u元素。

清单 8-9。使用 u 元素

`

您可以在图 8-7 中看到浏览器如何使用默认样式惯例显示该元素。

图 8-7。使用 u 元素

添加小字

small元素表示细则，通常用于免责声明和澄清。表 8-11 总结了small要素。

清单 8-10 展示了使用中的small元素。

清单 8-10。使用小元素

`

你可以在图 8-8 中看到浏览器是如何应用默认样式约定的。

图 8-8。使用小元素

添加上标和下标

使用sub和sup元素分别表示下标和上标。在一些语言中需要上标，并且在简单的数学表达式中使用上标和下标。表 8-12 总结了这些要素。

清单 8-11 显示了使用中的sub和sup元素。

清单 8-11。使用 sub 和 sup 元素

`

你可以在图 8-9 中看到浏览器是如何应用默认样式约定的。

图 8-9。使用 sub 和 sup 元素

创建休息

有两个元素可以用来处理内容中的换行符:br和wbr元素。

强制换行

元素引入了一个换行符。样式约定是将后续内容移到新的一行。表 8-13 总结了br要素。

清单 8-12 显示了使用中的br元素。

注意br元素只能在换行符是内容的一部分时使用，如清单 8-12 中的所示。不得使用br元素创建段落或其他内容分组；我在第九章和第十章中描述了这项任务的其他要素。

清单 8-12。使用 br 元素

`

在图 8-10 中，你可以看到br元素的使用是如何使浏览器显示内容的。

图 8-10。使用 br 元素

表示安全分割线的机会

wbr元素是 HTML5 中的新元素，它指示浏览器可以在何处插入换行符来换行大于当前浏览器窗口的内容。是浏览器决定是否实际使用了换行符。wbr元素只是一个合适位置的指南。表 8-14 总结了wbr元素。

*

清单 8-13 展示了使用wbr元素来帮助浏览器显示一个长单词。

清单 8-13。使用 wbr 元素

`

要理解wbr元素的价值，您必须了解浏览器在使用和不使用该元素的情况下是如何操作的。图 8-11 显示了当wbr元素不存在时，浏览器如何处理内容。

图 8-11。不带 wbr 元素的包装内容

如果没有wbr元素，浏览器会遇到长单词，并将其视为一个单元。这意味着你在第一行文字的末尾浪费了大量的空间。如果你添加了wbr元素，如清单 8-13 所示，那么你给了浏览器更多的选项，如图 8-12 所示。

图 8-12。用 wbr 元素包装内容

使用wbr元素，浏览器能够将很长的单词视为一系列更小的片段，并且能够更优雅地包装内容。当您使用wbr元素时，您是在告诉浏览器在哪里断开一个单词最合适。

代表输入和输出

有四个元素暴露了 HTML 令人讨厌的起源。您使用这些元素来表示计算机的输入和输出。表 8-15 总结了这些要素。这些元素都没有定义本地属性，也没有在 HTML5 中新增或更改。

清单 8-14 展示了文档中使用的这四个元素。

清单 8-14。使用代码、var、samp 和 kbd 元素

`

        **var fruits = ["apples", "oranges", "mangoes", "cherries"];
**             **document.writeln("I like " + fruits.length + " fruits");**         

The variable in this example is **fruits**

The output from the code is: **I like 4 fruits**

When prompted for my favorite fruit, I typed: **cherries**      `

你可以在图 8-13 中看到这些元素的默认样式约定。请注意，其中三个元素具有相同的样式约定。我已经使用了p元素来给内容添加一些结构(我在第九章中描述了p元素)。

图 8-13。使用代码、var、samp 和 kbd 元素

创建引用、引述、定义和缩写

接下来您将看到的四个元素允许您表示引用、引用、定义和缩写。这些在科学和学术文献中被广泛使用。

表示缩写

元素允许你表示一个缩写。当使用这个元素时，使用title属性来提供缩写代表的扩展文本。表 8-16 总结了这一要素。

清单 8-15 显示了使用中的abbr元素。

清单 8-15。使用缩写元素

`

abbr元素没有样式约定，因此该元素中包含的内容不会以任何方式偏移。

定义术语

dfn元素表示一个术语的定义实例。这是解释一个单词或短语的意义或重要性的例子。表 8-17 总结了这一要素。

关于如何使用dfn元素有一些规则。如果dfn元素有一个标题属性，那么title属性的值必须是被定义的术语。你可以在清单 8-16 中看到一个这样使用dfn元素的例子。

清单 8-16。使用 dfn 元素

`

            The apple is the pomaceous fruit of the apple tree,             species Malus domestica in the rose family.         

如果dfn元素包含一个abbr元素，那么缩写就是被定义的术语。如果没有title属性，并且元素的内容是文本，那么文本代表被定义的术语。没有与该元素相关联的样式约定，因此该元素的内容不会以任何方式偏移。

引用其他来源的内容

q元素表示从另一个来源引用的内容。表 8-18 总结了q要素。

上一节中苹果这个词的定义来自维基百科，应该正确归属。cite属性用于指定源文档的 URL，如清单 8-17 所示。

清单 8-17。使用 q 元素

`

            **The**             **apple is the pomaceous fruit of the apple tree,**             **species Malus domestica in the rose family.**         

这里，q元素的样式约定使用 CSS :before和:after伪元素选择器将引用的文本用引号括起来，如图 8-14 中的所示。你可以在第十七章和第十八章中了解伪元素选择器。

图 8-14。使用 q 元素

引用另一部作品的标题

cite元素表示被引用作品的标题，比如一本书、一篇文章、一部电影或一首诗。表 8-19 总结了cite要素。

清单 8-18 展示了cite元素的使用。

清单 8-18。使用引用元素

`

            The             apple is the pomaceous fruit of the apple tree,             species Malus domestica in the rose family.         

你可以在图 8-15 中看到默认样式约定的应用。

图 8-15。使用引用元素

使用语言元素

有五个 HTML 元素，其中四个是 HTML5 中的新元素，为使用非西方语言提供支持。以下部分描述了这些元素。

红宝石、rt 和 rp 元素

拼音字符是位于徽标语言(如中文或日文)中字符上方或右侧的符号，有助于读者正确发音。ruby元素表示包含红宝石的文本范围。表 8-20 总结了这一要素。

将ruby元素与rt和rp元素结合使用，这在 HTML5 中也是新的。rt元素标记 ruby 符号，rp元素表示注释周围的括号，可以由不支持 ruby 注释的浏览器显示。

我不会说任何标识语，这意味着我没有使用标识语创建示例的基础。在这一节中，我能做的最好的事情就是使用英文文本来演示浏览器是如何显示 ruby 注释的。清单 8-19 包含了这样一个注释。

清单 8-19。使用 ruby、rt 和 rp 元素

`

            The             apple is the pomaceous fruit of the apple tree,             species Malus domestica in the rose family.         

` `            Oranges are often made             into** OJ (Orange Juice)**         

当文档在支持 ruby 批注的浏览器中显示时，rp元素及其内容被忽略，rt元素的内容显示为批注，如图图 8-16 所示。

图 8-16。使用 ruby、rt 和 rp 元素

如果在不支持 ruby 注释的浏览器中显示文档，则会显示rp和rt元素的内容。在我写这一章的时候，Firefox 不支持 ruby 注释；你可以在图 8-17 中看到它将如何显示内容。

图 8-17。不支持注释的浏览器中的红宝石

bdo 元素

bdo元素为其内容指定了明确的文本方向，覆盖了通常应用的自动方向。表 8-21 总结了bdo要素。

您必须使用带有dir属性的bdo元素，该属性具有允许的值rtl(用于从右向左布局)和ltr(用于从左向右布局)。清单 8-20 显示了使用中的bdo元素。

清单 8-20。使用 bdo 元素

`

            This is left-to-right: **I like oranges**         

            This is right-to-left: **I like oranges**         

你可以在图 8-18 中看到浏览器如何显示该元素的内容。

图 8-18。使用 bdo 元素

BDI 元素

bdi元素表示出于文本方向性的目的而与其他内容隔离的文本范围。表 8-22 总结了这一要素。

当显示没有方向信息的内容时，可以使用此元素。发生这种情况时，浏览器会自动确定方向，这可能会打乱页面的格式。清单 8-21 给出了一个简单的例子。

清单 8-21。处理没有 bdi 元素的文本

`

        Here are some users and the fruit they purchased this week:

Adam: 3 applies and 2 oranges

: 2 apples

Joe: 6 apples

当您显示该文档时，阿拉伯名字会导致浏览器中的文本方向性算法在名字前而不是名字后显示数字2，如图 8-19 中的所示。

图 8-19。混合格式时双向文本算法的效果

你可以使用bdi元素来解决这个问题，如清单 8-22 中的所示。

清单 8-22。使用 bdi 元素

`

        Here are some users and the fruit they purchased this week:

Adam: 3 applies and 2 oranges

: 2 apples

Joe: 6 apples

你可以在图 8-20 中看到这个元素的矫正效果。

图 8-20。使用 bdi 元素

包装:其他文本元素

还有另外四个元素不能完全归入其他组。我将在下面的章节中描述它们。

表示内容的一般范围

元素本身没有任何意义。您可以使用它将一个全局属性应用到一个内容区域。表 8-23 总结了span要素。

清单 8-23 显示了与class属性一起使用的span元素，这样我就可以用 CSS 样式来定位内容。

清单 8-23。使用跨度元件

`

你可以在图 8-21 中看到样式的应用。

图 8-21。使用 span 元素定位样式

高亮显示文本

元素对于 HTML5 来说是新的，它代表了一段文本，这段文本由于在另一个上下文中的相关性而被突出显示。表 8-24 总结了mark要素。

清单 8-24 展示了mark元素。

清单 8-24。使用标记元素

`

        Homophones are words which are pronounced the same, but have different spellings         and meanings. For example:         

            I would like a pair of pears         

你可以在图 8-22 中看到样式约定。

图 8-22。使用标记元素

表示增加或删除的内容

您可以使用ins和del元素来表示文档中添加或删除的文本。ins元素表示插入的内容，汇总在表 8-25 中。

您使用del元素表示已从文档中删除的文本，该元素总结在表 8-26 中。

ins和del元素定义了相同的局部属性。cite属性指定了一个文档的 URL，该文档解释了为什么添加或删除文本，而datetime属性指定了修改的时间。你可以在清单 8-25 的中看到正在使用的ins和del元素。

清单 8-25。使用 del 和 ins 元素

`

        Homophones are words which are pronounced the same, but have different spellings         and meanings. For example:         

            I would like a pair of pears         

            I can sea the see             I can see the sea         

默认样式惯例如图 8-23 所示。

图 8-23。使用 ins 和 del 元素

表示时间和日期

您使用time元素来表示一天中的时间或日期。表 8-27 总结了time要素。

如果布尔型的pubdate属性存在，那么time元素被假定为整个 HTML 文档的出版日期或者最近的article元素(我在第十章中描述了article元素)。datetime属性以 RFC3339 指定的格式指定日期或时间，这可以在[tools.ietf.org/html/rfc3339](http://tools.ietf.org/html/rfc3339)找到。使用datetime属性意味着您可以在元素中以人类可读的形式指定日期，并且仍然确保计算机可以明确地解析日期或时间。清单 8-26 显示了使用中的time元素。

清单 8-26。使用时间元素

`

总结

在这一章中，我带你浏览了文本元素——那些你用来给你的内容赋予结构和意义的元素。这些元素从基本的到复杂的都有，您可以看到在 HTML5 中将意义从表示中分离出来的愿望和保持与 HTML4 兼容的愿望之间的矛盾。

请确保您选择的文本元素是基于它们的含义，而不是与它们相关联的默认样式约定。您可以以意想不到的方式将 CSS 样式应用于您的内容，如果您没有正确一致地标记您的内容，用户将会得到奇怪的结果。*

九、分组内容

在这一章中，我描述了可以用来将相关内容组合在一起的 HTML 元素，这将为文档中的内容增加更多的结构和意义。本章中的元素主要是流程元素。有一个例外:a元素，其元素类别的区别是由它包含的内容决定的。表 9-1 对本章进行了总结。

了解分组内容的需求

HTML 要求浏览器将多个空白字符折叠成一个空格。这通常是一个有用的特性，因为它将 HTML 文档的布局与浏览器窗口中的内容布局分开。清单 9-1 显示了比我迄今为止在示例中使用的内容块更长的内容。

清单 9-1。HTML 文档中较长的内容部分

`

        I like apples and oranges.

        I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.         You can see other fruits I like here.

        Warning: Eating too many oranges can give you heart burn.

        My favorite kind of orange is the mandarin, properly known             as citrus reticulata.         Oranges at my local store cost $1 each</s>$2 for 3.        

    var fruits = ["apples", "oranges", "mangoes", "cherries"];
    for (var i = 0; i < fruits.length; i++) {
        document.writeln("I like " + fruits[i]);
    }