HTML5 快速标记参考（二）

原文：HTML5 Quick Markup Reference

协议：CC BY-NC-SA 4.0

九、HTML5 组织：文档内容层次结构

让我们讨论一下允许开发者在 HTML5 设计中实现内容层次结构的标签，例如不同级别的文档内容，称为标题，使用六个不同级别的“h”标签，以及 DTP(桌面出版)工具，例如地址区域和水平规则，以可视方式划分内容。这些允许你把你的文档内容组织成逻辑的主题部分。它们也被搜索引擎用来索引基于文本的内容和对基于文本的内容进行 SEO 排名。

在本章中，我将介绍实现文档内容层次结构的主要标签，使用带有从

到

标签的标题，这些标签为开发人员提供了六个层次的内容细化。我还覆盖了

和

标签(水平标尺)。

标签允许你为你的文档定义章节。

标签定义了 HTML 文档内容的物理和虚拟(网站和电子邮件)地址。尽管这些标签是 HTML5 中的旧标签，但它们需要在本章中介绍。

HTML5 内容组织标签

本章涵盖了从第 2 版到所有 HTML 版本的文本内容组织功能。您将看到遗留的文本内容层次结构标签，以及开发人员如何使用这些标签定义基于文本的内容对用户和搜索引擎的重要性。

表 9-1 显示了 HTML5 之前支持的文本内容标题或组织标签(前七个标签)以及 HTML5 中也支持的两个桌面出版相关标签。这些允许您在 HTML 文档中定义水平标尺和地址区域。

表 9-1。

Eight HTML Content Organization Tags and Their Usage

| 组织标签 | 内容组织标签用法 | | --- | --- | | 氕 | 顶级标题(最重要的搜索引擎优化关键词) | | 氘 | 二级标题(第二 SEO 重要关键字) | | h3 | 第三级标题(最重要的搜索引擎优化关键字) | | h4 | 第四级标题(最重要的搜索引擎优化关键词) | | h5 | 第五层标题(最重要的搜索引擎优化关键字) | | h6 | 第 6 级标题(最重要的搜索引擎优化关键字) | | 整点 | 水平标尺内容分隔线 | | 地址 | 文章/文档的地址信息 |

让我们从 HTML“h”标签开始，按照这个表中的描述，分几个逻辑部分来看看。

标题级别标签:对内容进行逻辑分段

标题级别 1

到标题级别 6

标签允许六个级别的文档标题，它们可以像节(段落或段落集合)标题一样使用，或者更准确地说，级联主题节标题。搜索引擎算法使用标题来确定关键字和组织文本内容。范围从使用

和

定义的文档最重要的关键字(宽泛的笔划内容)到在

中定义的最不重要的关键字(具体的或定义明确的内容)。

这些应该用来对内容进行逻辑分层，深入到文本内容的组织中，这样用户就可以毫不费力地理解和吸收其含义。文本内容的组织使用标题级别作为如何精炼内容的指南。例如，您可能有一个文档，该文档从对异国情调汽车的更一般的讨论深入到对目前在北美销售的法拉利车型的讨论。

一个例子看起来像下面的 HTML 标记，它兼容所有版本的 HTML。它在每个段落标记中包含大量的文本内容，或者在六个 HTML 标题级别之间包含一组段落

标记。它通过使用摘要术语(就搜索引擎机器人而言，是关键字)来定义段落标签中的内容。

<!DOCTYPE html>
<html>
 <head>
  <title>Exotic Cars Example</title>
 </head>
 <body>
  <h1>Exotic Car Document</h1>
    <p>Top Level Keywords Relating to Exotic Cars from Every Nation</p>
  <h2>Exotic European Cars</h2>
    <p>Next Level Keywords Relating to Exotic Cars from European Union</p>
  <h3>Exotic European Sports Cars</h3>
    <p>Next Level Keywords Relating to Exotic European Sports Cars</p>
  <h4>Popular Exotic Italian Sports Cars (Ferrari and Lamborghini)</h4>
    <p>Next Level Keywords Relating to Exotic Italian Sports Cars</p>
  <h5>Currently Popular Ferrari Sports Cars</h5>
    <p>Next Level Keywords for Currently Popular Ferrari Sports Cars</p>
  <h6>Ferrari Sports Cars Available in North America (USA and Canada)</h6>
    <p>Next Level Keywords for Ferrari Sports Cars Available in America</p>
 </body>
</html>

对于这个标记示例，我简单地使用了一些 SEO 关键字建议作为

标签的内容，这将在第十一章中介绍。通常，这是一个长段落格式的基于文本的内容，但是这会使示例太长！

接下来，让我们看看水平规则

标签，看看它如何允许您在 HTML5 之前的版本中在文档的逻辑部分之间绘制可视分隔线，以及在 HTML5 和更高版本中在语义上分隔文档的区域。语义 HTML5 将在第十章中讨论。

水平标尺标签:可视地划分文本内容

在 HTML5 之前，水平线或

标签用于在文档的逻辑区域之间插入一条线。在 HTML5 中，它不再用于视觉区分，而是作为逻辑文档部分的逻辑或语义区分。因此，HTML5 不再支持表 9-2 中的参数。HTML5 浏览器可能仍然出于表示目的绘制这条线，这是在 HTML5 之前使用的< hr >标签，但浏览器或操作系统将其视为语义文档分段。

表 9-2。

Parameters for the

Tag, Used Prior to HTML5

| 组织标签 | 内容组织标签用法 | | --- | --- | | 排列 | 确定对齐方式(左、右、中间值) | | 大小 | 使用像素(整数值)指定行高 | | 宽度 | 以像素或百分比为单位指定线宽 | | 哦，天啊 | 强制线条使用一种纯色值 |

就内容/搜索(HTML5)、样式(CSS3)以及动画和交互性(JavaScript)而言，这是文档组织的逻辑发展。向“语义网”发展也是很符合逻辑的。

要在逻辑部分之间创建水平规则和语义分隔，请在最后一个段落标签后使用一个

标签。使用下面的 HTML5 标记并基于前面的示例，可以为六个部分中的每一部分完成这一步:

<!DOCTYPE html><html>
<head><title>Exotic Cars</title></head>
<body>
 <h1>Exotic Car Document</h1>
   <p>Top Level Keywords Relating to Exotic Cars from Every Nation</p>
     <hr>
 <h2>Exotic European Cars</h2>
   <p>Next Level Keywords Relating to Exotic Cars from European Union</p>
     <hr>
 <h3>Exotic European Sports Cars</h3>
   <p>Next Level Keywords Relating to Exotic European Sports Cars</p>
     <hr>
 <h4>Popular Exotic Italian Sports Cars (Ferrari and Lamborghini)</h4>
   <p>Next Level Keywords Relating to Exotic Italian Sports Cars</p>
     <hr>
 <h5>Currently Popular Ferrari Sports Cars</h5>
   <p>Next Level Keywords for Currently Popular Ferrari Sports Cars</p>
     <hr>
 <h6>Ferrari Sports Cars Available in North America (USA and Canada)</h6>
   <p>Next Level Keywords for Ferrari Sports Cars Available in America</p>
     <hr>
</body>
</html>

如果您正在开发 HTML4 和更早版本的遗留代码，您应该使用表 9-2 中显示的参数来控制水平标尺对齐、宽度和高度。接下来，让我们看看如何为您的文档或文章指定地址。

地址标签:指定地址信息

标签定义了文档中的地址类型，为用户提供联系信息。在 HTML5 之前的版本中，

标签是标签的子标签，为整个文档提供地址信息。如果您在新的 HTML5 标签中使用标签作为子标签，这将在第十章中介绍，<地址>标签为语义定义的文章定义地址(联系人)信息。

要为文档创建地址信息部分，请使用

标签，通过使用子标签在其中包含您的地址、电子邮件、网站和类似的地址相关信息。以下是地址 HTML 标记结构的示例:

<body>
  <address>
   Document Created By: <a href="mailto:info@wallacejackson.com>Walls</a>
    <br><hr>
   Address: 12345 Streetname Road, Cityname, Statename, Zip Code, Country
    <br><hr>
   Website: <a href="http://www.wallacejackson.com>WallaceJackson.com</a>
  </address>
</body>

请注意，我使用了 break
标签和水平 rule

标签来定义地址的不同区域，在 HTML 4 和更早的版本中使用了语义 break (HTML5)和水平线(rule)。中断标签在第十一章中介绍。

我把文档组织标签主题的其余部分留到第十章讨论语义文档定义，因为 HTML5 和更高版本使用特殊标签来定义文档(HTML5 浏览器)或应用(HTML5 操作系统)的内容区域。这个<地址>标签是语义标签的一个很好的例子，也是进入新的 HTML5 语义标签的一个好方法。

摘要

本章讨论了使用

到

、

和

标签及其相关参数选项的 HTML5 和所有早期版本中的文档标题和桌面发布传统支持。下一章继续文档组织之旅，使用 HTML5 中添加的新语义标签来支持文档中逻辑区域的内容组织。还涵盖了通过段落、列表、表格、表格等来定义基于文本的内容。

十、HTML5 语义：定义语义文档

接下来，让我们介绍 HTML5 中新的“语义”标签，这些标签允许开发人员在他们的 HTML5 设计中更合理地定义内容层次。这是通过页眉、页脚、章节、图表、标题、边栏和导航面板来实现的。它们允许您将文档内容组织成逻辑部分。语义是对单词含义的研究，所以这些标签之所以具有语义是因为它们定义了内容，所以搜索引擎可以在语义上“看到”文档设计(即智能地)。

在这一章中，我将介绍语义标签，它实现了新的 HTML5 语义文档组织范例。标签的名称定义了它们所代表的 HTML5 文档的功能区域。语义标签的例子包括

和

标签、

、

、、、、、和标签。

HTML5 语义内容组织

本章涵盖了 HTML5 中的语义内容组织功能。在 HTML5 之前，开发人员使用

