HTML5 项目实践指南（一）
零、简介
这本书集中讨论了 HTML5 在目前没有很好记录的项目中的实际应用。这本书关注的是那些能增强你的网站的项目；因此，你不会找到 HTML5 的历史，也不会看到对大多数网页设计师不常用的东西的详细讨论，比如 API(应用编程接口)。有几本书是关于 HTML5 的历史和 API 的，所以重复它们是没有意义的。这本书的目的是通过将 HTML5 的优点与以前记录不多的激动人心的技术结合起来，帮助你创建有吸引力的、有用的网站。
这本书的起源
虽然多年来我设计了许多网站，但我经常会对自己说“我到底是怎么做到的？”或者“他们到底是怎么做到的？”这些“究竟如何”的主题我能找到的任何手册都没有涉及到这些技巧。因此，我收集了一套由我的研究结果和实际实验组成的操作技巧。最棒的是，我基于这些技术编译了一系列模板。这些都是非常有用的节省时间的方法。由此产生的书(存储在我的硬盘上)非常有用，所以我决定以书的形式与其他设计师分享。我的模板是在 HTML5 中创建的，在必要的地方，它们包含了使 Internet Explorer 7 和 8 能够理解 HTML5 语义标签的技巧。我对解决方案的探索就像一次考古挖掘。我有证据表明宝藏被埋了。最终出土后，我发现这些珍贵的文物支离破碎，广泛分散；他们的条件也很差。我的任务是把这些碎片组装起来，然后清洗、打磨，以便公开展示。然而，一个问题仍然存在，因为许多碎片丢失了。我不得不通过反复试验来重新创造这些。
这本书诞生于挫折。大多数手册、论坛和网站都给出了本书所涉及主题的代码片段，但是网站设计者需要解决如何在现实世界中应用这些代码的问题。这意味着要从许多来源中筛选出足够的信息。实际应用需要更多的时间进行反复试验。
这些工具的实际的、充分发挥作用的例子通常像母鸡的牙齿一样稀少。忙碌的网页设计者不应该费力地翻阅理论或历史，却发现没有提供实际应用。他们也不应该为了从一个冗长的段落中提取一些意思而去读五遍。
诚然，这本书的五个主题已经包含在厚重的单一主题手册中，但忙碌的设计师可能不希望购买一大堆单一主题的手册，并花时间在它们之间搜寻。在本书中，这些手册都在一个章节中进行了总结，对于希望快速创建 PayPal 页面或可访问网站、针对搜索引擎优化的网站或了解 HTML5 和 CSS3 的设计师来说，这些章节已经足够了。
在本书中，我试图通过提供以下内容来避免这些问题:
这本书是给你的吗？
- Do you want to know and use the enhancements provided by HTML5 and CSS3?
- Are you an IT lecturer or trainer looking for a set of texts to answer students' questions about HTML5, provide you with many ready-made projects and provide valuable resources for students' personal libraries?
- Are you an IT student who wants to surpass the basic principles of HTML4 and CSS2? You may spend many days or even weeks searching online for how to operate it. Would you rather collect examples of the complete work of these hard-to-find tools? Some items in this book can finally be constructed by piecing together some computer textbooks with a single theme and fragments of websites. Do you prefer to describe them step by step in a book?
- Many single-theme web page design manuals are large and lengthy. Searching for them takes time. Do you want to fully summarize the practical content in one chapter? By searching for a technology online or in books, you will find several ways to do the same job. I tested several technologies and chose the easiest way to do the job well. Do you think the tried and tested techniques in this book will save you time in research and testing?
- Do you want a downloadable toolkit consisting of free and easily modifiable templates?
- Do your customers ask you to add enhancements to their websites, but you don't know how to do it?
这本书涵盖了什么，没有涵盖什么
绝大多数网站所有者想要一个网站的原因如下:
- Sell services or products
- information giving
- Promote organizations such as charities, churches or societies.
这本书迎合了绝大多数网站所有者的需求。这本书没有涵盖在现成的资源中充分描述和说明的技术。然而，它确实总结了四个庞大的手册，阅读和提取信息非常耗时。
这本书没有讨论 RSS 提要，也没有太多关于 JavaScript 驱动的 API 的讨论。如果用户可以随意修改他们的网站，绝大多数所有者都会感到震惊。企业主不会有时间或兴趣去审核博客中的条目。本书中唯一涉及的交互元素是真正实用的元素，比如支付方式(例如 PayPal)、安全反馈表单、页面打印按钮、音频和视频控制、返回按钮和辅助功能。
本书不涉及使用 SQL 或 MySQL 的博客或数据库驱动的网站。为了学习如何控制 CMS 博客，我推荐博客设计解决方案 (Apress，2006)。
布局
每一章都是独立的，所以一般来说你可以不用从一章跳到另一章来完成任务。在决定子主题的位置时，我不得不偶尔妥协；例如，我应该将 CSS3 圆角放在哪里:在 CSS3 章节中还是在圆角章节中？我最终把它放在圆角一章里。
这些章节没有特别的顺序，也不必按照特定的顺序阅读。只要一头扎进任何地方，去发现你想学的东西。但是，如果你对 HTML5 一知半解，就从第一章开始吧。它将向你介绍 HTML5，并提供工作的例子来实践。
我避免了无用的细节，比如 HTML5 的历史或者某项技术是如何发展的。相反，我专注于实际应用。有些主题确实需要如何解释——比如屏幕阅读器如何帮助盲人阅读网站——但我的总体目标是“开门见山”(正如电影制片人所说)，也就是说，不要废话，尽快进入令人兴奋的部分。
我的希望是，通过在一本书里收集和展示工具、技术、概要和模板，网页设计者、学生和老师将会省去很多时间的研究和测试。
所需的技能水平
这本书里的说明是中级水平；也就是说，假设您已经掌握了 HTML4 和 CSS2 的工作知识。
HTML5 和 CSS3
最近出版了很多 HTML5 和 CSS3 手册。他们擅长描述新建议背后的历史，他们倾向于关注不常用的项目，比如 API 和新的 canvas 元素。HTML5 中的工作示例很少，而且很少与现实世界相关。大多数手册广泛涉及 API，而绝大多数网站所有者对此一无所知，也不想要。这本书强调了 HTML5、CSS2 和 CSS3 的实用性。我已经切入正题，提供了涵盖所有最有用的新特性的完整项目。
注意 CSS3 和 HTML5 互不依赖；它们是完全不同的建议。
CSS3 的更新
在撰写本文时，Mozilla Firefox、Safari 和 Chrome 需要-mozkit-和-webkit- hacks 来支持一些 CSS3 特性。当这些浏览器的新版本发布时，它们可能不再需要黑客了。
最少使用脚本
我已经尽量减少脚本的使用。如果有 CSS 解决方案，将使用它来代替脚本。HTML5 和 CSS3 为几个新的网站增强功能提供了无脚本解决方案。大多数浏览器的最新版本都支持它们。
服务器端编程语言（Professional Hypertext Preprocessor 的缩写）
两个项目——访问者计数器和表单——使用了一些 PHP，但是不需要 PHP 知识。尽管已经对脚本进行了完整的解释，但是您可以跳过解释，只需在模板中 PHP 标记指示的地方插入您自己的细节。
Java Script 语言
为了使一些 HTML5 功能能够在 IE 7 和 IE 8 中工作，JavaScript 的一个片段是必不可少的。您可以从该书的出版网站下载这个脚本。
本书少量主题使用了一点 JavaScript 比如 CSS2 圆角(第七章)、加密邮箱(第十一章)、音视频(第六章)，但是不需要 JavaScript 知识。JavaScript 文件可以从配套网站下载，并放在您网站的根文件夹中。最终，通过使用 CSS3，不需要脚本就可以实现圆角。一些浏览器已经支持这种技术。通过使用新的 HTML5 <audio>和<video>标签，跨浏览器的音频和视频将最终实现无脚本。同时，提供了一个后备解决方案，使音频和视频能够使用 IE 7 和 IE 8 播放。
本书中使用的约定
本书中使用的词语代码、列表和标记表示同一个意思。应该由读者自己的标记替换的代码以粗体斜体显示。出于教学目的，粗体强调了一些标记。
客户和网站 网站所有者这两个词是同义词，指的是委托你制作网站的人(或组织)。
标签和元素这两个词也可以互换使用。
资源
这本书里提到了许多有用的书籍和免费软件程序。只要有可能，免费软件或开源软件都会被选择并经过全面测试。
提示安装一个文本编辑器，比如 Notepad ++，它比 MS Notepad 有几个增强。
当一段 CSS 标记不能包含在一行中时，使用一个向左的箭头来表示这两行属于同一行；例如:
#header { width:920px; height:180px; padding:0; margin: 20px auto;  border:10px white solid; **background: url(img/**h**eader3.jpg) no-repeat**; }
使用书的标记和模板
大多数工作示例都是实用的模板，读者可以从配套网站上查看和下载。读者可以轻松快速地将这些例子改编为自己的使用。在网站中使用标记或模板不需要权限。如果您在销售媒体(即印刷品或 CD)中包含标记示例，则需要获得许可。如果您在提供网页设计指导的网站中使用标记示例，则需要获得许可，并且会要求您确认代码的出处。归属应该给出出处，如下:实用 HTML5 项目Adrian West 著。版权所有 2012 阿德里安韦斯特。由 Apress Media，LLC 出版。国际标准书号 978-1-4302-4275-8。
如果你认为你对这本书的标记的特殊使用不在本段中，请联系permissions@apress.com。
所见即所得网页设计程序
WYSIWYG 程序是一种快速启动网页的好方法，也是学习 HTML 语法和句法的好方法。但是不要总是相信你看到的。有时，当在所见即所得程序的设计窗格中查看布局时，它并不是您所期望看到的。在 WYSIWYG 程序跟上之前，这尤其适用于使用 HTML5 或 XHTML5 文档类型的页面。不要纠结于所见即所得的布局、图像或菜单栏；相反，在 Internet Explorer、Mozilla Firefox、Safari、Chrome 和 Opera 中测试页面。尽管布局、图像和菜单在所见即所得编辑器中的外观有些奇怪，但您可能会惊喜地发现它们显示正常。
我用 MS Expression Web。它有一个优秀的错误检查器。在“代码”视图中按 F9 键会逐步显示并解释错误。然而，任何 WYSIWIG 编辑器可能需要更新或升级来检查 HTML5 页面的错误。
网页设计程序和内容管理系统
网页设计程序和内容管理系统(CMS)声称你不需要学习 HTML。它们是网站设计世界中的数字绘画工具。
我同意你可以使用这些程序设计网站，而无需使用或理解 HTML 或 CSS 但是，您将被迫使用成千上万其他人正在使用的模板。您调整或微调网站的能力将受到严重限制，因为大多数 CMS 使用专有标记以及 JavaScript 和 PHP。所有的 CMS 网站都会在你的根文件夹中装载大量的行李；这可能会耗尽您的大部分可用主机容量。例如，一个使用 HTML5 和 CSS2 的基本的五页网站只会产生两个文件夹和六个文件。对同一个网站使用 CMS 包会产生 17 个文件夹，每个文件夹平均有 30 个文件，外加 10 个 PHP 文件和几个用于管理网站的附加文件。
如果你需要将一个 CMS 网站转移到另一个网站管理员那里，你可能很难找到愿意学习的人来解决微调 CMS 网站的复杂性。
鼓励初学者使用 CMS(或在线网站生成器)就像对某人说，“那么，你要去法国出差三个月？不用费心学法语，带个翻译就行了。”如果初学者希望微调 CMS 网站，他们最终需要学习 HTML、JavaScript 和 PHP。可以在网上设计的网站会更加严格。这些主要是基于 JavaScript 的，导致设计者控制更少。在线方法和 CMS 网站也使用 JavaScript 导航菜单来防止搜索引擎越过主页。
除非你学习一些 HTML 和 CSS，否则你永远无法完全控制你的网页设计过程。如果你想制作独特、精简、干净、易于管理的网站，那么 HTML 和 CSS 是唯一的方法。HTML 不难，HTML 语言 40 个单词就够了，而且都是英文单词或者英文单词的缩写。几个免费的所见即所得网页设计程序可以帮助你学习语法和文法。公共图书馆的书架上通常都有 HTML 和 CSS 手册。
哪些浏览器？
目前，大多数普通用户用 Internet Explorer 上网，因为它是 Windows 免费提供的。最近的一份计算机杂志民意调查显示，Internet Explorer、Mozilla Firefox 和 Chrome 同样受欢迎。计算机杂志迎合了一小部分人口，所以他们的调查结果比较有偏见。在考虑 IE 的时候，我们需要注意正在使用的四个版本。
我想我们可以驳回 10 岁的 IE 6。任何仍在使用 IE 6 的人都应该得到他们在屏幕上看到的东西。然而，当我为一个支持当地公共图书馆的团体设计网站时，我感到震惊。县图书馆的电脑仍在使用 IE 6，尽管它年代久远且易受攻击。在图书馆的电脑上，这个网站看起来一团糟；我用 IE 条件黑客解决了这个问题，(这些黑客的细节在本书中提供)。现在，我总是查看我的客户正在使用哪些浏览器。
用户惯性确保了旧的浏览器和操作系统将在未来五年内继续使用。至少在 2014 年之前，许多企业和家庭用户将继续使用 Windows XP、IE 7 和 IE 8。他们将继续使用 IE 7 和 IE 8，因为 IE 9 与 XP 不兼容。从 2011 年年中开始购买新电脑的人将会预装 IE 9。未来十年，IE 9 和更高版本可能会越来越多地成为最常用的 Internet Explorer 版本。2011 年 3 月发布的 Internet Explorer 9 将兼容最有用的 HTML5 和 CSS3 新功能。足够精明的下载和使用 Mozilla Firefox、Opera、Safari 和 Chrome 的人通常会继续下载最新版本。因此，设计师应该测试最新的版本。
目前，为了让你的网站拥有最大的受众群，确保它们能在五种最流行的浏览器中运行。按照重要性排序，它们是 Internet Explorer 8 和 IE 9+，Chrome，Mozilla Firefox，Safari for Windows 和 Opera。它们可能不会(也不需要)以相同的方式显示，但是只要它们能够有效地传达网站的信息，微小的差异并不重要。2015 年后，你可能会忘记 IE 8 的黑客攻击。
提示参见附录中的表格，了解浏览器在美国、英国和欧洲的使用情况。如果你的目标是一个特定的区域，这是很有用的。
一、迁移到 HTML5
本书中的项目使用 HTML5。本章将向不熟悉 HTML5 的读者介绍它的基本特性，并了解它与 HTML4/XHTML 的不同之处。您还将了解如何:
- Convert HTML4/XHTML pages or entire websites to HTML5
- Create HTML5 pages that can be displayed correctly in Internet Explorer 7 and 8
- Take advantage of the enhancements of HTML5
自 2000 年推出 XHTML 1.0 以来，HTML5 是 web 开发中最激动人心的一步。HTML5 是网页设计的未来，但现在就可以实现；然而，这并不会使您当前的 HTML4 或 CSS2 知识变得多余。这是一个受欢迎的增强，增加了 HTML 的灵活性和有用性。也解决了一些问题；例如，它可以免除嵌入视频和音频剪辑的插件，视频文件格式的数量也大大减少。大量新的语义标签使得网站的编码和维护变得更加容易。文档类型的数量从六个减少到两个，HTML5 文档类型非常简单，您可以轻松地将它们记住。
HTML5 在浏览器供应商之间达成了一致，因为他们参与了它的制定。这意味着他们处理编码错误的方式现在已经标准化了；所有那些小分歧都解决了。HTML5 规定的浏览器解析规则确保所有现有网站继续像以前一样运行；HTML5 向后兼容。
因为这一章关注的是 HTML5 将增强最常见的网站类型的方面，所以你不会找到关于 API(应用编程接口)的全面讨论；也不会找到 HTML5 的发展史。有几本关于 API 和 HTML5 历史的书。它们很好地涵盖了这些主题；复制它们是没有意义的(参见本章末尾的提示以获得参考资料列表)。
这一章的结尾简要提到了一些 API，但是可以肯定的是，绝大多数的网站设计者和网站所有者还没有在传统的网站上实现它们。CSS Tricks ( [css-tricks.com](http://css-tricks.com))最近进行的一项民意调查强化了这一观点。API 发布两年后，调查向网页设计师提出了以下问题:你在生产网站上实现了哪些 HTML5 特性？
结果如下:
语义标签 58% 表格 36% 音频/视频 30% 其他 16%
“其他”的 16%在九个 API 之间分配:Canvas、Web 工作器、Web Storage、Geolocation、拖放、ContentEditable、History 和 Microdata。总数加起来超过 100 %,因为大多数受访者实现了不止一个功能。
移动到 HTML5
现在是时候利用 HTML5 中的新特性了；通过尝试本章和后续章节中的项目，您将发现新版 HTML 可能带来的好处和增强。这本书的重点是标题中的实用二字；因此，我“开门见山”地提供了涵盖 HTML5 所有最有用的新特性的完整项目。我想你渴望开始，所以让我们继续吧！
html 5 和 XHTML5 文档类型
HTML 4/XHTML 有几种文档类型，但是 HTML5/XHTML5 只有一种文档类型，如下所示:
| **html 5:** | ` HTML5 test document *meta details go here* ` | | **XHTML 5:** | ` XHTML5 test document *meta details go here* ` |
注意更简单的 HTML5 DOCTYPE 可用于包含 XHTML 标记的页面，它将进行验证。事实上，可以完全忽略 XHTML5 DOCTYPE。HTML5 并不在乎你是否使用封闭标签(比如
<br />)。本书中的例子不使用结束标记；但是，如果您一直使用 XHTML，您可能更喜欢继续使用结束标记——html 5 将接受任何一种方式。
HTML5 文档类型用 lang=en 指定英语。对于其他语言，请参见
[wwww.iana.org/assignments/language-tags/language-tags.xml](http://wwww.iana.org/assignments/language-tags/language-tags.xml)。
**要将网页改为 HTML5 或 XHTML5，**只需更改 DOCTYPE 即可。标记不会被破坏，但您将能够使用更有用的元素，如<audio>和<video>(即使在 IE 7 或 IE 8 中使用了一点 JavaScript ),并且您的页面将会验证。
注意目前的 HTML5 和 XHTML5 验证器是
[validator.w3.org](http://validator.w3.org)和[html5.validator.nu](http://html5.validator.nu)。这些仍然是实验性的，你应该知道它们可能会随着时间的推移而改变。
要跟上 HTML5 项目的开发和发布，请访问
[html5doctor.com](http://html5doctor.com)
Remy Sharp 是 HTML5 Doctor 网站的专家之一。阅读他的有用文章
[html5doctor.com/html-5-boilerplates/](http://html5doctor.com/html-5-boilerplates/)
他写道，下面的标记是“完全有效的 HTML5”:
`
Small HTML 5Hello world
`太神奇了！没有<html>，没有<body>，没有语言，没有字符集，没有引号，怎么会这么松懈？它将进行验证，但不支持当前的屏幕阅读器，因此 HTML5 标记保持以下结构:
`
HTML5 test document *meta details go here* *content goes here* ` 注意 HTML5 的属性不一定要用引号括起来，许多 MIME 类型现在可以在 HTML5 中省略——但是对于 XHTML5，可以保留引号和 MIME 类型。
一个网站可以包含多个页面，前提是正确指定了每个页面的 DOCTYPE。如果您希望在现有网站的一个或两个 HTML5 页面上使用新的<audio>和<video>标签，这将非常有用。
表 1-1 显示了一个 XHTML 页面的 DOCTYPE 被改成了 HTML5 DOCTYPE。该页面已提交给 W3C HTML5 验证程序。它在所有浏览器中的验证和显示与原始页面完全相同。在表 1-1 中比较了两种文件类型。
表 1-1 显示了我试验过的 HTML5 DOCTYPE。图 1-1 显示了我使用的网页。
***图 1-1。*我用来试验来自表 1-1T5 的 HTML5 文档类型的网页
在这个实验中，原始的 XHTML 页面 ( starter-page.html ) 在通常的 W3C HTML4 验证器中进行验证。一个相同的页面，但是使用 HTML5 文档类型，在 W3C HTML5 验证器中进行验证。两个页面都是 XHTML 格式的，只有文档类型发生了变化。这些照片是由 Bonehayne 农场假日住宿网站[www.bonehayne.co.uk](http://www.bonehayne.co.uk)的所有者 Sandra 和 Ruth Gould 许可使用的
自己尝试这个相同的实验。
- Use your own verified XHTML or HTML4 webpage, or
- At
[www.apress.com](tos-cn-i-73owjymdk6/a8347b6bcf464670879d5b9a2354e08c), download the page of Figure 1-1 from the page in the book. Change the DOCTYPE on the page to HTML5 DOCTYPE. Test it on two HTML5 validators.
用户惯性将确保旧的浏览器和操作系统在未来几年内仍会继续使用。HTLM5 中的页面在旧的浏览器中应该是可读的，因为新的 DOCTYPE 向后兼容。所有的浏览器都跟上所有新的增强功能可能还需要一段时间。在上传到主机之前，在各种浏览器中测试您的 HTML5 和 XHTML5 页面。
HTML5 非常宽容，和 HTML4 transitional 一样，它接受未关闭的标签。它也将接受自我关闭标签或混合，目前，网页将验证。虽然您可以在使用 XHTML 的页面上使用 HTML5 DOCTYPE 而不是 XHTML5 DOCTYPE，但是在将来的某个时候，HTML5/XHTML5 验证器可能会更加严格，所以请继续使用实验性的 W3C 验证器来检查更改。
我已经展示了您可以在不采用任何语义元素的情况下利用较短的 HTML5 DOCTYPE。将现有页面更改为新的 DOCTYPE 后，您可能渴望尝试新的语义元素，所以让我们开始吧。
html 5 中的新元素
以下是我想注意的几件事:
- This chapter covers most semantic tags.
- Audio/video Chapter 6
- Form Chapter 10 covers.
关于 JavaScript 和 HTML5:一方面，新的建议消除了对一些 JavaScript 的需求(好)；另一方面，HTML5 有越来越多的 API 需要相当复杂的 JavaScript(不太好)。如果您打算利用新的 API，您应该——或者您应该努力——精通 JavaScript 的使用。
新的语义标签
语义关注单词的意思。新的语义标签描述了标签的内容；它们包括以下内容:
<article>、<aside>、<audio>、<details>、<figcaption>、<figure>、<footer>、<header>、<hgroup>、<mark>、
、<nav>、<section>、<summary>、<svg>、<time>、<video>。
提出了一些其他的语义标签。您可以通过以下方式对其进行调查:
[www.w3schools.com/html5/tag_p…](http://www.w3schools.com/html5/tag_progress.asp)。
在那里你可以找到标签的定义:bdi、comment、keygen、meter、output、progress 和 track。W3CSchools 网站上也提供了当前浏览器对这些功能的支持。
注意 CSS 假设元素是
*display:inline;*。这需要改变。要确保语义标签在所有浏览器中都像块一样，请通过在链接的 CSS 表单中插入以下行来调整 display 属性。
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section { display:block; }
不这么做 IE 7 和 IE 8 就会行为不端。
语义标签对谁有利？每个人都有；语义标签让网站开发人员的生活变得更加轻松。标签名称的标准化只会是一件好事，如果设计团队使用无处不在的名称，如nav或header或article等等，他们定位标签就不会有问题。搜索引擎将能够通过<nav>标签找到链接到主页的页面。<div>和id的数量将减少，这简化了开发和编码。我建议您尽可能使用语义标签，即使需要一点 JavaScript 来使 IE 7 和 IE 8 能够识别它们。然后，当这两种浏览器灭绝时，你将会变得擅长使用和设计语义标签。
语义标签旨在消除歧义
有些能消除歧义，有些则不能。一些标签具有表象的内涵，以及指示内容的意义。
- Explicit HTML5 tags include
<article>,<aside>,<audio>,<figure>,<figcaption>,<hgroup>,<mark>,<nav>and<video>.- Semi-ambiguous HTML5 tags include
<header>and<footer>. If there is only one page, then these are very clear. They are not only semantic, but also expressive, because they state the position of elements on the page. However, an HTML5 page can have several headers and footers. Each article can have a header and footer; Therefore, these labels are ambiguous.- Another semi-ambiguous HTML5 tag
<section>is discussed in the section "Debate about<section>and<article>" in this chapter.
自 1997 年以来，建议标签应该与标签的内容相关，而不是与内容的位置或风格相关。只有新的明确标签严格遵守该规则，其他的不遵守。
标题
在 HTML5 中，每页一个<h1>标签的限制已经被放弃了。每篇文章或每节可以有标题<h1>到<h6>。这如何影响可访问性是一个必须解决的问题，因为屏幕阅读器使用标题的层次结构来引导视力障碍者浏览网页。
最佳实践
无论是网站所有者还是普通用户都不会在意你是否使用语义标签，但作为一个网页设计师，你应该在意并尽量在可以的地方使用 HTML5 和语义 HTML5 标签。至少在接下来的五年里，当使用语义标签时，你将需要一个针对 IE 7 和 IE 8 的 JavaScript 解决方案。设计师会变得过分执着于避免描述表示的 id 和类。试着不要被这种强迫症所困扰。例如，考虑一个带有两列内容面板的页面。对于一个设计团队来说，<div id="leftcol">和<div id="rightcol">肯定比<div id="some-content">和<div id="some-different-content">更有意义。希望在"leftcol"改变某些东西的客户会说，“请修改左边的栏。”她不知道这个专栏还有什么别的名字。做任何与客户、设计师和团队成员明确沟通的事情。
搜索引擎和 HTML5
由于新的语义元素，搜索将得到改进；对于<nav>标签来说是这样，或许对于<video>标签也是这样。搜索引擎可以定位页脚并应用较低的权重，因为页脚不太可能包括用户正在寻找的信息。
摘要
受到双重欢迎的语义标签是那些除了语义之外还体现了另一个优点的标签。如果一个新的标签不再需要黑客和 JavaScript 解决方法，那么它将是一个很大的改进。Internet Explorer 7 和 8 不理解语义标签；因此，网页设计者要么在几年内忽略 HTML5 语义标签，要么在 JavaScript 中使用语义标签。
我强烈建议你使用语义标签和 JavaScript hack，直到 IE 7 和 IE 8 不再被广泛使用。
带有语义标签的页面布局的简单例子
本节中的前三个项目展示了使用 HTML5 和语义标签的简单页面布局。这些例子使用了一个 JavaScript 片段来使 IE 7 和 IE 8 能够识别语义标签。
注意接下来三个例子中的导航菜单都是原始的；更复杂的菜单将在本章后面介绍。HTML5 翻转菜单在第四章的中有完整的解释(有工作示例)。
图 1-2 和 1-3 展示了语义标签的效果。
***图 1-2。*在 IE 9、火狐、Safari、Opera、Chrome 中显示
***图 1-3。*在 IE 7 和 IE 8 中显示
这个简单的页面使用了语义元素<header>、<footer>和<article>。标记没有使用<div> s。内部样式仅用于指导目的。
清单 1-2 创建图 1-2 和图 1-3；外观上的差异是由不同的浏览器造成的。
清单 1-2。【simplistic-html5.html】在各种浏览器中测试的简单语义页面(??)
`
Simplistic HTML5 body { width:500px; margin:auto; } header, nav, article, footer { display:block; } header { width:500px; background-color:#FF9966; text-align:center; margin:auto; } nav { float:left; width:25%; background-color: #FF9966; margin-bottom:10px; } article { float:right; width:70%; background-color:#FF9966; margin-bottom:10px; } footer { clear:both; background-color:#FF9966; text-align:center; } h2 { font-size:large; font-weight:bold; margin-top:0; margin-bottom:0; }header goes here
Article
Are you illiterate? Write today for free course.Another Article
Stock up for Christmas. Limited to one per family. Footer. Perhaps for a copyright statement `针对 Internet Explorer 7 和 8 的解决方案
IE 9 将支持 HTML5 语义标签，但 IE 7 和 IE 8 需要一个“条件”，强制它们识别语义标签。在标记中使用 Remy Sharpe 的 JavaScript 片段，这样您就可以在 IETester 软件中测试页面是否支持 IE 7 或 IE 8。
提示提示
[www.my-debugbar.com/wiki/IETest…](http://www.my-debugbar.com/wiki/IETester/HomePage)。详见第十九章。除了 IETester，还有其他工具可以用来测试您的页面是否支持旧版本的浏览器。你可以试试 Adobe BrowserLab，微软 Expression 的 SuperPreview，IE NetRenderer ( [netrenderer.com](http://netrenderer.com))。
Remy Sharp 设计了一个任何人都可以免费使用的解决方案。它把语义标签转换成 IE 7 和 IE 8 能理解的东西。它涵盖了大多数 HTML5 标签，包括:-
、 、、
、
提示参见雷米夏普在
[remysharp.com/2009/01/07//html5-enabling-script](http://remysharp.com/2009/01/07//html5-enabling-script)的 B:log。参见布鲁斯·劳森和雷米·夏普的《?? 介绍 HTML5》。
下载 JavaScript 文件html5.js并在主机文件夹中放一份副本。网站上的页面必须包含一个<body>…</body>标签，JavaScript 才能运行，即使 HTML5 不再需要<body>标签。在每一页的<head>部分，添加一个 IE 条件语句和一个到 JavaScript 的链接，如下面代码片段中粗体部分所示:
`
HTML 5 complete ****Oh no! not another Hello World `
注意
html5.js不是写成“htm 加 15”而是写成 htm 加小写 L 和数字五。
甚至 JavaScript 哑剧类型；type="text/javascript"可以从 HTML5 中省略。默认情况下，新浏览器识别 JavaScript 文件的结尾*.js,并应用适当的 MIME 类型。
注意条件和脚本必须在
<head>段中，放在任何一个样式表链接之后，如图图 1-4 所示。
***图 1-4。*右边的面板显示了使用 JavaScript 的 IE 7 和 IE 8 的显示
清单 1-4 包含了一段 JavaScript 代码，允许 IE 7 和 IE 8 理解语义标签。结果见图 1-4 。
清单 1-4 一个简单的语义页面，带有面向 IE 7 和 IE 8 的 JavaScript 回退功能(simplistic-html5-java.html)
`
Semantic tags with JavaScript support for IE 7 and 8 body { width:500px; margin:auto; } header, nav, article, footer { display:block; } header { width:500px; background-color:#FF9966; text-align:center; margin:auto; } nav { float:left; width:25%; background-color: #FF9966; margin-bottom:10px; } article { float:right; width:70%; background-color:#FF9966; margin-bottom:10px;` `} footer { clear:both; background-color:#FF9966; text-align:center; }header goes here
ArticleAre you illiterate? Write today for free course. Another Article
Stock up for Christmas. Limited to one per family Footer. Perhaps for a copyright statement `
列
在清单 1-4 中显示的简单例子很好，但是假设我们想要一个可读性更好的布局，其中文章块在垂直列中，如图图 1-5 所示。
图 1-5 。垂直并排文章块。语义标签没问题。
清单 1-5 创建了两个垂直的“文章”列，如图图 1-5 所示。关键特征以粗体显示。内部样式表仅用于教学目的。
清单 1-5 。使用语义 <article> 标签创建列(simplistic-side-by-side.html)
`
Semantic tags with two articles side by side body { width:500px; margin:auto; } header, nav, footer { display:block; } **article { display:inline;** } header { width:500px; background-color:#FF9966; text-align:center; margin:auto; } h1 { margin-bottom:10px; } nav { float:left; **width:25%;** background-color: #FF9966; margin-bottom:10px; } article { float:left; **width:33%;** background-color:#FF9966; **margin:0 0 0 10px;**  **padding:6px;** } footer { clear:both; background-color:#FF9966; text-align:center; } h2 { font-size:large; font-weight:bold; margin-top:0; margin-bottom:0;header goes here
Article
Are you illiterate? Write today for a free course.Easy payment terms.
Another Article
Stock up for Christmas. Limited to one per family.Free Delivery £2 Footer. Perhaps for a copyright statement ` ` `
<导航>标签
网站传统上使用带有许多不同的 id 属性的<div>作为导航菜单；例如，菜单、导航、链接、导航菜单、导航等等。HTML5 引入了语义标签<nav>，对导航菜单进行标准化。<nav>标签必须充当包围无序链接块的容器，也就是说，<ul> </ul>标签必须位于<nav> </nav>容器内。图 1-6 显示了用语义<nav>标签创建的菜单块。
**图 1-6。**使用 HTML5 < nav >标签创建的一组导航菜单按钮
清单 1-6a 使用 HTML5 语义<nav>标签引入了 3D 按钮
***清单 1-6a。*使用【html5-nav.html】<nav>标签插入 3D 导航菜单
`
The nav tagheader goes here
From a local newspaper:
Are you 
illiterate?
Write today for a Free course. 
Easy payment terms.
Poster in store window:
Stock up for Christmas
Limited to one per family.
Free Delivery £2
Mark Twain said:"Life is one  darn thing after another"
So true, but we can still laugh about it
清单 1-6b 提供了导航菜单的 CSS 表示
***清单 1-6b。*使用 CSS 中的< nav >标签用于清单 1-6a (nav-style.css)
#container { width:780px; margin:auto; } #content { width:640px; margin-left:140px; } header, nav, footer, article, section { display:block; } header { width:780px; background-color:#FF9966; text-align:center;  margin:5px auto 10px auto; padding:2px; } article { float:left; width:190px; margin:0 0 0 10px; padding:6px; } footer { clear:both; background-color:#FF9966; text-align:center;  width:780px; margin:auto; } p { margin-top:5px; margin-bottom:5px; } /* set navigation menu position and style*/ nav { float:left; width:130px; background-color : white; margin: 0 7px 5px -30px; } nav ul {float:left; width:130px;} /* set general side button styles */ nav li { margin-bottom: 3px; text-align: center; list-style-type:none; width:125px;} /* set general anchor styles */ nav li a { display: block; color: white; font-weight: bold;  text-decoration: none } /* specify state styles */ /* mouseout (default) */ nav li a { background:#946055; color: white; border: 5px outset #C96E6B;} /* mouseover */ nav li a:hover { background: #9F7562; border: 5px outset #C96E6B;} /* onmousedown */ nav li a:active { background:maroon; border: 5px inset maroon } }
使用语义标签的更复杂的例子
下一个例子使用之前在图 1-1 中说明的页面。图 1-7 提供了其外观的提示。
***图 1-7。*之前在图 1-1 中显示的同一个网页现在包含了语义标签
这里，我们将把之前在图 1-1 中显示的页面转换成 HTML5 语义元素。
在现实生活中，你不需要转换一个已经存在的页面。至少十年内，你当前的 HTML4 或 XHTML 格式的网页可以在所有浏览器中正常显示，而不需要 HTML5 文档类型。但是，如果您希望利用语义标签，下一个项目将描述如何通过修改现有的 XHTML 或 HTML4 页面来合并它们。
注意您当前所见即所得的网站编辑程序可能无法正确显示 HTML5 语义元素。因此，您需要在 web 浏览器中测试每一步。您可以将代码直接写入文本编辑器，比如 Notepad 或 Notepad++，然后在浏览器中进行测试。你也许可以升级你的所见即所得程序，使其与 HTML5 兼容。一些 WYSIWYG 编辑器声称兼容 HTML5，包括
[github.com/bordeux/HTML-5-WYSIWYG-Editor](https://github.com/bordeux/HTML-5-WYSIWYG-Editor)的 Bordeux/HTML-5 WYSIWIYG 编辑器、[aloha-editor.org](http://aloha-editor.org)的 Aloha 编辑器和[jejacks0n.github.com/mercury/](http://jejacks0n.github.com/mercury/)的 Mercury 编辑器。无论如何，在[validator.w3.org](http://validator.w3.org)或[html5.validator.nu](http://html5.validator.nu)用验证器检查你的 HTML5 页面
转换步骤
执行以下步骤将页面转换为 HTML5:
-
复制一个现有的(X)HTML4 页面(没有语义标记的页面)，并将其命名为类似于 HTML5-test-page.html 的*。我已经将我的副本命名为
starter-page.html，它可以在[www.apress.com](tos-cn-i-73owjymdk6/a8347b6bcf464670879d5b9a2354e08c)从书的页面下载。* ** 复制页面的样式表，并将其命名为类似于 html5-style.css 的名称。我已经将我的副本命名为starter.css，可以在<article>s。逻辑块最终将成为语义块。在本练习中，合适的模块如下:- 带有白色边框的页眉(当前标记为
<div id = "header">)。 - 最右边的列及其菜单块可以替换为
<nav>。 - 语义上的
<footer>可以代替现在的<div id="footer">。* 将文件类型更改为<!doctype html> <html lang=en> <head> <title>Your title</title> <meta charset=utf-8>* 将 HTML 页面中的链接更改为指向您复制并重命名的 CSS 文件的名称。* 为了支持 IE 7 和 IE 8，在<head>部分添加 Remy Sharp 的 JavaScript 片段的链接。<!--[if lte IE 8]> <script src="html5.js"> </script> <![endif]-->* Download and installhtml5.jsin the main folder of the web site. It’s available from[www.apress.com](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a8347b6bcf464670879d5b9a2354e08c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5biD5a6i6aOe6b6Z:q75.awebp?rk3s=f64ab15b&x-expires=1780311391&x-signature=ustvIysNFipRCImedMwUjaD6oro%3D)or from
??
[remysharp.com/2009/01/07//html5-enabling-script](http://remysharp.com/2009/01/07//html5-enabling-script)- Add this line into the CSS file:
header, nav, footer, article, { display:block; }* - 带有白色边框的页眉(当前标记为
*在将我的起始文件转换成语义标签后，我将它们重命名为HTML5-Ch1-7.html和HTML5-style-2.css。下面列出了这些内容，可以从该书的网页上下载。
清单 1-7a。【新 HTML5 上市(HTML5-Ch1-7.html ??)】
`
Test page for semantic tags **Devon's Rural Retreats
Award winning accommodation, self catering or bed and breakfast
Cottages, converted barns, caravans
The superb interior  of one of our cottages * **
- Accommodation
- Maps
- Information 
- Attractions
- Contact Us
- Home Page
Situated in the UK's beautiful Devon countryside
Footer goes here
`**清单 1-7b。修改后的 CSS 工作表 为图 1-7(html 5-style-2 . CSS)
(重点项目用黑体字标出。)
/*equalise for various browsers and change #header to header*/ div body header #content { margin:0; padding:0; border:0; } body { background:#FFF url(img/green-grad.jpg) repeat-x; margin:auto; } /*add display attributes for the semantic tags*/ **header, footer, section, article, nav { display:block;** } /*remove the # from #header*/ **header** {width:920px; height:180px; padding:0; border:10px white solid;  background: url(img/header3.jpg); margin:10px auto; } h1 { font-size:300%; color :white; position: relative; left:90px; top: 55px; width:480px; } #rosette { position:relative; left:750px; top:5px; } #content { background-color:transparent; border-left:10px white solid;  border-right:10px white solid; border-bottom:10px white solid; width: 904px;  margin-top:10px; margin-left:auto; margin-right:auto; padding:8px;  font-size:medium; color:maroon; } h2 { font-size:x-large; color:white; margin:0 0 10px 0; } h3 { font-size:large; color:white; margin:0 0 6px 0; } #leftcol { float:left; width: 310px; vertical-align:top; } #rightcol { width: 135px; float:right; height: 252px; margin-right:10px; } #midcol { margin-left:315px; margin-right:145px; margin-top:10px;  vertical-align:top; } /*set nav block position and width and remove the #menu item*/ **nav ul { margin:10px 0 10px 0; width:135px; float:right;** } /*Set un-ordered list style within the menu block only. This removes bullets*/ **nav li { list-style-type:none;** } /* set general side button styles */ li.btn { margin-bottom: 3px; text-align: center; width:130px; } /* set general anchor styles and include the zoom fix for IE6*/ li.btn a { display: block; color: white; font-weight: bold;  text-decoration: none; zoom:1; } /* specify mouse state styles */ /* mouseout (default) */ li.btn a { background:#559a55; color: white; border: 5px outset #559a55;  padding-bottom:3px; } /* mouseover */ li.btn a:hover { background: red; color:white; border: 5px outset red; } /*mouse active*/ li.btn a:active { background:maroon; border: 5px inset maroon; } br.clear { clear:both; } #midcol img { margin-left:10px; } /*change #footer to footer */ footer { clear:both; color:maroon; text-align:center; }
注意语义标签并没有完全免除 id 和类标识符。一个 HTML5 页面可以有几篇文章，分别用它们自己的 id s 和类来标识。
第<节> vs. <篇>论战
您可能想知道为什么到目前为止我还没有在任何例子中使用过<section>元素。当我写这一章的时候，对<section>和<article>的区别有相当大的困惑。这是因为一些手册和网站将<section>元素描述为一本书中的一章。这表明它就像一个包含大量内容的包装器。结果，一个 HTML5 手册和一些 HTML5 论坛使用<section>作为一个风格化的包装器或容器。这围绕着几个<article>元素。另一个 HTML5 手册为容器或包装器使用了一个<div>;这包含了<article>元素，而后者又包含了<sections>。
哪种做法是正确的？我尝试了所有的方法，它们都有效，因为 HTML5 目前相当松散。
甚至我在 HTML5 Doctor ( [html5doctor.com](http://html5doctor.com) ) 最喜欢的 HTML5 专家也发现他们一直在错误地使用<section>元素；他们改版后的网站声明:“……我们意识到我们一直以来都在错误地使用<section>元素。对不起，我们一直做错的是使用<section>包装内容，以便对其进行样式化，或者从<nav>、<header>、<footer>等中划分主要内容区域。这些是给<div>而不是<section>的工作。”
www。whatwg.org`` 规范修改如下:“<section>元素不是通用容器元素。当一个元素需要进行样式设计时，我们鼓励作者使用*<div>*元素来代替。
有关此主题的 W3C 声明的完整版本，请访问
[www.w3.org/TR/html5/se…](http://www.w3.org/TR/html5/sections.html#the-section-element)
<section>最适合用作<article>的子部分，应该始终包含并括起标题，如下所示:
<article> <h1>A heading, any level from h1 to h6</h1> <section> <h1>A heading, any level from h1 to h6</h1>some content </section> <section> <h1>A heading, any level from h1 to h6</h1>some content </section> <article>
HTML5 Doctor 给出了以下使用<section>的有用规则:
- Don't use
<section>as the goal of modeling or script; Use a<div>for this purpose.- Don't use
<section>. If you use<article>,<aside>, or<nav>, it is more appropriate.- Don't use
<section>unless there is natural A heading at the beginning of this section.
在[gsnedders.html5.org/outliner/](http://gsnedders.html5.org/outliner/)中查看您的页面。如果你看到一个“无标题部分”的通知提到了一个<section>，这意味着你省略了那个<section>的标题。
<篇>素
一个<article>是一个独立的项目，比如一条独立的信息，可以从页面中提取出来，发布在论坛、杂志、RSS 提要或报纸上。它应该包含一个标题(h1到h6)，并且可以包含两个或多个部分。关键词是独立。这是<article>元素的本质特征。[www.whatwg.org](http://www.whatwg.org)规范声明:“当联合元素的内容有意义时，鼓励作者使用<article>元素而不是<section>元素。”
包含关于该主题的持续有趣讨论的博客位于
[www.brucelawson.co.uk/2010/html5-…](http://www.brucelawson.co.uk/2010/html5-articles-and-sections-whats-the-difference/)
争议仍在酝酿。Standardista 的博客作者/网络开发者 Estelle Weyl 也在 www.standardista.com/html5-section-v-article`` 谈论这个话题
Estelle 用一份包含体育、时尚、美食等栏目的报纸来做类比。每个部分包含包含部分的文章。报纸的版面是“主标题”，文章是副标题。每个子主题本身都是完整的，符合 W3C 对<article>.的定义。然而，如果一个网页只处理一个主题(这是最佳实践)，这种类比就不成立了。每个网页一个主题(文章)可以提供更好的用户体验，并且有助于搜索引擎对网页进行索引。更令人困惑的是，可以说报纸上的一个版面(如体育)本身是完整的，因此是一篇可以联合发表的大文章。
尽管无论你是在文章中有文章，在文章中有章节，还是在章节中有文章，一个页面似乎都可以工作，但是 Bruce Lawson 的模型提供了一个有用的指南。
我自己的解决办法是忘记<section>，使用<div>；毕竟，这两个新标签<article>和<section>是为了浏览器供应商、博客和提供 RSS 提要的网站的利益；它们对于传统网站来说不是特别有帮助。因为<article>定义明确，我有时在 HTML5 页面中与 IE 7 和 IE 8 的 JavaScript hack 一起使用。
注意
<section>元素被当作display:inline;。在当前的浏览器中，这可能最终会改变，但同时将<section >元素设置为display:block;。
<抛开>的标签
标签将一段文本从主要内容中分离出来。它可以有边框和/或背景色，使其从周围的文本中突出出来。这意味着<aside>可以包含有趣的摘录来吸引用户阅读正文。一个带边框的<aside>如图图 1-8 所示。
***图 1-8。*aside 元素可以创建一个引用(显示为带边框的插图)。
清单 1-8 提供了从正文中分离出来的引用。
清单 1-8。**展示语义【aside.html】<aside>【标签】
(为了节省空间，本文采用了缩写形式和内部样式)
`
HTML5 exercise, an aside ` `h1 { font-size:160%; font-weight:bold; } aside, section, article { display:block; } section { width:450px; margin:auto; } article { width:445px; text-align:left; } aside { width:180px; padding:5px; margin:5px 0 0 5px; float: right; border:1px black solid; }Which browser should you design for?
The answer is all of them. If you survey a group of computer  aficionados you will get very different answers…Internet Explorer. **** The great majority of ordinary folk are using IE because it came  pre-installed with their computers. **** None had ever heard of Mozilla Firefox…a strong swing towards IE 9 from 2011. `<标记>标记
突出显示某些单词或短语可以通过设置它们的格式或给它们一个彩色背景来实现。在 HTML5 中你可以使用<mark>标签；效果类似于用荧光笔在打印文本上，如图图 1-9 所示。
***图 1-9。*标记标签可用于突出显示文本。
提示<标记>可以与搜索结合使用，也许可以使用斯图尔特·朗里奇的 searchhi 脚本，该脚本可以从
[www.kryogenix.org/code/browse…](http://www.kryogenix.org/code/browser/searchhi/)下载
在清单 1-9 的<mark>标签中，标记使用了完整的单词<mark>。一些手册提供了缩写<m>，但是因为缩写版本不能在所有浏览器中表现自己，所以最好使用完整的单词。
***清单 1-9。如图图 1-9【mark.html】***所示创建带有高亮显示的某些单词的文本
(为了节省空间，清单中的文本已被缩写，并使用了内部样式表。)
`
HTML5 exercise, mark h1 { font-size:160%; font-weight:bold; margin-top:5px; margin-bottom:0; } h2 { font-size:130%; font-weight:bold; margin-top:0; margin-bottom:5px; }` `aside, section, article { display:block; } #content {width:450px; margin:auto; } article { width:445px; text-align:left; } aside {width:180px; padding:5px; margin:5px 0 0 5px; float: right; border:1px black solid; } mark { background-color:#FFCC66; }A demonstration of <mark>
Which browser should we design for?
The answer is all of them. If you survey a group of computer  aficionados you will get very different answers compared with the general public’s  answers. I worked as a freelance computer technician for over eleven years,  During that period I never came across a single person who was using a browser other  than Internet Explorer. The great majority of ordinary folk are using IE because it came pre-installed with their computers. None had ever heard of Mozilla Firefox, although I did meet one person whose son had  put Firefox on his computer, he wanted me to remove it because he did not know what it was. The great majority of ordinary folk are using IE because it came  pre-installed with their computers. When reading magazine surveys, it would be  safer to increase their survey figures for Internet Explorer. The  results show that you should ensure that your web sites work in IE7  and IE8 because these are the most used (by default). It would be  safe to predict that there will be a strong swing towards IE 9 from  2011.<图>标记
标签可以用来将标题连接到插图、图表、照片和代码清单。无论元素在网页上的位置如何，标题都固定在元素上。有关使用此元素的完整解释和示例，请参见:-
[www.w3.org/TR/html5-au…](http://www.w3.org/TR/html5-author/the-figure-element.html)
图 1-10 展示了新的< figure>标签如何为照片提供标题。
图 1-10 。新的<图>元素的例子。标题包含在白色边框内，是<图形>块元素的一个组成部分。
在图 1-10 的中，<figure>标签将一幅图像和它的描述性文本组合成一个单独的块元素。像任何其他块，它可以被赋予边界，它可以被定位。无论放置在哪里，描述性文本(标题)都会与图像在一起。如果标记中包含条件 JavaScript，则该元素在所有浏览器中都有效。在清单 1-10 中，你会看到实际的标题包含在一个<figcaption>标签中，这是<figure>标签的同伴标签。为了节省空间，在清单 1-10 中使用了一个内部样式表。
***清单 1-10。*使用<figure>标签将标题链接到元素的 HTML 标记(figure.html)
`
Using the figure and caption tags figure, hgroup { display:block; } figure {width:300px; padding:10px; border:1px black solid; } **
**标签
标签<hgroup> </hgroup>是两个或更多标题(h1、h2、h3、h4、h5和h6)的容器。它表明标题是密切相关的，所以它将被用来把标题与副标题、标题和副标题组合在一起。在<hgroup>标签发布之前，对标题进行分组会导致文档轮廓出现问题；这个问题被称为幻象节点。使用<hgroup>可以避免这个问题，因为它将两个标题合并到一个节点中。<hgroup>标签只能包含标题。下面是一个例子:
`
I put our holiday dates and address on a social network
An idiot’s tale
We returned to a ransacked house, even the furniture was taken.
Your friend,
Loopy Lou
这个标签最有可能用在页眉中，但也可以用在同一页面上的一个或多个<article> </article>标签中。
新的 HTML5 表单控件
HTML5 对表单的推荐已经接近完成。HTML5 表单并不简单，因为其他因素会影响它们。防黑客的表单需要 PHP、ASP.NET 或 Perl 语言的处理程序。处理程序必须匹配新的 HTML5 表单标签。除非非常小心地将新的 HTML5 表单元素与屏幕阅读器的需求相集成，否则可访问性将会受到影响。在一段时间内，IE 条件和替代样式表将不得不被使用，以便使用 IE 7 或 IE 8 的冲浪者可以看到和使用 HTML5 表单。在撰写本文时，IE 9 不支持 HTML5 表单。IE 10 将很可能支持当前的表单以及 HTML5 表单。
只有 Opera 9.5+支持所有编写时的新表单元素。
Mozilla Firefox 5+支持大多数 HTML5 表单元素。Safari 支持除自动完成之外的大多数表单元素。Chrome 支持除自动完成和列表之外的所有元素。
要查看当前哪些浏览器支持表单，请访问:-
[www.w3schools.com/html5/html5…](http://www.w3schools.com/html5/html5_form_input_types.asp)。
新的表单输入控件是向后兼容的，因此您可以在诸如电子邮件地址之类的字段中使用新的输入。还不支持<input type=``email``>的浏览器会把它当<input type=``text``>来读。
注意即使 HTML5 内置了格式检查，机器人和罪犯仍然可以输入可疑的网址。因此，对于某些字段，您仍然需要防黑客表单处理程序的保护。
新的 HTML5 输入控件列表包括以下内容:
date (such as date of birth) datetime search email (e-mail address) datetime-local time number (a number) color url tel (a telephone number) range week month
左栏中的前四个输入控件可能是最有用的。右边栏中的url输入控件非常危险，因为它允许用户插入一个链接到恶意网站的地址。我从来没有包括一个网址字段。如果用户希望我访问一个 URL，因为没有提供 URL 字段，他们会给我发电子邮件请求允许发送一个 URL；机器人做不到这一点。
HTML5 表单控件还具有以下新属性:
`autofocus autofocus="autofocus"
required required="required"
maxlength maxlength="25"`
Opera 有一个演示页面，给出了新输入最终可能如何工作的指示。在 Opera 9.5 或更高版本中打开演示，并在以下位置试用:-
[devfiles.myopera.com/articles/4582/html5-forms-example.html](http://devfiles.myopera.com/articles/4582/html5-forms-example.html)。
这些表单在不同的浏览器中有不同的外观，但是它们都以相同的方式运行。歌剧中的出场如图图 1-11 、图 1-12 、图 1-13 所示。
***图 1-11。*Opera html 5 表单演示展示了点击提交按钮后会发生什么。
在这种情况下，我没有填写必要的字段。因此，该字段被红色双边框包围，并出现一个下拉警告。
在 Opera 中，必填字段有红色边框，如图图 1-12 所示。
如果字段填写正确，会出现绿色边框。
***图 1-12。*在这种情况下，电子邮件地址包含一个非法空格。
虽然在这个 Opera 演示中没有显示，但其他 Opera 演示显示，在某些字段中，当单击字段时会出现一个下拉选项。其他字段有一个颜色选择器或一个值范围的滑块。点击日期字段，调出日历选择日期，如图图 1-13 所示。
***图 1-13。*当点击出生日期字段时，会弹出一个日历，允许用户选择出生日期。
正如我在本节开始时所说的，Opera 已经制作了一个演示页面和一些指南，描述了 Opera 浏览器如何应用 HTML5 表单元素。清单 1-13 摘自歌剧指南。创建如图图 1-11 所示的界面，并产生如图图 1-11 至图 1-13 所示的错误信息和下拉列表。
***清单 1-13。*摘自 Opera 演示页面和指南。在这种情况下，只列出主要元素(new _ form _ features _ in-html 5 . html)。
`
HTML5 forms example
This is an example for the article
` `移动设备
HTML5 表单控件将改善没有合适键盘的触摸屏移动设备的输入。例如，日期输入控件会弹出一个日历，这样用户可以选择一个日期，以避免从触摸屏上键入日期的繁琐。当电子邮件字段成为焦点时，触摸屏键盘上会出现一个@符号。
SVG 图像
如此多的 HTML5 手册提到 SVG(可缩放矢量图形)图像，以至于你认为这是一个新特性也情有可原。它们不是新的，SVG 图像从 1999 年就已经存在了，现在随着新浏览器的发布，它们正在复兴。此外，HTML5 新元素列表中还包含了一个<svg>标签。可以内联使用；以前，它总是一个棘手的插件——通常需要一个插件才能正常显示。现在它是 HTML5 的原生部分，因此，我在本章中包含了 SVG 以匹配其他 HTML5 资源。除了 IE 7 和 IE 8，所有最新的浏览器都支持 SVG。
SVG 图像可以压缩，顾名思义，它们可以缩放；无论是在手持设备上还是在桌面屏幕上放大到任何尺寸，它们看起来都一样清晰锐利。图像只是图画。它们是通过从点到点的绘制来构建的，不涉及任何像素。
SVG 文件完全是文本。下面是一个彩色方块的代码 ( mysvg.svg)，如图图 1-14 。
<?xml version="1.0" encoding="UTF-8"?> <svg version="1.1" baseProfile="full"  xmlns=http://www.w3.org/2000/svg width="100px" height="100px"> <rect x="10" y="10" fill="red" width="100px" height="100px" /> </svg>
***图 1-14。*一个 SVG 形象
文件必须保存为*。* svg文件。我已经把它作为mysvg.svg保存在了伙伴网站上。
只需右击mysvg.svg并在浏览器中打开(但不是 Safari、IE 7 或 IE 8)就可以看到红色方块。双击文件不会打开它。Adobe Photoshop 和 GIMP (GNU 图像处理程序)可以导入和显示 SVG 图像。该文件不能被视为正常图像；比如这个不行，<img="img/mysvg.svg">。
目前 IE 9、Mozilla Firefox 和 Chrome 都支持类似清单 1-14 的内联 SVG 代码(也就是不需要<object>)。
清单 1-14a。【在现代浏览器中使用内嵌的 SVG 图像(svg-inline-square.html)
`
Embed an SVG square inline **** **** **** `像<object>这样的项目被称为嵌入元素，它们将文件拖入页面并显示它们。<object>标签可以用来将 SVG 文件嵌入到页面中，如清单 1-14b 所示:
清单 1-14b。【svg-object-square.html】使用<对象>为现代浏览器嵌入 SVG 图像
`
Embed an SVG square using object ****** ` 注意SVG 的 MIME 类型是
**type="image/svg+xml"**。
使用 SVG 可以创建各种形状，如三角形、椭圆形、圆角矩形和圆形。我们这里只有展示 SVG 循环的空间。
图 1-15。 SVG 可以画圆
圆的 SVG 文件可以保存如下:
<?xml version="1.0" encoding="UTF-8"?> <svg version="1.1" baseProfile="full" > <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="blue"></circle> </svg>
我将该文件保存在伙伴站点中，命名为 svg-object-circle.svg
清单 1-15a 使用内嵌技术在 HTML5 页面中嵌入一个 SVG 圆。
清单 1-15a。【svg-inline-circle.html 创建一个带有 SVG 内嵌圆形图像的页面
`
Embed an SVG circle inline SVGSVG
`在清单 1-15a 中，项目 version="1.1" 在现代浏览器中似乎是可选的，只需使用< svg >就足够了。
清单 1-15b 展示了在 HTML5 页面中嵌入 SVG 圆的<object>方法。
清单 1-15b。【svg-object-circle.html】使用<object>嵌入一个圆的 SVG 图像
`
Embed an SVG circle using object ****** `图 1-14 中所示的彩色方块完全由文本构成；.svg文件只作为代码存在于页面上。如果 SVG 文件很大，最好保存为.svg文件，用<object>导入。否则页面将会充满难以理解的代码，使工作变得困难。
SVG 不适合复杂的图像，如照片，但它可以用于复杂的绘图。图 1-16 和 1-17 是众所周知的蝴蝶和老虎的 SVG 图像的拙劣替代品。一定要在 www.croczilla.com[看实物](www.croczilla.com)
***图 1-16。*蝴蝶
***图 1-17。*老虎
可从
[croczilla.com/bits_and_pieces/svg/samples/](http://croczilla.com/bits_and_pieces/svg/samples/)下载适用于图 1-16 和图 1-17 的 SVG 图像访问该网站，查看组成每张图片的大量代码。可以使用
[inkscape.en.softonic.com](http://inkscape.en.softonic.com)中的免费程序将位图图像转换为 SVG 文件
可以为文本创建 SVG 图像
图 1-18 是创建为 SVG 图像的轮廓文本。
图 1-18 。创建为 SVG 图像的文本
这种技术只适用于大字体，不适用于 IE 6、IE 7 或 IE 8。
下一段代码创建如图 1-18*(outine-text . SVG)*所示的文本
<?xml version="1.0" encoding="UTF-8"?> <svg version="1.1" baseProfile="full"  width="500px" height="60px"> <text x="20" y="50" style="font-family:times new roman; font-size:36pt;  font-weight:bold; stroke:black; fill:white; ">Tour Devon</text> </svg>
前面的代码片段生成了图像，但是如何将它合并到 HTML5 页面中呢？清单 1-18 显示了这是如何实现的
清单 1-18。【svg-text-embed-html5.html】将一些文本的 SVG 图像嵌入到网页中
`
Embed an SVG text into an HTML5 page Tour Devon `<明细>和<汇总>标签
<details>和<summary>标签提供了隐藏/显示技术，但是在编写本文时只有 Chrome 支持它们。当它最终被完全支持时，你将能够显示一个标题页，当点击时，可以展开显示详细信息。元素对于扩展版权或类似内容的细节也很有用。同时，本书第十三章的中提供了 JavaScript 版本。歌剧显示如图图 1-19 和图 1-20 所示。
***图 1-19。*这可能是填满页面的一系列标题。为了清楚起见，仅示出了一个。
接下来的图 1-20 显示了点击标题后的扩展文本。
***图 1-20。*这显示了点击标题旁边的箭头的结果。
< 】 tag must be the first child of the 】 tag, as shown in 清单 1-18 。
清单 1-19。【summary-details-tags.html】创建一个标题，点击后显示扩展文本()
`
The summary and details tagsA COMPUTER FOR £15?
The UK not for profit organization Raspberry Pi is hoping to sell
a computer for 
£15 (or less if the take up is good).
It is no bigger than a USB connector, it 
has an ARM chipset,
a wi-fi chip, a version of the BASIC programming language
and 
it is preloaded with the Linux operating system. The primary purpose
for this ` `innovation is as a teaching tool for UK schools where children
are bored stiff with 
The current curriculum. You can read more about it at 
http://www.wired.co.uk/news/archive//2011-01/20/raspberry-pi-computer
API(应用编程接口)
API 通常与 HTML5 分组；然而，它们实际上是单独的 W3C 推荐标准。绝大多数网站所有者出售或推广一些东西。他们当然不希望用户破坏他们精心制作的网站。因此，在这个时候，客户不太可能在他们的站点上要求 API。以下是一些 API 和简要定义的列表:
Canvas :在网页上提供一个矩形的绘图面。使用 JavaScript，您可以绘制、涂色和填充该区域。目前，它主要用于游戏和图形。
ContentEditable :允许用户在网页的某一部分选择和编辑项目。
*拖放:*用户可以控制屏幕上任何元素的拖放。如需现场演示，请参见
[html5demos.com/drag](http://html5demos..com/drag)。更多信息，请参见[html5doctor.com/native-drag-and-drop](http://html5doctor.com/native-drag-and-drop)。地理位置:告诉你一个用户的地理位置(在用户允许的情况下)，并且可以跟踪用户是否已经移动。它可以与地图互动来显示位置。反过来，用户可以问你是否允许他知道你的位置。如果你同意，会出现一张地图，上面有一个指示器指向你的位置(或者它会显示纬度和经度)。
微数据:允许在 HTML 文档中嵌入机器可读的数据，以便浏览器和搜索引擎可以从页面中提取数据。
离线和清单:创建和管理本地缓存，以便您可以离线工作。文件、CSS 和图像存储在清单中，以便可以脱机查看网站。
网络存储:这是一种更强大的 cookie。它可以在客户端存储大量数据。它可以存储高达 5MB 的数据，而一个 cookie 被限制在 4KB 左右。
Web 工作器 :允许一个 JavaScript 操作(或多个操作)在后台工作，不干扰用户的浏览。
提示如果您希望了解更多关于新 API 的信息，请尝试以下资源: HTML5:启动并运行，作者 Mark Pilgrim (O'Reilly Media，2010)；彼得·吕贝尔斯、布莱恩·艾伯斯和弗兰克·萨利姆的《专业 HTML5 编程》( Apress，2011)；
Bruce Lawson 和 Remy Sharp 的 HTML5 介绍(新骑手出版社，2010)；Matthew David 著《HTML5:设计富互联网应用》(焦点出版社，2010 年)。
迁移到 HTML5 的策略
网页设计者可以开始尝试新的标签，一次一页。开始使用 HTML5 和它的语义标签的最佳时间是当你在一个当前的网站上添加一个新的页面，或者当你开始一个新的网站的时候。添加新页面时，您只需将该特定页面标记为 html 5——您可以将其余页面标记为 HTML4 或 XHTML。但是，您还需要将该页面链接到修改过的 CSS 表单。如果你在团队中工作，这不是一个合适的策略(除非你喜欢制造混乱)。新的<form>标签不会完全防黑客攻击，一些表单标签仍然需要一个带有过滤器的表单处理程序。在第十一章和第十四章中再次提到了新的 HTML5 表单元素。
总结
本章向你介绍了 HTML4 和 HTML5 的区别。你会明白，IE 7 和 IE 8 不能理解语义标签，除非在标记中包含一些 JavaScript。我希望这篇 HTML5 的介绍已经激发了你开始探索 HTML5 提供的令人兴奋的可能性。在阅读本书的其余部分时，以下规则会很有帮助:
- If an HTML5 page contains one or more semantic tags, use Remy Sharp JavaScript fragments in the page. This will enable users of IE 7 and IE 8 to see the pages you want to see.
- If the page contains one or more semantic tags, use display block settings to support IE 7 and IE 8 in linked CSS forms, as follows:
header,nav,article,section,footer { display:block; }- If the page does not contain semantic tags, Internet Explorer 7 and 8 do not need JavaScript code snippets.
注html 5<视频>和<音频>标签在第六章中有所涉及。*
二、翻转图片画廊
贺卡艺术家或零售商可能会要求您创建翻转图片库。这些画廊也非常适合几乎任何项目，包括有多张产品图片的零售商、有菜单的餐馆、有活动图片的非营利组织等等。当光标悬停在缩略图上时，翻转效果起作用，这导致弹出图像的放大版本。本章演示了如何使用 CSS 实现这一点，而无需借助表格或复杂的脚本。
我非常感谢肖像艺术家安·罗·琼斯允许我使用我为她创建的网站上的图片。所描绘的卡片是基于她出色的绘画。本章中的所有示例都使用了这些图像。
在[www.annroejones-artist.co.uk](http://www.annroejones-artist.co.uk) *访问她的网站。*点击菜单中的“卡片”按钮，查看滚动图库。
对技术的介绍
列或行的数量可能会有所不同，照片大小也不可能总是一致的，有些可能会更宽或更短。因此，不可能有一个通用的模板。您可以采用下面给出的解决方案，或者调整缩略图的大小和/或将其裁剪为统一的大小。
为每个图像创建两个版本，一个缩略图和一个大图。我以这种方式标记了对alithumb.jpg和alibig.jpg。缩略图的每一列都是通过一个无序列表实现的。每个列表元素都有一个目标链接<a>…</a>，CSS 样式表指示该链接对悬停在其缩略图上的光标做出响应。
使用 CSS 创建从每个缩略图到其大图的链接，如下所示:
`
需要注意的一些事项包括:
- Two lines containing images are contained in the
<a>tag. This is to enable them to hover over the thumbnail in response to the cursor.- The row of the large graph contains
class="hid"and an empty alt, namelyalt=" ".- CSS indicates that any
class=hidelement remains hidden until the cursor hovers over the thumbnail.- The target columns in the tag will be col-1, col-2, col-3, etc., so that CSS can locate them on the page.
图像尺寸和格式
如果所有的缩略图具有相同的格式和尺寸，并且所有的放大图像具有相同的格式和尺寸，则该技术是最容易的。
然而，生活从来没有那么简单。您可能有一些横向格式的图像，一些纵向格式的图像，一些方形格式的图像。如果您需要使用不同的格式和尺寸，请参见本章后面与图 2-4 和图 2-5 相关的说明。
一个单列的画廊
图 2-1 和 2-2 显示了一个单列廊道。
图 2-1 。一栏三个缩略图
***图 2-2。*悬停在猫的上方
本例中的清单 2-1a 创建了一列缩略图。每个缩略图都是一个到大图的实时链接。当光标滚动到缩略图上时，会出现较大的图像。它出现在同一页面上，并位于标记为其保留的位置。
清单 2-1a。【gallery-one-col.html】创建一列缩略图
`
Rollover Gallery, one column` ` *meta details go here*
注意大图像不需要“
alt”，因为当光标悬停在图像上时，图像会消失。
在 CSS 清单 2-1b 中，MouseOut状态代码的第一个块在页面上保留了一个空间，该空间将被展开的图像占据，但是展开的图像被visibility:hidden;属性对用户隐藏。当鼠标悬停在一个缩略图上时，第二个MouseOver状态块中的 CSS 标记会显示扩展的图像。
***清单 2-1b。*清单 2-1a 的 CSS 样式表(gallery-one-col.css
/*reset browsers to give cross browser uniformity*/ html, body, p, lu, li { margin:0; padding:0; } img { border:0; } /* Set general thumbnail styles */ /*place the column on the page*/ #col-1 { position: absolute; top: 0; left: 0; } /*remove bullets from the list elements*/ li { margin: 10px; list-style-type:none; } /* MouseOut state (default) - create a space for the larger images and hide them*/ #col-1 a img.hid { width: 260px; height:390px; position:  absolute; top: 10px; left: 140px; visibility: hidden; } /* MouseOver state (hover)- reveal larger image */ #col-1 a:hover { background: white; } #col-1 a:hover img.hid { visibility:visible; }
一个两列画廊
通过添加第二列并为其插入适当的翻转代码，我们可以创建一个两列图库，如图 2-3 所示。
图 2-3 。两列画廊。光标悬停在右上角的缩略图上。
图 2-3 还有一个特点，放大的图像有一些描述性文字。为此，请在您的图像处理软件(如 Adobe Photoshop、Corel PaintShop Pro 或 GIMP)中为放大的图像调整画布的大小。在图像底部添加大约 20 到 30 像素的白色画布区域。使用图像处理软件添加文本，并记下新的图像高度。
添加画布，为较大的图像提供一致的纵横比。在本例中，所有放大的图像都是 260 像素宽。给所有放大的图像添加画布，使它们具有相同的高度；这将确保外观的一致性，也就是说，没有一个放大的版本会看起来被压扁或拉伸。
在这里使用新的<figure> <figcaption>标记似乎是合适的，但遗憾的是，它们失败了，因为标题被附加到缩略图上，而不是大图像上。如果您尝试使用下面的标记片段，用<figure> <figcaption>包围大图像，您就会明白我的意思了:
<li><a href="#"><img src = "img/take-cardthumb.jpg" title="Take a card"  alt="Take a card"> <figure> <img class = "hid" src = "img/take-cardbig.jpg" alt=""> <figcaption>Take a card</figcaption> </figure></a> </li>
清单 2-3a 及其 CSS 样式表清单 2-3b 将创建一个包含两列的翻转图库。
***清单 2-3a。*创建双栏翻转画廊(gallery-2col.html)
`
Two column rollover Gallery *meta details go here*![Ali](“img/alithumb.jpg" "Ali")
![](“img/alibig.jpg")
- 
- 
清单 2-3b 将缩略图呈现为两列，并为展开的图像创建一个空间。
***清单 2-3b。*清单 2-3a (gallery-2col.css) 的 CSS 样式表
/*reset browsers to give cross browser uniformity*/ html, body, p, lu, li {margin:0; padding:0; } /*set images to have no borders*/ img { border:0; } /*place the column on the page*/ #col-1 { position: absolute; top: 0; left: 0; width:85px; } /* Set general thumbnail styles and remove bullets from the list elements*/ li { margin: 5px; list-style-type:none; } /* MouseOut state (default) - create and position a space for the larger images  and hide them*/ #col-1 a img.hid { width: 260px; height:390px;  position: absolute; top: 10px; left: 250px; visibility: hidden; } /* MouseOver state (hover)- reveal larger picture */ #col-1 a:hover { background: white; } #col-1 a:hover img.hid { visibility:visible; } /*--THE 2ND COLUMN STARTS 85 PIXELS FURTHER TO THE RIGHT ---*/ #col-2 { position: absolute; top: 0; left: 85px; width:85px; } li { margin: 5px; list-style-type:none; } /* MouseOut state (default) - hide larger picture */ #col-2 a img.hid { width: 260px; height:390px;  position: absolute; top: 10px; left: 155px; margin-left:10px; visibility: hidden; } /* MouseOver state (hover)- reveal larger picture */ #col-2 a:hover { background: white; } #col-2 a:hover img.hid { visibility:visible; }
混合了三列的大小和格式
如果图像都是纵向格式，或者都是横向格式，或者都是方形的，那么缩略图应该以每行相同的高度创建，以给出整齐的行。这样你会有整齐的缩略图行和列，最少的标记，很少的 CSS 麻烦。
然而，每个行的高度可以变化。缩略图的每一列可能会有不同的宽度，但如果宽度变化不是太大，您可能会有一个可接受的显示。列宽可以变化，以适应缩略图宽度几乎相同的缩略图图像组。
如果某些缩略图具有不同的高度，请对它们进行排列，以便每行包含高度相似的图像。例如，如果你有十二个缩略图，其中四个的高度为 80 像素，把这四个放在一行。如果四个缩略图的高度为 90 像素，将这四个放在下一行。如果最后四个缩略图的高度为 95 像素，将它们放在最后一行。这样，你将创建整洁的缩略图行。
不同格式
然而，现实生活从来都不容易:图像有不同的格式，比如肖像、风景和正方形。如果你的缩略图有多种格式，把人像格式放在一栏，风景格式放在另一栏，s 方形格式放在另一栏(如图图 2-4 )。尝试将缩略图高度与行高相匹配，如前一段所述。对于图像的扩展版本，格式(纵向、横向和方形)需要区别对待，以便扩展的图像不会由于将各种格式压缩成一个不合适的尺寸而失真。
***图 2-4。*三个纵向缩略图、三个横向缩略图和两个方形缩略图。光标悬停在顶部横向缩略图上，显示横向格式的大版本。
图 2-4 展示了形状和尺寸可以混合。每行的缩略图高度略有不同:最上面一行的所有缩略图高度为 103 像素，第二行的缩略图高度为 91 像素，最下面一行的缩略图高度均为 95 像素。
我把第一列底部的缩略图做得比上面的两个略宽一些，以证明你不需要对宽度过分挑剔。
创建了三种格式的扩展图像，以匹配缩略图的三种格式变化(纵向、横向和方形)。提供了三种不同的列宽来采用三种格式。
在第三列中，顶部缩略图是 103 × 103 像素的正方形，第二个缩略图是 91 × 91 像素的正方形。缩略图的最后一行是展示奇数大小的最佳位置，因为读者已经习惯了不规则的右边。将奇数大小放在最后一列可以确保所有其他缩略图之间的间距保持合理的一致。
图 2-5 显示与图 2-4 相同的页面，但是光标悬停在正方形图像上。为扩展图像保留的空间必须能够容纳各种图像格式。
***图 2-5。*光标现在停留在第三列第二行上，显示一个更大的正方形图像。第一列的大图将出现在图 2-1 和图 2-2 中。
在清单 2-5a 中，对应于图 2-4 和图 2-5 ，第三列底部故意省略了一个缩略图。这表明您不需要用缩略图填充每一列；例如，你的客户可能为她的画廊提供了数量惊人的图片。
清单 2-5a。【gallery-3col-mix.html】用翻转创建三列混合格式图像(??)
`
Three column mixed image shapes
- ` `
清单 2-5b 提供了一个三栏图库的 CSS 表示信息
***清单 2-5b。**清单 2-5a(gallery-3 col-mix . CSS)*的 CSS 样式表
/*set images to have no borders*/ img { border:none; } /*place the first column on the page*/ #col-1 { position: absolute; top: 0; left: 0; width:85px; } /*remove bullets from the list elements*/ li { margin: 5px; list-style-type:none; } /* MouseOut state (default) - create and position a space for the larger images and hide them*/ #col-1 a img.hid { width: 250px; height:340px; position: absolute; top: 10px; left: 400px; visibility: hidden; } /* MouseOver state (hover)- reveal larger picture */ #col-1 a:hover { background: white; } #col-1 a:hover img.hid { visibility:visible; } /*----------------------------------------------------*/ /* Set 2nd column of thumbnails 85px further over to right*/ #col-2 { position: absolute; top: 0; left: 85px; width:135px; } li { margin: 5px; list-style-type:none; } /* MouseOut state (default) - hide larger picture */ #col-2 a img.hid { width: 350px; height:265px; position: absolute; top: 10px; left: 315px; margin-left:0; visibility: hidden; } /* MouseOver state (hover)- reveal larger picture */ #col-2 a:hover { background: white; } #col-2 a:hover img.hid { visibility:visible; } /*----------------------------------------------------*/ /* Set 3rd column of thumbnails 170px further over to right*/ #col-3 { position: absolute; top: 0; left: 230px; width:108px; } li { margin: 5px; list-style-type:none; } /* MouseOut state (default) - hide larger picture */ #col-3 a img.hid { width: 260px; height:260px; position: absolute; top: 10px; left: 175px; margin-left:0; visibility: hidden; } /* MouseOver state (hover)- reveal larger picture */ #col-3 a:hover { background: white; } #col-3 a:hover img.hid { visibility:visible; }
更多列和更多行
增加列和行的数量只是添加相似的 HTML 代码块和匹配的 CSS 代码块的问题。定位列和隐藏放大的数学变得更加复杂，但是如果你的数学技能很低，如果你有一个好的 WYSIWYG 编辑器，通过试错定位并不太困难。
将图片库放在真实的网页中
图 2-6 显示了一个实际的 HTML5 网页中的三栏图库。
***图 2-6。*具有三列和三行缩略图的图库的网页。光标悬停在第二行的第一个图像上。
在这个 HTML5 标记中使用了三个语义标签:<header>、<nav>和<footer>。Remy Sharp JavaScript 片段用于确保页面在 IE 7 和 IE 8 中正确显示。此外，在 IE 7 中使用条件来定位画廊块。你会在图 2-6 中注意到，我已经展示了新的 HTML5 验证标识。我已经将我的代码片段合并到清单中，以使用户能够检查页面验证是否真实。关于 HTML5 验证的进一步讨论，参见第十八章。
清单 2-6a 是在图 2-6 中显示的翻转三栏图库的 HTLM 标记。
清单 2-6a。【gallery-page-validated.html 创建带有 HTML5 验证标志的三列翻转图库
`
Complete Gallery page ` `A full page roll-over gallery of greetings cards
Hover the mouse over a small picture to see an enlarged version
a href="http://jigsaw.w3.org/css-validator/">
Markup Validated by the World Wide Web Consortium
Web Design by Fred Bloggs
-
` `
清单 2-6b 提供了一个真实页面中 3 列图库集的 CSS 表示说明。
清单 2-6b。清单的 CSS 样式表 2-6a(gallery-page . CSS)
/*set attributes for consistent appearance in all browsers*/ html, body, p, ul, li, h1, h2 { margin:0; padding:0; } /*set images to have no borders*/ img { border:0; } /*add display attributes for the semantic tags*/ header, footer, section, article, nav { display:block; } /*SET FONTS*/ span.small { font-size:small; } h1 { font-size:x-large; font-family:"times new roman"; text-align:center; } h2 {font-size:large; font-family:"times new roman"; text-align:center; } /*PAGE LAYOUT*/ body {margin:auto; width:970px; } header { width:970px; } nav { float:left; margin-left:10px; width:115px; } nav ul { margin-left:0; border:0; width:115px; } /*set far right column for ads*/ #rightcol { width:150px; float:right; text-align:center; } #rightcol p.advert {font-size:small; margin-top:190px; } /*set middle column for main content*/ #midcol { margin-left:135px; margin-right:155px; } /*set gallery block position*/ #gallery-block { position:relative; left: 30px; top:10px; } /*set footer*/ footer { clear:both; color:black; text-align:center; width:970px; } .clear { clear:both; } /*set menu buttons*/ li.btn a { display:block; background-color :#66CCFF; color:black; font-weight:bold;  padding:4px; margin-left:0; text-align:center; list-style-type:none;  text-decoration:none; width:110px; } li.btn a:hover { background-color:blue; color:white; } li.btn { width:110px; } /*SET THUMBNAIL GALLERY BLOCK*/ /* Set general thumbnail styles */ #col-1 { position: absolute; top: 0; left: 0; width:85px; } /*place the first column on the page*/ li { margin: 5px; list-style-type:none; } /*remove bullets from the un-ordered list elements and create the  MouseOut state (default) - create and position a space for the larger images and  hide them*/ #col-1 a img.hid { width: 260px; height:390px; position:  absolute; top: 10px; left: 330px; visibility: hidden; } /* MouseOver state (hover)- this reveals larger picture */ #col-1 a:hover { background: white; } #col-1 a:hover img.hid { visibility:visible; } /*----------------------------------------------------*/ /* set 2nd column of thumbnails 85px further over to right*/ #col-2 { position: absolute; top: 0; left: 85px; width:85px; } li { margin: 5px; list-style-type:none; } /* MouseOut state (default) - hide larger picture */ #col-2 a img.hid { width: 260px; height:390px;  position: absolute; top: 10px; left: 245px; margin-left:0;visibility: hidden; } /* MouseOver state (hover)- reveal larger picture */ #col-2 a:hover { background: white; } #col-2 a:hover img.hid { visibility:visible; } /*----------------------------------------------------*/ /* set 3rd column of thumbnails 170px further over to right*/ #col-3 { position: absolute; top: 0; left: 175px; width:95px; } li { margin: 5px; list-style-type:none; } /* MouseOut state (default) - hide larger picture */ #col-3 a img.hid { width: 260px; height:390px;  position: absolute; top: 10px; left: 155px; margin-left:0; visibility: hidden; } /* MouseOver state (hover)- reveal larger picture */ #col-3a:hover { background: white; } #col-3 a:hover img.hid { visibility:visible; }
注
position:absolute;用于画廊内。但是要在页面上定位图库块，就必须对图库块本身使用position:relative;，否则图库块会在大屏幕和大分辨率上与菜单重叠。
***清单 2-6c。*用于清单 2-6a 的条件 CSS 支持浏览器 IE 7 (gallery-ie7.css)
/*set the gallery block 10px further to the right*/ #gallery-block { position:absolute; left: 165px; top:50px; }
提示 Lightbox 是创建画廊的另一种方法。如果你相当熟练地使用 JavaScript，访问
[www.lokeshdhakar.com/projects/li…](http://www.lokeshdhakar.com/projects/lightbox2/)你会发现一个演示，完整的代码和详细的说明。您还可以下载各种脚本。不幸的是，弹出图片覆盖了缩略图，但是提供了一些控件，使用户能够移动到下一个缩略图，就像幻灯片放映一样。按下 Escape 键，可以返回缩略图。
总结
本章描述的翻转效果优于从缩略图库中放大图片的旧方法。旧的方法是点击一张图片，让你进入一个新的页面——如果你有 12 个缩略图，你就必须创建 12 个页面。在本章中，您探索了一个只需要一个页面就可以显示缩略图和放大图像的翻转图库。这种方法还具有保持缩略图可见的优点，不需要额外的控件或按键。
讨论了缩略图在列中的位置，以及如何适应不同的图像形状和大小。还演示了创建翻转效果的过程。其他展示照片的方式，包括拼贴画和带说明的画廊，在第九章中有描述。
在下一章，你将会发现使用 CSS 渐变来设计背景的视觉可能性。您还将学习如何创建多个背景图像、透明背景、叠加图像和叠加文本。
三、背景
本章给出了使用各种 CSS 背景技术的流行网页增强的工作示例。涵盖了许多类型的背景，包括图像、渐变、多重背景、翻转菜单按钮和水印。我们还将看看如何使用新的 CSS3 背景属性创建多个背景。
概述
CSS 提供了一系列的背景来增强网页。自<body bgcolor=、#00ffff、>时代以来，网络已经走过了漫长的道路。例如，背景可以是:
- Gradient, solid color or image
- Accurate positioning on the page
- Or repeat (tile) vertically to fill a column, a row or a page.
- Covered with text and multiple images
- Set to allow the button background appearance to change in the flip menu (see Chapter 4 for more information)
- Watermarks (these should be used with care; They can make the superimposed text difficult to read)
注意如果一个元素没有背景属性，它将默认为
background-color: transparent; position: top left; background-repeat: repeat;
创建渐变背景
当渐变背景从页面顶部的颜色渐变为底部的白色时，效果最佳。然而，如果网站有一个纯色的背景(比如说，奶油色)，可以在上面叠加一个背景渐变，渐变应该是奶油色。使用 CSS，渐变可以扩展到任何屏幕宽度。
注本章后面会描述几种背景，但是关于 CSS3 背景渐变的信息请参见第五章。
大多数绘画程序(如 GIMP、Adobe Photoshop 和 Corel PaintShop Pro)都可以为彩色渐变创建图像。免费的在线 ColorZilla 渐变生成器生成 CSS 代码供您复制和粘贴。如果你勾选了标有 IE 9 支持的框，它提供了 IE9 条件语句的代码。您需要使用 Mozilla Firefox、Safari 或 Chrome 来访问这个在线生成器，可以在
[www.colorzilla.com/gradient-ed…](http://www.colorzilla.com/gradient-editor/)
ColorZilla 生成器不提供渐变图像；它提供了在选定的 HTML 元素中生成渐变的 CSS 代码。
透明梯度也是可能的；这些可以使用 ColorZilla 在线渐变生成器创建。将光标停留在小尖滑块上，以确定每个滑块的作用。要在 ColorZilla 中创建透明渐变，请点按并调整“预置”部分正下方水平栏上的“不透明度停止”滑块。ColorZilla 界面如图 3-1 所示。
您可以通过在 ColorZilla 中创建一些渐变并保存代码以生成打印输出来创建一个有用的资源。通过检查打印的代码，您可以学习如何生成自己生成的渐变。
***图 3-1。*ColorZilla 接口。在移动滑块之前,“停止”面板的内容是灰色的。
使用渐变图像
渐变图像适用于所有浏览器，并且可以在大多数画图程序中创建图像。图 3-1 中使用的渐变图像green-grad.jpg宽度为 3 像素，高度为 600 像素。颜色从上到下很快变成白色，因此即使在很短的网页(如主页)上，褪色也很明显。渐变图像可以保存为.gif，。png还是一个.jpg档。CSS 标记repeat-x从左到右展开渐变图像；x 轴指的是水平轴，就像在笛卡尔坐标图上一样。
body { background-color: #FFF; background-image: url(img/green-grad.jpg);  background-repeat: repeat-x; margin:auto; }
这可以用 CSS 简写如下:
body { background: #FFF url(img/green-grad.jpg) repeat-x; margin:auto; }
背景颜色设置为白色(#FFF;，绿色渐变为白色，如图 3-2 中所示。
***图 3-2。*带有渐变背景的页面
图 3-2 的列表展示了水平重复的 3 像素宽渐变图像的使用。这里使用的白色边框表示我们最终将插入背景图像和一些文本的位置。
下载示例
如果您从本书的网页上下载背景示例，请注意许多示例都有外部样式表。一定要下载样式表。所有的例子都适用于所有流行的浏览器。
注意将 JavaScript 文件
html5.js添加到包含以下任一项目的文件夹中。
清单 3-2 产生了图 3-2 中描述的渐变和白框标题。
清单 3-2。【background-ex1.html】创建渐变背景和框架标题
`
Gradient background and white border *meta details go here* `清单 3-2b。【HTML 的 CSS 标记清单 3-2a(gradient-style . CSS)
body { background:#FFF url(img/green-grad.jpg) repeat-x; margin:auto; } header, nav, footer, article, section { display:block; } header {width:920px; height:160px; border:10px solid white ; margin:20px auto; }
背景标题图像
图 3-3 显示了作为背景图像的标题横幅。
***图 3-3。*背景图像已添加至页眉。
图 3-3 ( background-ex2.html)的 HTML 与图 3-2 的 HTML 相同，除了它链接到一个新的样式表。新的样式表插入一个背景图像，如清单 3-3 中的所示。
***清单 3-3。*新样式表的 CSS(gradient-pic . CSS)
body, header { margin:0; padding:0; border:0; } /*add display attributes for the semantic tags*/ header, footer, section, article, nav { display:block; } body { margin:auto; background:url(img/green-grad.jpg) repeat-x; } header {width:920px; height:180px; padding:0; border:10px white solid;  **background: url(img/header3.jpg);** margin:10px auto; }
粗体代码将图像添加到标题中。图像header3.jpg被创建得比标题更宽，因为我们可能希望以后使用百分比更改为液体布局。固定、流动和半流动布局的完整讨论可在第十二章中找到。
图像的高度与标题的高度相同，在本例中，图像为 1024 × 180 像素。这一次我们不希望标题图像在整个标题容器中重复平铺，所以 CSS 标记使用了background-repeat:no-repeat;或简写；background: url(img/header3.jpg) no-repeat;。
你可能不希望页眉周围有边框，如图图 3-4 所示。
***图 3-4。*白色边框移除
要删除边框，只需删除 CSS 标记 border:10px solid white; 。
用文本覆盖背景图像
白色边框用于下一个示例，如图 3-5 中的所示。
图 3-5 。文本已经添加到背景图像中，并通过 CSS 定位。
在清单 3.5a 中，文本被添加到标题中，并通过 CSS 精确定位在标题图像上。CSS 样式表还设置文本的大小、格式和颜色。
清单 3-5a。【background-ex4.html】在页眉背景上添加和定位文本
添加的文本在清单中以粗体显示。
`
Web page with gradient, picture and text. **Devon's Rural Retreats
**清单 3-5b 使用 CSS 相对定位来放置标题文本，如图图 3-5 所示。
***清单 3-5b。*清单 3-5a 的 CSS 样式表 (grad-pic-text.css)
body, header, #content, { margin:0; padding:0; border:0; } header, footer, section, article, nav { display:block; } body { margin:auto; background:url(img/green-grad.jpg) repeat-x; } header {width:920px; height:180px; padding:0; border:10px white solid;  background: url(img/header3.jpg); margin:10px auto; } h1 { font-size:300%; color :white; **position: relative;** left:90px; top:55px; width:480px; }
注意文本是相对于页眉定位的，以防止文本在宽屏上从页眉的左边界突出来。
在页眉上叠加图像
我们现在在页眉背景上叠加一个玫瑰花形图像，如图图 3-6a 和 3-6b 所示。玫瑰花形图像被添加到 HTML 列表中，并占据了它在页眉中的自然位置(图 3-6a )。这个位置不太合适，因为楔在白框和文字之间看起来不舒服。因此，通过增加 CSS 样式表，玫瑰花结将被重新定位，如图图 3-6b 所示。
**图 3-6a。**这显示了应用相对定位之前玫瑰花结的位置。玫瑰花结添加在<头>标签之间
通过将图像包含在标题标记之间，可以将图像放置在标题上，如下面的代码片段所示。
`
Devon’s Rural Retreats
下一个任务是向右移动玫瑰花结，如图图 3-6b 所示。
***图 3-6b。*玫瑰花结现在相对定位了。修改了 HTML 列表，使其链接到修改后的样式表。
通过使用 CSS 中的 position 属性，图像可以精确地放置在我们想要的位置。清单 3-6a 的 HTML 类似于前面的例子，但是它链接到一个 CSS 样式表，该样式表包含重新定位玫瑰花结的指令。修改后的样式表的链接以粗体显示
清单 3-6a。链接到修改后的 CSS 样式表(【background-ex5b.html】??)
`
Header with re-positioned rosette ` `Devon's Rural Retreats
`
清单 3-6b 包括重新定位玫瑰花结的说明，以粗体显示。
***清单 3-6b。*修改后的重新定位玫瑰花结的 CSS(Rosette . CSS)
body { background: #FFF url(img/green-grad.jpg) repeat-x; margin:auto; } header, nav, footer, article section { display:block; } header {width:920px; height:180px; padding:0; border:10px white solid;  background:url(img/header3.jpg); margin: 20px auto; } h1 { font-size:300%; color :white; position: relative; left:90px; top: 55px;  width:480px; } **#rosette { position:relative; left:750px; top:5px;** **}**
相对定位将项目相对重新定位到原来的位置。有关相对和绝对定位的详细说明，请参见附录。
半液态布局的背景怎么样？
没问题。取同一个 HTML，将其重命名为background-ex6-liquid.html，链接到一个新的样式表liquid.css。CSS 清单 3-6c 将最大宽度限制为 1024 像素，最小宽度限制为 900 像素。
***清单 CSS 3-6c。*same page 的半流动版本的 CSS 样式表(liquid.css)
body { background: #FFF url(img/green-grad.jpg) repeat-x; margin:auto; } header, nav, footer, article section { display:block; } header { **width:95%; max-width:1024px; min-width:900px;** height:180px;  padding:0; border:10px white solid; background:url(img/header3.jpg);  margin:20px auto; } h1 { font-size:300%; color :white;  position: absolute; **left:15%;** top: 55px; width: 480px; } #rosette { position:relative; **left:85%;** top:120px; }
标题图像的宽度是 1024 像素；因此，本例中的标题不得超过 1024 像素。对于较宽的图像，标题的最大宽度可以放大以匹配。液态版本可以在这本书的第[www.apress.com](tos-cn-i-73owjymdk6/a8347b6bcf464670879d5b9a2354e08c)页看到。
透明背景
在下一个例子中，白色边框内的背景是透明的，因此绿色渐变是可见的，如图图 3-7 所示。
***图 3-7。*在这个布局中使用了几种背景。
图 3-8 展示了一组背景效果。这张截图的问题在于，在渐变的褪色部分的映衬下，底部边框几乎不可见。这个故事的寓意是，如果你想有一个白色边框的布局，就要避免渐变背景；请改用纯色背景。使用纯色背景，页面可以是任意长度，白色下边框清晰可见。
图 3-2 到图 3-7 中使用的照片得到了 Bonehayne 农场度假住宿网站所有者 Sandra 和 Ruth Gould 的许可
注意任何 IE 条件句都必须放在主 CSS 链接之后。JavaScript 跟在条件语句之后。将它们以不同的顺序放置可能会导致 IE 7 和 IE 8 中出现奇怪的行为。
在清单 3-7a 中，透明的 CSS 背景被用在了下方白色边框区域的中。这允许渐变背景显示出来。玫瑰花结(不是背景项目)与标题和下面的内容重叠，就好像它被粘贴在它们上面一样。翻转菜单按钮实际上并不作为图像存在，它们是由一个叫做动态伪样式的 CSS 后台方法产生的(这在第四章的中有完整的描述)。
***清单 3-7a。*创建一个透明背景的元素(background-ex7-transp.html)
`
Page with transparency and gradient background.Devon's Rural Retreats
Award winning accommodation, self catering or bed and breakfast
Cottages, converted barns, caravans
The superb interior of one of our cottages
-  Accommodation
- Maps
-  Information
-  Attractions
- Contact Us
- Home Page
All situated in the beautiful rolling countryside of Devon
CSS 清单 3-7b 包含了创建透明内容框的代码，这些代码以粗体显示。
清单 3-7b。清单 3 的 CSS 样式表-7a*(*transparent . CSS)
/*equalise all the margins, paddings and borders built into various browsers*/ div body #header #content { margin:0; padding:0; border:0; } body { background:#FFF url(img/green-grad.jpg) repeat-x; margin:auto; } /*add display attributes for the semantic tags*/ header, footer, section, article, nav { display:block; } header {width:920px; height:180px; padding:0; border:10px white solid;  background: url(img/header3.jpg); margin:10px auto; } h1 { font-size:300%; color :white; position: relative; left:90px; top: 55px; width:480px; } #rosette { position:relative; left:750px; top:5px; } #content { **background-color:transparent;** border-left:10px white solid;  border-right:10px white solid; border-bottom:10px white solid; width: 904px; margin-top:-10px; margin-left:auto;  margin-right:auto; padding:8px; font-size:medium; color:maroon; } h2 { font-size:x-large; color:white; margin:0 0 10px 0; } h3 { font-size:large; color:white; margin:0 0 6px 0; } #leftcol { float:left; width: 310px; vertical-align:top; } #rightcol { width: 135px; float:right; height: 252px; margin-right:10px; } #midcol { margin-left:315px; margin-right:145px; margin-top:10px; vertical-align:top; } /* set side menu block position and width*/ nav { margin:10px 30px 0 10px; width:135px; float:right; } /*Set list style within the menu block only. This removes bullets*/ nav li { list-style-type:none; } /* set general side button styles */ nav li { margin-bottom: 3px; text-align: center; width:130px; } /* set general anchor styles and include the zoom fix for IE6*/ nav li a { display: block; color: white; font-weight: bold; text-decoration: none; zoom:1; } /* specify mouse state styles */ /* mouseout (default) */ nav li a { background:#559a55; color: white; border: 5px outset #559a55; padding-bottom:3px; } /* mouseover */ nav li a:hover { background: red; color:white; border: 5px outset red; } /*mouse active*/ nav li a:active { background:maroon; border: 5px inset maroon; } br.clear { clear:both; } #midcol img { margin-left:10px; } footer { clear:both; color:maroon; text-align:center; }
背景项目符号
图 3-9 和 3-10 显示了如何使用背景图像增强菜单列表。
图 3-8。
图 3-9。
一个简单无序的菜单列表看起来像图 3-8 。图形背景项目符号可以增强菜单列表，如图图 3-9 所示。使用text-decoration:none;删除链接下方的下划线。使用 CSS 代码background-image:url(img/*image*.gif)可以用背景图片替换标准项目符号。
在 CSS 清单 3-9b 中，我使用了一个背景图片(menu-bullet.gif ) 18 ×18 像素。整个区域——即项目符号及其文本——对鼠标做出响应。每个菜单项之间的合理间隔有助于残疾人避免意外点击错误的链接。
清单 3-9a。【bullet-images.html】使用无序列表提供基本导航菜单
`
Using images for bullets `每一个href="#"都是一个虚拟链接，当然应该被替换为正确的网页路径。
***清单 3-9b。*清单 3-9a 用无序列表中的图片替换项目符号的 CSS(Bullets . CSS)
/*add display attributes for the semantic tags*/ header, footer, section, article, nav { display:block; } /*remove bullets*/ nav ul { list-style:none; width:120px; } /*place background image in each menu item. The top margin spaces links 10 pixels apart*/ nav li { height:20px; margin-top:10px; background-image:url(img/menu-bullet.gif);  background-repeat:no-repeat; } /*remove underline. Push text 30px to the right to clear the image*/ nav li a { color:black; text-decoration:none; padding:0 5px 0 30px; }
使用 HTML5 和 CSS2 的多种背景
可以组合几个背景图像。图 3-10 显示了三幅组合图像。
***图 3-10。*多重背景
使用<div> s，CSS2 中的多个背景不仅是可能的，而且过程也很简单。这种方法适用于所有流行的浏览器。使用 CSS2 的解决方案需要四个<div>,这里使用了三个图像:渐变、剪贴板和甲虫。清单 3.10a 为三幅背景图片创建了<div>。
清单 3-10a。【multiple-css2.html】创建三个 div 来包含三个背景图像
`
multiple background with css2 *meta details go here****清单 3-10b。*将背景图片放入 Divs 的 CSS2(multiple-CSS2 . CSS)
#wrapper { width:320px; height:420px; margin:auto; } #background-container { width:300px; height:400px; margin:auto;  background:url(img/blugrad500.jpg) repeat-x; } #clipboard { width:300px; height:400px;  background: url(img/clipbrd.gif) no-repeat 50% 50%; } #beetle {width:300px; height:400px;  background:url(img/Beetle.gif) no-repeat 50% 55%; }
使用 CSS3 的多种背景
CSS3 仅使用一个 div 就可以提供多个背景图像。在撰写本文时，Mozilla Firefox、Safari、Chrome 和 Opera 都支持这一功能。Internet Explorer 7 和 8 不能理解这种最受欢迎的标记简化。图 3-11 和图 3-10 外观相同，但图 3-11 是使用 CSS3 多图像模块的结果，这不需要三个<div>
***图 3-11。*使用 CSS3 的多个背景图像
清单 3-11a 只有一个<div>用于三幅背景图像，以粗体显示。
清单 3-11a。【multiple-css3.html】为三个 CSS3 背景图像提供一个 Div
`
Multiple background with css3meta details go here
*清单 3-11b。这个 CSS3 样式表为清单 3-11a(multiple-CSS3 . CSS)*提供了三个背景图片
#example {width:300px; height:400px; margin:auto;background:  url(img/Beetle.gif) no-repeat 50% 55%, url(img/clipbrd.gif) no-repeat 50% 50%,  url(img/blugrad500.jpg) repeat-x; }
注意每个背景图片的 URL 必须用逗号隔开。
背景图像必须以相反的顺序列出，即底层(渐变)在最后，甲壳虫在标记中首先列出。使用了背景属性的简写版本。
真实页面中的多个 CSS2 和图像
下一个工作示例结合了前面描述的技术。我选择使用带有三个<div>的 CSS2 解决方案，因为它比使用 CSS3 方法更容易准确地定位方块。为了帮助使用 CSS3 定位，请确保将所有边距、填充和边框归零，如下所示:
body { margin:0; padding:0; border:0 }
三个<div> s 技术的结果如图图 3-12 所示。
图 3-12 。不太可能的产品页面
注意图 3-12 中没有使用 CSS3 方法，因为 IE 7 或 IE 8 不支持 CSS3。
由清单 3-12a 及其样式表清单 3-12b 生成的多重背景图像由天空和三个大小和颜色不同的正方形组成。三个<div>包含三个彩色方块。半液态布局的最大宽度限制为 1200 像素，最小宽度限制为 960 像素。
清单 3-12a。【squares-html5.html 创建带有多个背景图片的页面
`
Squares for sale *meta details go here*Square Deals
- About  Us
-  Colours
-  Brochure
-  Contact us
- Home Page
Leaders in the creation of squares
- A wide range of squares in many colours always in stock
- Our computerised machines produce squares fast, this ensures prompt delivery  at reasonable prices
- Try our square design service
` `
在 CSS 清单 3-12b 中，三个方块用粗体表示。
***清单 3-12b。*在标题中放置三个方块的 CSS 样式表(squares-html5.css)
body, header, div, #content, { margin:0; padding:0; border:0; } body{background: #39F; color: navy; font: medium Arial; } /*add display attributes for the semantic tags*/ header, footer, section, article, nav { display:block; } h1,h2,p{margin: 0; padding: 0; } h1 { font-size: 380%; color: #FFF; font-family:Arial; font-weight:bold; color:white;  letter-spacing: 1px; width:560px; position:absolute; top:55px; left:20px; } h2 { font-size: 150%; color:navy; margin-top:-10px; } .small { font-size:small; } .tiny { font-size:x-small; text-align:center; } #container { position:relative; width:95%; max-width:1024px; min-width:920px;  margin: 0 auto 10px auto; padding:10px; text-align:left; background:#FFF; } #mainpanel { width:100%; margin:auto; margin-bottom:0; margin-top:-10px;  background:#bad0ff; text-align:center; } header { padding-top:0; width:100%; height:156px; margin:0 auto 0 auto;  background-image:url('img/bluepan.jpg'); background-repeat:no-repeat;  background-position:-20px left; } **#red { position:absolute; right: 15px; top:14px;**  **background-image:url('img/red-square.png'); width:160px; height:160px; z-index:3;** **}** **#yellow { position:absolute; right: 120px; top:44px;**  **background-image:url('img/yellow-square.png'); width:123px; height:125px; z-index:2;** **}** **#white {position:absolute; right: 200px; top:61px;**  **background-image:url('img/white-square.png'); width:105px; height:109px; z-index:1** **}** #midpanel{margin-left:160px; margin-right:5px; margin-top:0; padding:0 10px 10px 0;  background:#bad0ff; color:navy;} #midleft { width:45%; float:left; background:#bad0ff; } #midleft li { text-align:left; margin:0 0 10px 10px; width:330px; list-style-type:disc; } #midright { float:right; width:350px; text-align:left; background:#bad0ff; } footer { clear:both; width:99%; background:#bad0ff; padding:5px; margin-top:10px;  text-align:center; font-size:small} nav { float:left; width:140px; margin-left:0; margin-top:20px; background:#bad0ff; } /* set vertical button menu position */ nav ul { float:left; width:130px; margin-left:10px; padding-left:0;  list-style-type :none; } /* set general side button styles */ nav li { width:115px; line-height:20px; margin-bottom: 3px; text-align: center; } /* set general anchor styles */ nav li a { display: block; width:115px; color: white; font-family:arial;  font-size: small; font-weight:bold; text-decoration: none } /* specify mouse state styles */ /* mouseout (default) */ nav li a { background: #1A9CE0; border: 4px outset #AABAFF;} /* mouseover */ nav li a:hover { display:block; background: #0A4ADF; border: 4px outset #8ABAFF;  width:115px;} /* onmousedown */ nav li a:active { background:#AECBFF; border: 4px inset #AECBFF; } br.clear { clear:both } .lft { text-align:left; } .cntr { text-align:center; }
CSS 背景图片的规则
这些规则涵盖了正常的、不重复的背景图像，例如横幅标题中使用的图像，以及用于填充页面上某个区域的平铺图像。您可以在<div> s、表格单元格和段落中使用任何背景图像属性。
定位单个不重复的背景图像
背景图像可以放置在容器内，如图图 3-13 所示。
***图 3-13。*位于容器内不同位置的图像
可以使用关键字、像素、em 或百分比来相对于容器的边缘定位背景图像。清单 3-13 ，使用内部样式和关键字定位图像，如图图 3-13 所示。这里使用内部样式表是为了简化说明，在真实的页面中，您可能会使用外部样式表。
清单 3-13。【image-position.html】相对于其容器定位图像(??)
`
Positioning images in containers *meta details go here* /*The containers in Figure 3-13 are dealt with from left to right */ #container1 {border:2px black solid; margin-top:50px; margin-right:10px; float:left;  width:200px; height:200px;background-image: url("img/tile.jpg");  background-repeat: no-repeat; background-position: left top; } #container2 {border:2px black solid; margin-top:50px; margin-right:10px;  float:left; width:200px; height:200px; background-image: url("img/tile.jpg");  background-repeat: no-repeat; background-position: right bottom; } #container3 {border:2px black solid; margin-top:50px; margin-right:10px; float:left;  width:200px; height:200px;background-image: url("img/tile.jpg");  background-repeat: no-repeat; background-position: center center; } #container4 {border:2px black solid; margin-top:50px; margin-right:10px;  float:left; width:200px; height:200px;background-image: url("img/tile.jpg");  background-repeat: no-repeat; background-position: left bottom; } ` ` `使用像素或 ems 提供了比关键字更多样的定位。第一个像素或 em 维度将从左侧水平放置图像。第二维将相对于容器的顶部边缘放置图像。
下面的代码将显示距离左边缘 150 像素、距离上边缘 100 像素的图像:
#container1 { background-image: url("tile.jpg"); background-repeat: no-repeat;  background-position: 150px 100px; }
注意如果只指定了一个值，则设置水平位置。如果指定了两个值，则第二个值设置垂直位置。
指定重复平铺的背景
平铺意味着水平或垂直重复图像。典型的瓷砖如图 3-14 所示。
可以使用任何
.jpg、.png或.gif图像进行平铺。平铺整个页面或容器通常是通过一个大约 100 × 100 像素的重复平铺图像来实现的，如图图 3-14 所示。
图 3-14。【典型的瓦(tile.jpg)??
要填充页面或容器的整个背景，平铺在水平和垂直方向重复，如下所示:
body { background-image: url("tile.jpg"); background-repeat: repeat; }
以下代码将背景图像水平平铺在页面上(一个平铺高度):
body { background-image: url("tile.jpg"); background-repeat: repeat-x; }
下面将背景图像垂直向下平铺在页面上(只有一个平铺宽度):
body { background-image: url("tile.jpg"); background-repeat: repeat-y; }
水平或垂直瓷砖条的宽度和深度不必是瓷砖尺寸的倍数。同样，一个只有一个磁贴深的横幅或者一个只有一个磁贴宽的侧边栏也是不现实的。接下来的例子将演示平铺填充任何宽度或深度的<div>或其语义等效物。图 3-15 、 3-16 和 3-17 中显示了三个平铺示例。
***图 3-15。*一整页
***图 3-16。*一条横条
***图 3-17。*一条竖条
图 3-15 有一个装满瓷砖的容器。图 3-16 中的水平横幅填充了 100 像素的方块，但只有 180 像素深；这表明容器不必是图块大小的倍数。类似的，在图 3-17 中，侧边栏的宽度不是磁贴宽度的倍数，而是 150 像素宽。示例中使用了内部样式，但是在网站中，样式表应该是外部的。
清单 3-15 用瓷砖填满一个容器。如果<body>是容器，整个屏幕将被平铺。
清单 3-15。【tile-whole-page.html 往集装箱里装瓷砖
`
Tile the whole container #container { width:600px; height:500px; background-image: url("img/tile.jpg");  background-repeat: repeat; }清单 3-16 创建一个水平的平铺条，填充一个<分区>。图块将受到<分区>的边界约束。例如，在高度为 150 像素的水平< div >中使用 100 像素见方的图块，您将看到只有一个半图块高的水平条带。
清单 3-16。创建一个水平的平铺条(【tile-horizontal-strip.html】)
`
` `Horizontal strip of tiles #container { width:600px; height:500px; } header {width:600px; height:180px; background-image: url("img/tile.jpg");  background-repeat: repeat; } header, footer, section, article, nav { display:block; }清单 3-17 创建了一个垂直的瓷砖条，它将填充一个<分区>，但不会溢出到<分区>的边界之外。在本例中，垂直栏是导航菜单的侧栏。
***清单 3-17。*创建一个真正的瓷砖条(瓷砖垂直条)
`
Vertical strip of tiles #container { width:600px; height:500px; } nav {width:150px; height:500px; background-image: url("img/tile.jpg");  background-repeat: repeat; } header, footer, section, article, nav { display:block; }创建静态水印作为背景图像
水印必须非常微弱，否则会使覆盖的文本难以阅读。背景图像通常会随页面一起滚动。然而，通过使用属性background-attachment: fixed;,，当用户向上或向下滚动时，水印将保持在屏幕上的相同位置。这方面的 CSS 如下:
body { background-image: url("image.jpg"); background-attachment: fixed }
图 3-18 和 3-19 显示了固定水印的作用。
图 3-18 。显示页面顶部
***图 3-19。*用户已经向下滚动，但是水印没有向下移动。
***清单 3-18。*创建一个背景水印，但固定它在屏幕上的位置。(watermark.html)
`
A fixed watermark #container { text-align:center; width:600px; height:500px;  background-image: url("img/cheqflags.jpg"); **background-attachment:fixed** }The top heading
` `
The middle heading
The bottom heading
注意背景色填充了框元素的填充和边框区域，而不仅仅是内容区域。如果您选择点或虚线边框，背景颜色将在点或虚线之间可见。
总结
您已经看到了背景是如何将一个普通的页面变成一个视觉上令人兴奋的页面的。使用本章介绍的技术，你现在可以完全控制 CSS 背景的样式和位置。您了解了如何在容器中放置背景图像，比如<div> s 或它们的语义对等物。向您展示了如何将背景与文本相结合，以及如何在背景上叠加图像。使用 CSS2 和 CSS3 演示了多个背景图像。还演示了使用背景图像作为水印。背景将在本书的许多其他章节中出现。
在下一章中，你将会发现如何创建多种类型的翻转菜单，包括水平菜单栏、垂直按钮块和标签菜单。
