HTML5-快速标记参考-全-

news/2024/12/23 17:08:29/文章来源:https://www.cnblogs.com/apachecn/p/18443211

HTML5 快速标记参考(全)

原文:HTML5 Quick Markup Reference

协议:CC BY-NC-SA 4.0

一、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//ENhttp://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 DocumentHeader 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 文档,定义它能做什么以及如何在互联网上找到它。这些子标签包括、<style>、<脚本>、<元>、<链接>、<基础>和< noscript >标签。< title >标签将一个名字放在浏览器、标签和页面的顶部。<脚本>标签定义了 JavaScript 配置。< style >标签定义了样式表(CSS3)的配置。链接>标签链接到外部文件资源。< meta >标签允许你添加元数据。标签定义了 HTML5 文档中所有链接目标的默认 URL。<头>结构看起来是这样的:</根></style>

<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 的父标签中的文档标签,包括、<meta/>和<base/>标签,并学习如何使用它们来优化 HTML5 文档的搜索引擎配置。

三、HTML5 搜索引擎优化:标题和元

让我们在第三章继续看对搜索引擎优化最重要的标签,也称为 SEO。SEO 是优化你的网站在搜索引擎中排名的实践。SEO 标签位于文档定义和配置级别。这些标签包含在文件头中,在第二章中有简要介绍。以 SEO 为中心的标签包括您的<标题>标签,它定义并包含您的文档标题和关键字,以及< meta >标签,它定义 HTML5 文档如何在各种搜索引擎中列出。除了包含实际文本内容和搜索引擎用来索引和排列 HTML5 文档的关键字的段落和标题标签之外,这两个标签和< base >标签是 HTML5 标记模式中用于 SEO 的最重要的标签。我们将在本书的后面介绍这些标签,以及<主体>标签。

在这一章中,我还将介绍 HTML5 文档级 SEO 标签的标记(编码)格式和语法,以及它们的各种参数。我们看看如何使用标签定义你的文档标题,以及你可以建议搜索引擎使用的不同类型的元数据,比如更常用的<meta/>标签或一组<meta/>标签。我们还将看看< base >标签,因为它也与 SEO 相关。

HTML5 HEAD 标签对 SEO 很重要

本章包括三个高级标签,用于定义你希望搜索引擎如何索引你的 HTML 文档标题、描述和内容。我们将从定义文档标题的标签开始,然后向下进入标签内部的标签,包括<meta/>和<base/>标签。

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 DocumentBody 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)的标签,包括、<meta/>和<base/>标签。再次注意,您的标签名称可以是小写或大写字母,因此在 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

接下来,我们来看看 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

| IMG 标签参数 | IMG 标签参数用途 | | --- | --- | | 科学研究委员会 | 数字图像资源源文件名参考 | | 中高音 | 用于搜索引擎优化的图像的替代文本描述 | | 交叉起源 | 对第三方站点的跨来源访问控制 | | 高度 | 显示图像的高度(像素) | | 宽度 | 显示图像的宽度(以像素为单位) | | longdesc(长描述) | 图像详细描述的 URL | | 使用地图 | 将图像指定为客户端图像映射 | | 伊斯玛普 | 将图像指定为服务器端图像映射 | | 排列 | 指定图像与其他元素的对齐方式 | | 边界 | 指定图像周围的边框宽度 | | hspace | 指定图像左侧/右侧的空白宽度 | | 存放空间 | 指定图像顶部/底部的空白宽度 |

标签有十几个参数,其中八个在 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 中下一个最广泛使用的新媒体元素是数字音频,它使用了

表 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 操作系统)不支持第一个音频编解码器选择,使用多个标签可以为您正在使用的 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 浏览器(或操作系统)不支持第一个视频编解码器选择,使用多个标签可以为您正在使用的 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 设计中实现内容层次结构的标签,例如不同级别的文档内容,称为标题,使用六个不同级别的“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 给出了一个语义文档结构的例子,其中显示了一些最重要的语义标签。

A333039_1_En_10_Fig1_HTML.jpg

图 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>

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

标签。此标签在文档设计的底部或“底部”提供信息。通常是脚注或其他参考信息来进一步定义或标识主要文档内容。

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

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

标签。
元素通常包含版权、作者联系信息或对其他用作资源的文档的引用。

让我们使用一个

标签来定义汽车内容设计示例的页脚。页脚引用标识文档内容来源的信息,如下面的 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><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 这一重要章节中的标签来实现的。

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

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

标签。此
标签不能用作

让我们使用这个

标签来定义汽车内容设计示例的顶层。主标签在文档的顶部有一个开始标签(在标签之前),在文档的底部有一个结束标签(在
标签之后),这样你的整个文档就包含(定义)在这个
标签语义结构中了。下面的 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>

接下来,让我们看看

让我们将

<!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 ispossible 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 中不支持宽度参数。

让我们用一个

 tagto 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 ispossible 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  8888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888
88888888888888888888888888888888888888888888888888  888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888
8888888888  8888888  8888888888888888888888888888888888888</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 ispossible 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  8888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888
8888888888888888888888888888888888888888888888888  888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888
8888888888  8888888  8888888888888888888888888888888888888</pre></article><article><h3>Abbreviated Text: Using the ABBR Tag to Describe this Pine Tree</h3><p>Christmas Tree is also <abbr title="Christmas">XMAS</abbr> Tree!</p></article></main></body></html>

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

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

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

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

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

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

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