标签或其他标签，以及一个类或 id 参数，例如<div id="header">，为文档元素创建他们的描述性(语义)名称。由于开发者没有使用标准化的语义标签，W3C 替他们做了，这样搜索引擎机器人(算法)就可以开始实现 Web 3.0，也就是语义搜索。根据 W3C:语义网允许数据在应用、企业和社区之间共享和重用。表 10-1 显示了语义内容组织标签，这些标签都是 HTML5 中新增的，分类为主要文档节、功能文档节、多媒体功能图和面向细节的文档特征。

表 10-1。

Thirteen HTML Semantic Organization Tags

| 组织标签 | 内容组织标签用法 | | --- | --- | | 页眉 | 指定文档的标题信息 | | 页脚 | 指定文档的页脚信息 | | 部分 | 指定文档的节信息 | | 主要的 | 文件的指定主要内容 | | 导航 | 导航；通常是锚定标签的集合 | | 文章 | 指定文档的文章信息 | | 在旁边 | 与周围文本相关的侧栏内容 | | 数字 | 文档的指定图形和新媒体 | | figcaption(快照标题) | 指定文档的节信息 | | 细节 | 用户可以显示或隐藏的指定附加详细信息 | | 摘要 | 指定文档的节信息 | | 标记 | 文档的指定图形和新媒体 | | 时间 | 指定了图形媒体的图形标题 |

有趣的是，在 HTML5 之前有一些标签碰巧是语义性的，尽管它们当时并没有被特别设计成语义性的。其中包括

、，以及

让我们来看看逻辑部分中的这些语义标签，如表 10-1 所示，从 HTML5 <部分>、<页眉>和<页脚>部分标签开始。它们定义了桌面出版中使用的广泛的高级文档区域，以保存参考信息和其他辅助信息，这些信息通常在主要(中心或中间)文档内容区域中使用上标或下标数字绑定到这些区域。

图 10-1 给出了一个语义文档结构的例子，其中显示了一些最重要的语义标签。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 10-1。

An example of a semantic HTML5 document structure

HTML5 分段标签:逻辑地对内容进行分段

sectional】标签和更专业的

和

标签用于更一般的文件分割。

和

SECTION 标签:定义文档节

标签用于定义文档中任何种类的部分，例如一章。如果没有 and

和六个标题标签的父标签。

没有等级规则，所以标签可以有子标签，标签也可以有子标签。这使得语义内容设计更加灵活。

让我们在内容设计中使用标签和一个 id 值，内容设计包含外国汽车和国内汽车的部分。下文详述了第九章中使用的标题标签示例:

<!DOCTYPE html><html>
<head><title>Exotic and Domestic Cars</title></head>
<body>
 <section id="exotic">
  <h1>Exotic Car Document</h1>
   <p>Top Level Keywords Relating to Exotic Cars from Every Nation</p>
  <h2>Exotic European Cars</h2>
   <p>Next Level Keywords Relating to Exotic Cars from European Union</p>
  <h3>Exotic European Sports Cars</h3>
   <p>Next Level Keywords Relating to Exotic European Sports Cars</p>
 </section>
 <section id="domestic">
  <h1>Domestic Car Document</h1>
   <p>Top Level Keywords Relating to Domestic Cars from Every Nation</p>
  <h2>Domestic European Cars</h2>
   <p>Next Level Keywords Relating to Domestic Cars from European Union</p>
  <h3>Domestic European Sedans</h3>
   <p>Next Level Keywords Relating to Domestic European Sedans</p>
 </section>
</body>
</html>

接下来，让我们看看一种特殊类型的节标记，称为标记。该标签专门在文档设计的顶部或“标题”提供信息。

HEADER 标签:定义文档的介绍性内容

标签定义了文档的介绍性内容。如果没有

标签不能用作

或其他

标签的子标签。然而，一个文档中可以使用多个

标签。

元素(标签)通常包含一个标题标签(例如

标签)和一个段落

标签，还可能包含一个图像，如徽标、图片或类似的视觉品牌元素。

让我们使用一个标签来定义汽车内容设计示例的标题。该示例现在在 HTML5 内容层次结构中的下面使用欧洲和美国汽车的部分。我更改了节 id 以反映这一新的设计更改，如以下 HTML5 标记所示:

<!DOCTYPE html><html>
<head><title>Exotic and Domestic Cars</title></head>
<body>
 <header>
  <h1>Exotic Cars Unleashed!</h1>
   <p>Top Level Keywords Relating to Exotic Cars from Every Nation</p>
 </header>
 <section id="european">
  <h2>Exotic European Cars</h2>
   <p>Next Level Keywords Relating to Exotic Cars from European Union</p>
  <h3>Exotic European Sports Cars</h3>
   <p>Next Level Keywords Relating to Exotic European Sports Cars</p>
 </section>
 <section id="american">
  <h2>Exotic American Cars</h2>
   <p>Next Level Keywords Relating to Domestic Cars from North America</p>
  <h3>Exotic American Sports Cars</h3>
   <p>Next Level Keywords Relating to Exotic North American Sports Cars</p>
 </section>
</body>
</html>

接下来，让我们看看一种特殊类型的节标签，称为

脚注标记:引用内容的脚注信息

标签定义了文档的脚注和类似的参考内容。一个文档中可以使用多个

让我们使用一个

<!DOCTYPE html><html>
<head><title>Exotic and Domestic Cars</title></head>
<body>
 <header>
  <h1>Exotic Cars Unleashed!</h1>
   <p>Top Level Keywords Relating to Exotic Cars from Every Nation</p>
 </header>
 <section id="european">
  <h2>Exotic European Cars</h2>
   <p>Next Level Keywords Relating to Exotic Cars from European Union</p>
  <h3>Exotic European Sports Cars</h3>
   <p>Next Level Keywords Relating to Exotic European Sports Cars</p>
 </section>
 <section id="american">
  <h2>Exotic American Cars</h2>
   <p>Next Level Keywords Relating to Domestic Cars from North America</p>
  <h3>Exotic American Sports Cars</h3>
   <p>Next Level Keywords Relating to Exotic North American Sports Cars</p>
 </section>
 <footer>
  <h4>Exotic Car Article Article, Contact and Sources:</h1>
   <p>Blog’s Author: Wallace Jackson</p>
   <p>Author e-mail: <a href="mailto: wj@email.com">Wallace Jackson</a></p>
   <p>Blog’s Source: Magazine or Book Resources and Links would go here</p>
 </footer>
</body>
</html>

接下来，让我们看看 HTML5 语义标签，它允许您定义文档“区域”，比如主文档主题、文档中的文章、信息侧栏和导航栏。

HTML5 内容类型语义定义标签

表 10-1 中接下来的四个标签定义了其他文档区域——文章、侧栏、导航 UI 和文档的顶层(主要区域)——使用为文档区域命名的标签，这就是新 HTML5 文档语义的全部内容！您需要正确而精确地使用这些标签，使您的 HTML5 文档与 Web 3.0(语义 Web)兼容。搜索引擎吸收语义优化的内容，这是通过使用 HTML5 这一重要章节中的标签来实现的。

主标签:定义文档内容的顶层

标签定义了文档的最顶层。单个文档中只使用一个

标签。此标签不能用作

、

或的子标签，因为它定义了文档的顶层。元素需要包含独特的信息和设计元素，不能在任何其他 HTML 文档中重复。

让我们使用这个

