Document

HTML5 和 CSS3 Web 演化入门指南（一）

2024-08-16
dfer
86
VKDoc CSDN

原文：Beginning HTML5 and CSS3 The Web Evolved

协议：CC BY-NC-SA 4.0

零、简介

这本书是给谁的？

【HTML5 和 CSS3 入门:Web Evolved 面向任何具有 HTML 和 CSS 基础知识的人。如果你最近刚刚涉足 HTML 或 CSS 的世界，或者如果你已经开发网站很多年了，这本书会有适合你的内容。然而，如果你已经玩过 HTML5 和 CSS3，但还没有完全理解它所提供的一切，你将会从这本书中获得最大的收获。这本书充满了实用的、真实的建议和例子，可以帮助你掌握现代网络标准。

这本书的结构是怎样的？

这本书分为两大部分。前六章介绍 HTML5，后七章介绍 CSS3，并展望 Web 标准的未来。

在第一部分，我们将看看 HTML5 从何而来，以及如何从 HTML4 过渡到 HTML5。然后，我们将向您展示如何创建 HTML5 样板文件。接下来将介绍新元素、属性和输入类型，然后讨论一些新的、闪亮的 HTML5 API。

在本书的第二部分，我们将学习 CSS 的历史，并了解一些 CSS 的基础知识。然后我们将介绍新的 CSS 选择器，布局模块和技术。然后，在引导你完成 CSS 过渡、转换和动画之前，我们继续看网页排版、新的 CSS3 属性等等。

这本书以对 CSS 和 web 标准的未来的展望结束，展示了未来几年我们可能在你身边的浏览器中看到的东西。

如果你想跟随书中的例子，下载你可能需要的作业文件，你可以从thewebevolved.com下载

这本书可以从头到尾读一遍，也可以放在你的电脑上作为现代提示、技巧和技术的参考。选择权在你。

本书中使用的惯例

这本书使用了几个值得注意的惯例。本书中使用了以下术语:

HTML 既指 HTML，也指 XHTML 语言。
除非另有说明， CSS 涉及 CSS 3 规范。
现代浏览器被认为是 Firefox、Safari、Opera 以及 IE 9 及以上版本的最新版本。

假设本书中的所有 HTML 示例都嵌套在有效文档的中，而 CSS 包含在外部样式表中。为了简洁起见，HTML 和 CSS 偶尔会放在同一个代码示例中。然而，在一个真实的文档中，这些项目需要放在它们各自的位置才能正常工作。

