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.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 文档，定义它能做什么以及如何在互联网上找到它。这些子标签包括、、<脚本>、<元>、<链接>、<基础>和< noscript >标签。< title >标签将一个名字放在浏览器、标签和页面的顶部。<脚本>标签定义了 JavaScript 配置。< style >标签定义了样式表(CSS3)的配置。链接>标签链接到外部文件资源。< meta >标签允许你添加元数据。标签定义了 HTML5 文档中所有链接目标的默认 URL。<头>结构看起来是这样的:</根>
<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 文档的搜索引擎配置。
三、HTML5 搜索引擎优化：标题和元
让我们在第三章继续看对搜索引擎优化最重要的标签，也称为 SEO。SEO 是优化你的网站在搜索引擎中排名的实践。SEO 标签位于文档定义和配置级别。这些标签包含在文件头中，在第二章中有简要介绍。以 SEO 为中心的标签包括您的<标题>标签，它定义并包含您的文档标题和关键字，以及< meta >标签，它定义 HTML5 文档如何在各种搜索引擎中列出。除了包含实际文本内容和搜索引擎用来索引和排列 HTML5 文档的关键字的段落和标题标签之外，这两个标签和< base >标签是 HTML5 标记模式中用于 SEO 的最重要的标签。我们将在本书的后面介绍这些标签，以及<主体>标签。
在这一章中，我还将介绍 HTML5 文档级 SEO 标签的标记(编码)格式和语法，以及它们的各种参数。我们看看如何使用标签定义你的文档标题，以及你可以建议搜索引擎使用的不同类型的元数据，比如更常用的标签或一组标签。我们还将看看< base >标签，因为它也与 SEO 相关。
HTML5 HEAD 标签对 SEO 很重要
本章包括三个高级标签，用于定义你希望搜索引擎如何索引你的 HTML 文档标题、描述和内容。我们将从定义文档标题的标签开始，然后向下进入标签内部的标签，包括和标签。
TITLE 标签:定义 HTML5 文档标题
文档定义部分中的第一个标签通常是标签，它包含开始标签和结束标签之间的 HTML5 文档标题。标签是搜索引擎算法用来确定文档内容的关键标签之一。这些 SEO 算法被称为机器人，因为它们使用的代码模拟人工智能，因此它们看起来像搜索引擎机器人一样运行。
以下 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 引用：使用外部链接和收藏夹图标
让我们继续看一看标签。这个重要的标签用于连接外部文件、文档和资源，如 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 | 脚本参数 | 脚本参数用途 | | --- | --- | | 科学研究委员会 | 指定外部 JavaScript 文件的 URL | | 类型 | 为外部 JS 文件指定可选的媒体类型 | | 字符集 | 指定外部 JS 文件的字符编码 | | 推迟 | 指定在 html 解析后执行脚本 | | 异步ˌ非同步(asynchronous) | 指定异步执行脚本 | | xml:空间 | 指定是否应保留代码中的空白。HTML5 不支持这一点。 |
您可能想知道何时应该使用外部还是内部 JavaScript 代码。经验法则是对全局 JavaScript 代码使用外部 JavaScript 素材，HTML5 网站中的每个文档都使用它；对本地化的 JavaScript 函数使用内部 JavaScript 代码，这些函数只用于特定的 HTML5 页面、文档或应用。
如果一个函数使用了不止一次，那么就将它外部化，这样它就可以被缓存，而不需要被你的服务器服务超过一次，只要 HTML5 页面需要它，就可以使用你的本地存储设备(缓存)来访问它。
让我们看看我是如何将 JavaScript 代码外部化的，这些代码在我的 iTVclock.com 网站上用来设置时钟的指针。
SRC 参数:外部化 JavaScript 程序素材
您可以像处理级联样式表一样外部化 JavaScript 代码，除了使用带有 src(源文件)参数的<脚本>标签来代替标签。值得注意的是，外部化的 JavaScript 文件不能包含<脚本>标签，只有通常存在于<脚本>标签中的 JavaScript 代码才能使用 HTML5 文档方法的内部 JavaScript。
一个外部的 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">
<link rel="author"
href="https://plus.google.com/u/0/+WallaceJackson/about/p/pub"
title="Wallace Jackson">
<script src="itvclock.js" type="text/javascript">
</head>
<body>
<!-- iTV Clock's HTML5 Document Body Content (Tags) Will Go In Here -->
</body>
</html>
如您所见，我提供了一个可选的类型参数，这样 HTML4 浏览器也可以使用这段代码。如果我想让这个 HTML 标记支持 XHTML，那么这个标记应该像下面的 XHTML 标记语法一样，使用正确的结束标记:
< script src="itvclock.js" type="text/javascript" />
如果我只支持 HTML5 渲染引擎，那么我需要声明的所有外部 JavaScript 素材就是下面的 HTML5 标记语法:
<script src="itvclock.js">
接下来，让我们看看如何同步加载外部。js JavaScript 素材，这样您就可以控制 JavaScript 代码相对于加载和解析(执行)文档的 HTML5 标记(标签)的执行方式。
ASYNC 和 DEFER 参数:JavaScript 素材执行
相对于 HTML5 标记(标签)的呈现(解析)，有三种方法可以控制 JavaScript 代码的执行方式。如果您没有指定任何参数来控制同步(这是默认设置)，那么外部 JavaScript 会在文档主体中的 HTML5 内容标记之前立即下载并执行，因为
推迟 JavaScript 处理:参数
让我们看一个 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">
<link rel="author"
href="https://plus.google.com/u/0/+WallaceJackson/about/p/pub"
title="Wallace Jackson">
<script src="itvclock.js" type="text/javascript" defer="defer" >
</head>
<body>
<!-- iTV Clock's HTML5 Document Body Content (Tags) Will Go In Here -->
</body>
</html>
如您所见，我提供了一个可选的类型参数，这样 HTML4 浏览器也可以使用这段代码。如果我想让这个 HTML5 标记支持 XHTML1，这个启用了 defer 参数的
<script src="itvclock.js" type="text/javascript" defer="defer" />
如果我只支持 HTML5 呈现引擎，那么我需要声明这个外部 JavaScript 素材的全部内容就是添加了 defer 参数的以下 HTML5 标记语法:
<script src="itvclock.js" defer="defer">
接下来，让我们看看如何在解析 HTML5 标记的同时处理 JavaScript 代码。
并行 JavaScript 处理:参数
让我们看一个 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">
<link rel="author"
href="https://plus.google.com/u/0/+WallaceJackson/about/p/pub"
title="Wallace Jackson">
<script src="itvclock.js" type="text/javascript" async="async" >
</head>
<body>
<!-- iTV Clock's HTML5 Document Body Content (Tags) Will Go In Here -->
</body>
</html>
如您所见，我提供了一个可选的类型参数，这样 HTML4 浏览器也可以使用这段代码。如果我想让这个 HTML 标记支持 XHTML，那么这个标记应该看起来像下面的 XHTML 标记语法，使用正确的标记结束:
< script src="itvclock.js" type="text/javascript" async="async" />
如果我只支持 HTML5 渲染引擎，那么我需要声明的所有外部 JavaScript 素材就是下面的 HTML5 标记语法，加上 async 参数:
<script src="itvclock.js" async="async">
接下来，让我们看看如何使用 charset 参数。
CHARSET 参数:使用不同的 JS 字符集
标签 charset 参数指定了外部 JavaScript 资源中使用的字符集。需要注意的是，只有当外部的字符集。js 文件不同于 HTML5 文档中用于 HTML5 标记语法的字符集。你的<脚本>标记应该是这样的:< /root >
<!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-16"> <!-- Document using UTF-16 Character Set -->
<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">
<script src="itvclock.js" type="text/javascript" charset="UTF-8" />
</head>
<body>
<!-- iTV Clock's HTML5 Document Body Content (Tags) Will Go In Here -->
</body>
</html>
接下来，让我们快速看一下 HTML
标签。
NOSCRIPT 标签建议用户:不支持 JS
如果您使用的是/
下面是一个使用 JavaScript 素材的文档 NOSCRIPT 声明的示例，无论是内部化的还是外部化的:
<!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">
<script src="itvclock.js" type="text/javascript" />
<noscript>No JavaScript Support; Please Enable JavaScript!</noscript>
</head>
<body>
<!-- iTV Clock's HTML5 Document Body Content (Tags) Will Go In Here -->
</body>
</html>
正如您所看到的，在您的
在内部使用脚本标签:JavaScript 编码
通过用标签将 JavaScript 代码包围在 HTML5 标记旁边，也是可能的。您还可以使用注释对解析引擎“隐藏”JS 代码，但是 JavaScript 呈现引擎仍然可以正确地看到 JavaScript 代码。如下例所示，一个简单的 Hello World JS 应用位于开始和结束的
<!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">
<script>
<!--
Document.getElementById("JSapp".innerHTML="Hello World JavaScript";
-->
</script>
<noscript>No JavaScript Support; Please Enable JavaScript!</noscript>
</head>
<body>
<!-- iTV Clock's HTML5 Document Body Content (Tags) Will Go In Here -->
</body>
</html>
您应该对 JS 函数使用这种本地化的 JavaScript 方法，这些函数只存在于一个 HTML5 文档、页面或应用中。接下来，我们来看看 CSS
样式标签:使用 CSS 样式化 HTML5 标记
scoped 参数指定只应用于被样式化的元素(标签)或者“层叠”到子标签元素，这就是它被称为层叠样式表(CSS)的原因。这个参数不常实现，因为 HTML5 中的大多数样式在文档中的所有页面上全局应用。
下面是一个使用
<style> type=text/css><!-- #b (background-image:url(b.png);) --></style>
这个 HTML5 标记用本地样式替换了背景图像样式的#b 样式，为这个特定的 iTV 钟面提供了当前(正确的)背景图像。这样做可以让您拥有背景图像的全局样式，并且仍然可以在任何想要改变为背景图像定义的全局 CSS 样式的文档中替换本地背景图像样式。
请注意，我使用了注释技巧(与 JavaScript 使用的技巧相同)来对解析引擎隐藏 CSS3 代码，解析引擎无法理解它，并会抛出一个错误代码。在这本关于 HTML5 标记的书中，我没有涉及 CSS 语法，但是 Apress 有几个关于 CSS 的标题。
<!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" title="Wallace Jackson"
href=https://plus.google.com/u/0/+WallaceJackson/about/p/pub />
<script><!--
Document.getElementById("JSapp".innerHTML="Hello World JavaScript"; -->
</script>
<noscript>No JavaScript Support; Please Enable JavaScript!</noscript>
<style> type=text/css><!-- #b (background-image:url(b.png);) --></style>
</head>
<body>
<!-- iTV Clock's HTML5 Document Body Content (Tags) Will Go In Here -->
</body>
</html>
接下来，我们来看看所有 HTML5 标签可以使用的参数，然后我们来看看 anchor 标签，它们包含在 HTML5 文档和应用标记的(内容)部分。
摘要
在本章中，你学习了使用 JavaScript (JS)和带有
在下一章，你将学习 HTML5 全局参数。
六、HTML5 参数：使用全局标记属性
在我们开始广泛讨论父标签的所有子标签之前，父标签本身是标签的子标签，让我们在书的前面花一章来讨论“全局”参数，它可以被 HTML5 中的任何标签使用。这些与 HTML5 文档定义的 HEAD 和 BODY 部分中的元素(标签)一起工作。事实上，这本书的前五章已经介绍了其中的一些。
在这一章中，我介绍了所有 HTML5 文档级标签支持的 16 个参数。我向您展示了这些参数对您的 HTML5 文档和应用的作用。这些全局参数中有八个是 HTML5 中的新参数，另外八个也适用于以前版本的 HTML。在这一章之后，你将准备好学习所有的标签！
跨所有标签的 HTML 全局参数
本章涵盖了 HTML5 和以前版本(如 HTML 4.01 和 XHTML 1.1)中可用于任何标签的标签属性、特征或参数。合乎逻辑的做法是，在进入作为标签的子标签的过多标签(大约一百个)之前，先介绍这一点。我这样做是为了让我们能够在一章中涵盖这些全局参数。
表 6-1 显示了 16 个参数。表格上半部分的前八个只适用于 HTML5 浏览器和操作系统。我们首先讨论这些，因为 HTML5 是本书的主要焦点。表格的下半部分包含了在 HTML5(由于向后兼容)和 HTML 早期版本中工作的八个参数。
表 6-1。
Supported Global HTML5 Tag Attributes
| 全局参数 | 全局参数用途 | | --- | --- | | 内容可编辑 | 指定元素内容是否可编辑 | | 上下文菜单 | 为 HTML5 元素(标记)指定上下文菜单 | | 数据- | 为您的文档指定自定义数据属性 | | 可拖动的 | 指定元素是否可拖动 | | dropzone(快捷区域) | 指定删除处理(复制、移动或链接) | | 隐藏的 | 指定每个元素的可见性(相关性) | | 拼写检查 | 指定元素的拼写和语法检查 | | 翻译 | 指定在 html 解析后执行脚本 | | 访问密钥 | 指定用于聚焦元素的击键快捷键 | | 班级 | 为样式表中的元素指定类名 | | 目录 | 指定元素的文本阅读方向 | | 编号 | 为样式表中的元素指定唯一的 ID | | 语言 | 指定用于该元素的语言 | | 风格 | 允许元素的内联 CSS 样式声明 | | tab 键索引 | 指定了该元素的跳转顺序 | | 标题 | 关于元素的指定额外信息 |先说八个 HTML5 全局参数。
HTML5 全局参数:高级属性
最近添加到 HTML5 的全局属性或参数更先进，并且添加了更类似于设备、操作系统和应用而不是网站的功能，因为旧版本的 HTML 是为其设计的。这些参数允许诸如拖放、可编辑内容、上下文菜单、自定义数据定义、拼写检查和语言翻译等操作。
CONTENTEDITABLE 参数:我可以编辑这个内容吗？
contenteditable ="boolean "参数(或属性)允许您指定是否希望您的用户能够编辑该参数所附加的元素(标记)内部的内容(在中使用)。如果未在元素上设置 contenteditable 属性，但在该元素的父标记上设置了该属性，则子元素会从其父元素继承设置(true，false)。
事实上，包括 Opera 和 Firefox 在内的一些浏览器将 inherit 值设置为默认值，而 Chrome 和 Internet Explorer 则将 false 值设置为默认值。因此，可以说这个参数有三个值选项，true、false 和 inherit。
下面的 HTML5 标记是一个使用
标签创建可编辑文本段落的例子(在第十章中有介绍):
<p contenteditable="true">Go ahead, edit this text if you're so inclined</p>
接下来，让我们看看 HTML5 中带有 contextmenu 参数的上下文相关菜单。
上下文菜单参数:上下文相关菜单
contextmenu ="id "参数(或属性)允许您指定是否希望您的用户能够通过右键单击该参数所附加到的元素(标记)内部的内容来打开上下文相关的菜单。contextmenu 参数值引用了一个
标记元素的 ID 参数，您可以使用子标记来定义您的菜单选项(项目)。以下示例显示了在文档中使用
标签的上下文相关菜单(在第十四章中描述):
<div contextmenu="divmenu">
<menu id="divmenu" type="context">
<menuitem label="Menu Option 1"></menuitem>
<menuitem label="Menu Option 2"></menuitem>
<menuitem label="Menu Option 3"></menuitem>
</menu>
</div>
您可以将上下文菜单附加到任何 HTML5 元素上；毕竟这是一个全局参数，所以可以附加到任何 HTML5 标签(文档或 app 设计元素)上。确保从 UI 设计的角度来看，将菜单附加到设计元素是合理的；用户仍然需要右键单击该元素并期待该菜单。接下来，让我们看看使用 data 参数的定制数据构造。
数据参数:HTML5 的自定义数据定义
data-name="datatype "参数(或属性)允许您为该元素内部的内容指定自定义私有数据类型定义。data-name 参数值允许您将您的数据类型名称添加到参数本身，这在 HTML5 参数中是唯一的，并引用用于定义特定标记内容的数据类型。
与 JSON (JavaScript Object Notation)数据对象定义结合使用是合乎逻辑的，您可以在我的 JSON 快速语法参考(Apress 2016)书中进一步研究。
为了增强上一节中使用
标记创建的上下文相关菜单，让我们创建一个 data-car 数据类型定义，并用其原产国来命名每个菜单项(汽车型号)。为此，请修改 HTML5 标记，如下所示:
<div contextmenu="carmenu">
<menu id="carmenu" type="context">
<menuitem data-car="german" label="Mercedez Benz"></menuitem>
<menuitem data-car="italian" label="Lamborghini"></menuitem>
<menuitem data-car="american" label="Corvette"></menuitem>
</menu>
</div>
接下来，让我们看看可以在 HTML5 中使用 draggable 参数创建的可拖动设计元素。
DRAGGABLE 参数:我可以拖动这个元素吗？
draggable="boolean "参数(或属性)允许您指定是否希望用户能够在显示屏上拖动标签内的内容。这个参数实际上有三个值选项，true、false 和 auto。使用 auto 选项为每个特定的浏览器指定默认的可拖动值。
以下 HTML5 标记显示了使用
标签的可拖动文本段落:
<p draggable="true">You're able to drag this paragraph around the screen</p>
接下来让我们看看如何使用 dropzone 参数在 HTML5 中拖放可拖动的元素。这两个参数是结合在一起使用的，因为要能够放下一个元素，首先必须能够拖动它！
DROPZONE 参数:当一个元素被放下时做什么
dropzone="action "参数(或属性)允许您指定当用户将内容拖动到屏幕上的适当位置时，HTML5 应用执行的操作。该参数有三个动作值选项:移动、复制和链接。auto 选项为每个特定的浏览器指定默认的可拖动值。
要创建 dropzone 区域，使用
标签将 dropzone 参数附加到区域(参见第十四章)，如以下 HTML5 标记所示:
<div dropzone="move">Content Child Elements/Tags will be in here</div>
要在 dropzone 区域中创建拖动内容的副本，请使用 copy 选项，如以下标记所示:
<div dropzone="copy">Content Child Elements/Tags will be in here</div>
这将保持原来拖移的内容不变，并将它拷贝到新位置。这是内存效率最低的选项，因为它复制了系统内存中的拖放内容，效率很低。解决方案是使用 link 选项，它在第二个位置显示拖放的内容，但是从存储原始元素的原始内存中引用它。这是通过以下 HTML5 标记来链接该部门中的新内容实现的:
<div dropzone="link">Content Child Elements/Tags will be in here</div>
接下来，让我们看看如何使用 hidden 参数隐藏 HTML5 中的元素。
隐藏参数:隐藏元素内容，直到它是相关的
hidden="boolean "参数(或属性)允许您指定是否希望元素从视图中隐藏。该参数有两个值选项:true 或 false。指定 hidden 标记会将该值设置为 true 不指定它会将该值设置为 false。以下示例使用
标签创建一个隐藏的文本段落:
<p hidden>This paragraph will be hidden from the user's view</p>
接下来，让我们看看如何使用 spellcheck 参数对 HTML5 中的元素进行拼写检查。
拼写检查参数:允许对内容进行拼写检查
spellcheck="boolean "参数(或属性)允许您指定是否希望基于文本的元素启用拼写检查功能。这与支持文本的元素(如段落、文本区域、输入字段等)的 contenteditable 属性结合使用。
要创建支持此拼写检查功能的可编辑段落文本，请使用
标记，并将 contenteditable 和 spellcheck 参数都设置为 true 值，如以下 HTML5 标记所示:
<p contenteditable="true" spellcheck="true">Paragraph with spellchecking</p>
接下来，让我们看看 HTML5 中使用 translate 参数的语言支持。
TRANSLATE 参数:HTML5 全局语言支持
translate="boolean "参数(或属性)允许您指定是否希望将基于文本的元素翻译成不同的语言。有趣的是，这个参数没有为布尔值使用 true 和 false，而是使用 yes 和 no。缺省值(根本没有指定 translate 参数)是 yes(翻译这个文本元素内容)，相当于“支持这个内容的本地化”因此，当您希望 HTML5 文档的语言保持在最初创建时的语言时，此参数主要用于防止翻译。
要创建支持此翻译功能的段落文本，请使用不带 translate 参数的
标记，或者将该参数设置为 yes 值，如以下 HTML5 标记所示:
<p>This Paragraph Will Be Translated by Default, to Localize the Content</p>
<p translate="yes">This Paragraph WILL Be Translated, for Localization.</p>
要创建永远不会翻译的段落文本，请使用
标签，并将 translate 参数设置为 no 值，如下所示:
<p translate="no">This Paragraph Will
NOT Be Translated or Localized</p>
接下来，让我们看看所有版本的 HTML 都支持的全局参数，包括 HTML5 和 HTML 5.1。
HTML5 之前的全局参数:旧属性
表 6-1 中剩余的八个参数在 HTML 中已经存在了相当长的时间，可能对您来说更加熟悉。style 和 lang 参数已经介绍过了，所以让我们回顾一下剩下的部分，这样您就可以了解控制 HTML5 应用、网站和文档中的内容设计和显示的标签。
ACCESSKEY 参数:添加键盘快捷键
accesskey="key value "参数(或属性)允许您为元素指定键盘快捷键。这对超文本锚 7 章中有介绍)，它允许你的用户简单地按下键盘上的一个字母键来自动访问一个网站。
要为锚点标签链接创建键盘快捷键，请在
<a href="http://www.Apress.com" accesskey="p">Publisher Website</a> <br>
<a href="http://www.WallaceJackson.com" accesskey="a">Author Website</a>
接下来，让我们看看如何使用 class 参数将 HTML5 标记附加到级联样式表(CSS)定义。
CLASS 参数:标记元素以用于 CSS
class="name "参数(或属性)允许您为标签指定类名。它对任何可以使用 CSS3 设置样式或使用 JavaScript 控制的标签都很有用，包括本书中涉及的大多数标签。
要为段落标签创建类名，请在
标签中使用 class 参数。要在 style 标记内部访问它，请使用 p.coloredtext 点标记法。下面是一个使用 HTML5 标记和你所学的高级标签的基本例子:
<html><head><style>
p.coloredtext { color: red; } <!-- CSS to set the p color to red -->
</style></head>
<body>
<p class="coloredtext">This text will be displayed in a Red color.</p>
</body></html>
接下来，让我们看看如何使用 dir 参数定义文本方向(从左到右，或 LTR，从右到左，或 RTL)。
DIR 参数:定义文本的方向
dir="direction "参数(或属性)允许您指定基于文本的元素的阅读方向。此参数使用 rtl 和 ltr 选项，以及浏览器的默认选项 auto。如果您使用 auto，浏览器会尝试根据内容(它所使用的字符集)来确定正确的方向。
要创建支持此翻译功能的段落文本，请使用不带 translate 参数的
标记，或者将参数设置为 yes 值，如下所示:
<p dir="rtl">This Paragraph Will Be Written from the Right To the Left!</p>
在 HTML5 中，这个参数可以用于任何标签，尽管它只对某些标签有用。在 HTML 的旧版本中，该参数不能与、、、、、< base >、< br >或< hr >一起使用。</根>
接下来，我们来看看 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 的新媒体内容制作基础系列丛书。
在这一章中，我将讨论实现新媒体元素的关键标签，比如使用标签的数字图像，使用标签的数字视频，使用标签的数字插图，以及使用
标签的数字音频。我们还涵盖了利用 API 或新媒体功能组合的新媒体的高级领域。这使得开发人员几乎可以在 HTML5 中实现更高级的 OOP 编程语言(如 C++或 Java)所能实现的任何事情。事实上，Java 或 JavaFX 在 HTML5 内部工作，所以 HTML5 在多媒体方面的前景是光明的！
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>
这提供了对您的元素定义的 id 引用，该元素定义包含定义客户端图像映射中的区域的元素定义。
若要使用服务器端图像映射指定数字图像资源，请使用 ismap 参数，如以下 HTML5 标记所示:
<img src="imagename.jpg" alt="Image Description: SEO Keywords" ismap />
接下来，让我们看看数字音频素材和 HTML5
标签。
数字音频:使用
标签
HTML5 中下一个最广泛使用的新媒体元素是数字音频，它使用了
标签。这是 HTML5 的新功能，在以前的 HTML 版本中没有。参数包括 src(引用数字音频资源文件名称)和 controls(添加音频传输用户界面功能)。表 8-3 显示了 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. | | |这个
标签有七个参数。这些可以在第一部分(常用参数)和第二部分(三个不常用参数)的表 8-3 中看到。该表的第三部分包含支持的参数，但除非绝对需要，否则不建议使用这些参数。其原因是自动播放困扰了许多用户，并且如果用户选择不点击传送播放按钮，自动缓冲会占用甚至可能不会被使用的系统资源。
如果你想掌握数字音频编辑术语、原理、工作流程、数据足迹优化、合成和基础，你可以查看我的数字音频编辑基础(Apress，2015)。
要创建数字音频资源，请使用带有 controls 参数的
标签、子标签和 noaudio 消息(如 noscript)，使用以下 HTML5 标记结构:
<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 操作系统)不支持第一个音频编解码器选择，使用多个标签可以为您正在使用的 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 中下一个最广泛使用的新媒体元素是数字视频，它使用了标签。这是 HTML5 的新功能，在以前的 HTML 版本中没有。参数包括 src(引用数字音频资源文件名称)和控制(添加视频传输用户界面功能)以及宽度和高度，以防您想要“缩减采样”或缩小数字视频资源(使用因子 2 或 4)。表 8-4 显示了 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 |标签有十个参数。这些见第一部分(常用参数)和第二部分(四个不常用参数)中的表 8-4 。
如果你想掌握数字视频编辑术语、原则、工作流程、数据足迹优化、合成和基础知识，请查阅数字视频编辑基础知识(Apress，2015)。
要创建数字视频资源，请使用带有 controls 参数、width 和 height 参数的标签、三个子标签和一条 novideo 消息(类似于 noscript ),如以下 HTML5 标记结构所示:
<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 浏览器(或操作系统)不支持第一个视频编解码器选择，使用多个标签可以为您正在使用的 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 中下一个最广泛使用的新媒体元素是数字插图，它使用了标签。它在 HTML5 中也是新的，这意味着它不包含在以前版本的 HTML 中。CSS 是应用 svg 强大功能的最流行的方式，尤其是将大量特殊效果应用于 HTML5 应用的矢量元素组件，包括文本、按钮或矢量插图。许多新的媒体软件包可以生成 SVG XML 数据，包括 Inkscape、GIMP、CorelDRAW、OpenOffice Draw 和 Adobe Illustrator 等等。
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 Tag
| SVG 儿童塔 | SVG 子标签的用途 | | --- | --- | | 圆 | 画一个 2D 圆元素 | | 矩形 | 画一个 2D 圆元素 | | 椭圆 | 画一个 2D 圆元素 | | 多边形 | 绘制多边形(n 边形元素) | | 多叉线 | 画一条折线 | | 线条 | 划一界线 | | 图像 | 加载时用作海报的数字图像 | | 文本 | 循环视频 | | 字体 | 页面加载事件时自动播放视频 | | 小路 | 循环视频 | | 过滤器 | 页面加载事件时自动播放视频 | | 有生命的 | 页面加载事件时自动缓冲视频 |标签有许多子标签和参数，所有这些都在 HTML5 中得到支持，并且通常使用 CSS 来访问，以实现数字插图功能。
表 8-5 中列出了一些更常用的 SVG 元素。第一部分包含基本形状，第二部分包含其他有用的矢量设计元素。
如果您想要掌握数字插图(SVG)术语以及核心 SVG XML 原则、SVG XML 标记工作流和 SVG 基础知识，请查看我的数字插图基础知识(Apress，2015)标题。在本书中，我向读者展示了如何使用 GIMP 和 Inkscape 创建(和优化)SVG 素材，因此本书将数字成像和数字插图软件与 HTML5 联系起来。这本书还有一些章节涉及 Android、Java 和 JavaFX 代码、HTML5 标记、XML、CSS 和跨平台(跨设备)发布。
要创建数字插图资源，请使用带有宽度和高度参数的标签以及定义 SVG 圆形的子标签，如以下 HTML5 标记所示:
<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:使用
标签和 WebGL
我们将用整整一章的时间讨论使用
标签的 HTML5 高级绘图，这就是如何实现交互式 3D 或 i3D。这个高级的新媒体领域需要一个叫做 WebGL 的特殊 API，它使用 OpenGL。WebGL2 将于 2016 年推出。它给 HTML5 带来了 OpenGL 的视觉冲击。我们将在第十七章中回顾所有这些。(我只是想在这一章中把它和其他新媒体类型联系起来。)
数字绘画:使用 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 文档中将内容组织成不同的层次。