Note

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body><main><header><h1>Breaking Text Apart: Using Text-Related Tags in HTML5</h1><p>This is an example of using the line break tag to break apart<br>a paragraph containing text sentences<br>without using multiple paragraph tags.<br><br>It is possible to put line spacing between your sentences<br>and still use only one single paragraph.</p></header></main>
</body>
</html>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

接下来让我们谈谈块引号

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

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

element.

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

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

<!DOCTYPE html><html>
<head><title>Publishing Text Content in HTML5 Documents</title></head>
<body><main><article><h1>Publishing Quoted Text: Using Text-Related Tags in HTML5</h1><p>Here is an example of a block quote representation in a paragraph:<blockquote cite="http://www.apress.com/9781484218624">This compact quick scripting syntax reference on JSON coverssyntax and parameters central to JSON object definitions, usingthe 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 WallaceJackson'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>WallaceJackson'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>WallaceJackson'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 WallaceJackson'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>WallaceJackson'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>WallaceJackson'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 GameDevelopment programming title:<code>legalButton.setOnAction(new EventHandler<ActionEvent>() {@Overridepublic 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>WallaceJackson'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 theupcoming 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>() {@Overridepublic 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 listlabel, description termlabel and description datalabel.## 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 as1.  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 表单最起码必须包含这个

元素,以及一个或多个表 15-1 中的元素。

HTML5 中引入了两个

元素参数,autocomplete 和 novalidate,目前仍支持六个 HTML 参数。一种不再支持,如表 15-2 所示。

表 15-2。

九个<表单>参数用于表单配置

| Html 5 form label parameters | Usage of HTML5 form label parameters | | --- | --- | | Accept (html 5 is not supported) | Specify a comma-separated list of file types accepted by the server, which is submitted through the file upload process. | | Automatic (new feature in HTML5) | Specifies to turn on or off the auto-completion function of the form. | | Novalidate (new feature in HTML 5) | The specified form should not be validated. | | 接受字符集 | Specifies the character encoding used for form submission. | | action | Specify where the form data is submitted. | | enctype | Specify how the form data should be encoded. | | way | | | name | Allows you to specify a form name. | | target | Specify the location where the response is received after the form is submitted (_blank, _parent, _self, _top) |

正如你在本章中看到的,所有其他的表单标签都是

的子标签。以下 HTML 创建一个空表单:
<!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>

这个

标签定义了表单数据提交的 myForm.asp,定义了服务器从客户端表单读取数据的 HTTP "get "方法,将自动完成特性设置为" on ",并将 novalidate 特性设置为" true ",方法是在开始的<表单>标签中包含 novalidate 参数本身。

接下来,让我们看看如何使用 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 "参数告诉浏览器允许预测或猜测用户当前正在键入的数据值。当用户开始在字段中键入内容时,浏览器应该根据先前键入的值或预定义的输入来显示填充字段的选项。当我们在本章稍后讨论用于定义数据元素列表的标签时,您会看到这个预定义输入是如何定义的。它与 autocomplete 参数(和函数)一起使用,通过在表单上提供“人工智能”的外观来大大增强用户对表单设计的体验,这为用户提供了关于表单中的字段在寻找什么的反馈。

表 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>

现在让我们通过使用

标记中的 name 属性和标记中的 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>

注意,因为我在我的

标签中有一个 method="get ",所以我不必在每个标签中使用 formmethod="get"。出于设计目的,我还可以用像素来定义这些数据字段的宽度和高度:
<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

Parameters Used Prior to HTML5

| HTML 字段集标记参数 | HTML 字段集标记参数的用法 | | --- | --- | | 有缺陷的 | 指定应禁用文本区域 | | 形式 | 指定文本区域所属的表单 | | 名字 | 指定文本区域(元素)的名称 |

表 15-5。

Twelve HTML5 Parameters for Text Area Configuration

| TextArea 标记参数 | TextArea 标记参数的用法 | | --- | --- | | 关口 | 指定文本区域列(字符) | | 行 | 指定文本区域行(线) | | 名字 | 指定文本区域(元素)的名称 | | 有缺陷的 | 指定应禁用文本区域 | | 只读的 | 指定文本区域是只读的 | | 自(动)调焦装置 | 指定页面加载时文本区域自动聚焦 | | 目录名 | 指定请尊重文本区域方向 | | 形式 | 指定文本区域所属的表单 | | 最大长度 | 指定文本区域最大字符数 | | 占位符 | 所需文本的指定描述 | | 需要 | 指定需要文本区域补全 | | 包 | 指定文本区域需要如何换行(选项为硬或软) |

TEXTAREA 标签:定义一个文本输入块或段落

标签允许你定义多行文本输入控件。这些文本区域控件可以容纳无限数量的字符,尽管不建议这样做,并且文本使用固定宽度的字体(如 monospace 或 Courier)呈现。文本区域的大小应该使用 cols 和 rows 参数来指定,正如我在下面的示例标记中所做的那样,我要求用户提供他们最喜欢的汽车品牌和型号的书面描述。我还在示例中使用了几乎所有可能的< textarea >标签参数,包括 autofocus、required、name、form、placeholder 和 maxlength。

<!DOCTYPE html><html>
<head><title>Exotic Car Preference Written Description Form</title>
</head>
<body><section id="exotic car preference paragraph form"><form name="cardescription" action="myForm.asp" method="get" novalidate><textarea rows="5" cols="250" maxlength="1250" requiredname="myfavoritecar" form="cardescription" autofocusplaceholder="Write a short paragraph on your favorite car">    Please write a short paragraph on your favorite car and brand in here!    </textarea></form><p>Please write a short paragraph on your favorite car and brand above</p></section>
</body></html>

这个

接下来,让我们看看如何使用

元素将字段和数据输入控件进行逻辑分组。

FIELDSET 标签:分组数据字段和输入控件

标签用于将相关的表单数据域和控制元素组合在一个复杂的表单中。

标签在相关元素周围画一个方框,以便在视觉上对它们进行分组。

让我们使用单选按钮控件示例,通过使用这个

元素,将汽车品牌选择和汽车型号选择单选按钮放入它们自己的逻辑部分。

这应该类似于下面的 HTML5 标记:

<!DOCTYPE html><html>
<head><title>Exotic Car Preference Form: 6 Radio Buttons in 2 Field Sets</title>
</head><body><section id="exotic car preference form"><form name="carform" action="myForm.asp" method="get" novalidate><fieldset name="carbrands" form="carform"><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></fieldset><fieldset name="carmodels" form="carform"><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></fieldset><input type="submit" value="Please Submit My Choices" form="carform" /></form>      <p>Please select favorite exotic car manufacturer and model name above</p></section>
</body></html>

请注意,我已经使用 form 和 name 参数将所有内容连接在一起,并命名了逻辑字段集。表 15-6 中列出了三个 HTML5

参数。

接下来,让我们看看复杂表单的元素。

图例标记:向字段集分组添加图例

标签定义了元素的标题。它有一个 HTML5 中不再支持的 align 参数(见表 15-4 ),因为你现在需要使用 CSS 来实现这个对齐功能(尽管这个参数在一些试图提供向后兼容性的浏览器中可能仍然有效)。对齐参数值包括顶部、底部、左侧和右侧。

<form name="carform" action="myForm.asp" method="get" novalidate><fieldset name="carbrands" form="carform"><legend>Choose Your Favorite Exotic Sports Car Brand:</legend><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></fieldset><fieldset name="carmodels" form="carform"><legend>Choose Your Favorite Exotic Sports Car Model:</legend><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></fieldset><input type="submit" value="Please Submit My Choices" form="carform" />
</form>

接下来,让我们看看复杂表单的选项选择标记。

HTML 表单选项选择:选择和选项

HTML5 表单有一些相当复杂的选项,用于选择选项和选项分组,很像应用软件包中的菜单,这使得表单设计成为 HTML5 发布中最先进的领域之一,还有新媒体和交互性,正如您在本书后面看到的。表 15-1 的第三部分显示了用于在 HTML5 表单设计中创建这些选择集(称为下拉列表)的标签。

选择和选项标签:定义下拉列表

元素创建下拉列表。在

一个

让我们创建一个制造商和型号选择示例,它在语义标签内的

标签和
标签内使用

使用<表单>标签中的 name 参数,以及每个<选择>标签中的 form 参数,将

您使用中设置自动对焦参数,以便它被预先选择使用,最后使用一个名称参数给每个

下面是一个使用 HTML5 标记的例子:

<!DOCTYPE html><html>
<head><title>Exotic Car Selection Form: 8 List Selections in 2 Field Sets</title>
</head>
<body><section id="exotic car preference form"><form name="carform" action="myForm.asp" method="get" novalidate><fieldset name="carbrands" form="carform"><select form="carform" required name="brandlist" autofocus size="4"><option value="ferrari" label="Ferrari">Enzo Ferrari</option><option value="maserati" label="Maserati">Alfieri Maserati</option><option value="bugatti" label="Bugatti">Ettore Isidoro Bugatti</option><option value="lmbo" label="Lamborghini">Ferruccio Lamborghini</option></select></fieldset><fieldset name="carmodels" form="carform"><select form="carform" required name="modellist" size="4"><option value="laferrari">LaFerrari</option><option value="grancabrio">GranCabrio</option><option value="chiron">Chiron</option><option value="gallardo">Gallardo</option></select></fieldset><input type="submit" value="Please Submit My Selection" form="carform"/></form>       <p>Please select favorite exotic car manufacturer and model name above</p></section>
</body></html>

还要注意,我使用了一个 label 属性来指定一个较短版本的选项文本值。这个较短的版本显示在下拉列表中。还要注意,这还没有在所有 HTML5 平台上的所有浏览器中完全实现,但它被完全支持只是时间问题,因为它的实现是非常符合逻辑的。

接下来,让我们看看选项组或标签。

OPTGROUP 标签:分组下拉列表选项

< optgroup>标签将下拉列表中的相关选项分组。如果你有一个很长的选项列表,那么对你的最终用户来说,一组相关的选项更容易理解。让我们将汽车制造商列表选项分组到更贵和更便宜的列表分组中,看看这个标签是如何使用的。HTML5 标记如下所示:

<select form="carform" required name="brandlist" autofocus size="4"><optgroup label="More Affordable Exotic Cars"><option value="ferrari" label="Ferrari">Enzo Ferrari</option><option value="maserati" label="Maserati">Alfieri Maserati</option></optgroup><optgroup label="Less Affordable Exotic Cars"><option value="bugatti" label="Bugatti">Ettore Isidoro Bugatti</option><option value="lambo" label="Lamborghini">Ferruccio Lamborghini</option></optgroup></select>

接下来,我们来看看

按钮标签:创建用户界面按钮

标签定义了可点击的按钮,用于提交或重置表单,或者用于自定义目的。您可以在

确保总是指定一个类型参数,使用带有

表 15-8 中列出了八个 HTML5

让我们用<按钮类型= "提交">和<按钮类型= "重置">标记替换示例中的:

<!DOCTYPE html><html>
<head><title>Exotic Car Selection Form: 8 List Selections in 2 Field Sets</title>
</head><body><section id="exotic car preference form"><form name="carform" action="myForm.asp" method="get" novalidate><fieldset name="carbrands" form="carform"><select form="carform" required name="brandlist" autofocus size="4"><option value="ferrari" label="Ferrari">Enzo Ferrari</option><option value="maserati" label="Maserati">Alfieri Maserati</option><option value="bugatti" label="Bugatti">Ettore Isidoro Bugatti</option><option value="lmbo" label="Lamborghini">Ferruccio Lamborghini</option></select></fieldset><fieldset name="carmodels" form="carform"><select form="carform" required name="modellist" size="4"><option value="laferrari">LaFerrari</option><option value="grancabrio">GranCabrio</option><option value="chiron">Chiron</option><option value="gallardo">Gallardo</option></select></fieldset><button type="submit" value="Submit Choices" form="carform" name="B1" /><button type="reset" value="Reset Choices" form="carform" name="B2" /></form><p>Please select favorite exotic car manufacturer and model name above</p></section></body></html>

请注意,我使用两个预定义的类型值来创建两个功能按钮,以及按钮标签值、按钮名称和使用 form 参数的表单名称的推荐连接。接下来,让我们看看新的 HTML5 表单标签。

新的 HTML5 表单标签:DataList,KeyGen,Output

HTML5 中有三个用于表单设计的新标签。它们允许您定义自动完成的数据列表,为数据安全生成密钥,并输出数据的计算结果。

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

标签通过表 15-3 中所示的列表参数指定一个元素使用的预定义选项列表。<数据表>标签用于在<输入>元素上提供自动完成功能。当提供<数据列表>时,一旦用户开始输入数据,就会看到预定义选项的下拉列表出现。要将<输入>元素列表参数与<数据列表>元素绑定在一起,请在<数据列表>标签中使用 id 参数,如以下 HTML5 标记所示:

<input list="italiancars"><datalist id="italiancars"><option value="Ferrari"><option value="Maserati"><option value="Bugatti"><option value="Lamborghini"></datalist>

接下来,让我们看看一个密钥生成器标签。

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

标签允许您指定一个安全密钥对生成器字段,用于保护表单数据。提交表单时,私钥存储在本地,公钥发送到服务器。

下面是一个示例表单和用户名输入,它使用这个标记和一个

<form action="private_keygen.asp" method="get" name="keyform">Username: <input type="text" name="user_name">Encryption: <keygen name="security_key"><button type="submit" value="Submit Secure Key" form="keyform" name="K1"/>
</form>

表 15-9 显示了< keygen >标签支持的六个 HTML5 参数。

表 15-9。

Six Parameters for Secure Key Generation

| HTML5 KeyGen 标记参数 | HTML5 KeyGen 标记参数的用法 | | --- | --- | | 自(动)调焦装置 | 页面加载时指定的 keygen 自动对焦 | | 形式 | 密钥生成所属的指定形式 | | 有缺陷的 | 指定的 keygen 元素将被禁用 | | 密钥类型 | 为密钥指定了安全算法 | | 名字 | 定义 KeyGen 元素名称 | | 挑战 | 指定提交时挑战元素的值 |

接下来,我们来看看输出

标签。

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

标签表示计算的结果,例如使用数据字段执行的计算,如示例中所做的,或者来自更复杂的 JavaScript 计算。表 15-10 显示了新的<输出>标签(元素)在 HTML5 中支持的三个参数。

表 15-10。

Three Parameters for Output Generation

| HTML5 输出标记参数 | HTML5 输出标记参数的用法 | | --- | --- | | 为 | 指定计算结果与该计算中使用的元素之间的关系 | | 形式 | 指定输出所属的表单 | | 名字 | 定义输出元素名称 |

让我们创建一个将两个数字相加的

构造,使用字段收集数据,
标签中的 oninput 事件进行简单的`output=inputA+inputB`计算,使用

标签保存输出。使用 o.value (form oninput)和 name="o "(输出标记参数)将和

构造连接在一起。

对此的 HTML5 标记如下所示:

<form name="add2numbers" onsubmit="return false"oninput="o.value = parseInt(a.value) + parseInt(b.value)"><input name="a" type="number" step="any"> +<input name="b" type="number" step="any"> =<output name="o"></output>
</form>

接下来,我们将开始用 HTML5 定义区域。

摘要

本章讨论了 HTML5 和以前版本中的表单标签支持,包括

十六、HTML5 位置:文档布局和文本跨度

让我们来谈谈 HTML5 中允许开发人员对元素进行分组并控制内容位置的标签。我们还将讨论一些标签,这些标签允许对分组的元素进行样式化,就像它们是一个单一的功能单元一样。这些标签包括分部

标签和跨度标签。这些标签本身什么也不做;它们必须被定型。

本章着眼于 HTML5 中实现高级内容设计技术的强大标签。我们从标签开始,因为它只影响文本元素,然后我们进展到更复杂和更强大的标签。和标记没有 HTML5 参数,因为它们使用 CSS3 设置样式。本章没有表格,只有 HTML5 标记示例。

定义文本跨度:使用 SPAN 标签

标签用来将 HTML5 文档中的行内元素分组。标签本身并不提供视觉效果,它必须使用 CSS3 进行样式化或者使用 JavaScript 进行操作。因此,标签为开发人员提供了一种添加外部访问的方式,以便能够挂钩到使用起始标签和结束标签封装的文本内容、图像或文档部分。

下面的 HTML5 标记示例使用标记和全局 HTML5 样式参数来为句子的一部分着色:

<p>Ferrari's come in a <span style="color:red">Ferrari Red</span> color</p>

标签和标记之间的主要区别在于标签是内嵌使用的(在其他标签的内部),而

标签创建块构造或深度嵌套的 HTML5 标记构造(看起来像 HTML5 标记的块,因此得名“块级构造”)。

HTML5 中的标记没有本地或本机参数;但是,有一些全局 HTML5 参数通常与标签一起使用。其中包括一个 id 或一个 class 参数,用于访问,使用外部 CSS3 定义,以及 title 标签,允许鼠标悬停弹出窗口附加到跨越的文本元素。以下是使用上一个示例中的 HTML5 标记的这些参数的示例:

<p>The Ferrari La Ferrari Model will usually come painted in the<span id="myspan" title="This text will pop-up when you mouse-over span">Ferrari Red color</span>, unless you order it in some custom (other than red) color.</p>span#myspan { color:red; } /* Externalized CSS3 linked via a .CSS file */

span 也可以和 imagery 一起使用!这在使用事件处理程序参数时尤其有用。用一个配置为使用 onMouseDown、onMouseOut 和 onDblClick 的标签包围标签,以允许您的用户单击一个图像并将法拉利图像变为蓝色,双击一个图像将法拉利图像变为黄色,然后将鼠标从图像上移开,以恢复默认的红色法拉利图像。这是在以下 HTML5 标记中完成的:

<p>Click image to see a Blue Ferrari, Double-Click for a Yellow Ferrari:</p><span onMouseDown="document.ferrarigif.src='blueferrari.gif'"onMouseOut="document.ferrarigif.src='redferrari.gif'"onDblClick="document.ferrarigif.src='yellowferrari.gif'"><img src="redferrari.gif" height="240" width="480" name="ferrarigif"></span>

将与语言相关的参数 dir(文本方向)和 lang(语言定义)与标签一起使用也是有用的,因为主要用于影响文本元素,这些元素受语言和文本方向的影响。

您可以通过以下 HTML5 标记使用 dir 参数来更改中的文本方向:

<p>Ferrari comes in a standard <span dir="ltr">Ferrari Red</span> color</p>

您还可以通过使用配置来定义文本范围中使用的语言。假设法拉利在意大利非常性感,如以下 HTML5 标记所示:

<p>Ferrari's are considered <span lang="it">Molto Sexy</span> in Italy</p>

接下来,让我们看一下标签,以及如何使用这个标签来构建复杂的 HTML5 文档设计,将 HTML5 结构封装在已经分配了 id 或 class 参数的标签中。首先,让我们看看在 CSS3 应用中使用 id 参数和 class 参数的区别,标记广泛地利用了这两个参数。

id、名称和类别的使用

随着 HTML5 在用于识别设计元素(标签)的三个不同参数方面的发展,通常会有一些混乱。这些是 id、名称和类。我试图在本章的这一节中阐明这些标签中的每一个最适合做什么,因为

和在很大程度上依赖于这些标签来识别它们以进行外部处理,因为这两个标签本身不做任何事情。

标识符:为 JavaScript 和片段使用一个 id

id 参数是标识符的缩写;更准确地说,它是片段标识符的简称。它允许您使用一个 URL 加上一个散列符号(或井号)" # "片段名称转到文档的特定部分。这是通过 URL 和 id="fragment-id-value "参数中使用的值之间的#字符来完成的。这是一个片段 URL 的示例:

http://www.website-name-here.com/webpage-name.html#fragment-id-value

它是使用

标签:

在 HTML5 标记中创建的

<p id=fragment-id-value>This is a paragraph of text you want to jump to</p>

在您当前所在的同一文档中,仅使用片段 id 值引用它,在

<a href="#fragment-id-value">Click here to go to this fragment/section</a>

值得注意的是,对于任何 XHTML、HTML 或 HTML5 文档,一个 id 名称只能使用一次。重复的 id 标记会导致页面验证失败,并且在 JavaScript 中使用 id 时会产生负面影响。除了定义文档片段导航之外,id 参数对于定义使用 JavaScript 处理的文档元素也很重要。对 CSS 等非标准应用使用 id 可能会对此产生潜在的干扰,因此对 CSS3 选择器定义使用 class 参数。

CSS3 可以通过使用井号(#)来选择 Id 以对它们应用单独的样式,但是 JavaScript 也依赖于 id,因为它使用了。js 外部化的 JavaScript。

出于这个原因,我建议将这三个不同的赋值参数的用法分离为它们最常用的用法:用于 JavaScript 和片段导航的 id;CSS3 选择器指定的类;以及表单、服务器和数据库使用的名称(远程数据服务器访问)。这样,您就不会搞不清使用参数的目的了!

类:使用类对 CSS3 选择器进行分类

就像用于 CSS3 一样,class 也可以用于 JavaScript 编程。class 参数与 id 参数非常不同,因为 class 可以在同一个 HTML 文档中多次使用。内容(元素、标签、标记)和表现(CSS 样式)的分离使得 CSS 支持的 HTML5 如此强大。开发人员不了解他们可以使用类的全部范围,因为许多人已经习惯于使用(简单得多的)id。

值得注意的是,使用相同的 class 参数,不仅类可以被多次使用,而且在 HTML5 元素(tag)中可以使用多个类名称!下面是一个使用 HTML 标记和 CSS 定义的例子:

<p>Ferrari automobile's are considered to be:<span lang="it" class="left2right asexycolor">Molto Sexy</span>in most parts of Italy!
</p>
--------------------------CSS3 Selector Definition Below-----------------
.left2right { direction: ltr; }
.asexycolor { color:     red; }

第一段代码是有效的 HTML 它显示了在单个类参数中使用两个单独的类,使用空格来分隔两个类名。如果使用有效,这种技术可以大大减少 CSS3 样式表的数据量。值得注意的是,您可以在同一个 HTML5 元素上同时使用 id 和类,以最佳方式引用 JavaScript (id)和 CSS3 样式表(class)。

名称:命名表单、控件和 UI 元素

name 属性最常用于在表单提交中发送数据,以及将不同的表单组件与表单连接在一起,正如您在第十五章中广泛观察到的。由于参数约定略有不同,不同的控件对这些相似的(名称和 id)参数的响应也有所不同。

您可以拥有多个具有不同 id 属性的单选按钮,但需要使用相同的 name 参数值来正确定义它们的分组,以便用户只能选择一个选项。

最终,只要正确实现了类和 id,使用 name、id 还是 class 完全取决于您,并且在测试时,HTML5 在所有不同的浏览器上都能同样工作!关于如何以及何时利用这些参数,这实际上只是个人选择的问题。

定义文档区域:使用 DIV 标签

division

标签的用法很像 span 标签,除了它定义的区域是一个正方形区域,称为块,而不是一个线(或内嵌)区域,通常用文本来定义。我经常使用标签将图像和动画“缝合”在一起,以创造无缝的用户体验。与语义标签不同,(和)标签对搜索引擎来说是不可见的,并且只与它们周围的内容的定位和样式有关,并不影响内容本身。您应该将这些设计(定位、样式和对齐)标签与语义标签结合使用,以获得视觉上令人惊叹且语义上准确的 HTML5 结果。

显示特性:块、内嵌和无

正如我前面提到的,in 是一个内嵌标签,

是一个块标签。这些恰好描述了 CSS3 的 display 属性,该属性也可以设置为 none,从而对 HTML5 呈现引擎完全隐藏该标签(元素)。这与 hidden 属性不同,hidden 属性呈现元素在设计中占据的空间,但使其不可见(透明)。none display 属性实际上将该元素从设计中完全删除,因此为了确保语义标签不会影响视觉设计,可以将它们的 display 属性设置为 none!

还有与列表和表格相关的自定义显示类型,以及一些混合类型,如 flex 和 run-in,它们在块和内嵌之间架起了桥梁,实现了高级样式。

除了 division 之外,使用该块显示属性的元素示例包括段落

标签、页眉

标签、页脚
标签、节
标签、标题 1-6

标签以及表单
标签。

使用内嵌显示属性的元素示例(除此之外)包括锚点

默认为 none display 属性的一些元素的例子包括脚本

Division 或 DIV 标签:核心属性

标签定义了 HTML5 文档的一部分。这是通过使用标签在块级别对元素进行分组,然后使用 CSS3 样式定义在容器内格式化这些元素来实现的。事实上,元素最常用作 HTML5 视觉设计的通用容器,CSS3 在其中对齐、定位、z 顺序、显示/隐藏、淡入淡出、为该部分中包含的所有 HTML5 内容分配效果和样式。

让我们使用标签为前面的示例添加背景色,如下面的 HTML5 标记所示:

<div style="background-color:yellow"><p>Click image to see Blue Ferrari, Double-Click for Yellow Ferrari:</p><span onMouseDown="document.ferrarigif.src='blueferrari.gif'"onMouseOut="document.ferrarigif.src='redferrari.gif'"onDblClick="document.ferrarigif.src='yellowferrari.gif'"><img src="redferrari.gif" height="240" width="480" name="ferrarigif"></span><p>Everything in this document division will have yellow behind it!</p></div>

这将在交互式图像上方和下方的所有段落文本以及图像本身的后面突出显示黄色。正如您所看到的,您已经通过使用标记作为一个 division 容器,为所有这些包含的文档元素添加了一个全局样式。

对元素进行样式化的更常见的方法是使用 class 参数为其分配一个类名,如下所示:

<div class="example"><p>Click image to see Blue Ferrari, Double-Click for Yellow Ferrari:</p><span onMouseDown="document.ferrarigif.src='blueferrari.gif'"onMouseOut="document.ferrarigif.src='redferrari.gif'"onDblClick="document.ferrarigif.src='yellowferrari.gif'"><img src="redferrari.gif" height="240" width="480" name="ferrarigif"></span><p>Everything in this document division will have yellow behind it!</p>
</div>
------------
div.example { background-color :yellow; position: absolute;top: 108px; left: 120px; width: 500px; height: 500px;z-index: -1; opacity: 0.5; border: solid 1px #000000; }
.example    { background-color: yellow; }

上面的代码添加了背景色,定位,设置 50%的透明度,设置背景中的 z 索引,并在分割线周围绘制一个单像素的纯黑色边框。我还展示了一个例子,说明带有 class="example "的任何元素是如何以黄色作为背景色的,以显示类的强大功能。

虽然这不是一本 CSS3 的书,但我在这一章和第十八章中向你展示了一些 CSS3,因为有必要向你展示 CSS3 和 HTML5 标记之间的这座物质桥梁,并向你展示某些标签,如< div >、< style >、< link >和< span >如何与 CSS3 协同工作。

值得注意的是,标签在浏览器(或操作系统)中呈现时的默认行为是在元素之前和之后放置一个换行符。这可以由使用 CSS3 的开发人员来更改,而且经常如此。事实上,接下来要看的是我如何使用标签和 CSS3 无缝地将标签素材缝合在一起,用于我的多媒体相关 HTML5 内容生产管道。

无缝图像拼接:结合 CSS3 使用 DIVs

既然我们已经看了一些不太高级的例子,我应该给你看一个更高级的例子。让我们看看如何使用 div 来组装 iTVset.com 站点的各种图像和动画组件,以及覆盖 JavaScript 时钟元素,所有这些都是使用标签完成的。JavaScript 包含在第十七章中,CSS3 包含在第十八章中。图 16-1 显示了我们接下来要看的 HTML5 标记的结果。这是使用 CSS3 样式表进行样式化的,我们将在后面探讨。

A333039_1_En_16_Fig1_HTML.jpg

图 16-1。

使用 DIVs 和 CSS3 拼接在一起的 HTML5 设计

正如您在下面的 HTML5 标记中看到的,我使用了包含标签的标签,使用 class 属性来处理这些标签,使用 id 属性来引用 JavaScript。第十九章中介绍了<画布>标签(id=“时钟”)。

<div class="c"><img src="bk2.png" class="c2" /><img src="bk3.gif" class="c3" /><img src="bk4.png" class="c4" />
</div>
<div class="d"><img src="bk5.png" class="c5" /><img src="bk6.png" class="c6" />\
</div>
<div class="h"></div>
<div class="tx"></div>
<div class="p"><p>TEXT CONTENT FOR THE HTML5 DOCUMENT IS IN HERE</p></div>
<div class="j"></div>
<div class="s"></div>
<div class="bu"></div>
<div class="t"><img src="tl.png" class="tp1" /><!-- TOP UI LINKS ANCHOR TAG MARKUP -->
</div>
<div class="l"><img src="lt.png" class="lt1" /><!-- LEFT UI LINKS ANCHOR TAG MARKUP --><img src="lb.png" class="lt2" />
</div>
<div class="r"><img src="rt.png" class="rt1"/><!-- RIGHT UI LINKS ANCHOR TAG MARKUP --><img src="rb.png" class="rt2"/>
</div>
<div class="b"><img src="bl.png" class="bt1"/><!-- BOTTOM UI LINKS ANCHOR TAGS MARKUP --><img src="b.png" class="bt2" />
</div>
<div class="time"><canvas id="clock" width="500" height="500"></canvas>
</div>

为了创建您在图 16-1 中看到的内容,我使用 CSS3 为不包含< img >标签的< div >标签定义了背景图像属性。我使用绝对定位,并通过使用 top、left、width 或 height 属性来定义精确的像素位置。我使用 fixed 和 no-repeat 属性控制图像拼贴,使用带有这些名称的 CSS3 属性控制不透明度、背景颜色和边框。您可以查看 DIV classname 以了解 CSS3 定位和加载每个图像区域的内容。

div.time {position:absolute;top:108px;left:120px;width:500px;height:500px;}
div.p    {position:absolute;top:-216px;left:694px;width:446px;height:400px;}
div.tx   { position:absolute; top:150px; left:680px; width:460px;height:400px; background-color:#000; opacity:0.35;border:solid 1px #ccc; }
div.c    { position:absolute;top:48px;left:0px;width:1280px;height:624px; }
div.c img.c2 {position:absolute;left:0px;width:270px;height:80px;top:0px; }
div.c img.c3 {position:absolute;left:270px;width:640px;height:80px;top:0px;}
div.c img.c4 {position:absolute;left:910px;width:370px;height:80px;top:0px;}
div.d    { position:absolute;top:128px;left:0px;width:1280px;height:544px; }
div.d img.c5 {position:absolute;left:0px;width:1280px;height:480px;top:0px;}
div.d img.c6 { position:absolute; left: 0px; width: 1280px; height: 64px;top:480px; }
div.s    {position:absolute; left:0px; width:1280px; height:56px; top:608px;background: no-repeat; background-image: url(s.png); }
div.h    {position:absolute; left:0px width:1280px; height:128px; top:128px;background: fixed no-repeat; background-image: url(sy.gif); }
div.j    { position:absolute; left:176px; width:96px; height:720px; top:0px;background: fixed no-repeat; opacity: 0.6;background-image: url(jy.gif); }
div.bu   { position:absolute; left:525px; width:44px; height:720px; top:0px;background: fixed no-repeat; opacity: 0.4;background-image: url(bu.gif); }
div.t    { position:absolute; top:0px; left:0px; width:1280px; height:48px;background-image: url(bk1.png); }
div.t img.tp1 { position:absolute;left:18px;width:56px;height:45px;top:2px;}div.t img.tp2 { position: absolute; left: 1187px; width: 56px; height: 45px;top:2px; }
div.l    { position: absolute; top: 0px; left: 0px; width: 64px;height: 652px; background-image: url(bkg7.jpg); }
div.l img.lt1 { position: absolute; left: 18px;width: 45px; height: 56px;top: 64px;}
div.l img.lt2 { position: absolute; left: 18px; width: 45px;height: 56px; top: 594px; }
div.b    { position: absolute; top: 664px; left: 0px; width: 1280px;height: 48px; background-image: url(bk7.png); }
div.b img.bt1 { position: absolute; left: 18px; width: 56px;height: 45px;top: 3px; }
div.b img.bt2 { position: absolute; left: 1187px; width: 56px;height: 45px; top: 3px; }

接下来,让我们看看 JavaScript

摘要

本章讲述了在 HTML5 和早期版本中定义区域的标记,包括和标记。下一章关注 HTML5 JavaScript

十七、HTML5 脚本:使用 JavaScript

现在我们来讨论 HTML5 中的

在本章中,您将看到 HTML5 中的

使用 JavaScript:html 5 脚本标签

表 17-1。

Six HTML5

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/806735.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

南沙C++信奥赛陈老师解一本通题 1290:采药

​【题目描述】辰辰是个很有潜能、天资聪颖的孩子,他的梦想是称为世界上最伟大的医师。为此,他想拜附近最有威望的医师为师。医师为了判断他的资质,给他出了一个难题。医师把他带到个到处都是草药的山洞里对他说:“孩子,这个山洞里有一些不同的草药,采每一株都需要一些时…

36_初识搜索引擎_分页搜索以及deep paging性能问题深度图解揭秘

课程大纲 1、讲解如何使用es进行分页搜索的语法 size,from GET /_search?size=10 GET /_search?size=10&from=0 GET /_search?size=10&from=20 分页的上机实验 GET /test_index/test_type/_search "hits": { "total": 9, "max_score"…

34_初识搜索引擎_search结果深入解析(search timeout机制揭秘)

课程大纲 1、我们如果发出一个搜索请求的话,会拿到一堆搜索结果,本节课,我们来讲解一下,这个搜索结果里的各种数据,都代表了什么含义 2、我们来讲解一下,搜索的timeout机制,底层的原理,画图讲解 GET /_search { "took": 6, "timed_out": false, &q…

豆包MarsCode国庆献礼,轻松开发开发一款电子贺卡制作工具

大家好,我是晓凡。 作为一名搬了很多年砖的码农,深知求职和编程路上的各种辛酸与艰辛。 你是否也曾在面试前夜,疯狂刷题却完全记不住,收效甚微? 是否也曾在深夜凌晨一个人对着电脑屏幕,苦苦思索一个bug的解决方案? 是否看着前人留下的屎山代码而无从下手,最后也只能留下…

35_初识搜索引擎_multi-indexmulti-type搜索模式解析以及搜索原理初步图解

课程大纲 1、multi-index和multi-type搜索模式 告诉你如何一次性搜索多个index和多个type下的数据 /_search:所有索引,所有type下的所有数据都搜索出来 /index1/_search:指定一个index,搜索其下所有type的数据 /index1,index2/_search:同时搜索两个index下的数据 /1,2/_se…

32_分布式文档系统_document查询内部原理图解揭秘

1、客户端发送请求到任意一个node,成为coordinate node 2、coordinate node对document进行路由,将请求转发到对应的node,此时会使用round-robin随机轮询算法,在primary shard以及其所有replica中随机选择一个,让读请求负载均衡 3、接收请求的node返回document给coordinate…

29_分布式文档系统_深度图解剖析document数据路由原理

(1)document路由到shard上是什么意思? (2)路由算法:shard = hash(routing) % number_of_primary_shards 举个例子,一个index有3个primary shard,P0,P1,P2 每次增删改查一个document的时候,都会带过来一个routing number,默认就是这个document的_id(可能是手动指定…

30_分布式文档系统_document增删改内部原理图解揭秘

(1)客户端选择一个node发送请求过去,这个node就是coordinating node(协调节点) (2)coordinating node,对document进行路由,将请求转发给对应的node(有primary shard) (3)实际的node上的primary shard处理请求,然后将数据同步到replica node (4)coordinating no…

31_分布式文档系统_图解写一致性原理以及quorum机制深入剖析

(1)consistency,one(primary shard),all(all shard),quorum(default) 我们在发送任何一个增删改操作的时候,比如说put /index/type/id,都可以带上一个consistency参数,指明我们想要的写一致性是什么? put /index/type/id?consistency=quorum one:要求我们这个…

25_图解partial update乐观锁并发控制原理以及相关操作讲解

课程大纲 (1)partial update内置乐观锁并发控制 (2)retry_on_conflict (3)_version post /index/type/id/_update?retry_on_conflict=5&version=6

Less-1

页面1、首先要进行判断闭合方式 一般为两种 / 和 或者 " 进行闭合1.1 这是\进行判断,输入\,后面是,应该是单引号闭合进行输入: ?id=1 --+没有报错,说明是单引号闭合 2、查看字段数 进行查询一共有多少字段数 ?id=1 order by 3--+2.1 输入时候发现3有回显,…