`p {color: red;}

I’m red

最后，对于包含重复数据的 HTML 示例，省略号(.。。)用于表示代码延续:

Red
Yellow
Pink
Green
…

手续办完了，我们开始吧。

一、现在，而不是 2022 年

恭喜你，你已经到达第章第一章！你的网络进化之旅即将开始。这一章确立了基本原则。它的焦点，以及本书前半部分的其余部分，主要是 HTML5。我们将讨论 HTML5 是如何产生的，它旨在解决什么问题，什么设计原则指导了它的开发，以及它带来了什么新特性。我们也将揭穿一些 HTML5 的神话。然而，我们将从我们在 web 开发工作中遵循的基本原则开始，为什么标准如此重要，以及为什么我们应该努力使我们的标记普遍可访问并且制作精良。

这是一个跌宕起伏的过山车，但它是一个令人兴奋的旅程。事不宜迟，让我们开始吧…

基本原则

本书中的信息建立在一些坚定的原则之上:开放网络标准的重要性，结构良好的语义标记的工艺，以及对编写良好的 HTML 是设计过程的一部分的坚定信念。我们的固体 HTML 结构应该用 CSS 来设计(当我们在本章后面讨论层的分离时，我们将会谈到这种方法)。

一种 web 标准方法

向标准驱动的 Web 的发展在很大程度上要归功于 Web 标准项目，或 WaSP ( [j.mp/webstandardsproject](http://j.mp/webstandardsproject)<sup>1</sup>)。在 90 年代后期，Internet Explorer 和 Netscape 在一个被称为“浏览器战争”的时期为获得网络霸权而战这是一个可怕的时代，因为这些竞争对手试图通过推出无数跨浏览器不兼容的新功能来赢得用户。结果是网站要么只能在一个浏览器上运行，要么有两个不同的版本来支持两个主要的玩家。这对网络开发者来说是一场噩梦，它伤害了用户。

WaSP 成立于 1998 年，致力于跨不同浏览器的标准实现和基于标准的网页设计方法。其目的是降低 web 开发的成本和复杂性，并通过使 web 内容在各种设备和辅助技术之间更加一致和更加兼容来提高网页的可访问性。他们游说浏览器和工具供应商改善对万维网联盟(W3C)推荐的 web 标准的支持，如 HTML 和 CSS。

注意:万维网联盟(W3C)是一个国际组织，它制定标准以确保网络的长期发展。用它自己的话说，“W3C 的使命是通过开发协议和指导方针来确保万维网的长期发展，从而使万维网发挥出最大的潜力。”

他们取得了很大的成功。跳到现代，web 标准在所有主流浏览器中都得到了一致的实现。尽管偶尔仍会出现一些奇怪的浏览器行为，但已经比以前好多了。现在让我们简单看看什么是 web 标准。

什么是 web 标准？

我们每天都在使用标准，却常常没有意识到这一点。例如，当我们购买灯泡时，我们知道如果我们购买旋入式或卡口式灯泡，当我们把它带回家时，它将适合我们的灯具。标准确保我们购买的灯泡不会太大或太宽，不适合我们的灯具。标准就在我们身边:看看你家里的插头，你的电器的额定功率，以及我们社会中所有事物使用的时间、距离和温度测量。

网络标准也是从同样的原则出发的。随着浏览器制造商和 web 开发人员逐渐接受标准，编写特定于浏览器的标记的需求已经减少。通过使用结构良好的 HTML 来标记内容，使用 CSS 来控制表示，我们现在应该能够设计出一个不管使用什么操作系统，都能在符合标准的浏览器上一致显示的网站(尽管偶尔的怪癖仍然存在)。同样重要的是，当相同的标记由功能较弱、不符合标准的浏览器(在较旧的基于文本的浏览器或移动浏览器中)呈现时，内容仍应保持可访问性。作为设计师，网络标准节省了我们的时间，让我们可以安心地在晚上睡觉，因为我们知道，无论谁在哪个浏览器和哪个平台上观看，我们精心制作的杰作都是可以访问的。

注意:我们所说的标准被 W3C 正式称为“建议”。它们是 web 技术应该工作的推荐方式。法律上没有强迫浏览器和工具供应商采用它们；相反，采纳是为了网络的利益和每个人的共同利益。

为什么要使用 web 标准？

也许一个更好的问题是，“为什么要忽略网络标准？”采用 web 标准方法的好处如此引人注目，为什么不使用它们呢？

使用 web 标准的好处包括:

减少开发时间:你可以建立一个可以在所有平台、浏览器、设备等上运行的网站。如果没有标准，你可能不得不为每个浏览器开发不同的站点，等等。
创建易于更新和维护的站点:根据 web 标准和最佳实践，例如，您可以更新单个 CSS 文件来改变包含许多 HTML 页面的整个站点的样式。在这成为规范之前，我们习惯于将样式信息放在 HTML 中，这意味着改变每个页面上的信息。这确实是重复和不方便的。
提高搜索引擎排名:HTML 内的内容是基于文本的，因此搜索引擎可读。此外，写好的文案和恰当地使用语义 HTML(比如标题)可以给恰当的关键词更多的权重，让你的页面在谷歌排行榜上迅速蹿升。
提高可访问性:精心编写的 HTML 和 CSS 使网站更容易被不同的用户群访问，如残疾人、使用移动设备的人、低带宽连接的人等。

既然我们已经清楚地了解了 web 标准方法的主要好处，那么让我们来看看我们将在本书中深入探讨的两个原则:语义标记的重要性和臭名昭著的 web 琐事。

语义标记

我们相信语义标记的重要性(有时称为 POSH，意为普通的旧式语义 HTML)。我们认为 HTML 是一个设计元素，在添加表示层(增强底层标记)之前，关注于构建结构良好的内容的坚实基础是很重要的。

语义标记是自描述的，并为正确的工作使用正确的 HTML 元素。例如，您可以标记这样的标题:

<div id="heading" style="font-size:300%; padding: 10px;">My heading</div>

当然，它看起来像一个标题，但就意义或目的而言，它不会起到标题的作用。因此，它会对搜索引擎优化(标题中的关键字权重更大)、可访问性(屏幕阅读器使用标题元素作为导航路标)、开发(当您不使用正确的语义元素时，使用样式和脚本来定位元素要复杂得多)等等产生负面影响。

最好使用适当的元素，就像这样:

<h1>My heading</h1>

语义标记也应该尽可能的轻量级，这意味着移除所有嵌套的<divs>和其他意大利面条式的代码。这使得文件更小，编码更容易。

既然我们已经理解了打造一个坚实的 HTML 基础的重要性，那么是时候了解一下 Web 琐事了。

网络琐事:分离这些层

每个人都喜欢蛋糕，尤其是在圣诞节。

安迪·克拉克在 2005 年写的《Stuff & ningness》([j.mp/stuffandnonsense](http://j.mp/stuffandnonsense)<sup>2</sup>)一书中，将这种不起眼的蛋糕比喻到了一个新的高度，他用它来描述“网络标准蛋糕”，这是一种由海绵、水果果冻、奶油冻、奶油和最重要的浇头组成的令人兴奋的混合物。可以在[j.mp/standardstrifle](http://j.mp/standardstrifle)<sup>3</sup>看他的原帖。其中大部分至今仍然适用。

他所说的本质是你应该将你的数据结构、样式信息和脚本/行为分离到不同的层中。

语义 HTML 提供了数据结构，即一组清晰、易于访问的内容。HTML5 很好地提供了这一点。您应该尽可能地使这些数据易于访问和使用，而不需要任何脚本增强样式。
CSS 提供了样式信息，它获取我们的数据并给出我们想要的可视化表示。CSS3 比它的前身 CSS2 提供了更强大的工具。
JavaScript(包括 HTML5 和其他地方定义的基础语言和脚本 API)提供了脚本/行为层，为我们的站点增加了可用性增强和更丰富的功能。

网页设计之道:拥抱不确定性

浏览器的格局正在迅速演变。然而，与浏览器大战的西部时代不同，今天的格局正在演变并向标准靠拢。Firefox、Safari、Opera、Chrome，当然还有我们的老朋友 IE，都在朝着支持 HTML5、CSS3 等所有新标准特性的方向前进——诚然速度不同。许多 web 开发人员也在向 web 标准及其相关的最佳实践转移，尽管许多人已经落后了。

但是我们现在要担心一种新的不确定性:我们不再仅仅支持桌面浏览器。通过移动设备、平板电脑、电视、游戏机等在旅途中访问网络的人数正在快速增长。苹果的 iPhone 和 iPad、谷歌的 Android 设备、黑莓、Wii、DS 以及飞利浦和索尼的网络电视等设备的激增，已经让位于在移动中、在客厅中和离开办公桌时访问网络的人数的显著增加。

Opera Mini(世界上最受欢迎的移动浏览平台之一)的创造者 Opera 报告称，在旅途中浏览网页的用户数量同比(和环比)显著增长。随着智能手机不可阻挡的崛起，这一数字看起来将呈指数级增长。

有了这么多不同的设备来消费网络内容，准确预测你的网站在所有用户设备上看起来会是什么样子变得越来越困难。我们需要拥抱不确定性，设计灵活的网站来适应不同的浏览环境，而不是沉迷于拥有像素级的完美控制。

这绝不是一个新的想法。约翰·奥尔索普的《网页设计之道》(The Dao of Web Design)早在 2000 年就在一个列表上发表，强调了网页设计师学会放手、学会适应网络的复杂性和不可控性、接受缺乏控制的重要性，这是我们为之设计的复杂的网页交付世界的固有部分。为网页设计时起作用的变量加下划线(屏幕尺寸、分辨率差异、显示器深度、安装的字体等。)，奥尔索普在世纪之交鼓励网页设计师拥抱网页设计固有的不可预测性，为缺乏印刷媒体精确控制的网页进行设计。

他鼓励网页设计师透过“显微镜的另一端”来观察，将印刷设计的“控制”重新定义为“限制”，指出“我们可以控制纸张页面的事实实际上是这种媒介的限制。”再读一遍。这是一个微妙但重要的观点。

快进到今天，这种观点并不罕见。如今，越来越多的人庆祝网络的流动性。你仍然会在网上遇到许多痴迷于打印设计像素完美的设计师和客户，但更容易说服他们流动的方式是正确的，特别是现在浏览设备比以往任何时候都更加多样化。

丹·塞德霍尔姆 2007 年的网站《网站需要在每种浏览器中都看起来一样吗？》(图 1-1 )明确地回答了这个问题，并坚决地说“不！”

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

**图 1-1。**网站需要在所有浏览器中看起来都一样吗？不要。

正如奥尔索普所说，网页设计师不是控制者，网页也不是印刷品。这是一个根本性的转变。对于习惯了印刷世界典型的固定参照系的设计师来说，这可能需要很长时间来适应。奥尔索普重申，“作为设计师，我们需要重新思考这个角色，放弃控制，寻求与页面的新关系。”

反思控制的缺失；不要再把它视为弱点，而要把它视为优点。这是奥尔索普作品的关键点。正如他所说，“制作适应性强的页面。”为什么呢？因为适应性强容易接近。正如奥尔索普所说，想想“设计通用页面”

下一句话强化了我们之前所说的语义 HTML:“如果 HTML 提供了合适的元素，就使用它。如果没有，就使用类。”很简单。尽管许多懒惰的设计者倾向于过度依赖不必要的类属性，但 HTML 是一种丰富而全面的语义语言，所以我们应该充分利用它。

而且，当我们在接下来的章节中研究 HTML5 时，我们会看到，有更丰富的语义元素供我们使用，因此将来需要更少地依赖类。如果有的话，我们的任务看起来变得更容易。美好时光！

无障碍

可访问性，有时缩写为 a11y(一个数字或基于数字的单词:“a，然后是 11 个字母，然后是 y”)，应该是我们方法的基础。拥抱网页设计之道带来了许多好处，包括对更广泛、更多样化的受众的更广泛的可访问性。

关键是要考虑不同的用户如何使用网络。有些人就像你一样使用它。有些人使用不同的设备或网络连接速度较慢。有些人只用键盘。有些人使用屏幕阅读器为他们朗读网页。有些人听不到音频内容。无论你做什么，都要熟悉不同的网络用户群体。不要假设其他人都像你一样使用网络。

我们认为可访问性是一件好事，所以当我们强调 HTML5 给可访问性带来的一些好处(和潜在的缺陷)时，不要感到惊讶。

制作你的标记

我们坚信网页设计和网页开发中工艺的重要性。关注细节很重要，为自己的工作感到自豪也很重要，即使是在编写标记的时候。

在他的优秀著作《工匠》中，理查德·塞尼特写到了参与创建 Linux 的工匠，强调他们的重点是“实现质量[和]做好工作。”更接近网页设计的世界，丹·塞德霍尔姆在手工制作 CSS 说

细节并不总是显而易见。一件制作精良的家具，直到你开始使用它，你才可能注意到它制作得有多好。例如，拉出抽屉，注意燕尾接合。

所有这些都与网页设计有关。看似不明显的细节往往可以区分好的网页设计和伟大的网页设计。你可能不会欣赏一个设计良好的网站的质量，直到你开始使用它，查看它的内部，进行测试。

我们完全同意塞德霍尔姆先生的意见。好的网页内容和伟大的网页内容之间的区别在于工艺，花额外的时间去打点细节——注意细节。

随着网页设计世界的发展，我们越来越多地发现自己与他人合作，在团队中工作。一种可靠的、精心制作的标记方法——基于一致同意的规则和标准——可以极大地增强协作，简化过程，并且(我们甚至可以说)使之更令人愉快。

我们认为工艺很重要，我们相信您也是如此。

html 5 是如何创建的？

你可能会问自己，我是怎么走到这一步的？

-会说话的头，“一生一次”

HTML5 只是 HTML 发展过程中的一个点，HTML 的发展经历了不同规范的各种风格。尽管它们可能在细节上有所不同，但每种风格的 HTML 都有一个基本的共同点:HTML 是一种标记语言。

是的，HTML 4.01 和 XHTML 1.0 可能在编码风格上有所不同，但它们有着共同的目标。由于支持他们的两个阵营意见不同，而且经常强烈表达意见，因此很容易忽略共同点。

HTML5 在许多方面代表了所有领域中最好的，并且加入了大量新的潜力，稍后您将会看到。在我们介绍 HTML5 和它的不同方面之前，让我们简单回顾一下我们是如何发现自己现在所处的位置的。

超越 HTML 4…

HTML4 没毛病，真的。这是一个非常好的规范，而且这项技术非常适合完成它最初的目标:标记静态文档以及它们之间的链接。但是事情从来不会静止不动。Web 开发人员并不乐意在他们的余生继续制作静态文档。他们希望制作更像应用而不是页面的动态网站，并开始使用 PHP、JavaScript 和 Flash 等技术来实现这一目标。

因此需要进化。

注意:Flash 最初流行是因为跨浏览器 web 标准支持在 90 年代末非常糟糕，Flash 插件提供了一种使内容在不同浏览器间表现一致的方法。此外，Flash 允许 web 开发人员在 Web 上制作动画和视频。当时，Web 标准没有支持这一点的工具。

XHTML 1.0

事实上，早在 1998 年，大约是 HTML4 规范接近完成的时候，W3C 决定将网络转向 XHTML 而不是 HTML(见 [j.mp/futuremarkup](http://j.mp/futuremarkup)<sup>4</sup>)。然后，他们在 HTML4 下划了一条线(上一个版本实际上是 4.01，其中包括一些错误修复等)，而是专注于 XHTML1.0 规范。

在 2002 年 8 月，W3C 评论说

XHTML 家族是互联网发展的下一步。今天，通过迁移到 XHTML，内容开发人员可以带着所有附带的好处进入 XML 世界，同时仍然对其内容的向后和未来兼容性充满信心。

有了这个号召，当考虑如何最好地发展 HTML 时，W3C 最初支持 XHTML 就不足为奇了(注意“最初”这个词)。XHTML1.0 似乎是明智之举。它基本上只是 HTML4 重新表述为 XML 词汇表，带来了更严格的 XML 语法规则(例如，属性值必须用引号括起来，元素需要用引号括起来)。目标是更好的质量，更有效的标记。

XHTML 2.0 与反冲

然而，W3C 的下一步行动并不顺利。XHTML 的下一个版本 XHTML2.0 是用一种有点乌托邦的方法创建的。它包含了一些很棒的想法，是一个写得很好的规范，但是它并没有反映出 web 开发人员在 Web 上实际做了什么。这更像是 W3C 希望他们做的事情。

此外，它不能向后兼容网络上已经存在的内容。许多功能的工作方式不同；例如，XHTML mimetype ( application/xhtml+xml)根本不能在 IE 上工作，可用的开发工具也不能处理 XML

社区对此感到沮丧，并出现了反弹。最引人注目的是，在 2004 年，一群志同道合的开发人员和实现人员(包括来自 Opera、Mozilla 以及后来的苹果公司的代表)联合起来，成立了一个名为 WHATWG ( [www.whatwg.org](http://www.whatwg.org))的叛逆者规范小组，旨在编写一个更好的标记规范，为创作新型 web 应用提供一组更有效的功能，并且不破坏向后兼容性，这一点至关重要。

WHATWG 创建了 Web 应用 1.0 规范([j.mp/webappliactions1](http://j.mp/webappliactions1)<sup>5</sup>)，该规范记录了现有的可互操作浏览器行为和功能，以及开放 Web 堆栈的新功能，如 API 和新的 DOM 解析规则。经过 W3C 成员之间的多次讨论，2007 年 3 月 7 日，一个新的 HTML 工作组在一个开放的参与过程中重新开始了 HTML 的工作。HTML WG 的第一个决定是采用 Web 应用 1.0 规范，并将其命名为 HTML5。

WHATWG 和 W3C 现在开发了 HTML5 规范和两个不同的规范。

⁴

⁵

WHATWG HTML 规范([j.mp/html5-current](http://j.mp/html5-current)<sup>6</sup>)是一个供贡献者快速创建和开发创新功能的地方，远远早于它们可能成为官方推荐。请注意，版本号已被删除；这是一个生活标准，将作为一个独立的实体继续发展，不受版本控制。
W3C HTML5 规范([j.mp/w3c-html5](http://j.mp/w3c-html5)<sup>7</sup>)记录了最稳定、公认的特性。这个版本描绘了一幅更真实的画面，显示了我们在浏览器中哪些功能最完整，最有可能得到支持。

直到最近，谷歌的伊恩·希克森还是这两份规范的编辑。他有点像一个“仁慈的独裁者”，并不是每个人都同意他的工作方式。但是他做了一件令人钦佩的工作，处理他收到的关于规格的所有反馈，并总体上保持事情正常——对于如此庞大的文档来说，确实不是一件容易的任务。

注意:开放标准的美妙之处在于任何人都可以在他们的开发中有发言权，并提供反馈。如果你想参与进来，加入 W3C HTML 工作组([www.w3.org/html/wg](http://www.w3.org/html/wg))和/或 WHATWG ( [www.whatwg.org](http://www.whatwg.org))并加入邮件列表、IRC 频道等的讨论。

HTML5 前进！

HTML5 在 XHTML2.0 失败的地方取得了成功，因为它的开发考虑到了当前和未来的浏览器开发以及过去、现在和未来的 web 开发工作。结果，它获得了巨大的动力。在实用主义的驱动下，它已经成为 W3C 加速开发的选择。约翰·奥尔索普总结得很好:

网络继续教给我们的一个教训是，比起理论上的完美，它更重视实用性的发展。

HTML5 是向后兼容的。它包含了 HTML4 规范的所有特性，尽管有一些变化和改进。但它也包含了更多构建动态 web 应用和创建高质量标记的额外内容，例如:

新的语义元素允许我们明确地、语义地定义标记的更多部分，而不是使用大量的类和 id。
用于向我们的站点添加视频、音频、可脚本化的图形和其他丰富的应用类型内容的新元素和 API。

⁶

⁷ [www.w3.org/TR/html5/](http://www.w3.org/TR/html5/)

我们已经以定制的方式构建的标准化功能的新特性。服务器发送的更新和表单验证立即浮现在脑海中。
新功能填补了开放标准中传统功能的空白，例如定义浏览器应如何处理标记错误，允许 web 应用离线工作，允许我们使用始终打开的套接字连接进行应用数据传输，以及音频、视频和可脚本化的图像(canvas)。

HTML5 是特意构建来与 Flash 和 Silverlight 等专有插件竞争的。看起来这些技术越来越退居二线了。正如你在阅读这本书的过程中所看到的，许多 HTML5 在所有现代浏览器上都有很好的支持，因此现在可以在你的生产项目中使用。通过一点 JavaScript 哄骗，它甚至可以在旧的浏览器上工作。

HTML5 太酷了，甚至有了自己的 logo 参见[j.mp/html5-logo](http://j.mp/html5-logo)<sup>8</sup>。W3C 的宣传活动是众多活动之一(苹果、微软和其他公司也提供了类似的推广活动),旨在让开发人员对采用这种新语言感兴趣，并将 HTML5 作为一个流行词和一套技术进行推广。

这些计划的大部分问题在于它们在定义 HTML5 方面令人困惑。如果你看一下刚刚提到的 W3C 页面，你会看到它列出了许多不同的技术作为 HTML5 的一部分，包括许多实际上不属于 html 5 的技术(CSS3 和 SVG 是最突出的例子)。CSS 和 SVG 是和 HTML 完全不同的技术，目的完全不同！我们想建议你注意不要在交谈中混淆不同的技术，因为这会使交流更加困难，尤其是当你与网络团队中技术含量较低的成员(如项目经理和营销人员)交谈时。

所以，现在我们知道浏览器支持是存在的，我们已经介绍了导致 HTML5 出现的一些历史。让我们来看看指导规范开发的一些原则。我们已经提到了其中的一些，但是现在让我们更详细地讨论一下。

HTML5 设计原则

HTML5 受许多设计原则的指导，这些原则旨在支持现有内容，同时为新的标记方法铺平道路。其中，W3C 将这些原则定义如下:

确保支持现有内容。
在旧浏览器中优雅地降级新功能。
不是重新发明轮子。
铺设牛道。
进化，而不是革命。
实现普遍接入。

⁸

与 XHTML 2.0 不同，HTML5 采用了一种实用的标记方法，比起 XHTML 2.0 的开发者所采用的乌托邦式的方法(最终导致其灭亡的方法)，它更喜欢“真实世界”的方法。这种实用的方法让我们现在就可以使用 HTML5，因为我们知道它在设计时就考虑到了未来的发展。

让我们看看 W3C 在“HTML 设计原则”([j.mp/html-design-principles](http://j.mp/html-design-principles)<sup>9</sup>)中概述的一些原则，并解释它们在实践中的意义。

支持现有内容

网络在 2011 年庆祝了它的 21 岁生日。它惊人的增长速度在历史上是无与伦比的，已经产生了数十亿的网页。HTML5 开发的核心是支持所有这些现有内容的重要性。

HTML5 并不是要清除旧的并用新的东西完全取代它。这是关于保持我们已经拥有的，并在顶部添加增强功能。考虑到这一点，W3C 声明

基于现有浏览器的行为，应该可以将现有的 HTML 文档作为 HTML5 来处理，并获得与用户和作者的现有期望相兼容的结果。

简而言之，随着 HTML5 的普及，将会考虑如何处理使用旧版本 HTML 设计和开发的现有内容。

优雅地降级

为了支持现有内容，随着 HTML5 的发展，W3C HTML 设计原则确保考虑旧浏览器如何处理新元素。考虑到这一点，W3C 声明

html 5……应该设计成即使在使用新元素、属性、API 和内容模型时，web 内容也能在旧的或能力较弱的用户代理中优雅地降级。

这一原则的一个关键部分在于考虑“旨在满足特定需求或解决专门市场的用户代理，如辅助技术”，从而帮助和改善可及性。不是坏事。

⁹

不要多此一举

正如你将在第三章中看到的，当你了解 HTML5 引入的新元素是如何命名的，HTML5 的设计考虑了以前已经发生的事情。W3C 非常强调不要重新发明轮子，或者不那么正式地说，“如果它没坏，就不要修理它。”

W3C 声明

如果已经有一种覆盖特定用例的广泛使用和实现的技术，考虑指定该技术，而不是出于相同目的发明新的技术。

如果你已经在 web 上工作了一段时间，并且接受了 Web 标准，这意味着——从设计上来说——你习惯的大部分内容已经影响了 HTML5 的开发，你不需要重新学习所有的东西。

铺牛腿

铺路？牛仔？

本质上，这句话的意思是，如果一条路径或一种工作方式已经自然发展，并在开发人员中广泛使用，那么使用它比替换它更好。接受并采用官方规范中事实上的标准。同样，当我们查看 HTML5 中引入的新元素名称的来源时，我们将在第三章中看到这个设计原则是如何被付诸实践的。

进化，而不是革命

正如 W3C 所说，

革命有时会让世界变得更好。然而，大多数情况下，改进现有的设计比抛弃它更好。这样，作者就不必学习新的模式，内容会活得更久。

实际上，这意味着现有的设计人员和开发人员不需要重新学习所有的东西。这又是一件好事。

所以现在我们知道谁在推动 HTML5 和指导原则的发展。是时候用一个流言终结来结束这一章了。

关于 HTML5 的十几个神话

现在，您已经有了 HTML 的简史，我们也介绍了 HTML5 的开发背景，是时候消除一些神话和驳斥一些谎言了。HTML5 受到谣言的困扰，但很多都是完全不真实的。让我们打破一些神话。

1。浏览器不支持 HTML5

关于 HTML5 的一个误解是，浏览器对 HTML5 的支持太不可预测，所以现在不能开始使用该规范。正如我们之前所说，情况并非如此。自 2010 年以来，HTML5 书籍的激增——由各种受尊敬的作者撰写——清楚地表明浏览器支持是存在的，HTML5 的时代是现在，而不是 2022 年。

当像新闻周刊([newsweek.com)](http://newsweek.com)))和 YouTube ( [youtube.com](http://youtube.com))这样的主流网站开始全心全意地拥抱 HTML5 时，显然你也可以。(毕竟这就是你看这本书的原因！)

2。好吧，大多数浏览器支持 HTML5，但 IE 肯定不支持

考虑到我们的好朋友 IE 在涉及到所有与标准相关的事情时的历史特质，你可能会原谅这种想法。然而，这一次，这不是真的。在 2010 年 6 月回顾 IE9 时，网络标准项目声明

到目前为止，我们印象深刻。IE9 真的把经常被诽谤的浏览器和其他浏览器放在了一起，甚至在某些情况下给了他们优势。向 IE 团队致敬，这是伟大的工作。

当 IE 被挑出来表扬的时候，你就知道他们在变。IE9 和 IE10 引入了对很多 HTML5 特性的支持，比如<video>、<audio>、<canvas>、HTML5 语义元素等等。

3。HTML5 要到 2022 年才能完成

同样，不正确。2022 年是一个虚构的日期，摘自伊恩·希克森的采访([j.mp/hixie-interview](http://j.mp/hixie-interview)<sup>10</sup>)，是最终的推荐状态。

鉴于这是我们每天都在使用的 CSS 2.1 还没有的东西，很明显，2022 年这个日期解决了一个语义问题(特别是如何定义术语“完成”)。

¹⁰

4。现在我必须重新学习一切！

一点也不。正如你在本章已经看到的，HTML5 开发的核心是拥抱进化而不是革命的两个概念(进化现有标准而不是取代它们)和铺平道路(使用已建立的经过验证的实践来构建)。

到目前为止，您学到的大部分内容都集成到了 HTML5 中。

5。HTML5 使用表示元素

乍一看，你这样想是情有可原的，但是仔细观察，你会发现事实并非如此。是的，HTML5 规范列出了像<small>这样的元素，以前被认为是表示性的。以这个元素为例，它被重新定义了。<small>不再是展示性的(意思是“以小尺寸显示这个”)。它现在是语义上的，意思是“这是小字。”

6。HTML5 是标签汤的回归

不，当然不是。HTML5 包括新的语义元素，这将允许我们进一步简化我们的标记，而不是膨胀它。

7 .。HTML5 杀死可访问性小猫

为了确保新的 HTML5 特性可以继续使用(以及保护小猫)，我们付出了巨大的努力。没必要担心。HTML5 允许我们像 HTML4 一样编写可访问的标记。

8。闪电侠死了

不完全是。由于开放标准现在提供许多相同的功能，并且许多 Flash 开发人员正在转向开放标准，专有技术目前在许多情况下确实处于次要地位，但在未来几年内它仍将有其用途。

9。HTML5 将打破网页！

绝对不会。正如已经讨论过的，HTML5 是向后兼容的，我们已经看到一些知名的商业网站都配备了 HTML5 的特性。

10。HTML5 的开发由浏览器供应商控制

同样，不正确。虽然 WHATWG 是由浏览器供应商建立的，但同意开发 HTML5 的过程是对所有人开放的。是的，浏览器厂商正在快速创新，但是每个人都有发言权，包括你。

11。HTML5 包括 CSS3、地理定位、SVG 和世界上所有其他现代技术

不要。关于 HTML5 是什么和不是什么，仍然有很多困惑。正如 Opera 的 Bruce Lawson 所说，“就像‘Ajax’一样，HTML5 已经成为一个笼统的术语，人们把各种不相关的技术，如 SVG、CSS3、JavaScript、地理定位，甚至 webfonts 都归入其中。”这是真的。许多设计师混淆地将 CSS3 称为“HTML5 的一部分”它不是。这是我们在本书中试图澄清的另一件事。如果您不确定某个特性是否是 HTML5 的一部分，请在规范中查找。

Bruce 创建了下面的图表来帮助我们定义网络生态系统。

12。那么我什么时候可以开始使用 HTML5 呢？

就现在！

总结

我们对 HTML5 的介绍到此结束。我们希望这已经很好地设定了前端 web 开发的发展方向，并给了你学习更多和更新技能的渴望！在这一章中，我们讨论了 web 标准方法；最重要的网页设计原则；语义标记和层分离的重要性；现代网络浏览器的前景；接受不确定性；拥抱可及性。我们还研究了 HTML5 的历史和起源，指导其开发的设计原则，以及它旨在解决什么问题。我们揭穿了一些 HTML5 的神话，结束了我们的旅程。

¹¹

作业

这本书的原则之一是，我们使用家庭作业来确保读者理解每一章的原则。在每章的结尾，我们将为您设置一些任务，这些任务与该章所涵盖的内容相对应。

对于某些章节，我们提供了示例内容，可从随附的网站[thewebevolved.com](http://thewebevolved.com)下载。如果您遇到任何问题或需要进一步的建议，请不要犹豫，通过网站联系我们的作者。祝你好运！

第一章作业

对于第一章，很简单:我们已经向你们提供了一些关于戈多(一只被证明是太空竞赛先驱的猴子)的内容，你们中的一些人可能已经从 HTML 和 CSS Web 标准解决方案:Web standarditas ’ Approach进一步冒险(从[thewebevolved.com](http://thewebevolved.com)下载)中见过。

我们把它组织成典型的内容，混合了标题、段落、一两个引号和一些列表。总之就是每天都会遇到的那种。

您的首要任务是使用您当前选择的风格(XHTML 1 或 HTML 4.01)来标记所提供的内容。你将在第二章中使用这个作业的结果来比较和对比你当前的 HTML 风格和 HTML5 的关系。

定向阅读

这证明了 HTML5 的迅速崛起，不仅有许多先锋书籍在其上出版，而且还有许多免费访问的网站提供参考资料和教程。

我们推荐以下资源:

在榜单上看到 HTML5 Doctor 并不奇怪。除了这本书的两位作者，HTML5 Doctor 还接待了许多非常有才华的作者，包括布鲁斯·劳森(Bruce Lawson)和雷米·夏普(Remy Sharp)，他们是《介绍 HTML5 (New Riders)的作者。
作为 HTML5 WHATWG 的创始成员，Opera 一直站在推动基于标准的开发的最前沿，主要关注 HTML5 的推广。看到 Opera 通过 Opera 开发者社区推广标准并不奇怪。社区的定期贡献者包括 Patrick Lauke 和 Chris Mills(本书的技术评论员)。这很值得做书签并定期检查。

二、第一次走进 HTML5

在第一章中，我们介绍了 HTML5 的背景，为什么我们现在应该开始使用它，以及一些现代 web 标准开发原则。在这一章中，我们将开始创建一些实际的 HTML5 网页。

我们将从我们如何标记第一章的作业页开始这一章。我们将以它为基础，探索一些众所周知的元素是如何变化的，尤其是 DOCTYPE，它现在变得简单多了，也更容易记忆。

一旦我们完成了，我们就开始了一个历史悠久的传统，那就是“你好，世界！”旅程，最终创建了我们的第一个 HTML5 页面。接下来，我们将介绍一些变通方法，它们将帮助您交付精心制作的 HTML5 页面，以便它们可以在当前的浏览器中工作(毫无疑问，我们的老朋友 IE 在这里得到了提及)。最后，我们将看看 HTML5 和 XHTML5 的优缺点，以及验证器和 lint 检查器如何处理 HTML5。

这是一个很大的范围，所以，没有更多的麻烦，让我们开始吧…

作业复习

在第一章的最后，我们要求你用你当前喜欢的标记风格，XHTML1 或 HTML4，来标记一个典型的网页。当我们开始本章和下一章时，我们将向您展示如何使用 HTML5 标记相同的网页。这里的目的是向您展示您当前使用的标记和 HTML5 标记之间的关系，并在此过程中强调 HTML5 的新功能及其提供的优势。

与拉丁文或其他填充文本相反，使用真实内容可以让你深入了解真实内容是如何影响真实标记的。简而言之，内容驱动了标记。这就是为什么我们不提供无意义的逻辑推理。

那么，我们如何标记我们的网页呢？

我们选择了 XHTML 1，正如您将在下面的例子中看到的，我们查看了提供的内容，并尽可能使用最合适的元素对其进行了标记。为了节省纸张(和树木)，我们用省略号替换了一些内容，但是你应该能认出这些内容(如果你做了第一章的的功课)。除了使用良好的旧语义标记，我们还选择了id和class名称来提供额外的含义。

我们的页面

结果页面如下所示:

Miss Baker | Space Pioneers | The Web Evolved, Chapter 2 Example File

Miss Baker

First Lady of Space

Before humans were launched into space, many animals were propelled![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fgitee.com%2FOpenDocCN%2Fvkdoc-html-css-zh%2Fraw%2Fmaster%2Fdocs%2Fbegin-h5c3-web-evo%2Fimg%2FU002.jpg&pos_id=img-9cbZ79yB-1723651899036) heavenwards…

…

Miss Baker's Historic Flight

Miss Baker and fellow female pioneer Able's historic flight…

…

The Mission

Miss Baker’s flight was another milestone in the history of space flight…

            …

The US Space Programme

A technological and ideological competition between the United States and 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
the Soviet Union…

…

Life in Retirement

Miss Baker spent the latter part of her life at the US Space and Rocket 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
Centre…

            …

这应该是你熟悉的领域。您对标记的选择可能会有所不同——您可能选择了 HTML4，也可能选择了不同的元素——但底线是您应该使用语义标记来制作最有意义的页面。

在本章的剩余部分，我们将过渡到 HTML5，这样我们就可以开始拥抱它提供的机会。虽然有些方面对你来说是新的，但是不要害怕——正如你很快会看到的，我们所涉及的很多内容都是熟悉的。在这方面，我们有一些好消息。

你的加价还有 84.8%

虽然我们不能 100%保证 84.8%这个数字在科学上是准确的(说实话，这个数字是我们编造的)，但它在精神上是准确的。正如在第一章中提到的，HTML5 背后的指导原则包括强调不要重新发明轮子，铺平道路，以及拥抱进化而不是革命的务实精神。

简而言之，重点是在已有成果的基础上再接再厉。随着本章和本书的深入，你会看到这些原则在起作用。所以请放心:当我们踏上 HTML5 开发之旅时，您不需要重新学习一切。是的，我们已经学会使用的所有语义优势仍然存在。有一些新的元素供我们使用(我们将在下一章看到)，但我们学到的很多东西仍然存在。

关于编码风格的一个旁白

正如您将看到的，当我们浏览许多不同的标记样式时——HTML 4.01、XHTML 1.1 和 HTML 5——当然存在差异。这本书的作者团队更喜欢用 XHTML 风格编写标记，但是使用 HTML5 的新元素；您可能更喜欢使用更宽松的 HTML 风格来编写您的 HTML。HTML 两者都允许，允许你坚持你喜欢的。

自从 1990 年蒂姆·伯纳斯·李首次实现 HTML 以来，编码风格已经发生了很大的变化。当 Berners-Lee 第一次发表“HTML 中使用的标签”([j.mp/tags-in-html](http://j.mp/tags-in-html)<sup>1</sup>)时，他使用的风格是用大写字母编写元素，打开和关闭一些标签，而让其他标签打开和不关闭。Berners-Lee 指出，“标签和属性的名称不区分大小写:它们可以是小写、大写或混合大小写，意思完全相同。(在本文档中，它们通常用大写字母表示。)"

这都是头脑中的想法

在我们开始创造一些好的，老式的“你好，世界！”网页(开始任何新的编程冒险时的一个传统)，让我们来看看我们将会遇到的一些变化，特别是当我们转向 HTML5 时，我们将在<head>中做出的变化。在进入<body>标记的实际细节之前，理解这些基础知识是一个好主意。

在这一节中，我们将介绍新的 HTML5 DOCTYPE，解释如何在 HTML5 中声明语言，并介绍一个新的、更简单的meta charset属性。

在我们开始这个旅程之前，让我们看看我们现在拥有什么。(记得我们为贝克小姐页面选择了 XHTML 1；你的<head>可能会不同。)目前我们贝克小姐页面上的<head>如下:

Miss Baker | Space Pioneers | The Web Evolved, Chapter 2 Example File `