标签来定义汽车内容设计示例的顶层。主标签在文档的顶部有一个开始标签(在标签之前)，在文档的底部有一个结束标签(在标签语义结构中了。下面的 HTML5 标记显示了这样一个例子:

<!DOCTYPE html><html>
<head><title>Exotic and Domestic Cars</title></head>
<body>
 <main>

  <header>
   <h1>Exotic Cars Unleashed!</h1>
    <p>Top Level Keywords Relating to Exotic Cars from Every Nation</p>
  </header>
  <section id="european">
   <h2>Exotic European Cars</h2>
    <p>Next Level Keywords Relating to Exotic Cars from European Union</p>
   <h3>Exotic European Sports Cars</h3>
    <p>Next Level Keywords Relating to Exotic European Sports Cars</p>
  </section>
  <section id="american">
   <h2>Exotic American Cars</h2>
    <p>Next Level Keywords Relating to Domestic Cars from North America</p>
   <h3>Exotic American Sports Cars</h3>
    <p>Next Level Keywords Relating to Exotic North American Sports Cars</p>
  </section>
  <footer>
   <h4>Exotic Car Article Article, Contact and Sources:</h1>
    <p>Blog’s Author: Wallace Jackson</p>
    <p>Author e-mail: <a href="mailto: wj@email.com">Wallace Jackson</a></p>
    <p>Blog’s Source: Magazine or Book Resources and Links would go here</p>
  </footer>
 </main>

</body>
</html>

接下来，让我们看看

NAV 标签:为文档定义导航 UI

让我们将

<!DOCTYPE html><html>
<head><title>Exotic and Domestic Cars</title></head>
<body>
 <main>

  <header>
   <h1>Exotic Cars Unleashed!</h1>
    <p>Top Level Keywords Relating to Exotic Cars from Every Nation</p>
  </header>
  <nav>

   <a http://www.web-address.com/car-info.html>CAR INFO</a>
   <a http://www.web-address.com/our-team.html>OUR TEAM</a>
   <a http://www.web-address.com/buy-cars.html>BUY CARS</a>
  </nav>

  <section id="european">
   <h2>Exotic European Cars</h2>
    <p>Next Level Keywords Relating to Exotic Cars from European Union</p>
   <h3>Exotic European Sports Cars</h3>
    <p>Next Level Keywords Relating to Exotic European Sports Cars</p>
  </section>
  <section id="american">
   <h2>Exotic American Cars</h2>
    <p>Next Level Keywords Relating to Domestic Cars from North America</p>
   <h3>Exotic American Sports Cars</h3>
    <p>Next Level Keywords Relating to Exotic North American Sports Cars</p>
  </section>
  <footer>
   <h4>Exotic Car Article Article, Contact and Sources:</h1>
    <p>Blog’s Author: Wallace Jackson</p>
    <p>Author e-mail: <a href="mailto: wj@email.com">Wallace Jackson</a></p>
    <p>Blog’s Source: Magazine or Book Resources and Links would go here</p>
  </footer>
 </main>

</body></html>

接下来，让我们看看标记，它在文档中创建特定主题的文章。

文章标签:在 HTML5 文档中定义文章

标签定义了文档中的一篇文章。文章是独立于其他文档内容的独特的专有内容。可以在一个文档中使用多个

标签。

让我们将汽车示例中的标签更改为标签，通过使用以下标记将其转换为杂志:

<!DOCTYPE html><html>
<head><title>Exotic and Domestic Cars Today</title></head>
<body>
 <main>

  <header>
   <h1>Exotic Cars Magazine: Current Exotic Car Articles</h1>
    <p>Top Level Keywords Relating to Exotic Cars from Every Nation</p>
  </header>
  <nav>
   <a http://www.web-address.com/car-info.html>CAR INFO</a>
   <a http://www.web-address.com/our-team.html>OUR TEAM</a>
   <a http://www.web-address.com/buy-cars.html>BUY CARS</a>
  </nav>
  <article>

   <h2>Exotic European Cars: Maintaining a Lead Over US Manufacturers</h2>
    <p>Next Level Keywords Relating to Exotic Cars from European Union</p>
   <h3>Exotic European Sports Car Round-Up</h3>
    <p>Next Level Keywords Relating to Exotic European Sports Cars</p>
  </article>

  <article>

   <h2>Exotic American Cars: Gaining on the Domination of European Cars</h2>
    <p>Next Level Keywords Relating to Domestic Cars from North America</p>
   <h3>Exotic American Sports Car Round-Up</h3>
    <p>Next Level Keywords Relating to Exotic North American Sports Cars</p>
  </article>

  <footer>
   <h4>Exotic Car Article Article, Contact and Sources:</h1>
    <p>Blog’s Author: Wallace Jackson</p>
    <p>Author e-mail: <a href="mailto: wj@email.com">Wallace Jackson</a></p>
    <p>Blog’s Source: Magazine or Book Resources and Links would go here</p>
  </footer>
 </main>

</body>

</html>

接下来，让我们看看

标签，它在文档中创建信息侧栏。

旁白标签:在文档中定义信息侧栏

标签定义了文档中的信息侧边栏。侧边栏内容必须与其相邻的内容相关。可以在一个文档中使用多个

标签。

让我们将汽车示例中的标签更改为标签，通过使用以下标记将它转换为杂志:

<!DOCTYPE html><html>
<head><title>Exotic and Domestic Cars Today</title></head>
<body>
 <main>
  <header>
   <h1>Exotic Cars Magazine: Current Exotic Car Articles</h1>
    <p>Top Level Keywords Relating to Exotic Cars from Every Nation</p>
  </header>
  <nav>
   <a http://www.web-address.com/car-info.html>CAR INFO</a>
   <a http://www.web-address.com/our-team.html>OUR TEAM</a>
   <a http://www.web-address.com/buy-cars.html>BUY CARS</a>
  </nav>
  <article>
   <h2>Exotic European Cars: Maintaining a Lead Over US Manufacturers</h2>
    <p>Next Level Keywords Relating to Exotic Cars from European Union</p>
   <h3>Exotic European Sports Car Round-Up</h3>
    <p>Next Level Keywords Relating to Exotic European Sports Cars</p>
   <aside>

    <h4>Sidebar: Top Selling European Sports Cars</h4>
     <p>Next Level Keywords Relating to Top Selling European Sports Cars</p>
   </aside>

  </article>
  <article>
   <h2>Exotic American Cars: Gaining on the Domination of European Cars</h2>
    <p>Next Level Keywords Relating to Domestic Cars from North America</p>
   <h3>Exotic American Sports Car Round-Up</h3>
    <p>Next Level Keywords Relating to Exotic North American Sports Cars</p>
  </article>
  <footer>
   <h5>Exotic Car Article Article, Contact and Sources:</h1>
    <p>Blog’s Author: Wallace Jackson</p>
    <p>Author e-mail: <a href="mailto: wj@email.com">Wallace Jackson</a></p>
    <p>Blog’s Source: Magazine or Book Resources and Links would go here</p>
  </footer>
 </main></body></html>

接下来，我们来看看如何在 HTML5 中使用图形和图形标题。

HTML5 语义新媒体图形定义标签

表 10-1 中显示的下两个标签允许您使用图和图标题从语义上定义新的媒体元素。

插图和插图标题标签:添加带标题的图像

标签用于定义多媒体。嵌套了一个

标签来定义新媒体素材的标题。

让我们使用这两个标记来定义跑车内容的标题图像，如下面的 HTML5 标记所示:

<!DOCTYPE html><html>
<head><title>Exotic and Domestic Cars Today</title></head>
<body>
 <main>
  <header>
   <h1>Exotic Cars Magazine: Current Exotic Car Articles</h1>
    <p>Top Level Keywords Relating to Exotic Cars from Every Nation</p>
  </header>
  <nav>
   <a http://www.web-address.com/car-info.html>CAR INFO</a>
   <a http://www.web-address.com/our-team.html>OUR TEAM</a>
   <a http://www.web-address.com/buy-cars.html>BUY CARS</a>
  </nav>
  <article>
   <h2>Exotic European Cars: Maintaining a Lead Over US Manufacturers</h2>
    <p>Next Level Keywords Relating to Exotic Cars from European Union</p>
   <h3>Exotic European Sports Car Round-Up</h3>
    <p>Next Level Keywords Relating to Exotic European Sports Cars</p>
   <aside>
    <h4>Sidebar: Top Selling European Sports Cars</h4>
     <p>Next Level Keywords Relating to Top Selling European Sports Cars</p>
   </aside>
  </article>
  <article>
   <h2>Exotic American Cars: Gaining on the Domination of European Cars</h2>
    <p>Next Level Keywords Relating to Domestic Cars from North America</p>
   <h3>Exotic American Sports Car Round-Up</h3>
    <p>Next Level Keywords Relating to Exotic North American Sports Cars</p>
  <figure>

   <img src="sport-car-image.png" alt="sports car image related keywords">
   <figcaption>Figure 1\. Image of Popular American Sports Car</figcaption>

  </figure>

  </article>
  <footer>
   <h5>Exotic Car Article Article, Contact and Sources:</h1>
    <p>Blog’s Author: Wallace Jackson</p>
    <p>Blog’s Source: Magazine or Book Resources and Links would go here</p>
  </footer>
 </main></body></html>

如果您想将图片文本放在图像或视频的上面，而不是下面，您也可以将子标签放在父标签内，在或标签之前。在新的媒体元素下面添加标题是为图像或视频添加标题的标准方式。您也可以使用带有您的

标签的标题，但是一定要包括 controls 参数，以便有一些东西(播放-暂停-倒带传输)可以作为标题！

接下来，让我们看看最后几个语义标签，它们添加了各种细节元素，包括弹出信息、摘要、文本标记和系统时间。

HTML5 语义文档详细定义标签

表 10-1 中的最后四个标签允许你定义语义 HTML5 文档的细节元素。其中包括开发人员用来定义交互式弹出窗口小部件的<细节>标签，这些小部件允许用户深入文档的语义内容。还有一个子<摘要>标签与<细节>标签一起使用。最后，<标记>标记“标记”文本，而<时间>标记允许您显示系统日期和时间。

详细信息和摘要标签:添加弹出信息

标签与标签一起用于定义弹出信息，允许用户“向下钻取”更多信息。点击标签中提供的信息来切换标签中的显示或隐藏功能。标签有一个名为 open 的参数，表示 open=“真”,相当于默认状态下元素的“显示”状态。如果 open 参数不存在，这等同于 open="false "，隐藏状态是默认状态；用户必须点击标签的文本来“取消隐藏”或打开元素。

让我们在跑车内容部分添加一个

标签及其子标签。让它包含一个弹出窗口小部件，标记为点击这里查看我们的特色文章列表！。当用户单击它时，出现两个<文章>元素的列表，如下面的 HTML5 标记示例所示:

<!DOCTYPE html><html>
<head><title>Exotic and Domestic Cars Today</title></head>
<body>
 <main>
  <header>
   <h1>Exotic Cars Magazine: Current Exotic Car Articles</h1>
    <p>Top Level Keywords Relating to Exotic Cars from Every Nation</p>
    <details>

     <summary>Click Here For the List of Our Featured Articles!</summary>

     <p>Exotic European Cars: Maintaining the Lead Over US Manufacturers</p>
     <p>Exotic American Cars: Gaining on the Domination of European Cars</p>
    </details>

  </header>
  <nav>
   <a http://www.web-address.com/car-info.html>CAR INFO</a>
   <a http://www.web-address.com/our-team.html>OUR TEAM</a>
   <a http://www.web-address.com/buy-cars.html>BUY CARS</a>
  </nav>
  <article>
   <h2>Exotic European Cars: Maintaining the Lead Over US Manufacturers</h2>
    <p>Next Level Keywords Relating to Exotic Cars from European Union</p>
   <h3>Exotic European Sports Car Round-Up</h3>
    <p>Next Level Keywords Relating to Exotic European Sports Cars</p>
   <aside>
    <h4>Sidebar: Top Selling European Sports Cars</h4>
     <p>Next Level Keywords Relating to Top Selling European Sports Cars</p>
   </aside>
  </article>
  <article>
   <h2>Exotic American Cars: Gaining on the Domination of European Cars</h2>
    <p>Next Level Keywords Relating to Domestic Cars from North America</p>
   <h3>Exotic American Sports Car Round-Up</h3>
    <p>Next Level Keywords Relating to Exotic North American Sports Cars</p>
  <figure>

   <img src="sport-car-image.png" alt="sports car image related keywords">
   <figcaption>Figure 1\. Image of Popular American Sports Car</figcaption>

  </figure>
  </article>
  <footer>
   <h5>Exotic Car Article Article, Contact and Sources:</h1>
    <p>Blog’s Author: Wallace Jackson</p>
    <p>Blog’s Source: Magazine or Book Resources and Links would go here</p>
  </footer>
 </main>
</body></html>

接下来，我们来看看最后两个语义标签，和。如果其他遗留标签已经升级了新的语义特性或功能，我将在以后的章节中介绍这些内容。

标记和时间标签:添加更多信息

标签突出了重要的文本。标签定义了人类可读的时间值。在 Firefox 中，标签将黄色应用到和标签中的文本。这些标签可以用在我们的汽车示例中，如下所示:

<!DOCTYPE html><html>
<head><title>Exotic and Domestic Cars Today</title></head>
<body>
 <main>
  <header>
   <h1>Exotic Cars Magazine: Current Exotic Car Articles</h1>
    <p>Top Level Keywords Related to <mark>Exotic Cars</mark> worldwide</p>
    <details>
     <summary>List of Our Articles Released at <time>10:00</time></summary>
     <p>Exotic European Cars: Maintaining the Lead Over US Manufacturers</p>
     <p>Exotic American Cars: Gaining on the Domination of European Cars</p>
    </details>
  </header>
  <nav>
   <a http://www.web-address.com/car-info.html>CAR INFO</a>
   <a http://www.web-address.com/our-team.html>OUR TEAM</a>
   <a http://www.web-address.com/buy-cars.html>BUY CARS</a>
  </nav>
  <article>
   <h2>Exotic European Cars: Maintaining the Lead Over US Manufacturers</h2>
    <p>Next Level Keywords Relating to Exotic Cars from European Union</p>
   <h3>Exotic European Sports Car Round-Up</h3>
    <p>Next Level Keywords Relating to Exotic European Sports Cars</p>
   <aside>
    <h4>Sidebar: Top Selling European Sports Cars</h4>
     <p>Next Level Keywords Relating to Top Selling European Sports Cars</p>
   </aside>
  </article>
  <article>
   <h2>Exotic American Cars: Gaining on the Domination of European Cars</h2>
    <p>Next Level Keywords Relating to Domestic Cars from North America</p>
   <h3>Exotic American Sports Car Round-Up</h3>
    <p>Next Level Keywords Relating to Exotic North American Sports Cars</p>
  <figure>

   <img src="sport-car-image.png" alt="sports car image related keywords">
   <figcaption>Figure 1\. Image of Popular American Sports Car</figcaption>
  </figure>

  </article>
  <footer>
   <h5>Exotic Car Article Article, Contact and Sources:</h1>
    <p>Blog’s Author: Wallace Jackson</p>
    <p>Blog’s Source: Magazine or Book Resources and Links would go here</p>
  </footer>
 </main>
</body>
</html>

在这一点上，你应该回过头来看看图 10-1 所示的图表，它可视化了本章示例中使用的一些语义标签。

摘要

在这一章中，您了解了 HTML5 最近添加的新语义标签支持，包括

、

、、、和标签。在下一章中，您将看到 HTML5 标签，这些标签支持在 HTML5 文档和应用中发布基于文本的内容。

十一、HTML5 格式：发布基于文本的内容

接下来，让我们介绍 HTML5 中的文本发布标签，它允许开发人员通过样式、上标和下标、换行和断词、引用、缩写、引用等来控制基于文本的内容。这些与文本相关的标签允许您定义文档内容，而不必使用样式表进行样式化。

在这一章中，我将讨论在 HTML 中实现基于文本的内容的关键标签。段落标签定义了文本块(段落);书里已经提到了。本章中其他与文本相关的标签包括用于格式化文本、样式化文本、断开(分隔和间隔)文本、调整文本大小、文本方向、引用、引文和特殊类型文本环境的标签。

创建用于发布的 HTML5 文本内容

本章介绍 HTML5 中与文本相关的标签，这些标签用于创建在文档、网站或应用中发布的文本内容。大多数都在 HTML 的旧版本中得到支持。HTML5 中有几个新标签；我会指出这些。

这些文本标签是第十章中包含的语义标签的子标签。您的基于文本的内容被封装(包装)在标准化的语义容器中，因此搜索引擎机器人(索引和排名算法)可以最佳地实现 Web 3.0 和互联网的未来——语义搜索。

表 11-1 显示了用于创建、格式化、样式化和发布基于文本的内容的标签。它们分为七个逻辑区域:文本格式、文本样式、文本分割(分隔、间距)、文本大小、文本方向、文本引用、文本标题(标题)以及特殊情况下的标签。

表 11-1。

Twenty HTML and HTML5 Text Content Publishing Tags

| 文本内容标签 | 文本内容标签标准用法 | | --- | --- | | p | 指定一段文字内容 | | 在…之前 | 指定预先格式化的文本内容 | | 缩写的/缩写词 | 指定一个缩写 | | b | 指定文本内容的粗体样式 | | 我 | 指定文本内容的斜体样式 | | u | 指定文本内容的下划线样式 | | 英国铁路公司 | 指定换行符(新行，回车) | | 建议换行 | 为长词指定了断词机会 | | 小的 | 为该文本内容指定小文本样式 | | 潜水艇 | 为文本内容指定下标文本样式 | | 小口喝；怎么了 | 为文本内容指定上标文本样式 | | 波罗的海干散货指数 | 为文本内容指定双向隔离 | | 德豪会计师事务所 | 指定文本方向的双向替代 | | q | 为文档指定一个简短的引用 | | 引用 | 为文档指定长(整)引号 | | 引用 | 为已出版的作品定义标题(引用) | | 数据 | 指定人类可读和机器可读的数据 | | s | 指定不再准确/相关的文本 | | 是吗 | 已删除的指定文本内容 | | 移民局 | 已插入的指定文本内容 |

让我们来看一下这些内容发布标签——一次一个逻辑部分。

HTML5 文本格式:段落、前置和缩写

前三个标签告诉呈现引擎如何格式化文本:作为文本块或段落；作为预先隔开的或特别形成的文本排列；或者作为带有可选鼠标悬停定义的缩写文本。这些标签显示在表 11-1 的第一部分。

让我们先来看看段落

标签，因为它是 HTML5 文档、网站和应用设计中最常用的文本相关标签。在 HTML5 之前，这个标签有 align 参数，支持左对齐、右对齐、居中和两端对齐。

在 HTML5 之前的版本中支持 align 参数，但在 HTML5 中不支持。正如我提到的，HTML5 和以后版本的趋势是使用 CSS3 来提供元素(标签)样式，HTML5 标签关注语义内容的定义。

让我们开始一个新的“发布文本内容”示例 HTML 文档，它使用您所学的语义和 SEO 标签来定义显示文本段落的标题段落。这是在以下 HTML5 标记中完成的:

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>

  <header>
   <h1>Publishing Text: Using Text-Related Tags in HTML5</h1>
    <p>This is an example of a paragraph, containing text sentences. It is
       possible to have more than 1 sentence in a paragraph, of course!</p>

  </header>
 </main>

</body>
</html>

对于旧版 HTML 标记，您可以使用 align 参数，如以下 HTML 4.01(及更早版本)标记所示:

<p align="left">This is an example of a paragraph containing 2 sentences.
 It is possible to have more than 1 sentence in a paragraph, of course!</p>

接下来让我们来看看预格式化的

标签，因为它是 HTML 文档、网站和应用设计中最不常用的文本相关标签。在 HTML5 之前，该标签使用 width 参数，该参数定义了每行预格式化文本的最大宽度。该标记保持字符间距，因此它不会将多个空格字符“折叠”成一个空格。

HTML5 中不支持宽度参数。

让我们用一个

 tag

           to create fun, text-based character art in the shape of a pine tree, often popular during the holiday season, as shown in the following HTML5 markup:

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>

  <header>
   <h1>Publishing Text: Using Text-Related Tags in HTML5</h1>
    <p>This is an example of a paragraph containing text sentences. It is
       possible to have more than a sentence in a paragraph, of course!</p>
  </header>
  <article>

   <h2>Pre-format Text: Maintaining Precise Character Spacing</h2>
    <p>You can use a PRE Element to implement character art, like this:</p>
    <pre>

              88  
             8888  
             8888  
            888888  
           88888888
          8888888888
        8888888888888
      88888888888888888
    888888888888888888888
          8888888888
        88888888888888
    8888888888888888888888
 8888888888888888888888888888
        888888888888888
       88888888888888888
     888888888888888888888
  888888888888888888888888888
88888888888888888888888888888888
       888888888888888888  
      88888888888888888888
    888888888888888888888888
  8888888888888888888888888888
 888888888888888888888888888888
8888888888  8888888  88888888888
             88888
             88888
             88888
          88888888888
   </pre>

  </article>

 </main>

</body>
</html>

接下来，我们来看看缩写标签。

让我们使用标签为这个例子中的第二部分创建一个缩写。使用 title 参数，以便在鼠标悬停时定义缩写:

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>

  <header>
   <h1>Publishing Text: Using Text-Related Tags in HTML5</h1>
    <p>This is an example of a paragraph containing text sentences. It is
       possible to have more than a sentence in a paragraph, of course!</p>
  </header>
  <article>

   <h2>Pre-format Text: Maintaining Precise Character Spacing</h2>
    <p>You can use a PRE Element to implement character art, like this:</p>
    <pre>
              88  
             8888  
             8888  
            888888  
           88888888
          8888888888
        8888888888888
      88888888888888888
    888888888888888888888
          8888888888
        88888888888888
    8888888888888888888888
 8888888888888888888888888888
        888888888888888
       88888888888888888
     888888888888888888888
  888888888888888888888888888
8888888888888888888888888888888
       888888888888888888  
      88888888888888888888
    888888888888888888888888
  8888888888888888888888888888
 888888888888888888888888888888
8888888888  8888888  88888888888
             88888
             88888
             88888
          88888888888

   </pre>
  </article>

  <article>

   <h3>Abbreviated Text: Using the ABBR Tag to Describe this Pine Tree</h3>
    <p>Christmas Tree is also <abbr title="Christmas">XMAS</abbr> Tree!</p>
  </article>

 </main>

</body></html>

接下来，让我们看看文本样式元素(标签)。

HTML5 文本样式:粗体、斜体和下划线

接下来的三个标记告诉呈现引擎如何设置文本字符的样式，可以是粗体文本块、斜体文本块或带下划线的文本块。这些 HTML 标签也可以相互结合使用。它们如表 11-1 的第二部分所示。

让我们先来看看 bold 标签，因为它是 HTML 文档、网站或应用设计中最常用的文本相关标签。让我们用标签和将原始示例中的单词“paragraph”括起来。这显示在下面的 HTML 标记示例中(它也可以在 HTML5 中使用):

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>
  <header>
   <h1>Publishing Text: Using Text-Related Tags in HTML5</h1>
    <p>This is an example of a <b>paragraph</b> containing text sentences.
       It’s possible to have more than 1 sentence in a paragraph.</p>
  </header>
 </main>
</body>
</html>

要加粗句子中的整个文本块，您可以在开始和结束标记中包含其他单词:

<p align=left>An <b>example of a paragraph</b> containing text sentences.
              It’s possible to have more than 1 sentence in a paragraph.</p>

Note

来自 W3C 网站( www.w3schools.com/tags/tag_b.asp ):“根据 HTML 5 规范，这个< b >标签应该作为最后的手段，在没有其他标签更合适的时候使用。HTML 5 规范规定标题应该用< h1 >到< h6 >标签来表示，强调的文本应该用< em >标签来表示，重要的文本应该用< strong >标签来表示，标记/高亮的文本应该用< mark >标签来表示。

现在让我们来讨论斜体的标签，并通过用和标签将原始示例中的单词“可能的”变成斜体。这显示在下面的 HTML5 标记中(它也可以用于以前版本的 HTML (2.0、3.2 和 4.01)):

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>
  <header>
   <h1>Publishing Text: Using Text-Related Tags in HTML5</h1>
    <p>This is an example of a <b>paragraph</b> containing text sentences.
     It’s <i>possible</i> to have more than 1 sentence in a paragraph.</p>
  </header>
 </main></body></html>

要将句子中的整个文本块设为斜体，您应该在开始和结束标记中包含更多的单词，就像我在这里所做的那样，围绕“文本句子”文本:

<p>An <b>example of a paragraph</b> containing <i>text sentences</i>.

   It’s <i>possible</i> to have more than 1 sentence in a paragraph.</p>

接下来让我们来看看下划线标签，因为它是 HTML5 文档中最不常用的文本相关标签。这样做的原因是因为锚

让我们通过用和标记将单词“possible”括起来，从而给这个单词加下划线。它看起来像下面的 HTML5 标记(它也可以用在以前版本的 HTML 中):

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>
  <header>
   <h1>Publishing Text: Using Text-Related Tags in HTML5</h1>
    <p>An example of a <b>paragraph</b> containing <i>text sentences.</i>
     It’s possible to have <u>more than 1 sentence</u> in a paragraph.</p>
  </header>
 </main></body></html>

接下来让我们来看看换行符和分词标记。

HTML5 分隔符标签:换行符和断字符

接下来的两个标记告诉呈现引擎如何拆分文本，或者使用换行符和回车符来创建换行符，或者使用连字符来跨行拆分长单词，这称为单词拆分。换行符使用
标签，断字符使用标签。这些 HTML 标签也可以相互结合使用。见表 11-1 的第三部分。

让我们先来看看单词 break 标签，因为大多数开发人员并不知道它，它使用起来非常简单，对于确保长单词以完全由文本内容开发人员控制的方式换行非常有用。让我们用来打破这个。

为此，在我们希望呈现引擎(浏览器和操作系统)在必要时将其分隔为多行的地方，通过使用标签来拆分字典中最长的单词，如以下 HTML5 标记所示:

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>
  <header>
   <h1>Breaking Text Apart: Using Text-Related Tags in HTML5</h1>
    <p>This is an example of a word which is really long using word break:
    Pneumono<wbr>ultramicroscopic<wbr>silico<wbr>volcano<wbr>coniosis</p>
  </header>
 </main>
</body>
</html>

现在我们接下来说说换行符
标签；这是 HTML5 文档、网站和应用设计中最常用的文本相关标签之一。这个标签有时被称为“中断”标签，因为它使用了
而不是。

让我们使用
标签插入换行符(新的行和行间距)。下面的 HTML5 标记显示了一个这样的例子(它也可以用在以前版本的 HTML 中):

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>
  <header>
   <h1>Breaking Text Apart: Using Text-Related Tags in HTML5</h1>
    <p>This is an example of using the line break tag to break apart<br>

       a paragraph containing text sentences<br>

       without using multiple paragraph tags.<br><br>

       It is possible to put line spacing between your sentences<br>

       and still use only one single paragraph.</p>
  </header>
 </main>
</body>
</html>

要添加回车符和新行，就像您可以用手动打字机一样，您可以使用一个单独的
标记。要在句子(或段落)之间加一个空格，连续加两个
标签，像这样:

。这会在显示的句子之间增加一个空格。为了扩大这个空间，你可以使用三个(或更多)break 标签，比如:

。添加的分隔符越多，句子、段落或文本块之间的间距就越宽。接下来，我们来谈谈文本大小元素(标签)。

HTML5 文本大小:小、上标和下标

接下来的三个标记告诉呈现引擎如何调整文本字符的大小:作为小字符、上标凸起的小字符或下标降低的小字符。这些 HTML 标签见表 11-1 的第四部分。

让我们从标签开始，因为它告诉 HTML5 渲染引擎减小文本的字体大小。让我们通过用和标签将单词包围起来，来减小原始示例中一个句子中单词“小文本”的大小。这应该类似于下面的 HTML 标记，它也可以在 HTML5 中使用:

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>
  <header>
   <h1>Publishing Small Text: Using Text-Related Tags in HTML5</h1>
   <p>An example of <small>small text</small> contained in a sentence.</p>
  </header>
 </main>
</body>
</html>

接下来让我们来看看上标^{标签，因为它用于脚注引用和数学(幂)表示。它是 HTML5 中第二个最常用的与大小相关的标签。}

上标文本出现在正常线上方的中间位置；它通常以与标签相同的字体大小呈现。

让我们标上 10 的平方或 10 的 2 次方的数学表达式。这是通过用标签^和包围 2 来实现的。下面的 HTML5 标记显示了一个这样的例子(它也可以用在以前版本的 HTML 中):

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>
  <header>
   <h1>Publishing Small Text: Using Text-Related Tags in HTML5</h1>
    <p>Here is an example of a subscript footer footnote representation:
     Ten Squared Equals One Hundred: 10<sup>2</sup> = 100</p>
  </header>
 </main>
</body>
</html>

接下来让我们讨论下标_{标签，因为它用于脚注引用；它是第二个最常用的与大小相关的元素(标记)。}

下标文本出现在字体基线下方的中间位置。它通常以与标签相同的字体大小呈现。

让我们在文章的脚注中加上下标[1]。这是通过用_和标签包围[1]引用来实现的。下面的 HTML5 标记就是这样的一个例子(它也可以用在所有以前版本的 HTML 中):

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>
  <article>
    <h1>Publishing Small Text: Using Text-Related Tags in HTML5</h1>
     <p>Here is the example of your subscript footnote referencing:
        Further Research Material<sub>[1]</sub> is in the Footer.</p>
  </article>
 </main>
</body>
</html>

接下来让我们来看看文本方向标签。HTML 4(和 Android 4.2)最近增加了文本方向，以支持从屏幕右侧向屏幕左侧书写的语言。

HTML5 文本方向:双向文本标签

接下来的两个标签告诉呈现引擎使用 ltr 或从左到右范式或 rtl 或从右到左范式在哪个方向呈现文本字符。Android 操作系统在 4.2 版本中增加了对 ltr 与 rtl 渲染的支持。表 11-1 的第五部分列出了方向文本 HTML 标签；它们包括双向隔离< bdi >和双向覆盖< bdo >标签。

让我们从标签开始，它告诉 HTML5 渲染引擎隔离(或者不应用文档中指定的当前文本方向)在和标签内的任何文本。

让我们通过用和标记包围单词来隔离原始示例中句子中单词“孤立文本”的文本方向。下面的 HTML 4.01 标记中显示了这样一个示例(它也可以用于 HTML5):

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>
  <header>
   <h1>Publishing Directional Text: Using Text-Related Tags in HTML5</h1>
   <p>An example of <bdi>isolated text</bdi> contained in a sentence.</p>
  </header>
 </main>
</body>

</html>

接下来让我们覆盖 HTML 4 双向覆盖标签；它明确定义了一个单词、句子或文本块的方向。它使用所需的方向 dir 参数，该参数采用 rtl 或 ltr 数据值。

让我们覆盖默认的从左到右的文本方向，并使用标签通过使用 dir 参数使一些文本从右到左。这是通过用< bdo >和< /bdo >标签连同开始< bdo >标签中的 dir="rtl "参数将单词“从右到左”括起来实现的。下面的 HTML5 标记展示了这样一个例子(它也可以在 HTML 4.01 中使用):

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>
  <header>
   <h1>Publishing Directional Text: Using Text-Related Tags in HTML5</h1>
    <p>Here is the example of the default left to right text direction.</p>
    <p>Override this to create <bdo dir="rtl">right to left</bdo>text.</p>
  </header>
 </main>
</body>
</html>

让我们来看看 HTML5 中支持的文本引用标签。

HTML5 文本引号:引号和块引号标记

接下来的两个标签告诉呈现引擎使用引号标签或块引号

Tags present text characters in quotation mark format. These HTML tags are shown in the sixth part of table 11-1 .

让我们从标签开始，它告诉 HTML5 呈现引擎你的文本是一段引文。

有趣的是，当您使用这个标签时，您不必提供引号。下面的标记就是一个例子(它也可以用在 HTML5 中):

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>
  <header>
   <h1>Publishing Quoted Text: Using Text-Related Tags in HTML5</h1>
   <p>An example of a text quotation contained within a paragraph of text.
   <q>This is a quotation from the Author of HTML5 Quick Markup.</q></p>
  </header>
 </main>
</body>
</html>

如果您想使用 URL 引用引用的来源，还有一个 cite 参数。以下是这方面的一个例子:

<q cite="http://www.wallacejackson.com>
This is a sample quotation from the Author of HTML5 Quick Markup Reference.
</q>

接下来让我们谈谈块引号

Tag, because it is used for long quotation marks, which are taken from and refer to another source. In HTML5, the

tag always specifies the part that is referenced from other sources. HTML5 browsers usually indent a

element.

这种区别在 HTML 4.01 和更早的版本中并不存在，在这些版本中，

Just represent the reference as a block of text, without having to represent something in the externally referenced work. This is shown in the HTML5 tag below (it can also be used in previous versions of HTML):

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>
  <article>
   <h1>Publishing Quoted Text: Using Text-Related Tags in HTML5</h1>
    <p>Here is an example of a block quote representation in a paragraph:
       <blockquote cite="http://www.apress.com/9781484218624">

        This compact quick scripting syntax reference on JSON covers
        syntax and parameters central to JSON object definitions, using
        the NetBeans 8.1 open source and Eclipse IDE software tool packages.
       </blockquote>

    </p>
  </article>
 </main>
</body>
</html>

接下来让我们讨论 HTML5 中支持的文本引用标签。

HTML5 文本引用:引用标签

cite 标签告诉渲染引擎文本的标题。这个 HTML 标签在表格 11-1 的第六部分。cite 标签告诉 HTML5 渲染引擎将知识产权作品的标题引用应用到< cite >和< /cite >标签中的任何文本。知识产权所有者的名字不是作品的标题。让我们通过用一个< cite >和< /cite >标签结构包围一个标题，为我们的 HTML5 示例添加一个标题引用。这显示在下面的 HTML 标记中:

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>
  <header>
   <h1>Publishing Citation Text: Using Text-Related Tags in HTML5</h1>
   <p>I wrote <cite>JSON Quick Syntax Reference</cite> during 2016.</p>
  </header>
 </main>
</body>
</html>

最后，让我们讨论 HTML5 支持的文本特殊情况标签。这些见表 11-1 的第七部分。

HTML5 特殊情况文本:其他标签

最后四个标记告诉呈现引擎关于过时的、不准确的、删除的或插入的文本，并允许您使用数据的原生格式来表示数据。

让我们从标签开始，它提供机器可读的数据。在数据需要某种格式才能用 JavaScript 处理的情况下，它很有用，但是对于人类可读的应用来说，它的格式不是很好；也就是说，它没有您喜欢的用户体验格式(read)。

举个简单的例子，您更喜欢使用文本向用户显示数字(例如，一、二、三)，但是您还需要 JavaScript 代码对数字进行排序以组织数据。JavaScript 要求数字以数字(1，2，3)的形式提供，以支持这种排序。

标签通过提供两种不同的数据表示来解决这个问题。在和标签中提供了文本编号；而 JavaScript 代码的整数作为值参数提供。下面的 HTML 标记显示了一个这样的例子(它也可以在 HTML5 中使用):

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>
  <article>
   <h1>Publishing Special Circumstances Text: Using Text-Related Tags</h1>
   <p>An example of <data> tags contained in a paragraph. Numbers Include:
    <data value="1">One</data>
    <data value="2">Two</data>
    <data value="3">Three</data>
   </p>
  </article>
 </main>
</body></html>

接下来，让我们讨论一下~~标签，它在 HTML 4.01 中被弃用，最初用于定义删除线文本(如果您想知道“s”代表什么)。因此，这个元素的默认 CSS3 定义应该如下所示:~~

s { text-decoration: line-through; }

同样，CSS3 不是本书的重点，只有 HTML5 标记语法。HTML5 中重新定义了元素；现在它被用来定义不再正确、准确或相关的文本。这个< s >标签不应该用来定义被替换或删除的文本，因为< del >标签定义被替换或删除的文本。(我接下来覆盖这个标签。)下面是用于更新我的 Android 应用书的< s >标签，使用 HTML5 标记:

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>
  <header>
  <h1>Publishing Deprecated Text: Using Text-Related Tags in HTML5</h1>
  <p>I wrote <s>Android Apps for Absolute Beginners 1st Ed.</s> in 2010.</p>
  <p>I wrote <b>Android Apps for Absolute Beginners 4th Ed.</b> in 2017.</p>
  </header>
 </main>
</body></html>

接下来，让我们看一下 delete ~~标签，它用于已被删除并使用 insert~~ 标签替换的文本。使用和进行文件更新或修改。

HTML5 浏览器通常会在删除的文本上画一条线，并在插入的文本下加下划线。我们在这里包含了标签，因为它与删除标签一起使用，并提供了完全相反的功能。下面是和标签，用来更新我的《绝对初学者的安卓应用》(Apress，2014)书:

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body>
 <main>
  <header>
  <h1>Publishing Deprecated Text: Using Text-Related Tags in HTML5</h1>
   <p>I wrote <del>Android Apps for Absolute Beginners 3rd Ed. (2014)</del>

              <ins>Android Apps for Absolute Beginners 4th Ed. (2017)</ins>

      for Apress, an imprint of International Publisher Springer.</p>
  </header>
 </main>
</body></html>

让我们把短语标签留到下一章；之后，您就可以进入列表、表单和表格了。

摘要

在本章中，您了解了 HTML5 和以前版本中支持的 20 种文本发布标签，包括用于格式化文本的标签、用于样式化文本的标签、用于断开(分隔和间隔)文本的标签、用于调整文本大小的标签、用于文本方向的标签、用于引用的文本、用于引用的文本以及用于特殊类型文本环境的标签。在下一章中，您将看到短语标签，它支持在 HTML5 文档、网站和应用中发布非标准的基于文本的内容。

十二、HTML5 短语标签：使用非标准文本

现在让我们来看一下 HTML5 中的短语标签，它允许开发人员通过使用样式、定义、提示、格式化、电传和键盘输入、计算机编码、变量等来实际控制浏览器对基于文本的内容的吸收和分类。这些更加专门化的文本相关标记允许 HTML5 开发人员定义他们的文档内容，而不必求助于使用样式表进行样式化，或者使用 JavaScript 进行编码相关活动。

在这一章中，你将看到在 HTML5 中实现非标准文本内容的短语标签。这些包括用于编码相关文本的强标签(如粗体)、强调标签(如斜体)、代码标签、变量标签和样本标签、用于术语定义的定义标签、用于键盘数据输入的键盘标签以及用于电传数据输入的电传标签。</dfn></samp>

HTML5 短语标签:特殊文本内容

本章涵盖了 HTML5 中支持的与文本相关的“短语标签”。它们用于创建非标准类型的文本内容，以便在文档、网站或应用中发布。它们中的大多数在 HTML 的遗留版本中受到支持。和标签更新了 HTML5 中的语义定义；我在适用的地方指出这一点。这些标签还被用作第十章中的语义标签和第十一章中的文本发布标签的子标签。短语内容被封装(包装)在标准化的语义和文本容器中，以便搜索引擎机器人(索引和排名算法)可以正确地实现 Web 3.0 语义搜索。

表 12-1 显示了可用于定义、样式、输入和编码的八个短语标签。

表 12-1。

Eight HTML Text Content Publishing “Phrase Tags”

| 文本短语标签 | 文本短语标签用法 | | --- | --- | | 无引线 | 定义术语的定义实例 | | 强烈的 | 定义一个重要的术语或陈述 | | 全身长的 | 定义强调的术语或陈述 | | keyboard 键盘 | 定义键盘输入 | | 电汇 | 定义电传输入(HTML5 不支持) | | 密码 | 定义计算机代码列表或片段 | | 玉米片 | 定义计算机代码示例输出 | | 定义变量 | 定义计算机代码变量 |

让我们看看逻辑部分中的短语标签，就像它们在这个表中的排列一样，从 HTML5 短语标签开始，用于样式化、和。它们以这样或那样的方式为 HTML 呈现引擎定义了重要的内容，因此也应该被认为是语义标签。每一款都有自己独特的造型。**

HTML5 短语样式:突出显示重要文本

短语样式标签的用法很像粗体标签。标签的用法很像斜体的标签。还有一个更专业的标签，用于从语义上定义文档中的重要术语或缩写，以便搜索引擎理解对内容元素的强调。******

DFN 标签:HTML5 文档的定义术语

definition 标签表示您在 HTML5 文档、网站或应用中使用的术语的“定义实例”。这个定义实例是特定术语在给定文档中的第一次使用。这个标签的父标签需要包含子标签中定义的术语的定义或解释。您可以不使用任何参数定义一个元素，如下面的 HTML5 标记示例所示:

<p>Did you know <dfn>JSON</dfn> stands for: JavaScript Object Notation?</p>

标签通常也与全局标题属性或参数一起使用，因此当鼠标悬停在已定义的术语上时，可以看到它的定义。下面的 HTML5 标记显示了这样一个例子:

<p>Did you know that <dfn title="JavaScript Object Notation">JSON</dfn>
   stands for: JavaScript Object Notation and can be used with HTML5?</p>

标签也可以用作标签的父标签，你在第十一章中看到过，有些人认为它也是一个短语标签。

为了让鼠标悬停功能正常工作，您需要确保 title 属性或参数存在于标记内，该标记本身在元素内。这是使用下面的 HTML5 标记完成的:

<p>HOT TIP: <dfn><abbr title="JavaScript Object Notation">JSON</abbr></dfn>
   stands for JavaScript Object Notation and can be utilized with HTML5?</p>

还可以向元素添加一个全局 id 属性，这样就可以通过使用 href 参数或者在 CSS3 样式表中并通过 JavaScript 代码来引用它。这显示在下面的 HTML5 标记中:

<p>Do you know <dfn id="json" title="JavaScript Object Notation">JSON</dfn>
   stands for JavaScript Object Notation, and it can be used with HTML5?</p>

如果在使用 JSON 术语时设置如下，您的标记可以通过使用

<p>If you want to learn <a href="#json">JSON</a>, check out Wallace
   Jackson's Apress Title: <q>JSON Quick Syntax Reference (2016).</q></p>

接下来，让我们看看一种特殊类型的短语标签，称为标签。此标签专门用于突出显示文档设计中的重要或关键信息。

强标签:定义重要的文本和术语

标签是粗体标签的语义搜索版本，因为它不仅将文本样式加粗，还为包含在和标签中的术语或短语指示更大的重要性或“强度”。这告诉语义搜索算法什么是重要的，这允许它在语义人工智能的尝试中做得更好。****

让我们用一个标签来增加我作为作者的重要性。这个例子应该在< strong >和< /strong >标签中包含我的名字，如下面的 HTML5 标记所示:

<p>If you want to learn <a href="#json">JSON</a>, check out <strong>Wallace
   Jackson's</strong> Title: <q>JSON Quick Syntax Reference (2016).</q></p>

这应该会让我的名字在搜索引擎中的排名略有提升，至少相对于使用粗体标签来说是这样，因为它告诉搜索引擎算法，作为内容开发者，我正在赋予自己更高的重要性。有些人告诉我，我这样做太多了；然后我简单地引用 SEO 作为我继续这样做的借口。

EM 标签:强调重要的文本和术语

标签是斜体标签的语义搜索版本，因为它不仅使文本风格变为斜体，还表示对包含在和标签中的术语或短语的更大关注或“强调”。这告诉语义搜索算法什么是重点，这允许它在搜索引擎试图实现语义人工智能时做得更好。**

让我们使用一个标签来强调前面例子中的书名。这个例子将书名包含在< em >和< /em >标签中。从引用标签到强调标签的这种变化显示在下面的 HTML5 标记中:

<p>If you want to learn <a href="#json">JSON</a>, check out <strong>Wallace
   Jackson's</strong> Title: <em>JSON Quick Syntax Reference (2016).</em>

</p>

这一变化将使用引号来描述书名的样式改为使用斜体，就像这样:JSON 快速语法参考。

接下来，让我们看看模拟键盘和电传数据输入的短语标签。电传打字机，或称 TTY，是一种机电打字机，通过各种类型的通信信道，点对点和点对多点地发送和接收打字信息。它是今天流行的传真机的早期前身。

HTML5 短语输入标签:键盘和电传打字机

表 12-1 中显示的下两个标签定义了短语文本样式，这使得它看起来好像正在执行自定义输入。这些通常会将浏览器中的文本字体样式更改为需要键入的字体，如 Courier 或等宽字体。值得注意的是，这些标签实际上并没有添加从外部物理硬件设备获取文本的功能，而只是使文档中与这些标签一起使用的文本看起来好像正在发生，因此这些标签是输入样式，而不是以前的强调样式标签。让我们先来看看键盘< kbd >标签，因为它在 HTML5 中仍然受支持，并且它是您想要用来在文档中模拟键盘输入的标签。

KBD 标签:定义键盘输入

标签指定 HTML5 文档、网站和应用中的键盘输入(或 HTML5 的电传输入，不再支持标签)。一个文档中可以使用多个标签。这个标签使用下面的样式定义；如果您愿意，可以将其更改为在外部 CSS 样式表中指定 Courier 字体:```html`

kbd { font-family: monospace; }
kbd { font-family: Courier; }      // This CSS3 will simulate a typewriter
kbd { font-family: 'Lucida Console'; } // This CSS3 will simulate Teletype

```html

让我们使用 `tag to change the book title style to look like a font that is used in coding. An example of this is shown in the following HTML5 markup:`

If you want to learn JSON, check out Wallace Jackson's Title: JSON Quick Syntax Reference (2016).


接下来，我们来看看 `tag, which should be used in HTML versions earlier than HTML5 to simulate a Teletype machine in an HTML5 document or application.`

#### TT 标签:定义电传输入

`标签为 HTML5 之前的 HTML 版本指定电传输入，HTML 5 不再支持`标签。一个文档中可以使用多个`标签。这个`标签使用下面的样式定义；如果您愿意，可以将它更改为在外部 CSS 样式表中指定 Courier 字体或等宽字体:````

```html
tt { font-family: monospace; }    // This CSS3 will simulate a keyboard!
tt { font-family: Courier;   }   // This CSS3 will simulate a typewriter!

让我们用这个 tag to change the book title style to look like the font used in Teletypes. An example of this is shown in the following HTML5 markup:

<p>If you want to learn <a href="#json">JSON</a>, check out <strong>Wallace
   Jackson's</strong> Title: <tt>JSON Quick Syntax Reference (2016).</tt>

</p>

接下来，让我们看看模拟计算机代码工作的短语标签。

HTML5 短语编码标签:代码和变量

表 12-1 中显示的最后三个短语标签允许你设置文本元素的样式，看起来像是计算机编码相关的内容。这是通过使用代码片段<代码>，样本输出< samp >，以及代码变量< var >标签来完成的。

代码标签:代码示例清单和代码片段

标签定义了一个“代码片段”，它是一个代码片段或部分代码清单。通常，整个代码清单都太长了，但是可以使用这个短语标记来设计整个代码清单的样式。标签的 CSS3 设置默认使用等宽字体来设置代码文本的样式，如以下 CSS3 定义所示(包括其他与编码相关的字体系列样式选项):``

code { font-family: monospace; }     // Default Style for the <code> element
code { font-family: Courier; }      // This CSS will simulate the typewriter
code { font-family: 'Lucida Console'; } // This CSS will simulate a Teletype

让我们使用标签来展示来自我的 Pro Java 9 Games Development(a press，2017)一书的 Java 9 代码片段，如以下标记所示:

<p>If you want to learn <a href="#java">JAVA</a>, check out <strong>Wallace
   Jackson's</strong> Title <em>Pro Java 9 Game Development (2017).</em>
   Here is a sample snippet of Java 9 code from this upcoming Java 9 Game
   Development programming title:
   <code>

   legalButton.setOnAction(new EventHandler<ActionEvent>() {
       @Override
       public void handle(ActionEvent event) {
           infoOverlay.getChildren().clear();
           infoOverlay.getChildren().addAll(copyText, riteText);
           infoOverlay.setTranslateY(380);
           infoOverlay.setLineSpacing(-9);
           uiContainer.setBackground(uiBackground3);
           boardGameBackPlate.setImage(transparentlogo);
       }
   });
   </code>

</p>

接下来，我们来看看示例输出标签。

SAMP 标记:添加示例代码输出

标签用于定义代码输出，即运行代码的结果。标签的 CSS3 设置默认使用等宽字体来设置代码文本的样式，如下面的 CSS3 定义所示:

samp { font-family: monospace; }     // Default Style for a <samp> element
samp { font-family: Courier; }       // This CSS will simulate a typewriter
samp { font-family: 'Lucida Console'; } // This CSS will simulate a Teletype

让我们使用这个标签来展示一个 Hello World 代码示例，它摘自我即将出版的 Pro Java 9 Games Development(a press，2017)一书，如下面的 HTML5 标记所示:

<p>If you want to learn <a href="#java">JAVA</a>, check out <strong>Wallace
   Jackson's</strong> Title <em>Pro Java 9 Games Development (2017).</em>
   Here is a sample snippet of Java 9 code output from Chapter 6 in the
   upcoming Pro Java 9 Games Development programming title:
   <samp>

           Hello World!
   </samp>

</p>

接下来，我们来看看代码变量标签。

VAR 标签:添加代码变量

tag defines code variables, which are the data values within your code. The CSS3 setting for the <var> tag defaults to using the italics to style the code text, as shown in the following CSS3 definition:

var { font-style: italic; }    // Default Style for the <var> tag is italic
var { font-style: italic; font-family: monospace; } // italic monospace font

tag is usually nested inside a tag, as variables exist inside code. Let’s use the tag to style variables in the `tag example in the following markup:```html

<code>legalButton.setOnAction(new EventHandler<ActionEvent>() {
      @Override
      public void handle(ActionEvent event) {
         infoOverlay.getChildren().clear();
         infoOverlay.getChildren().addAll(<var>copyText, riteText</var>);
         infoOverlay.setTranslateY(380);
         infoOverlay.setLineSpacing(-9);
         uiContainer.setBackground(uiBackground3);
         boardGameBackPlate.setImage(transparentlogo);
      }
   });</code>

```html

## 摘要

在这一章中，你学习了 HTML5 和以前版本中的短语标签支持，包括<dfn>、*、**、`、`、`、`和<samp>标签。在下一章，你将看到 HTML5 列表标签。</samp>````***</dfn>

# 十三、HTML5 列表：编号、项目符号和定义列表

接下来让我们讨论 HTML5 的六个列表创建标签，它们允许开发人员使用编号(甚至字母)列表、项目符号列表或定义列表来创建不同类型的基于列表的内容。这些更加专门化的文本相关标签允许 HTML5 开发人员只使用半打标签就可以非常灵活地定义他们的文档列表内容。这些列表标签具有内在的语义，因为它们清楚地定义了列表和顺序，以及列表描述和术语。

在本章中，您将学习列表标签，它在 HTML 中实现基于列表的内容，因为所有的标签在 HTML 4.01 中都受支持，一些标签在 HTML 的早期版本中也受支持。

这些标签包括列表

*   Label, ordered list

    label, description term

    label and description data

    label.

## HTML5 列表标签:有序信息

本章涵盖了 HTML5 中支持的六个文本相关的“列表标签”。它们创建有序的信息集合，很像 JavaScript 编程中的数组，但风格像列表或数据定义集合，类似于您对基本 JSON 定义的体验，如 JSON 快速语法参考(Apress，2016)中涵盖的那些。所有这些标签在 HTML 的旧版本中都受支持；一些标签甚至可以追溯到 HTML 2.0，我会在适用的地方指出这一点。这些列表标签最好用作第十章中所涉及的语义标签的子标签，以便基于列表的内容被封装(包装)在标准化的语义容器中，从而搜索引擎机器人(索引和排名算法)最好地实现 Web 3.0，这是互联网的未来:语义搜索。表 13-1 显示了 HTML5 中支持的六个列表标签。

表 13-1。

Six HTML Content Publishing Tags for Creating Lists

<colgroup><col> <col></colgroup> 
| HTML5 列表创建标签 | HTML5 列表创建标记用法 |
| --- | --- |
| 里 | 定义列表项 |
| 开环（同 Open Loop） | 定义一个有序列表 |
| 保险商实验所 | 定义一个无序列表 |
| 分升 | 定义定义列表 |
| 震颤性精神错乱（Delirium Tremens 的缩写） | 定义定义术语 |
| 截止日期（Deadline Date 的缩写） | 定义定义数据 |

让我们来看看逻辑部分中的这些列表创建标签，按照它们在此表中的排列方式，从“核心”HTML5 列表标签

*   ,, ??]. These define important content lists or collections for the HTML rendering engine. For this reason, these list tags should also be considered as semantic search tags.
    、开始。这些为 HTML 呈现引擎定义了重要的内容列表或集合。由于这个原因，这些列表标签也应该被认为是语义搜索标签。

### HTML5 风格化列表:有序列表和项目符号列表

HTML 支持中最早的列表标签是最常用的:列表项

*   Tag, which specifies each item in the list and its parent tag

#### LI 标签:用于定义每个列表项的核心列表标签

标签

*   Each "member" in the list is defined, and there is a start tag around the word, sentence or text block of the list member.*   And an end tag.。使用*   The correct way to label is as

    1.  Elements are very tolerant and render them without a parent

        *   correctly.

让我们使用语义标签来创建包含汽车类型的项目符号的两个部分区域。我们将扩展第十章中的语义标签示例，并添加项目符号列表(使用默认的无序列表< ul >父标签)。这是使用以下 HTML5 标记完成的:

```html
<!DOCTYPE html><html>
<head><title>Exotic and Domestic Cars</title></head>
<body>
 <section id="exotic car list">
  <h1>European Exotic Car Brand List</h1>
   <ul>
    <li>Ferrari</li>

    <li>Lamborghini</li>

    <li>Porsche</li>

    <li>Bugatti</li>

   </ul>
 </section>
 <section id="domestic car list">
  <h1>American Domestic Car Brand List</h1>
   <ul>
    <li>Cadillac</li>

    <li>Buick</li>

    <li>Jeep</li>

    <li>Lincoln</li>

   </ul>
 </section></body></html>

接下来，让我们看看无序列表

Member.

UL 标签:定义和样式一个无序列表容器

13-2

表 13-2。

Two HTML Parameters for Creating Unordered Lists

| 无序列表参数 | 无序列表参数用法 | | --- | --- | | 类型 | 定义项目符号类型(圆盘形、圆形、方形) | | 紧密的 | 定义要呈现的列表:较小 |

让我们看看如何配置

让我们使用 type 参数将第一部分列表的标准圆盘项目符号更改为方形项目符号，并将第二部分列表的项目符号更改为空心项目符号(称为圆形)。这是通过下面的 HTML 标记完成的(在 HTML5 中是使用 CSS3 完成的):

<!DOCTYPE html><html>
<head><title>Exotic and Domestic Cars</title></head>
<body>
 <section id="exotic car list">
  <h1>European Exotic Car Brand List</h1>
   <ul type="square">

    <li>Ferrari</li>
    <li>Lamborghini</li>
    <li>Porsche</li>
    <li>Bugatti</li>
   </ul>

 </section>
 <section id="domestic car list">
  <h1>American Domestic Car Brand List</h1>
   <ul type="circle">

    <li>Cadillac</li>
    <li>Buick</li>
    <li>Jeep</li>
    <li>Lincoln</li>
   </ul>

 </section>
</body>
</html>

请注意，大多数(如果不是全部的话)HTML5 浏览器仍然应该遵守 type 参数，实现正确的项目符号类型，即使该参数在 HTML5 中不再受支持。

接下来让我们看看有序列表

OL 标签:定义和样式化有序列表容器

标签定义了基于列表的内容，这些内容被编号，使用罗马数字，或者使用字母指示符来确定有序列表中成员的顺序。

13-3

表 13-3。

| Ordered list parameter | Ordered list parameter usage | | --- | --- | | type | Define the sort type (1, a, a, I or I) | | reverse | Define numbering direction (backward) |

让我们来看看如何配置这个

要使用从数字 4 开始向后计数的编号排序，可以为第一部分的列表指定以下参数:

<!DOCTYPE html><html>
<head><title>Exotic and Domestic Cars</title></head>
<body>
 <section id="exotic car list">
  <h1>European Exotic Car Brand List</h1>
   <ol type="1" start="4" reversed>

    <li>Ferrari</li>
    <li>Lamborghini</li>
    <li>Porsche</li>
    <li>Bugatti</li>
   </ol>

 </section>
 <section id="domestic car list">
  <h1>American Domestic Car Brand List</h1>
   <ol type="A">

    <li>Cadillac</li>
    <li>Buick</li>
    <li>Jeep</li>
    <li>Lincoln</li>
   </ol>

 </section>
</body>
</html>

第二部分使用大写字母字母顺序，用 type="A "参数表示。要使用罗马数字，请使用 type="I "参数设置。使用这些类型设置倒计数或从任意字母或罗马数字开始计数通常是不符合逻辑的，但这样做是可能的。

接下来，我们来看看 HTML5 描述列表。HTML5 之前的 HTML 版本将

标记定义为定义列表(这在语义上并不相关)。

HTML5 描述列表:带数据的术语列表

表 13-1 中的最后三个标签允许你定义一个描述列表。在 HTML 4.01 中，一个< dl >被称为“定义列表”该列表包含一组术语和定义。这些术语和定义代表“多对多”的相互关系，如一个或多个术语与一个或多个定义相匹配。这个 HTML 元素因此被误解，随后被误用，或者根本不被使用。更糟糕的是，这个定义列表不能用于语义搜索。

为了解决

标签的所有问题，HTML5 将这个标签重新定义为一个描述列表。< dl >元素表示由零个或多个名称-值对或名称-值组组成的关联(相关)数据列表。

名称-值对由描述项

及其描述数据

值组成，这与 JSON 键-值对非常相似。名称-值组由一个或多个描述项

元素组成，后跟一个或多个描述数据

元素形式的值。

在单个描述列表

元素中，每个描述术语名称不能有多个描述术语

元素；也就是说，在描述列表

父容器中不能有重复的

元素。

名称-值对和名称-值组可以是术语和定义、元数据主题和值、问题和答案，或者任何其他名称-值数据对或分组。

熟悉 JSON 的人可能会看到用于定义 JSON 数据定义结构和对象符号结构的键值对之间的相似之处。

DL 标签:定义描述列表父容器

标签定义了描述列表的最顶层。这里显示了为

标签定义的默认 CSS3，仅供参考。它使描述列表中的数据间隔非常近，在数据对/组的描述列表块周围的间隔最小:

dl { display: block;
     margin-top: 1em;
     margin-bottom: 1em;
     margin-left: 0;
     margin-right: 0; }

让我们使用

标签以及

和

标签，在我们的内容设计示例部分中为意大利异国汽车品牌和型号定义一个数据数组。这个例子如下面的 HTML5 标记所示:

<!DOCTYPE html><html>
<head>
 <title>Exotic and Domestic Cars</title>
</head>
<body>
 <section id="exotic car list">
  <h1>Italian Exotic Car Brand Description List</h1>
  <dl>

   <dt>Ferrari</dt><dd>LaFerrari</dd>
   <dt>Bugatti</dt><dd>Chiron</dd>
   <dt>Maserati</dt><dd>GranCabrio</dd>
   <dt>Lamborghini</dt><dd>Gallardo</dd>
  </dl>

 </section>
</body>
</html>

接下来，我们来看看定义术语

标签。

DT 标签:定义每个描述术语子元素

标签定义了每个键-值数据对的描述术语，正如您在上一节中看到的。此处显示了为此

标签定义的默认 CSS3(仅供参考):

dt { display: block; }

接下来，我们来看看定义数据

标签。

DD 标签:定义每个描述数据子元素

标签在描述列表中保存描述数据。在

标签中，你可以放置段落、换行符、图片、链接、其他列表以及类似的基于文本的内容。您可以在前面的示例中看到标签的用法。这里显示的

标签的默认 CSS 仅供参考:

dd { display: block; margin-left: 40px; }

接下来，当我们在下一章看 HTML 表格标签的时候，让我们看看另一种安排数据的方式，表格格式。

摘要

本章描述了 HTML5 及之前版本中对列表标签的支持，包括

、??、??

、

和

标签。在下一章中，您将看到 HTML5 标签，这些标签支持在 HTML5 文档和应用中发布基于表格的内容。