The proper way to mix ingredients
When using a stand-mixer, it is important that you do not over mix the ingredients…
Proper baking techniques
It is important that you bake your cheesecake using a lot of moisture in the oven…
HTML5 解决方案：面向 HTML5 开发者的基本技巧（一）
原文：HTML5 Solutions Essential Techniques for HTML5 Developers
零、简介
超文本标记语言的发展停止于 1999 年，其最终版本 n.4 由万维网联盟(W3C)制定。然而，技术并没有停滞不前:W3C 还致力于一些有趣的项目，如 XML 的通用标准通用标记语言(SGML ),以及新的标记语言，如可伸缩矢量图形(SVG)、XForms 和 MathML。
另一方面，Web 浏览器供应商更喜欢专注于他们程序的新功能，而 web 开发人员开始学习 CSS 和 JavaScript 语言，在使用异步 JavaScript + XML (AJAX)的框架上构建他们的应用。
然而，事情已经发生了变化，最近，由于苹果、谷歌、Opera 软件和 Mozilla 基金会等公司的工作，HTML 已经起死回生，这些公司(以 WhatWG，Web 超文本应用技术工作组的名义)合作开发了旧 HTML 的更新和增强版本。
出于这种兴趣，W3C 开始开发新版本的 HTML，称为 HTML5，采用了 Web 应用 1.0 的官方名称，并向 HTML 中引入了前所未见的新结构元素。
HTML5 引入的新元素倾向于弥合由标记定义的结构之间的差距；由样式指令定义的渲染特征；和由文本本身定义的网页内容。此外，HTML5 引入了本地开放标准来交付多媒体内容，如音频和视频、协作 API、本地存储、地理位置 API 等等。
在这本以实践为导向的书中，我们想为接触新语言的人所面临的常见问题提供一系列解决方案。因此，您会发现许多现成的代码，您可以在 web 应用中构建这些代码。
这本书是给谁的？
不管你是设计师还是开发人员，这本书的目标读者是任何想马上开始使用 HTML5 的人。
HTML5 解决方案实际上是为那些希望通过常见问题的快速解决方案和最佳实践技术来进一步提高其 HTML5 技能的读者设计的。这本书充满了真实世界的例子和代码，以支持你进入 HTML5 开发的世界。
本书使用的约定俗成
这本书使用了几个值得注意的惯例。本书中使用了以下术语:
- HTML 既指 HTML，也指 XHTML 语言。
- 除非另有说明， CSS 涉及 CSS 2.1 规范。
- 现代浏览器被认为是 Firefox、Safari、Chrome、Opera 的最新版本，还有 IE 7 及以上版本。
假设本书中的所有 HTML 示例都嵌套在有效文档的中，而 CSS 包含在外部样式表中。为了简洁起见，HTML 和 CSS 偶尔会放在同一个代码示例中。
有时代码在书中的一行是写不下的。在发生这种情况的地方，我用一个箭头来断开这条线。
这些手续办完了，让我们开始吧。
你需要什么
为了理解和创建本书中的例子，你需要一个简单的文本编辑器。TextMate、UltraEdit 和 Notepad++只是具有代码支持的强大文本编辑器的一些例子。
我的建议是使用下面的工具之一，它将允许你提高你的编码活动的生产率:
Google Web Toolkit 孵化器项目通过 GWTCanvas 这样的类支持 HTML5 的一些特性。它是完全免费的，可以从这个u[code.google.com/p/google-web-toolkit-incubator/](http://code.google.com/p/google-web-toolkit-incubator/)下载
Dreamweaver CS 5 的 HTML5 包扩展。它增强了 Dreamweaver CS 5，增加了对 HTML5 的完全支持。您可以从 Adobe 网站下载免费试用版[www.adobe.com/support/dreamweaver/](http://www.adobe.com/support/dreamweaver/)
问题和联系人
请将任何关于本书的技术问题或评论发送至m.casario@comtaste.com。
关于其他 HTML5 和 CSS 书籍的更多信息，请访问我们的网站:[www.friendsofed.com](http://www.friendsofed.com).
一、HTML5 页面结构
2004 年，一群来自苹果、Opera 和 Mozilla 的开发人员对 HTML 和 XHTML 的发展方向感到不满。作为回应，他们成立了一个名为网络超文本应用技术工作组(WHATWG)的组织。他们在 2005 年以 Web 应用 1.0 的名义发布了他们的第一个提议。2006 年，万维网联盟(W3C)决定正式支持 WHATWG，而不是继续开发 XHTML。2007 年，W3C 以 HTML5 的名称重新发布了新规范。
虽然人们认为最终规格要到 2022 年才会公布，但现在正在重新考虑这个时间表。在 2009-2010 年，人们对 HTML5 的兴趣激增，因此，越来越多的浏览器和设备支持它。
第一章将介绍 HTML5 规范中的许多新结构。此外，它将检查那些将支持新 HTML5 结构的设备。
解决方案 1-1:在 HTML5 中创建 DOCTYPE
因为 HTML 有几个版本，所以浏览器需要一个 DOCTYPE 类型来告诉它使用的是哪个版本，以及如何正确地呈现它。
在这个解决方案中，您将学习如何正确地为 HTML5 创建 DOCTYPE。
涉及到什么
在传统的 HTML 或 XHTML 文档中，DOCTYPE 标记可能如下所示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DOCTYPE 有许多变体。
HTML5 将 DOCTYPE 简化为:
<!DOCTYPE html>
如何建造它
-
打开您选择的 HTML 或文本编辑器。对于本章中显示的例子，我们使用 Dreamweaver CS5。不要使用文字处理器，因为这可能会嵌入 HTML 无法识别的额外字符。
-
If necessary, start a new HTML document and give it the name and location of your choice.
如果您使用像 Dreamweaver 这样的 HTML 编辑器，您可能会得到如下所示的代码:
`
Untitled Document `如果您的代码看起来与上面的有些不同，现在不要担心。
-
按如下方式更改 DOCTYPE 标签:
<!DOCTYPE html>
专家提示
不要在 DOCTYPE 标记前留下任何空格。空格可能会导致浏览器呈现 HTML5 代码时出错。
解决方案 1-2:在 HTML5 中创建字符编码声明
不同的语言使用不同的字符集。这个标签声明使用哪个字符集。大多数语言最常用的字符集是 UTF-8。
在这个解决方案中，您将学习如何正确格式化 HTML5 中的字符集。
涉及到什么
在大多数 HTML 文档中，您会在开头看到以下标记:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
HTML5 现在已经将这个标签简化为:
<meta charset="UTF-8" />
如何建造它
在解决方案 1-1 所示的<!DOCTYPE html>标签下，键入以下内容:
<meta charset = "UTF-8" />
专家提示
虽然 UTF-8 在大多数情况下都可以工作，但是许多开发人员发现使用 ISO-8859-1 作为字符集提供了更多的灵活性。另一种字符集 UTF-16 有时会导致错误的字符，在某些情况下，会导致应用无法正常运行。
解决方案 1-3:将文档分成多个部分
在 HTML 中，将文档细分为不同部分的唯一真正方法是使用<div>标签。HTML5 提供了一些新的选项。
在这个解决方案中，您将学习如何使用新的 HTML5 标记来创建不同的文档节。在后续的解决方案中，我们将讨论其他结构分割元素。
涉及到什么
HTML <div>标签成功地将文档分成几个部分。但是单词<div>在标识文档的各个部分时没有什么意义。HTML5 提供了几个新的结构元素，将文档分成有意义的部分。
这些元素中的第一个是<section></section>标签。该元素表示文档的任何逻辑部分。这可能意味着产品描述、章节、讨论等等。虽然它的功能类似于<div>标签，但它提供了一种更具描述性和内容敏感性的方式来划分文档。
当在 HTML5 中创建一个部分时，就像在 HTML 中使用<div>标签一样，可以使用 id 或 class 属性。因为这两个属性可以应用于任何 HTML5 元素，所以它们被称为全局属性。每个 id 必须是唯一的，就像在 HTML 中一样，并且可以多次使用类来调用预定义的脚本或格式。
所有 HTML5 元素都有三种类型的属性:global，是所有元素共有的；特定于元素(仅适用于该元素)和事件处理程序内容属性(将根据文档中的内容触发)。随着你在本书中的进展，将会讨论其中的许多问题。
如何建造它
假设您正在创建一个关于制作芝士蛋糕的文档。以下是<section></section>元素的典型用法。
`
The proper way to mix ingredients
When using a stand-mixer, it is important that you do not over-mix the ingredients<…/p>
Proper baking techniques
It is important that you bake your cheesecake using a lot of moisture in the oven…
专家提示
本章中显示的<section></section>元素和后续结构元素的目的不是替换 HTML <div>标签。如果你把你的文档分成逻辑文档部分，使用<section></section>元素或者一个结构元素。然而，如果你只是为了格式化而分割文档，那么使用< div >标签是合适的。
解决方案 1-4:使部分文档可分发
越来越重要的是使页面的全部或部分内容可分发。例如，论坛讨论、博客、读者评论等等都可能成为分发或联合的对象。
在这个解决方案中，我们将讨论新的 HTML5 元素,<article></article>,它比传统的 HTML 更容易实现。
涉及到什么
这个结构标签的目的不是作为将文档分成几个部分的另一种方式。相反，它用于标识文档中您希望独立于文档其余部分并可从文档其余部分分发的部分。
由于<article></article>元素是独立的，它可以有自己的部分和子部分。
您可以通过用<article></article>元素包围任何元素来使其可分发。
如何建造它
使用解决方案 1-3 中显示的示例，您可以按如下方式分发芝士蛋糕说明。
`
专家提示
将<article></article>元素视为独立的文档，而不是更大文档的一部分。这样，当它被分发时，它将是完全可读和可理解的。
解决方案 1-5:创建旁白
如果想在传统的 HTML 中创建一个边讨论，你使用<div>标签并正确使用层叠样式表(CSS)进行适当定位。HTML5 通过提供一个新的结构元素<aside></aside>使这个过程变得更加容易。像<section>元素一样，它提供了一种更具描述性的文档分段方式。
在这个解决方案中，您将学习如何使用<aside></aside>元素。
涉及到什么
通常，您可能想要创建通常称为边栏讨论的内容。图 1-1 显示了一个用<aside></aside>标签完成的例子。
**图 1-1。**使用<aside></aside>元素
当然，这也可以通过使用<div>元素来完成。然而，<aside> < /aside >元素的使用提供了更有意义的结构描述。
如何建造它
上一节中显示的示例是用以下代码构建完成的:
`
When baking a cheesecake, it is important not to over bake it. You only want to bake it until the middle has a slight wiggle, not until it is rock solid.
It is important that you use a water bath, discussed at the right, to ensure even baking of your cheesecake.
`专家提示
<aside></aside>元素的放置至关重要。在上面的例子中，它作为主文档的一部分。但是，如果您希望侧边栏特定于某个部分，那么您必须将它放在该部分中。如果您使用的是<article></article>元素，这一点尤其重要，这样侧边栏就可以发布其余的相关资料。
解决方案 1-6:创建标题
使用结构化的<header></header>元素创建一个文档或章节标题。也可以包含<h1>到<h6>；虽然，正如你将在本章后面看到的，它们由<hgroup></hgroup>元素更好地服务。您还可以使用它来帮助放置徽标和章节目录。
在这个解决方案中，您将看到一个使用<header></header>元素的例子。
涉及到什么
<header></header>元素是创建文档和章节介绍的一种简单方法。图 1-2 显示了添加到我们例子中的<header></header>元素。
**图 1-2。**使用<header></header>元素
注意，在这个例子中，<hr>元素用于绘制水平线。这不是任何形式的要求。
如何建造它
以下代码用于创建图 1-2 中所示的文档。
`
Baking Cheesecakes
When baking a cheesecake, it is important not to over bake it. You only want to bake it until the middle has a slight wiggle, not until it is rock solid.
It is important that you use a water bath, discussed at the right, to ensure even baking of your cheesecake.
`您可以使用<header></header>结构元素作为对文档中大多数其他结构元素的介绍。
专家提示
不能在<footer>、<address>或其他<header>元素中使用<header></header>元素。如果这样做，结果将是不正确的渲染。
方案 1-7:分组< h1 >到< h6 >元素
在某些情况下，您可能希望将<h1>到<h6>元素组合在一起。例如，您可能想要创建一个使用<h1>元素的部分标题。然后，在它的正下方，放置一个使用了<h2>元素的副标题。在 HTML5 中，您可以将<h1>和<h2>元素组合到一个名为<hgroup>的新结构元素中。
在这个解决方案中，您将看到一个使用<hgroup></hgroup>元素的例子。
涉及到什么
结构上的<hgroup></hgroup>让你能够显示你正在将标题(<h1>到<h6>)组合在一起，以满足替换标题和副标题的需要。
添加到解决方案 1-6 的示例中，会出现一个<hgroup>，如图 1-3 中的所示。
**图 1-3。**使用<h 组></h 组>元素
在这种情况下，<h1>和<h2>标题在<hgroup>中使用。
如何建造它
在图 1-3 所示的例子中，使用了以下代码。：
`
Baking Cheesecakes
Cheesecake Tips and Techniques
Professional Tips
When baking a cheesecake, it is important not to over bake it. You only want to bake it until the middle has a slight wiggle, not until it is rock solid.
It is important that you use a water bath, discussed at the right, to ensure even baking of your cheesecake.
`注意，我们将<hgroup>元素放在了<header></header>元素的下面。虽然这不是必需的，但是这是一个很好的实践。你可以在 HTML5 文档的任何部分使用<hgroup>元素。
专家提示
在一个构建良好的 HTML5 文档中，<hgroup></hgroup>元素是将各种标题和副标题联系在一起的好方法。如果您正在使用<article></article>元素，这一点尤其正确。这样你就可以确信，任何标题及其相关的子标题都将作为一个整体移动。
解决方案 1-8:创建页脚
顾名思义，<footer></footer>元素将为 HTML5 文档创建一个页脚——该文档的一个结构部分。页脚可以包含版权信息、作者信息、引用、隐私政策等等。
在这个解决方案中，您将检查<footer></footer>元素是如何工作的。
涉及到什么
您可以使用结构化的<footer></footer>元素为 HTML5 文档或该文档中的任何部分创建页脚。
基于解决方案 1-3，<footer>元素的结果显示在图 1-4 中。
**图 1-4。**使用<footer></footer>元素
版权符号“©”以及任何关于权利和所有权的文本都放在页脚中。
如何建造它
在图 1-4 中，使用了以下代码:
`
Baking Cheesecakes
Cheesecake Tips and Techniques
Professional Tips
When baking a cheesecake, it is important not to over bake it. You only want to bake it until the middle has a slight wiggle, not until it is rock solid.
It is important that you use a water bath, discussed at the right, to ensure even baking of your cheesecake.
`<footer></footer>元素既可以用于整个 HTML5 文档，就像这里一样，也可以用于文档内的结构划分。
专家提示
在<标题>元素或另一个<footer>元素中不能使用<footer>元素。这将导致不正确的渲染。
解决方案 1-9:在 HTML5 文档中创建导航
大多数网站都有导航链接。链接，不管是超链接还是某种按钮，通常都通过使用一个<div>元素与文档的其余部分分开。同样，除了它是一个分区之外，它并没有将该部分标识为专门用于导航。在 HTML5 中，您现在可以在标记中标识用于导航帮助的部分。
在本节中，您将了解新的结构化 HTML5 元素:<nav></nav>。
涉及到什么
结构元素<nav></nav>可以用来创建一个容器来保存整个 HTML5 文档或文档中任何部分的导航元素。
结果如图 1-5 所示。
**图 1-5。**使用<nav></nav>元素
这为导航部分提供了自己的标记，使其更容易识别。
如何建造它
以下代码用于图 1-5 。所示的导航链接仅用于说明目的，没有任何功能。
`
Baking Cheesecakes
Cheesecake Tips and Techniques
Professional Tips
When baking a cheesecake, it is important not to over bake it. You only want to bake it until the middle has a slight wiggle, not until it is rock solid.
It is important that you use a water bath, discussed at the right, to ensure even baking of your cheesecake.
`如您所见，文档中的导航元素现在有了自己易于识别的标记。它们可以放在整个 HTML5 文档中，如此处所示，也可以放在文档的任何部分中。
专家提示
你并不局限于图 1-5 中所示的超链接。在<nav></nav>容器元素中，您可以放置任何您想要的导航工具。
第二个技巧是不要在<footer>元素中使用<nav></nav>容器。虽然没有严格禁止，但这可能会导致不正确的呈现。
解决方案 1-10:插入图形
在网页中插入照片、插图、图表等是相当常见的。到目前为止，开发者可以在任何需要的地方插入一个<img>元素。现在，您可以使用 HTML5 中新的<figure></figure>元素，使用标记来指定图片应该放在哪里。
在这个解决方案中，您将看到一个使用<figure></figure>元素的例子。
涉及到什么
结构元素<figure></figure>可以用来创建一个容器来保存 HTML5 文档或文档中任何部分的说明性元素。
结果如图 1-6 所示。
**图 1-6。**使用<figure></figure>元素
文档中的说明性元素现在有了自己的易于识别的标记。它可以用于文档的任何子部分。
如何建造它
以下代码用于图 1-6 。所示的导航链接仅用于说明目的，没有任何功能。
`
Baking Cheesecakes
Cheesecake Tips and Techniques
Professional Tips
When baking a cheesecake, it is important not to over bake it. You only want to bake it until the middle has a slight wiggle, not until it is rock solid.
It is important that you use a water bath, discussed at the right, to ensure even baking of your cheesecake.
`很容易识别照片的位置，因为它现在使用<figure></figure>元素拥有自己的容器标记。
专家提示
随着新的<figure>元素而来的是另一个新的 HTML5 元素，叫做<figcaption> </figcaption>。将它放在<figure>元素中，如下所示:
<figure> <img src="" width="170" height="128" /> <figcaption>One of our many cheesecakes</figcaption> </figure>
如果你把<figcaption>元素放在图片下面，如上面的例子所示，它会出现在右边。如果你把它放在上面，它会出现在左边。
解决方案 1-11:浏览器兼容性
本章中显示的数字来自 Safari 版本 5.0.3 和 Mozilla Firefox 版本 3.6.13。虽然它可以在所有流行的浏览器上运行，但 HTML5 的兼容性既不一致也不通用。
在本解决方案中，我们讨论如何测试浏览器兼容性，如果不兼容，如何纠正不兼容性。
涉及到什么
虽然大多数流行浏览器的当前版本能够很好地处理最新的 HTML5 规范，但对于较旧的浏览器来说却不是这样。特别值得关注的是版本 9 之前的 Internet Explorer 版本。
如何建造它
最喜欢的一个网站是:[www.findmebyip.com](http://www.findmebyip.com)。
如图 1-7 所示，该网站将测试你的浏览器对 HTML5 的兼容性。
**图 1-7。**一个[www.findmebyip.com](http://www.findmebyip.com)的例子
如你所见，HTML5 的大部分功能在这款浏览器上都运行良好。根据您的浏览器或浏览器版本，您可能会得到不同的结果。
另一个网站[www.caniuse.com](http://www.caniuse.com)，展示了一组全面的表格，讨论了各种浏览器与 HTML5 的兼容性。该位置如图 1-8 所示。
图 1-8。 HTML5 兼容性列于[www.caniuse.com](http://www.caniuse.com)
[www.caniuse.com](http://www.caniuse.com)的一大特色是能够过滤信息并聚焦于你所关注的元素。还有许多与这个网站相关的讨论和教程。
使用最广泛的 HTML5/CSS 资源站点之一是[www.modernizr.com](http://www.modernizr.com)。该位置如图 1-9 所示。
**图 1-9。**首页[www.modernizr.com](http://www.modernizr.com)
该网站提供了一个强大的可下载 JavaScript 库，可以调整 HTML5 和 CSS3 代码以适应特定的浏览器。这个项目是开源的，因此完全免费。大多数使用 HTML5 的开发人员使用这个库作为检查和调整代码的手段。
专家提示
因为 HTML5 标准正在发展，我们强烈建议您不要完全修改现有的网站。相反，随着更新变得必要，开始逐渐采用 HTML5 中的元素。
总结
在本章中，我们研究了一种更精确的创建 HTML 标记的方法，而不是大量的新功能。例如，现在可以使用诸如<section>、<nav>、<figure>等元素，而不是简单地使用通用的<div>元素。早期清晰的标记有助于以后更好的控制和功能。
后续章节将研究这一新功能。从第二章的开始，你将开始看到这种增加的功能的可能性。
二、HTML5 标记
在第一章中，我们探索了许多与 HTML5 相关的新结构标签。通过使用附加的结构标签，您可以更详细、更准确地描述文档的各个部分。您还了解了许多与标记相关的属性。这些属性中有些是特定于特定标签的，有些是所有标签的全局属性。
本章回顾了你可能在 HTML 早期版本中使用过的许多标签。但是，你会看到这些熟悉的标签在 HTML5 中得到了极大的增强。在本章中，你还将学习 HTML5 如何帮助你把你的应用与外界联系起来，更重要的是，与多媒体联系起来。这里我们试着解决几个问题。
解决方案 2-1:在 HTML5 中使用< hr >标签
在以前的 HTML 版本中，<hr>标签被严格用于在页面上创建水平线。在 HTML5 中，它在语义上发生了变化。
乍一看，<hr>标签看起来在 HTML5 中做的事情和它在以前的 HTML 版本中做的完全一样。然而，HTML 的目的是描述文档的各个部分。之前，<hr>标签画了一条水平线。虽然这一行很方便，但除了一条水平线之外，它实际上并不能描述文档的一部分。
W3C 在语义上改变了<hr>标签的功能。官方说法是，它的目的现在是定义“一个部分的结束和另一个部分的开始。”这里是混乱开始的地方:正如在第一章的中所讨论的，HTML5 有一个叫做<section>的新标签，它被设计用来分隔部分。这是开发者之间持续争论的主题。在撰写本文时，大家一致认为或许可以使用<hr>标签来分隔一个部分中的主题。由于 HTML5 仍然是一项正在进行中的工作，而且很可能会持续很长时间，也许会有一个更最终的定义。
涉及到什么
让我们假设你有几个段落，你想用一条水平线分开。你可能希望它看起来像图 2-1 中的简单例子。
**图 2-1。**使用<hr>标签
如果你正在挠头，想知道有什么不同，你并不孤单。很多开发者都在做完全一样的事情。虽然图 2-1 看起来和以前的 HTML 版本有相同的功能，但它实际上在语义上将湿摩擦和干摩擦的主题分开了。在图 2-1 中，我们也使用它将描述从标题“摩擦”中分离出来
如何建造它
图 2-1 中所示的例子由以下代码完成:
<!DOCTYPE html> <html> <head> <title>Using the <hr> tag</title> </head> <body> <h1>How to Barbecue and Smoke Meat</h1> This page will discuss the many ways to marinate, smoke, and grill your favorite meats. <h2>Rubs</h2> <hr> Moist rubs give your meats a nice spicy and moist taste. But be ready, they are messy to eat. <hr> Dry rubs give the meat a nice smokey taste and are much easier to eat at dinner parties. </body> </html>
根据 W3C，应该用<hr>标签而不是<p>标签来分隔各个部分。在这个例子中，为了符合 HTML5 标准，没有使用<p>标签。当然，<p>标签仍然可以用来分隔一个节中的段落。
专家提示
为了适应<hr>标签的新语义定义，您可以使用 CSS 来改变<hr>标签产生的内容。请注意以下示例:
hr { height: 15px; background: url('decorative.gif'); no-repeat 50% 50%; }
但是，您需要对此保持谨慎。截至本文撰写之时，Safari 和 Firefox 将用上述代码中显示的图形替换水平线；但是 Internet Explorer 会用水平线包围图形。
解决方案 2-2:使用< iFrame >标签
您可以使用<iframe>标签在浏览器中创建一个浏览器，并从其他来源打开文档。这可以在图 2-2 中的所示的例子中看到。
**图 2-2。**使用<iFrame>标签打开两个外部网站
在图 2-2 中，使用两个<iFrame>标签打开了两个独立的网站。这个标签的重要性增加了，因为 HTML5 不支持 scrolling、frameborder 和 marginheight 属性，而所有这些属性在以前的 HTML 版本中都是受支持的。
涉及到什么
HTML5 中<iFrame>标签的一个建议规范是seamless属性。这允许外部源代码被合并到宿主文档中，没有边框或滚动条。这意味着外部源看起来就像是宿主文档的一部分。不幸的是，在撰写本文时，还没有浏览器支持seamless属性。
如何建造它
以下代码用于创建图 2-2 中所示的示例:
<!DOCTYPE html > <html> <head> <title>Using the <iFrame> tag</title> </head> <body> <strong>Using the iFrame tag</strong><hr> <iframe src="http://www.apress.com/" width="600" height="250" seamless></iframe><br> <iframe src="http://www.friendsofed.com/" width="600" height="250" seamless ></iframe><br> </body> </html>
请注意，上面的代码中使用了seamless属性，但是，您仍然可以看到滚动条和边框。这意味着浏览器不支持使用seamless属性。
专家提示
当从外部来源引入任何类型的内容时，安全性可能是一个因素。在 HTML5 中，<iFrame>标签周围有一个沙箱来帮助提高安全性。沙箱的属性包括以下内容:
- allow-scripts :阻止或允许执行某些脚本内容，包括 JavaScript。
- 允许-表单:允许或阻止表单提交。
- allow-same-origin :强制外部文档的内容源自同一原点。因此，页面不能从一个原点接收数据，然后将数据写入不同的原点。
- 允许-顶层导航:允许或阻止导航到顶层浏览内容。
解决方案 2-3:在页面中嵌入媒体
与上一节中的<iFrame>标签一样，<embed>标签用于将外部内容嵌入到主机网页中。然而，这里的重点是媒体，如照片，视频，声音和，尽管所有的谣言相反，Flash 内容。例如，在图 2-3 中，你会得到以下结果(假设一张照片是从外部来源带入的):
**图 2-3。**使用<embed>标签
涉及到什么
虽然您可能认为可以用<img>标签做同样的事情，但是您可以使用<embed>标签将各种媒体引入网页。例如，您可以引入视频、声音文件等等。然而，在处理视频时，事情在这个时候有点转变。
在撰写本文时，反对使用 Adobe Flash Player 等浏览器插件的趋势似乎越来越明显。许多移动技术目前不支持这些插件。例如，最常用的 Flash 视频格式之一是 FLV。这需要使用前面提到的 Adobe Flash Player。标签似乎指向一个可能的解决方案；然而，有一个警告。视频有多种风格——FLV、MOV、H.264 等等。每种 MIME 类型(文件扩展名)都需要有人获取原始视频并对其进行编码。这意味着将其包装在一个称为编解码器(压缩解压缩)的特殊容器中。此外，观看视频的人需要在他们的计算机上安装视频编解码器的副本。对于 Flash 视频，编解码器包含在 Flash 播放器中。
在撰写本文时，有两种编解码器支持 HTML5 视频:H.264 和 Theora。记住这一点，在撰写本文时，还有以下浏览器支持:
- Firefox 3.5 及以上版本只支持 Theora 的 HTML5，不支持 H.264。
- Internet Explorer 9 仅支持 H.264 的 HTML5 视频，不支持 Theora。
- Safari 3 及以上版本只支持 H.264 而不支持 Theora 的 HTML5 视频。
- Chrome 3 及以上版本同时支持 H.264 和 Theora 的 HTML5 视频。
- Opera 10.5 只支持 Theora 的 HTML5 视频，不支持 H.264。
如何建造它
以下代码用于创建图 2-3 中所示的示例:
`
Using the embed tag
`区分这个标签的是type属性。您可能会将type属性与像<input>这样的标签联系起来。然而，在 HTML5 中，属性的使用比标签更加一致。在大多数情况下，媒体的 MIME 类型(文件扩展名)用作类型。但是，您很快就会看到，还有一种识别视频类型的替代方法。
另一个独特的属性是src。这可以是连接到源所需的任何 URL。
专家提示
如上图所示，不同的浏览器支持不同的 HTML5 视频编码。因此，可能有必要对任何给定的视频进行两种编码:一种用于 H.264，一种用于 Theora。在<embed>标签中，您使用type属性来标识要打开的编码视频。
当对视频使用type属性时，视频的类型可以用语法video/type来标识。例如，对于 QuickTime 视频，将类型标识为type = "video/Quicktime"。
解决方案 2-4:使用<区域>标签
虽然您可能在以前的 HTML 版本中使用过<area>标记，但是在 HTML5 中实现的版本提供了一些新的有趣的可能性。让我们先来看看在 HTML5 中使用<area>标签的一些基础知识。
涉及到什么
<area>标签用于使用图像映射创建超链接。换句话说，它将一个现有的图形分成几个部分，每个部分都有自己独特的超链接。然而，HTML5 看待链接的方式与以前的 HTML 版本略有不同。它将链接分为三类:
- 超链接:允许用户导航到给定的资源。
- 外部资源:链接到被自动处理以扩充当前文档的资源。
- 注释:对外部资源中使用的自动资源的修改；他们还可以修改超链接的工作方式。
在以前的 HTML 版本中，rel属性用于显示当前资源和它所链接的资源之间的关系。例如，请注意以下内容:
rel = "stylesheet"
这表明资源链接到的文档是一个样式表。虽然这听起来不多，但它可能对搜索引擎理解网站内各种文档的关系有巨大的影响。
虽然rel属性不是新的，但是 HTML5 扩展了关系定义。
表 2.1 显示了撰写本文时<area>标签与外部文档的关系。由于本规范处于过渡阶段，表中提供的信息可能会发生变化。然而，你会惊讶地发现，现在的参考值代表了如此多样的关系，如家庭，职业，甚至浪漫。
表 2-1 。与<area>标签引用文件的关系
在表 2-1 中列出的所有rel环节中:
- 超链接是用熟人、候补、档案、作者、书签、孩子、同事、联系人、共同居民、同事、迷恋、日期、外部、第一、朋友、帮助、索引、亲属、许可证、我、met、muse、邻居、下一个、父母、上一个、搜索、侧边栏、兄弟姐妹、配偶、爱人和标签值创建的。
- 通过预取引用外部资源。
- 注释由 nofollow 和 noreferrer 使用。
同样，从 HTML5 开始，<area>标签可以使用 media 属性来指示链接的目标媒体。在以前的 HTML 版本中，您不能在<area>标签中使用 media 属性。为了保持一致，HTML5 现在允许使用它。
如何建造它
有许多不同的方式来使用<area>标签。下面的例子就是这样一种方式。请注意，此示例仅用于演示，并不代表工作现场。
`
<area>标签与<map>标签一起使用。注意<img>标签中的usemap属性。在<map>标签的name属性中使用了相同的标识符。这将图像与图像映射相关联。
媒体属性用于显示链接与哪个媒体相关联。如前所述，在<area>标签中使用该属性是 HTML5 的新功能。
专家提示
当使用<area>标签时，结合使用hreflang属性和href属性是一个很好的实践。这将指示目标文档或资源的语言。
总结
在这一章中，我们看了 HTML5 标记如何赋予传统的 HTML 标签新的功能。我们还研究了如何使用标签如<iFrame>和<area>将 HTML5 文档链接到外部世界。
在下一章，你将看到 HTML5 如何使用 DOM API 模型。在这个过程中，我们会重温您在本章和第一章中学到的一些概念。但是，您将在更复杂的环境中看到它们。
三、HTML5 结构和语义元素
“语义网”这个术语绝对不是新的。万维网的创始人蒂姆·伯纳斯·李第一次使用了这个词，他谈到了万维网向一种环境的转变，在这种环境中，发布的文档与以可解释的格式指定其语义上下文的信息和数据相关联。
使用 HTML5，在万维网的这个方面已经做了很多工作，并且已经引入了大量的新元素来为网页提供更好的定义和结构。然而，还有更多因素需要解决。
在这一章中，我们将重点介绍使用微数据、图形容器和 side 元素为 web 页面创建语义结构的技术和元素。
了解微数据
HTML5 引入了使用微数据在网页中定义自定义语义的可能性。
微数据使您能够通过使用由名称-值对和现有内容组成的语法，在 web 页面中指定机器可读的定制元素。
代表主题的自定义元素称为项目。分配给这些项目的值是它们的属性。为了使这些定制元素有效，您需要定义一个定制词汇表，其中包括表示主题的命名属性列表。
例如，如果您想要创建表示用户主题的微数据，您必须在微数据词汇表中定义它的属性。这个词汇表将包括属性声明，比如名字、姓氏、地址和社会保险号。
若要创建项，请使用 itemscope 属性。若要定义项目的属性，请使用 itemprop 属性。
特别是，itemscope 属性是与 HTML 元素关联的元素，它允许您定义元素的范围。itemscope 属性可以与任何有效的 HTML 元素相关联:
`
Name:Marco.
Last Name: Casario.
Photo:
Address: Via Lazzaro Spallanzani.
Social Security Number: 000-0000-000.
`在本例中，我们定义了一个具有五个属性的项目:
- 名字
- 姓
- 照片
- 地址
- 社会保险号
通过使用这种结构，可以创建您想要的所有项目。您还可以将多个属性与具有相同名称和不同值的项目相关联:
`
Name:Marco.
Last Name: Casario.
Photo:
Address: Via Lazzaro Spallanzani.
Address: Via Ludovico di Breme .
Social Security Number: 000-0000-000.
`但是，在创建项目之前，您需要创建自定义词汇表，以便能够定义元素的有效属性。因此，词汇表应是一个带有描述的属性列表，如表 3.1 所示。
**表 3.1。**用户微数据词汇
| **属性** | **描述** | | :-- | :-- | | 名字 | 用户的名称。必选。 | | 姓 | 用户的姓氏。必选。 | | 地址 | 用户的地址。 | | 照片 | 用户的 PNG、GIF 或 JPG 格式的图像。 | | 社会保险号 | 用户的有效社会保险号。必选。 |自定义词汇表与 itemtype 属性的元素相关联:
`
Name:Marco.
Last Name: Casario.
Photo:
Address: Via Lazzaro Spallanzani.
Social Security Number: 000-0000-000.
`分配给 itemtype 属性的值被标识为统一资源定位器(URL)。事实上，在上面的例子中，itemtype 属性指向 URL: [www.my-vocabulary.org/user](http://www.my-vocabulary.org/user)。
词汇表还允许您为打算使用相同结构描述相同主题的开发人员提供指导。
此外，微观数据的另一个重要方面与搜索引擎有关。事实上，谷歌等搜索引擎旨在向用户呈现最有用、最丰富的搜索结果。这些信息不会影响页面的内容，但可以让搜索引擎理解来自网页的信息，并更好地呈现出来。因此，微数据也被用作一种方法，使网页更便于搜索引擎搜索。
微数据是以结构化方式执行 HTML 内容标记的三种方法之一。(另外两种方法是微格式和 RDFs。)
解决方案 3-1:使用 itemprop 和 itemscope 属性
HTML5 引入的微数据是一种为内容分配标签的方式，以便描述特定类型的信息。
在这个解决方案中，您将创建一个包含带有 HTML5 微数据的食谱的网页。
涉及到什么
要使用微数据语法创建一个元素，基本上需要向标准 HTML 标记声明三个属性:
- *项目范围:*用于创建项目的布尔属性
- itemprop: 用于向一个项目或该项目的一个后代添加属性
- itemtype: 用于定义自定义词汇
在这个解决方案中，我们将使用 Google 为我们想要描述的项目定义的自定义词汇表。在 URL: [www.data-vocabulary.org/](http://www.data-vocabulary.org/):有一些自定义词汇已经被知名的搜索引擎定义和认可。
- 事件
- 组织
- 人
- 秘诀
- 产品
- 回顾
- 审核-汇总
- 面包屑
- 提供
- 报价汇总
因此，您所要做的就是将 itemtype 属性指向 URL: [www.data-vocabulary.org/](http://www.data-vocabulary.org/)并添加元素类型。在这个例子中，您将使用定义一个食谱的微数据，您可以在这个地址:[www.data-vocabulary.org/Recipe/](http://www.data-vocabulary.org/Recipe/)找到它。
有效属性在表 3-2 中指定。
**表 3-2。**菜谱微数据属性
| **属性** | **描述** | | :-- | :-- | | 名字 | 包含菜肴的名称。必选。 | | 配方类型 | 菜的种类。例如，开胃菜、主菜或甜点。 | | 照片 | 正在准备的菜肴的图像。 | | 出版者 | 配方以 ISO 8601 `([`www.iso.org/iso/date_and_time_format`](http://www.iso.org/iso/date_and_time_format)`日期格式发布的日期。 | | 摘要 | 描述菜肴的简短摘要。 | | 回顾 | 对这道菜的评论。可以包含嵌套的审阅信息。 | | 准备时间 | 以 ISO 8601 时间长度格式准备菜肴食谱所需的时间长度。可以使用 min 和 max 作为子元素来指定时间范围。 | | 烹饪时间 | 以 ISO 8601 持续时间格式烹饪这道菜所需的时间。可以使用 min 和 max 作为子元素来指定时间范围。 | | totalTime(总时间) | 以 ISO 8601 时间格式准备和烹饪一道菜所花费的总时间。可以使用 min 和 max 作为子元素来指定时间范围。 | | 营养 | 关于食谱的营养信息。可以包含以下子元素:食用量、卡路里、脂肪、饱和脂肪、不饱和脂肪、碳水化合物、糖、纤维、蛋白质和胆固醇。这些元素不是食谱微格式的明确组成部分，但是 Google 会识别它们。 | | 说明 | 做这道菜的步骤。可以包含子元素指令，可用于注释每个步骤。 | | 产量 | 食谱生产的数量(例如，服务的人数、份数等等。 | | 佐料 | 食谱中使用的一种配料。可以包含子项的名称(配料名称)和数量。用这个来识别单独的成分。 | | 作者 | 食谱的创造者。可以包含嵌套的人员信息。 |如何建造它
当您想要使用微数据创建新元素时，首先要做的是指定它将引用的自定义词汇表。在这个解决方案中，我们将使用 Google 在 URL: [www.data-vocabulary.org/Recipe/](http://www.data-vocabulary.org/Recipe/)定义的词汇表，其有效属性是在表 3-2 中指定的属性。
使用 itemtype 属性指定词汇:
<section itemtype="http://www.data-vocabulary.org/Recipe">
要创建一个新元素，您所要做的就是使用 Boolean itemscope 属性:
<section itemscope itemtype="http://www.data-vocabulary.org/Recipe">
现在，您可以为 Recipe type 元素声明由自定义微数据词汇表标识的属性。
首先声明菜谱的名称、成品菜肴的照片以及菜谱的作者:
`
Ciabatta Bread
还可以通过指定评论属性来插入对菜肴的评论:
<span itemprop="review"> Ciabatta is an Italian white bread made with wheat flour and yeast. The loaf is somewhat elongated, broad, and flattish. Its name is the Italian word for slipper. There are many variations of Ciabatta. Ciabatta in its modern form was developed in 1982\. Since the late 1990s, it has been popular across Europe and the United States. It is widely used as a sandwich bread. From Wikipedia http://en.wikipedia.org/wiki/Ciabatta </span>
每个食谱都需要配料，所以使用配料属性来指定它们:
`
- 1 1/2 cups water
- 15 grams of salt
- 1 teaspoon sugar
- 1 tablespoon olive oil
- 3 1/4 cups all-purpose flour
- 20 grams of fresh yeast
为了插入 Recipe 对象的元素，我们使用了一个无序列表，并为 H3 元素声明了 itemprop 属性。事实上，可以为任何 HTML 元素声明 itemprop 属性。
现在添加说明，这次使用编号列表:
`
Instructions
- In Kitchen Aid style mixer, mix all ingredients roughly until combined with paddle. Let it rest for 10 minutes.
- With the paddle (I prefer the hook to prevent the dough from crawling into the guts of the mixer), beat the living hell out of the batter. It will start out like pancake batter but, in anywhere from 10 to 30 minutes, it will set up and work like a very sticky dough. If it starts climbing too soon, then switch to the hook.
- You'll know it's done when it separates from the side of the bowl and starts to climb up your hook/paddle, just coming off the bottom of the bowl. (I mean this literally about the climbing—I once didn't pay attention, and it climbed up my paddle into the greasy inner workings of the mixer. It was not pretty!) Anyway, it will definitely pass the windowpane test.
- Place into a well-oiled container, and let it triple! It must triple! For me, this takes about 2.5 hours. Empty onto a floured counter (scrape if you must, however you got to get the gloop out), and cut into 3 or 4 pieces.
- Spray with oil and dust with lots of flour. Let it proof for about 45 minutes, which gives you enough time to crank that oven up to 500°F. After 45 minutes or so, the loaves should be puffy and wobbly; now it's iron fist, velvet glove time.
- Pick up and stretch into your final Ciabatta shapes (~10" oblong rectangles), and flip them upside down. This redistributes the bubbles, so that you get even bubbles throughout. Then place the loaves on parchment or a heavily-floured peel.
- Try to do it in one motion and be gentle. It might look like you've ruined them completely, but the oven spring is immense on these things.
- Bake at 500°F until they are 205°F in the center (about 15-20 minutes), rotating 180-degrees half way through. Some people like to turn the oven down to 450°F after 10 minutes—whatever floats your boat. I usually bake in 2 batches.
您还可以指定估计的烹饪时间:
`
Cook Time: 50 minutes approximately
通过在浏览器中打开该文件，您将获得如图 3-1 所示的结果。
**图 3-1。**使用微数据的配方网页
除非用户打开页面的源代码，否则他或她不会注意到由于微数据而产生的任何差异。然而，你所做的是为你的网页创建一个健壮的语义结构，搜索引擎肯定会欣赏它。
以下是该示例的完整源代码:
`
Ciabatta Bread
Ciabatta is an Italian white bread made with wheat flour and yeast. The loaf is somewhat elongated, broad, and flattish. Its name is the Italian word for slipper. There are many variations of Ciabatta. Ciabatta in its modern form was developed in 1982\. Since the late 1990s, it has been popular across Europe and the United States. It is widely used as a sandwich bread. From Wikipedia http://en.wikipedia.org/wiki/Ciabatta
- 1 1/2 cups water
- 15 grams of salt
- 1 teaspoon sugar
- 1 tablespoon olive oil
- 3 1/4 cups all-purpose flour
- 20 grams of fresh yeast
Cook Time: 50 minutes approximately
Instructions
-
- In Kitchen Aid style mixer, mix all ingredients roughly until combined with paddle. Let it rest for 10 minutes.
-
- With the paddle (I prefer the hook to prevent the dough from crawling into the guts of the mixer), beat the living hell out of the batter. It will start out like pancake batter but in anywhere from 10 to 30 minutes it will set up and work like a very sticky dough. If it starts climbing too soon, then switch to the hook.
-
- You'll know it's done when it separates from the side of the bowl and starts to climb up your hook/paddle, just coming off the bottom of the bowl. (I mean this literally about the climbing—I once didn't pay attention, and it climbed up my paddle into the greasy inner workings of the mixer. It was not pretty!) Anyway, it will definitely pass the windowpane test.
-
- Place into a well-oiled container and let it triple! It must triple! For me, this takes about 2.5 hours. Empty onto a floured counter (scrape if you must, however you got to get the gloop out), and cut into 3 or 4 pieces.
-
- Spray with oil and dust with lots of flour. Let it proof for about 45 minutes, which gives you enough time to crank that oven up to 500°F. After 45 minutes or so, the loaves should be puffy and wobbly; now it's iron fist, velvet glove time.
-
- Pick up and stretch into your final Ciabatta shapes (~10" oblong rectangles), and flip them upside down. This redistributes the bubbles, so that you get even bubbles throughout. Then place the loaves on parchment or a heavily-floured peel.
-
- Try to do it in one motion and be gentle. It might look like you've ruined them completely, but the oven spring is immense on these things.
-
- Bake at 500°F until they are 205°F in the center (about 15-20 minutes), rotating 180-degrees half way through. Some people like to turn the oven down to 450°F after 10 minutes—whatever floats your boat. I usually bake in 2 batches.
`
专家提示
包括谷歌在内的一些搜索引擎通常不会显示不可见的用户元素，比如元标签。然而，这并不意味着搜索引擎完全忽略这些信息。
在某些情况下，向搜索引擎提供更详细的信息是有用的，即使我们不想让访问者看到这些信息。例如，如果我们允许用户在网站上为我们的食谱打分，平均分数是 8 分，那么用户(而不是搜索引擎)会认为这个分数是基于 1 到 10 分的范围。在这种情况下，您可以使用 meta 元素来指定这个方面，如下所示:
`
Rating: 8
在这段代码中，meta 标记指定了在页面中看不到的附加信息，但是这些信息有助于搜索引擎理解分级系统是基于 1 到 10 的范围。属性的值是使用 content 属性指定的。
解决方案 3-2:创建自定义词汇表
使用微数据的优势在于，它允许您在 web 页面中创建 HTML 标准元素中没有的自定义元素。
您需要创建一个自定义词汇表，以便您将创建的结构能够定义名称-值对组，供其他开发人员重用，并被搜索引擎识别。
自定义词汇表只是自定义属性的列表，您创建它来定义某些元素，这些元素将作为其他开发人员和搜索引擎设计人员的技术文档。
即使这不是一个强制性的练习，也强烈建议你创建一个自定义词汇表。
涉及到什么
正如您在前面的解决方案中已经看到的，Google 为一些定制元素提供了一些定制词汇表。已经被定义并被搜索引擎识别的定制词汇可以在 URL: [www.data-vocabulary.org/](http://www.data-vocabulary.org/)获得。
要创建自定义词汇表，您所要做的就是记录定义元素的属性，发布 web 页面，并使用 itemtype 属性指向它。
如何建造它
创建自定义词汇表意味着创建一个 HTML 页面，记录定义自定义元素结构的属性。在本解决方案中，您将创建一个自定义词汇表来描述培训课程。
因此，创建一个新网页，然后发布到远程服务器:
`
Course
When course information is marked up in web pages, use the following information in a course.
To see an example, go to the Comtaste Training page: http://www.comtaste.com/en/html-5-training.htm
Course Properties
| Properties | Description |
|---|---|
| name | The title of the course. Required. |
| subtitle | A short summary describing the course. |
| summary | A short description of the course. |
| description | A detailed description of the course and subjects. |
| date | The published dates. |
| hour | The total duration of the course. |
| location | The location of the course. |
| students | The maximum number of students per course. |
| prerequisites | The skill required to participate to the course (if needed). |
| objectives | A short description of what you'll learn. |
| HDrequirements | Hardware and software requested for this course. |
| book | A list of course assets. |
| outline | The complete outline of the course. |
| price | The price of the course. |
| instructor | The name of the instructor that will lead the course. |
因为是简单的 HTML 文件，所以可以用常用的 web 浏览器打开，如图图 3-2 所示。
**图 3-2。**记录课程元素属性的自定义词汇表页面
为了使用词汇表，在将 HTML 页面发布到远程 URL 后，必须使用 itemtype 属性指定地址:
<div itemscope itemtype="http://www.comtaste.com/microdata/course">
要查看使用课程元素微数据的 HTML 页面示例，您可以访问这个 URL: [www.comtaste.com/en/html-5-training.htm](http://www.comtaste.com/en/html-5-training.htm)，如图 3-3 所示。
**图 3-3。**课程微数据页面
专家提示
Google 为开发者提供了一个有趣的工具，丰富的代码片段测试工具:[www.google.com/webmasters/tools/richsnippets](http://www.google.com/webmasters/tools/richsnippets)。
你可以插入一个有效的 URL 来检查 Google 是否能正确解析你的结构化数据标记并显示在搜索结果中，如图图 3-4 所示。
**图 3-4。**丰富的代码片段测试工具正在运行
解决方案 3-3:了解链接类型和关系
从 HTML 的第一个版本开始，链接就使得简单的文本页面易于导航。然而，HTML5 引入了一个新概念:链接关系。链接关系让你不仅能告诉浏览器你所指向的页面或资源，还能告诉你为什么要指向它。
链接关系可以分为两类:
- *外部资源链接:*指向浏览器处理的资源的所有链接，如样式表、快捷图标、pingback 服务器等
- *超链接:*链接到其他文档的简单链接
涉及到什么
本质上，在 HTML5 中创建链接关系需要三个标签:
在页面的<head>中使用<link >元素
使用<a>元素
使用一个<area>元素
要确定哪些链接类型适用于链接或区域元素，必须在空格上拆分元素的rel属性:
<a href="myTag/html5" rel="tag">html5</a>
在这个代码示例中，我们创建了一个标记链接。
<a>和<area>元素上的rel属性控制元素创建什么类型的链接。属性的值必须是一组空格分隔的标记。
rel属性没有默认值。如果省略该属性，或者用户代理无法识别该属性中的任何值，则该文档与目标资源没有特定的关系，只是两者之间有一个超链接。
如何建造它
使用链接关系非常简单。这里不提供代码示例，而是用 HTML5 提供的新的rel值列表来查看一个表，这样更有用。
表 3-3 总结了可用于rel属性的链接类型。
表 3-3 。新的 HTML5 链接类型
| **属性** | **描述** | | :-- | :-- | | 档案馆 | 提供记录、文档或其他历史资料的链接。一个例子就是:
<a href="/archive" rel="archives">My Blog's Archive</a> |
| 作者 | 定义一个页面的超链接，该页面提供关于最近的 article 元素的作者、定义超链接的元素的祖先(如果有)或整个页面的附加信息。
例如:
This article has been written by <a href="http://www.linkedin.com/in/marcocasario" rel="author">Marco Casario</a> |
| 外部 | 指示超链接指向网站外部的资源。 |
| 第一个、最后一个、上一个、下一个和上一个 | 指示超链接指向当前页面出现的序列中的第一个、最后一个、上一个或下一个资源。
up 值表示与当前文档相比的“父”文档(在层次结构中)。
例如:
<a href="/firstArticle.htm" rel="first">First Part</a> <a href="/nextArticle.htm" rel="next">Read the next article</a> <a href="/lastArticle" rel="last">Last part of this series</a> |
| 图标 | 定义表示页面或站点的图标，当在用户界面中表示页面时，用户代理应该使用该图标。
尺寸属性给出了可视媒体图标的尺寸。
比如:
`
该关键字不创建超链接。相反，它注释由元素创建的任何其他超链接。 |
| 诺弗罗 | 指示在跟随链接时不会泄露推荐人信息。
该关键字不创建超链接，但是注释该元素创建的任何其他超链接。 |
| 广播 | pingback 系统是一种当其他网站链接到博客时自动通知该博客的方式。
它允许你在有人链接到他们的文档时得到通知。
例如:
<link rel="pingback" href="pingback server url">.
更多信息参见 Pingback 1.0 规范
[hixie.ch/specs/pingback/pingback-1.0](http://hixie.ch/specs/pingback/pingback-1.0) |
| 预取 | 指示抢先获取和缓存指定的资源可能是有益的，因为用户很可能需要该资源。 |
| 搜索 | 表示引用的文档提供了一个专门用于搜索文档及其相关资源的界面。
查看此链接了解更多信息:[www.opensearch.org/Specifications/OpenSearch/1.1#Autodiscovery_in_HTML.2FXHTML](http://www.opensearch.org/Specifications/OpenSearch/1.1#Autodiscovery_in_HTML.2FXHTML) |
| 补充报道 | 指示引用的文档如果被检索，将在二级浏览上下文中显示(如果可能)，而不是在当前浏览上下文中显示。 |
| 标签 | 指示引用文档表示的标签应用于当前文档。 |
| 帮助 | 链接到上下文相关的帮助页面。 |
专家提示
当考虑网页的语义时，你不能避免考虑你的选择对搜索引擎优化(SEO)的影响。
事实上，拥有一个网页链接之间关系的语义表也有助于它们在传统搜索引擎上的定位。
谷歌没有隐藏它——恰恰相反:它鼓励在你的网页中使用语义和结构。
使用上一页、下一页、最后一页和第一页的关系，同时改进搜索和存档，意味着你可以通过将搜索引擎流量导向更连贯的内容，帮助搜索引擎正确地索引你网站的页面。
标签关系在对页面进行分类时非常有用，它通过给文档分配一个更广泛接受的类别，因此比旧的元关键字系统更有用，也更受重视。
外部关系允许你指定一个链接为“外部”，这实际上意味着告诉搜索引擎分配一个不同的权重(可能是一个较低的值)给那个特定的链接，而不是指向你的网站页面的链接。
解决方案 3-4:标题和 h 组元素
在印刷中，标题是以清晰和直接的方式传达文章和章节标题信息的基本元素。从 HTML 的早期版本开始，这也是 Web 上的一个明显需求。标题总是代表网页的一个重要的语义元素。搜索引擎也让这个标签变得重要起来。
图 3-5 显示了一个典型的网页示例，它使用标题来传达课程的标题和副标题:
图 3-5 。HTML 标题的经典用法
然而，当我们看这一页时，我们注意到除了标题之外还有一个副标题:
*主标题:*培训 html 5–2011 日历
*标题:*使用 HTML5 的下一代富 Web 应用
*字幕:*使用 HTML5 WebSocket 和通信开发实时协作 web 应用
对于以前版本的 HTML，我们只能使用<h1>到<h6>标签来区分标题和定义页面结构。如果你在图 3-5 中查看网页的源代码，你会看到下面的 HTML 代码:
`
TRAINING HTML5 - 2011 Calendar
Next-Generation Rich Web Application with HTML5
Developing real-time and collaborative web applications using HTML5 WebSocket and Communication
`您可以看到通过<h1>、<h2>和<h4>标签指定的三个头，但是从语义的角度来看，这段代码并不完全正确。实际上，副标题和主标题并不是页面的章节；相反，它们只是副标题和额外的信息。
HTML5 引入了新的标签来避免这个问题:<header>和<hgroup>。
涉及到什么
header 元素通常用于包含部分的标题，即 h1–h6 元素或 hgroup 元素。
元素包含了一节的标题。当标题有多个级别时，如副标题、可选标题或标语，它作为包装器对一组 h1-h6 元素进行分组:
`
Title
Subheading
利用这个结构，我们创建了一个带有标题(<h1>)和副标题(<h2>)的部分标题的语义表示。
还可以创建使用标题内容的嵌套部分内容元素:
`
Course Title
Course Subtitles
Course Features
Prerequisites
This HTML5 course is designed for software developers interested in designing, creating, and deploying HTML5 web applications.
Overview
HTML5 is the next major milestone in HTML, and it is not just another incremental enhancement; it represents an enormous advance for modern web applications.
如何建造它
最初，<header>和<hgroup>标签的使用可能会令人困惑，但是你所要做的就是记住:
-
<hgroup>只能包含一组<h1>到<h6>元素 -
<header>可以包含一个<h1>到<h6>元素或者一个<hgroup>
在本解决方案中，您将使用标题创建一个描述培训课程的页面，提供有关标题、副标题、简短描述的信息，以及有关日期、地点、参与者人数和持续时间的详细信息。
在下面的代码中，sectioning 内容元素中的第一个 heading 内容元素成为该节的标题。
以下是解决方案的完整代码:
`
TRAINING HTML5 - 2011 Calendar
Next-Generation Rich Web Application with HTML5
Developing real-time and collaborative web applications using HTML5 WebSocket and Communication
Rome TBC | |
HOUR: |
4 consecutive lessons. Each lesson has a duration of 8 hours, and it takes place during the hours between 9:00 a.m. and 6:00 p.m. (with a 1-hour break for lunch) |
LOCATIONS: |
Rome: via Famiano Nardini 1/c (Metro linea B, fermata Bologna) |
NUMBER OF PARTICIPANTS:
Up to 12 `您可能会注意到这个 HTML 文件与一个外部 CSS 文件相关联，该文件应用了带有<link>标签的简单样式格式。你会在有本章源代码的文件夹里找到Solution_3_9781430233862.css文件。
上述文件在浏览器中渲染的最终结果如图图 3-6 所示。
**图 3-6。**页面结构使用了<头>和<组>元素。
解决方案 3-5:将图像与其标题连接起来
传统上，每个图像都与一个标题相关联，标题可以是该图像的简短文本描述或图例。
在印刷出版行业，图像/标题对不仅仅是一种最佳实践:例如，这本书就使用了这种方法。
HTML 引入了两个新的语义元素，允许您通过将文本与充当图例的图像相关联来获得这个结果。
涉及到什么
允许您将标题与图像相关联的元素是<figure>和<figcaption>。
<figure>标签是图像的容器:
`
<img src=“http://media02.linkedin.com/mpr/mpr/shrink_80_80/p/3/000/000/3d2/0f362fd.jpg”
alt=“A photo of mine used in my LinkedIn profile”>
也可以在一个标题中嵌套多个图像:
`
<img src=“http://media02.linkedin.com/mpr/mpr/shrink_80_80/p/3/000/000/3d2/0f362fd.jpg”
alt=“A photo of mine used in my LinkedIn profile”>
![Visiting Google's![images]()
headquarters](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2F44124469126%40N01%2F5431316371%2F&pos_id=img-KXYqFdi7-1723776798731%29)
使用<figure>和<figcaption>标签的一个好处是，你可以通过外部或内部样式表对它们应用 CSS，就像你对任何其他容器标签所做的一样。
如何建造它
使用 HTML5，仔细规划网页的结构是非常重要的。有了提供给您的所有新标签，您可以为每个元素赋予明确的语义值。
这个规划阶段对图像也很重要。
在这个解决方案中，您将通过将文本指定为图像的标题来创建一个包含图片、姓名和角色的简单名片。然后你会应用一些简单的样式表，只是为了提高最终的效果，如图图 3-7 所示。
**图 3-7。**页面结构使用了<header>和<hgroup>元素
让我们从声明容器图形开始，在这里您将声明图像:
`
<img src=“http://media02.linkedin.com/mpr/mpr/shrink_80_80/p/3/000/000/3d2/0f362fd.jpg” alt=
“A photo of mine used in my LinkedIn profile”>
这张图片是从 LinkedIn 服务器加载的。使用<figcaption>标签添加标题:
`
<img src=“http://media02.linkedin.com/mpr/mpr/shrink_80_80/p/3/000/000/3d2/0f362fd.jpg” alt=
“A photo of mine used in my LinkedIn profile”>
我们使用了一个<br>来发送标题的文本作为一个新的段落；否则它会出现在图像旁边。
现在，您可以创建样式表来重新创建边框效果，定义边距，并设置图像的背景色:
img { padding:2px; border:1px solid #e6e6e6; background-color:#fff; }
最后，为容器和标题文本添加样式:
`figure, figcaption {
display: block;
background-color:#ddf0f8;
border:1px solid #666;
text-align: center;
}
figcaption {
font-face: Arial;
font-size: 12px;
font-style: italic;
background-color:#ddf0f8;
padding:2px;
min-height:10px;
margin:0 0 3px;
border:1px solid #FFF
}`
以下是该解决方案的完整代码:
`
img{padding:2px;border:1px solid #e6e6e6;background-color:#fff; margin:0 auto}
figure, figcaption {
display: block;
background-color:#ddf0f8;
border:1px solid #666;
text-align: center;
}
figcaption {
font-face: Arial;
font-size: 12px;
font-style: italic;
background-color:#ddf0f8;
padding:2px;
min-height:10px;
margin:0 0 3px;
border:1px solid #FFF
}
解决方案 3-6:添加切线内容
HTML5 引入了一系列新的标签，这些标签有助于更精确地定义网页的语义结构。根据 W3C，在这些标签中，有一个标签表示与构成文档主要文本流的内容无关的内容。这个新元素，<aside>标签，允许您将附加文本(切线)关联到一篇文章或整个页面。
涉及到什么
从<aside>标签的定义开始，我们可以推断出它有两个特征:它与主要内容相关，但只是间接相关。也可以脱离主要内容单独考虑。
为了更好地理解标签的用法，让我们回到印刷出版行业。图 3-8 显示了一个例子，在这个例子中，侧边栏元素被定义在两条水平规则中，为主文章的运行文本提供额外的信息。
**图 3-8。**右边的元素给文章增加了切题的内容。这是一个使用 side 元素的完美环境。来源:[www.bbc.co.uk/news/uk-12614995](http://www.bbc.co.uk/news/uk-12614995)
如何建造它
在这个解决方案中，您将创建一个 article 元素，它将包含来自 LinkedIn 的 Marco Casario 的个人资料中的信息，并且您将添加两个 aside 元素——一个与文章相关联，一个与页面相关联。
首先插入文章的语义元素:
`
Marco Casario Profile
Marco has been passionate about information technology since he was little more than a child and used to program games in BASIC for the Commodore 64 before dedicating himself, while still very young, to innovative projects for the web using Flash and Director. In 2001, he began to collaborate with Macromedia Italy. Since then, he has produced and headed a long series of presentations, conferences, and articles, which you can find listed in detail in his blog (casario.blogs.com), which currently receives several thousand unique visits every day.
In 2005, Marco founded Comtaste (www.comtaste.com), a company dedicated to exploring new frontiers in RIAs and the convergence between the web and the world of mobile devices. MobyMobile (www.mobymobile.com) and YouThruBiz (www.youthrubiz.com) are representative of their recent work.
Another example of Marco’s achievements is that he is founder of the biggest worldwide Yahoo Flash Lite UG and of www.augitaly.com, a reference point for the Italian community of Adobe users in which he carries out the role of Channel Manager for the section dedicated to Flex (www.augitaly.com/flexgala.)
Speaking Engagements:
FATC New York
TAC Singapore
Adobe MAX (Europe and US)
FlashOnTheBeach Brighton
FlexCamp London
MultiMania Belgium
FITC Amsterdam
360Flex
AJAXWorld Conference NY city
O’Reilly Web 2.0 Summit Berlin
Adobe MAX 2007
… and many others
`
你需要在这个内容的侧框中添加文本。这个横向框的位置和样式将由 CSS 语句定义。首先，在文章中插入一个旁白元素:
`
Marco Casario Profile
Marco has been passionate about information technology since he was little more than a child and used to program games in BASIC for Commodore 64 before dedicating himself, while still very young, to innovative projects for the web using Flash and Director. In 2001, he began to collaborate with Macromedia Italy. Since then, he has produced and headed a long series of presentations, conferences, and articles, which you can find listed in detail in his blog (casario.blogs.com), which currently receives several thousand unique visits every day.
In 2005, Marco founded Comtaste (www.comtaste.com) a company dedicated to exploring new frontiers in RIAs and the convergence between the web and the world of mobile devices. MobyMobile (www.mobymobile.com) and YouThruBiz (www.youthrubiz.com) are representative of their recent work.
Another example of Marco’s achievements is that he is founder of the biggest worldwide Yahoo Flash Lite UG and of www.augitaly.com, a reference point for the Italian community of Adobe users in which he carries out the role of Channel Manager for the section dedicated to Flex (www.augitaly.com/flexgala.)
Speaking Engagements:
FATC New York
TAC Singapore
Adobe MAX (Europe and US)
FlashOnTheBeach Brighton
FlexCamp London
MultiMania Belgium
FITC Amsterdam
360Flex
AJAXWorld Conference NY city
O’Reilly Web 2.0 Summit Berlin
Adobe MAX 2007
… and many others
插入另一个旁白元素，但这次是在文章之外。这样，内容将与整个页面相关联:
`
He is author of the following books:
- HTML5 Solutions: Essential Techniques for HTML5 Developers (Apress)
- Flex 4 Cookbook (O'Reilly)
- Professional Flash Catalyst (Wrox)
- AIR Cookbook (O'Reilly)
- Advanced AIR Applications (FOED)
- The Essential Guide to AIR with Flash CS4 (FOED)
- Flex Solutions: Essential Techniques for Flex 3 Developers (FOED)
外部 side 元素包含元素列表；也就是作者所有的书。
现在您所要做的就是创建 CSS 语句来添加一些格式和定位。
创建一个样式块，并将 aside 元素的样式插入到文章中:
`
article aside {
width: 270px;
text-align: center;
margin: 0;
padding: 0;
font-family: georgia, serif;
font-size: 140%;
letter-spacing: -1px;
line-height: 1em;
color: #555;
float: right;
}
#quote {
margin: 0 10px 0 0;
padding: 20px 20px 10px 20px;
}
#author {
margin: 0 10px 0 0;
padding: 0 0 10px 0;
color: #999;
font-size: 60%;
}
#author a {
margin: 0 10px 0 0;
padding: 0 0 10px 0;
color: #999;
}
`
保存文件并在浏览器中打开它。带有两个侧面元素的最终结果显示在图 3-9 中。
图 3-9。右边的框为文章添加了更多的内容，而底部的列表引用了整个页面。
side 元素在 web 页面的语义方面非常有用。此外，搜索引擎能够更好地索引使用这些新 HTML5 标签的页面。
总结
尽管自从 HTML 诞生以来，关于使用语义 HTML 的讨论就一直存在，但只有 HTML5 在这一领域实现了重大改进。
现在可以使用特定的 HTML5 标签来表达隐含的含义，而不是像<div>和<span>这样的 HTML 标签。事实上，HTML5 中引入了大量新元素，为网页提供了更好的定义和结构。
在本章中，您已经学习了如何使用这些技术和元素，通过微数据和词汇表为 web 页面创建语义结构，这允许您通过使用由名称-值对和现有内容组成的语法，在 web 页面中指定机器可读的自定义元素。自定义词汇表使您创建的结构能够定义名称-值对组，该组可以被其他开发人员重用，并且可以被搜索引擎识别。在本章中，您还学习了链接类型和关系。这些不仅可以让你向浏览器显示你所指向的页面或资源，还可以显示你为什么要指向它。接下来，我们介绍了 figure 容器，它将文本与作为图例的图像相关联。最后，您学习了aside元素。这个元素表示与内容无关的内容，它构成了文档的主要文本流。
在第四章中，你将学习所有 web 应用中使用的表单。
四、HTML5 表单
表单是任何需要用户输入的 web 应用的重要组成部分。
自从最初用 HTML 2.0 规范创建以来，表单已经允许我们使网页具有交互性。事实上，通过表单控件，用户可以与各种类型的信息交互并插入这些信息，然后这些信息可以被发送到服务器进行处理。
HTML 4 提供了非常基本的表单控件，通常是文本字段，大部分交互发生在服务器端。对插入到表单控件中的数据类型进行验证是使用 HTML 4 在服务器端执行操作的一个经典例子，除非使用 JavaScript 或 AJAX 框架。
有了今天的 HTML5 表单，可以更快、更有效地开发具有高级终端用户体验的应用。不幸的是，浏览器的兼容性差别很大，并不是所有新的表单元素都被支持。图 4-1 说明了在不同的浏览器和操作系统中对一些新的 HTML5 表单元素的支持:
图 4-1 。由[www.findmebyip.com/litmus/](http://www.findmebyip.com/litmus/)发布的网页设计师 HTML5 & CSS3 清单。清单显示了浏览器对一些新的 HTML5 表单元素的支持。
久而久之，浏览器支持将会越来越符合 HTML 规范，所以在我们让每个人都能看到我们的表单之前，我们需要的只是耐心。
了解新的输入类型
HTML5 表单引入了一组新的工具，使得表单开发更加容易和丰富。
以下是 HTML5 引入的一些新表单元素:
- keygen 元素
- 输出元件
- 进度元素
- 仪表元件
- 电子邮件输入类型
- url 输入类型
- 日期选择器元素
- 时间、日期时间、月和周元素
- 数字输入类型
- 搜索输入类型
- 范围输入类型
- 电话输入类型
- 颜色输入类型
除了输入类型之外，HTML5 还引入了几个可以在表单中使用的新属性，比如 list、autofocus、placeholder、required、multiple、pattern、autocomplete、min 和 max 以及 step。
甚至表单元素声明的语法也随着 HTML5 而改变。事实上，现在您可以在页面的任何位置声明一个表单元素，并通过使用元素的 form 属性与表单对象相关联:
<form id="myForm" /> <input type="text" form="myForm" />
在这个例子中，文本输入是在表单标记(称为表单所有者)之外声明的，但是它仍然与具有表单属性的myForm表单相关联。
在下面的解决方案中，我们展示了新 HTML5 表单的潜力。
解决方案 4-1:使用电子邮件输入类型
<input type="email">标签创建了一个表单元素，它期望从用户那里接收一个有效的电子邮件地址。表单控件显然不会验证电子邮件地址是否实际存在，只有当用户插入到字段中的文本使用了有效的语法时才会验证。
从用户的角度来看，在 HTML 表单中使用这种输入类型并不会改变外观。事实上，该元素在浏览器中呈现为普通的文本输入(除了 Opera，它在文本字段旁边使用一个电子邮件图标，如图 4-2 所示)。
**图 4-2。**Opera 浏览器在邮件输入类型中增加了一个小图标。
发生变化的是验证操作改为在浏览器的后台执行，如果电子邮件地址未通过验证，将返回一个错误。这种验证因浏览器而异。以 Opera 为例，在输入中包含*@就足以让它被接受；而在 Safari、Chrome 和 Firefox 中，你至少需要输入@-。-(符号@前后的一个字符和一个句点后跟一个字符)。
涉及到什么
要使用新的电子邮件输入类型，使用以下标记就足够了:
<input type="email" />
表 4-1 显示了该输入类型的有效属性列表。
**表 4-1。**电子邮件输入类型所接受的有效属性
| **属性** | **描述** | | :-- | :-- | | 名字 | 包含与此元素关联的名称/值对的名称，用于提交表单。 | | 有缺陷的 | 设置禁用的控件。 | | 类型 | 指定其 input 元素是一个控件，用于编辑元素值中给定的电子邮件地址或电子邮件地址列表。 | | 形式 | 所有表单元素的容器。 | | 自动完成 | 存储用户输入的值。 | | 自（动）调焦装置 | 一旦元素被加载，就将焦点放在元素上。 | | 最大长度 | 元素的最大允许值长度。 | | 目录 | 指定该元素表示禁用的控件。 | | 模式 | 指定用于检查值的正则表达式。 | | 只读的 | 表示其值不应被编辑的控件。 | | 需要 | 指定元素是否是必需的。 | | 大小 | 元素所表示的控件要显示的选项数。 | | 占位符 | input 元素中显示的文本(旨在帮助用户向控件中输入数据)。 | | 多个的 | 允许您为一个输入元素指定多个电子邮件或文件值。 | | 价值 | 包含电子邮件地址或电子邮件地址列表。 |如何建造它
下面的代码示例演示如何使用新的电子邮件输入类型:
`
`
Solution 4-1: Using the email input type
在创建标签表单之后，已经声明了一个fieldset标签。这个元素指定了一组表单控件，可以根据第一个legend元素给出的公共名称进行分组。
在代码示例中，fieldset的名称是:
<legend>Solution 4-1: Using the email input type</legend>
然后，为用户名和电子邮件地址声明一个输入文本。对于这两种输入类型，label元素通过for属性关联，引用输入的 id:
<label for="name">Name</label> <input id="name" name="name" type="text"/><br/> <label for="email">Email</label> <input id="email" name="email" type="email"/><br/>
表单以一个提交数据的按钮结束。
如果您在 Opera 12 中打开该文件，并且为电子邮件地址插入了一个无效值，那么当单击提交按钮时，将会返回一条错误消息并且表单不会被提交，如图图 4-3 所示。
**图 4-3。**如果电子邮件地址无效，Opera 会显示一条错误消息。
如果用户插入有效的电子邮件地址，将不会出现任何消息，表单将被提交。
在 Firefox、Internet Explorer 和 Chrome 中，不会向用户显示任何错误信息。
为了得到错误消息，我们必须等待这些浏览器的未来版本(或使用 JavaScript)才能使用这个有趣的特性，它最终将允许我们在客户端而不是服务器端验证客户端电子邮件地址。
专家提示
触摸屏移动设备(如 iPhone、iPad 和 Android OS 设备)的用户在使用电子邮件输入类型浏览网页时会有一个惊喜。
对于其中一些设备，浏览器能够识别新的 HTML5 输入类型，设备会改变屏幕键盘来帮助用户进行这种输入。这意味着更好的用户体验！
事实上，这些设备在输入文本时会在主屏幕上显示带有@和句点符号的虚拟键盘，如图图 4-4 所示。
**图 4-4。**iPhone 和 iPad 浏览器支持新的电子邮件输入类型，它显示了一个支持电子邮件的虚拟键盘。
解决方案 4-2:使用 URL 输入类型
如今，用户越来越频繁地在表单中插入网址。无论是他或她的个人网站、博客或 LinkedIn 帐户的 URL，到目前为止，这个元素通常是通过简单的文本输入来管理的。HTML5 现在引入了一种新的输入类型，通过遵守互联网地址标准来管理这种类型的文本。
目前，对 URL 输入元素的支持相当糟糕。例如，在 Opera 浏览器中，它似乎是唯一能够识别新标签的 web 浏览器，但这个元素只得到部分支持。下面是它的作用:
- Opera 会自动添加
http://后缀，即使你只是插入一个短格式的地址，比如[www.comtaste.com](http://www.comtaste.com)。 - 它显示了最近访问过的网站列表(从浏览历史)。
- 与电子邮件输入类型不同，这种类型的输入不进行验证。
- iPhone 上的 Safari 会动态显示屏幕键盘上的“
.com”按钮。 - 不支持这种输入类型的浏览器会将该元素视为普通的文本输入。
涉及到什么
要创建一个 URL 输入元素，您所要做的就是指定标签输入的属性type:
<input type="url" />
这样，URL 类型将用于包含 URL 地址的输入字段。
控件接受的数据类型是绝对 URI(统一资源标识符)。
注意:人们经常互换使用术语 URI 和 URL(统一资源定位器)。你需要知道的是，URL 是 URI 协议的子集，比如http://、ftp://和mailto:。因此，所有的网址都是 URIs。
如何建造它
从上一个解决方案中提供的示例开始，向 HTML 页面添加一个 URL 类型的输入控件。
以下是完整的代码:
`
图 4-5。 Safari 不支持 URL 输入类型，它呈现为简单的文本输入。
当你用 Chrome、Internet Explorer 或 Safari 打开该文件时，与简单的文本字段相比，你不会注意到任何区别，如图图 4-5 所示。
解决方案 4-3:使用数字微调控件
与数字打交道总是比你想象的要复杂。例如，用户可以很容易地在期望接收数字的文本字段中插入不需要的值。
一个经典的例子是电子商务网站中的数量字段。当您挑选要购买的商品并点击“添加到购物车”按钮时，系统还会要求您输入要购买的商品数量。有些网站有一个简单的数量文本字段，如图图 4-6 所示。
**图 4-6。**数量字段需要一个简单的文本输入。
用户可以在这个字段中插入任何值，那么如果用户错误地插入了一个字母或一个无效的符号会发生什么呢？
应用必须在客户端或服务器端对其进行验证，以避免传递电子商务系统拒绝的无效信息(或者发送和开具不正确数量的发票)。
有些网站，比如 Amazon，通过使用组合框控件来解决无效数据类型输入的问题，如图图 4-7 所示。
图 4-7。 Amazon 允许用户从组合框中插入数量。
HTML5 通过向工具库中添加微调控件来帮助开发人员。
一个微调控件是一个带有上下箭头的文本输入控件。结果是一个单行的文本输入，可以旋转显示文本字段中的每个数字，如图图 4-8 所示:
**图 4-8。**微调控件，由 Google Chrome 呈现
用户可以单击箭头来更改他或她想要放入表单的数值。
通过使用这个表单元素，用户在填写表单时不会出错，因为提供的数字都是有效的。
不支持这种新标签的浏览器将组件呈现为一个简单的文本字段。
涉及到什么
尽管您看到的控件具有内置的导航机制，允许用户更改文本字段中的数值(不能直接编辑)，但开发人员不必做任何事情。
您需要做的就是使用 number 值作为这个输入的类型属性，以便继承所有这些函数:
<input type="number" />
数值的增减机制会自动起作用。
有些属性允许您自定义控件。这些属性允许您设置最大值和最小值以及用于增加和减少机制的单位。这些具体特性在表 4-2 中列出。
**表 4-2。**数字输入类型接受的有效属性
| **属性** | **描述** | | :-- | :-- | | 最大 | 一个浮点数，包含要在输入标记中使用和显示的最大数值。 | | 部 | 一个浮点数，包含要在输入标记中使用和显示的最小数值。 | | 步骤 | 包含元素值的增量单位。 | | 价值 | 表示数字的字符串。 |注意:使用这些属性，开发人员可以决定数字输入元素的行为方式，以及哪些值将从控件传递到服务器。
如何建造它
创建 spinner 控件所涉及的大部分工作都是由浏览器及其对该标签的支持级别来完成的。
开发人员所要做的就是插入一个数字类型的输入。
这里有一个例子:
`
`
Solution 4-3: Using a spinner control for numbers `我们创建了一个具有以下属性的数字类型输入控件:
min="0" max="100" step="1"
这意味着当用户单击向上或向下箭头时，值将增加或减少一个单位(步长=1)，但他或她不能插入任何小于零或大于 100 的值。
该控件的呈现方式取决于浏览器。在图 4-9 中，我们展示了 Safari(左)和 Opera(右)如何显示这个对象。
**图 4-9。**数字输入类型，由 Safari(左)和 Opera(右)呈现
然而，一些平板电脑的浏览器表现不同。图 4-10 显示了基于 Android 2.2 的 7 英寸三星 Galaxy Tab 使用的浏览器如何将输入控件呈现为简单的文本输入。但是，它会动态显示数字屏幕键盘:
**图 4-10。**数字输入类型，由三星 Galaxy Tab 平板电脑呈现
专家提示
对于数字输入类型，有几个有趣的方法可以和 JavaScript 一起使用。它们是:
stepUp(n):将字段的值增加 n
stepDown(n):将字段值减少 n
valueAsNumber:返回元素的值，解释为数字
解决方案 4-4:使用范围输入类型向表单添加滑块
HTML5 提供的另一个用来处理数字和表单的有趣组件是滑块。
一个滑块组件是一个表单控件，允许用户沿着一个或两个轴在有限的范围内调整值。用户通过在对应于一系列值的轨道端点之间滑动图形滑块来选择值。
与微调器一样，该控件也有助于避免错误。
滑块在 web 应用中非常受欢迎，尤其是在配置器中，如图 4-11 所示的 Kayak.com 网站页面。
**图 4-11。**滑块控件用于帮助用户在一系列值中进行选择。
用户与 thumb 对象交互来更改输入中的数值。以 Kayak.com 为例，用户更改航空旅行的出发时间。
HTML5 之前的 Slider 创建包括为元素的用户界面设计图形元素，以及用 JavaScript 编写控件的行为逻辑。有了 HTML5，这个控件现在是浏览器的原生控件，包括与键盘用户可访问性相关的所有方面(见第十二章)。
涉及到什么
在表单中创建滑块控件的标记非常简单。您只需要将范围指定为输入类型及其属性:
<input type="range" min="1" max="10" step="1" value="6"/>
与数字输入类型一样，这些属性允许您设置最小和最大值以及用于增加和减少函数的单位。
表 4-3 列出了这些具体的属性。
**表 4-3。**范围输入类型接受的有效属性
| **属性** | **描述** | | :-- | :-- | | 最大 | 它是一个浮点数，包含要在输入标记中使用和显示的最大数值。 | | 部 | 它是一个浮点数，包含要在输入标记中使用和显示的最小数值。 | | 步骤 | 包含用作元素值的增量或减量的单位。 | | 价值 | 表示数字的字符串。 |许多浏览器的最新版本都支持这种新的输入类型:Opera、Safari、Chrome 和 Internet Explorer。
如何建造它
开发人员也不需要为这个解决方案做太多工作。或者，您可以使用<input>标记并将range值赋给type属性。浏览器会完成剩下的工作。
下面是一个完整的例子:
`
当你在浏览器中打开这个例子时，会出现如图图 4-12 所示。
**图 4-12。**范围输入类型，由 Chrome 浏览器呈现
控件输入的交互性由浏览器自动应用，用户可以使用 thumb 元素来更改值。
专家提示
HTML5 中有一个新元素可以让你显示计算结果:<output>。例如，该元素可用于显示用户在滑块中选择的数值。
在下面的示例中，我们已经更改了解决方案的代码，因此每当用户移动滑块时，选定的值都会显示在<output>元素中:
`
Solution 4-4: Adding a slider to your Form with the range input type
6
在<input type="range">标签中，我们在onchange事件中添加了以下语句，每次用户移动滑块中的 thumb 元素时都会触发该事件:
<input type="range" min="1" max="10" step="1" value="6" onchange="myOutput.value=this.value"/>
myOutput是在下面一行中声明的输出元素的名称:
<output name="myOutput"> 6 </output>
奇怪的是，iPhone、iPad 和 Android 等移动设备中的浏览器目前不支持这种表单控件；他们将其呈现为一个简单的文本框。
键盘不会为了数字输入而动态改变。
解决方案 4-5:发送多个文件
通过使用表单，特别是使用<input type = file>，已经可以将任何类型的文件从你的计算机发送到一个使用旧版本 HTML 的远程服务器。
然而，这个表单控件有一个限制，一次只能发送一个文件。如果用户想要上传一个相册并发送几张照片，开发人员必须使用其他技术，如 Flash 或 JavaScript 来提供这一功能。
现在，有了 HTML5 和附加的属性，不使用任何外部语言就可以管理一切。
涉及到什么
HTML5 为文件输入类型引入了一个新属性multiple，以提高文件上传的可用性。Multiple 是一个布尔属性，指示是否允许用户指定多个值。它是在标记输入标签内联指定的:
<input type="file" multiple />
Safari、Chrome、Firefox、Internet Explorer 和 Opera 的最新版本都支持该属性。
输入控件将根据浏览器呈现，具有简单的文本输入，在侧边具有用于选择文件的按钮(例如 Opera)，或者只有一个按钮(例如 Chrome 和 Safari)。
如果多重属性是用“添加文件”文本声明的，Opera 也会改变按钮的标签，正如你在图 4-13 和图 4-14 中看到的。
**图 4-13。**按钮的标签，在 Opera 中显示，当设置了 multiple 属性时改变
**图 4-14。**Opera 中文件输入类型的按钮标签，如果未指定 multiple 属性
其他浏览器，如 Chrome，使用与简单文件输入类型相同的按钮标签。但是，它们为用户指定了所选文件的数量(而不是它们的文件名，就像 Opera 和 Firefox 一样)，如图 4-15 所示。
图 4-15。 Chrome 渲染多属性的文件输入类型，具有相同的按钮标签，但指定了所选文件的数量
要进行多重选择，用户在点击选择文件或添加文件按钮后，使用 SHIFT 或 CTRL 或 CMD 键。
如何建造它
从技术角度来看，允许用户上传多个文件的唯一需要注意的事情是在标记文件输入类型的声明中添加 multiple 属性。
下面是一个完整的例子:
`
专家提示
用户选择的文件必须发送到服务器，并使用服务器端语言进行处理。一些编程语言，比如 PHP，需要在标签的 name 属性中添加括号来发送多个文件:
<input name="filesUploaded[]" type="file" multiple />
通过这样做，PHP 将构造一个数组数据类型，它将包含服务器上上传的文件。如果不指定括号，编程语言将按顺序处理文件，并且只提供脚本中的最后一个文件。
解决方案 4-6:使用数据列表组件创建类似建议的自动完成功能
在这个时代，任何用户都喜欢自动完成系统来帮助简化他们的 web 体验。
在过去，创建这样一个系统并不是一件简单的事情。这可能需要几个小时的工作。您可以通过搜索 Web 找到各种免费或付费的解决方案和库。
HTML5 引入了新的<datalist>标记。此标记表示一组选项元素，这些元素代表其他控件的预定义选项。因此，它可以与表单控件(如文本输入)相关联。当控件获得焦点时，它会在填充数据时向用户提供一个预定义选项的列表，并允许用户自己键入内容。
旧的浏览器，或者那些不支持数据列表的浏览器，将呈现一个简单的文本字段。
涉及到什么
要将一个<datalist>标签与一个<input>控件相关联，可以使用一个列表属性:
`
`
在上面的代码片段中，list 属性通过<datalist>标签的 id 将<input>元素链接到<datalist>标签。
一旦将 datalist 元素与输入控件相关联，就可以指定当用户选择该输入时将建议的值。要指定这些值，可以在<datalist>标签中使用<option>标签:
`
`
没有其他需要键入的内容。浏览器会完成剩下的工作。
如何建造它
下面是如何使用 datalist 元素的完整示例:
`
数据列表与文本输入相关联:
<input type="text" name="movies" list="movies"/> <datalist id="movies"> <option value="Star Wars"> <option value="The Godfather"> <option value="Goodfellas"> </datalist>
当用户在文本输入控件中插入一个值时，支持这个新标记的浏览器会在输入控件的正下方弹出一个菜单，其中包含数据列表中建议的值。图 4-16 显示了在 Opera 中实现的这一功能。
**图 4-16。**建议选项显示在输入文本框的正下方。
此外，当用户从菜单中选择一个值时，该值将显示在与onforminput事件的以下语句相关联的输出元素中:
<output name="myOutput" onforminput="this.value=movies.value" />
当表单接收到用户输入时，执行onforminput事件。最终结果如图 4-17 所示。
**图 4-17。**当用户选择其中一个选项时，该值被写入输出元素。
专家提示
为了使你的代码兼容旧的浏览器和那些不支持 datalist 的浏览器，你可以使用<select>标签。
这样，该标记将只在不支持 datalist 元素的浏览器中显示:
`
`
解决方案 4-7:验证表单控件
在本章的第一个解决方案中，我们向您展示了如何使用内置机制来验证电子邮件输入类型。这个函数是 HTML5 的新功能。
当您处理表单时，数据验证无疑是一个重要的方面，可能需要付出相当多的努力。我们经常求助于混合验证系统。使用 JavaScript 或 AJAX 框架(如 JQuery、Dojo 和 MooTools)，您可以进行客户端验证，并且可以使用服务器端语言(PHP、Python、Java 等)开发服务器端验证过程。
由于 HTML5 中插入了新的属性，您可以将一些数据验证功能委托给浏览器，并减少这类操作所需的工作量(至少从客户端来说)。
涉及到什么
一些表单控件继承了验证系统，而无需编写任何代码。在解决方案 4-1 中，我们展示了电子邮件类型文本输入的验证机制如何通过仅声明标记来自动工作:
<input type="email" />
这同样适用于 URL 和数字标记、<input type="url">和<input type="number">。
但是，有一个属性可以用来指定表单中是否存在必填字段，不能留空。
要请求这种验证，您需要在输入控件中使用required:
<input type="text" required />
该属性是布尔型的。指定时，元素是必需的。
支持此属性的浏览器会显示一条错误消息或在产生错误的字段上插入一个红色边框，并且不会提交表单。
如何建造它
对于这个解决方案，通过为三个字段中的两个添加required属性来修改解决方案 4-2 中的代码。
以下是完整的代码:
`
<input id=“name” name=“name” type=“text” placeholder=“Insert your first name” required
/>
<input id=“email” name=“email” type=“email” placeholder=“Insert your email” required
/>
如果您打开文件并尝试发送两个必填字段中没有任何数据的表单，如果必填字段为空，浏览器将不允许您提交表单，您将获得如图图 4-18 所示的结果。
**图 4-18。**浏览器显示必填字段(Opera)的错误消息。
表单可用性的一个重要方面是，必填字段必须为用户提供可视或文本提示，告知他们所需的数据。一种惯例是在必填字段旁边插入一个星号(*)。
通过使用伪类:valid、:invalid、:optional和:required，你可以用 CSS 添加一些文本和图形线索。
如果表单元素的值在提交它所属的表单之前分别是必需的或可选的，那么它就是:required或:optional。
你可以通过阅读这篇文章进一步了解这个话题:[www.w3.org/TR/css3-ui/#pseudo-validity](http://www.w3.org/TR/css3-ui/#pseudo-validity)。你所要做的就是使用这些伪类使字段更加稳定。通过添加一个<style>块来更改之前的代码，如下所示:
`
#myForm .required:after { content: " * "; color:red;}
#myForm input:required { background:red; color:white; }
<input id=“name” name=“name” type=“text” placeholder=“Insert your first name” required
/>
<input id=“email” name=“email” type=“email” placeholder=“Insert your email” required
/>
在新的样式块中，我们声明了两个 CSS 语句。第一个作用于所需的类，并用伪类:after在选择器后添加文本；在我们的例子中，标签元素旁边的一个*:
#myForm .required:after { content: " * "; color:red;}
另一方面，第二条语句在输入标记上使用所需的伪类，将背景色改为红色:
#myForm input:required { background:red; }
代码中唯一需要更改的是标记标签，您需要使用属性类将:required类与该标签相关联，因此它将插入*:
<label for="name" class="required">Name</label> <input id="name" name="name" type="text" placeholder="Insert your first name" required /><br/> <label for="email" class="required">Email</label> <input id="email" name="email" type="email" placeholder="Insert your email" required /><br/>
一旦你保存了文件并在浏览器中执行它，你会看到 CSS 伪类被应用到如图图 4-19 所示的字段中。
**图 4-19。**格式样式显示在输入字段中(显示在 Opera 中)。
专家提示
默认情况下，将自动应用 HTML5 中字段的内置验证机制。但是，在某些情况下，有必要使用 JavaScript 来创建更复杂、更健壮的验证例程。
在这种情况下，有必要覆盖浏览器的默认验证系统。
novalidate属性指定表单在提交时不应被验证:
`
Solution 4-7: Validating form controls
<input id=“name” name=“name” type=“text” placeholder=“Insert your first name” required />
<input id=“email” name=“email” type=“email” placeholder=“Insert your email” required
/>
您可以在表单级别指定该属性，如上例所示，或者在下面的<input>类型中指定:文本、搜索、URL、电话、电子邮件、密码、日期选择器、范围和颜色。
解决方案 4-8:使用正则表达式创建自定义输入类型
正则表达式提供了一种强大、简洁和灵活的方法来匹配文本字符串，例如特定的字符、单词或字符模式。正则表达式是用正规语言编写的，可以被正则表达式处理器解释，正则表达式处理器是一个程序，它或者作为解析器生成器，或者检查文本并识别与提供的规范相匹配的部分。详见维基百科:[en.wikipedia.org/wiki/Regular_expression](http://en.wikipedia.org/wiki/Regular_expression)。
HTML5 允许您检查用户的输入，并将输入值与正则表达式进行匹配。
涉及到什么
在以前版本的 HTML 中使用正则表达式需要编写的代码如下:
<input type="text" name="ssn" onblur="if (!^\d{3}-\d{2}-\d{4}$this.value) alert(this.title+'\nAn error occurred. Please verify your data.');" title="The Social Security Number"/>
在 input 元素的onblur事件上，执行一个 JavaScript 语句。它控制应用于字段中数据的模式，如果验证不成功，它会提供一条错误消息。
HTML5 提供了一个新的属性，允许您通过正则表达式将字符模式与文本输入相关联，以验证字段中插入的数据。这个标记非常简单:
<input type="text" name="ssn" pattern="(!^\d{3}-\d{2}-\d{4}$"
pattern 属性中指定的值必须与本文档中描述的 JavaScript 模式产品相匹配:[www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf](http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf)。
注意:匹配 JavaScript 模式意味着用于该属性的正则表达式语言与 JavaScript 中使用的相同，只是模式属性必须匹配整个值——而不仅仅是任何子集。(这似乎暗示了^(？:在模式的开头，a )$在结尾。)
为了向用户提供模式的描述，或者在输入无效值时在字段上提供错误报告，您可以使用属性title:
<input type="text" name="ssn" pattern="(!^\d{3}-\d{2}-\d{4}$" title="The Social Security Number" />
如何建造它
在下面的解决方案中，我们使用正则表达式来验证美国邮政编码:
(\d{5}([\-]\d{4})?)
这个表达式被插入到文本输入的pattern属性中。以下是完整的代码:
`
`
当您在支持模式属性的浏览器(如 Opera)中执行该文件时，单击表单的提交按钮，您将获得如图图 4-20 所示的结果。
**图 4-20。**使用正则表达式模式的文本输入中显示的错误消息。
浏览器提供了对与属性模式中指定的正则表达式相匹配的数据的有效性的控制。如果失败，它将返回一条错误消息。
专家提示
还不是所有的浏览器都支持这个强大的属性。幸运的是，有一个库填补了这个空白:Google 的 Web Forms 2，你可以在下面的地址找到它:[github.com/westonruter/webforms2](https://github.com/westonruter/webforms2)。
正如网站上所描述的，该项目是 WHATWG Web Forms 2.0 规范的跨浏览器实现。如果库在加载时意识到浏览器与一些新的 HTML5 函数不兼容，比如 pattern 属性，它会应用自己的方法。
您需要使用 Script 标记导入 JavaScript wbforms2_src.js 库来使用该库:
<script type="text/javascript" src="YOUR_FOLDER/webforms2_src.js"></script>
同样重要的是，webforms9781430233862.css 和 webforms2-msie.js 与 webforms2.js 或 webforms2-p.js(无论您决定使用哪个)位于同一目录中。
该实现已经过测试，应该可以在以下浏览器中工作:
- Mozilla Firefox 1.0.8
- Mozilla Firefox 1.5.0.9
- Mozilla Firefox 2
- Internet Explorer 6
- Internet Explorer 7
- 野生动物园 2.0.4
- Safari 3 (Windows)
- Opera 9(本地实验实现)
解决方案 4-9:在输入字段中设置占位符文本
可用性是 web 应用，尤其是表单的一个微妙且非常重要的方面。当用户输入数据时，开发人员试图通过最小化错误的可能性来使用户对表单的体验尽可能平滑。一个简单但有效的技巧是在输入字段中放置文本，为用户提供提示。
图 4-21 显示了 Opera 搜索栏中的“使用 Google 搜索”提示文本。
**图 4-21。**Opera 搜索栏使用“用谷歌搜索”文本作为对用户的提示。
即使在过去创建这种功能很简单，您仍然必须使用 JavaScript。
HTML5 引入了一个与输入控件相关联的新的智能属性，它可以在输入字段中插入文本，但是如果字段获得焦点，文本就会消失；如果字段失去焦点，文本就会重新出现。所有这些都是在没有 JavaScript 代码的情况下完成的。
涉及到什么
允许您实现该功能的属性是placeholder。在 web 表单中使用占位符文本非常容易:
<input type="text" placeholder="Insert your first name"/>
不支持该属性的浏览器将会忽略它，并且在字段中不显示任何内容。
该属性仅允许您管理简单文本—不允许换行(LF)或回车(CR)字符，因此您不能使用 HTML 标记或图像。
如何建造它
在这个解决方案中，我们对解决方案 4-2 的代码做了一些小小的修改，在输入字段中添加了placeholder属性:
`
`
`
Solution 4-9: Setting placeholder text in an input field
专家提示
如果您阅读了关于这个属性的规范(在这个 URL: [www.w3.org/TR/html5/common-input-element-attributes.html#the-placeholder-attribute](http://www.w3.org/TR/html5/common-input-element-attributes.html#the-placeholder-attribute))，您将会了解到一个可用性建议是将title属性用于更长的提示或其他建议文本。
解决方案 4-10:创建日期和时间控件
日期和时间经常在表单中使用。如果你想一想我们使用这些数据的频率，用不了多久就会意识到，它们的准确有效使用可以帮助决定整个网站的成败。你觉得我夸张了？
考虑预订航班。您在该查询的典型表单中插入的信息是:出发机场、到达机场、出发日期、返回日期以及出发和返回航班的首选时间。
所以想象一下，拥有一个可以帮助用户准确插入日期和时间信息的表单，减少甚至排除错误的可能性，是多么重要。
我最喜欢使用的预订航班的网站之一是 Kayak.com，它有一个非常高效的航班搜索系统(被大多数旅游网站使用)。从图 4-22 中，您可以看到一旦选择了出发或返回字段，一个日期选择器就会出现在您的表单顶部，并允许您选择日期。
**图 4-22。**日期选择器允许用户从日历中插入日期，以避免键入错误。
此外，还必须考虑到日期格式会因国家而异。美国和英国等盎格鲁-撒克逊国家使用月-日-年格式，而大多数欧洲国家使用日-月-年格式。
Web 开发人员在使用 JavaScript 控件开发日期选择器函数时会考虑到这些问题，这些控件可以在最常见的 AJAX 框架中找到(或者从 Web 上的各种 JavaScript 库中找到)。
HTML5 引入了一系列标记来处理日期，将管理日期和时间的艰巨任务留给了浏览器。
涉及到什么
HTML5 引入了许多不同的输入类型来处理日期/时间选择器:
<input type="date" /> <input type="time" />
日期类型创建一个带有内置机制的日期选择器，通过浏览日历来选择数据，如图图 4-23 所示。
**图 4-23。**一个日期控件，由浏览器呈现(显示在 Mac OSX Safari 中)
包含小时、分钟和秒分隔符的输入类型时间文本输入如图 4-24 所示。
**图 4-24。**一个时间控件，由浏览器呈现(显示在 Mac OSX Safari 中)
还有其他处理日期和时间的控件。
timedate类型表示将元素的值设置为表示全球日期和时间(带时区信息)的字符串的控件。
此外，您可以允许用户选择一个值，即一个month或一个week，而不是一个完整的日期。事实上，有周和月输入类型:
<input type="month" /> <input type="week" />
如何建造它
下面是一个完整的例子，它使用了 HTML5 提供的所有日期和时间输入类型:
`
`
`
Solution 4-10: Creating Date and Time Controls
`
总结
所有的 web 应用都使用表单。事实上，表单是任何需要用户输入的 web 应用的重要组成部分。
HTML 版本 4 提供了相当基本的表单控件，大部分是文本字段。此外，大多数交互都发生在服务器端。插入到表单控件中的数据类型的验证是 HTML 4 中在服务器端执行的操作的一个经典例子，除非它们使用 JavaScript 或 AJAX 框架。
在这一章中，你已经了解了使用 HTML5 表单，现在可以更快更有效地开发具有高级终端用户体验的应用。在第五章中，你将学习如何使用新的 HTML5 音频和视频标签在网页中嵌入视频。
上一篇： CSS3 动画高级教
下一篇： HTML5 解决方案