现在我们来看看 HTML5 中的。

Miss Baker | Space Pioneers | The Web Evolved, Chapter 2 Example File` ` `

如您所见，这相当简单，这不是坏事。现在让我们开始吧。我们将从对总是不可能记住的 DOCTYPE 的一些受欢迎的改变开始。

更完美的文档类型

可怕的 DOCTYPE。很少有人——除了那些有照相记忆的人——能记住它。到目前为止，无论您选择的是 XHTML 1 Strict 还是 HTML 4 Strict(或者任何其他可用的类型)，DOCTYPE 都是一个难以理解的字符串。如果您一直在使用 XHTML 1 Strict 编写标记，您会习惯于看到下面的 DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

如果您选择的标记风格是 HTML 4 Strict，那么您会更熟悉这个 DOCTYPE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

DOCTYPE 没有必要如此复杂和难以记忆。W3C 在最初创建标记规范时，可能有一些宏伟的设计，但实际上它为我们做的只是告诉浏览器以标准模式而不是古怪模式来呈现我们的页面。在编写 HTML5 规范时，WHATWG 认识到了这一点，并将 DOCTYPE 更改为构成有效 DOCTYPE 的尽可能短的字符序列。

<!DOCTYPE html>

就这样。更简单，我们敢说，甚至令人难忘。

即使您不做任何其他事情，您现在也可以开始使用新的 HTML5 DOCTYPE，安全地知道这 15 个字符是触发标准模式所需要的全部。现在，通过改变你的第一章作业上的文档类型并重新验证你的页面来尝试一下。它会工作得很好。鉴于谷歌已经在搜索页面上使用 HTML5 DOCTYPE，没有理由不改变你的 DOCTYPE。

在 HTML5 中声明语言

现在让我们看看如何在 HTML5 中声明语言。但是为什么要声明语言呢？W3C 对这个问题的回答如下:

从对语言敏感的搜索到应用特定语言的显示属性，指定内容的语言对于许多应用都很有用。在某些情况下，语言信息的潜在应用仍在等待实现，而在其他情况下，如通过语音浏览器检测语言，这是今天的一种需要。

给内容添加语言信息的标记是今天可以而且应该做的事情。没有它，就不可能利用任何未来的发展。

声明一种默认语言对于诸如可访问性和搜索引擎这样的应用已经很重要了，但是随着时间的推移，其他可能的应用也会出现。

指定 HTML 文档语言的最简单方法是向 HTML 页面的根元素添加一个lang属性。HTML 页面的根元素总是<html>，所以要指定一种语言，我们要做以下事情:

<html lang="en">

在这个例子中，lang属性的值是en，它指定文档是用英语编写的。但是，如果您的文档包含用指定的lang之外的语言编写的元素呢？没问题。language 属性也可以内联使用。下面的示例包括一个内联的<span>元素，该元素包含一个值为fr,的lang属性，表示其中包含的内容是用法语编写的:

<p>Miss Baker, on entering the capsule, declared to her fellow astronaut Able: <span>![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/begin-h5c3-web-evo/img/U002.jpg) lang="fr">"Bon chance!"</span></p>

很好，很好。

正如你所料，其他语言也有两个字母的主要代码——例如de(德语)、it(意大利语)、nl(荷兰语)、es(西班牙语)、ar(阿拉伯语)、ru(俄语)和zh(中文)。如果这还不够，还有 8000 多个语言属性值可用；这些在 IANA 语言子标签注册处([j.mp/lang-subtag](http://j.mp/lang-subtag)<sup>3</sup>)有完整的列表。

也可以在一种语言中指定方言。这些通常用基本语言代码来表示，例如en，后跟一个连字符和所讨论的方言。下面的例子分别展示了英国英语和美国英语:

en-US: US English en-GB: UK English

如果你想拥抱一种更前卫的语言，包含一个主要标签x表示一种实验性的语言，如下所示:

<p lang="x-klingon">nuqDaq 'oH puchpa''e'</p>

对于外行人来说，克林贡语短语“nuqDaq ‘oH puchpa’'e '”翻译过来就是“洗手间在哪里？”你可以在克林贡语言学院非常古老的学校网站上听到它的发音。

⁴

最后，如果你想创建自己的语言代码，这是完全可能的(尽管不建议这样做)。HTML5 Outliner(将在下一章讨论)的作者 Geoffrey Snedders 在他的个人网站中使用了以下语言代码:

<html lang="en-gb-x-sneddy">

如果您已经了解了，应该很清楚 Snedders 先生的lang属性翻译如下:

English - Great British - Experimental - Sneddy

(尽管为什么您可能想要指定您自己的特定语言是有问题的。)说够了。

XMLNS 属性

如果您习惯于使用 XHTML 编写标记，您可能想知道我们的 Baker 小姐页面上的xmlns属性发生了什么变化。

<html >

答案是不再需要了。属性通知浏览器该页面上的所有元素都在 XHTML 名称空间中；然而，在 HTML5 中，元素总是在这个名称空间中，所以不再需要显式声明。您可以删除xmlns属性，因为您的页面在所有浏览器中都可以正常工作。

字符编码

让我们看看本章开始时的贝克小姐页面。我们指定字符编码如下:

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

在 HTML5 中，指定页面的字符编码要简单得多。我们来看看 HTML5 版本:

<meta charset="UTF-8" />

您不需要详细了解什么是字符编码，但基本上，它定义了可以在文档中使用的有效人类语言字符集。坚持使用 UTF 8 是最安全的，这是一个通用字符集，允许所有语言的所有字符。

记忆先生

所以我们有了它:把以上所有的放在一起，很容易看到你现在可能会用记忆专长震惊你的朋友。不再有复杂的样板文件；以下内容对任何人来说都应该很容易记住:

` ` Miss Baker | Space Pioneers | The Web Evolved, Chapter 2 Example File `

