HTML5-快速标记参考-全-
HTML5 快速标记参考（全）
一、HTML5 历史：HTML 标记的过去和未来
让我们从看一下标记语言的历史开始，其中 HTML——现在在其第五个修订版中，称为 HTML 5——是最流行和使用最广泛的。今年(2016 年)预示着 HTML5 的另一个版本 HTML5.1 的发布，它不仅支持在所有流行的浏览器上使用 HTML 5，还支持最近作为 Android、iOS 和 Windows Mobile 的竞争对手出现的新的 HTML 5 操作系统。浏览器制造商——特别是 Opera、Mozilla Firefox 和谷歌 Chrome——意识到他们可以增强浏览器代码，添加图标，在 Linux 内核上运行 HTML5，并与其他消费电子操作系统竞争。现在，火狐操作系统在松下互动电视和阿尔卡特朗讯智能手机上运行，Opera HTML5 操作系统在索尼 Bravia 互动电视上运行。HTML 5.1 增加了更符合 HTML5 OS 要求的特性。
这本书提供了所有这些 HTML5 标签及其参数、属性、特征和配置选项的参考，目前有 120 个或更多。我尽可能逻辑地组织这些内容，从 HTML5 文档的顶部开始，使用搜索引擎优化(SEO)、样式(CSS)或交互性(JavaScript)的元标记，并对章节进行逻辑分层，涵盖用于写作(文本)、表单、列表、多媒体以及类似文档功能和属性的标记。
除了 HTML 的历史和未来，本章还概述了标签和参数用法的标记(编码)格式或语法，以便理解本书的其余部分，因为我们涵盖了用于实现文档功能的 120 个 HTML5 标签，以及它们支持的参数。
最后，我概述了本书的其余部分，向您展示我如何将 HTML5 规范中的 120 个 HTML 标记组织和引用到逻辑主题区域中，这些区域以有序的方式建立在彼此之上。
HTML 的历史:揭示代码标签
我第一次遇到用于格式化文本值的标记，是在使用一个名为 WordPerfect 的文字处理软件包用于数据通用 MV-7800XP 小型计算机时。这个软件有一个方便的功能，叫做显示代码，可以使用键盘顶部的第三个功能键 F3 来访问。使用此功能会显示格式化文本值周围的控制代码，因此当您按下 F3 显示代码键时，粗体字 Important 看起来像 Important 。相当酷的功能！
一个叫做 ENQUIRE 的系统是 HTML 的另一个前身。1980 年，物理学家蒂姆·伯纳斯·李设计了 ENQUIRE 原型，这是一个供 CERN 研究人员利用和共享基于文本的文档的系统。1989 年，伯纳斯-李提出了一个基于互联网的超文本系统。他在 1990 年末详细说明了 HTML 并编写了浏览器和服务器软件。伯纳斯-李和 CERN 数据系统工程师罗伯特·卡里奥合作，然而，该项目从未被 CERN 采用。
第一个公开可用的 HTML 描述是一个名为“HTML 标记”的文档，由 Berners-Lee 于 1991 年末在互联网上首次提及。该文件描述了 18 个要素。除了超链接标记，它们都受到 SGMLguid 的影响，SGMLguid 是 CERN 开发的内部标准通用标记语言(SGML)文档格式。今天，HTML5 中仍有 11 个原始的标记格式元素处于活动状态。这本书涵盖了它们。
Berners-Lee 还认为 HTML 的标记标签是 SGML 的一种应用。在 1993 年中期，因特网工程任务组(IETF)对称为“超文本标记语言(HTML)”的 HTML 规范的第一个建议的公开中，HTML 被正式定义为这样。它是由蒂姆·伯纳斯·李和丹·康诺利作为互联网规范发布的。还有“SGML 文档类型定义”，它定义了 HTML 语法和文法。类似地，Dave Raggett 在 1993 年晚些时候发布的竞争性互联网草案“HTML+(超文本标记格式)”建议标准化已经实现的功能，如表格和可填充的表单。
在这些早期的 HTML 和 HTML+草案于 1994 年初到期后，IETF 创建了 HTML 工作组，该工作组于 1995 年完成了 HTML 2.0 草案。这是第一个 HTML 规范，旨在成为事实上的标准，所有未来的 HTML 实现都应该与之进行比较。在 IETF 的支持下，由于利益冲突，HTML 的进一步发展停滞不前。
自 1996 年以来，HTML 规范一直由万维网联盟(也称为 W3C)根据商业软件供应商的输入进行维护。2000 年，HTML4 成为国际标准，ISO/IEC 15445:2000。HTML5 于 2014 年第四季度发布，HTML 5.1 计划于 2016 年底发布，这也是本书涵盖它的原因。
HTML5 是什么？定义和语法
HTML 是一种标记语言，web 浏览器以及最近的操作系统都使用它来解释文本、图像和其他材料，并将其组合成可视或可听的内容页面，以供人们广泛使用，也供观看 HTML5 电视节目的人使用。
使用 HTML5 标记表示的每个项目的默认特征及其参数在浏览器中定义。这些特征可以通过网页设计者使用 CSS 或 JavaScript 来改变或增强，尽管这些在本参考书中没有涉及。
HTML 标记(以及其他标记语言，如 SGML 和 XML)使用标记来包围您希望增强的文档组件。例如，要使文本加粗，可以按以下方式使用 HTML 标签:
<p><b>This text will be bold.</b> And this text will not be bold.</p>
结束标签在定义标签的一个或多个字母前有一个反斜杠；它告诉解析文档的引擎(代码)关闭这个特性。一个
段落标签告诉 HTML5 渲染引擎你将要插入一个文本段落(
)；一个粗体()标签告诉它什么时候你想打开和关闭粗体。
标签需要以正确的顺序嵌套，因此 bold 标签应该包含(嵌套)在段落标签中，如前面的 HTML5 标记示例所示。
打开特性的第一个标记也可以有可选的参数，或者用于配置您希望该标记如何表现的特性。下面是一个使用参数的示例:
<a title="Anchor Tag" href="http://www.apress.com">APRESS WEBSITE LINK</a>
这个锚(
HTML5 的更多语法:使用注释
因为这整本书本质上是一个 HTML5 标记参考，它使用了上一节介绍的基本语法(标记编码结构),所以我现在将讨论 HTML5 中如何处理注释；这样，我们就可以解决所有的语法问题，以及 HTML5 内容开发的历史和未来。
HTML5 注释标签类似于 Java 9 和 JavaScript 等其他编程语言的注释标签。它们以向左的 v 形()字符开始。以下是 HTML5 中的注释示例:
<!-- This is an example of how a comment is constructed in HTML5 -->
接下来，让我们看看 HTML5 的发展方向，这样你就知道这本快速标记参考书对你的新媒体内容交付工作流程有多重要。
HTML 的未来:HTML5 操作系统和 HTML 5.1
在谷歌收购 Android 并开始主导消费电子设备市场之前，HTML 仅用于浏览器，直到今天，仍有 100 多家制造商将 Android 用于 iTV 电视机、智能手机、平板电脑、电子书阅读器、机顶盒，甚至个人电脑。HTML5 浏览器制造商不想被排除在这个利润丰厚的市场之外，他们通过添加图标等功能，并将他们的代码和技术与最新的 Linux OS 内核相结合，将他们的浏览器改造成 HTML5 OS 产品，该内核为流行的 Android OS 和许多其他流行的操作系统提供动力。
HTML 现在不仅用于为流行的浏览器软件制作内容，还用于消费电子设备，这意味着必须添加标签，因为 HTML5 和 HTML 的未来版本(如 HTML 5.1)有更高级的用法(操作系统)。
HTML 5.1 是添加操作系统相关功能的一个即将到来的解决方案，它继续添加高级功能，支持新的媒体内容开发。操作系统用户界面支持新的
接下来，让我们看看如何覆盖这些标签。
HTML5 快速参考:标签类别
这本书以“自顶向下”的方式从文档的最高层开始研究 HTML5 标签。我们从定义 HTML5 文档区域的标签和位于文档顶部的标签开始，这些标签定义 SEO (meta 标签)和外部文档(如 CSS 和 JS 文档和 favicons)，它们从外部文件资源链接到 HTML5 文档。前四章介绍了定义 HTML5 文档基础结构的标签。
第 2 到 9 章涵盖了基础知识，如超文本(链接到其他 URL)、新媒体素材(如图像、音频和视频)以及文档内容层次和标题级别。
第 10 到 15 章涵盖了基于文本的元素，如段落、列表、表单和表格，其中包含了当今 HTML5 文档和应用中大多数基于文本的内容。这些章节有点长，因为在 HTML 中有相当多的标签与这些区域相关。
第 16 到 20 章涵盖了更高级的主题，比如文档定位、划分、文档样式、CSS3、文档交互性、JavaScript、使用画布的文档渲染以及文档对象。
第 21 到 23 章涵盖了不常用的标签和 HTML 5.1。我还包括几个附录，涵盖了如何设置 HTML5 IDE，以及如何获得高级开源新媒体内容开发包，以便您可以使用单个内容开发工作站开发整个 HTML5 项目。
摘要
本章着眼于 HTML 的历史、未来、定义、语法、评论，并总结了本书计划如何对目前构成 HTML5 和 HTML 5.1 特性集的 120 个标签进行分类和引用。
在下一章中，您将了解顶级文档标签，如、和，以及它们如何定义 HTML5 内容文档的整体结构。
二、HTML5 文档：顶级文档定义
在这一章中，让我们继续来看看 HTML5 的最顶层，标签，它定义并包含你的 HTML5 文档，标签，它定义它是如何配置的，以及标签，它处理内容。这些是 HTML5 标记模式中最高级的标签。所有这三个标签都需要在你的 HTML5 文档中，按照正确的顺序，用于正确的目的。
我还介绍了 HTML5 文档级标签的标记(编码)格式和语法，以及它们的可选参数。我们看看如何使用一个标签定义你的文档类型，以及不同类型的 HTML 文档。正如您从标题中注意到的那样，我们在这本参考书中主要关注 HTML5，但出于上下文考虑，我也涵盖了较老的版本，如 HTML4 和 XHTML。
HTML5 文档定义标签
本章解释了用于定义 HTML 文档类型、文档根、文档标题和文档内容的标签。我们从第一个标签开始，即定义文档类型的声明，然后我们向下处理嵌套在标签中的标签，包括和标签。
那个！DOCTYPE 标签:定义 HTML 文档类型
HTML5 文档中的第一个标签是标签，它没有结束标签，因为它只是定义了 HTML5 的版本。你会以为会是，但 html 其实就是 HTML5 的意思。不要问我为什么，我不知道。
以下 HTML5 标记结构是文档声明和嵌套顶级标记的示例:
<!DOCTYPE html>
<html>
<head>
<!-- HTML5 Document Header Attributes (Tags) Go In Here -->
</head>
<body>
<!-- HTML5 Document Body Content (Tags) Will Go In Here -->
</body>
</html>
旧的 HTML 文档类型，如 HTML4 或 XHTML 1.1，是用“严格”或“过渡”文档类型声明的。HTML5 消除了文档类型的差异；所以，就简单多了。接下来让我们快速看一下 XHTML 和 HTML4，以防您必须为运行旧操作系统和浏览器的遗留(旧)系统和客户端编写 HTML。
XHTML 文档类型:XHTML 1.0
XHTML 或可扩展 HTML 是一种基于 XML 的更古老、更严格的 HTML 文档定义。XHTML 是 HTML 的 XML 实现。它更严格，因为标签必须以有序的方式打开、关闭和嵌套，这样解析器才能正确地解释它们。XHTML 文档类型也需要标记，而 HTML5 文档类型不需要，所以一些 HTML5 文档只是以标记开始，而不是以 标记序列开始。所有主流的 HTML5 浏览器都能正确解析 XHTML 文档类型；但是，您希望使用 HTML5，因为它提供了特性和标签的超集(我将在本书中概述)。因为 XHTML 仍然在广泛的文档内容和应用中使用，所以我将在本节中介绍它，以便您知道如何声明 XHTML 文档类型，如果您愿意的话。
如果出于某种原因，您正在使用较旧的 XHTML 文档类型，您可以按如下方式声明文档类型:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3org/TR/xhtml1/dtd/xhtml1-transitional.dtd"> <html>
<head>
<!-- XHTML Document Header Attributes (Tags) Go In Here -->
</head>
<body>
<!-- XHTML Document Body Content (Tags) Will Go In Here -->
</body>
</html>
“严格”的 XHTML 文档类型不太灵活。您应该使用以下 HTML 语法和标记来声明此文档类型:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN
"http://www.w3org/TR/xhtml1/dtd/xhtml1-strict.dtd">
<html>
<head>
<!-- XHTML Document Header Attributes (Tags) Go In Here -->
</head>
<body>
<!-- XHTML Document Body Content (Tags) Will Go In Here -->
</body>
</html>
“框架集”XHTML 文档类型允许您使用称为框架的离散区域来定义 HTML 文档。应该使用以下 HTML 语法和标记声明 XHTML 框架集文档类型:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN
"http://www.w3org/TR/xhtml1/dtd/xhtml1-frameset.dtd"> <html>
<head>
<!-- XHTML Document
Header Attributes (Tags) Go In Here -->
</head>
<body>
<!-- XHTML Document Body Content (Tags) Will Go In Here -->
</body>
</html>
HTML5 中不再推荐使用框架。您现在可以使用带有
标签的除法。除法可以像 Photoshop 或 GIMP 中的图层一样使用。它们更加灵活，可以移动(动画)。
接下来，我们来看看 HTML 4.01 文档类型。
HTML4 文档类型:HTML 4.01
HTML4 于 1997 年 12 月 18 日发布。HTML 4.01 于 1998 年 4 月 24 日发布。在 HTML4 之前有两个主要版本:HTML 3.2 和最初的 HTML 2.0 规范。HTML4 增加了更好的多媒体支持、级联样式表、Java 脚本语言、打印功能和对残疾用户的支持。它也开始了国际化(语言)支持。HTML4 符合 ISO 8879 SGML 规范。HTML4 文档使用一个复杂得多的！DOCTYPE 标记实现，使用 SGML 的文档类型定义(DTD)声明语法以及存储库 URL 引用。
如果出于某种原因您正在使用较旧的 HTML4 文档类型，您可以按如下方式声明文档类型:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN
"http://www.w3org/TR/html4/loose.dtd" >
<html>
<head>
<!-- HTML4 Document Header Attributes (Tags) Go In Here -->
</head>
<body>
<!-- HTML4 Document Body Content (Tags) Will Go In Here -->
</body>
</html>
过渡 HTML 4.01 更宽容，因为它支持更多的标签、参数和语法格式；而严格的 HTML 更像 XML 或 XHTML，有更多需要严格遵守的规则。您按如下方式声明 HTML4 文档类型:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 //EN
"http://www.w3org/TR/html4/strict.dtd" > <html>
<head>
<!-- HTML4 Document Header Attributes (Tags) Go In Here -->
</head>
<body>
<!-- HTML4 Document Body Content (Tags) Will Go In Here -->
</body>
</html>
HTML 4.01 框架集 DTD 或文档类型定义看起来像下面的标记:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN
"http://www.w3org/TR/html4/frameset.dtd" > <html>
<head>
<!-- HTML4 Document Header Attributes (Tags) Go In Here -->
</head>
<body>
<!-- HTML4 Document Body Content (Tags) Will Go In Here -->
</body>
</html>
再说一次，框架是一种过时的文档设计方法，所以不要用它来设计，除非你绝对必须在 HTML 遗留项目中使用。接下来，我们来看看标签。
HTML 标签:定义文档的根
标签告诉浏览器(现在是操作系统)这是一个 HTML 文档，尤其是在缺少 HTML5 标记中常见的标签的情况下。标签锚定(或根)文档并包含所有其他标签。
这是一个包含子标签的 HTML 标签示例:
<html >
<head>
<!-- HTML5 Document Header Attributes (Tags) Go In Here -->
</head>
<body>
<!-- HTML5 Document Body Content (Tags) Will Go In Here -->
</body>
</html>
注意 xmlns 参数，它引用 XML 命名模式地址，默认为 www.w3.org/1999/xhtml 。
在 HTML5 中，为清单添加了第二个新参数，允许开发人员为离线浏览添加自定义文档缓存位置的 URL。下面是一个例子(用自己的缓存地址位置 URL 替换 www.apress.com 网站):
<html xmlns=http://www.w3.org/1999/xhtml manifest="http://www.apress.com">
<head>
<!-- HTML5 Document Header Attributes (Tags) Go In Here -->
</head>
<body>
<!-- HTML5 Document Body Content (Tags) Will Go In Here -->
</body>
</html>
此 HTML 标记的默认 CSS3 设置应该类似于以下 CSS3 样式表定义，在大多数浏览器和操作系统实现中使用:
html { display:block; } <!-- Display content using a block format -->
html:focus { outline:none; } <!-- Do not outline content when selected -->
接下来，让我们看看标签，了解它如何允许您设置和配置文档的功能。
HEAD 标签:配置 HTML5 文档
HTML5 标签包含了半打以上的子标签，用来配置你的 HTML5 文档，定义它能做什么以及如何在互联网上找到它。这些子标签包括
<html>
<head>
<title>
<script>
<style>
<link>
<meta>
<base>
<noscript>
</head>
</html>
该标记以前有一个 profile 属性，它指定了一个文档的 URL，该文档包含一组用于标记内容属性的规则。值得注意的是，这个特殊的参数在 HTML5 中不被支持，所以我在本书中不涉及它。
子标签包含在它们自己的章节中，所以接下来让我们看看标签。然后我们可以继续讨论 HTML5 中使用的一些低级标签。
BODY 标签:包含文档内容
标签包含了本书中的大部分标签。HTML4 中支持的所有六个标记属性(参数)已经从 HTML5 支持中移除，但是为了全面起见，我还是在本节中介绍了它们。alink 参数与颜色值一起用于定义文档正文中活动链接的颜色。vlink 参数与一个颜色值一起使用来定义被访问链接的颜色。最后，link 参数与一个颜色值一起使用，定义未被访问的链接的颜色。
您可以使用 bgcolor 参数控制背景颜色。您可以使用 background 参数安装背景图像。最后，您可以使用文本参数指定 HTML4 文档中文本的颜色，该参数与颜色值一起用于定义文档正文中内容文本的颜色。在 HTML5 中，您使用 CSS3 来提供您的身体样式。稍后我们将使用
标签的默认 CSS3 设置应该类似于以下 CSS3 样式表定义(在大多数浏览器和操作系统实现中):
body { display: block; margin: 8px; }
body:focus { outline:none; }
大多数 HTML5 文档使用不带任何参数的基本和、和标签，除了 class 或 id 参数(稍后将介绍)，就像这个带有标题的基本 HTML5 文档，P(段落)文本安装在文档的和部分:
<!DOCTYPE html>
<html>
<head>
<title>Website Title Goes Here</title>
</head>
<body>
<p>Website Text Paragraph Content.</p>
</body>
</html>
从这里，我们进入一些你用来控制你的内容和你的文档在互联网上被引用的方式的标签。
摘要
在本章中，您学习了顶级 HTML5 文档标记，包括、、和标记。请注意，标签名称可以是小写或大写字母，因此可以使用您喜欢的标记样式。
在下一章中，您将开始查看影响 SEO 的父标签中的文档标签，包括
三、HTML5 搜索引擎优化：标题和元
让我们在第三章继续看对搜索引擎优化最重要的标签，也称为 SEO。SEO 是优化你的网站在搜索引擎中排名的实践。SEO 标签位于文档定义和配置级别。这些标签包含在文件头中，在第二章中有简要介绍。以 SEO 为中心的标签包括您的<标题>标签，它定义并包含您的文档标题和关键字，以及< meta >标签，它定义 HTML5 文档如何在各种搜索引擎中列出。除了包含实际文本内容和搜索引擎用来索引和排列 HTML5 文档的关键字的段落和标题标签之外，这两个标签和< base >标签是 HTML5 标记模式中用于 SEO 的最重要的标签。我们将在本书的后面介绍这些标签，以及<主体>标签。
在这一章中，我还将介绍 HTML5 文档级 SEO 标签的标记(编码)格式和语法，以及它们的各种参数。我们看看如何使用
HTML5 HEAD 标签对 SEO 很重要
本章包括三个高级标签，用于定义你希望搜索引擎如何索引你的 HTML 文档标题、描述和内容。我们将从定义文档标题的
TITLE 标签:定义 HTML5 文档标题
文档定义部分中的第一个标签通常是
以下 HTML5 标记结构是 HTML5 文档的文档声明
<!DOCTYPE html>
<html>
<head>
<title>Title, Using Important Search Term Keywords</title>
</head>
<body>
<!-- HTML5 Document Body Content (Tags) Will Go In Here -->
</body>
</html>
文档标题应该是描述性的，包含描述内容的关键字，并帮助搜索引擎机器人定义如何索引网站或 HTML5 应用。例如，我的 iTVclock.com 网站标题使用以下 HTML5 标记和语法，包含 iTV 设置和手表外观(Android 中的智能手表设计)的关键字:
<!DOCTYPE html>
<html lang="en">
<head>
<title>iTV Clocks for iTV Sets | 3D Watch Faces for iTV Sets</title>
</head>
<body>
<!-- iTV Clock's HTML5 Document
Body Content (Tags) Will Go In Here -->
</body>
</html>
正如你所看到的，域名(iTV 时钟)和重要关键字(iTV set 和 Watch Faces)位于描述性标题中，以便搜索引擎机器人知道 iTV Clock 是用于 iTV set 的，并且它们与(Android) watch faces API 相关，因为这些 iTV 时钟也将作为智能手表的 Android watch faces 出售。另外，请注意，我在 HTML 标记中使用了 lang="en "参数。这告诉 HTML5 呈现引擎该页面使用英语。
接下来，让我们看看标签，它用于定义内容类型、作者、关键字和描述。
META 标签:定义文档特征
标签允许您提供元数据，或者文档查看者(审阅者)看不到的关于文档的数据，但是它告诉搜索引擎、浏览器和 HTML5 操作系统关于 HTML5 文档中的描述性、SEO、机器人、作者和版权特征。
包含在标签中的元数据采用名称-值数据对的形式，很像 JSON 数据定义。如果你想了解更多关于 JSON 的知识，可以参考我的书《JSON 快速语法参考》(Apress，2016)。
可以有多个标签。它们位于 HTML5 文档的部分。必须有名称和内容参数，二者缺一不可，所以如果有 name="name "，就必须有 content="data "值。
iTV Clock 网站的标签格式具有以下 HTML5 标记语法，其中六个主要的标签在文档的部分中最常用:
<!DOCTYPE html>
<html lang="en">
<head>
<title>iTV Clocks for iTV Sets | 3D Watch Faces for iTV Sets</title>
<meta name="description" content="Use your iTV Set as a Clock!">
<meta name="keywords" content=" iTV Clock, iTV Set, Watch Faces">
<meta name="robots" content="index, follow">
<meta name="copyright" content="Copyright 2014 through 2016">
<meta name="author" content="Wallace Jackson">
<meta charset="UTF-8">
</head>
<body>
<!-- iTV Clock's HTML5 Document Body Content (Tags) Will Go In Here -->
</body>
</html>
描述元标签包含搜索引擎列表结果中使用的描述。关键字元标签为搜索引擎机器人提供了一个关键字列表。机器人 metatag 建议你的网站应该如何被索引。版权和作者元标签保护你的 HTML5 文档的版权。
还有一个名为 charset 的标记参数，用于定义文档的字符集，对于大多数 HTML5 文档和应用来说，字符集要么是 UTF-8，要么是 UTF-16。8 位通用文本格式使用 256 个字符表示，16 位通用文本格式使用 65，536 个字符表示。UTF-16 显然比 UTF-8 代表更广泛的语言，尽管 UTF-8 代表使用字母字符集的语言，如英语、法语、西班牙语、意大利语、葡萄牙语和德语。
在简化的 HTML5 charset="utf-8 "参数之前，定义字符集的一个标记(对于 HTML 4.0 和更早版本)如下所示:
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"> (HTML4)
表 3-1 列出了 HTML5 文档和应用的<元>标签格式中使用的 17 个名称:内容数据值对。
表 3-1。
Meta Tag name:content Data Value Pairs and Their Uses
| 名字值 | 内容值 | 目的或用途 | | --- | --- | --- | | 描述 | HTML 文档的描述 | 您的搜索引擎列表描述内容控制 | | 关键词 | 您的关键字列表 | SEO 关键词建议 | | 机器人 | 索引和跟随 | SEO 机器人说明 | | 版权 | 版权日期 | 记录版权日期 | | 作者 | 作者姓名 | 文档作者姓名 | | 网络作者 | 作者姓名 | 文档作者姓名 | | 字符集 | 使用的字符集 | 通常是 UTF 8 或 UTF 16 | | 摘要 | 文档摘要 | 内容摘要 | | 之后重访 | 期限(即 9 天) | 机器人回访说明 | | 语言 | 语言名称 | 文档使用的语言 | | 分布 | 全球、本地、国际单位 | 文件的全球、本地或内部分发 | | 期满 | 日期(2017 年 1 月 1 日) | 文档内容过期 | | 发电机 | 软件名称 | 文档内容生成器 | | 回复 | 电子邮件地址 | 记录联系信息 | | 无电子邮件收藏 | 反垃圾邮件链接 | metatags.info/nospamharvest | | 等级 | 目标受众 | 普通、成熟、受限 | | googlebot | 紧急情况 | 在 ODP 中使用页面描述 |您可以使用 http-equiv 参数为内容参数的信息(值)定义 http 头。这个 metatag 用于将某些非标准值添加到您的 HTML5 网站标题中，所以让我们来介绍一些在网站中使用的标准 http-equiv 值。
表 3-2 列出了 HTML5 文档和应用的< meta >标签格式中使用的 13 个 http-equiv:content 数据值对。
表 3-2。
Meta Tag name:content Data Value Pairs and Their Uses
| http-equiv | 内容值 | 目的或用途 | | --- | --- | --- | | 内容类型 | 媒体类型，字符集 | 定义 MIME 类型和字符集 | | 缓存控制 | 设置缓存设置 | 定义缓存参数 | | 甜饼干 | 定义 cookie 文件 | 定义 cookie 名称和日期 | | 内容-处置 | 定义应用 | 定义文件扩展名 | | 图像工具栏 | 显示图像工具栏 | 控制显示(IE)工具栏 | | MSThemeCompatible | 使用 WinXP 用户界面主题 | 为网站设置 WinXP UI 主题 | | 皮克斯拉韦尔 | 标签图像内容 | 允许对影像进行标注 | | 杂注 | 设置 HTTPS 缓存 | 确保 HTTPS 页面未被缓存 | | 资源类型 | 定义资源 | 定义页面资源类型 | | 恢复精神 | 刷新前的时间 | 一段时间后重定向 | | 内容脚本类型 | 脚本语言 | 定义脚本语言 | | 内容-风格-类型 | 样式表语言 | 定义样式表语言 | | 窗口目标 | 指定窗口名称作为 HTML5 文档呈现/解析的窗口目标 | 设置要在其中呈现的网页的窗口名称；通常用于脱离框架集 |接下来，让我们看看标签，以及它如何允许您为 HTML5 文档定义一个基本的目标 URL。
基本标签:为文档配置 URL
HTML5 标签没有结束标签。它使用 HREF 参数来定义默认的 URL，因此也是文档中所有链接的默认“目标”参数。如果我将标签添加到 iTV Clock HTML5 网站，得到的标记结构将如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<title>iTV Clocks for iTV Sets | 3D Watch Faces for iTV Sets</title>
<meta name="description" content="Use your iTV Set as a Clock!">
<meta name="keywords" content=" iTV Clock, iTV Set, Watch Faces">
<meta name="robots" content="index, follow">
<meta name="copyright" content="Copyright 2014 through 2016">
<meta name="author" content="Wallace Jackson">
<meta charset="UTF-8">
<base href="http://www.iTVclock.com">
</head>
<body>
<!-- iTV Clock's HTML5 Document Body Content (Tags) Will Go In Here -->
</body>
</html>
HTML5 文档中只能定义一个标记；它需要在文档的 HEAD 部分中定义。如果您想知道，标签中子标签的顺序并不重要。
更多的子标签将在接下来的两章中介绍。让我们继续看其他 HTML5 标签，它们是标签的子标签。
摘要
在本章中，你学习了 HTML5 文档标签中包含的用于搜索引擎优化(SEO)的标签，包括
下一章将讨论影响外部资源链接的父标签中的链接文档标签，包括图标和级联样式表。
四、HTML5 引用：使用外部链接和收藏夹图标
让我们继续看一看标签。这个重要的标签用于连接外部文件、文档和资源，如 HTML5 图标或 favicons(这些用于浏览器标签)，到您的 HTML5 文档和应用。这个标记也可以在头文件定义和配置级别找到，就像前面章节中介绍的标记一样。
在这一章中，我还将介绍 HTML5 文档级标签的标记(编码)格式和语法，包括所有不同的参数。我们将看看如何使用标签定义您的外部文档、概要文件和素材链接。我们还将查看许多不同类型的链接关系数据，这些数据是使用必需的 rel 参数提供的，该参数是用于引用外部资源的标记参数之一。
链接外部文件的 HTML HEAD 标签
本章介绍了一个高级(在文档头中)标签，它用于定义如何将外部文件“链接”到 HTML5 文档及其内容中。我称之为“外化”HTML5 开发素材，比如 favicons 和样式表。这样做有一个明显的优势，在我们开始讨论如何使用标签及其参数来具体化素材之前，我将在本节中解释这一点。如果您在 HTML5 文档中将素材外部化为文件，它会被缓存，因此只需在 index.html 标记中加载一次。让我们以您的级联样式表(CSS3)素材为例来看看这样做的好处。如果你为你的 HTML5 网站或应用外部化你的样式定义，这段代码只需要被加载一次，即使它在你的网站的每个页面上使用相同的<链接>标签被引用。如果 CSS 文件是 8KB，而网站上有 101 个页面，这将为您节省 800KB 的数据传输开销！
链接关系:外部素材的类型
在标签中唯一需要的参数(也称为属性)是 rel 或 relationship 参数，它告诉 HTML5 解析(呈现)引擎它链接的是什么类型的文档。最常用的两个选项是图标和样式表，但是我们在本章的这一节中会介绍其他 rel 参数选项。表 4-1 显示了 HTML5 中<链接>标签当前支持的各种 rel 参数选项。
表 4-1。
Link rel Parameter Value and Purpose
| 相关参数值 | 相关参数值目的 | | --- | --- | | 交替的 | 链接到文档的替代版本 | | 作者 | 将作者简介放入搜索结果的链接 | | 帮助 | 链接到 HTML 文档的帮助文档 | | 图标 | 链接外部图标(。ICO)文档资源 | | 许可证 | 链接到文档的版权信息 | | 然后 | 链接到一系列文档中的下一个文档 | | 预取 | 链接到应该缓存的目标资源 | | 上一个 | 链接到一系列文档中的前一个文档 | | 搜索 | 链接到文档的搜索工具 | | 样式表 | 链接到外部级联样式表(。css) |让我们看看现实世界中的几个例子，从 HTML5 图标开始，通常称为 favicon。让我们看看如何链接到外部级联样式表和作者简介 URL。
链接到图标:在文档标签或应用中使用收藏夹图标
对于 HTML5 网站或 HTML5 应用来说，你总想做的一件事就是有一个图标用于视觉品牌。这对于 HTML5 iTV 电视机、HTML5 平板电脑和 HTML5 智能手机尤其重要，因为图标会启动您的应用！
对于 HTML5 文档的 favicon 及其嵌套的顶级标记，文档链接声明的示例类似于以下 HTML5 标记结构:
<!DOCTYPE html>
<html lang="en">
<head>
<title>iTV Clocks for iTV Sets | 3D Watch Faces for iTV Sets</title>
<meta name="description" content="Use your iTV Set as a Clock!">
<meta name="keywords" content=" iTV Clock, iTV Set, Watch Faces">
<meta name="robots" content="index, follow">
<meta name="copyright" content="Copyright 2014 through 2016">
<meta name="author" content="Wallace Jackson">
<meta charset="UTF-8">
<base href="http://www.iTVclock.com">
<link rel="icon" href="itvclock.ico"> <!-- Link to icon resource -->
</head>
<body>
<!-- iTV Clock's HTML5 Document Body Content (Tags) Will Go In Here -->
</body>
</html>
如您所见，您还需要提供一个带有 href 参数的 URL。因为 itvclock.ico 在同一个文件夹中，所以我不需要任何 http、域或文件夹引用。如果我在我的 iTVdesign.com 网站上有这个 itvclock.ico，那么这个标记看起来会像下面的 HTML5 标记语法:
<link rel="icon" href="http://www.itvdesign.com/icon-folder/itvclock.ico">
我目前使用 GIMP 2.8.16 来创建图标。ico 文件扩展名。确保图形是 64 像素和正方形，8 位、24 位或 32 位颜色，并使用文件➤导出为菜单序列来创建它。如果你需要更多这方面的背景知识，请参阅我的书《数字图像合成基础》(Apress，2015)。
接下来，让我们看看如何链接到您的外部 CSS3 样式表资源，以便您可以将您的网站或应用样式“外部化”到一个高度优化的样式表资源资源中。这减少了每个 HTML5 文档(页面)中的代码量，因为样式语法已经被移到一个外部资源中，只需使用几个标记字符(在本例中是 60 个字符或字节)就可以链接到该外部资源。
链接到样式表:为 CSS3 样式使用外部样式表
对于 HTML5 网站或应用来说，你总是想做的事情之一就是为你的 HTML5 用户界面设计提供一致的视觉外观或样式。这对于视觉品牌也很重要，对于高清和 UHD 独立电视、高清和 UHD 平板电脑以及高清智能手机也同样重要。
您的样式表链接不仅需要 rel 和 href 参数，还需要一个 type 参数，为 css 文件声明您的 MIME 类型，即 text/css，就像它在服务器端为 CSS 文件声明 MIME 一样。
HTML5 文档的样式表外部化的文档链接声明示例，以及嵌套了标签的顶级标签如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<title>iTV Clocks for iTV Sets | 3D Watch Faces for iTV Sets</title>
<meta name="description" content="Use your iTV Set as a Clock!">
<meta name="keywords" content=" iTV Clock, iTV Set, Watch Faces">
<meta name="robots" content="index, follow">
<meta name="copyright" content="Copyright 2014 through 2016">
<meta name="author" content="Wallace Jackson">
<meta charset="UTF-8">
<base href="http://www.iTVclock.com">
<link rel="icon" href="itvclock.ico">
<link rel="stylesheet" type="text/css" href="itvclock.css">
</head>
<body>
<!-- iTV Clock's HTML5 Document Body Content (Tags) Will Go In Here -->
</body>
</html>
如您所见，在您的标签中嵌套几个标签是很常见的。如果您的标记需要符合 XHTML (XML ),您可以通过在结束符号前插入反斜杠来添加有序的结束标记，如以下标记语法所示:
< link rel="stylesheet" type="text/css" href="itvclock.css" />
如果您想为打印媒体添加一个样式表，您可以将 media 参数添加到样式表的标签中，以指定打印媒体(设备硬件)，如下所示:
<link rel="stylesheet" type="text/css" href="itvclock.css" media="print" />
媒体参数有九个选项，包括默认屏幕选项，包括针对残障用户的盲文或 tty 选项，针对音频和语音合成的听觉选项，以及针对打印机(打印机)、投影(投影仪)、电视(iTV)和手持设备(智能手机、智能手表或平板电脑)的硬件设备选项。您也可以使用布尔运算符 AND (and)、NOT (not)和 OR(逗号)来指定多个媒体设备。如果要指定设备的值，可以使用参数来指定宽度、高度、方向、分辨率、纵横比、颜色、颜色索引、单色以及扫描或网格值。
接下来，让我们看看您的 rel="author "参数，以及它用于链接到外部作者配置文件的选项。
链接到一个作者简介:把一张脸放在搜索列表上
最近，你可以为 HTML5 网站或应用使用标签，通过你的 HTML5 标记引用一个作者简介，用于个人品牌推广。如果你想让你的照片出现在搜索引擎列表中，这一点尤为重要。我将在本章中向您展示如何使用标签，以及在第六章中通过< a >(锚)标签来实现这一点，因为实现它的最佳方式是在 HTML5 文档标记中同时使用<head><link rel="author"></head>和<body><a rel="author"></body>标记结构(语法)。
以下是作者个人资料链接的文档链接声明示例:
<!DOCTYPE html>
<html lang="en">
<head>
<title>iTV Clocks for iTV Sets | 3D Watch Faces for iTV Sets</title>
<meta name="description" content="Use your iTV Set as a Clock!">
<meta name="keywords" content=" iTV Clock, iTV Set, Watch Faces">
<meta name="robots" content="index, follow">
<meta name="copyright" content="Copyright 2014 through 2016">
<meta name="author" content="Wallace Jackson">
<meta charset="UTF-8">
<base href="http://www.iTVclock.com">
<link rel="icon" href="itvclock.ico">
<link rel="stylesheet" type="text/css" href="itvclock.css">
<link rel="author"
href="https://plus.google.com/u/0/+WallaceJackson/about/p/pub"
title="Wallace Jackson">
</head>
<body>
<!-- iTV Clock's HTML5 Document Body Content (Tags) Will Go In Here -->
</body>
</html>
注意，这里使用了三个关键参数:必需的 rel="author "，Google+帐户的 href URL，以及包含作者姓名值的 title 参数。
另外，请注意我如何分隔(格式化)标签以增强可读性，因为额外的空白(制表符和空格)是允许的，并且不会被 HTML5 标记语法解析引擎处理。
要彻底做到这一点，还需要一个带有 rel 参数的 anchor 标签，这将在第六章中介绍。
接下来，让我们看看标签支持的其他九个参数，其中六个在 HTML5 中有效，三个在 HTML4 和更早版本中有效。
链接标签:可选的链接标签参数
除了必需的 rel 参数之外，标签还有许多可选参数。最重要的是 href 参数，它允许您为所链接的外部素材指定一个 URL 位置。在本章的几个<链接>标签示例中，你已经看到了这种用法，还有媒体参数，所以在本章的这一节，我将把重点放在 HTML5 支持的其他四个参数上。<链接>标签支持的其他参数见表 4-2 。
表 4-2。
Link Tag Parameters
| 参数名称 | HTML5 支持 | 参数目的或用途 | | --- | --- | --- | | 超链接 | 是 | 链接素材的位置(URL) | | 元首万岁 | 是 | 链接素材中使用的语言 | | 能量损耗率 | 是 | 关联素材的关系(类型) | | 媒体 | 是 | 链接素材所需的设备类型 | | 类型 | 是 | 链接素材使用的媒体类型 | | 大小 | 是 | 链接图标资源的像素大小 | | 交叉起源 | 是 | 指定跨来源请求处理 | | 发动机的旋转 | 不 | 链接文档之间的关系 | | 字符集 | 不 | 链接素材的字符编码 | | 目标 | 不 | 在链接素材将被加载的地方 |hreflang 参数指定外部链接的资源或文档使用的语言。这个标签参数在 HTML5 中实现的频率并不高，除非已经创建了 HTML5 文档或应用的多种语言版本，然后才需要它。
type 参数指定向标签提供什么类型的文件(素材)。这通常称为 MIME 类型，尤其是在服务器端，对于服务器定义语法支持的文件。
sizes 参数以像素(图片元素)为单位指定图标的尺寸。因为图标通常以 64 × 64 像素提供，所以它经常未被利用。
crossorigin 参数允许访问使用 CORS(跨原点资源共享)标准的另一台服务器上的图像、脚本或样式。将这个新参数设置为 anonymous 会限制服务器之间的交叉共享访问，将其设置为 use-credentials 会将凭据标志设置为“true”可以使用 cookies、HTTP 身份验证或客户端 SSL 证书来共享用户凭据。它可以与
接下来，让我们看看标签中支持的其他标签，然后我们可以看看超文本(锚标签)。
摘要
本章讨论了用于链接外部文档、概要文件和素材的 HTML5 文档标签，它也包含在标签中。您了解了所需的 rel 参数、它的值以及几个示例。还讨论了适用于 HTML5 标记、文档和应用的其他可选参数。
在下一章中，您将看到剩余的子标签，包括影响外部 JavaScript 资源链接的 style、script 或 noscript 标签，并将异常应用于外部化的级联样式表。
五、HTML5 处理：使用 CSS 和 JavaScript
让我们通过查看用于 CSS3 文档样式的
在这一章中，我将介绍 HTML5 文档级
添加标签处理的 HTML 头标签
本章涵盖了两个高级(在文档头中)标签，用于定义如何进一步处理 HTML5 标签(标记)以添加桌面发布，如样式、像素精确定位、特殊效果、动画、交互性和其他类型的“算法”处理。这是通过使用用于 CSS3 处理的
章节标题是“HTML5 处理”，因为 CSS 和 JS 可以进一步处理 HTML5。也就是说，这不是一本关于 CSS3 或 JavaScript 的书，只是 HTML5 标记(标签)，所以如果你想学习 CSS3 样式或 JS 编程，一定要从 Apress.com 购买专门涵盖这些主题的书籍。
脚本标签:使用 JavaScript 编程
如果你想为你的 HTML5 文档、网站或应用添加高级特性，你要使用 JavaScript，它实际上是基于 ECMAScript 262 标准的。这是使用 HTML5 文档的父标签(section)中的
表 5-1。
Supported
接下来，我们来看看 id 参数。
ID 参数:识别您的内容元素
id="name "参数(或属性)允许您指定一个 id 用作句柄。它对任何可以使用 CSS3 设置样式或使用 JavaScript 控制的标签都很有用。
要为段落标签创建 id，请在
标签中使用 ID 参数。要在
<html><body>
<p id="helloworld">Click this button to change to: Hello World!</p>
<button onclick="HelloWorldFunction()">Change Text, Please!</button>
<script>
function HelloWorldFunction() {
document.getElementById("helloworld").innderHTML = "Hello World";
}
</script>
</body></html>
接下来，让我们看看如何使用 lang 参数来指定语言。
LANG 参数:定义元素的语言
lang="language "参数(或属性)允许您指定在基于文本的元素中使用的语言。
要创建支持该语言规范特性的段落文本，请使用带有 lang 参数的
标记，该参数设置为文本元素中所用语言的缩写值。下面的 HTML5 标记显示了这样一个示例:
<p lang="es">Buenos Dias, Compadres!</p>
接下来，让我们看看 HTML5 中使用 style 参数的内嵌样式表支持。
样式参数:使用内嵌样式表设置
style="css "参数(或属性)允许您在元素(标记)中指定“内联 CSS3”标记。
要创建支持此样式表规范特性的段落文本，请使用带有样式参数集的
标记来使用样式标记。下面是一个使用 HTML5 标记实现这一点的示例:
<p style="color:green">This text will now use the green color!</p>
接下来，让我们看看如何使用 tabindex 参数控制 HTML5 中 Tab 键在 UI 中前进的方式。
TABINDEX 参数:Tab 键前进顺序
tabindex="integer value "参数(或属性)允许您指定标签的 TAB 键顺序。它对超文本链接
<a href="http://www.Apress.com" tabindex="2">Publisher's Website</a>
<a href="http://www.WallaceJackson.com" tabindex ="1">Author's Website</a>
<a href="http://www.Luv2Code.com" tabindex ="3">Tech Reviewer Website</a>
接下来，让我们看看如何定义当用户在用户界面设计元素上执行鼠标悬停操作时，HTML5 标签显示的弹出工具提示文本。
TITLE 参数:向内容元素添加标题
dir="direction "参数(或属性)允许您指定基于文本的元素的阅读方向。此参数使用 rtl 和 ltr 作为选项，以及 auto，这将是浏览器的默认选项。如果您使用 auto，浏览器将尝试根据内容确定正确的方向(即它使用的字符集)。
要创建支持此翻译功能的段落文本，请使用不带 translate 参数或参数设置为 yes 值的
标记，如以下 HTML5 标记所示:
<p title="This will display on Mouse-Over">Mouse-Over Text for Tool Tip!</p>
在 HTML5 中，这个参数可以和任何标签一起使用，尽管它只对某些标签有用。在以前版本的 HTML 中，这个参数不能用在、、
摘要
本章解释了全局 HTML5 参数(也称为属性或特征)。在下一章，你将会看到 HTML5 锚
七、HTML5 导航：为超文本使用锚标签
本章主要关注锚(
在这一章中，我介绍了 HTML 的 anchor 标签支持的十几个参数，其中七个是 HTML5 支持的，五个也是 HTML5 之前的版本支持的。
HTML 锚定标签属性:所有版本
本章涵盖了用于超文本或链接不同 HTML5 文档和应用的锚或 7-1 显示了锚< a >标签使用的参数:前两个只适用于 HTML5，接下来的五个适用于所有 HTML 版本，最后五个不适用于 HTML5。
表 7-1。
HTML5 <支持和不支持的标签属性
| global parameter | Global parameter usage | | --- | --- | | download | Specifies whether the element content is editable. | | medium | Specifies the context menu of HTML5 elements (tags) | | 超链接 | Specify custom data attributes for your document. | | 元首万岁 | Specifies whether an element can be dragged. | | 能量损耗率 | Specify a drag-and-drop process (copy, move or link) | | target | Specify visibility (relevance) for each element | | 类型 | Spelling and grammar check of the specified element | | 字符集 | Specifies that the script is executed after HTML parsing | | 坐标 | Specify a shortcut key to focus an element. | | name |让我们先来看看七个 HTML5 全局参数。
锚标签 HTML5 参数:超文本的 HREF
在 HTML5 中使用 anchor http://www.apress.com 。
下面是一个使用带有 href 参数的
<a href="http://www.Apress.com">Click here to open the Apress website</a>
默认情况下，尚未访问(点击)的链接是蓝色的，已访问的链接是紫色的，活动的链接是红色的。默认情况下，链接也是带下划线的，但是如果你想改变链接的样式，可以使用 CSS3 来改变。
没有 href 参数，十二个锚标记参数中的六个不能使用。这些包括下载、目标、媒体、rel、类型和 hreflang，我们将在接下来讨论它们。
HREFLANG 参数:超文本链接语言支持
hreflang ="language abbreviation "参数(或属性)允许您指定超文本链接使用的语言。我们之前已经讨论过这个问题，所以我将只引用一个简单的例子，然后我们可以继续讨论其他锚标记参数。下面是一个使用
<a href="http://www.Apress.com" hreflang="fr">Bonjour! www.Apress.com</a>
语言代码通过 ISO 639 正式定义，可在以下网站找到:
http://www.iso.org/iso/home/standards/language_codes.htm【ISO.org】https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes(维基百科)
接下来，让我们看看 HTML5 中只支持的两个标签:下载标签和媒体标签。
下载参数:使用 A 标签下载文件
当存在时，下载参数(或属性)告诉 HTML5 解析引擎(浏览器或操作系统)需要下载使用 href 参数引用的文件，而不是作为 HTML5 文档或应用加载和解析。
要下载一个文件，比如在 www.WallaceJackson.com 上找到的动画 MindTaffy 徽标，您应该在 href 参数中指定文件名，而不是一个 HTML 网站。您还可以添加下载参数，该参数的作用类似于一个布尔标志，因此下载参数 present 表示 download="true "，而下载参数 absent 表示 download="false "。为此，您需要修改 HTML5 标记，如下所示:
<a href="!http://WallaceJackson.com/MT240.gif" download>Download Logo!</a>
接下来，让我们再简单看一下媒体参数。
媒体参数:链路支持什么媒体设备？
media="media/device types "参数(或属性)在第四章中已经介绍过了，所以我们不需要在这里介绍，只需要展示一个使用< a >标签的例子。以下是指定设备类型的链接示例:
<a href=http://www.iTVset.com" media="screen">iTV Set - Display: Screen</a>
接下来，让我们看看如何使用 target 参数来告诉浏览器如何以及在哪里打开新的超链接文档。
目标参数:在哪里打开一个超文本文档
target ="_constant "参数(或属性)允许您指定 HTML5 应用打开 URL 链接的位置。此参数有四个值选项，_blank、_self、_parent 和 _top。您也可以使用框架名称，尽管由于框架集已经很少使用了，所以这种情况非常少见，就像 _parent 和 _top 选项一样。大多数开发人员使用 _blank 在浏览器中打开一个新的选项卡，或者使用 _self(如果在
要为链接的文档创建一个新的选项卡，您可以在您的
<a href=http://www.iTVset.com" target="_blank">Open iTV Set in a new Tab</a>
要用链接的文档替换当前显示的 HTML 内容，您应该在您的
<a href=http://iTVset.com" target="_self">Replace this site with iTV Set</a>
要用链接的文档替换父框架中当前显示的 HTML 内容，可以在
<a href=http://iTVset.com" target="_parent">Open iTV Set in Parent Frame</a>
要用链接的文档替换当前显示在框架集顶部(填充整个选项卡或窗口)的 HTML5 内容，可以在
<a href=http://iTVset.com" target="_top">Open iTV Set in the Full Window</a>
要用链接的文档替换框架集中任何命名框架中当前显示的 HTML 内容，可以在
<a href=http://iTVset.com" target="framename">Open iTV Set in this Frame</a>
接下来让我们看看如何使用 rel 参数定义 HTML5 中链接文档之间的关系。
REL 参数:定义与超文本链接的关系
rel="relationship type "参数(或属性)允许您使用 URL 值定义当前 HTML5 文档和 href 参数中指定的文档之间的关系类型。在 7-2 列出了这些参数及其用途。
表 7-2。
HTML5 Anchor Tag rel Attributes
| REL 参数 | REL 参数用途 | | --- | --- | | 交替的 | 指定 HTML5 文档的替代版本 | | 作者 | 为 HTML5 文档指定作者配置文件 | | 书签 | 为文档添加书签的指定永久 url | | 帮助 | 指定帮助文档的 URL(链接) | | 许可证 | 指定版权文档的 URL(链接) | | 然后 | 指定一系列文档中的下一个文档 | | nofollow(无跟踪) | 指定元素的拼写和语法检查 | | 诺弗罗 | 指定在 HTML 解析后执行脚本 | | 预取 | 指定用于聚焦元素的击键快捷键 | | 上一个 | 允许元素的内联 CSS 样式声明 | | 搜索 | 指定了该元素的跳转顺序 | | 标签 | 关于元素的指定额外信息 |要创建链接文档的替代版本，可以在
<a href=http://www.iTVset.com" rel="alternate">Alternate iTV Version</a>
要引用链接文档的作者配置文件版本，可以在
<a href=http://www.WallaceJackson.com" rel="author">Author Website</a>
要为链接的文档创建书签链接版本，可以在
<a href=http://www.iTVset.com" rel="bookmark">Bookmark for iTV Set Site</a>
要为链接的文档创建帮助文档版本，可以在
<a href=http://www.iTVset.com" rel="help">iTV Set Website Help Document</a>
要为链接文档创建许可文档，可以在
<a href=http://www.iTVset.com" rel="license">Copyright License Document</a>
要为链接的文档系列指定下一个版本，应该在
<a href=http://www.iTVset.com" rel="next">The Next Document in a Series</a>
要指示搜索引擎机器人不跟踪(或排列)链接的文档，您应该在您的
<a href=http://www.iTVset.com" rel="nofollow">Do Not Follow (Rank) Link</a>
要隐藏到另一个网站的链接来自您的网站这一事实，您可以在您的
<a href=http://iTVset.com" rel="noreferrer">No Site Referrer Info Sent</a>
要指示 HTML5 呈现引擎“预加载”或在需要文档之前(即用户单击链接之前)缓存文档，您可以在
<a href=http://www.iTVset.com" rel="prefetch">Prefetch This Document</a>
要为链接的文档系列指定以前的版本，应该在
<a href=http://www.iTVset.com" rel="prev">Previous Document in a Series</a>
如果您为文档创建了一个搜索工具用户界面(应用),您可以链接到这个 HTML5 搜索应用，然后利用您的
<a href=http://www.iTVset.com" rel="search">Custom Search Utility Link</a>
直接引用 W3C 关于这个参数的话:“search 关键字表示引用的文档提供了一个专门用于搜索文档及其相关资源的接口。”创建一个定制的搜索界面(用户界面应用)不是一件容易的事情，在较小的网站中很少见，但是在较大的网站中确实存在。
要指示搜索引擎机器人在
<a href=http://iTVset.com/itv-ebooks" rel="tag">Tag the ebooks keyword</a>
接下来，让我们简单回顾一下类型参数。
TYPE 参数:MIME 类型、媒体类型和文件类型
在第四章和第五章中，我们已经讨论了类型参数，所以在这里我们只需要说锚< a >标签支持带有 type="file type "参数的 MIME(媒体或文件)类型的定义。如果你想知道，MIME 代表多用途互联网邮件扩展，因为它最初用于电子邮件，后来扩展到用于服务器、浏览器和应用。在您的< a >标签中使用类型参数可能看起来像下面的 HTML5 标记:
<a href=http://iTVset.com" type="text/html">iTV Set: An HTML Website!</a>
接下来，让我们讨论非 HTML5 锚标记参数，这样我们在本章中就能全面地了解超文本。
锚点标记非 HTML5 参数:旧代码
最后，让我们快速看一下在 HTML5 中不起作用，但在 HTML4 和更早版本中起作用的五个锚标记参数，以防您正在进行一些遗留代码维护或支持多个浏览器修订号。
CHARSET 参数:超文本链接字符集支持
我们在第 4 和 5 章中已经介绍了 charset 参数，所以我在这里重申一下，你的锚< a >标签支持使用 charset="charset "参数定义字符集。大多数 HTML 文档或应用使用 UTF-8 或 ISO-8859-1 预置。
下面是一个使用
<a href=http://iTVset.com" charset="UTF-8">iTV Set: A UTF-8 Website!</a>
接下来，让我们仔细看看 coords 参数。
COORDS 参数:定义图像映射的坐标
coords 参数(或属性)告诉 HTML5 解析引擎使用 href 参数引用的文件的坐标。它与 shape 参数一起使用。它创建了 HTML5 中不再支持的图像地图。
HTML 标签标记如下所示:
<a href=http://iTVset.com" shape="rect" coords="0,0,240,320">Image Map</a>
接下来，让我们简单看一下 name 参数。
NAME 参数:命名链接(HTML5 之前支持)
在 HTML5 之前，name 参数(或属性)指定了锚的名称，但对于锚(跳转到文档的不同部分)功能，它已被弃用(不再支持)。因此，除了展示一个使用
<a href=http://www.iTVset.com" name="anchorname">iTV Set Anchor Name</a>
要在 HTML5 中创建命名链接，可以使用以下 HTML 标记:
<a href=http://www.iTVset.com" id="linkname">iTV Set Link Name Using ID</a>
接下来，我们来看看 rev 参数。
REV 参数:在哪里打开超文本文档
rev 参数(或属性)与 rel 参数相反。HTML5 中不再支持它。
要为链接的文档创建反向关系，可以在
<a href=http://www.iTVset.com" rev="alternate">An Opposite of an iTV Set</a>
接下来，让我们看看形状参数。
形状参数:定义图像贴图的形状
shape 参数(或属性)告诉 HTML5 解析引擎使用 href 参数引用的文件的形状(矩形或圆形)。它与 coords 参数一起使用。它创建了图像地图，但在 HTML5 中不支持。
HTML 标签标记看起来像这样:
<a href=http://iTVset.com" shape="circle" coords="0,0,240,320">Image Map</a>
现在，您已经准备好继续进行 HTML5 中支持的其余文档内容设计、创建和发布标签。我们正在稳步前进，我们将在我们的 HTML5 应用中享受使用多媒体设计元素的乐趣！
摘要
本章通过使用锚或
下一章讨论支持添加新媒体元素的 HTML5 标签，包括图像、音频和视频。这些允许开发人员给他们的 HTML5 网站、文档或应用添加视觉(和听觉，带音频)元素。
八、HTML5 多媒体：利用新媒体素材
在进入父标签的其余子标签之前，让我们来看几个标签，它们允许您在 HTML5 设计中实现新的媒体内容元素。这些元素在 HTML5 文档和应用中变得越来越丰富。这是由于不同设备类型的出现，如 iTV 电视机、智能手表、智能手机、平板电脑和电子书阅读器等。是的，有 HTML5 操作系统驱动着这些流派中的流行产品，挑战 Android 在消费电子设备中的市场主导地位。如果你对在 HTML5 中制作新媒体内容感兴趣，可以看看这本书的附录 D，以及我在 www.apress.com 的新媒体内容制作基础系列丛书。
在这一章中，我将讨论实现新媒体元素的关键标签，比如使用标签的数字图像，使用
HTML5 新媒体支持:九种类型
本章涵盖了 HTML5 的新媒体功能。它讨论了所有新媒体类型，并展示了开发人员如何使用标签在这些类型中创建内容，首先介绍标签，然后介绍 JavaScript 和 API。表 8-1 列出了 HTML5 中支持的新媒体类型，以及文件格式，在某些情况下，还有它们使用的 API。
表 8-1。
Nine HTML5 New Media Genres and Data Format Support
| 新媒体素材 | 支持的数据格式 | | --- | --- | | 数字图像 | JPEG、GIF、PNG8、PNG24、PNG32、网页、BMP、PDF | | 数字音频 | MP3，OGG Vorbis，WAVE，AIFF，MPEG-4，OPUS，FLAC | | 数字视频 | MPEG-4 AVC H.264、MPEG-H EVC H.265、web VP 8/VP 9 | | 数字插图 | SVG(可缩放矢量图形)(也通过 CSS 使用) | | 交互式 3D | WebGL 或 WebGL2 (|
| 数字印刷 | SVG、JPEG、GIF、PNG (8/24/32)、网页、网页、MPEG |
| 视觉效果(VFX) | 使用 JavaScript 将上述格式组合在一起 |
| 语音识别 | 识别语音；转换为文本(网络语音) |
| 语音合成 | 使用文本合成语音(Web 语音 API) |
表 8-1 的第一部分展示了 HTML5 中享有“原生”或直接标签支持的新媒体素材，包括< img >、<音频>、<视频>、< svg >和<画布>标签。
表 8-1 的第二部分包含需要 JavaScript 和高级 API 来创建更高级的新媒体素材的新媒体类型，如数字绘画、视觉效果(VFX)管道或交互式用户体验。如果你对 HTML5 的新媒体感兴趣，我有一套新媒体基础系列丛书，书号是 Apress.com ，只要搜索这位作者的名字就可以了。
表 8-1 的第三部分包含语音合成和语音识别条目，因为现在有两种流行浏览器的 Web 语音 API——Google Chrome 和 Apple Safari。用不了多久，其他 HTML5 平台也会采用 Web Speech API，尤其是随着搭载 HTML5 操作系统的 ITV 和智能手机越来越多。这意味着在 2017 年到来之前，Web Speech API 应该存在于所有流行的浏览器中。
现在我已经概述了支持的相关文件(数据)格式，让我们来看看这一章中每个新媒体领域各自的章节。接下来，让我们看看核心标签及其参数和相关的 API，它们允许 HTML5 开发人员实现多媒体应用，与为 Android、Windows、Linux 和 iOS 创建的应用相媲美。对于希望创造前所未见(或前所未闻)的用户体验的 HTML5 开发者来说，这是一个激动人心的篇章！
数字图像:使用标签
HTML5 中使用最广泛的新媒体元素是数字图像，它使用了标签。它在 HTML 1.2 中引入，并在 HTML 2.0 中标准化。参数包括 src、数字图像资源文件引用参数、宽度和高度参数以及有用的 SEO 参数。表 8-2 显示了 HTML5 中的参数支持。
表 8-2。
Parameters Supported By Tag
标签有十几个参数，其中八个在 HTML5 中受支持，其中四个由于使用 CSS 提供这些功能而被弃用。这 12 个参数见表 8-2；第一部分是常用参数，第二部分是不常用参数。第三部分包含以前的 HTML 版本中支持的参数，您可以使用 CSS 在 HTML5 中实现这些参数。您可以在传统 HTML4 或以前的 HTML 版本(如 HTML3.2、HTML 2.0 和 XHTML 1.0 和 1.1)中使用这些参数。
如果你想掌握数码图像合成的术语、原理、工作流程和基础知识，请查阅《数码图像合成基础》(Apress，2015)。
以下是使用带有 src 参数的标签的数字图像资源的示例:
<img src="imagename.jpg" />
要为 SEO 目的优化数字图像资源，可以使用 alt 参数，如下面的 HTML5 标记示例所示:
<img src="imagename.jpg" alt="Image Description Using Keywords for SEO" />
要缩放数字图像资源，请使用宽度和高度参数，如下例所示:
<img src="imgname.jpg" width="400" height="300"/> <!-- Scale Down Image -->
确保将图像缩放 2 倍。因此，前面标记的源图像的物理像素分辨率应该是 800 × 600 或 1600 × 1200。总是缩小而不是放大！
要允许从第三方网站合法访问数字图像素材，请使用 crossorigin 参数(如第四章所述)，如以下 HTML5 标记所示:
<img src="imagename.jpg" crossorigin="use-credentials" />
要使用 longdesc 参数进一步优化 SEO 的数字图像资源，您应该使用以下 HTML5 标记，它提供了使用 HTML5 创建的关键字优化描述的 URL 引用:
<img src="imgname.jpg" longdesc="http://www.serverlocation.com/desc.html"/>
要使用 USEMAP 参数定义客户端数字图像地图资源，您可以使用以下 HTML5 标记:
<img src="imagename.jpg" usemap="#mapname" width="640" height="480" />
<map id="mapname">
<area shape="rect" coords="10,10,640,240" href="URL" alt="SEO" />
<area shape="circle" coords="320,360,120" href="URL" alt="SEO" />
</map>
这提供了对您的
若要使用服务器端图像映射指定数字图像资源，请使用 ismap 参数，如以下 HTML5 标记所示:
<img src="imagename.jpg" alt="Image Description: SEO Keywords" ismap />
接下来，让我们看看数字音频素材和 HTML5
数字音频:使用
HTML5 中下一个最广泛使用的新媒体元素是数字音频，它使用了
表 8-3。
支持的参数<音频>标签
| Audio label parameters | Purpose of audio label parameters | | --- | --- | | 科学研究委员会 | Audio asset source file name reference | | control | Audio transmission UI (user interface) control | | prestrain | Pre-loading digital audio file resources | | mute | Mute digital audio resources | | circulate | Cyclic digital audio resources | | autoplay | Automatically play audio loading events on the page. | | |这个
如果你想掌握数字音频编辑术语、原理、工作流程、数据足迹优化、合成和基础，你可以查看我的数字音频编辑基础(Apress，2015)。
要创建数字音频资源，请使用带有 controls 参数的
<audio controls>
<source src="preferred_audio_codec.ogg" type="audio/ogg" />
<source src="second_choice_audio_codec.mp3" type="audio/mp3" />
ALERT! Your Browser Does Not Support Audio or the HTML5 Audio Tag!
</audio>
如果 HTML5 浏览器(或 HTML5 操作系统)不支持第一个音频编解码器选择，使用多个
要使用 autoplay 参数自动播放数字图像资源，您可以使用以下 HTML5 标记:
<audio controls autoplay>
<source src="preferred_audio_codec.ogg" type="audio/ogg" />
<source src="second_choice_audio_codec.mp3" type="audio/mp3" />
ALERT! Your Browser Does Not Support Audio or the HTML5 Audio Tag!
</audio>
要使用 loop 参数循环数字音频资源，您应该使用以下 HTML5 标记:
<audio controls loop>
<source src="preferred_audio_codec.ogg" type="audio/ogg" />
<source src="second_choice_audio_codec.mp3" type="audio/mp3" />
ALERT! Your Browser Does Not Support Audio or the HTML5 Audio Tag!
</audio>
要预加载数字音频资源，请使用带有自动设置的预加载参数，并利用以下 HTML5 标记:
<audio controls preload="auto">
<source src="preferred_audio_codec.ogg" type="audio/ogg" />
<source src="second_choice_audio_codec.mp3" type="audio/mp3" />
ALERT! Your Browser Does Not Support Audio or the HTML5 Audio Tag!
</audio>
要仅预加载数字音频元数据，请使用 preload 参数和元数据设置，使用以下 HTML5 标记:
<audio controls preload="metadata">
<source src="preferred_audio_codec.ogg" type="audio/ogg" />
<source src="second_choice_audio_codec.mp3" type="audio/mp3" />
ALERT! Your Browser Does Not Support Audio or the HTML5 Audio Tag! </audio>
要防止预加载您的数字音频资源，请使用 preload 参数和 none 设置，利用以下 HTML5 标记:
<audio controls preload="none">
<source src="preferred_audio_codec.ogg" type="audio/ogg" />
<source src="second_choice_audio_codec.mp3" type="audio/mp3" />
ALERT! Your Browser Does Not Support Audio or the HTML5 Audio Tag! </audio>
接下来，我们来看看数字视频
数字视频:使用
HTML5 中下一个最广泛使用的新媒体元素是数字视频，它使用了
表 8-4。
参数支持的<视频>标签 控件
| Video tag parameters | Purpose of video tag parameters | | --- | --- | | 科学研究委员会 | Digital asset source file name reference | | width | Digital video asset width pixels | | prestrain | Pre-loading digital video file resources | | mute | Silent digital video resources | | poster；playbill | Images are loading. | | circulate | Cyclic digital video resources |如果你想掌握数字视频编辑术语、原则、工作流程、数据足迹优化、合成和基础知识，请查阅数字视频编辑基础知识(Apress，2015)。
要创建数字视频资源，请使用带有 controls 参数、width 和 height 参数的
<video width="400" height="300" controls>
<source src="my_preferred_video_codec.mp4" type="video/mp4" />
<source src="second_choice_video_codec.ogg" type="video/ogg" />
<source src="third_choice_audio_codec.webm" type="audio/webm"/>
ALERT! Your Browser Does Not Support Video or the HTML5 Video Tag!
</video>
如果特定的 HTML5 浏览器(或操作系统)不支持第一个视频编解码器选择，使用多个
要自动播放数字视频资源，可以使用 autoplay 参数，如以下 HTML5 标记所示:
<video width="400" height="300" controls autoplay>
<source src="my_preferred_video_codec.mp4" type="video/mp4" />
<source src="second_choice_video_codec.ogg" type="video/ogg" />
<source src="third_choice_audio_codec.webm" type="audio/webm"/>
ALERT! Your Browser Does Not Support Video or the HTML5 Video Tag!
</video>
要循环数字视频资源，可以使用 loop 参数，如以下 HTML5 标记所示:
<video width="400" height="300" controls loop>
<source src="my_preferred_video_codec.mp4" type="video/mp4" />
<source src="second_choice_video_codec.ogg" type="video/ogg" />
<source src="third_choice_audio_codec.webm" type="audio/webm"/>
ALERT! Your Browser Does Not Support Video or the HTML5 Video Tag!
</video>
若要预加载数字视频资源，请将 preload 参数与 auto 设置一起使用，如以下 HTML5 标记所示:
<video width="400" height="300" controls preload="auto">
<source src="my_preferred_video_codec.mp4" type="video/mp4" />
<source src="second_choice_video_codec.ogg" type="video/ogg" />
<source src="third_choice_audio_codec.webm" type="audio/webm"/>
ALERT! Your Browser Does Not Support Video or the HTML5 Video Tag!
</video>
与
如果您想知道什么是元数据，它包括有关音频或视频资源的信息，如标题、艺术家姓名以及有关音乐(或视频)内容的信息。
要在视频缓冲期间显示图像，请使用海报参数集来引用您的数字图像资源的文件名，如以下 HTML5 标记所示:
<video width="400" height="300" controls poster="posterimagename.png">
<source src="my_preferred_video_codec.mp4" type="video/mp4" />
<source src="second_choice_video_codec.ogg" type="video/ogg" />
<source src="third_choice_audio_codec.webm" type="audio/webm"/>
ALERT! Your Browser Does Not Support Video or the HTML5 Video Tag!
</video>
接下来，让我们看看数字插图
数字插图:使用
HTML5 中下一个最广泛使用的新媒体元素是数字插图，它使用了
SVG 标签参数包括 SVG 数字插图定义的宽度和高度，以及用于定义 SVG 元素的子标签，这些子标签将功能添加到数字插图资源中。SVG 是基于 XML 的，SVG 使用 XML 标签，正如您现在所知道的，现在已经添加了 SVG 支持，它与 HTML5 兼容。这对 HTML5 开发人员来说是令人兴奋的，因为矢量支持允许数字插画师为用户创建令人印象深刻的交互式 2D 艺术品以及视觉上令人兴奋的特殊效果。
表 8-5 显示了 HTML5 中支持的一些 SVG 标签的子标签元素。它们也有自己的参数，如填充、描边和颜色等，您将在本节的一些标记示例中看到。我不能在本书中详细讨论 SVG，因为它本身就是一个主题。也就是说，由于共享的 SGML 标记语言起源，W3C 决定向 HTML5 添加 SVG 支持是很容易的。
表 8-5。
Child Tags Supported By the
| SVG 儿童塔 | SVG 子标签的用途 | | --- | --- | | 圆 | 画一个 2D 圆元素 | | 矩形 | 画一个 2D 圆元素 | | 椭圆 | 画一个 2D 圆元素 | | 多边形 | 绘制多边形(n 边形元素) | | 多叉线 | 画一条折线 | | 线条 | 划一界线 | | 图像 | 加载时用作海报的数字图像 | | 文本 | 循环视频 | | 字体 | 页面加载事件时自动播放视频 | | 小路 | 循环视频 | | 过滤器 | 页面加载事件时自动播放视频 | | 有生命的 | 页面加载事件时自动缓冲视频 |表 8-5 中列出了一些更常用的 SVG 元素。第一部分包含基本形状，第二部分包含其他有用的矢量设计元素。
如果您想要掌握数字插图(SVG)术语以及核心 SVG XML 原则、SVG XML 标记工作流和 SVG 基础知识，请查看我的数字插图基础知识(Apress，2015)标题。在本书中，我向读者展示了如何使用 GIMP 和 Inkscape 创建(和优化)SVG 素材，因此本书将数字成像和数字插图软件与 HTML5 联系起来。这本书还有一些章节涉及 Android、Java 和 JavaFX 代码、HTML5 标记、XML、CSS 和跨平台(跨设备)发布。
要创建数字插图资源，请使用带有宽度和高度参数的
<svg width="640" height="480">
<circle cx="0" cy="0" r="25" fill="blue" stroke="red" stroke-width="4">
</svg>
要创建 SVG 圆角矩形，请使用以下 HTML5 标记，其中包括 rx(半径 x)和 ry(半径 y)的参数:
<svg width="640" height="480">
<rect x="20" y="20" rx="10" ry="10" width="200" height="200"
style="fill:yellow; stroke:purple; stroke-width:6; opacity:0.5" />
</svg>
请注意 style 参数，它包含内嵌的 CSS3 样式信息，这在样式化 SVG 插图时更常见。
接下来，让我们看看可以使用 HTML5 中的特性模拟的其他新媒体区域。
交互式 3D:使用
我们将用整整一章的时间讨论使用
数字绘画:使用 JavaScript 的数字绘画
数字绘画是数字成像、矢量插图、粒子系统和数字视频的结合。SVG 正朝着添加数字绘画功能的方向发展，但是现在可以使用 JavaScript 和 CSS3 以及 HTML5 来模拟数字绘画。这是一个超出本书标签标记重点的高级领域，但如果你想了解更多关于数字绘画的知识，你应该查看数字绘画技术(Apress，2016)。在本书中，我向读者展示了如何使用 Corel Painter 2016、GIMP 和 Inkscape 创建(和优化)数字绘画素材，Inkscape 是数字成像和数字插图软件与 HTML5 的桥梁。这本书有章节涉及数据足迹优化、Android、JavaScript、Java 8 和 JavaFX 编码、HTML5 标记，以及跨平台和跨设备的新媒体内容发布。
视觉效果:使用 JavaScript 创建 VFX
其他高级新媒体类型，如视觉效果或 VFX，也可以使用高级 JavaScript 编程结合 CSS3、WebGL2 和 HTML5 标签进行模拟。这是一个超出本书标签标记重点的高级领域，但如果你想了解更多关于视觉效果的知识，你应该查看视觉效果基础(Apress，2016)。在本书中，我向读者展示了如何使用 BlackMagic Fusion 和 GIMP 创建(和优化)视觉效果素材，因此它将数字成像、数字视频、数字音频和数字插图软件与 HTML5 连接起来。这本书介绍了数据占用优化、Android、Java 8 和 JavaFX 编码、HTML5 标记以及跨平台和跨设备发布。
网络语音:语音合成和识别
最后，让我们快速了解一下语音识别和语音合成，它们是最近使用 Web Speech API 添加到 HTML5 浏览器 Google Chrome 和 Apple Safari 中的。预计 Firefox 也会添加它，因为它正在支持 ITV 和智能手机。Opera 也在做同样的事情。对于基于 HTML5 的平台和浏览器来说，新媒体的未来看起来很光明，这对于多媒体制作者来说尤其令人兴奋。有关谷歌浏览器中语音识别和语音合成的示例，请访问 https://www.google.com/intl/en/chrome/demos/speech.html 。
摘要
本章讨论了使用、
九、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 这一重要章节中的标签来实现的。
主标签:定义文档内容的顶层
标签定义了文档的最顶层。单个文档中只使用一个
让我们使用这个
<!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>
如果您想将图片文本放在图像或视频的上面，而不是下面，您也可以将子标签放在父标签内，在或
接下来，让我们看看最后几个语义标签，它们添加了各种细节元素，包括弹出信息、摘要、文本标记和系统时间。
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 中的文本发布标签，它允许开发人员通过样式、上标和下标、换行和断词、引用、缩写、引用等来控制基于文本的内容。这些与文本相关的标签允许您定义文档内容，而不必使用样式表进行样式化。
在这一章中，我将讨论在 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 分隔符标签:换行符和断字符
接下来的两个标记告诉呈现引擎如何拆分文本，或者使用换行符和回车符来创建换行符，或者使用连字符来跨行拆分长单词，这称为单词拆分。换行符使用
标签，断字符使用
让我们先来看看单词 break 标签，因为大多数开发人员并不知道它，它使用起来非常简单，对于确保长单词以完全由文本内容开发人员控制的方式换行非常有用。让我们用
为此，在我们希望呈现引擎(浏览器和操作系统)在必要时将其分隔为多行的地方，通过使用
<!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 文档和应用中发布基于表格的内容。
十四、HTML5 表格：以表格格式构造数据
我们来谈谈 HTML5 的十个表格创建标签。它们允许开发人员在基于网格的布局中使用表格格式创建不同类型的基于表格的内容。这些更加专门化的与表格相关的标记允许 HTML5 开发人员使用不到十几个标记，非常灵活地定义他们的文档表格内容。table 标签具有内在的语义，因为它们显然用于定义数据集合和信息网格的表格。
本章解释了表格标签，它实现了 HTML 中的表格内容。HTML5 支持所有的标签；和在 HTML 的早期版本中也受支持。包括表格，表格数据，列，表格列组，标题，表头，表尾，表组表头
| , table row |，表体
| 。 |
HTML5 表格标签:表格信息
本章涵盖了 HTML5 中支持的十个文本相关的表格标签。他们创建信息的表格集合，很像 Android 或 Java 编程中的网格，但风格像表，这就像 2D 数据定义集合(数据库也使用表)，类似于您体验的基本 SQL 定义。所有这些标签在 HTML 的旧版本中都受支持；一些标签甚至可以追溯到 HTML 2.0，我会在适用的地方指出这一点。表格标签最好用作第十章中所涉及的语义标签的子标签，以便将基于表格的内容封装(或包装)到标准化的语义容器中。表格数据也是语义化的；它被语义搜索所吸收，因为与表相关的标记名描述了表标记名中包含的数据对表格式内容的组织所表示的内容！
由于符合当前 HTML5 中正在进行的新的 Web 3.0 语义，表标签已经从它们最近面临的模糊状态中回归。有一段时间，开发人员从使用表格和框架转向使用其他容器和 CSS 来实现相同的视觉效果。但是如果使用得当，表标记可以创建相互关联的数据表，就像数据库一样。表 14-1 显示了 HTML5 和早期 HTML 版本支持的十个表标签。
表 14-1。
Ten HTML Content Publishing Tags for Table Creation
| HTML 表格创建标签 | HTML 表格创建标签用法 | | --- | --- | | 桌子 | 定义表格 | | 标题 | 定义表格标题 | | tr | 定义表格行 | | 泰国(Thailand) | 定义表格标题单元格 | | 任务描述 | 定义表格数据单元格 | | 四羟乙基己二酰胺 | 定义表格标题 | | 第比利斯 | 定义一个表体 | | 脚踏 | 定义表格页脚 | | 山口 | 定义表格列 | | 科尔集团 | 定义表格列组 |让我们来看看逻辑部分中的表创建标签，按照它们在这个表中的排列方式，从您的核心 HTML5 表标签、和
开始。这些为 HTML5 呈现引擎定义了重要的表格特征。出于这个原因，这些列表标签也可以归类为语义搜索标签，因此由 HTML5 内容开发人员正确实现它们是很重要的。顶级 HTML 表格创建:表格和标题
顶层表格标签用于定义表格本身；其中包括表格标签，它被用作表格的父容器，以及它的子标签— 和
，它们被用来指定主要的表格数据，分别称为表格主体和表格标题。表标签:用于创建表元素的核心标签
一个标签定义了 HTML 表格元素。最起码，一个 HTML 表格必须由
元素和一个或多个 < tr > 、 < td > 和 < th > 元素组成。
HTML5 中仍然支持两个元素参数:sortable 和 border。CSS3 替换了八个参数，但是在以前的 HTML 版本中仍然有效。均如表 14-2 所示。
表 14-2。
十个<表格>参数用于表格配置
中心)
| HTML table label parameters | HTML table tag parameter usage | | --- | --- | | Sortable | Define the table as sortable | | frame | Define the table to have a border. | | bgcolor(bgcolor) | Define the table background color. | | 单元格填充 | Define table cell fill values. | | 单元格间距 | Define table cell spacing values. | | 设计 | Define the visible outer border. | | |正如你在本章后面看到的，所有其他的表格标签都是的子标签。元素定义了一个表格行，
| The element defines each table cell, | The element defines the header of a label table column. |
更复杂的表还包括、、、、、、和、元素，所有这些都将在本章中详细介绍。
让我们使用标签在包含意大利跑车的流行品牌和型号的部分中创建一个表，并使用 HTML5 中支持的两个参数 border 和 sortable，使该表具有边框，并能够被排序。值得注意的是，目前并非所有的浏览器都支持可排序参数。这个奇特的汽车表是使用以下 HTML5 标记完成的:
<!DOCTYPE html><html>
<head><title>Exotic Car Table</title></head>
<body>
<section id="exotic car table">
<table border="1" sortable>
<tr>
<th>Brand</th>
<th>Model</th>
</tr>
<tr>
<td>Ferrari</td>
<td>LaFerrari</td>
</tr>
<tr>
<td>Bugatti</td>
<td>Chiron</td>
</tr>
<tr>
<td>Maserati</td>
<td>GranCabrio</td>
</tr>
<tr>
<td>Lamborghini</td>
<td>Gallardo</td>
</tr>
</table>
</section>
</body></html>
接下来，让我们看看 table caption 标签如何允许您向包含它的父表标签添加标题。
标题标签:向表格添加标题
标签被用作子标签来定义表格元素的标题。需要在标签之后立即插入
标签。这个标签有一个 align 参数，由于使用 CSS 进行样式化和使用标签标记进行内容定义的趋势，HTML5 不支持这个参数。让我们使用 caption 标签为您的表格示例添加一个标题。这是通过以下 HTML 标记完成的:
<!DOCTYPE html><html>
<head><title>Exotic Car Table with Caption</title></head>
<body>
<section id="exotic car table">
<table>
<caption>Exotic Italian Car Manufacturers and Current Models</caption>
<tr><th>Brand</th><th>Model</th></tr>
<tr><td>Ferrari</td><td>LaFerrari</td></tr>
<tr><td>Bugatti</td><td>Chiron</td></tr>
<tr><td>Maserati</td><td>GranCabrio</td></tr>
<tr><td>Lamborghini</td><td>Gallardo</td></tr>
</table>
</section>
</body></html>
请注意，我还通过设置标记间距的方式使表格标记更加紧凑，表格行构造各自占据一行标记。只要一切嵌套正确，间距对 HTML5 解析引擎没有影响。
接下来，让我们看看表内容定义子标签。
HTML5 表格内容定义:TR、TH 和 TD
表格 14-1 中接下来的三个标签允许你定义表格行和它们的单元格。< tr >标签有五个参数，HTML5 都不支持。我将它们包括在表 14-3 中，供从事遗留项目的人参考。
表 14-3。
Five Table Row Parameters Used Prior to HTML5
| HTML 表格标签参数 | HTML 表格标记参数用法 | | --- | --- | | 排列 | 对齐(左对齐、右对齐、居中、两端对齐) | | bgcolor(bgcolor) | 定义表格行背景颜色 | | 茶 | 将内容与表格行字符对齐 | | 查洛夫 | 定义字符对齐偏移量 | | 瓦伦 | 垂直对齐(上、中、下) |表格行有点像数据库中的记录，表格单元格充当数据记录中的数据字段。事实上，随着表格的可排序性和语义搜索越来越多地与数据相关联，标签及其子标签非常适合在 Web 3.0 中以这种方式使用。
正如您在迄今为止的示例中所看到的，每个元素包含一个或多个 < th > 或 < td > 元素。
因为您已经看到了如何使用元素，所以我在这一节中继续介绍表格标题 And tabular data. Element without taking up any space for the tag list. To see how these elements work, just review the tags I mentioned in the previous section.
第 TH 个标签:定义表格行中的表格标题单元格
标签定义了表格行中的表格标题。这些标题通过为每列使用标题来标记后续的数据行。HTML 表格有两种单元格:标题单元格，称为标题单元格，包含标题信息；标准单元格，包含表格数据。标准单元格是通过使用 Element, which will be introduced in the next section.
默认情况下，这些 The text content used in the element is bold and centered (automatic). On the other hand, the text in your < td > element will not be thickened, and by default it should be left-aligned, just like the text in most tables and spreadsheets, that is, data, not title text (labels, data field names, etc. ).
这可以在 The default CSS3 stylesheet setting of the element, which is shown here to strengthen this point:
th { display: table-cell;
vertical-align: inherit;
font-weight: bold;
text-align: center; }
请注意，CSS 通过表格单元格参数隐式支持表格，并且垂直对齐参数是从表格行父标签继承的(参见表格 14-3 )。
HTML5 中的表格标题标签支持六个参数，如表格 14-4 的顶部所示。还有 9 个其他参数在 HTML5 中不受支持，但在早期版本的 HTML 中可以使用。sorted 参数允许您定义排序方向(reversed、number、reversed number 或 number reversed ),而 scope 参数允许您定义第<个>标记的影响范围(行、列、行组或列组)。
表 14-4。
第十五个<第>参数用于表头 justify)
| HTML table label parameters | HTML table label parameter usage | | --- | --- | | sort | Define the sort direction of this column. | | range | Define header range (col, line or group) | | abbreviate | Define a header abbreviation term. | | meter | Define header cells. A header involves | | Column span | Define several column header spans. | | Row span | Define a header span for several rows. | | axis | Define the category name of the header cell. | | bgcolor(bgcolor) | Define the title background color | | 茶 | Match content with table title characters | | 查洛夫 | definition | [Top, Middle and Bottom] Vertical alignment | | width | Defines the table width. |abbr 参数定义了标题的缩写。headers 参数定义了与 Title cell related to the label. This allows you to have more than one layer of title information. To use this headers parameter, assign an id to the top-level header and reference it with the headers parameter. The following is an example of using HTML tags:
<tr><th id="namedata" colspan="2">Enter Name Here:</th></tr>
<tr>
<th headers="namedata">Proper Name:</th>
<th headers="namedata">Family Name:</th>
</tr>
在前面的示例中，我还展示了一个 colspan 参数，因为您在这里输入的姓名需要与您的正确姓名和姓氏标题对齐，所以它需要使用一个 colspan="2 "参数值跨越两列。您可以使用 rowspan 参数使标题跨越多行来实现同样的目的。
接下来，让我们看看具有不同页眉、页脚和正文部分的复杂表格。
复杂表定义:THEAD、TBODY、TFOOT
与语义标签类似，父标签允许您定义表格的页眉和页脚，以及内容的主体。元素与和元素一起使用，每个元素都可以指定表定义的各个组成部分；即一个表头，或；一个表体，或<t 表体>；和一个表尾，或< tfoot >。这种更复杂的表格定义形式使用了表格 14-1 第三部分所示的标签。
THEAD 标签:定义每个描述术语子元素
标签将标题内容分组在一个 HTML 表格中。元素需要与 < tbody > 和 < tfoot > 元素结合使用，以便您指定表中的每个组件语义部分。然后，浏览器利用这些语义设计元素进行异步滚动，允许表体独立移动，而页眉和页脚信息保持锁定。当打印跨越多页的大型表格时，定义这些全局表格区域元素可以分别在每页的顶部和底部打印表头和表尾。
这个标签必须始终是一个父标签的子标签，并且需要在任何元素之后声明。另外，必须用在或表节容器之前，并且用在任何元素之前。??
以及任何这里显示了为这个标记定义的默认 CSS3，仅供参考，正如您所见，标题垂直居中，其边框颜色继承自其父容器，并且它有自己的表格标题组 CSS3:
thead { display: table-header-group;
vertical-align: middle;
border-color: inherit; }
HTML5 中不支持任何表头组参数，但是我在表 14-5 中列出了它们，供从事遗留 HTML 标记项目的人参考。这些参数都用于对齐，它们的用法不言自明。
表 14-5。
Table Head Parameters Used Prior to HTML5
| HTML THEAD 标签参数 | HTML THEAD 标记参数用法 | | --- | --- | | 排列 | 对齐(左对齐、右对齐、居中、两端对齐) | | 茶 | 将内容与表格行字符对齐 | | 查洛夫 | 定义字符对齐偏移量 | | 瓦伦 | 垂直对齐(上、中、下) |接下来，我们来看看表体标签。
TBODY 标签:定义每个描述数据子元素
标签包含了表的主要部分，其考虑因素与上一节讨论的相同。这个 标签必须始终是父标签的子标签，并且需要在任何元素之后和元素之后声明。另外，必须用在表尾部分容器之前，并且用在包含任何元素之前。
元素之后、任何 | and | Any of the elements |标签的默认 CSS 被看作是一组表格行，并且是居中对齐的。此处显示是为了参考，因为这本书不包括 CSS3 快速语法参考:
tbody { display: table-row-group;
vertical-align: middle;
border-color: inherit; }
参数与表 14-5 中的参数相同，在此不再赘述。
接下来，让我们改变本章中的初始示例，使用一个更复杂的表格版本，使用和 来创建相同的结果:
<!DOCTYPE html><html>
<head><title>Exotic Car Table with Caption</title></head>
<body>
<section id="exotic car table">
<table>
<caption>Exotic Italian Car Manufacturers and Current Models</caption>
<thead>
<tr><th>Brand</th><th>Model</th></tr>
</thead>
<tbody>
<tr><td>Ferrari</td><td>LaFerrari</td></tr>
<tr><td>Bugatti</td><td>Chiron</td></tr>
<tr><td>Maserati</td><td>GranCabrio</td></tr>
<tr><td>Lamborghini</td><td>Gallardo</td></tr>
</tbody>
</table>
</section>
</body></html>
接下来，我们来看看表尾标签。
TFOOT 标签:定义每个描述数据子元素
标签保存了表格的页脚部分。它与前两节中讨论的考虑事项相同。这个标签必须始终是一个父标签的子标签，并且需要在任何元素之后和元素之后声明。此外，在< tbody >表体节容器之前必须使用一个，这与您可能的假设是相反的。我会假设< tfoot >标记在< tbody >标记之后。其实不是这样的，所以要记住这个规则！
元素之后、任何一个标签的默认 CSS 如下所示:
tfoot { display: table-footer-group;
vertical-align: middle;
border-color: inherit; }
参数与表 14-5 中的参数相同，在此不再赘述。记住，它们在 HTML5 中不受支持，所以只在遗留 HTML 项目中使用它们，并使用 CSS 来实现这些特性。HTML5 浏览器可能会呈现这些不推荐使用的参数，所以一定要在所有流行的浏览器上测试您的 HTML 标记。
接下来，让我们改变本章中的初始示例，使用一个更复杂的表格版本，使用、、、来创建一个增强的表格结果，它有一个带引用的页脚。这是在下面的 HTML5 标记中完成的:
<!DOCTYPE html><html>
<head><title>Exotic Car Table with Caption</title></head>
<body>
<section id="exotic car table">
<table>
<caption>Exotic Italian Car Manufacturers and Current Models</caption>
<thead>
<tr><th>Brand</th><th>Model</th></tr>
</thead>
<tfoot>
<tr><th>References:</th></tr>
<tr><td>Sports Car Brands and Models researched using Google</td></tr>
</tfoot>
<tbody>
<tr><td>Ferrari</td><td>LaFerrari</td></tr>
<tr><td>Bugatti</td><td>Chiron</td></tr>
<tr><td>Maserati</td><td>GranCabrio</td></tr>
<tr><td>Lamborghini</td><td>Gallardo</td></tr>
</tbody>
</table>
</section></body></html>
接下来，让我们看看与列相关的表标记。
表格列定义:列和列组
最后，让我们看看几个允许您处理表格列的表格标记。一个标签通常用在一个标签内来定义整个列的列特征，这样你就不必在每一个 or 标签内都这样做。HTML5 不支持任何列参数，但是我在表 14-6 中列出了它们，供所有从事遗留 HTML 标记项目的人使用。
表 14-6。
表格列参数使用在 HTML 5 对齐
| HTML THEAD tag parameters | HTML THEAD tag parameter usage | | --- | --- | | 排列 | Align (align left, align right) | | 茶 | Match content with table line characters |接下来，让我们为示例表中的每一列添加背景色。我们将用黄色表示汽车制造商列，用橙色表示汽车型号列。这是通过将这两个定义从左到右依次嵌套在父标签中实现的，如下面的 HTML5 标记所示:
<!DOCTYPE html><html>
<head>
<title>Exotic Car Table with Caption</title>
</head>
<body>
<section id="bi-colored column exotic car manufacturer and model table">
<table>
<caption>Italian Car Manufacturer (Yellow) and Model (Orange)</caption>
<colgroup>
<col style="background-color:yellow" />
<col style="background-color:orange" />
</colgroup>
<thead>
<tr><th>Manufacturer</th><th>Model</th></tr>
</thead>
<tfoot>
<tr><th>References:</th></tr>
<tr><td>Sports Car Brands and Models researched using Google</td></tr>
</tfoot>
<tbody>
<tr><td>Ferrari</td><td>LaFerrari</td></tr>
<tr><td>Bugatti</td><td>Chiron</td></tr>
<tr><td>Maserati</td><td>GranCabrio</td></tr>
<tr><td>Lamborghini</td><td>Gallardo</td></tr>
</tbody>
</table>
</section>
</body></html>
这将黄色放在汽车制造商列后面，橙色放在汽车型号列后面。注意，子标签定义的构造在标签之后，在任何 、、 或 标签之前。
摘要
在本章中，您学习了 HTML5 和早期 HTML 版本中的表格标签支持，包括、、、、和标签。下一章着眼于 HTML5 标签，这些标签支持在 HTML5 文档和应用中发布基于表单的内容。
| 、 | 、??、?? |、
十五、HTML5 表单：使用 HTML5 标签创建表单
接下来说说 HTML5 的 13 个表单创建标签；三个是 HTML5 新版本，十个在 HTML5 和 HTML 传统版本中工作。它们允许开发人员创建不同类型的基于表单的内容，使用带有数据输入(或数据输入)字段的表单容器以及表单中的高级用户界面控件，例如可以使表单具有交互性的按钮和下拉列表。这些更加专门化的表单相关标记允许 HTML5 开发人员使用十几个强大的标记，非常灵活地为他们的文档定义表单。在大多数情况下，表单标记与服务器端处理组件进行对话，因此在这个过程中，我们只讨论客户端表单设计 HTML5 标记组件。对于服务器端处理，一定要在 Apress 网站( www.apress.com )上找一本关于 PHP、JSF、Drupal、Joomla、AJAJ 或者 AJAX 的书。
在这一章中，您将看到与在 HTML 中实现表单内容相关的表单标签，因为所有这些标签在 HTML5 中都是受支持的，并且在 HTML 的早期版本中也有很多。这些标签包括表单
HTML5 表单标签:交互信息
本章涵盖了 HTML5 中支持的 13 个文本相关的表单标签，它们创建交互式表单来收集信息。这些通常被设计成网格结构，甚至类似于表格。这些标签中有十个在 HTML 的旧版本中受支持，其中三个是 HTML5 的新标签。这些表单标签也可以作为第十章中语义标签的子标签，这样基于表单的内容就被封装(或包装)到标准化的语义容器中。表单数据也可以是语义的；可以使用语义搜索来吸收它，因为与表单相关的标签名称描述了由该标签定义的表单元素的作用，因此它代表了内容。
表 15-1 显示了 HTML5 支持的 13 个表单标签；其中 10 种在传统 HTML 版本中受支持。
表 15-1。
Thirteen HTML Forms Design Content Publishing Tags
| HTML 表单创建标签 | HTML 表单创建标签的目的或用途 | | --- | --- | | 形式 | 定义表单 | | 投入 | 定义输入(数据字段) | | 标签 | 定义输入(字段)标签 | | 文本区域 | 定义文本区域(多行输入字段) | | 表单分组 | 定义字段集(一组输入字段) | | 神话；传奇 | 定义字段集的图例(标签) | | 挑选 | 定义一个下拉列表 | | 选择权 | 定义下拉列表中的选项 | | optgroup(选项组) | 在下拉列表中定义一个选项组 | | 按钮 | 定义一个按钮 | | 数据列表(HTML5 中的新功能) | 输入控件的预定义选项列表 | | keygen(html 5 中的新功能) | 在表单中定义密钥对生成器字段 | | 输出(HTML5 中的新功能) | 定义输出(计算的结果) |让我们看看这些表单创建标签在逻辑部分中的排列方式，从核心 HTML5 表单标签
基本的 HTML 表单创建:表单、标签和输入
定义表单本身的顶级表单标签包括表单
表单标签:用于创建表单元素的核心标签
标签定义了 HTML 表单结构，用于获取用户数据输入。一个 HTML 表单最起码必须包含这个
HTML5 中引入了两个
正如你在本章中看到的，所有其他的表单标签都是
<!DOCTYPE html><html>
<head>
<title>Empty Exotic Car Preference Form</title>
</head>
<body>
<section id="exotic car preference form">
<form action="myForm.asp" method="get" autocomplete="on" novalidate>
<!-- Your Form Design and Child Tags will be nested in here -->
</form>
<p>Form data will be sent to a page on the server called "myForm.asp"</p>
</section>
</body>
</html>
这个
接下来，让我们看看如何使用 input 标签，从填写表单的人那里获取数据输入。
输入标签:向表单添加数据输入字段
标签用作子标签，定义用户输入文本的数据输入区域。这些通常在表单和数据库中称为字段。这个标签有如此多的参数，我将包括两个表:一个包含 HTML5 的新参数，另一个包含 HTML5 不支持的参数。还有那些在 HTML5 和传统 HTML 版本中都有效的参数。在一个在父标签
让我们使用标签要求用户输入他们喜欢的汽车制造商和型号，如下面的标记所示:
<!DOCTYPE html><html>
<head>
<title>My Exotic Car Preference Form with Two Input Fields</title>
</head>
<body>
<section id="exotic car preference form">
<form action="myForm.asp" method="get" autocomplete="on" novalidate>
Manufacturer: <input type="text" name="manufacturer" value="Ferrari"><br>
A Model Name: <input type="text" name="model-name" value="LaFerrari"><br>
</form>
<p>Please enter favorite exotic car manufacturer and model name above!</p>
</section>
</body>
</html>
参数指定文本输入、字段名称和默认值。autocomplete="on "参数告诉浏览器允许预测或猜测用户当前正在键入的数据值。当用户开始在字段中键入内容时，浏览器应该根据先前键入的值或预定义的输入来显示填充字段的选项。当我们在本章稍后讨论用于定义数据元素列表的
表 15-3 列出了 19 个新的 HTML5 <输入>标签参数。
表 15-3。
HTML5 Parameters Used in Form Configuration
| HTML5 输入标记参数 | HTML5 输入标记参数的用法 | | --- | --- | | 自动完成 | 为输入指定自动完成打开或关闭 | | 自（动）调焦装置 | 页面加载时为输入指定的自动对焦 | | 目录名 | 为输入指定文本方向 | | 形式 | 指定了输入所属的表单 | | 形成动作 | 处理表单的指定 url | | 表单 enctype | 指定编码(用于提交或图像) | | 形法 | 指定要使用的 HTTP 方法(get 或 post) | | 甲酰新戊酸盐 | 不应验证指定的输入 | | 表单目标 | 指定显示响应的位置 | | 高度 | 指定了输入元素的高度 | | 目录 | 包含输入选项的指定数据列表 | | 最大 | 指定输入元素的最大值 | | 部 | 指定输入元素的最小值 | | 多个的 | 为输入指定了多个值 | | 模式 | 指定检查元素值所依据的“正则表达式” | | 占位符 | 指定一个简短的提示，描述要输入到元素中的预期值 | | 需要 | 将输入字段指定为必填字段 | | 步骤 | 为输入指定的法定数字间隔 | | 宽度 | 指定了输入元素的宽度 |表 15-4 列出了 11 个遗留 HTML <输入>标签参数。
表 15-4。
HTML Parameters Used in Form Configuration
| HTML 输入标记参数 | HTML 输入标记参数的用法 | | --- | --- | | 对齐(不在 HTML5 中) | 指定图像输入的对齐方式；仅适用于 type="image "(左、右、上、中、下) | | 接受 | 指定服务器接受的文件类型；仅适用于 type="file "(音频/类型、视频/类型、图像/类型) | | 中高音 | 指定图像的替换文本；这仅适用于 type="image " | | 检查 | 指定页面加载后预先选择的输入元素；这适用于 type="checkbox "或 type="radio "(单选按钮) | | 有缺陷的 | 指定应该禁用元素 | | 最大长度 | 指定输入字段中的最大字符数 | | 名字 | 指定输入字段(元素)名称 | | 只读的 | 指定输入字段是只读的 | | 大小 | 以字符表示的指定输入字段宽度 | | 科学研究委员会 | 指定用作提交按钮的图像的 URL 仅用于 type="image " | | 类型 | 指定要显示的输入元素的类型 | | 价值 | 指定输入元素默认值 |HTML5 不支持 align 参数，因为它是用 CSS3 实现的。这 11 个参数在 HTML5 和 HTML 的早期(传统)版本中都受支持。
让我们添加一个字符数限制，允许您的用户用来指定汽车品牌和型号名称:
<form action="myForm.asp" method="get" autocomplete="on" novalidate>
Manufacturer:
<input type="text" name="manufacturer" value="Ferrari" maxlength="16"><br>
A Model Name:
<input type="text" name="model-name" value="LaFerrari" maxlength="24"><br>
</form>
这个 maxlength 参数允许您控制文本数据字段的宽度，以便您可以有一个紧凑的表单设计，并将用户限制在一个合理的字符数据长度。
让我们将 autofocus 添加到第一个数据输入字段，以便用户将光标放在正确的数据字段中，准备输入:
<form action="myForm.asp" method="get" autocomplete="on" novalidate>
Manufacturer:
<input type="text" name="manufacturer" value="Ferrari"
maxlength="16" autofocus><br>
A Model Name:
<input type="text" name="model-name" value="LaFerrari" maxlength="24"><br>
</form>
现在让我们通过使用
<form name="carpreferenceform" action="myForm.asp" method="get"
autocomplete="on" novalidate>
Manufacturer:
<input type="text" name="manufacturer" value="Ferrari"
maxlength="16" form="carpreferenceform" autofocus><br>
A Model Name:
<input type="text" name="model-name" value="LaFerrari"
maxlength="24" form="carpreferenceform"><br>
</form>
注意，因为我在我的
<form name="carpreferenceform" action="myForm.asp" method="get"
autocomplete="on" novalidate>
Manufacturer:
<input type="text" name="manufacturer" value="Ferrari" height="24"
maxlength="16" form="carpreferenceform" autofocus width="128"><br>
A Model Name:
<input type="text" name="model-name" value="LaFerrari" height="24"
maxlength="24" form="carpreferenceform" width="128"><br>
</form>
我不打算在这里详细介绍元素的 30 个参数，因为其中一些是不言自明的，一些很少使用，还有一些与表单处理的服务器端结合使用，这很可能是指定使用什么参数的不同团队成员！
接下来，我们来看看
标签标记:输入元素的固定文本标签定义
鉴于标签是一个空标签，不包含任何内容，只包含参数，而<标签>标签可以在<标签>和</标签>开始和结束标签之间包含一个描述性标签。<标签>标签专门用于定义相关<输入>元素的标签。这个<标签>对于用户来说，除了一个文本标签之外，没有任何特别的东西。然而，它确实为触摸屏和鼠标用户提供了用户体验改进，因为如果用户触摸或单击使用此<标签>元素指定的文本，它将切换由<输入 type="control-name" >指定的输入(control)元素。
这个
标签的 for 参数应该等于相关元素的 id 属性，以便将它们绑定在一起。这显示在下面的 HTML5 标记示例中:
<!DOCTYPE html><html>
<head>
<title>My Exotic Car Preference Form using Six Radio Buttons</title>
</head>
<body>
<section id="exotic car preference form">
<form name="carform" action="myForm.asp" method="get" novalidate>
<label for="ferrari">Ferrari</label>
<input type="radio" name="cartype" form="carform" id="ferrari"
value="Ferrari Brand Selected" /><br>
<label for="maserati">Maserati</label>
<input type="radio" name="cartype" form="carform" id="maserati"
value="Maserati Brand Selected" /><br>
<label for="bugatti">Bugatti</label>
<input type="radio" name=cartype" form="carform" id="bugatti"
value="Bugatti Brand Selected" /><br>
<label for="laferrari">Ferrari</label>
<input type="radio" name="carmodel" form="carform" id="laferrari"
value="Ferrari La Ferrari Model Selected" /><br>
<label for="grancabrio">GranCabrio</label>
<input type="radio" name="carmodel" form="carform" id="grancabrio"
value="Maserati GranCabrio Model Selected" /><br>
<label for="chiron">Chiron</label>
<input type="radio" name=carmodel" form="carform" id="chiron"
value="Bugatti Chiron Model Selected" /><br>
<input type="submit" value="Please Submit My Choices" form="carform" />
</form>
<p>Please select your favorite exotic car manufacturer and model name</p>
</section>
</body></html>
这次我们使用单选按钮来指定用户选择他们最喜欢的汽车制造商和最喜欢的汽车。单选按钮按名称分组，这样您就不能选择多个，并且分别使用 form 和 for 参数连接到前面描述的表单和输入。您提供的值是当使用标签提交表单时发送到服务器(或电子邮件地址)的内容，该标签用于一个简单的提交按钮。本章稍后将介绍复杂按钮。接下来，让我们看看表单数据输入的更大区域，例如文本区域或段落文本输入以及字段组或字段集。
HTML 表单内容组:TextArea 或 FieldSet
表 15-1 中接下来的三个标签允许你为文本和数据输入字段集合定义大的数据输入区域。这些标签有十几个参数，HTML5 都支持这些参数。我将它们包括在表 15-5 和 15-6 中，并试图涵盖示例中的所有关键参数。
表 15-6。
Three