所以让我们在一些实际的页面上看到所有的东西一起工作。“你好，世界”节目时间到了！行动。

一句“你好，世界！”旅行

传统要求我们使用历史悠久的“Hello World！”向您介绍您的第一个 HTML5 页面佩奇。正如精彩的维基百科所说，

对于试图学习一门新编程语言的人来说，写一句“Hello World！”通常被认为是程序员的一个传统编程是学习这种特殊语言的第一步。

我们凭什么打破传统？

为了向您展示标记如何根据您一直使用的 HTML 的风格而有所不同，以及向您展示向 HTML5 的过渡如何反映以前的实践(如在进化中，而不是革命中)，我们将快速浏览一系列“Hello World！”网页来演示 HTML5 提供了多种标记样式首选项。我们将通过查看我们认为最好的标记样式来总结:合并 XHTML(一种更严格、更容易学习的语法)和 HTML5(一种前瞻性的、更丰富的语义调色板)的最佳方面。

我们开始吧。

“你好世界！”XHTML1.0 风格

我们的第一个例子是一个非常简单的“Hello World！”使用 XHTML 1 Strict DOCTYPE 标记的网页。这是完全有效的，如果您一直在使用 XHTML 进行标记，这应该不足为奇。

Hello World! XHTML 1 Strict

Hello World!

这里没有惊喜。这是一个典型的页面，格式良好，完全有效，但是如果您的首选是 HTML 4 呢？让我们看看下一个例子。

“你好世界！”HTML4 风格

接下来的例子与前面的例子相同，但是使用 HTML 4 Strict DOCTYPE 进行标记，并且使用了一个简单得多的开始标记<html>(在我们的 XHTML 1 版本中，去掉了 XML 名称空间声明)。

和前面的例子一样，这是完全有效的。同样，这也不足为奇。

Hello World! HTML 4 Strict

Hello World!

迄今为止，如此…熟悉。现在我们来看一个 HTML5 的例子。

“你好世界！”在 HTML5“松散”风格中

我们之前演示的 XHTML 1 和 HTML 4 页面应该不足为奇。现在让我们来看一个最简单的 HTML5 页面。下面的页面虽然只有几行，却是 100%有效的 html 5“Hello World！”页面:

<!DOCTYPE html> <meta charset=UTF-8> <title>Hello World!</title> <p>Hello World!

如果到目前为止您一直在使用 XHTML 语法，这可能会有点令人吃惊。没有开始和结束<html>标签？没有<head>或<body>元素？未加引号的属性？这是因为 HTML5 继承了 HTML 4 的许多特性，HTML 4 的语法比 XHTML 1 的限制少得多。

正如我们在前一章中所概述的，HTML5 的发展以实用主义方法为特征，WHATWG 允许所有通用的语法变化，包括 XHTML 的严格语法和 HTML 4 的宽松语法。为了强调这一点，并了解 HTML5 是如何从以前的基础上发展而来的，让我们来看看一个稍微小一点但仍然完全有效的 HTML 4 页面。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <meta http-equiv=content-type content="text/html; charset=UTF-8"> <title>Hello World! HTML 4.01 Strict</title> <p>Hello World!

除了更冗长的 HTML 4 DOCTYPE 和更长的meta charset属性之外，这两个例子是相同的。也没有开始或结束的<html>标签，或者<head>或<body>元素。

原因很简单，我们在第一章中谈到了支持现有内容的 HTML 设计原则。为了向后兼容，HTML5 允许使用 HTML 4 或 XHTML 1 语法标记网页。不管你的语法偏好是什么，HTML5 包含了以前没有的东西。

如果您一直在使用 XHTML，那么您一直在使用小写的标签和属性名称，结束元素，引用元素，并给所有属性赋值。一些人认为这些规则是限制性的；其他人欣赏他们赋予标记的一致性。

总之，使用你选择的语法来编写你的 HTML5 页面是可能的，而且你完全可以这样做；然而，我们建议保留更严格的 XHTML 语法。

为什么呢？规则很有用。它们支持协同工作，允许每个人遵循标准化的语法。规则也使学习标记变得更加容易。您应该坚持使用 XHTML 还有其他一些原因；例如，可访问性最佳实践要求您使用<html>标签上的lang属性为文档指定一种语言。如果你不把它包含在页面中，这是不可能的！

记住这一点，让我们来看看包含 XHTML 规则和语法的最终 HTML5 页面。

“你好世界！”在 HTML5“严格”风格中

如果您一直使用 XHTML 的严格语法和规则编写标记，那么您已经习惯了小写元素、引用属性和结束空元素。正如您在上一个例子中看到的，在 HTML5 中，一切皆有可能。大写元素？没问题。未加引号的属性？好的。

但是，如果您想跳到 HTML5，但是又想带上所有的 XHTML 习惯，该怎么办呢？没有恐惧；我们可以选择使用 XHTML 语法来标记页面，这样可以两全其美。让我们看一个例子。

Hello World!

百分百有效。这个页面结合了 HTML5 的优点和 XHTML 1 语法的严格性。简而言之:两全其美。

支持 HTML5 跨浏览器

让我们继续来看看我们可以用来让新的 HTML5 语义元素跨浏览器工作的技术，甚至像 IE6 这样的旧浏览器。然后，我们将采用最后一个风格良好的 html 5“Hello World！”示例页面并添加到其中，为您提供了一个样板文件，您现在就可以开始使用 HTML5 了。

我们将从浏览器如何处理未知元素开始。

浏览器如何处理未知元素？

HTML 是一种宽容的语言。很长一段时间以来，大多数浏览器通过将它们视为匿名内联元素并允许我们对它们进行样式化，优雅地处理了它们没有识别的元素和属性的包含。

每个浏览器都有它支持的元素列表。例如，Firefox 的列表存储在一个名为nsElementTable.cpp的文件中。这个文件告诉浏览器如何处理它遇到的元素，通知浏览器如何设置它们的样式，以及它们在文档对象模型(DOM)中应该如何处理。

演示这一点的最佳方式是运行一个示例。下面这个非常基本的页面使用了新的<time>元素(我们将在第四章中适当地遇到它)。我们包含了一个非常简单的样式表，其中有一个针对新元素的规则。问题是，浏览器将如何设计<time>元素的样式？

Styling Unknown Elements - 1

Miss Baker made her historic journey on May 28,![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fgitee.com%2FOpenDocCN%2Fvkdoc-html-css-zh%2Fraw%2Fmaster%2Fdocs%2Fbegin-h5c3-web-evo%2Fimg%2FU002.jpg&pos_id=img-oPzwnAeq-1723651899037) 1959.

首先，好消息是:大多数现代浏览器都会看到<time>元素，并用斜体显示日期“1959 年 5 月 28 日”。然而，我们的老朋友 IE 有不同的想法。IE(直到并包括版本 8)甚至看不到<time>元素，因此这个文本没有样式。

不用说，如果我们要取得进一步的进展，这是我们需要解决的问题。好消息是这个问题有一个解决方案:为了 IE 的利益，我们可以使用一点 JavaScript 来显式声明元素。(就当是给了 IE 一记温和的耳光。)

这项技术归功于 Sjoerd Visscher，它包括创建一个新的 DOM 元素(与目标元素同名)来欺骗 IE“看到”新元素，然后，哒！，应用样式(见[j.mp/trick-ie](http://j.mp/trick-ie)<sup>5</sup>)。

让我们来看看。下面是一行使用document.createElement在 DOM 中显式创建<time>元素实例的 JavaScript 代码:

Styling Unknown Elements - 2 ` `

通过这段简单的 JavaScript 代码，IE 被骗去看到了<time>元素，允许斜体样式出现。显然，这只能解决单个元素的问题(在本例中是<time>元素)。下一个例子演示了如何解决 HTML5 中引入的所有新元素的问题。这里我们包括了所有我们想要强制 IE 识别的元素:

Styling Unknown Elements - 3

⁵

显然，这需要在每个页面上包含相当多的 JavaScript。如果，但愿不会，任何新的 HTML5 元素被添加到新元素列表中？虽然在您可能创建的任何 HTML5 页面上使用一点正则表达式魔法进行查找和替换是可能的，但是有一个简单得多的选择。

解决方案是 shiv，我们接下来会谈到它。

遇见刀剑

我们承诺了一个更简单的方法来解决 IE 中未知元素样式的棘手问题，这就是我们的承诺。由 Remy Sharp 提供，命名为“HTML5 启用脚本”(或者更通俗地说，“shiv”)，它是这样的:

Styling Unknown Elements - 4

将这个脚本包含在你的页面中，它会处理我们之前讨论过的所有事情，甚至更多。Remy 已经在 Google Code 托管过了，你只需要链接一下就可以了；你不需要担心 JavaScript 里面有什么，也不需要考虑你是否有最新的版本。

通过在条件注释中嵌套脚本，我们可以针对比 IE 9 更早的 IE 版本(IE 9 对 HTML5 的支持要好得多)。这使得不需要它的浏览器可以把它当作一个简单的 HTML 注释，直接跳过它。结果呢？不需要该脚本的浏览器不会下载它，从而节省了一个 HTTP 请求。

最后，有几点需要强调。首先，shiv 需要放在<head>元素中，以便 IE 在呈现新的 HTML5 元素之前知道它们。其次，shiv 依赖于启用的 JavaScript。如果你的大多数观众在浏览网页时禁用了 JavaScript，你需要考虑一个替代方案，比如在你的标记中使用语义 HTML5 class名称。(当我们介绍我们自己的规范 HTML4.5 时，我们将在第三章中重温这个想法。)

IE 打印保护器

正如哥伦布所说，“还有一件事……”我们承诺在 Google Code 链接到 shiv 有额外的好处，为您提供最新版本的 shiv。我们没有撒谎。

Remy Sharp 的 html5shiv 现在还包括 Jonathan Neal 的 IE Print Protector ( [j.mp/ie-print](http://j.mp/ie-print)<sup>6</sup>)，它解决了 IE 在试图打印 HTML5 页面时遇到的一个问题(它也不能在打印的页面上正确呈现element)。IE Print Protector 的工作原理是，当您打印时，用支持的后备元素(如<div>和<span>)临时替换 HTML5 元素，根据您现有的样式为这些元素创建一个特殊的样式表。

这解决了 IE 的问题，但我们还需要为任何不知道如何呈现 HTML5 新语义元素的浏览器添加一段 CSS。

声明块级元素

如上所述，当涉及到样式时，浏览器将未知元素视为匿名内联元素。HTML5 引入了许多新的块级元素:如果这些元素没有包含在浏览器的已知元素查找表中，它们将被视为内联元素。因此，我们需要添加一个 CSS 规则，将它们声明为块级元素。

<style> article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } </style>

这个简单的规则指示浏览器将新的 HTML5 <article>、<aside>、<details>、<figcaption>、<figure>、<footer>、<header>、<hgroup>、<menu>、<nav>和<section>元素视为块级元素，并相应地显示它们。

注意:随着 HTML5 规范的变化和更多特性的加入，你应该定期更新这些 Shiv 技术以确保它们是最新的。

⁶

另外，对于那些在你的样式工作中使用 CSS 重置的人，请注意其中许多已经被更新，包括了 HTML5 显示:块声明。例子包括 Normalize 和 Eric Meyer 的 Reset。CSS 重置将在第七章中详细讨论。

一个 HTML5 样板页面

因此，我们已经讨论了 shiv 和将 HTML5 元素声明为块级的重要性，以便浏览器知道如何处理它们。我们还介绍了新的 HTML5 DOCTYPE，研究了如何声明语言，以及字符编码与简化的meta charset属性一起工作。让我们一起创建一个简单的 HTML5 样板页面。下面的 HTML5 样板文件包括了本章中的所有内容:

Insert Your Title Here

Insert your content here.

当我们在本书的后半部分介绍 CSS 重置时，我们将提供这个样板文件的更高级版本。现在，在为下一章做准备时，您可能想试验一下这个文件。可以从http://thewebevolved.com⁷下载 HTML5 样板文件。

你们当中精明的人可能会注意到前一个例子中遗漏了一件小事。

没有更多类型属性

我们不再需要在声明 JavaScript 或 CSS 时包含一个type属性。过去，我们会包含一个如下所示的type属性:

⁷http://thewebevolved.com/02/boilerplate.html

 **<style type="text/css">** article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } </style>

不再需要属性type、type="text/javascript"和type="text/css"。您现在可以保存几个字节并丢弃它们，如下所示:

这是因为除了 CSS 和 JavaScript 之外，没有任何其他样式和脚本语言可供使用，因此无法区分它们。(过去，我们曾在某些场合使用 VBScript 编写脚本，但 VBScript 已经过时了。)

所以又少了一件需要记住的事情。美好时光！

多填充物和替代品

我们刚刚向您展示的 HTML5 样板文件——以及现代浏览器对 HTML5 和 CSS3 的大量支持——已经带我们走了很长一段路，为创建令人敬畏的现代 web 体验做好了准备，但在许多情况下，它们还不够。你会经常被要求支持不支持 HTML5 和 CSS3 新特性的旧浏览器(如 IE 6-8 ),有时你会想使用不支持所有现代浏览器的前沿特性。

有很多方法可以处理这些情况，我们将在整本书中看到许多不同的技术，但通常这些技术属于三个阵营之一。

优雅的退化:我们已经讨论过这样一个想法，许多 web 功能可以被构建成在现代浏览器中看起来很棒，然后在旧的浏览器中它们会退化，这样尽管它们看起来不那么好，但它们仍然是可访问和可用的。
渐进增强/替代方案:正如我们已经讨论过的，渐进增强是适度退化的反义词。在这里，我们构建了一个适用于所有浏览器的基本功能级别，然后在支持高级功能的浏览器之上构建了风格和可用性增强。有时候，当你构建你的标记和样式时，这是理所当然的，有时候我们需要一些额外的帮助。
多孔填料:你会在整本书中遇到许多多孔填料。这些程序通常构建在 JavaScript 中，将对 web 技术的支持添加到原本不支持 web 技术的浏览器中。一个很好的例子是 CSSPie，它在旧版本的 ie 中添加了对 CSS 渐变、圆角和其他 CSS3 功能的支持。

注:在第七章中，你会遇到一个名为 Modernizr 的特征检测库。它检测浏览器是否支持 CSS3、HTML5 等的各种特性。，然后允许您提供不同的风格和脚本来适应。例如，如果您有一个使用 CSS 动画作为界面功能的网站，您可以使用 Modernizr 检测对它的支持，然后为不支持的浏览器提供一组更简单的样式，仍然可以访问和使用内容，尽管可能不是那么令人兴奋。

验证

我们在这一章已经讲了很多；结束时，您将能够将您的贝克小姐页面更新为 HTML5。在第三章中，我们将介绍 HTML5 中添加的一些新的语义元素，你可以用它们来进一步改进你的贝克小姐页面。

有一件事我们还没有涉及到，我们现在就要补救，那就是验证我们闪亮的新 HTML5 页面的主题。

为什么要验证？验证页面通常是发现问题的第一步。使用验证器可以帮助您发现简单的、容易忽略的错误，并了解更多关于标记如何工作的知识。验证是一个需要养成的有用习惯，尤其是在学习的时候，我们希望你意识到这一点，如果你没有积极使用的话。记住这一点，让我们看看如何验证我们的 HTML5 页面。

HTML5 验证器

WHATWG 在[j.mp/whatwg-validator](http://j.mp/whatwg-validator)<sup>8</sup>维护了一个当前已知的 HTML5 验证器和其他工具的列表。

有几个可用的 HTML5 验证器，但我们将重点关注 Henri Sivonen 创建的一个:[j.mp/nu-validator](http://j.mp/nu-validator)<sup>9</sup>

让我们检查一下样板文件，看看它是否是有效的 HTML5 ( 图 2-1 )。

⁸

⁹

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

**图 2-1。**好消息！样板 HTML5 页面是有效的…取决于服务的绝对预见性。

结果呢？验证器返回以下内容:该文档是有效的 HTML5 + ARIA + SVG 1.1 + MathML 2.0(取决于该服务的绝对预见性)。"

Henri Sivonen 的 HTML5 验证器没有检查特定的语法设置(比如检查 XHTML 样式的语法)。丹·塞德霍尔姆对这个话题评论道:

对于验证器来说，简单方便地添加一个检查语法的选项是很重要的，这将有助于培养良好的编码习惯，避免令人头疼的渲染问题等。这就是我今天选择编码 XHTML 的原因——这是一种个人偏好，它帮助我维护、优化代码和排除代码故障，无论文档类型如何，我都将继续这种习惯。

也就是说，缺少在 HTML5 验证器检查语法的选项并不意味着我们不能在其他地方检查语法；只是少了一点方便。下一节将介绍 HTML Lint，这是一个可以用来确保标记格式良好且制作完美的工具。

HTML Lint

在没有允许我们检查首选语法的验证器的情况下，我们推荐在[j.mp/htmllint](http://j.mp/htmllint)<sup>10</sup>使用 HTML Lint。

由 MMM 开发的 HTML Lint(见图 2-2 )是一个 Lint 检查器，可以让你指定检查的选项。(术语 lint 来源于羊毛中不良纤维和绒毛的名称。)

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

图 2-2。MMM 的 HTML Lint 通过检查一系列用户可选择的选项，使您能够确保您的标记格式良好。

¹⁰

正如 MMM 所说，

虽然 XHTML 对语法非常严格，但 HTML5 更宽松……这意味着保持一致的代码风格变得更加困难。

任何喜欢 XHTML 的严格语法的人都会喜欢 HTML Lint 提供的选项，包括检查结束标记、结束的空元素、带引号的属性以及小写元素和属性的能力。

在创建允许验证和语法检查的验证器之前(我们希望很快创建一个)，可以分别使用 HTML5 验证器和 HTML Lint 进行验证和简单标记。

重访贝克小姐

现在我们已经看到了一些 HTML5 页面的运行。我们的最后一个练习——向您展示过渡到 HTML5 有多简单——是重新访问我们在本章开始时介绍的贝克小姐页面，给它一个新的 DOCTYPE，并对我们之前介绍的<head>进行更改。

Miss Baker | Space Pioneers | The Web Evolved, Chapter 2 Example File

…

The Space Pioneers web site is an example site, designed to accompany The Web 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
Evolved, published by Apress. Text: The Web Evolved; Design: Jonny Campbell.

HTML + CSS released under a Creative Commons Attribution 3.0 license.

Photography © iStockphoto

http://thewebevolved.com/02/miss_baker_html_4.5.html`

在 HTML5 验证器中测试这个页面会得到图 2-3 。

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

**图 2-3。**更新后的贝克小姐页面完全有效。

使用 HTML Lint 测试它的语法会得到图 2-4 。

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

**图 2-4。**更新后的贝克小姐页面完全有效。

简单地改变贝克小姐页面的<head>元素，而不改变正文中的标记，就可以得到一个有效的 HTML5 页面。就这么简单。

总结

至此，我们已经接触了 HTML5，并了解了 XHTML1、HTML4、“宽松”的 HTML5 风格和带有 XHTML 语法的更严格的 HTML5(我们建议您使用后者)之间的语法差异。我们还展示了新的 HTML5 DOCTYPE，将文档升级到 HTML5 需要对文档的<head>进行的更改，以及如何让 HTML5 内容在所有浏览器上工作，甚至是旧版本的 IE。最后，我们展示了一个 HTML5 样板文件，您可以用它作为所有 HTML5 文档的起点，并展示了如何最好地验证您的 HTML5 标记。很简单，不是吗？！

作业

创建一个“Hello World！”网页，请参考本章中的示例。
验证它。
重新访问你的 Gordo 页面，按照本章中的例子把它改成 HTML5。

三、新的结构元素

正如我们在第一章、末尾的练习中看到的，这都是关于语义的。选择我们的标记仅仅是为了它的表现的错误想法，以基于<table>的布局和spacer.gif s 为代表，已经被“标准化”运动彻底地扫地出门。相反，我们的战斗口号是

“使用语义上最合适的元素。”

令人高兴的是，大多数时候，每个元素的默认浏览器表示都与其语义密切相关。这给了我们可访问性的好处，因为语义标记提供了意义的基础，而不考虑表现形式。它还具有让我们的内容经得起未来考验的优势，允许它在新的替代设备上“正常工作”。鉴于所谓的开放式网络堆栈作为一个无处不在的平台的光明前景，这是一个相当大的优势。

在这一章中，我们将看看 HTML5 中用于指示结构的新元素，这可能是我们的工具包中最引人注目的(也可能是最令人困惑的)新增内容。我们还将了解它们如何与早期 HTML 版本的相关元素一起使用，HTML5 引入的大纲算法，以及 HTML5 风格的标题元素级别。然后我们将把我们学到的东西应用到实践中，与 HTML5 之前的编码模式进行比较。最后，我们将看看为旧浏览器添加这些新元素的语义的其他方法，并解决 HTML5 中的可访问性变化。

但是首先，让我们离题简单看一下工作流…

工作流实践，不断发展？

传统上，网页设计师使用流动的 lorem ipsum 创建美丽的像素完美的模型，然后在设计获得批准后，煞费苦心地试图将真实的内容放入其中。可悲的是，向客户展示平面模型注定会失败——如果“像素级完美”曾经有可能实现，那么在当前众多移动设备的情况下，那个时代已经一去不复返了。另一个导致这一过程失败的因素是网站的交互性。甚至无法测试链接翻转，这些模型是蜡像，不可思议地逼真，但几乎肯定是死的。

相反，我们更喜欢通常被称为“在浏览器中设计”的工作流程顾名思义，这包括创建基于 HTML 和 CSS 的模型，从内容语义和布局开始，然后转移到颜色等细节。对于商业工作，这发生在与客户建立项目的范围和目标，并通过草图和情绪板决定总体设计之后。然后在反馈过程中与客户共享模型，而不仅仅是完成的版本。Naz Hamid 在这条推文中简洁地总结了这种方法的好处:

你可以比在静态环境中更快地原型化和失败。你得到的感觉很快([j.mp/fail-faster](http://j.mp/fail-faster)<sup>1</sup>)。

我们最喜欢的工作流程的标准是由安迪·克拉克提出的，他的“墙倒塌了”的演讲([j.mp/in-the-browser](http://j.mp/in-the-browser)<sup>2</sup>)让这个工作流程的革命变得引人注目。虽然批评者认为 HTML 和 CSS 会从根本上限制你的潜在创造力，但我们认为同样的观点适用于任何工具。CSS3 最近的进步开始让 Photoshop 看起来相当(我们敢说吗？)是一个普通的网页设计工具，我们相信在使用电脑之前，你会用纸和笔以正确的方式开始你的设计*。*

*你们中的一些人可能在大型组织中工作，因此无法影响自己的工作流程。我们鼓励你在一个个人项目中尝试这种方法，看看它是如何比较的。你可能会发现，你的热情以及对成本和时间节约的提及会让你的经理感兴趣。你们中的其他人可能对 HTML 和 CSS 一无所知，为其他人实现设计。我们希望，已经写了这么多关于 HTML 和 CSS 的书，鼓励你继续学习。你对你的设计是如何实现的了解越多，你的工作就会越好。到本书结束时，你将会知道足够的 HTML 和 CSS 来制作网站。

虽然用 HTML 设计最初可能会令人害怕，但与客户讨论你的进展(即使非常粗略)有助于将他们纳入过程，并防止在展示时出现任何灾难性的意外。逐步添加更多的细节自然会关注客户的反馈，避免在讨论布局时出现“我不喜欢那个颜色”这样的评论(我们发现在布局阶段用灰色设计也有帮助)。当然，你也可以演示交互性和展示模型的工作，包括不同的浏览器如何不同地显示事物，让客户更好地了解成品的感觉。这对于反驳“在每个浏览器中必须看起来一样”的谬论以及解释渐进增强的乐趣有很大的帮助。最后，你不会因为你的客户在一个不灵活的模型上签字而被限制在一个固定宽度的布局上。

注意:目前这是我们首选的工作流程*；然而，我们也期待有一天有人能创造出比手工编码更好的应用。我们并不孤单，正如杰森·圣玛利亚的“一个真正的网页设计应用”文章([j.mp/webdesign-app](http://j.mp/webdesign-app)<sup>3</sup>* )之后的大量评论所表明的。

一旦你的研究、计划、草图和迭代完成，下一步——就像在第一章练习中一样——是开始识别和标记内容。在这样做的时候，我们有责任去了解和理解我们可以使用的所有标记——这是我们技术的一个基本工具集。先说 HTML5 的新结构元素。

勇敢的新语义黎明

在 HTML 4 和 XHTML 1 中，我们的标记选择有些有限。虽然<div>比<table>更适合布局，但它仍然只是一个流内容的通用容器。我们可以使用类和 id 来添加 CSS 样式，如果我们使用描述元素内容的名称(而不是它的表示)，我们还可以使用它们来添加额外的特定语义。然而，虽然<ul class="nav">和<div class="sidebar">工作得很好，但我们添加的额外语义对用户来说是不可访问的，它们甚至不能被浏览器识别(除了样式)。我们不妨用<ul class="naomi">和<div class="mike">。

注:HTML 4 指的是块元素和内联元素。当 CSS 被添加到组合中时，这变得相当混乱，所以在 HTML5 中，它们分别被称为流元素和短语元素。

那么 HTML5 有什么变化呢？嗯，一旦你开始使用 HTML5，你首先会注意到的是页面部分的新元素([j.mp/html5-structural](http://j.mp/html5-structural)<sup>4</sup>)，我们称之为结构元素。这些元素取代了我们之前使用class和id属性应用的页面部分的通用特定语义，只是这次使用了标准化的媒体无关的语义。这些新的结构元素是

<section>

<article>

<header>

<footer>

<hgroup>

<nav>

<aside>

注意:媒体独立仅仅意味着它应该跨不同的平台、设备和媒体工作。有关更多信息，请参考本章后面的“辅助功能和 HTML5”一节。

这一章涵盖了其他几个元素，包括我们的老朋友<div>和<h1>–<h6>，加上新来者<figure>和它的孩子<figcaption>，以帮助我们比较和对比结构元素。

⁴

锻造新元素

你可能想知道这些新元素的名字是从哪里来的。2005 年 12 月，HTML5 规范编辑伊恩·希克森组织了 Web 创作统计研究。这项研究分析了大约 10 亿个文档的类名、元素、属性和相关元数据的真实使用情况。关于流行类名的发现揭示了作者使用的一些共同的语义模式。虽然使用class属性的而不是是最常见的做法，但是最流行的类名如下:

footer
menu
title
small
text
content
header
nav
copyright
button
main
search
msonormal
date
smalltext
body
style1
top
white
link

在这个列表中，我们可以看到几个语义指示器，它们紧密地映射到新的 HTML5 元素，如表 3-1 所示。

所以如果你是一个好的标准化者，并且使用基于意义的类名，你已经帮助选择了这些新的 HTML5 元素名。太棒了。有一些稍微抽象一些，比如<aside>(我们很快会遇到)超过class="sidebar"，但是在这些情况下，流行的类名太过具体，限制了元素的可能用途。

⁵

结构积木:<师>、<段>、<条>

让我们首先比较一下用来构建页面的三个容易混淆的元素。

我们都知道并喜爱的普通容器。它是一个没有额外语义的流内容元素([j.mp/html5-div](http://j.mp/html5-div)<sup>6</sup>))。
<section>:一个通用的文档或应用部分，几乎总是有一个标题(可能在一个<header>中)，有时也有一个<footer>,。它是一大块与相关的内容，比如一篇长文的一个小节、页面的一个主要部分(比如主页上的新闻部分)，或者 web 应用标签式界面中的一个页面([j.mp/html5-section](http://j.mp/html5-section)<sup>7</sup>))。
<article>:文档或站点的一个独立的部分。这意味着它应该能够独立存在，如果您在其他地方遇到它(例如，在 RSS 提要中)，它仍然有意义。例子包括博客文章(duh)、论坛帖子或评论。像<section>，这些应该有一个标题，可能有一个页眉和/或页脚([j.mp/html5-article](http://j.mp/html5-article)<sup>8</sup>))。

与<部门>、<部门>、<条>的区别

这些定义最初听起来非常相似，所以让我们从<div>开始比较和对比它们。

元素

在编写 POSH (plain old semantic HTML)时，我们应该使用最合适或语义最准确的元素。虽然<div>具有一般流容器元素的语义，但除此之外它没有任何语义意义，并且它在没有更合适的元素时使用(即在 HTML 4 中一直是)。不要求<div>的内容彼此相关。

⁶

⁷ [www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element](http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element)

⁸

<节>元素

新的 HTML5 <section>元素类似于作为通用容器元素的<div>，但是它确实有一些额外的语义——它包含的东西是相关内容的逻辑组。

注意:<section>元素表示文档或应用的通用部分。在这种情况下，节是内容的主题分组，通常带有标题。

<section>也是一个切片内容元素。与<article>、<nav>和<aside>一起，表示文档中的新章节。想象一下，将您的页面制作成相关部分的嵌套列表，或者使用文字处理程序的 outline 视图:每个分区内容元素的标题都是一个新项目，缩进反映了嵌套。

**1。**示例列表项

**2。**另一个项目

1.嵌套项目

你明白了吗

我们将在本章后面的“HTML5 大纲算法”一节中介绍如何对内容元素进行分段来创建 HTML5 文档大纲，但是需要注意的重要一点是,<div>不是一个分段内容元素。

元素

新的 HTML5 <article>元素就像是一种特殊的<section>；它有更具体的语义含义，即是页面的一个独立、自包含的部分。我们可以使用<section>，但是使用<article>会给出更多的语义含义。

选哪个？

想一想 HTML 4，我们可以把这个选择比作<p>和<pre>之间的选择。两者都是文本的流动内容元素，但是<pre>就像是一种特殊的<p>，具有更具体的含义(“这是一个预格式化的文本块”)。<section>和<article>也是如此；<section>表示“相关内容”，而<article>表示“一段相关内容，对其自身有意义”，甚至在页面上下文之外(页面的页眉和页脚等)。).

这其中潜在的令人困惑的部分是，<section>可以用于页面的部分，可以包含<article>(就像主页的“最近文章”部分)，也可以用于长的<article>(在和<article>中的*)的部分。*

因此，要决定<article>、<section>或<div>是否合适，选择第一个合适的选项。

在 feed 阅读器中，附带的内容本身有意义吗？如果有，用<article >。
所附内容是否相关？如果有，使用

。
如果没有语义关系，就用。

除了偶尔使用为还没有风格的风格提供一个挂钩，我们预计不起眼的<div>将经常被<section>, <article>和其他新的结构元素取代——如果合适的话——在语义 HTML5 中。但是，不要害怕在适当的时候使用<div>；它仍然是有效的 HTML5。

<section>和<article>的用法类似于<div>在 HTML 4 中的用法；例如，这些元素不能在<blockquote>或<address>中使用。同样，一般来说，避免将一个<article>嵌套在另一个<article>.中，而是使用<section> s 来表示一个<article>的逻辑部分。一个值得注意的例外是博客文章的评论。最后，<section>和<article>不需要标题的情况是在 web 应用中(想想电子邮件应用的主列表视图)，但是*最好添加一个标题，*即使你通过 CSS 隐藏它。

使用这些元素的基本结构

这里有几个例子展示了<section>和<article>的用法。

一篇博客文章

这是我们正在处理的结构:

博客文章

标题

内容…

在 HTML 4 中，我们可能会将文章包装在<div class="article">中，等等。显然，我们应该在 HTML5 中使用<article>来代替。

Heading

Content…

一篇有小节的长文章(像论文)

下面是我们正在处理的文章结构:

文章

标题

一节

章节标题

内容

一节

章节标题

内容

一节

章节标题

内容

同样，在 HTML 4 中，文章通常会被包装在一个<div>中，而小节只会由<h1>–<h6>元素来提示。在 HTML5 中，文章应该包装在<article>中，而<article>的子部分应该通过包装在<section>元素中来明确表示，如果您喜欢部分编号，可能是在有序列表项中。

<article> <h1>Heading</h1> <section> <h2>Section heading</h2> <p>Content</p> </section> <section> <h2>Section heading</h2> <p>Content</p> </section> <section> <h2>Section heading</h2> <p>Content</p> `

这些都是有些过于简单的例子，所以在本章的最后，我们将看看一个基本的博客主页的结构。

标题:<表头>、<h 组>??、和

–

，加上<表尾>

接下来，让我们详细看看新的<header>、<footer>和<hgroup>元素。

注:切片元素包括<section>、<article>、<aside>、<nav>，还有<blockquote>、<body>、<details>、<fieldset>、<figure>、<td>。我们将在本章后面的“HTML5 大纲算法”一节中介绍这个概念。

<header>:用于切片元素的介绍和导航内容。这通常包括标题(一个<h1>–<h6>元素或一个<hgroup>元素)，但也可以包含其他内容，如<nav>元素或导航链接、目录、搜索表单或任何相关的徽标。它不能包含<footer>或另一个<header>(参见[j.mp/html5-header](http://j.mp/html5-header))。
<footer>:用于关于内容的附加信息，如作者、相关文档的链接、版权数据、页面顶部的链接等。，通常出现在内容的末尾。像<header>一样，不能包含<header>或<footer>元素(参见[j.mp/html5-footer](http://j.mp/html5-footer))。
<hgroup>:一种特殊形式的<header>，它只能包含<h1>–<h6>元素。它用于将标题和副标题组合在一起(见[j.mp/html5-hgroup](http://j.mp/html5-hgroup)<sup>9</sup>)。
<h1>–<h6>:HTML 4 中的标题元素又回来了，基本上没有变化，除了 HTML5 对正确使用它们有更强的指导(一般来说，不要跳过级别)，以及有趣的增加了 HTML5 风格的标题级别，我们将在本章后面介绍。([j.mp/html5-h1-h6](http://j.mp/html5-h1-h6))。

⁹

<header>的定义目的是包含介绍性或导航帮助，而不是定义它们的位置(标题通常在一个部分的顶部，但不是必须的)。

<footer>为相关链接、版权、作者信息。一个<footer>通常出现在一个部分的末尾，但是也可以出现在顶部，并且可以出现不止一次(例如，一个“页面顶部”链接)。对于某些内容，使用这些元素中的哪一个有一些交叉——作者信息在任何一个中都可以。

<header>和<footer>似乎在暗示设计师熟悉的页眉页脚。但是，不要让第一印象欺骗了你，因为这些元素适用于当前的截面元素。如果该元素是<body>，那么<header>或<footer>将应用于整个页面。但是如果是另一个分段元素，那么<header>或<footer>仅适用于该元素。想想俄罗斯嵌套娃娃…在可爱的小尖括号。

注意:<address>元素已经从为页面提供联系信息(每页只有一个)变成了由上下文“限定范围”。在 HTML5 中，<address>联系信息是针对最近的 <article>或<body> 元素的祖先*。和 HTML 4 一样，它不用于文字地址，除非地址也是联系信息——这种情况很少见(关于标记普通邮政地址，请参考第四章中的“微格式”)。假设每篇文章都是一个<article>，主页上的最近文章列表可以使用<address>作为每篇文章的作者名和简历链接(或其他联系信息)。*

一个<header>或<footer>本身可以包含分段内容元素——例如，在一个<footer>中，这可以是一个附录、索引、长跋或许可协议。但是，不要因为他们不能牵制<header>或者<footer>而过于得意忘形。对于复杂的页眉或页脚，需要嵌套的节内容元素，它们有自己的<header>和<footer>，使用<section>代替。

虽然<header>和<hgroup>最初很容易混淆，但是请记住<hgroup>只能包含一个<h1>–<h6>元素的标题组，用于副标题、可选标题或标语。<header>可以包含一个<h1>–<h6>元素或<hgroup> ，此外还有其他引入该部分的元素。如果没有其他的<header>内容，只有一个标题(所以不需要<hgroup>，也不需要样式挂钩，就使用相关的<h1>–<h6>元素。

让我们看一些例子。

只有一个标题的文章

这只有一个标题<h1>。不需要<hgroup>或<header>。

<article> <h1>Article heading</h1> <p>Content…</p> </article>

一篇文章 < 标题 > 带标题和元数据

现在我们在<header>中包装一个标题和元数据。

Article heading

(<time datetime=“2009-07-13” )

Content…

一篇带有<h 组>-封闭副标题的文章

这个例子在<hgroup>中有一个标题<h1>和副标题<h2>。

Article heading

Article subheading

Content…

带有标题、副标题和元数据的文章

最后，这里有一个使用<header>和<hgroup>的标题的例子。

<article> <header> `

Article heading

Article subheading

(13th July, 2009)

Content…

一些< hgroup >使用的例子

在这个部分中，您可以看到使用<hgroup>的效果。这是一篇带有备选标题的文章。

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

这是一个带有标语(品牌短语)的网站名称。

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

这是一篇长文章，标题分为一个标题和一个副标题。

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

现在，您可能想知道为什么需要同时拥有<header>和<hgroup>——它们似乎都是<h1>—<h6>元素的包装器。嗯，<hgroup>实际上执行另一个功能:隐藏子标题，使其不被大纲算法发现。让我们深入 HTML5 大纲的世界，看看它到底意味着什么。

html 5 的大纲算法

能够自动制作页面轮廓对浏览器和机器人来说都是一个有用的技巧。例如，它可以用于为盲人用户生成目录，使他们能够快速浏览页面。为了从 HTML 4 或 XHTML 1 文档制作页面轮廓，我们可以找到所有的<h1>–<h6>元素，并使用每个标题的编号来指示嵌套的级别。然而，字幕会增加嵌套，许多语义不太明确的页面为了表现会跳过层次，这两者都会给出不准确的轮廓。此外，大纲工具将无法分辨哪些标题是主要内容的一部分，哪些在侧边栏中，例如，两组标题通常都在通用的<div>元素中。

HTML5 通过一个新的大纲算法([j.mp/html5-outline](http://j.mp/html5-outline)<sup>10</sup>)解决了这个问题，我们在提到内容元素的分段时提到过这个算法(一个“简单的旧嵌套列表”)。虽然这听起来可能不令人兴奋，但它有助于使我们的内容更容易访问和使用。此外，理解轮廓的创建将会解释一些容易混淆的事情。这些大纲由中的标题组成，这些标题将内容元素分段，比如我们见过的<section>和<article>，加上<nav>和<aside>，它们定义了页面上相关内容的主要块。

每个章节内容元素中的第一个<h1>–<h6>作为大纲中该章节的标题，任何后续标题在大纲中创建一个隐式包围章节([j.mp/headings-sections](http://j.mp/headings-sections)<sup>11</sup>)；也就是说，它不在您的代码或 DOM 中，但是大纲算法假装它在。较低级别的标题元素构成嵌套的隐式节，而相同或更高级别的标题元素在当前的隐式节之后并且在相同的级别上构成新的隐式节。

*注意:*隐式封闭部分是 HTML5 的大纲如何处理错误和 HTML5 之前的内容。

例外情况是<hgroup>元素，它隐藏了大纲算法中除第一个孩子<h1>–<h6>之外的所有元素，我们很快就会见到它。请注意，<header>不是标题内容元素(规范用语为<h1>–<h6>和<hgroup>)或分段内容元素，它不影响大纲算法。

¹⁰

¹¹

概述行动

这在理论上很好，但这意味着什么呢？好吧，让我们来看看一些实际的概要，感受一下正在发生的事情。你可以在家里玩一个 outliner，比如 h5o ( [j.mp/html5-outliner](http://j.mp/html5-outliner)<sup>12</sup>)或者([j.mp/gsnedders-outliner](http://j.mp/gsnedders-outliner)<sup>13</sup>)。

下面是一个基本的 HTML 4 示例及其概要:

Article heading

Article subheading

Some text

Section heading

More text

Another section heading

A little more text

请注意，文章副标题在大纲中显示为相当于章节标题，因为它的标题更低。然而，它的标题级别(<h3>)并不影响大纲——它只是缩进一级，而不是两级。

**1。**文章标题(隐含部分)

1.文章副标题(隐含部分)

2.章节标题(隐含章节)

3.另一个节标题(隐式节)

¹²

¹³

这里是 HTML5 中的同一个例子，使用了显式分段元素和<hgroup>。

Article heading

Article subheading

Some text

Section heading

More text

Another section heading

A little more text

没有更多的文章副标题，但一个神秘的“无标题部分”出现。请继续阅读，找出原因。

**2。**无标题部分

1.文章标题

1.章节标题

2.另一个章节标题

剖切根元素

除了划分内容元素之外，还有另一组元素可以拥有自己的轮廓。

<blockquote>

<body>

<details>

<fieldset>

<figure>

<td>

这些剖切根元素对它们祖先的轮廓没有贡献。一般来说，这意味着它们隐藏了大纲算法中没有用的东西。虽然<body>也在这个列表中，但它是文档大纲的基本元素。像划分内容元素一样，划分根元素定义了所包含的<header>和<footer>元素的范围，它们从来都不是隐式部分的子元素。

无标题的祸害一节

那么，当我们有一个没有标题的剖分元素时会发生什么呢？你可能已经猜到了，我们在大纲中有一个部分叫做“无标题部分”我们在前面的大纲示例中看到了这一点——在那种情况下，无标题部分来自<body>。当然，“无标题部分”并不是特别有帮助，所以一般来说<section>、<article>、<body>、应该总是有标题。对于其他切片元素，如<aside>，在禁用 CSS 的情况下检查页面，看看内容是否仍然有意义。如果你不希望一个标题出现在完成的设计中，你可以添加一个并通过 CSS 隐藏它。这确保了标题对于屏幕阅读器和机器人仍然可用，例如，在 HTML 4 和 XHTML 1 中使用<div class="nav">有时是为了便于访问。如果有疑问，我们建议你添加一个——盲人用户(包括谷歌)会感谢你的。

注意:分段元素是我们对“分段内容和分段根元素”的简称，因为这相当拗口。

下面是另一个轮廓示例，显示了如何从祖先的轮廓中排除剖切根元素的轮廓(<blockquote>、<body>、<details>、<fieldset>、<figure>和<td>)。

Exciting simian adventures

Article heading

Some text

Section heading

More text

Quote heading

      …

Subsection heading

…

A little more text

下面是大纲，显示了运行中的截面根元素、隐式截面和无标题截面。

**3。**刺激的猿猴冒险

1.文章标题

1.章节标题(注意没有<blockquote>标题)

1.分段标题(基于标题级别的隐式分段)

2.无标题部分(<section>无标题)

此外，我们可以看到隐式节创建了一个嵌套节，因为它的标题相对较低— <h2>Subsection heading</h2>将使它与“节标题”处于同一级别，但是<h4>标题不会进一步缩进大纲中的标题。最后，显式的“无标题部分”关闭了前面的隐式部分。

这个大纲算法，以及它的隐式节的创建，解释了为什么我们应该总是为至少<section>和<article>使用标题内容元素，为什么副标题应该用<hgroup>包装，以及为什么每个标题元素应该在它自己的节元素中。然而，它也有一个有趣的副作用:将标题级别从文档大纲中分离出来。

HTML5 样式的标题元素级别

在 HTML 中，作者被鼓励合理地使用标题元素<h1>–<h6>——使用层次来表示嵌套，而不是跳过层次——但这在长的或复杂的文档中可能是个问题。有一些文件实际上需要超过六级的标题！(事实上，我们一直想知道可怜的<h7>–<h9>后来怎么样了。)由于大纲算法，我们现在有两种方法可以在 HTML5 中使用标题。

** 就像在 HTML 4 中，标题元素(<h1>–<h6>)决定了内容的重要程度(想象一下做一个大纲)。<h1>用于页面或文章标题，后续标题根据需要合理增加，以表明提纲。

HTML5 中引入的一种新方法，其中显式分段内容元素的嵌套决定了文档的轮廓。这意味着分区内容元素(<section>、<article>、<nav>或<aside>)中排名最高的标题元素(<h1>–<h6>或<hgroup>)成为该节的标题，而不管它是否跳过级别。

这种新方法可能更容易，因为文档大纲中的标题级别与所使用的标题元素(以及如何使用 CSS 设置标题样式)是分开的。因为大多数部分只需要一个 heading 元素，所以你可以在任何地方使用<h1>(几乎)，根据<section>父元素的数量来设计样式。然而，当前的浏览器不会正确地解释这一点(例如，当 CSS 被禁用时)，这需要高级 CSS 选择器支持样式，所以现在我们建议您不要这样做。

或者，因为使用显式分段元素允许我们跳过标题级别，所以您可以使用任何想要的标题(例如，基于 CSS 样式)，而不必担心合理使用<h1>–<h6>。需要时，可以通过<hgroup>或类的样式来处理字幕等样式异常。

嵌套标题元素层次的例子

这是标题元素的标准嵌套(使用

到

)。

Article heading

Article subheading

Section heading

Content…

Subsection heading

Content…

标题元素级别的新样式示例

这个示例使用 HTML5 样式的标题级别—新的节重置(

被有意跳过，以便子节的标题使用

样式)。

<article> <hgroup> <h1>Article heading</h1> <h2>Article subheading</h2> </hgroup> `

Section heading

Content…

Subsection heading

Content…

这两者将产生相同的 HTML5 轮廓。

**4。**文章标题

1.章节标题

1.小节标题

如前所述，在 HTML5 中，除了第一个标题元素之外，sectioning content 元素中的所有元素都会在文档大纲中生成一个隐含的节。因此，建议添加显式切片包装器。如果你没有，确保你没有跳过标题级别。

更多的结构元素:<导航>，<暂且不说>，<人物>(还有<人物标题>)

现在我们来看看另外两个分段内容元素，<nav>和<aside>。我们还将触及<figure>和它的孩子<figcaption>，并将它们与<aside>进行比较。

<nav>:导航链接的一个部分，或者指向其他页面(通常是站点导航)，或者指向同一页面上的部分(例如长文章的目录)。这是针对主要导航块的，而不仅仅是针对任何一组链接。一个经验法则是，你可以为它添加一个“跳过导航”链接([j.mp/html5-nav](http://j.mp/html5-nav)<sup>14</sup>)。
<aside>:页面的一部分，由与周围内容无关但又独立的内容组成。在印刷中，这将是一个侧栏，引用，或脚注。在博客文章中，这可能是关于文章的相关信息、页边空白处的额外信息或评论部分([j.mp/html5-aside](http://j.mp/html5-aside)<sup>15</sup>)。
<figure>:对于理解至关重要，但可以从文档流中删除(移动到不同位置)而不影响文档含义的内容。这可用于图像或视频，但也可用于任何其他内容，包括图表、代码示例或其他媒体。使用可选的(也是美味的)子元素<figcaption>来提供一个标签([j.mp/html5-figure](http://j.mp/html5-figure)<sup>16</sup>)。

你可能已经在使用<ul class="nav">或类似的东西进行网站导航了。元素允许我们显式地标记导航链接组。这具有可访问性的好处；例如，它允许屏幕阅读器等辅助技术的用户跳过导航，直接进入内容，或者跳过到导航。我们可以用这个作为另一种方式来决定某个东西是否是一个主要的导航块——通过热键访问导航对盲人用户有帮助吗？虽然站点和页面内导航显然是必不可少的，但页面页脚的内容突出显示可能不是。搜索框？嗯，这要看情况…网站的用户会这么想吗？注意，如果你使用列表导航，你仍然需要<ul>或<ol>元素(你应该这样做——这是最合适的元素),但是你也可以包含标题或其他相关内容。下面是一个使用中的<nav>的例子，带有一个标题(很可能通过 CSS 隐藏)。

<nav> <h2 class="a11y">Main navigation</h2> <ul> `

Home
Weblog
About
Contact
`

¹⁴

¹⁵

¹⁶

内容应该是对主要内容的补充(但不是理解主要内容所必需的);即任何相关的内容。虽然印刷设计可以提供灵感，但不要停留在引用上。例如，脚注提供了额外但不重要的信息，引用(虽然是重要内容)是从主要内容中引用的文本。但是，记住<aside> *一定是相关的。*将你的站点的侧边栏作为<body>的子节点放在<aside>中是可以的，但是整个站点的信息不应该出现在<article>的子节点<aside>中。此外，<aside>也适用于广告，只要它与父 sectioning 元素相关。这里有一个例子<aside>在文章的空白处提供额外的信息。

`


Sectioning root elements are <blockquote>,
<body>, <details>, <fieldset>,
<figure>, and <td>

<header> and <footer> apply to the current sectioning content or 'sectioning root' element…
`
<figure>内容是必不可少的，但它的位置不是。您当前使用 CSS 定位的任何部分都是不错的选择。通常这将从文本中引用，如下所示，但这不是必需的。

`

… Here is an example of using hgroup for a subtitle.


`
您还可以使用<figcaption>为<figure>提供可选标题，如下所示，作为第一个或最后一个子元素。

`


An article heading with an alternative heading



`
最后，<figure>可以包含多条内容，如下所示。

`
```
<ruby><strong>cromulent</strong>

<rp>(</rp><rt>crôm-yü-

lənt</rt><rp>)</rp></ruby>
```
Using ruby text for a dictionary definition by displaying the ruby text inline
after the base text
`
通过问自己内容是否对理解该部分至关重要，在<aside>或<figure>之间做出选择。如果内容只是相关的，而不是必要的，使用<aside>。如果内容是必要的，但是它在内容流中的位置不重要(它可以移到附录吗？)，使用<figure>。当然，如果它的位置关系到前面和后面的内容，使用其他更合适的东西！还要记住，<nav>和<aside>是分节内容元素，因此它们的标题将被添加到文档大纲中。<figure>是一个分段根元素，因此任何子标题都将从大纲中隐藏。

把所有这些放在一起

我们已经走过了很多地方。概括地说，HTML5 为相关内容块提供了几个新元素——基本上是文档的一个逻辑部分。使用这些元素而不是<div>在语义上更有意义，并且免费给我们带来额外的好处(比如改进的可访问性)。让我们回顾一下到目前为止我们已经讨论过的内容，看看我们如何通过将一个简单的页面转换成 HTML5 来在实践中使用这些新元素。我们还将查看几个备选方案，以帮助您考虑新的语义，而不必承诺使用新的语义元素。

概括地说新增剖切内容要素

下面是我们讨论过的新元素的总结。
- <section>:一大块相关内容。
- <article>:一个独立的、自包含的相关内容块，仍然对其自身有意义(例如，在 RSS 提要中)。
- 一大块内容，与周围的内容关系不大，但对理解这些内容并不重要。
- (参见<figure>:对理解周围内容至关重要但可以移动的内容块(例如，移动到附录)。
- <nav>:主导航块(一般是站点或页面导航)。
- <div>:没有附加语义的内容块*(例如，用于 CSS 样式挂钩)。*
除了极少数例外(通常在 web 应用中)，<section>和<article> 元素应该有一个标题，可能在一个<header>元素中带有任何其他介绍性信息。我们可以使用 HTML5 Doctor 网站上发布的以下评论(在文章“部分元素”之后)([j.mp/section-heading](http://j.mp/section-heading)<sup>17</sup>)作为在<section>和<div>之间做出决定的经验法则:

【C】有意识地为每个<section>添加一个标题，即使你随后用 CSS 隐藏了标题(对于可访问性来说<nav>通常就是这种情况)。如果当 CSS 被禁用时，它看起来像是不应该有标题的内容，那么它很可能不是一个<section>。

研究用油

记住，有一个或多个副标题的标题应该在<hgroup>中。除了<header>，sectioning 元素还可以包含一个或多个带有附加信息的<footer>元素，例如作者(<address>)或版权(<small>)内容、相关链接等。需要注意的是<header>和<footer>适用于它们所在的分节元素(这是页眉或页脚的<body>)。还有，记住<header>和<footer>不能包含<header>或<footer>本身。

¹⁷ [html5doctor.com/the-section-element/#comment-940](http://html5doctor.com/the-section-element/#comment-940)

注:切片元素包括切片内容元素<section>、<article>、<aside>、<nav>，以及切片根元素<blockquote>、<body>、<details>、<fieldset>、<figure>、<td>。

最后，虽然单词“页眉”、“页脚”和“旁白”都带有先入之见，它们的语义来自它们包含的内容类型，而不是来自它们的呈现或相对位置。例如，<aside>可以包含一个脚注，而包含“页面顶部”链接的<footer>可以同时出现在一个部分的顶部和底部。

现在让我们看看理想化的文章页面的示例结构，使用标准的页眉布局(带有标志等)。)，站点导航，主列，侧列和页脚。

将一个简单的页面转换成 HTML5

这是我们页面各部分的轮廓。

页面标题(网站名称、徽标、搜索等。)

主导航

主要内容(包装)

文章(主栏)

文章标题

文章元数据

文章内容

文章页脚

侧栏

侧栏标题

侧栏内容

页面页脚

图 3-1 说明了该页面。

**图 3-1。**文章页面布局

所以我们用标准的 POSH (XHTML 1.0 风格)来写吧。

`
        Article (XHTML 1)

Site name
- Site navigation
` `


Article title

Article metadata

Article content…

Article footer



Sidebar title

Sidebar content…



Footer
   `
现在让我们使用新的结构元素将其转换为 HTML5。

注意:为了简洁起见，我们将省略第二章中涉及的用于浏览器支持的 CSS 和 JavaScript。如果你在家编码，记得添加它们。

`
             Article (HTML5)` `

Site name
- Main navigation
Article title

Article metadata


Article content…

Article footer



Sidebar title

我们所做的改变几乎就像是一次代码春季大扫除。我们已经更改为简单的 HTML5 文档类型和charset在第二章中介绍，并将用于页面语义部分的<div>替换为新的 HTML5 结构元素。我们的代码是不同的，但是 HTML5 的“进化，而不是革命”方面是显而易见的。

注意这里我们假设侧边栏包含与文章无关的内容(比如最近的文章等等)。)，所以它是<body>(一个页面侧边栏)而不是<article>的后代。如果它只包含与文章无关的内容，我们可以让<aside>成为<article>的孩子。此外，我们假设页眉和页脚不包含嵌套的<header>或<footer>元素，因为在这种情况下我们必须使用<section>来代替(记住<header>和<footer>本身不能包含<header>或<footer>)。

那么，对于那些你担心关闭了 JavaScript 的 Internet Explorer 用户，或者你的老板是谨慎型的人的网站呢？这是否意味着我们介绍的令人兴奋的 HTML5 元素只是一个白日梦？不要害怕，亲爱的读者。

介绍“HTML4.5”:通过< div class=“” >添加 HTML5 的语义

我们不断回到 HTML5 的一个方面是，它是一个滑动的尺度，而不是全部或没有。本着这种精神，我们为你发明了一个全新的元规范，我们称之为“HTML4.5”。与其说这是 W3C 风格的规范，不如说这更像是一个想法——我们可以使用 HTML5 中我们想要的部分，而不需要全力以赴。在这种情况下，我们希望 HTML5 的新元素具有良好的语义，但又不用担心 Internet Explorer 会破坏一切。我们可以通过使用 HTML5 的新元素名(和隐含的语义)作为<div>类名来做到这一点。

当然，我们没有得到内置语义的任何好处。然而，仅仅考虑一下 HTML5 的结构元素就会使我们的代码更具逻辑性和语义性。如果您认为将来可能会转换到 HTML5，HTML5-elements-as-class-names 方法应该可以消除很多转换的痛苦，特别是使用一点 regexp 魔法。

下面是使用 HTML5 元素类名的 XHTML 1 版本。

`
        Article (XHTML 1), with HTML5 class names

Site name
- Site navigation
Article title
` `
Article metadata


Article content…

Article footer



Sidebar title

Sidebar content…



Footer
   `
这里是在 HTML5 中，再次使用带有 HTML5 元素类名的<div>,而不是新的 HTML5 元素。

`
        Article (HTML5), with HTML5 class names

Site name
` `
- Site navigation
Article title

Article metadata


Article content…

Article footer



Sidebar title

Sidebar content…



Footer
   ` `         Article (HTML5), with HTML5 class names

Site name
- Site navigation
Article title

Article metadata


Article content…

Article footer


` `
Sidebar title

Sidebar content…



Footer
   `
您可能想知道为什么这两个例子如此相似——毕竟，只有 DOCTYPE 和 charset 不同！答案是 HTML5 的核心原则之一是兼容性 ( [j.mp/html-design](http://j.mp/html-design)<sup>18</sup>),而<div>仍然是一个完美的 cromulent HTML5 元素。

通过 ARIA 地标角色向“HTML4.5”和 HTML5 添加语义

刚刚说过，如果我们使用<div class="">，浏览器将不会获得任何语义上的好处，有一种方法可以增加语义——通过 ARIA landmark role s ( [j.mp/landmark-roles](http://j.mp/landmark-roles)<sup>19</sup>)。Web Accessibility Initiative-Accessible Rich Internet Applications specification(WAI-ARIA)是一个 W3C 可访问性规范，它提供了一个框架，用于添加属性来标识用户交互功能、它们之间的关系以及它们的当前状态。例如，如果您将一个链接设计成一个按钮，那么您可以使用role="button"将按钮语义应用到这个链接。这对于屏幕阅读器来说有很大的不同，例如，允许用户更容易地导航和与我们的内容交互。

好消息是，只要我们不试图改变 HTML5 元素的强原生语义，在 HTML5 ( [j.mp/html5-semantics](http://j.mp/html5-semantics)<sup>20</sup>)中使用 ARIA 是没问题的。使用适当的role将传达我们的语义，使这些元素成为导航地标以支持屏幕阅读器。由于 screen 读者在实现 HTML5 支持方面进展缓慢，目前这同样适用于新的 HTML5 元素，因为已经拥有这些语义(腰带和吊带方法)以及我们的<div class="">风格。一个额外的好处是，我们可以在 HTML5 中使用 ARIA 来验证我们的代码，这在使用 W3C 验证器的 HTML 4 中是不可能的。表 3-2 显示了 HTML5 结构元素的默认隐含 ARIA 角色。

¹⁸

¹⁹

²⁰ [www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#wai-aria](http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#wai-aria)

现实淋在我们易接近的游行上

但是现在是坏消息——至少一个流行的屏幕阅读器(Internet Explorer 中的 Window-Eyes v7.5)在新的 HTML5 元素([j.mp/aria-support](http://j.mp/aria-support)<sup>21</sup>)上使用 ARIA role s 时出现了严重的问题。尽管如此，我们仍然认为在适当的地方加入标志性角色是值得的，因为有其他流行的屏幕阅读器支持这一点，但还不支持 HTML5 的原生语义。

²¹

值得庆幸的是，大多数使用屏幕阅读器的人不止使用一个，在最坏的情况下，语义将与标准的 HTML 4 页面相同。在 HTML5 的原生语义得到认可的那一天到来之前，尽可能通过在代码中添加这些角色来支持提高可访问性的崇高事业。此后，由于 HTML5 的原生语义，一个良好编码的 HTML5 页面(使用新的结构元素)通常不再需要 ARIA 角色。

可访问性和 HTML5

既然我们已经提到了在 HTML5 中使用 WAI-ARIA 是可能的，那么现在是一个很好的机会来简单地谈谈 HTML5 的可访问性。不幸的是，可访问性是一个缺乏支持、应用更差、充满激情的政治话题(或者被称为火焰战争)，但至少烟花是漂亮的。

幸运的是，W3C HTML 设计原则既易于访问又实用。“普遍接入”原则提到了媒体独立和不分能力人人接入 ( [j.mp/html-design](http://j.mp/html-design)<sup>22</sup>)。媒体独立性意味着 HTML5 特性应该在各种平台上工作，而不仅仅是在可视化浏览器中。我们将在第四章的中看到 HTML 4 的表示元素的重新排列的例子。

然而，每个人的访问暗示了 HTML5 处理可访问性的一个更基本的变化。传统上，使内容可访问在很大程度上依赖于使用特定于可访问性的特性，比如<img alt="">和<table summary="">。不幸的是，在现实世界中，这样的隐藏元数据很少被添加，当被添加时，做得很差或不正确。因为它是隐藏的，所以当主要内容更新时，它也经常变得不同步。HTML5 的基本理念是通过将信息移动到主要内容中来公开这些信息，因为这对所有用户都有好处。这导致了 HTML5 规范中关于我们应该如何确保图像、表格等的详细指导。得到了充分的描述，并且这应该优先于在属性中隐藏信息。这一理念可以总结如下:

²²

“在可能的情况下，在作者没有意识到的情况下，欺骗他们写出容易理解的内容。”([j.mp/trick-authors](http://j.mp/trick-authors)<sup>23</sup> )

虽然这有点讽刺，但本章中的新元素(都有“内置”语义)是 HTML5 如何暗中鼓励我们默认创建可访问内容的明显例子。虽然更好的可访问性总是需要额外的工作，但是我们欢迎这种新的方法，它将显著提高基线可访问性。

可访问性技术，不断发展

值得注意的是，并不是每个人都对 HTML5 目前在可访问性方面采取的“实用主义”立场充满热情，比如在<img>上的longdesc(“过时”！)，以及<table>上的summary(“作者应该用一种不同的手法来代替”！).然而，只要我们坚持 HTML5 的设计原则，关注每个人的访问，不管能力如何，我们就可以忽略这些争论。

这些变化影响了一些使我们的内容可访问的标准技术，所以让我们来看一下基础知识。

上的 alt 属性

HTML5 更明确地将alt定义为“元素<img>的回退内容”(强调是添加的)，而不仅仅是替换文本。该规范还规定(除了少数特定情况)alt 文本是必需的，必须是图像的适当替换。然而，什么是合适的取决于图像的目的。
- 提供有用的信息:文本alt应该传达同样的信息。
- 执行功能:文本alt应该传达功能。
- 增强美感(例如，不添加任何信息的装饰性图像):虽然这取决于具体情况，但大多数装饰性图像应该有空白的alt文本(alt="")。
图 3-2 显示了带有描述性替代文本的图像，为图像提供了适当的文本替换。

²³

**图 3-2。**带有描述图像内容的可选文字的图像

图 3-3 是一个图像，其中的alt文本包含按钮的内容——“登录”——以传达其功能。

**图 3-3。**带有描述图像功能的替代文本的功能图像

图 3-4 中的图像仅用于装饰，因为它不传达任何信息，所以空的alt=""是合适的。

**图 3-4。**带有空 alt 文本的装饰图像

在一些特定的情况下，HTML5 规范规定我们应该使用空白的alt文本(alt="")。
- 当图像已经在周围内容中描述过，比如一个<figcaption>(避免重复)。
- 当图像是更大图像的一部分时，其中另一个图像包含所有图像的适当的alt文本。
在以下情况下，如图图 3-4 所示，HTML5 表示我们必须使用alt="":
- 当一个图像仅仅是为了装饰(它不是内容；它不提供美学以外的功能或信息)。
- 当图像不可见时；例如，统计计数器(width和height必须设置为 0)。
- 当图标或徽标出现在具有相同含义的文本旁边时。
这意味着同一幅图像可以有完全不同的alt文本(甚至是alt="")，这取决于它的使用场合和它想要表达的内容。

“我们的目的是用图像的alt属性的文本替换每一幅图像，而不会改变页面的含义。”([j.mp/alt-guidelines](http://j.mp/alt-guidelines)<sup>24</sup> )

我们可以使用 ARIA 属性aria-describedby=""在图像和它在内容中的描述之间建立明确的语义联系，但是在一般情况下这是不必要的。请记住，alt文本是后备内容，而不是图像说明或标题。将<figure>与<figcaption>(与aria-labelledby具有相同的原生语义)或title属性用于图像的标题或其他额外信息。

下面是一个图片示例，在alt中提供了后退内容，在<figcaption>中提供了标题。我们可以将aria-labelledby="albert"添加到<img>中，明确地将它与<figcaption>(通过id="albert")关联起来，直到用户代理理解了<figcaption>的原生语义，但是考虑到上下文，这可能是不必要的。

<figure> <img src="img/albert.jpg" alt="A close-up in profile of![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/begin-h5c3-web-evo/img/U002.jpg) the rhesus monkey Albert I, looking intently to the right. The background is out of![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/begin-h5c3-web-evo/img/U002.jpg) focus and the photo is in black and white."> <figcaption id="albert">Albert I before his historic trip to space on 14th ` June, 1949.
`

²⁴

当书写文本时，想象一下通过电话向某人描述页面。更详细的建议请参考 HTML5 规范([j.mp/html5-alt](http://j.mp/html5-alt)<sup>25</sup>)。

上过时的 longdesc 属性

longdesc属性旨在提供一个链接，链接到一个包含更多图像信息的单独页面。因为这基本上是隐藏的内容，几乎从不使用，而且几乎总是被错误地使用，所以它现在在 HTML5 中已经过时了。这意味着如果它已经在你的内容中，浏览器支持没有变化(缺少)，但是 HTML5 规范鼓励你不要使用longdesc，你将从 HTML5 验证器得到一个错误。

推荐的 HTML5 替代方法是将这些内容添加到当前页面，可能使用aria-describedby=""显式连接，我们刚刚遇到了它，它允许我们将描述从图像中移出。如果内容无法包含在当前页面中(比如因为描述了一个非常详细的图表，太长)，我们可以用<a>做一个描述性页面的链接，反正基本上就是longdesc的功能了。这使得所有用户都可以访问内容，而不仅仅是那些使用辅助技术浏览器的用户。

上过时但符合的汇总属性

首先，这到底是什么意思？好吧，过时的特征在验证中给出错误，而过时但符合的特征只给出警告。所以这是“不要用这个”的一种不太严厉的说法，但是信息是不变的。

summary属性旨在允许专门针对辅助技术用户的<table>的详细描述。真实世界的使用与longdesc非常相似。HTML5 提倡将这种解释性文本移到主要内容中，并建议我们应该引入任何可能难以理解的表格。这可以通过多种方式实现，比如在周边内容中，在<caption>中，在<caption>内部的<details>中，通过<figure>等。理想的解决方案是调整<table>的布局和标题，使其易于理解，这样就不需要解释了。

下面是表 3-2(“html 5 元素与 ARIA 地标role对比”表)的一个例子，使用了<caption>、<thead>、scope，足够清晰，不需要额外解释:

²⁵ [www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-1.html#alt](http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-1.html#alt)

<table id="mapping-html5-to-aria-landmark"> <caption>Mapping HTML5 Structural Elements to Appropriate <abbr>ARIA</abbr>![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/begin-h5c3-web-evo/img/U002.jpg) Landmark Roles</caption> <thead> <tr> <th scope="col">HTML5 Element</th> <th scope="col"><abbr>ARIA</abbr> Landmark role</th> <th scope="col">Notes</th> </tr> </thead> <tbody> …

andObsolete axis properties on

axis属性允许作者将单元格放入概念类别中，这些概念类别可以被视为在 n 维空间中形成轴。如果这对你有意义，那么…

接下来，它基本上旨在供将来的某种浏览器使用，具有“表查询语言”，大概类似于 SQL 通过允许用户过滤表来访问数据库信息。它的工作原理是将类别应用于标题单元格…至少在理论上是这样。在 HTML 4 定型十多年后，axis属性仍然没有浏览器支持，几乎没有工具支持。幸运的是，在实践中，scope属性结合清晰、良好编码的<table>通常足以复制这一功能。您可以在前面的代码示例中看到正在使用的scope。

其他 HTML5 可访问性问题

HTML5 可访问性的其他几个领域仍在积极工作，最显著的是新元素<video>、<audio>(现在与<track>)和<canvas>。我们将在第五章的中更详细地讨论这些。

HTML5 可访问性:新希望

尽管存在可访问性问题的挑战，但正如 W3C HTML 设计原则所声明的“每个人的访问，无论能力如何，都是必不可少的”([j.mp/html-design](http://j.mp/html-design)<sup>26</sup>)。对于我们和 HTML5 的创造者来说，重要的是实现这个目标，而不是我们使用的具体技术。随着新元素的内置语义的极大增强，以及媒体独立性作为基本原则，HTML5 在默认情况下已经比它的前辈更容易访问。虽然在良好编码的 HTML5 中这通常是不必要的，但拥有使用 WAI-ARIA 的能力也让我们能够在需要时补充可访问性——只要我们不试图覆盖 HTML5 的内置语义。现在我们所需要的是用户代理支持赶上来！

总结

我们已经遇到了 HTML 4 的<div>的一系列新的、更具语义的替代物，例如分段内容元素(<section>、<article>、<aside>和<nav>)。我们还发现了大纲的算法乐趣，它基于对内容元素和标题的划分(<h1>–<h6>)。我们已经看到了轮廓是如何受到<hgroup>、隐式截面和截面根元素(<blockquote>、<body>、<details>、<fieldset>、<figure>和<td>)的影响的。我们还介绍了<header>和<footer>是如何在 sectioning 元素中使用的(以及如何被 sectioning 元素限定范围),看了一下 HTML5 样式的标题，并了解了<figure>和<figcaption>。将所有这些放在一起，我们已经看到了如何制作 HTML5 和“html 4.5”页面，此外，我们还对 HTML5 中的可访问性进行了简要概述。总而言之，这是相当大的进步。

虽然 HTML5 是进化的，但这些新的语义要求我们在提供新的视角的同时，重新思考过去的习惯。你可以通过改变文档类型来开始使用 HTML5，就像在第二章中提到的那样，并且随着你了解的越来越多，也许应该一次做一点点的转换。然而，要真正受益于 HTML5 的新思维，我们建议从 HTML5 的角度重新思考任何现有的网站。这也是一个很好的机会来重新评估你的技术和工作流程，并取代现在过时的想法。

²⁶ [dev.w3.org/html5/html-design-principles/#accessibility](http://dev.w3.org/html5/html-design-principles/#accessibility)

作业

我们一直在为戈多和贝克小姐制作页面，所以选择一个并在适当的地方添加 HTML5 的语义元素*。当你这样做的时候，试着忘记你的基于 HTML 4 和 XHTML 1 的关于使用什么元素的假设，更重要的是关于元素应该是什么样子的假设。在运用本章所学的知识时，重点放在语义上。如果你觉得自己开始滑下一个语义兔子洞，深呼吸，记住语义吹毛求疵是不必要的。有时有不止一种方法来标记事物，这很好。如果有疑问，请记住<div>仍然完全可以使用。*

*通过以下方式检查您的作业:
1. 验证您的页面。
2. 安装并使用 HTML5 Outliner (h5o) bookmarklet。结果如你所料吗？
3. 在浏览器中查看页面。虽然我们的页面可能看起来有点厚，但即使使用浏览器默认样式，仍然应该有一个清晰的视觉层次，并且一切都应该有意义。
对于额外的学分，试着在你做的另一个页面上这样做，看看你的新语义眼镜是否让你以不同的方式看待事物。

延伸阅读

本章涵盖的每个元素都有关于 HTML5 Doctor 的文章，你可以在[html5doctor.com/article-archive](http://html5doctor.com/article-archive)找到链接。如果您发现大纲算法部分令人困惑，那么 Mike Robinson 撰写的关于文档大纲的 HTML5 Doctor 文章将会有所帮助([html5doctor.com/outlines](http://html5doctor.com/outlines))。一定要看完每篇文章的评论！***