精通-HTML5-CSS3-和-XML-Web-标准-全-

龙哥盟 / 2024-10-06 / 原文

精通 HTML5、CSS3 和 XML Web 标准（全）

原文：Web Standards Mastering HTML5, CSS3, and XML

协议：CC BY-NC-SA 4.0

零、前言

从 20 世纪 90 年代初的最初阶段开始，网络就吸引了各种各样的内容作者。任何人只要知道一点点知识，就可以随时随地在网上发表文章。这种便捷的访问使得数十亿个网站以任何形式出现在“网络的网络”上。然而，这种方法导致了严重的问题，影响了 Web 的现在和未来。

由于互联网服务(超越 WWW)数量的快速增长，例如基于互联网协议的语音(VoIP)、IPTV 和即时消息，用户的数量也逐渐增加。在这种日益增长的流行中，对 web 开发的需求也在增加。越来越多的人希望开发和维护自己的网站并提供在线服务，但他们通常不愿意为 IT 专业人员的服务付费。然而，这些任务可能相当复杂，并且通常需要比许多人所拥有的更多的技术知识。

在现代内容管理系统的时代，许多人认为不再需要合格的专业人员来开发网站。尽管这些软件工具在很多情况下都是不错的选择，但无论是非 IT 人员还是计算机软件都不会取代专业的网站开发人员。然而，每个人都有可能用用户友好的软件工具自己开发和维护类似专业人员的网站。问题是这些工具经常产生无效的代码，并且不遵循 web 标准。

Web 开发人员不断被要求解决同一站点在各种渲染引擎和浏览器版本中的外观和行为不一致的问题，而这是非专业人员通常很难解决的问题。应该使用 Web 标准来彻底消除这些问题。

常见的开发方法只考虑一些基本原则，比如设计和用户界面，或者最流行的浏览器中的行为。一些读到新兴技术的开发者试图尽快应用这些方法来与其他网络工作室竞争。即使出现了更好的技术和新趋势，其他开发人员也会尽可能长时间地使用相同的技术、技巧和实践。不幸的是，在大多数情况下，web 标准的正确实现并不是主要关注点。

尽管 web 开发和配置实践的标准越来越多，但其中许多标准需要数年时间才能被广泛采用，或者完全被忽略。一些例子是新闻提要、SVG、Web 字体、MathML、名称空间机制、可访问性技术和 RDFa。

从标准化的角度来看，几乎所有的网站(即使是那些不断发展的网站)都应用了过时的技术和实践，并且不是最佳的，这并不夸张。互联网用户数量的增长导致对在线服务、外观、存在和整体功能的需求不断增长。例如，由于宽屏显示器的新趋势，出现了新的分辨率和宽高比标准。网站开发者该如何应对呢？如何同时为大分辨率显示器和小型手持设备准备 web 内容？如何提供最新的 Web 3.0 服务，使其可以在大多数浏览器上使用？如何在各种平台上保证网站的外观和功能？如何在保留站点信息、功能和行为的同时，最小化标记和样式规则的长度？

尽管到目前为止，这些问题还没有最终的解决方案，但是应用 web 建议和标准可能是唯一的选择。应用新的建议和标准为解决那些使网站开发人员和互联网用户的生活更加困难的问题提供了令人印象深刻的潜力。

浏览器能够忽略不正确的代码块和注释。通过提供缺失的结束标记，它们甚至能够呈现不正确的文档。Web 浏览器保持通信信道活跃，因为浏览器具有极强的容错能力。浏览器不仅可以呈现标准化的文档，还可以呈现错误百出的文档，这就是网络工作的原因。然而，大多数人容易忘记这个事实，或者根本不知道。此外，许多人对不符合标准的网站开发实践中出现的问题一无所知。互联网用户的需求形成了网络，并引入了对新方法和新技术不断发展的需求。在这样的技术被标准化之前，没有正式的方法来实现它们。在它们被标准化之后，开发者应该根据相应的标准来应用它们。标准合规性问题极大地影响着全球数百万人的日常生活。即使用户不知道网站崩溃、包含不可读元素、难以使用、在各种浏览器中看起来完全不同或者根本不工作的真正原因，这些问题还是会发生并反复出现。

网站开发人员有责任为每个人创建和维护一个更好的、格式良好的网站。类似地，浏览器供应商也应该通过在其产品中提供适当的标准支持来为标准化做出贡献。

这本书全面收集了当前和未来万维网标准的最新信息。事实上，它是有史以来出版的最完整的 web 标准化参考资料。因为在许多情况下，遵从标准并不是一个简单的过程，所以 web 开发人员应该在实现某种例程之前评估大量的标准化问题，以便能够开发功能齐全的遵从标准的网站。用户友好的描述和精确的技术文档也可以漂亮地呈现。毕竟，web 标准化不是一种牺牲！

涵盖所有主要的 web 标准，这本书侧重于语法、形式语法、推荐注释和其他标准化问题，而不是提供完整的技术描述。

这本书的目的是为网站开发者提供一个标准网站创建的指南。这些章节包括理论技术讨论和分步编程的实用示例代码。除了基础知识和技术的简短回顾，这本书列举了标准网站开发中最重要的实践和资源。

一、网络标准

在本书的这一部分，您将熟悉 web 标准背后的理论背景。您将学习网站标准化的基本概念，以及开发标准的标准化机构和发布、推广和分发标准的最有影响力的网站。您将了解 web 标准的重要性，理解不正确实现的原因，以及纠正或消除它们的技术。您将按类别学习 web 标准，从服务器配置和国际化设置到符合标准的标记、样式表、对象嵌入、元数据注释和新闻提要。阅读完这些章节后，你将有一个坚实的 web 标准基础，并且能够为你的项目选择最合适的标准。

C H A P T E R 1

Web 标准介绍

技术标准广泛应用于生活的各个领域——想想纸张大小的标准和适合它们的标准信封。 Web 标准与其他标准类似，是技术和方法的规范性规范。换句话说，它们是需要满足的明确定义的需求集。它们不仅从技术角度来看是理想的，而且代表了用户的需求。然而，web 标准经常被忽视；万维网由数十亿个文档组成，这些文档没有考虑适当的限制或规定，导致了严重的问题。这是因为网络是一个“免费论坛”，即使没有技术背景，每个人都可以在这里发表文章。不幸的是，这种方法是有代价的:您经常会遇到下载速度较慢、外观不佳或功能较差的站点。此外，尽管遵从标准有好处，但不仅内容作者，而且 web 开发者都发现很难实现 web 标准。其中一个主要原因是缺乏广泛的分布。即使是最受欢迎的网站也可能非常混乱，与常见的误解相反，开发人员不能将它们作为学习的参考。此外，许多开发人员忽视标准，因为他们错误地认为使用标准进行开发意味着额外的工作量。人们对 web 标准的了解有限，他们通常不知道应用它们的原因和最佳方法。

在本章中，您将了解 web 标准的重要性，以及为了在自己的应用中充分利用 web 标准，您应该了解的可靠资源。Web 标准经常被忽略，这导致了严重的问题，这些问题将在本章后面的“问题陈述”一节中描述。本章阐述了 web 标准的主要好处。它还会让你对标准的多样性和地位有一个坚实的理解。阅读本章后，您将能够识别最终的规范，并为任何项目选择最合适的规范。

基本概念

Web 标准适用于万维网(简称 Web)。这些正式的标准定义和描述了网络的各个方面。根据标准的主要推动者 web 标准项目的说法，“Web 标准是经过精心设计的，旨在为最多的 Web 用户提供最大的好处，同时确保在 Web 上发布的任何文档的长期生存能力。使用这些标准进行设计和构建可以简化和降低生产成本，同时提供更多人和更多类型的互联网设备可以访问的网站。随着传统桌面浏览器的发展，以及新的互联网设备进入市场，沿着这些路线开发的网站将继续正确运行。

网络标准通常是事实上的标准。由于没有强制执行的法律，web 标准被很大一部分 web 开发人员所忽视。世界上最大的网络标准化组织万维网联盟(W3C)发布的建议也不例外。然而，在 2010 年 11 月，W3C 向前迈进了一大步，成为 ISO/IEC JTC 1 PAS 提交者，因为 W3C 生产的任何稳定的核心 web 技术也在 ISO 的范围内。国际标准化组织(ISO)和国际电工委员会(IEC)可以通过将事实上的标准的地位变为法律上的(原则上) [2 ]来有效地促进 W3C 标准的更广泛(如果可能的话)全球采用。

网站标准化是指标准网站的开发过程或对非标准网站的修正，以满足成为标准网站的要求。这个短语最近与 web 设计和编程的哲学联系在一起，包括广泛接受的技术、技巧和最佳实践的应用。该列表还包括各种技巧，以及许多开发人员使用的 CSS 和 JavaScript 技巧，他们中的大多数人并不知道这些技术不应该使用。

标准化的主要目标是功能性、互操作性以及浏览器和分辨率独立性，以确保用户体验、内容访问、菜单可用性和可预测的行为。

标准化的作用

正如您将看到的，web 开发有几个目标，如果没有标准化的方法，这些目标是无法实现的。没有纸张尺寸标准，怎么可能在日常生活中使用打印机呢？没有标准电压，怎么会有人使用电子设备呢？为什么 web 开发人员应该认为标准对于质量保证不是必不可少的？

在 web 上创作时，应该遵循由 Web 标准定义的语法和其他规则。尽管浏览器具有强大的内置错误处理功能，能够消除用户方面的问题，但 web 开发人员不应该滥用这些功能。

总体而言，设计成本更低，因为需要做出的设计决策更少。常规设计应该基于标准。另一个好处是开发者可以在设计时再次使用他们的知识。

如果内容没有以适当的方式提供，用户会在几秒钟内切换到其他网站。因此，糟糕的功能和可用性可能会对网站流量和商业收入产生严重影响。

此外，不同的浏览器以不同的方式解释坏的或损坏的标记。这可能是不一致、布局错误、样式问题和意外脚本行为的原因。最好的方法是满足适当的文档类型定义和 W3C 推荐标准所描述的结构、语法和其他规则的所有要求(参见“W3C”一节)。

应用最新的网络技术是困难的，但是它对于提供大多数用户期望的强大功能是至关重要的。网站作者应该选择正确的技术与其他开发者竞争。符合标准是网站开发的一个基本特征，它保证了总体质量。

因此，使用 web 标准是提高 Web 整体可用性的一种有前途的方法。

非标准化加价的成本

所有互联网用户都会不时地遇到这样的情况:网站分崩离析，在明显错误的位置显示元素，这些元素与不可读的内容部分重叠。

在大多数情况下，原因是不标准的或特定于浏览器的源代码，或者缺少用于呈现页面的 web 浏览器的标准支持。

从标准化的角度来看，大多数网站已经过时。即使是最大、最知名的公司也不断发布非标准文档。

非标准化文件的主要缺点如下:

搜索引擎索引不足。爬网程序无法索引编码不正确的文档，这可能会导致访问者流失。 ¹
下载时间更长。
更长的渲染。
不正确的渲染(最大的缺点之一)。
更容易开发。
可及性水平低。
低水平的向后兼容性。
流量流失，访客减少，销量下降。由于前面列出的不便和问题，不符合标准的网站具有丧失功能、受欢迎程度和生产力的更高风险。
额外的带宽负载和托管成本。源代码中大量不必要的字符增加了文件的大小和复杂性。
更新维护困难。

符合标准的标记的好处

有效的、符合标准的标记有几个优点。以下是最重要的几个:

搜索引擎爬虫可以更充分的索引文档，内容基本都是搜索引擎优化的。
相比那些违反标准的网站，符合标准的网站下载速度更快。
结构良好的标记提供了更快的呈现速度。
正确应用标准的 Web 文档被准确地呈现。
容纳了更多的用户，他们可能会因为正确的外观和布局而停留更长时间。 ²
更低的开发成本(仅在合格的开发人员和精心选择的软件工具的情况下)。
符合标准的标记是网站可访问性的基础。
随着浏览器的发展，确保了向后兼容性。
最佳的内容长度和文件大小(源代码中没有列出不必要的字符)，以及成本最优的存储(更便宜的主机的潜力)。

然而，还有几个额外的因素会影响搜索引擎索引。

² 得益于正确的渲染而非设计。

符合标准的标记比违反标准的标记更容易维护和更新。
符合标准的源代码会过时，当引入新标准时，升级会容易得多。
保证了与当前和未来浏览器的兼容性(至少从开发人员的角度来看)。
激励实现并迫使 web 浏览器逐步支持标准。

显然，符合标准的、干净的代码比非标准的源代码有许多优势。因此，在网站开发过程中考虑标准不仅是强烈推荐的，而且是至关重要的。

标准的制定和发布

一般来说，web 标准是由标准化机构发布的 web 技术的技术规范。大多数网络标准都是由 W3C [4 发布的。它的建议在用标准设计时至关重要。W3C 发布了关于标记语言、样式表、元数据、XML 技术、语义标记、数学符号和图形格式的规范，这只是提到了最重要的类别。然而，在 web 标准化领域也有其他有影响力的标准组织(表 1-1 )。

³ 建议一词指的是缺乏法律地位。这是它们很少被应用的原因之一。

W3C

由蒂姆·伯纳斯·李(“网络的发明者”)创立并领导的万维网联盟是为万维网制定标准的最大国际组织。它在世界各地有几个地方办事处。W3C 的成员主要是热衷于参与 web 标准开发的大学和研究团体。W3C 是一个开放的论坛。

正在努力简化对 web 标准的贡献。在 2010 年秋天，W3C 发布了“让 W3C 成为新标准之地”的提案草案。开放性可能是来自网络社区的新的、更容易的贡献的关键，包括没有 W3C 成员资格的独立网络开发者。这也有助于知识重用的最大化 [13 ]。HTML5、CSS、SVG、MathML、各种 API、RDFa 和微数据等重要标准被总结为一套名为开放网络平台的技术标准，该平台向外部组织和公众开放，供其做出贡献。W3C 现在是“网络标准化的开放平台”。

事实上，web 开发人员每天面临的许多问题已经在早期的 W3C 推荐标准中得到了解决和公布，有时是在几年前。一些技术基于最初在其他地方创建的想法，但后来与 W3C 共享，以获得更广泛的支持和流行。

例如，新闻提要并不像人们想象的那么新。当它们第一次出现在 Web 上并得到主流浏览器、操作系统和办公套件的支持时，它们在很多年前就已经被描述过了。令人惊讶的是，RSS 0.9 早在 1999 年就发布了 [17 ]！

类似的趋势也适用于标记语言、矢量图形、等式和其他规范。

数学符号以 GIF 图像文件的形式发布在整个互联网上，尽管用于此目的的标记语言在 1999 年成为推荐标准(随后很快有了更新)。

虽然人们经常这样称呼他，但他并不这样称呼自己。

尽管 W3C 在 1998 年就开始开发 SVG 标准，并在 2001 年成为推荐标准，但矢量图形很少在 Web 上使用。 ⁵ 用高分辨率位图图形代替。但是为什么呢？只要有可能，就应该用 SVG 来代替它们，并且光栅图形应该只应用于发布照片。W3C 的免费 web 编辑器/浏览器 Amaya 以及 Adobe Illustrator 和 CorelDraw 等流行的图形套件都支持 SVG。从 2010 年开始，SVG 也被 Google [18 ]收录。SVG 1.2 也支持动画。编辑 SVG 并不比编辑位图复杂，但 SVG 文件一般体积更小，下载速度更快，质量也是位图无法比拟的。

WHATWG

Web 超文本应用技术工作组(WHATWG)是一个专业但非官方的社区，由个人于 2004 年创建。这是对 W3C 相对缓慢的标准开发及其决定放弃 HTML 以支持 XHTML 和其他基于 XML 的标准的回应。WHATWG 有一个只接受邀请的委员会，控制着规范的编辑。任何人都可以加入 WHATWG 的开放邮件列表[19]，为 WHATWG 做出贡献。

亲爱的

欧洲信息学和数学研究联盟召集研究人员在 ICT 和应用数学的各个领域进行合作，包括但不限于信息系统应用、信息存储和检索、信息接口和表示、数据加密和数据库管理 20 。来自欧洲不同国家的 19 个组织保证了这一科学方法。ERCIM 在 SMIL 和 SVG [21 ]等标准的制定中发挥了重要作用。

IETF

互联网工程任务组(IETF)是非营利组织互联网协会(ISOC)和互联网架构委员会(IAB)的标准化组织。IETF 主要关注互联网协议。IETF 标准通常比网站开发人员感兴趣的级别低；然而，即使是众所周知的 TCP/IP 也是由 IETF 开发的。IETF 的使命是通过制作高质量的相关技术文档，影响人们设计、使用和管理互联网的方式，使互联网更好地工作。技术文件列在征求意见(RFC)网站 [23 ]上。

Ecma 国际

Ecma International 是一个非营利性的标准组织，致力于开发和推广信息和通信系统的标准。从 web 开发人员的角度来看，它最重要的标准之一是标准化脚本语言 ECMAScript(JavaScript 基于它；参见“JavaScript ~~错误！未找到参考源~~了解更多信息)。

统一码联盟

Unicode Consortium 协调 Unicode 和其他国际化标准的开发、维护和推广 [25 ]。非营利组织定义了 Unicode 字符之间的行为和关系。该联盟与 W3C 和 ISO 密切合作。合作中最重要的部分是 ISO/IEC 10646 的维护，这是与 Unicode 标准同步的国际标准。

相比之下，从 2011 年开始，Internet Explorer 只支持 SVG。

DCMI

都柏林核心元数据倡议组织是一家在 ?? 注册的公司。开放组织开发和维护可互操作的元数据标准。DCMI 提供年度会议和研讨会、标准联络和标准推广。DCMI 通过论坛、社区和任务组中的协作工作来支持全球用户和开发人员社区。

IANA

互联网数字地址分配机构负责监管全球 IP 地址和顶级域名分配、域名系统中的根区域管理(ccTLDs 和 gTLDs 的分配)、MIME 类型以及其他互联网协议相关的符号和数字 [27 ]。IANA 由非营利组织互联网名称与数字地址分配机构(ICANN) [28 ]运营。

绿洲

结构化信息标准促进组织致力于 web 服务、互操作性、安全性和电子商务的开放标准。它的口号是“推进信息社会的开放标准”。该联盟在 web 服务和 XML 上维护有影响力的信息门户[30，31]。

ISO

成立于 1947 年的国际标准化组织是一个代表世界各地各种标准组织的国际标准化机构 32 。ISO 提供工业和商业标准。ISO 已经制定了 18，500 多项关于各种主题的国际标准，其中许多也在 Web 上使用(例如，国家代码、日期/时间和持续时间注释)。

标准推广和分发

许多 web 标准只是可选的，没有法律强制执行(这是实现全球应用的唯一途径)。然而，有一个新的趋势可能会在几年内改变这种情况(例如，在一些国家有法律强制执行的可访问性标准—参见“定义 Web 可访问性”一节)。在此之前，web 标准并不是随处可见的，web 开发人员很难保持最新的知识和学习新的技术。然而，人们可以使用各种事件和资源作为个人或通过附属机构来通知自己，包括会议、印刷或在线文档和书籍。

群体和协会

热情的 web 开发人员中有许多团体分发和加速标准，并使它们与最佳实践相协调。会员费一般比标准化机构的会员费低得多。有些是开放的，任何人都可以免费加入。

请注意，许多技术团体和协会主要关注技术而不是标准。他们的成员通常只知道最新的技术新闻。以下部分提供了与 web 标准化相关的有影响力的团体的快速概述。

网络标准项目

web 标准项目(WaSP)由专业 web 开发人员于 1998 年创建，旨在推广主要由 W3C 发布的 Web 标准的应用。“网络标准项目是一个草根联盟，致力于确保所有人都能简单、经济地使用网络技术的标准”。该组织关注标准支持、可访问性和更容易的开发。

WaSP 对 web 标准支持的主要贡献被称为任务组。它的目的是吸引世界上最大的公司和组织的注意，并说服他们尽可能地遵守标准。WaSP 任务组包括以下内容:

无障碍工作队
Adobe 任务组(前 Dreamweaver 任务组)
教育工作队
国际联络小组
微软任务组
街头团队

用于比较浏览器标准支持的 Acid 测试(参见“标准符合性测试”一节)是由 Web 标准项目引入的。

网络标准组织

作为一个网页设计者/开发者社区，网页标准组织 (WSG)专注于网页标准和最佳实践以实现标准代码。成千上万来自世界各地的 IT 专业人士都是 WSG 的成员。

无障碍网页设计师协会

无障碍网页设计师协会是一个由专业组织、个人网页设计师和开发者组成的世界性协会。妇女参与发展联盟致力于促进无障碍标准[35。

国际网站管理员协会

国际网站管理员协会是 W3C 的成员，该协会“在致力于或追求网络事业的个人中提供和促进职业发展机会，并努力工作以提高他们的效率、形象和职业精神，吸引和服务他们的客户和雇主” 36 。

网络行业专业人士协会

网络行业专业人士协会是澳大利亚的一个技术协会。WIPA 召集了在网络行业工作的专业人士来“交流思想，参与辩论，推进教育和促进道德实践”。WIPA 是澳洲网络课程的主要组织者。

开放数字权利语言倡议

开放数字权利语言 (ODRL) 倡议是一个开发和推广 ODRL 词汇表 [38 ]的国际组织，ODRL 词汇表是政策表达的开放标准(参见“DC、IMS 和 ODRL”一节)。

保持消息灵通:活动和课程

除了官方新闻提要之类的在线资源之外，还有几种类型的外观和事件有助于 web 标准的全球分布。该列表包括新闻稿、科学和专业会议、讲座、研讨会、会议、论坛、座谈会和教程。与这些活动相关的许多文件都可以在网上找到。Web standardistas 可以使用这些文档来保持最新的知识和跟上最新的规范。

与 web 标准相关的主要活动(如研讨会和会议以及建议和演示的公告)的主要资源是 W3C 网站，网址为www.w3.org [39 。事件分为“谈话和露面”和“事件”过去的事件可以在新闻档案中找到。

万维网联盟还通过一个专门的门户网站 [41 ]提供关于 SVG 等标准的在线培训课程。课程包括每周的教学模块(讲座)、链接收集、活动和一个论坛。质量由教师保证，因为他们要么是相关 W3C 标准的合著者或编辑，要么是该领域国际公认的专家。参与者预计每周将在这些课程上花费两到三个小时。

从 1977 年开始，国际化&统一码会议 (IUC)每年举办一次。它涵盖了软件和 web 应用国际化的最新行业标准和最佳实践。最新信息可在[www.unicodeconference.org](http://www.unicodeconference.org) [42 获得。

IETF 会议每年举行三次。关于即将召开的会议、请求、材料、会议记录和赞助的信息发布在 IETF 网站 [43 ]上。

自 2001 年 [44 ]以来，都柏林核心元数据倡议每年都举行都柏林核心和元数据应用国际会议。

WIPA 在 WIPA 网站 [45 ]上提供关于即将举办的活动的最新信息，例如澳大利亚的培训课程和研讨会。协会还有两个 RSS 频道，分别发布一般新闻 [46 ]和行业事件 [47 ]。

计算机器协会(ACM)维护着一个关于 IT 会议和事件的最新日历，其中一些与 web 技术相关。

自 1970 年以来，ISO、IEC 和 ITU 每年 10 月 14 日在瑞士日内瓦庆祝世界标准日。2010 年世界标准日的信息清楚地表明了标准化的一个主要目标:“标准让世界对所有人开放”。

然而，并不是所有的重大事件都有悠久的历史。许多有前景的会议和研讨会都是很好的倡议，比如 Web 应用的流行会议未来 [50 ]。Carsonified 还组织关于最新技术的在线会议。

有些网站收集了给定主题的事件和文章。一个很好的例子就是[www.semanticmetadata.net](http://www.semanticmetadata.net)，这是一个面向语义网开发者的综合性网站 [52 ]。

资源

了解最新 web 标准的最简单方法之一是订阅标准化机构和组织的新闻提要。新闻经常发布在相关网站的主页上。在许多情况下，还可以获得课程材料、会议记录和演示幻灯片。还可以获得各种各样的资源。

W3C 提供了一份每周新闻简报。它的最新消息可以在 Atom[54 和 RSS[55 新闻源中获得。绝大多数 W3C 文档都是公开的，可以免费获得。

关于 Unicode 的一般新闻可以通过 Unicode Consortium [56 ]的新闻提要获得。

都柏林核心元数据倡议在其网站的主页上发布新闻，并提供新闻提要。Dublin Core 和元数据应用国际会议的会议记录可在 DCMI 会议论文网页 [58 ]上查阅。

带有数字对象标识符(DOI)的科学期刊论文也可以在整个网络上找到，尽管这些文档中的许多都不是免费的。尽管如此，他们中的大多数至少提供了 PDF 格式的摘要。

标准的类型、阶段和状态

Web 是一种高度创新的媒体，不断的变化和改进需要不断的标准开发。这导致不同的文档成熟度级别。例如，W3C 建议通过五个这样的级别，也称为 W3C 流程 [59 ]:

工作草案
最后呼叫工作草案
候选人推荐(CR)
提议的建议
W3C 建议(REC)

最后一个版本被开发者认为是要应用的*(事实上)标准。W3C 推荐标准有时会通过单独发布的勘误表*进行更新。经过大量的修改后，新版本将取代当前版本。然而，它们的 URIs 一般保持不变。文件状态决定哪个版本是最新的，哪个版本应该被应用。在 W3C 技术报告文件夹 [60 ]中可以找到当前 W3C 出版物的列表和技术报告的最新版本。

其他标准化团体使用不同的状态约定。例如，互联网工程任务组应用文档状态，如互联网草案、信息和提议标准。后者被定义为“基本稳定的规范，解决了已知的设计选择，被认为是很好理解的，已经接受了重要的机构群体审查，并且似乎享有足够的机构群体利益，被认为是有价值的。然而，进一步的经验可能会导致规范在推进之前发生变化甚至撤销。IETF RFCs 被指定为标准、草案标准、建议标准、当前最佳实践、信息文档、实验文档和历史标准、 62 。

微格式社区对那些“在开发过程中有些成熟”并且稳定性没有保证的文档使用状态草案规范(??)。这些文件的实施者被警告要跟上未来的发展和变化。

ISO 采用以下惯例:

前期工作项目 (PWI)
新工作项目建议 (NP 或 NWIP，NP Amd/TR/TS/IWA)
工作草案 (AWI、AWI Amd/TR/TS、WD、WD Amd/TR/TS)
委员会草案 (CD、CD Amd/Cor/TR/TS、PDAmd (PDAM)、PDTR、PDTS)
调查草案 (DIS、FCD、FPDAmd、DAmd (DAM)、FPDISP、DTR、DTS)
国际标准最终草案 (FDIS、FDAmd (FDAM)、PRF、PRF Amd/TTA/TR/TS/Suppl、FDTR)
国际标准 (ISO TR、TS、IWA、Amd、Cor)

许多 web 标准是开放标准，这意味着开发已经对个人贡献者开放；它们是公开可用的，并且可能适用某些版权许可。

各种渲染引擎

Web 文档和与样式表文件、脚本文件、图像和 XML 文件相关联的文件由呈现引擎 ( 布局引擎)处理和显示(即呈现)或打印。它们通常嵌入在 web 浏览器和电子邮件客户端中。

尽管 web 浏览器[64、65、66、67 等等]的使用份额统计数据要么被高估了，要么被低估了，因此通常是不准确的，但有一点是肯定的:没有一个用户代理可以被称为“最受欢迎”或“使用最广泛”的。因此，浏览器独立性比以往任何时候都更加重要。由于呈现和标准支持的差异，为了互操作性和功能性，在网站开发中应该考虑呈现引擎的特性。

从标准的角度来看，没有一款浏览器是完美的。所有这些都有一些关于标记、样式、ECMAScript 或可访问性的问题。然而，大多数浏览器开发者意识到应该加强对标准的支持；否则，他们无法与其他人竞争。

从 web 开发人员的角度来看，在各种浏览器中实现相似(而不是逐像素相同)的外观是一项相当复杂的任务。由于不同的功能和特性，不同的浏览器甚至可能以不同的方式呈现符合标准的网站。在实践中，各种技巧和黑客被用来解决这个问题。但是，只要有可能，就应该消除这些问题。

与 Internet Explorer (IE)相比，其他浏览器的更新会频繁发布，这就是它们在 IE 之前提供新功能的方式(图 1-1 )。反 IE 的开发者经常忽略这个简单的事实。

images

***图 1-1。*浏览器更新提供了新功能，例如对最新标准的高级支持。

支持 SVG 可以作为一个很好的例子。该规范于 1999 年发布，直到 HTML5 越来越流行才引起人们的注意，html 5 本身就支持这种格式。Firefox、Opera 或 Safari 等浏览器最近也采用了这一标准，尽管是在 IE 之前。然而，这并不是一个很大的成就，因为多年来他们都不支持 SVG。在 21 世纪初，有一个人(如果不是唯一的)做到了这一点，那就是 Amaya。直到最近，大多数人都使用 Adobe SVG Viewer 插件在浏览器中显示 SVG 图像。

元素和属性的实现并不一定意味着对标记语言的完全支持。例如，一些浏览器供应商多年来声称他们的产品支持 MathML 然而，由于缺乏对嵌入机制和外部文件的支持，MathML 在许多情况下无法呈现。实现中甚至缺少适当的 MIME 类型。

多年来，大多数浏览器对标准的支持，尤其是对 CSS 的支持是不正确和/或不完整的。此外，CSS 的最新版本 CSS3 是在上一个版本 CSS 2.1 在浏览器中获得完全支持之前推出的。

三叉戟

被 Internet Explorer(从版本 4 开始)和 IE shells、Outlook Express、Maxthon 和各种媒体播放器使用， Trident 是使用最广泛的渲染引擎之一。Windows Internet Explorer(以前称为 Microsoft Internet Explorer)是由 Microsoft 开发的一系列图形 web 浏览器。自 1995 年以来，IE 已经在微软视窗操作系统中实现。

尽管 Internet Explorer 在每个版本中都得到了不断的改进，但即使是最重要的标准，即描述标记和样式表的标准，也没有完全实现。有限的标准支持、不正确的浮动位置、不断扩大的盒子问题，尤其是 Internet Explorer 6 的单个盒子模型的实现，多年来已经给 web 设计带来了严重的问题。

版本 6 中引入了符合标准的模式；然而，这并没有解决问题。甚至一些众所周知的 HTML 4.01 元素(例如，abbr)在 IE8 之前也不被支持。几个 DHTML 对象不符合标准。然而，当网页以 IE8 模式呈现时，IE8 中更新的方法和属性可能会给期望早期 IE 版本 [68 ]呈现功能的网站带来问题。

多年来，Trident 一直支持 HTML 4.01、XML 1.0、XSLT 1.0 和 DOM Level 1，只是在实现上略有差距。CSS 级别 2 和 DOM 级别 2 已经提供了主要的实现差距和一致性问题。Windows Internet Explorer 中的 CSS 支持一直在不断发展。Internet Explorer 6 是第一个完全符合 CSS 级标准的版本。然而，一些选择器如min-height丢失了。Internet Explorer 8 是第一个几乎完全支持 CSS 2.1 和部分 CSS3 的 IE 版本。重要的是要记住，Internet Explorer 8 中引入的 CSS 功能只有在网页以 IE8 模式(或更高)呈现时才能工作。这可以通过将清单 1-1 中描述的meta标签添加到网页的头部来保证。

***清单 1-1。*面向 Internet Explorer 8 的版本(不应使用)

<meta http-equiv="X-UA-Compatible" content="IE=8" />

但是，如前所述，强烈建议避免版本定位。

从 Trident 版本 IE8 使用)开始，还可以通过一个专用按钮使用内置的 RSS/Atom 新闻订阅阅读器，该按钮的 RSS 徽标为灰色，激活后变为橙色(如果适用)。

微软最近认识到标准支持的重要性，并开始认真对待它。首先，微软成为 W3C 的 CSS3 和 SVG 工作组中标准开发的积极参与者。其次，它是 HTML5 工作组的联合主席，也是 HTML5 测试任务组的领导者。

Internet Explorer 9 中应用的 Trident 5 引入了对现代 web 标准的支持，包括 HTML5、CSS3、ECMAScript5、DOM Levels 2 和 3、ICC 颜色配置文件和 SVG [69 ]。与早期版本相比，Trident 5 提供了全面的 XHTML 支持，早期版本只能呈现“HTML 兼容”的 XHTML 文档，而不能正确地使用text/html MIME 类型。

壁虎

Firefox、Camino、Mozilla 应用套件、Netscape、Thunderbird、SeaMonkey 等软件都应用了渲染引擎 Gecko(原 NGLayout) [70 。网景公司在 1997 年发布了第一个版本。1998 年，Mozilla 项目启动，源代码在开源许可下发布。Gecko 现在由 Mozilla 基金会/公司开发。用 C++ ⁶ 编写，在 Mozilla 公共许可证(MPL)、GNU 通用公共许可证(GPL)、GNU Lesser 通用公共许可证(LGPL)三种许可证下作为跨平台布局引擎。

Gecko 最初是为了支持 web 标准而设计的，并且正在不断改进。超越标记、CSS、JavaScript、ECMAScript 3 和 5、DOM Levels 1/2/3、XML 1.0 等常规标准；不常用的标准，如 MathML、RDF、XSLT、XPath 和 SVG 也支持具有 alpha 透明度的动画 PNG (APNG)图像。应用 Gecko 的 Firefox 不仅支持 W3C 的建议，还支持其他标准化组织的提议和标准，比如 WHATWG。

Mozilla Firefox 浏览器的部分内容是用 C/C++、JavaScript、CSS、XUL 和 XBL 编写的。

为了提供广泛的互操作性，Gecko 支持DOCTYPE切换，这使得正确呈现为旧浏览器及其变体(如 Netscape Communicator 4)设计的非标准网站成为可能。 x 。在某种程度上也支持非标准的 Internet Explorer 特性，比如不正确的实现document.all属性或marquee元素。火狐的怪癖模式并不完美，但和其他浏览器差不多。

Firefox 还提供了 Google 协议 Safebrowsing 来提高数据交换的安全性。

默认情况下，Firefox 不支持 ActiveX 控件。尽管有第三方插件可用，但它们并不能在所有版本或所有平台上安全运行。

KHTML

KHTML 是 Konqueror 使用的布局引擎。它支持 HTML 4.01，部分支持 HTML 5。CSS 2.1 提供了屏幕和分页媒体支持。除了 CSS 3 选择器的完整实现(来自 KDE 3.5.6 [71 ])，KHTML 还支持其他 CSS3 特性，例如，多背景、框大小和text-shadow。KHTML 完全支持 DOM 1 和 2，部分支持 DOM 3。KHTML 中可以使用 ECMA 262(JavaScript 1.5)，以及图形格式 PNG、MNG、JPEG、GIF 和 SVG(部分支持)。

网络工具包

KHTML 的分叉(采用)版本是开源的 WebKit 布局引擎。使用 WebKit 的最知名的浏览器是苹果 Safari 和谷歌 Chrome。但是，也有其他应用 WebKit 的浏览器，例如，Arora、美岛莉、OmniWeb、Shiira、iCab (4+)、Epiphany、SRWare Iron 和 Maxthon (3+)。WebKit 用于多种移动设备，如 Apple iPad、iPhone 和 iPod touch，以及 Android、Palm webOS 和 Symbian S60 上的浏览器。桌面版 Safari 适用于 Mac 和 Windows 电脑。

作为最新标准的首批实施者之一(这也已经被 Acid2 和 Acid3 测试所证明)，Safari 一直被认为是最具创新性的网络浏览器之一。例如，Safari 5 不仅支持 HTML 4.01 和 XHTML 1.0，还支持 HTML5 的一些功能，如媒体支持、video元素、canvas元素的全屏播放、地理定位、结构化元素、Ajax 历史、draggable属性、表单验证、sandbox属性和 Ruby 注释。Safari 5 处理 CSS 动画、CSS 效果和 Web 字体。此外，它还提供 JavaScript 支持(ECMAScript 262 版本 3)、JSON、XML 1.0 和 SVG 1.1。Safari 5 中还提供了高级辅助功能，如 VoiceOver 屏幕阅读器、ARIA 支持、增强的键盘导航、整页缩放、内容缩放、HTML5 视频的隐藏字幕、自定义样式表和最小字体大小。它还有一个内置的新闻阅读器 [72 ]。

使用 WebKit 渲染引擎的另一个流行浏览器 Google Chrome 的第一个版本通过了 Acid1 和 Acid2 测试。Chrome 通过了第 4 版的 Acid3 测试。Chrome 是 HTML5 实现的领导者，由于 HTML5 规范的持续发展，它也在不断发展。Chrome 还提供了令人印象深刻的 CSS3 选择器支持和快速的 JavaScript 执行。

快点

Presto 是主要由 Opera 桌面浏览器(从版本 7 开始)、Opera Devices SDK 以及 Opera Mobile 和 Mini 变体使用的渲染引擎。Opera 被用作其他浏览器的基础，如任天堂 DS 和 DSi、诺基亚 770 和 Wii 互联网频道，以及索尼 Mylo COM-1 浏览器。

类似 Trident(微软)的开发者，Presto，Opera 软件的开发者，是 W3C 成员 [73 ]。因此，Opera 拥有高水平的标准支持。例如，Opera 11 支持 HTML5 元素，如video、audio、web 表单、contentEditable和input属性或input类型。CSS 2.1 和 CSS3 选择器已经完全实现，还有 SVG、SMIL 和canvas。Web Workers、地理定位、选择器 API、触摸事件、Viewport meta元素以及其他技术和标准也在 Presto [74 ]中可用。

Amaya

不同于其他专门用于显示网络文档的浏览器，Amaya 是一个免费的开源网络浏览器，集所见即所得的网络开发环境于一身。Amaya 由 W3C 管理，支持 HTML 4.01、XHTML 1.0、XHTML Basic、XHTML 1.1、HTTP 1.1、MathML 2.0、CSS2(部分)、SVG [75 ]。发行版适用于 Windows、Linux 和 Mac。

测试浏览器的标准支持

Web 浏览器可以从两个不同的方面进行测试:支持的标准和支持的技术。浏览器测试的发展取决于方法和目标。

自动布局测试很难在移动设备上执行。通常，布局测试应用基于截屏的方法，将截屏与参考进行比较。

一个必不可少的特性应该是可以在尽可能多的平台和浏览器上运行的测试格式。比如 Mozilla 开发的浏览器测试就不是跨浏览器测试。

可以使用 ref-tests [76 ]来比较被认为会产生完全相同的渲染效果的同一网页的两个不同版本。Mozilla 还提供了一个使用 MochiKit JavaScript 库 [77 的自动化测试框架。该测试应用 JavaScript 函数调用。这些特定于浏览器的测试不能用于一般的浏览器比较。

万维网联盟提供了 HTML 测试 [78 ]，CSS 测试套件 [79 ]，移动测试 [80 ]，MathML 测试套件 [81 ]，SVG 测试套件 [82 ]，以及国际化测试 [83 。W3C 也对贡献开放。

大多数浏览器测试都需要人工评估来完全确定地识别错误。不完整或不正确的标准支持通常用复杂的测试来测试，其中许多是公开的。

标准符合性测试

最著名的符合标准的浏览器测试是 Acid 测试。该名称是指用于黄金评估的酸性测试。然而，这些酸性测试提供了快速且易于理解的渲染引擎标准符合性的指示，而不是黄金纯度。尽管如此，Acid 测试总是因为测试一组很少使用的特性，以及那些没有最终规范的特性而受到批评。

Acid 测试的第一个版本是在 1998 年末用 HTML 4.0 Strict 编写的，用于检查早期 web 浏览器之间的互操作性问题。Acid1 根据参考图像 [85 ]在页面上测试几个特性，重点是符合 CSS1 规范。根据文档标题，Acid1 是一个“显示/框/浮动/清除测试”

Acid2 是 Web 标准项目在 2005 年发布的一个测试页面。同样，提供了参考图像，该参考图像应该与渲染版本进行比较。请注意，当鼠标悬停在脸部 [86 ]时，鼻子应该会变成蓝色。除了这种悬停效果，Acid2 还测试了绘画顺序、object元素、数据 URIs、PNG 图像的 alpha 透明度和几个 CSS 特性(绝对、相对和固定定位、CSS 框模型、CSS 表格格式、CSS 生成的内容和 CSS 解析)。Safari 是第一个在 2005 年末通过 Acid2 的广泛使用的浏览器。其他人在两到三年后跟进。比如 Firefox 从 3.0 版本就通过了测试。

Acid3 已于 2008 年开播。分成 6 个“桶”的 100 个子测试涵盖了以下标准的各个部分:数据 URI 方案、HTTP 1.1 协议、HTTP 状态代码、Unicode 5.0 UTF-8 和 UTF-16、image/png和text/plain内容类型、HTML 4.0 过渡、HTML 4.01 严格和 XHTML 1.0 严格标记语言、DOM 级别 2(核心、HTML、事件、样式、视图、遍历、范围)、object元素、ECMAScript(包括垃圾收集)、CSS 选择器不仅仅是那些不能达到 100/100 分的浏览器没有通过测试，那些不能流畅地渲染动画或者渲染得与参考资料中呈现的不同的浏览器也没有通过测试(图 1-2 [87 )。

images

***图 1-2。*浏览器中的 Acid3 测试未通过

以下是通过 Acid3 测试的首批稳定的公共浏览器版本:

苹果 Safari 4.0(第一款通过 Acid3 [88 ]的网络浏览器)
Opera 10.6 [89 ]
Google chrome 4 . 0 . 249 . 78[90
主显节 2.28.0 [91
iphone^【7】3.1
虹膜浏览器 ⁷ 1.1.4
螺栓浏览器 ⁷ 1.6 [92
歌剧移动⁷9.793

⁷ 手机浏览器

综合测试

在渲染引擎时，除了符合标准之外，还有其他一些考虑因素，例如，安全性或 CSS 选择器 API94 支持。

布局测试、Mochi 测试和 RefTests 可以由 BrowserTests 执行，browser tests 是浏览器测试用例及测试套件 [95 ]的存储库。

BrowserScope 提供了对整体浏览器功能的全面比较和评估。这是一个“社区驱动的 Web 浏览器评测项目”。该网站提供了在最新浏览器版本上进行的最新测试的最新信息。可以比较浏览器，并且可以在用于呈现站点的浏览器上运行测试。

标准与怪癖模式，文档类型切换

web 浏览器的标准遵从性问题并不是最近才出现的。然而，情况一直在不断改善。在部分支持 W3C 推荐标准后，浏览器用户和网站开发者面临一个严重的问题。早期为旧浏览器开发的数百万个网站在过时的渲染引擎中看起来不错，但在最新版本中却有严重的问题。换句话说，遵从 W3C 推荐标准成了一个问题。

来自网络标准项目的托德·法尔纳在 1998 年 97 发明了被称为文档类型切换的解决方案。缺少DOCTYPE的旧的非标准文档可能会在不同的渲染引擎中产生不同的结果。现代浏览器检查DOCTYPE，如果预期的行为遵循 W3C 标准，则文档以标准模式 ( 严格模式)呈现。如果缺少文档类型定义，浏览器会切换到一种称为怪癖模式 [98 ]的模式，这种模式可以处理旧浏览器的非标准、意外行为(图 1-3 )。

images

***图 1-3。*标准模式 [99 和怪癖模式 [100 ] 下的 W3C 测试文件

最著名的浏览器 bug 之一是 Internet Explorer box 模型 bug ，它使得在不同的浏览器中进行完全相同的逐像素渲染变得不可能。它是作为一个盒子模型的自己的实现出现的，而不是早期版本的微软 Internet Explorer 中的 W3C CSS 盒子模型 [101 。(然而，一些 web 开发人员认为 IE5 中实现的 box 模型比 W3C 的 [102 ]更符合逻辑；尽管如此，它还是不标准。)IE6 和更新的版本消除了标准模式中的问题。然而，为了兼容性，这个 bug 仍然以古怪的方式出现。(2006 年停产的 Mac 版 Internet Explorer 不受影响。)根据 1996 年发布的 W3C CSS1 规范(后来修订了几次)，确定所有块级元素的width和height属性应该只影响可见元素的宽度和高度，而填充、边框和边距应该在以后应用。Internet Explorer 5 在预定的宽度/高度内包装内容、填充和边框。因此，呈现框与预期的不同。盒子模型也出现在新版本的级联样式表规范中，包括 CSS 2.1 [103 和 CSS3 [104 ]。

符合标准的网页可以更快地打开，因为浏览器可以使用标准模式，而不是在古怪模式中找出非标准标记。

现代浏览器以标准模式呈现所有提供DOCTYPE的页面，不管它们是否有 XML 声明。但是，如果在DOCTYPE声明之前出现了除字节顺序标记之外的任何内容，Internet Explorer 6 会以 Quirks 模式呈现所有页面。

问题陈述

大多数人认为 web 标准化是一个规范的、精确的过程。事实上，没有一套明确的规则可以遵循。稍微熟悉 web 标准的人可能会认为万维网联盟为 Web 提供了标准。尽管 W3C 为标记、注释、样式等开发了 web 技术，但这些技术迟早会获得官方授权，它们的实现只是一种期望。由于缺乏官方地位，这些发展是建议，而不是标准。与标准化组织公布的标准不同，例如，ISO，web 建议很少被应用，因为缺乏官方地位 [105 ]。个体供应商和网站开发者可能决定遵循一些建议，但是没有强制执行。这绝对不是对待他们的方式。应努力使这些建议得到广泛采纳；事实上，从技术的角度来看，99.9%的网站都已经过时了。标准化方面的情况也好不到哪里去:很大一部分网站提供了无效代码。

2011 年在全球 350 个最受欢迎的网站上进行了一系列全面的验证测试(由 Alexa index⁸[107]选出)。测试发现，94%的网站没有通过涵盖字符编码、标记和样式的 web 标准验证测试。

完全没有理由应用 13 种不同的字符编码，即 UTF 8、ISO-8859-1、GB2312、Shift_JIS、GBK、Windows 1251、EUC-JP、Windows 1256、ISO-8859-15、ISO-8859-2、ISO-8859-7、ISO-8859-9 和 Windows 874。这同样适用于标记语言。已经确定了九个(X)HTML 版本和变体。在测试时，14%的网站在规范最终确定之前已经应用了 HTML5，23%的网站使用了过时的 HTML 4.01 Transitional，45%的网站使用了 XHTML 1.0 Transitional，8%的网站使用了 XHTML 1.0 Strict，5%的网站使用了 HTML 4.01 Strict，还有 5%的网站使用了其他语言，如 HTML 4.0 Transitional，HTML 4.0 Strict 和 XHTML 1.1 ( 图 1-4 )。虽然 XHTML 1.0 Strict 和 HTML5 这两个版本可以被认为是现代标记语言，但它们的应用是不正确的:大多数情况下标记都充满了错误。标记错误的平均数(6)清楚地表明了这种情况。样式表错误的数量甚至更高，令人难以置信地高达 738 个错误(！)放在一个 CSS 文件中。CSS 错误的平均数量是 45。这些数字仅代表索引文件；预计所有其他页面也会有类似的数量级。

自然，网站列表会不断变化，但这对结论没有任何影响。

images

***图 1-4。*字符编码和标记语言的份额

显然，并不是所有的内容作者都是 web 开发者，Web 标准化的份额甚至更低。大多数 web 内容作者甚至不知道底层的技术和标准，更不用说它们的应用了。期望不会迫使人们正确地实现 web 技术和标准。缺乏共识使得网络混乱不堪。与 C 等编程语言相比，Web 是一个非常容错的环境。这一特性使得数百万人在没有适当知识的情况下创建网页成为可能，但同时这也是互联网用户每天面对不正确标记的原因。

公司希望有一个专业的形象来销售他们的产品，并且经常专注于设计和营销。在大多数情况下，设计师对 web 标准化知之甚少。每个人都应该至少知道 web 标准中固有的潜力。

web 浏览器的不充分和不完整的标准实现也导致了标准化和推荐标准的问题。话又说回来，即使是标准化的网站在缺乏完全标准支持的浏览器中也可能看起来不够好。只有在用户代理和 web 开发人员的站点都遵循标准的情况下，才能期望合理的呈现。

Web 发布通常过于简单，只有非常有限的开发人员成为手工编码人员，这是标准化 web 开发的一个主要关键。因为内容作者需要通过图形界面和动态内容进行内容管理，所以在创作工具中实现适当的标准也可以极大地促进 web 标准化。然而，直到最近，标准遵从性才成为内容管理系统和博客的主要关注点。

在某一点之后，充满错误的 web 文档不应该也不能被容忍。这种文档包含几个不恰当的嵌套元素、格式错误的标签和其他错误，通常被称为标签汤。表格应该用于组织数据，而不是用于布局或设计。不应该容忍缺少标签。糟糕的标记会延长下载时间，更不用说渲染时间了。降低加价可以提高效率。很明显，充满错误的源代码比没有错误的标准代码要复杂得多。还可以增加可访问性，以及跨浏览器兼容性和向前兼容性。

服务器端技术和内容管理

服务器端技术，如 PHP、ASP 或 Ruby on Rails，因其在创建动态网站方面的强大帮助而广受欢迎。

虽然服务器端技术和内容管理系统提供了比静态标记更多的动态网站，但它们通常缺乏能使网站更好运行的结构和语义。因此，仍然可以手动生成最高级、标准、可访问的标记，这些标记也提供语义内容。然而，在这方面有一点明显的改善。例如，流行的开源内容管理系统 Drupal 支持一些标准，如用 RDFa⁹110 进行语义注释。

开发工具中有限的标准支持

使用所见即所得软件(如 Adobe Dreamweaver)的非专业作者制作了大量的网站。直到最近，它们中的许多都提供非标准输出。现代版本的 web 开发创作工具支持 W3C 标准。对于提供动态内容的开源环境也是如此，比如社交网站、博客门户等。

尽管如此，这些软件工具仍然要对网上发布的数十亿个网站负责，而不考虑是否符合标准。在大多数情况下，复杂的网站不同于存储在创作环境的模板中的网站。为了实现这一点，用户经常试图修改或扩展源代码的某些部分，这也导致了非标准代码。

由 WYSIWYG 创作工具提供的标记和样式的标准符合性是极其重要的，因为有大量的作者应用它们。然而，如果不理解源代码，标准化的许多方面就不能被充分利用。

主要问题

与文档、书籍或电影类似，无法创建满足所有标准和所有用户需求的完美网站——适合一个受众的网站可能不适合另一个受众，即使您试图绝对遵守发布的每个标准，您也会发现某些标准不能与其他标准结合使用。然而，这并不意味着你不应该努力坚持最重要的标准。几个特点有助于一定程度的质量保证。其中大部分都是符合标准的基本要求，并导致正确的开发实践。此外，它们提供足够的和更可预期的功能和行为、可用性和稳定性，以及更快的下载和呈现。

不良做法

虽然适当的编码实践在编程中被广泛应用，但是 web 开发人员和没有适当背景的人不会认真对待标记实践。“它也是以这种方式工作的——为什么要为符合标准而烦恼呢？”这是严肃的 web 开发人员最好忘记的方法。不良标记包括但不限于特定于浏览器的代码片段、大量嵌套的表格布局、结构与布局混合、局部应用的样式属性、属性最小化、缺少属性值以及其他异常，这些都会显著增加代码长度、复杂性、下载和呈现时间。

缺乏支持

Web 标准支持是不够的。对于缺乏经验的人来说，没有关于 web 标准的终极实用指南。尽管提供了对标准规范的免费访问，但大多数人发现它们太难理解，并且在实践中难以应用。

来自版本 7 的 ⁹

在符合标准是官方要求的地方，例如政府门户网站或欧盟项目网站，最好的解决方案是雇佣web standarditas开发合适的网站。许多网页设计师对标记或样式表并不感兴趣。他们唯一关心的是外表；例如，对于创造性的 Flash 动画，焦点通常完全集中在 SWF 本身，很少考虑如何将它嵌入到网页中。公司领导主要关注内容。人们很难意识到遵从标准可以解决他们的许多问题，例如依赖于浏览器的网页、不正确的呈现或较差的功能。

不关心

web 标准的一个主要问题是，免费获取这些标准不足以说服人们使用它们。创作工具的标准实现是有限的，由它们生成的网站很少遵循标准。web 浏览器的标准支持只是部分的，尽管它们在不断发展。

许多人在没有适当 IT 背景的情况下“开发”网站。对有些人来说，这只是一种爱好；对其他人来说，这是利润来源。除非全世界最有影响力的公司都强调网络标准的重要性，否则它们不会流行起来。另一方面，一些开发者甚至不知道这些技术。这些趋势是由商业和营销所推动的，以达到流行或满足商业需求。例如，由于苹果 iPhone 缺乏对 Flash 的支持，早期的 HTML5 实现应用了未完成的规范，但同时加快了标准的发展和应用。每个对网站设计/开发感兴趣的人，不管是不是专业人士，都应该熟悉 web 标准，因为它们在 web 开发中至关重要，值得学习(而不是照搬别人的坏做法)。

没有几年的专业知识，没人能看懂选择。哪种标记语言是最现代的？如果不了解 HTML、XHTML、XML、语义 web 和 Web 标准的成熟度，就不可能回答这个问题。

幸运的是，最近的趋势是更频繁地应用 web 标准；然而，这种趋势远未在世界范围内使用。只有很少的手工程序员，他们中只有一些人以标准的方式开发网站。因此，内容管理系统有潜力帮助 web 开发人员遵守标准。如果他们能够可靠地生成符合标准的标记，那么默认情况下这是有保证的。大多数高级标记代码是由手工编码者编写的；然而，他们应该完全自己承担标准遵从的责任。即使有许多有用的工具可以帮助他们，手工编码员也不能依赖自动错误检查(见第十一章)。由于 web 标准制定者不仅处理内容，还逐字符处理整个标记和样式表，以及网站的所有文件，他们应该通过频繁的修订和测试来确保符合标准。

有影响力的网站

开发人员通常有一个合乎逻辑的想法，那就是遵循世界上最流行和最广泛使用的网站的实践。然而，这些网站不能仅仅作为标准化的参考，因为它们在遵守标准方面经常有严重的问题。

更令人失望的是，顶级网页设计师也会犯严重的错误。信不信由你，世界上最著名的网络标准化组织的个人网站也可能会出现标记错误。他们中的大多数也害怕在链接到 W3C 验证器的页面上提供 W3C 一致性图标。

寻找同时也符合标准的现代网站可能是一个很好的起点。然而，对于初学标准化的人来说，这可能非常令人困惑。显然，满足所有用户需求是不可能的，但是专注于标准遵守并标有标志“有效 XHTML”或“有效 CSS”的网站通常缺乏设计，并展示出有限的技术使用。很好的例子是 web 标准化机构或 web 可访问性设计者的网站。即使源代码是有效的并且没有错误，代码也经常有其他问题。缺少预期的组件，如新闻提要或收藏夹图标(favicons)，语义标记不存在，等等。这些特性并不影响这些 web 文档的有效性，它们不能专门用作开发现代的、符合标准的网站的起点。不仅个人网站和博客，而且精确的技术文档也可以漂亮地呈现。记住，web 标准化不是一种牺牲！世界上一些最大、最受欢迎的网站成功地应用了标准。

但不是全部。仔细看看来自世界上最大的网站之一的代码片段(清单 1-2 )。

***清单 1-2。*高流量网站不一定应用标准代码

显然，这是软件生成的标记，即使是最有经验的手工编码 web standardista 也很难解释这样的代码。几乎每个元素和属性都有问题。class属性的值为空。标识符长得不合理，根本不是描述性的，比如c4d06220d5f2c97d20912236。源中有内联样式，它应该在外部样式表中。显然，使用-10.000 像素的层定位是一种技巧(可能用于图像替换等技术)，可以通过正确实施标准来消除。应该消除空属性，尤其是如果它们打算用于标识的话(没有名称的class不能用于标识元素类)。即使是这几行，错误列表也很长。

Flash 的流行

设计是网站制作的主要关注点之一。Adobe Flash 是一种理想的技术，可以提供令人惊叹的外观并吸引注意力。然而，全闪存站点有几个缺点。除非 web 文档是提供联系数据的单页小册子式主页，否则开发(X)HTML 内容要好得多，因为文本标记比二进制文件有几个好处。利用新的交互式 HTML5 元素和 CSS3 属性尤其如此，它们是 Flash 内容的良好替代品。

平面设计师不一定是网页开发者。因此，Flash 电影经常被错误地嵌入。虽然 Flash 文件理论上可以在任何带有适当插件的浏览器中工作，但是控制它们的标记代码可能是依赖于浏览器的，这应该被消除。

Flash 没有问题，但它可能更适合用于标题和内嵌动画。XHTML 和 CSS 的结合可以提供类似的(如果不是更高级的话)用户体验，但是不需要在显示索引页面的内容之前下载完整的大文件。虽然这对于快速连接来说不是问题，但世界上有数百万用户可能会等待半分钟来下载这样的内容。即使 Flash 文件在某些浏览器中是流式的，在下载完成之前，菜单和内容是不可用的。此外，它们可以更有效地被索引/搜索，尺寸更小，并且在默认情况下对浏览器窗口具有完全控制。文本内容比任何其他格式都更易于渲染。即使一些图像无法下载或者存在一些样式问题，内容仍然在那里(如果不是绝对位于窗口之外或者以与背景相同的颜色书写)。与 Flash 内容不同， ¹⁰ (X)HTML 文本的锐度、字体大小和其他特性可以根据用户的要求直接从浏览器中更改。

一些软件公司认识到了标记语言相对于 Flash 的优势，并发布了将 Flash 文件转换为 HTML 的工具(例如， FlashKeeper [111 )。甚至 Adobe 也有一个名为 Wallaby [112 ]的 FLA-HTML 转换器。然而，与其他自动标记生成器类似，必须对它们多加小心，因为结果通常是无效的，因此不是最佳的。

格式良好

XML 文档的一个基本要求，也是所有 web 文档的期望要求是良构性。它在标准化中至关重要，因为它保证了在相应规范中定义的语法规则列表得到满足。

为了在 SGML 语言(如 HTML)中实现良好的格式，应该正确地打开和关闭元素。空元素也必须终止。元素应该正确嵌套，这样就不会发生重叠。文档的根元素应该包含所有其他元素。

由于 SGML 解析器非常容错，HTML 开发人员很少完全遵循这些规则，这导致了标记错误。因此，缺乏良好的格式会直接导致不正确、不标准的标记。

在诸如 XHTML 这样的 XML 语言中，格式良好有额外的要求。元素标记区分大小写；也就是说，开始和结束标记必须完全匹配。格式良好的 XML 文档应该只包含正确编码的合法 Unicode 字符。但是，这些字符也可以直接用在元素名称和属性中，而不仅仅是用在字符数据(文档文本)中。XML 中具有特殊含义的字符只能用于标记指令，例如，或&。如果它们打算表示为文本，则应该应用它们的实体代码(参见“实体引用”一节)。

违反格式良好性规则的字符会导致某些 XML 解析器无法处理 XML 文件(XHTML 文档、RDF 元数据、RSS 提要通道等等)。这种特殊字符也可能导致错误消息。一个字符(格式不正确)会使整个文件无法处理。例如，在 Internet Explorer 8 中本地打开的有效 RSS 源的 XML 文件显示为树形结构。从服务器检索到的相同文件被表示为新闻提要。但是，如果文件包含一个非法字符，IE8 会给出错误消息 XML 页面无法显示。类似的错误信息在所有浏览器中都存在(图 1-5 )。

虽然从版本 10 开始，Flash Player 中也有高级的字体操作功能。

images

***图 1-5。*Opera 中的一个 XML 解析错误

互操作性

市场上有各种各样的平台、操作系统和浏览器。每个制造商和开发商都试图提供额外的功能；因此，产品不断地相互竞争。这种多样性导致不同的操作和功能。默认情况下，跨不同系统的网站的功能和行为不能得到保证，但可以通过正确应用最新标准来实现。自然，用户希望将各种系统结合起来使用，以允许相互通信并充分交换数据。不能限制数据访问，并且应该避免特定于实现的解决方案。

网络互操作性确保符合标准的网页可以在各种操作系统下的任何浏览器中查看，从 Windows 到 Mac OS 和 Linux，不仅可以在台式电脑上查看，还可以在移动设备上查看，包括平板电脑和智能手机，如三星 Galaxy Tab、苹果 iPhone 或 HTC Sensation。

有几种技术支持互操作性，应该在 web 开发中使用，包括但不限于 UTF-8 字符编码、XML 文档、使用 XHTML 或 HTML5 [113 ]的结构和语义标记、DOM 脚本、ECMAScript、基于 CSS 的布局、分离的结构、表示和行为、用 MathML 描述的等式以及语义元数据。

浏览器独立

“一页多视图”一直是 web 开发者的噩梦。尽管用户很自然地希望所有的网站在不同的浏览器中都有相同的外观和行为方式，但要实现这一点并不容易。

任何在网页上贴上“此页最好用 X 浏览器浏览”标签的人似乎都在怀念过去的糟糕时光，在网络出现之前，你很少有机会阅读写在另一台计算机、另一个文字处理器或另一个网络上的文件。

—蒂姆·伯纳斯·李 [114

如今，选择浏览器的自由比以往任何时候都更加真实。人们使用各种各样的软件浏览互联网。然而，大多数人只使用几种浏览器，即 Internet Explorer、Mozilla Firefox、Google Chrome、Opera 和 Safari。因此，在大多数情况下，关注这些旗舰就足够了。这些桌面浏览器背后的四个主要渲染引擎——Trident、Gecko、Presto 和 WebKit——也用于移动浏览(Internet Explorer Mobile、Firefox for mobile、Opera Mobile 和 Safari)。WebKit 还被各种其他移动浏览器使用(Android 浏览器、BlackBerry 浏览器、Iris 浏览器、Myriad 浏览器、诺基亚系列 40 和系列 60 浏览器、Obigo 浏览器、Polaris 浏览器、Skyfire 移动浏览器和 HP webOS 浏览器)。在移动浏览场景中，NetFront 也值得一提；Kindle Basic Web、NetFront 和索尼 PlayStation 便携式网络浏览器使用它。统计数据显示，只有极少数访问者使用由其他渲染引擎驱动的浏览器。

没有人想赶走潜在客户，所以避免特定浏览器的网站开发非常重要。也许最好的解决方案是创建用任何浏览器都能最好浏览的页面。有时，这个网站的特征也通过“可以用任何浏览器浏览”活动的标志来清楚地表明 [115 ]。

开发人员创建在所有浏览器中都相同的网站的主要问题是，在许多情况下需要应用各种技巧来确保功能性。然而，这些代码并不能在所有的浏览器下工作，因此必须为不同的浏览器(以及这些浏览器的旧版本)添加越来越多不同的攻击，从而导致大量额外的代码。唯一的选择是创建基于标准的网站。即使现在的浏览器还不完全支持某些标准(这其实是一个让开发者头疼的问题)，但这些代码至少是为未来做好了准备 [116 ]。此外，它们是发展的良好起点。

与浏览器的不同呈现行为相关的一个非常糟糕的实践是代码分叉。代码分叉是为不同的浏览器开发相同内容的多个版本。不应该应用代码分叉，因为产生的代码不能长期使用。

网络标准化组织也同意，不能期望网站在每个浏览器中看起来都完全一样，但是网页上发布的信息应该清晰易读，所有功能都应该在所有主流浏览器中可用。

消除了版本定位

由于渲染引擎不断发展，即使是同一浏览器的不同版本也支持不同的标准。为了避免失去使用旧版本浏览器的用户和潜在客户，web 开发人员通常在标记或样式表中应用各种特定于浏览器和版本的解决方案。换句话说，版本瞄准对开发者来说意味着相当大的额外工作，结果只在某个浏览器的某个版本中起作用。

此外，由于当前浏览器版本标准支持的提高，这些代码实际上是对功能或代码优化的威胁，或者两者都是。因此，应该消除版本定位，这在另一方面会导致向后兼容性的问题 [119 ]。虽然有一些技术可以与标准兼容一起使用，以最大化版本独立性(例如，重置浏览器的样式表)，但创建在所有浏览器和浏览器版本下都能正常工作的网页是不可行的。

符合标准的 web 开发应该足够了，浏览器现在应该完全符合标准。然而，情况仍然不是这样。

通过文档头中的简单的meta声明(清单 1-3 )，可以很容易地定义用于呈现版本目标 web 文档的浏览器。

***清单 1-3。*版本定位示例(不应使用)

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />

可以通过将IE=edge属性值添加到meta元素的content属性中来定位最新的 Internet Explorer 版本 [120 ] ( 清单 1-4 )。

***清单 1-4。*版本定位为最新 IE 版本(不应使用)

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

尽管当提供这种数据时，目标浏览器可能会更快地在旧的、向后兼容的和新的、符合标准的呈现模式之间做出决定，但是版本目标应该完全消除。为同一网页创建多个版本的非标准标记不仅成本高昂，而且不可持续。此外，版本定位和浏览器检测脚本不可靠，并且在许多情况下不能定位正确的浏览器，因为浏览器经常将自己标识为其他浏览器或同一浏览器的其他版本。

向后兼容性

在当前使用的浏览器版本下工作良好的符合标准的网站也为将来做好了准备，但是由于其呈现引擎的不正确的标准实现，可能会在较旧的浏览器中不正确地呈现。因此，即使实现得当，web 标准也不能在所有浏览器下工作。对老渲染引擎的支持，向后兼容性，应该在合理的范围内。为什么要为不再使用的浏览器或者主流浏览器的“非常旧”的版本而烦恼呢？例如，Netscape 就像 Internet Explorer 1.0 或 Mozilla Firefox 0.9 一样“不再被广泛使用”。这个问题的主要问题是如何定义浏览器过时。IE5.5 可以被贴上“很老”的标签，IE6 可以被贴上“老”的标签吗？支持的浏览器的选择对网站的流量和受欢迎程度有很大的影响，缺乏对旧的甚至过时的浏览器的支持会导致访问者的流失。事实上，关于向后兼容性没有最终的决定。

关于向后兼容性的最大痛苦之一是对 IE6 的支持。它的市场份额缓慢下降，直到 2007 年，当时它的受欢迎程度大幅下降，这可能是因为 Windows、Vista 和后来的 Windows 7 的新版本，以及它们的新浏览器版本 7 和后来的版本 8、9 和 10、¹¹以及 Mozilla Firefox、Apple Safari 和 Google Chrome 等竞争对手越来越受欢迎。升级者考虑了几个主要问题。首先，这些年来已经指出了严重的安全漏洞，这些漏洞已经被后来的补丁部分覆盖。然而，由于不断增长的需求，新的功能已经在其他浏览器和 Internet Explorer 中推出，占领了市场。例如，所有现代浏览器都支持 XML 技术、RSS 提要和选项卡式浏览。IE8，尤其是 IE9 是向标准兼容和现代功能迈进的一大步。连微软都推荐 IE6 用户升级[121，122]。像谷歌这样的软件巨头已经开始减少对旧浏览器的支持，这也是他们这么做的另一个原因。最后但同样重要的是，当用户停止使用 Internet Explorer 6 时，这将是开发人员的一大解脱。

Windows XP 附带了 Internet Explorer 6。版本 7 和 8 也可以在 XP 上使用，而 IE9 需要 Windows Vista 或 Windows 7。IE10 将在 Windows 7 下独占运行。

向后兼容的主要缺点是它在某些时候阻碍了新技术的广泛使用。尽管如此，web 标准化组织应该尽可能最大化向后兼容性。满意的用户不能在每次新版本发布时都被要求升级浏览器。

由于旧浏览器的标准支持不完整或有缺陷，向后兼容性通常等同于针对浏览器的攻击和代码片段的应用，以及应该消除的非标准甚至不赞成使用的标记。实现或最大化向后兼容性的一个有用工具是 JavaScript 库“Modernizr”，它检测浏览器对最新 web 标准的支持，如 HTML5 或 CSS3 模块 [124 。该软件确定当前使用的浏览器是否实现了给定的功能，这使得开发者可以在支持新功能的浏览器中应用新功能，并为那些不支持新功能的浏览器创建回退机制。

向前兼容

虽然一个新的浏览器版本对于非标准的，特别是特定于浏览器的网站的开发者来说可能是个问题，但是网络标准化者不必担心。向前兼容性伴随着标准符合性。标准化的 web 文档可以很容易地转换成应用最新标记语言、样式表和其他技术的更新文档。

功能性

除了内容，功能是网站最重要的特征之一。没有它，所有其他的努力都是无用的，甚至包括流行的设计。

开发人员和浏览器都应该支持标准。对于 web 标准主义者来说，以标准的方式开发经常看起来像是某种牺牲。例如，某些 CSS 选择器可以用于各种网站功能，但某些渲染引擎(通常是 Trident 或 Gecko)不支持它们。在这种情况下，开发人员应该做出决定:要么遵循建议和标准的指导方针，不支持某些浏览器(这是不能容忍的)，要么提供非标准的、功能齐全的代码。不幸的是，开发人员有时会面临这些选择。

设备独立性

互联网接入不再局限于台式电脑。笔记本电脑、上网本、PDA、智能手机和电子书阅读器等移动设备也可以连接浏览网站。然而，一些设备——尤其是手持设备——屏幕尺寸、可滚动性和计算能力有限。必须注意提供能在各种设备上工作的代码。这个概念也有助于网站的可访问性，并与国际化部分重叠。

电脑显示器、屏幕、电视和投影仪的选择范围很广。例如，它们都有不同的尺寸、长宽比、分辨率、对比度和色彩保真度。这方面的一个基本要求是分辨率独立性。功能应该在各种设备上可用，而不管不同的硬件控制，例如键盘、触摸屏或移动设备的可定制控制按钮。设备独立性提供了对不同访问机制和不同使用模式(例如，视觉和听觉使用模式)的支持。设备独立性的目的是“将网络内容与交付环境的需求、能力和限制相匹配” 125 。尤其是对移动浏览日益增长的兴趣使得设备独立性成为网站开发中的一个主要关注点。

HTML 和 XHTML 等标记语言是设备独立性标准的很好例子。CSS 可用于通过除台式计算机以外的设备(包括但不限于移动电话、投影仪和打印机)的附加样式表来提供设备独立性。 ¹² Java 小程序可以在不同平台下的多种设备上执行，因为 Java 是一种跨平台的编程语言。JPEG、TIFF 或 GIF 等图像文件格式也是与设备无关的文件。在文档发布和共享中，PDF 是设备独立性的经典例子。

将内容与演示分离

在网络发展的早期，人们对网络出版的唯一关注就是网络本身。当时，web 文档主要局限于轻度格式化的文本内容和图像的混合。当可能性扩大时，网络很快成为一个完整的多媒体平台。

由于越来越多的人(不仅仅是 web 开发人员)尝试在 Web 上发布内容，因此有必要简化这一过程。结果，几乎每个人都能在网上发表文章，即使他们没有能力这样做。为了维护网络的功能，浏览器开发者让他们的产品变得简单且容错。人们开始认为表面之下的东西并不重要。

多年来已经证明，格式应该与结构分离。这是级联样式表的主要概念之一。这种方法导致了集中的样式控制，使得从一个位置改变整个网站的样式成为可能。此外，标记变得更短、更少冗余、更清晰、更简单，并且更容易解释和呈现。除了语法，语义注释也可以在 web 文档中提供。与样式规则相反，语义在逻辑上与标记和内容相关。

可用性

可用性可以定义为“为一个网站设定清晰简明的目标，确定一套正确详尽的用户需求，确保网站满足用户的期望，设定可用性目标，提供有用的内容” 126 。这是一个衡量系统使用难易程度的指标。可用性可以通过优化用户体验、提供浏览器独立性和可访问性、提供适当的主页和站点结构以及提供可靠的布局来实现。可用性不应该与可访问性混淆，可访问性意味着所有人都可以访问，不管用户是否残疾或设备是否受限。

网站应该提供有用的内容，这些内容与受众相关并且适合他们。网页内容要写的合适。对文本、链接、列表、控件、图形和多媒体的外观有许多要求。除了内容之外，导航和站点结构的组织方式应该满足用户的期望。这可以通过让用户参与测试站点来实现。任何网站的主要目标都应该在设计和开发过程之前。在设计过程中，应该考虑用户界面问题以及多种设计。

应该避免很可能混淆或干扰用户的解决方案。弹出窗口应该被消除。网站应该按照标准来开发，这样用户就可以按照他们习惯的顺序和方式来执行任务。

没有背景图片的相同网站，确保宽度不超过美国信纸的宽度，等等。

可靠的布局

网站元素的可靠定位一直是网站开发中的主要关注点。由于要考虑大量的因素，有些元素应该绝对定位，而其他元素应该相对定位。有些元素应该是固定的，即使内容超出了浏览器窗口并且内容是滚动的(参见“可靠定位”一节)。

在 CSS 中，有几个度量单位用于定义元素的尺寸、长度和距离。单位可以是相对于相关字体或查看设备的(em、ex、px)，也可以是绝对的(in、cm、mm、pt、pc)。也可以应用百分比。但是，应合理选择单位(参见“尺寸和比例”一节)。不可靠或依赖于浏览器的定位以及不正确的单元组合会导致内容不可读或功能受限。层的重叠顺序也可能是一个问题，因为该顺序可能导致在各种环境中内容不可读。

布局与设备、分辨率和浏览器独立性密切相关。

代码优化

Web 标准提供了一种开发可靠的、功能齐全的、可互操作的、独立于设备的网站的方法。但是，它们无法保证默认情况下的最佳码长。即使源代码中的每个字符都有其意义，也就是说，没有一个字符是不必要的，代码长度可能仍然远非最佳。标记中的长标识符，尤其是 CSS 中被忽略的继承(请参见“被忽略的继承”一节)会增加复杂性和长度，导致文件更大、下载更慢、呈现时间更长(请参见“非最佳代码长度”一节)。

总结

在本章中，您了解到 web 标准不是固定的规则集，而是一个不断发展的最终规范列表。到现在为止，您已经很清楚有几个网站发布了开放标准，web 标准化也包含了最佳实践。正确的标准实现独立于网站的受欢迎程度以及内容作者和开发者试图追求的趋势。设计和开发网站没有最好的方法；然而，遵循标准是非常有益的，这是提供最高级别的互操作性和保护您的网站未来安全的唯一方法。

在下一章中，我将讨论服务器和标记中的语言和字符设置，以确保正确的字符表示，并为搜索和处理 web 文档的软件代理提供高级提示。web 文档的国际化设置通常在开发过程之前，因此被描述为标准网站开发的第一步。

参考文献

Gustafson A，Casciano C，Walter A 等(2010)www.webstandards.org。Web 标准项目。2010 年 4 月 26 日访问
Dardailler D (2010) W3C PAS 常见问题。万维网联盟。www.w3.org/2010/04/pasfaq2010 年 11 月 6 日访问
hazal-Massieux，D (2002)购买符合标准的网站。万维网联盟。www.w3.org/QA/2002/07/WebAgency-Requirements2010 年 10 月 24 日访问
W3C (2010)所有标准和草案。万维网联盟。www.w3.org/TR/#Recommendations2010 年 4 月 26 日访问
ECMA (2010)正式出版物。www.ecma-international.org/publications/index.html。ECMA 国际。2010 年 4 月 26 日访问
ISO 网站上的 ISO (2010)万维网标准。【www.iso.org/iso/search.htm?qt=world+wide+web】&发表=上&主动 _ tab =标准。国际标准化组织。2010 年 4 月 26 日访问
IANA IANA(2010)网站。www.iana.org互联网号码分配机构。2010 年 4 月 26 日访问
IETF (2010) IETF 网站。www.ietf.org互联网工程任务组。2010 年 4 月 26 日访问
IETF (2010) RFC 页面。www.ietf.org/rfc.html。互联网工程任务组。2010 年 4 月 26 日访问
Unicode Consortium (2010)技术报告。www.unicode.org/reports/index.html。unicode Inc .于 2010 年 4 月 26 日访问
WHATWG (2011) WHATWG 社区网站。www.whatwg.org。网络超文本应用技术工作组。2011 年 7 月 29 日访问
Jacobs I (2010)让 W3C 成为新标准之地。W3C 提议草案。www.w3.org/2010/07/community2010 年 9 月 14 日访问
Dardailler D (2010)开放标准政策。W3C:网络标准化的开放平台。未来互联网会议-标准化研讨会。万维网联盟。www . w3 . org/2010/12/DD-W3C . html #(3)。2010 年 12 月 3 日访问
Dardailler D (2010) W3C 执行摘要。W3C:网络标准化的开放平台。万维网联盟。www . w3 . org/2010/06/DD-diplo . html #(7)。2010 年 10 月 10 日访问
Dardailler D (2010) W3C:网络标准化的开放平台。万维网联盟。www.w3.org/2010/12/dd-w3c.html2010 年 12 月 12 日访问
Guha RV，Bray T (1997)使用 XML 的元内容框架。万维网联盟。www.w3.org/TR/NOTE-MCF-XML/2009 年 10 月 7 日访问
网景通信(1999)我的网景网络:快速入门。网景公司。http://web . archive . org/web/20001208063100/http://my . Netscape . com/publish/help/quick start . html(存档版本于 2010 年 9 月 2 日访问，原始版本不再提供)
斯坦内斯库 B，萨拉帕塔 J (2010) Google now 索引 SVG。谷歌公司Google webmastercentral . blogspot . com/2010/08/Google-now-indexes-SVG . html。2010 年 9 月 27 日访问
WHATWG (2011) WHATWG 邮件列表。网络超文本应用技术工作组。www.whatwg.org/mailing-list于 2011 年 8 月 1 日访问
ERCIM (2010) ERCIM 网站。www.ercim.org欧洲信息学和数学研究联盟。2010 年 9 月 23 日访问
Jeffery K(2009)ERCIM 二十年:历史与展望。欧洲信息学和数学研究联盟。ercim-news . ercim . eu/en77/joint-ercim-actions/twenty-years-of-ercim-history-and-outlook。2011 年 7 月 29 日访问
IETF (2011)互联网工程任务组(IETF)。www.ietf.org2011 年 3 月 14 日访问
IETF(2010)RFC-编辑器网页。www.rfc-editor.org互联网工程任务组。2010 年 9 月 23 日访问
ECMA (2010) ECMA 网站。www.ecma-international.orgECMA 国际。2010 年 9 月 23 日访问
Unicode(2011)Unicode 联合会。统一码公司www.unicode.org。2011 年 2 月 14 日访问
DCMI (2011)都柏林核心元数据倡议。都柏林核心元数据倡议有限公司。dublincore.org2011 年 2 月 13 日访问
IANA (2010)互联网数字地址分配机构。www.iana.org。2011 年 2 月 13 日访问
ICANN (2010)互联网名称与数字地址分配机构。www.icann.org2011 年 2 月 13 日访问
OASIS (2010) OASIS:推进全球信息社会的开放标准。www.oasis-open.org绿洲。2010 年 9 月 23 日访问
绿洲(2010)封面页。xml.coverpages.org绿洲。2010 年 9 月 23 日访问
绿洲(2010)XML.org。www.xml.org。2010 年 9 月 23 日访问
ISO (2011)国际标准化组织。www.iso.org2011 年 2 月 13 日访问
WaSP (2011)网络标准项目。www.webstandards.org2011 年 2 月 15 日访问
WSG (2010) WSG 网站。webstandardsgroup.org网络标准组织。2010 年 9 月 23 日访问
Byrne J，Pedley M，Millen B，Allard N，Henley C (2010)无障碍网页设计师协会。天哪。www.gawds.org2010 年 9 月 27 日访问
IWA (2011)国际网站管理员协会网站。国际网站管理员协会。www.iwanet.org2011 年 2 月 15 日访问
WIPA (2011)网络行业专业人士协会网站。网络行业专业人员协会。www.wipa.org.au2011 年 2 月 15 日访问
ODRL 倡议(2011) ODRL 网站。开放数字权利语言倡议。odrl.net2011 年 2 月 15 日访问
W3C (2011)万维网联盟。www.w3.org2011 年 2 月 13 日访问
W3C (2011)新闻档案。万维网联盟。www.w3.org/News/2011 年 2 月 13 日访问
W3C (2011)万维网联盟。www.w3techcourses.com2011 年 2 月 14 日访问
OMG (2011)国际化& Unicode 大会。对象管理组。www.unicodeconference.org2011 年 2 月 13 日访问
IETF (2011) IETF 会议。互联网工程任务组。www.ietf.org/meeting/2011 年 2 月 13 日访问
DCMI (2011)都柏林核心和元数据倡议国际会议。都柏林核心元数据倡议。dcevents.dublincore.org/index.php/index/index/index2011 年 2 月 14 日访问
WIPA (2011)网络行业专业人士协会。wipa.org.au2011 年 2 月 14 日访问
WIPA (2011) WIPA 新闻。网络行业专业人士协会。wipa.org.au/newsfeed.cfm2011 年 2 月 14 日访问
WIPA (2011)来自 WIPA 的行业活动。网络行业专业人士协会。wipa.org.au/eventfeed.cfm2011 年 2 月 14 日访问
美国计算机学会 2011 年日历。计算机械协会。www.acm.org/calendar-of-events2011 年 2 月 14 日访问
Gasiorowski-Denis E (ed) (2010)标准让世界对所有人无障碍——第 41 个世界标准日。国际标准化组织。www.iso.org/iso/pressrelease.htm?refid=Ref13562011 年 2 月 13 日访问
Carsonified (2011)网络应用的未来大会。被碳化了。futureofwebapps.com2011 年 2 月 14 日访问
Carsonified (2011)在线会议。thinkvitamin.com/online-conferences/被碳化了。2011 年 2 月 14 日访问
勒克斯米(2010)SemanticMetadata.net。马蒂亚斯·莱克丝。www.semanticmetadata.net。2011 年 2 月 14 日访问
W3C (2011)每周新闻简报。万维网联盟。www.w3.org/News/Public/2011 年 2 月 13 日访问
W3C (2011) W3C 新闻(Atom 新提要)。万维网联盟。www.w3.org/News/atom.xml2011 年 2 月 13 日访问
W3C (2011) W3C 新闻(RSS 新提要)。万维网联盟。www.w3.org/News/news.rss2011 年 2 月 13 日访问
Unicode(2011)Unicode 博客(新闻源)。Unicode 联合会。unicode-inc.blogspot.com/feeds/posts/default?alt=rss2011 年 2 月 13 日访问
DCMI (2011)都柏林核心元数据倡议的新闻源。都柏林核心元数据倡议。dublincore.org/news.rss2011 年 2 月 15 日访问
DCMI (2011) DCMI 会议论文。都柏林核心元数据倡议。dcpapers.dublincore.org/ojs/pubs2011 年 2 月 15 日访问
Dardailler D (2010) W3C 流程。W3C:网络标准化的开放平台。未来互联网会议-标准化研讨会。万维网联盟。www . w3 . org/2010/12/DD-W3C . html #(7)。2010 年 12 月 3 日访问
W3C (2011)所有标准和草案。万维网联盟。www.w3.org/TR/2011 年 2 月 13 日访问
Bradner S (1996)互联网标准流程-第 3 版。互联网工程任务组。tools.ietf.org/html/rfc20262010 年 12 月 1 日访问
IETF(2008) RFC 概述。互联网工程任务组。www.rfc-editor.org/overview.html2011 年 5 月 3 日访问
TMC (2010)草案。参见:微格式维基。微格式社区。microformats.org/wiki/Main_Page2010 年 11 月 13 日访问
Net Apps (2011)浏览器市场份额。Net 应用。www.netmarketshare.com/browser-market-share.aspx?qprid=02011 年 2 月 9 日访问
STAT OWL (2011)网络浏览器市场份额。统计猫头鹰。statowl.com/web_browser_market_share.php2011 年 2 月 9 日访问
StatCounter(2011)StatCounter 全球统计。StatCounter。GS . statcounter . com/# browser-ww-monthly-2011 01-2011 01-bar。2011 年 2 月 9 日访问
W3Counter (2011)全球网络统计。Awio 网络服务有限责任公司。www.w3counter.com/globalstats.php?year=2011&月=1 。2011 年 2 月 9 日访问
Internet Explorer 8 中的微软开发者网络(2010)标准符合性更新。微软公司。msdn . Microsoft . com/library/DD 433047(vs . 85)。aspx 。2010 年 12 月 31 日访问
微软(2010)www.beautyoftheweb.com/#/highlights/html5。微软公司。2010 年 12 月 31 日访问
Scholz F 等人(2010)壁虎。Mozilla 开发者网络。developer.mozilla.org/en/Gecko2010 年 12 月 31 日访问
KDE 站长(2011) KDE 3.5.6 变更日志。KDE e . v .www . KDE . org/announcements/changelogs/changelog 3 _ 5 _ 5to 3 _ 5 _ 6 . PHP。2011 年 2 月 9 日访问
苹果公司(2011 年)的 Safari 功能。苹果公司www.apple.com/safari/features.html。2011 年 2 月 9 日访问
W3C (2011)当前成员。万维网联盟。www.w3.org/Consortium/Member/List2011 年 2 月 9 日访问
Opera 软件(2011)在 Opera 产品中的 Web 规范支持。Opera Software ASA。www.opera.com/docs/specs/productspecs/。2011 年 2 月 9 日访问
金特五世(编辑)(2010 年)。W3C 的编辑器/浏览器。万维网联盟。www.w3.org/Amaya/2011 年 2 月 10 日访问
Baron LD (2006)布局引擎视觉测试(reftest)。Mozilla 公司。mxr . Mozilla . org/Mozilla-central/source/layout/tools/ref test/readme . txt。2011 年 2 月 10 日访问
Shepherd E (ed) (2011) Mochitest。Mozilla 开发者网络。developer.mozilla.org/en/Mochitest2011 年 2 月 10 日访问
W3C (2011) HTML 测试区。万维网联盟。test.w3.org/html/2011 年 2 月 10 日访问
Bos B(ed)(2010)W3C 官方测试套件。万维网联盟。www.w3.org/Style/CSS/Test/2011 年 2 月 10 日访问
Hazael-Massieux D (ed) (2011)移动测试。万维网联盟。test.w3.org/m/2011 年 2 月 10 日访问
Ion，PDF (ed) (2010) MathML 测试套件。万维网联盟。www.w3.org/Math/testsuite/2011 年 2 月 10 日访问
W3C (2010) SVG 测试套件。万维网联盟。www.w3.org/Graphics/SVG/WG/wiki/Test_Suite_Overview2011 年 2 月 10 日访问
Ishida R (ed) (2010)国际化测试。万维网联盟。www.w3.org/International/tests/2011 年 2 月 10 日访问
我们如何测试一个网页浏览器？万维网联盟。www.w3.org/QA/2010/09/how_do_we_test_a_web_browser_o.html2011 年 2 月 10 日访问
Fahrner T (1998)酸 1 试验。万维网联盟，美国国家标准与技术研究所，凯斯西储大学。www.w3.org/Style/CSS/Test/CSS1/current/test5526c.htm2010 年 9 月 23 日访问
希克森一世(2005)的 Acid2 测试。Web 标准项目。acid2.acidtests.org2011 年 2 月 10 日访问
希克森一世(2008)的酸 3 测试。Web 标准项目。acid3.acidtests.org2011 年 2 月 10 日访问
苹果(2010)Safari——了解 Safari 的可用功能。苹果公司www.apple.com/safari/features.html。2010 年 9 月 23 日访问
Opera 软件(2009)用 Opera 10 增强你的网络体验。Opera Software ASA。www.opera.com/press/releases/2009/09/01/2010 年 9 月 23 日访问
Laforge A (2010)谷歌 Chrome 发布:稳定的频道更新。谷歌公司Google chrome releases . blogspot . com/2010/01/stable-channel-update _ 25 . html。2010 年 9 月 23 日访问
Ryan P (2009) Linux garden 在 2.28 版本中获得了一个新的 GNOME。Ars 技术公司。ars technica . com/open-source/news/2009/09/Linux-garden-gets-a-new-gnome-with-version-228 . ars。2010 年 9 月 23 日访问
Scott (2009) Bolt 浏览器更新至 1.6 版，带来了新功能！智能手机博客网络。blackberry sync . com/2009/12/bolt-browser-gets-updated-to-version-1-6-bring-new-features/。2010 年 9 月 23 日访问
engebhl(2009)采用 Opera Turbo 的 Opera Mobile 9.7。Opera Software ASA。my . opera . com/opera mobile/blog/2009/03/26/opera-mobile-9-7-beta-for-windows-mobile。2010 年 9 月 23 日访问
Van Kesteren A，Hunt L (2009)选择器 API 等级 1，W3C 候选推荐。万维网联盟。http://dev.w3.org/2006/webapi/selectors-api/。2010 年 9 月 23 日访问
Pasche S (2010)浏览器测试。跨浏览器自动化测试。谷歌公司code.google.com/p/browsertests/wiki/StartPage。2011 年 2 月 10 日访问
Simon L 等人(2011)浏览范围。www.browserscope.org2011 年 2 月 10 日访问
Geocrawler.com-Mozilla-layout-NG 布局和 5.0 导航器。archive.com 存档的托德·法纳的邮件。开源开发网络。http://web . archive . org/web/20030212115103/http://www . geo crawler . com/archives/list-name . mbox/123/1998/7/0/1037920/。2010 年 9 月 16 日访问
Ishida R (2010)服务 HTML & XHTML。“标准”与“怪癖”模式。万维网联盟。www.w3.org/International/articles/serving-xhtml/2010 年 9 月 15 日访问
标准模式的 Ishida R (2010) XHTML 测试文档。In: Serving HTML & XHTML。“标准”与“怪癖”模式。万维网联盟。www . w3 . org/International/articles/serving-XHTML/standards . html。2010 年 9 月 15 日访问
用于 Quirks 模式的 Ishida R (2010) XHTML 测试文档。In: Serving HTML & XHTML。“标准”与“怪癖”模式。万维网联盟。www.w3.org/International/articles/serving-xhtml/quirks.html2010 年 9 月 15 日访问
李 HW，Bos B (2008)格式化模型。在:级联样式表，级别 1。W3C 推荐标准，修订版。www.w3.org/TR/REC-CSS1/#formatting-model万维网联盟。2010 年 9 月 16 日访问
道格拉斯·鲍曼向 CSS……vor sprung durch web standards 表白了他的爱。www . vorsprungdurchwebstandards . de/visitories/fallinglovewithcss/Douglas-bowman/。2010 年 9 月 16 日访问
博斯 B，切利克 T，希克森 I，列 HW (2009) CSS 2.1 盒模型。在:级联样式表 2 级修订版 1 (CSS 2.1)规范，W3C 候选推荐标准中。万维网联盟。www.w3.org/TR/CSS2/box.html2010 年 9 月 16 日访问
Bos B (2007) CSS 基本盒模型，W3C 工作草案。万维网联盟。www.w3.org/TR/css3-box/2010 年 9 月 16 日访问
Gertner M (2008)网络标准化过时了吗？只是浏览一下。browsing . just discourse . com/2008/01/22/is-web-标准化-过时/ 。2010 年 9 月 9 日访问
Zeldman J，Marcotte E (2009) 99.9%的网站都过时了。在:用网络标准设计，第三版。新骑手，伯克利
Alexa (2011) Alexa 全球网站 500 强。Alexa 互联网公司www.alexa.com/topsites。2011 年 3 月 14 日访问
安德森 E，德波特 V，费瑟斯通 D，巩特尔 L，雅各布博士，詹森-因曼 L，米尔斯 C，施密特 C，西姆斯 G，沃尔特 A (2010)与网页标准互动-网页设计的整体方法。新骑手，伯克利
Zeldman J，Marcotte E (2009)旧件分叉可能会对工厂的长期健康造成危害。在:用网络标准设计，第三版。新骑手
Herman I，Corlosquet S，Clark L (2010)将数据网和文档网(RDFa 和 Drupal 7)结合起来。2010 年国际语义网会议论文集，2010 年 11 月 8 日，上海。www.w3.org/2010/Talks/RDFa-Drupal-Tutorial/2010 年 9 月 22 日访问
Sparkle Media (2010)将 Flash 动画发布为 HTML 格式。闪耀媒体系统。www.flashkeeper.com/publishhtml.htm2011 年 1 月 12 日访问
Adobe Labs (2011)将 Adobe Flash FLA 文件转换为 HTML，并扩展到更多设备。Adobe 系统公司。http://labs.adobe.com/technologies/wallaby/。2011 年 6 月 22 日访问
elik T (2010) HTML5 Now:一个循序渐进的视频教程，帮助您立即开始学习。伯克利新骑手出版社
伯纳斯-李 T (1996)技术评论，1996 年 7 月。en.wikiquote.org/wiki/Tim_Berners-Lee2011 年 4 月 14 日访问
可以用任何浏览器查看的 burst ein CD(2008):Campaign。卡里·伯斯坦。www.anybrowser.org/campaign/2010 年 9 月 25 日访问
Kyrnin J (2006)浏览器特定的网页设计——你为什么要在意？纽约时报公司。webdesign.about.com/od/browsers/a/aa111797.htm2010 年 9 月 26 日访问
奥尔索普 J (2009)它不需要在每个浏览器中看起来都一样。在:使用 Web 标准开发。新骑手，伯克利
泽尔德曼 J (2010)温和的劝说。在:使用 Web 标准进行设计。新骑手，伯克利
超越文档类型:网络标准、前向兼容性和 IE8。一份单独的杂志。www.alistapart.com/articles/beyonddoctype2010 年 9 月 26 日访问
微软开发者网络(2010)默认标准是什么意思？微软公司。msdn.microsoft.com/en-us/library/cc817575.aspx2010 年 12 月 31 日访问
Shankland S (2009)微软积极敦促 IE 6 用户升级。CNET 新闻。news.cnet.com/8301-30685_3-10406468-264.html2010 年 9 月 25 日访问
微软(2011)Internet Explorer 6 倒计时——让世界远离 Internet Explorer 6。微软公司。ie6countdown.com于 2011 年 3 月 14 日访问
谷歌将在三月份让 ie 6 用户打包走人。Ars 技术公司。ars technica . com/Microsoft/news/2010/01/Google-to-send-internet-explorer-6-users-packing-come-March . ars。2010 年 9 月 25 日访问
Ateş，Irish P，Sexton A(2011)Modernizr——正确进行前端开发。法鲁克·阿泰什、保罗·爱尔兰人和亚历克斯·塞克斯顿。www.modernizr.com于 2011 年 8 月 1 日访问
Gimson R，Finkelstein SR，Maes S，Suryanarayana L (eds) (2003)设备独立性原则。万维网联盟。www.w3.org/TR/di-princ/于 2011 年 7 月 31 日访问
莱维特·莫、施奈德曼 B、贝利·RW、巴纳姆 C、博斯利 J、恰帕罗 B、杜马斯 J、象牙米、约翰 B、米勒-雅各布斯 H、科亚尼 s J、刘易斯 JR、佩奇 S、拉米 J、雷迪什 J、舒尔茨 J、威金顿 S、沃尔夫森 CA、伍德·勒、齐默尔曼 D(编辑)(2006)基于研究的网页设计&可用性指南。美国政府卫生部&人类服务部(HHS)。usability.gov/guidelines/guidelines_book.pdf2011 年 2 月 12 日访问

二、国际化

网站作者用世界上所有的语言发表文章，有几种技术支持这种多语言网站。在 Web 上正确表示字符的一个关键因素是应用适当的字符编码。虽然这也取决于服务器设置，但是 web 开发人员可以有效地为 web 文档的物理和语法结构的适当国际化做出贡献。标准网站开发的第一步是在文件和文档内容级别应用国家设置。Unicode 可以被认为是最终的编码，是从标准化组织的角度来描述的。Unicode 字节顺序标记提供了关于在这种多字节字符编码表示中可单独寻址的子组件的顺序的信息，使用 Unicode 字节顺序标记可能会引起混淆。特殊字符和符号通常可以通过各种方式提供，包括实体集、转义码和十六进制表示法。

在本章中，您将学习如何保护网站上的字符显示，使其能够正确显示自然语言的任何字符或表意文字。字符可以用几种方式表示，这取决于所选择的字符编码。虽然有各种各样的字符编码系统，但 Unicode 可以用于几乎所有的场景。字符编码可以用多种方式设置，从meta标签到 HTTP 头。大多数字符可以直接添加到标记中；但是，您应该记住一些例外情况。您还将学习字符实体和空白字符的正确应用，这些字符可用于向网站添加特殊字符，如不可见、不可打印的控制字符。

字符编码的重要性

直到 20 世纪 90 年代，计算机主要仅支持英语字母表的字符(部分是因为美国在计算机市场上的主导地位)，并且对国际字符的需求已经由当时使用的操作系统(例如，DOS、Windows 3.1、Windows 95)支持的硬件代码页来满足，例如 CP852 或 CP1252。例如，中欧字符的正确显示取决于硬件配置、操作系统及其设置。几年后，随着网络的出现，这样的限制再也不能被接受了。1997 年，HTML 4.0 引入了对国际字符的高级支持。

美国信息交换标准码(ASCII)是得到最广泛支持的字符编码方案，它在 7 位上存储 128 个字符。8 位字符集提供了额外的字符，例如基于 ASCII 的标准字符编码的 ISO/IEC 8859 系列(非正式地称为 Latin-1)。它们于 1987 年首次发布，支持大多数西欧语言，部分支持其他一些语言。

大多数现代字符编码系统都是基于 ASCII 的；然而，它们支持更多的字符。

如果需要除了最基本的拉丁字符之外的任何东西，除非指定适当的字符编码，否则您的网站上的文本可能无法阅读。这些标准不仅定义了每个字符的 i 标识和相关的数值(码点 ¹ )，还定义了该值在被编码文件的位中的表示方式。

如果正确声明了字符编码，浏览器可以使用适当的编码来呈现 web 文档。因此，所有特殊字符都将正确显示。浏览器通常也有一个自动字符编码识别特性，在文档的字符编码没有声明的情况下会被激活。根据文件的设置，浏览器可能会识别所使用的字符编码。用户也可以在大多数浏览器中手动选择编码方案，这是一种强制方法，如果所有服务器和文档设置都正确，则不应使用。

作为一个例子，让我们假设圣诞祝福将在网页上以几种语言发布，如表 2-1 所示。

¹ 代码点是代码位置，可以是构成字符编码的代码空间的任何数值。

此内容旨在满足无法通过所有字符编码方案编码的本地化要求；也就是说，并不是所有的字符编码系统都适合表示这种字符种类。这些角色的正确表现并不像人们想象的那样自然。很容易出现不需要的字符，如正方形()或问号()，而不是非基本字符的正确形式。不适当的字符编码(或其声明)也会导致额外的问题；例如，文本可能变得无法搜索。即使适当的和不适当的字符编码的重叠部分可能有清晰的字符，文本的大部分也会包含无意义的字符。错误的编码不仅会导致不适当的渲染，还会导致进一步的处理问题；例如，数据库可能变得不可访问。

除了编码信息不足之外，其他原因也会破坏文本的可读性。缺失字体只是其中之一。

对特殊字符进行编码的可能性取决于所使用的字符编码和字符集。

有各种各样的字符集。最著名的可以归纳如下:

utf:utf-8/utf-16/utf-32(unicode，全球通用)
ISO 标准 : ISO-8859-1(西欧)、ISO-8859-2(中欧)、ISO-8859-3(南欧)、ISO-8859-4(北欧)、ISO-8859-5(西里尔文)、ISO-8859-6-i(阿拉伯文)、ISO-8859-7(希腊文)、ISO-8859-8(希伯来文、视觉)、ISO-8859-8-i(希伯来文、逻辑)、ISO-8855
US-ASCII(基础英语)
Windows : Windows-1250(中欧)、Windows-1251(西里尔文)、Windows-1252(西欧)、Windows-1253(希腊文)、Windows-1254(土耳其文)、Windows-1255(希伯来文)、Windows-1256(阿拉伯文)、Windows-1257(波罗的海沿岸)
东方语言编码 : EUC-JP(日语、Unix)、Shift_JIS(日语、Win/Mac)、EUC-kr(韩语)、gb2312(中文、简体)、gb18030(中文、简体)、big5(中文、繁体)、Big5-HKSCS(中文、香港特别行政区)、tis-620(泰语)
其他 : koi8-r(俄语)、koi8-u(乌克兰语)、Macintosh (MacRoman)等等。

尽管种类繁多，但只有单一字符编码的变体——Unicode——才应该使用，除非有非常充分的理由不这样做。下一节描述字符编码。

统一码

Unicode 是通用字符编码的标准。它提供了对世界上书写语言所使用的所有字符进行编码的能力 [1 ]。除了自然语言的字符和广泛使用的符号，世界上所有的历史文字也包括在内。Unicode 为大约 109，000 个字符提供代码，涵盖 93 种文字(甚至包括埃及象形文字等历史文字)，包括字母、表意文字集和符号。此外，Unicode 代码空间支持超过一百万个代码点。Unicode 字符代码表提供了对任何字符及其代码点 [2 ]的快速访问。这些分类也让我们深入了解 Unicode 所支持的语言和字段的丰富性:

脚本
- 欧洲文字:亚美尼亚语(包括连字)、科普特语(包括希腊文区的科普特语)、塞浦路斯音节表、西里尔语、格鲁吉亚语、格拉哥利特语、哥特语、希腊语、拉丁语(扩展，包括连字和全角拉丁字母)、线性 B(带有音节表和表意文字)、Ogham、古意大利语、Phaistos Disc、Runic 和 Shavian
- 音标:音标扩展、音标扩展、声调修饰字母、间距修饰字母、上标和下标
- 组合变音符号:组合变音符号和组合半音符号
- 非洲文字:巴姆语、埃及象形文字、埃塞俄比亚语、恩科语、奥斯曼语、提夫纳语和瓦伊语
- 中东文字:阿拉伯语、帝国阿拉姆语、阿维斯陀语、卡利安语、楔形文字(包括数字和标点符号、古波斯语和乌加里特语)、希伯来语、吕底亚语、曼达语、古南阿拉伯语、巴列维语、帕提亚语、腓尼基语、撒马利亚语和叙利亚语
- 中亚文字:蒙古语、古突厥语、八思巴语和藏语
- 南亚文字:孟加拉语、梵文、梵文、古吉拉特语、古尔穆希语、凯提语、卡纳达语、Kharoshthi 语、莱普查语、林布语、马拉雅拉姆语、Meetei Mayek 语、Ol Chiki 语、奥里雅语、索拉什特拉语、僧伽罗语、Syloti Nagri 语、泰米尔语、泰卢固语、塔纳语和吠陀扩展语
- 东南亚文字:巴塔克语、巴厘语、布吉纳语、占语、爪哇语、克耶黎语、高棉语(带符号)、老挝语、缅甸语(扩展)、新大略语、热江语、巽他语、乐泰语、泰坦语、泰越语和泰语
- 菲律宾文字:布希德语、哈努努语、他加禄语和塔班瓦语
- 东亚文字:注音(扩展)、中日韩统一表意文字(汉，扩展)、中日韩兼容表意文字(带补充)、/康熙字根、韩文 Jamo(扩展)和音节、平假名、片假名(带音标扩展、假名补充、半角片假名)、堪布、傈僳族、彝语(带音节和字根)
- 美国文字:切罗基语、沙漠语和统一的加拿大土著印第安方言领音
- 其他文字:字母表示形式、半角全角形式、ASCII 字符
符号和标点符号
- 标点符号:普通标点符号(ASCII 标点符号、Latin-1 标点符号、小型变体)、补充标点符号(CJK 符号和标点符号、CJK 兼容格式、全角 ASCII 标点符号和竖排格式)
- 字母数字符号:字母状符号(包括罗马符号)、数学字母数字符号、封闭字母数字、封闭 CJK 字母和月份、CJK 兼容符号(包括附加的方形符号)
- 数字和数字:爱琴海数字、古希腊数字、ASCII 数字(包括全角 ASCII 数字)、普通印度数字形式、计数杆数字、楔形数字和标点符号、数字形式、鲁米数字符号、上标和下标
- 数学符号:箭头、数学字母数字符号、数学运算符和几何形状
- 其他符号:炼金术符号、古代符号、盲文图案、货币符号、丁字、表情符号、游戏符号、杂项符号、音乐符号(包括古希腊音乐符号和拜占庭音乐符号)、交通和地图符号、易经符号
- 特殊字符:布局控件、不可见操作符、标签、变体选择器

该标准支持三种编码格式(UTF-8、UTF-16 和 UTF-32 ),它们使用通用的字符集。它们支持相同的数据传输，但每码单位格式分别为 8、16 或 32 位(字节、字或双字)。它们甚至可以相互转化。所有三种编码形式每个字符最多需要 4 个字节(32 位)的数据。根据所选择的编码形式(UTF-8、UTF-16 或 UTF-32)，每个字符被表示为一个 1 到 4 个 8 位字节的序列、一个或两个 16 位代码单元，或者单个 32 位代码单元。由于 UTF-8 和 UTF-16 是可变宽度编码，UTF-8 导致英文文本的文件较小。然而，UTF-8 要求一个亚洲字符需要 3 个字节，而 UTF-16 只需要 2 个字节。UTF-32 码点计算可以快速执行，但所有码点都需要 4 个字节(固定宽度编码)。

对于 web 内容，推荐 UTF-8，它提供了与 US-ASCII ² 的互操作性和向后兼容性，并具有进一步的优势特性 [3 。UTF-8 支持国际化资源标识符 (IRIs，多语言网址)[4，5]。UTF-8 在编码字符时至少使用一个字节，而 UTF-16 使用两个字节，因此 UTF-8 编码的文件往往比 UTF-16 编码的文件小。UTF-8 是面向字节的，而 UTF-16 和 UTF-32 不是；换句话说，UTF-16 和 UTF-32 文件的字节顺序应该由字节顺序标记来声明(BOM——将在“特殊字符”下的相应部分中描述)。UTF-8 在从错误中恢复方面比其他 Unicode 风格更好。

UTF-16 和 UTF-32 还有更多变体，这取决于字符顺序，这是字符集中可单独寻址的子组件的顺序。如果最高有效字节是第一个字节(最低地址)，最低有效字节是最后一个字节(最高地址)，那么这个文件就叫做大端 (UTF-16BE，UTF-32BE)。如果这些字节被颠倒，文件被称为小端 (UTF-16LE，UTF-32LE)。表 2-2 总结了 UTF-8 与 UTF-16 和 UTF-32 的不同之处。

2 所有 US-ASCII 字符在 UTF-8 中使用与 US-ASCII 完全相同的字节；即，仅包含 ASCII 字符的 UTF-8 文件等同于 ASCII 文件。

根据 HTML5 规范，“鼓励作者使用 UTF-8。一致性检查器可能会建议作者不要使用遗留编码 [6 ]。创作工具应该默认为对新创建的文档使用 UTF-8[7]。

标记上下文中应该避免的字符

由于以下一个或多个原因，一些 Unicode 字符不应应用于 HTML 或 XML 文档(表 2-3 )的标记上下文中:

在 Unicode 标准中不赞成使用它们。
没有额外的数据就无法支持它们。
它们很难处理，因为它们是有状态的。 ³
使用标记可以更有效地处理它们。
应该避免使用它们，因为它们可能会导致与等效标记的潜在冲突。

³ 文本中由特定值表示的字符取决于文本流中先前提供的值，例如转义序列或双向嵌入控制。

格式化也适合标记的字符

Unicode 中有一些特殊的格式化字符也可以用于标记(表 2-4 )。它们影响文本，并且可以同时应用于标记。这些格式化字符由渲染引擎解释。

特殊字符

某些 Unicode 字符值得特别注意，因为它们应该谨慎使用。

字节顺序标记(BOM)

Unicode 文件可以在最开始包含特殊字节，称为字节顺序标记 (BOM)。这个码点是 U+FEFF(零宽度不间断空格，ZWNBSP)。如前所述，应该声明 UTF-16 和 UTF-32 编码文件的字节顺序，BOM 提供了这些信息。

在 UTF-16 中，2 或 4 个字节的字符可以用两种方式排序(小端或大端——本质上只是定义字节的读取方向)。要从这两者中选择，用 UTF-16 编码的文档应该总是以 BOM 开始。在 UTF-8 中，它是可选的，因为字符中没有可选的字节序列。如果 BOM 仍然在 UTF-8 中提供，它被称为 UTF 8 签名。根据 W3C 的 I18N 活动组，字节顺序标记应该在 UTF-8 [10 ]中省略。这种字节顺序标记在某些浏览器中会导致显示问题。例如，它会在页面顶部产生额外的一行或不需要的字符 [11 ]。可以使用高级文本编辑器或 Richard Ishida 的 UTF-8 BOM 测试仪 [12 ]来检查 UTF-8 签名的存在。

空白字符

一小部分 Unicode 字符被认为是空白字符，它们具有不同的换行属性、不同的连接属性和不同的宽度。这些字符用于用换行符、制表符和空格分隔文档的不同部分。它们代表网页上的水平或垂直空间，因此有助于内容块或整个页面的外观和布局。空白字符通常是非可视标记，但在呈现时会保留一些空间。空白字符列表因上下文而异。例如，换页控制字符在 HTML 中被认为是空白，但在 XML 中不是。此外，每种标记语言都定义了一些可以作为标记语法一部分的空白字符。XML 规范将空白定义为一个或多个以下字符的组合:空格(U+0020)、回车符(U+000D)、换行符(U+000A)或制表符(U+0009)。HTML 4.01 还支持换页符(U+000 c)；但是，该字符不能在 XHTML 中使用。

并非所有空白字符都可以从键盘键入，尽管最常见的空白字符，如空格(西方语言中的基本单词分隔符)或单个制表符，可以分别使用空格键和 Tab 键键入。高级文本编辑器通常为所有其他编辑器提供插入选项(参见后面的“开发工具”一节)。

20 世纪 90 年代的一个非常糟糕的做法是通过嵌入空白图像来提供空白，比如spacer.gif文件，而不是空白字符。这种方法仍然存在，尽管它只有缺点。例如，使用空格符图像的网页内容失去了它的结构，并且提供了没有语义或结构意义的元素。结果，这种文档的源代码的长度不是最佳的。即使是对内容最轻微的修改也可能导致布局混乱。这样的图片也可能对搜索产生负面影响。此外，这种文档的页面内容对于文本浏览器和屏幕阅读器是不可访问的(这将重复读出“spacer.gif”)。

建议 NFC 标准化

在 Unicode 中，相同的文本可以提供不同的字符序列。例如，被加重的 a(换句话说，α)可以表示为预组合的 U+00E1(带锐音符的拉丁文小写字母 a)或者表示为 U+0061(拉丁文小写字母 a)和 U+0301(组合锐音符)的分解的序列。

Unicode 标准支持四种规范化形式 : NFC 、 NFD 、 NFKC 、 NFKD 。 C 代表组合(预组合)， D 代表分解， K 代表兼容性。

当在(X)HTML 标识符或 CSS 选择器和类名中使用重音符号或其他音调符号时，所使用的规范化形式尤其重要。如果这样的单词在 HTML 中以预先组合的形式使用(例如，<div id="hangsúlyos">)，但是在 CSS 中以分解的形式使用(例如，#hangsúlyos { color: red; })，那么选择器将不会匹配类名。这个问题可以通过在标记属性和 CSS 属性中避免重音字符来解决，这是强烈建议的。

W3C 建议在 Web 上进行 NFC 标准化，以提高互操作性 [13 ]，默认情况下，高级文本编辑器支持 NFC 标准化。

应该首选 Unicode

Web 文档应该一次使用一种字符编码。同一文档的不同部分不应使用不同的编码方案进行编码。

UTF-8 字符编码可以显著降低多语言网站的复杂性。与任何其他编码系统相比，Unicode 允许在一个页面上使用更多的语言。在大多数情况下，它是内容、表单、脚本和数据库的理想选择。因此，应尽可能使用 Unicode[14]。幸运的是，这种用法在网络上有很好的趋势。根据谷歌 2010 年 8 月发布的报告，大约 50%的网站应用 UTF-8。终极字符编码的普遍使用可以消除用户代理在呈现包含特殊字符的文档时做出的错误假设。

但是，Unicode 的应用并不能保证文本能够在浏览器中正确显示。诸如阿拉伯语之类的一些脚本语言需要额外的技术来确保字形的适当字符序列。

声明标记的字符编码

可以通过多种方式确定 web 文档的字符编码:

使用 HTTP 头
使用文档内声明
- 使用 pragma 指令 (HTML 4，XHTML，(X)HTML5)
- 使用元字符集属性(HTML5)
- 使用 XML 声明 ⁴ (XHTML)

最后三个选项用在标记中，但不是第一个，它是由 web 服务器应用来指示字符编码的。如前所述，并不是所有的文档内声明都可以在任何标记语言中使用，但是 pragma 指令可以在大多数标记语言中使用。由于所有这些技术都向呈现引擎提供了关于如何解释文件的编码信息，因此确保这些声明与文件的实际字符编码相对应是至关重要的。

如果多个编码声明不一致或相互矛盾，以下优先规则将决定应用哪个声明:

HTTP Content-Type头
字节顺序标志 ⁵
XML 声明
meta元素
link charset属性

如果只使用 XML 声明来提供字符编码声明，一些渲染引擎会忽略它。

编码声明在 HTTP 头中

声明字符编码的一个选项是在 HTTP 头中提供适当的数据。清单 2-1 显示了一个例子。

***清单 2-1。*设置 HTTP 头中的字符编码

HTTP/1.1 200 OK Date: Tue, 02 Aug 2011 14:18:05 GMT Server: Apache/2.2.3 (Oracle) … Content-Type: text/html; **charset=UTF-8** Content-Language: en

如前所述，这些声明具有最高的优先级。它们应该与文档内声明一致。

使用 UTF-16 的文档应该声明为UTF-16而不是UTF-16BE或UTF-16LE，并在文件中提供一个字节顺序标记。

HTTP 头也用于其他目的。有关 HTTP 报头的更多信息，请参见第四章。

文档内声明

在 HTML 4 中， pragma 指令应该以清单 2-2 所示的形式用在 head 元素的顶部。

***清单 2-2。*用 Pragma 指令声明字符编码

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

前面的声明也可以在 HTML5 中使用，它还提供了一个新指定的元字符集属性(清单 2-3 )。它们中的任何一个都可以使用，但是一次只能使用一个。整个声明必须在页面的前 512 个字节内。

清单 2-3。 HTML5 meta charset

<meta **charset="UTF-8">**

XHTML 文档的编码声明取决于它们使用的 MIME 类型。如果它们被用作text/html，那么清单 2-2 中的杂注指令可以用在 head 元素的顶部。

用作 XML 的 XHTML 文档可以在文档的第一行使用 XML 声明的编码声明(清单 2-4 )(见第三章)。

HTML5 规范已经将 BOM 添加到层次结构中，但是这还没有在所有的浏览器中实现。

***清单 2-4。*设置 XML 文档中的字符编码

<?xml version="1.0" **encoding="utf-8"**?>

对于使用除 UTF-8 或 UTF-16 之外的字符编码的任何 XML 文档，以及在 HTTP 头不提供编码的情况下，都需要 XML 声明(参见后面的第三章)。

为 CSS 声明字符编码

通常，不需要为样式表声明字符编码。然而，当且仅当 CSS 中提供了任何非 ASCII 内容时，才应该声明外部 CSS 文件的编码。或者，用要求非拉丁字符的语言编写的选择器或其他 CSS 内容的描述性名称可以不带重音符号，完全消除了对 CSS 编码声明的需要。

HTTP 头声明

CSS 编码也可以在 HTTP Content-Type 头中声明。例如，如果字符编码是 UTF-8，那么 HTTP 声明看起来就像清单 2-5 中的。

***清单 2-5。*为 CSS 声明字符编码(很少使用)

Content-Type: text/css; **charset=UTF-8**

除了 HTTP 声明之外，还总是建议使用文档内声明(参见下一节)。这可以保证即使在本地移动或使用文件，也可以确定外部 CSS 文件的编码。

HTTP 头中声明的字符编码应该与 CSS 文件中声明的一致。自然，第一个优先级更高。

文档内声明

字符编码可以通过@charset at-rule 设置，语法如清单 2-6 所示。

清单 2-6。@charsetAt 规则的语法

@charset "<charset-name>";

每个 CSS 文件只能使用一个@charset规则。应该在文件的最开始声明它。声明前不应有字符(如果 CSS 文件是 Unicode 编码的，则只有 BOM⁶)。

charset-name可以是 IANA15 定义的字符集之一。某些编码在 IANA 注册表中有多个名称(在这些情况下，应该应用表示为首选的名称)。清单 2-7 展示了一个外部 CSS 文件字符编码声明的典型例子。

***清单 2-7。*用 At 规则设置 CSS 的字符编码

@charset "UTF-8";

⁶ 外部 CSS 文件通常采用 US-ASCII 编码。

这些规则只能用于外部样式表。文档内样式表声明应该避免@charset规则。

HTML 4.01 规范为link元素定义了一个charset属性，它可以用来标识目标文档的字符编码。然而，在 HTML5 中，link元素的这个属性被认为是过时的(部分原因是浏览器不完全支持它)；因此，应该避免。

转义码、特殊字符和符号

在 HTML 和 XHTML 文档中，每个字符可以直接表示，也可以用一个字符序列表示(也称为字符引用)。存在两种类型的字符序列:数字字符引用和字符实体引用。

假设一个文档片段包含一个带重音的 a 字符。它可以通过á或á数字字符引用或者通过(X)HTML 文档中的á实体引用来声明(详见以下章节)。但是，应该直接使用字符á。版权标志(而非©)、注册商标标志(而非®)等也是如此。

字符应该总是优先于转义码，除非那些应该表示的字符在(X)HTML 或 XML 中有语法意义，但不可见或不明确。然而，在这些情况下，使用实体是强制性的 [16 ]。换句话说，文本或属性值中使用的标记字符必须经过转义。例如，当一个(X)HTML 源代码应该表示为未经处理的文档内容时，<和>字符应该由它们在源代码中的实体名称提供。类似地，如果需要一个&字符作为 RSS 提要或 RDF 文件中的文本，那么应该使用&实体(更多信息请参见“实体引用”一节)。

数字参考

数字字符引用通过通用字符集或 Unicode 码位以&#*nnnn*;的形式标识字符，其中 nnnn 是十进制形式的码位。

HTML 和 XHTML 都支持十六进制引用。在 HTML 中，它们可以以&#*Xhhhh*;或&#*xhhhh*;的形式应用。因为 XML 是区分大小写的，所以在 XHTML 中它们必须是小写的(&#*xhhhh*; ) [17 )。

nnnn 或 hhhh 可以是任意数量的数字，并且可以包括前导零。

应该消除数字引用，以利于直接使用字符。在大多数情况下，没有理由在标记中插入一个撇号作为’而不是’字符本身。其他角色也是如此。如果不能用键盘键入字符，如日语表意字符，可以用高级软件工具插入相应的字符，或者通过剪贴板从其他应用、代码图表或网站复制并粘贴相应的字符。请注意，即使是高级文本编辑器，在开发过程中也会错误地显示许多这些直接插入的字符；但是，如果包含文件的字符编码设置正确并且该文件被正确提供，浏览器将正确显示它们。

实体引用

字符实体引用通过适当实体的名称来引用字符，该实体以& name 的形式将所需字符作为其替换文本；。

HTML 支持 252 个字符实体 [18 ]。XHTML 中有 253 个实体(包括 XML 1.0 的 5 个预定义实体)[19]；然而，它们的应用受到 XHTML 文档处理方式的影响。应该记住，XHTML 文档，如果服务正确，是由 XML 解析器处理的，而不是由解释 HTML 文档的 SGML 解析器处理的。那些在 XML 中有意义的字符，比如小于号(<)，如果直接提供而不是使用实体，会导致解析错误。在所有 XML 环境中，只有四种字符实体的处理得到保证:&、>、<和"(分别为&、>、<和")。幸运的是，这个简短的列表包含了那些可以用于语法符号的非常重要的字符实体(与号、大于号、小于号)。W3C 推荐在 XHTML 文档的href属性中使用&字符 [20 ]。应特别注意包含参数的 URIs。这些 URIs 中的单个&字符应由实体&21 替换。

虽然'实体(撇号，U+0027)是 XML 的五个预定义实体之一，但它不应该用在 XHTML [ [22 ]中。

由于几乎所有字符都可以直接用 Unicode 表示，包括但不限于自然语言的所有字母和表意符号、加重字母、特殊字符、数学符号和符号，因此字符引用应该被删除 [23 ]。直接使用字符比数字或实体引用更容易解释、维护和修改(清单 2-8 )。带有引用的文本更难扩展，几乎不可能搜索到。许多字符不能用引用来表示，这在 90 年代经常导致网页上出现不正确的字符。例如，显示了带颚化符的小写o，õ，而不是带双锐音符(也称为 Hungarumlaut)的o，ő是一个不同的字符。

***清单 2-8。*具有字符、数字和实体引用的相同中欧文本的三个版本

Áttekintés

A HTML5 a HTML teljes megújulása, új funkciókkal felvértezve.

Áttekintés

A HTML5 a HTML teljes megújulása, új funkciókkal felvértezve.

Áttekintés

A HTML5 a HTML teljes megújulása, új funkciókkal felvértezve.

检查 I18N

那些支持国际化的设置和内容可以通过 W3C 国际化检查器 [24 进行检查。它可以确定 HTML/XHTML 文档是否包含非 NFC 类名和标识符、页面的语言设置等等。验证器在第十四章的“验证 I18N”部分有详细描述。

总结

在本章中，您了解了国际化设置的重要性，这些设置使正确显示的字符能够在网站上呈现或在数据库中处理。您现在已经知道有很多字符编码系统可供选择，其中许多已经使用了几十年，但在最近几年已经过时了。有一种终极的可变宽度字符编码，称为 UTF-8，它是 Unicode 的一种风格，省略了 BOM，并向后兼容曾经最广泛使用的编码方案 ASCII。

下一章将描述标记，大多数标准化工作都在这里进行。标记不仅提供文档结构和内容，还作为可访问性支持和语义注释的基础。正如你将看到的，标记语言有很大的选择余地，不仅仅是 HTML5，这是最近大多数开发者谈论的一种语言。您将学习 HTML 和 XHTML 元素和属性，这些元素和属性可以安全地应用于各种文档，同时保持符合标准。这一章还会让你明白为什么严格标记总是首选。

参考文献

Unicode Consortium(2010)Unicode 标准:技术介绍。Unicode 公司www.unicode.org/standard/principles.html。2010 年 9 月 29 日访问
Unicode (2011) Unicode 6.0 字符代码图表。Unicode 联合会。www.unicode.org/charts/于 2011 年 8 月 3 日访问
叶尔乔·F(2003 年)。UTF-8，ISO 10646 [RFC3629]的一种转换格式。互联网协会。www.ietf.org/rfc/rfc3629.txt2010 年 9 月 29 日访问
Duerst M，Suignard M (2005)国际化资源标识符(IRIs)。互联网协会。www.ietf.org/rfc/rfc39872010 年 9 月 30 日访问
Ishida R (2010)多语言网址介绍。万维网联盟。www.w3.org/International/articles/idn-and-iri/2010 年 9 月 30 日访问
希克森一世(编辑。)(2010) HTML5(网络作者版)修订版 1.4439。HTML 和 XHTML 的词汇表和相关 API。编辑稿。万维网联盟。dev.w3.org/html5/spec-author-view/semantics.html2010 年 9 月 29 日访问
希克森一世(编辑。)(2010) HTML5(包括仍在开发中的下一代附加功能)。标准草案。苹果电脑公司、Mozilla 基金会和 Opera 软件公司。www . whatwg . org/specs/we b-apps/current-work/multipage/semantics . html。2010 年 9 月 29 日访问
Dürst M，Freytag A (2007)不适合用于标记的字符。in:XML 和其他标记语言中的 Unicode。Unicode 技术报告#20。W3C 工作组说明。万维网联盟。www.w3.org/TR/unicode-xml/#Suitable2010 年 9 月 30 日访问
适合用于标记的 Dürst M，Freytag A (2007)格式字符。in:XML 和其他标记语言中的 Unicode。Unicode 技术报告#20。W3C 工作组说明。万维网联盟。www.w3.org/TR/unicode-xml/#Format2010 年 9 月 30 日访问
Ishida R (2010)我需要了解 BOM 的哪些信息？in:HTML 中的字节顺序标记(BOM)。万维网联盟。www . w3 . org/International/questions/QA-byte-order-mark # BOM how。2010 年 9 月 30 日访问
Cawkwell D，Ishida R (2010 年)展示了 UTF-8 轰炸造成的问题。万维网联盟。www.w3.org/International/questions/qa-utf8-bom2010 年 9 月 30 日访问
Ishida R (2007 年)。UTF-8 炸弹测试机。理查德·石田。rishida.net/utils/bomtester/2010 年 9 月 30 日访问
Ishida R(2010)HTML 和 CSS 的标准化。万维网联盟。www . w3 . org/International/questions/QA-html-CSS-normalization。2010 年 9 月 30 日访问
如果可以的话，使用 UTF-8。输入:选择&应用字符编码。万维网联盟。www . w3 . org/International/questions/QA-choosing-encodings # use unicode。2010 年 9 月 30 日访问
Simonsen K 等人(2010)的字符集。互联网号码分配机构。www.iana.org/assignments/character-sets2010 年 9 月 30 日访问
Ishida R (2010)何时使用转义。In:在标记和 CSS 中使用字符转义。万维网联盟。www.w3.org/International/questions/qa-escapes#use2010 年 9 月 30 日访问
Pemberton S 等人(2002)将实体引用为十六进制值。在:XHTML 1.0 可扩展超文本标记语言(第二版)。HTML 4 在 XML 1.0 中的重构。W3C 推荐。万维网联盟。www.w3.org/TR/xhtml1/#h-4.122010 年 9 月 29 日访问
勒霍斯，雅各布一世(编辑。)(1999)HTML 4 中的字符实体引用。在:HTML 4.01 规范。W3C 推荐。万维网联盟。www.w3.org/TR/html4/sgml/entities.html2010 年 9 月 29 日访问
Pemberton S 等人(2002)实体集。在:XHTML 1.0 可扩展超文本标记语言(第二版)。HTML 4 在 XML 1.0 中的重构。W3C 推荐。万维网联盟。www.w3.org/TR/xhtml1/#h-A22010 年 9 月 29 日访问
Pemberton S 等人(2002 年)在属性值中(和其他地方)使用了&符号。在:XHTML 1.0 可扩展超文本标记语言(第二版)。HTML 4 在 XML 1.0 中的重构。W3C 推荐。万维网联盟。www.w3.org/TR/2002/REC-xhtml1-20020801/#C_162010 年 9 月 30 日访问
石田 R (2010)顺便说一句。In:在标记和 CSS 中使用字符转义。万维网联盟。www.w3.org/International/questions/qa-escapes#bytheway2010 年 9 月 30 日访问
Pemberton S 等人(2002)命名字符引用&apos；。在:XHTML 1.0 可扩展超文本标记语言(第二版)。HTML 4 在 XML 1.0 中的重构。W3C 推荐。万维网联盟。www.w3.org/TR/2002/REC-xhtml1-20020801/#C_162010 年 9 月 30 日访问
Ishida R (2010)何时不使用转义。In:在标记和 CSS 中使用字符转义。万维网联盟。www.w3.org/International/questions/qa-escapes#not2010 年 9 月 30 日访问
W3C I18N 活动组(2010) W3C 国际化检查器。万维网联盟。qa-dev.w3.org/i18n-checker/2010 年 9 月 30 日访问

三、标记语言：不仅仅是 HTML5

由于标记是 web 文档的本质，它为标准化工作提供了最大的空间。自从 Web 诞生以来，HTML 的受欢迎程度并没有降低；因此，熟悉该语言的版本和变体非常重要。另一方面，XML 语言的应用显著增加。HTML 和 XHTML 之间的差异对于理解从一种文档类型迁移到另一种文档类型的技术至关重要。所有 web 文档的一般结构遵循相同的逻辑；然而，HTML5 引入了新的结构化元素，可以用来创建相当复杂的文档结构。通过研究内容有限的结构良好的文档示例，您将能够自己创建结构良好的 web 文档。为了实现良好的结构，应该区分块行和内联级别的元素，这对于理解如何将元素相互嵌入(元素嵌套)也很重要。您还应该知道如何使用正式的公共标识符和文档类型定义来创建符合标准的文档。XML 声明的严格规则对于 XHTML 创作至关重要。

在这一章中，你将学习网站开发中最重要的标准。本章涵盖了最高级的标记语言以及混合命名空间的文档类型。为了更容易理解，我提供了示例 HTML 和 XHTML 文档。您将了解如何区分不应该使用的不推荐使用的元素和属性，以及可以在当今 Web 上可用的标记语言的几乎所有版本和变体中使用的元素和属性。除了最流行的标记语言版本之外，您将通过混合命名空间文档了解 XML 的强大功能，在混合命名空间文档中，文本标记不仅可以提供通用文本，还可以提供矢量图形和数学注释。阅读完本章后，您将能够应用语义上有意义的标记元素和属性，消除过时的标记，并使用适当的元素嵌套和 DOM 结构创建 web 文档。

Images 注标记基础知识的详细描述不在本书范围内。初级和中级开发人员都可以使用一些资源。其中之一是“HTML 入门”，这是 HTML 规范的作者兼编辑戴夫·拉格特 [ 1 ]写的一篇非常简短的概述。另一个——强烈推荐——W3C 文档是 Michael Smith 的“HTML:标记语言参考”。关于 HTML5【例如 3 、 4 、 5 、 6 和 XHTML 的书也很多。 ¹ 然而，必须更加小心地考虑有关 HTML5 的文档的变更和过时。如果在开发过程中某个元素需要一个简短的总结，W3C Cheatsheet 也非常有用。

SGML 语言

标准通用标记语言(SGML) 是一个标记语言家族。从 20 世纪 80 年代中期开始使用。SGML 的主要特性之一是灵活性。

对于 web 开发人员来说，最重要的 SGML 语言是 HTML，它从一开始就是万维网的核心语言。

Images 注意尽管早期 HTML 版本和 HTML5 的标记语法有相似之处，但最新版本不再基于 SGML 但是，它向后兼容传统的 HTML 解析。

HTML

早在 1989 年，位于瑞士日内瓦的欧洲高能物理实验室(CERN)就诞生了超文本标记语言(HTML)的概念。一年后，万维网项目也在那里启动。最初，HTML 被用来在科学家之间共享信息。这种语言的主要元素是在那时形成的，包括标题、段落和超链接。然而，这些文件的语义是有限的 [9 ]。后来还添加了新元素和多媒体功能，这导致了跨不同平台的文档的互操作性问题。

这种语言相对简单的语法和词汇使得快速广泛的传播成为可能。然而，这也是 90%以上的 HTML 文档中存在无效标记的原因。浏览器的容错能力不断被误用。人们应该认识到高质量的 web 文档、可访问性、良好的表示和各种浏览器中的功能的价值。

XHTML 手工编码者可以轻松地编写 HTML 标记。

XML 语言

可扩展标记语言(XML) 是万维网上结构化文档和数据的通用格式。因为 XML 是从 SGML 扩展而来的，所以它也可以被认为是 SGML 的一种受限的、机器可读的形式。在这种情况下，它删除了 SGML 中那些可能导致源代码松散的特性。

与大多数计算机语言不同，XML 没有固定的、预定义的标签集。使用 XML，可以定义单独的标记格式。Web 上一些最著名和最常用的 XML 格式和/或 XML 序列化是 XML、XHTML、SVG、MathML、XSL、RDF、Atom 和 RSS。

许多标记语言主要是为文本文档设计的；然而，表示其他类型信息的需求也在不断增长。音乐、视频、播放列表、矢量图形、内容聚合和各种 web 服务都是典型的例子。XML 的一大优势是它是严格的、定义良好的和可扩展的。XML 还使得将多种标记语言组合成单个概要文件成为可能，比如 XHTML + MathML + SVG 或 XHTML + SMIL。其他 XML 应用的附加词汇表(元素、属性和其他组件)可以通过 xmlns 属性声明的名称空间机制来使用。这是 XHTML 相对于 HTML 的主要优势之一。

XHTML

可扩展超文本标记语言(XHTML) 是一个 XML 语言家族，可以用来替代 HTML。XHTML 是 XML 的应用，因此比 HTML 更具限制性。与 HTML 相反，对于 XHTML 文档，必须确保它们被正确地编写；否则，呈现引擎会给出错误消息，而不是呈现内容。它们需要 XML 解析器，而不是 SGML 解析器。

使用 XML MIME 类型的文档，比如application/xhtml+xml，被浏览器视为 XML 文档；换句话说，它们由 XML 处理器解析。因此，XML 和 HTML 被不同地处理。事实上，即使是很小的语法错误也会妨碍 XML 文档(或声称是 XML 的文档)的正确呈现。相反，这类文档的错误在 HTML 语法中会被忽略。XML 文档的解析错误很容易导致“黄屏死亡”

版本概述

理解不同标记语言版本和变体的主要差异和功能，并分析被称为框架文档的具有最少内容的样本文档是很有用的。它们将在以下各节中提供。这些文档可以作为手工编码开发的基础。注意缩进是用来提供清晰易懂的代码。自然，为了获得完全的代码最优性，可以省略制表器。此外，所有提供的文档都是按原样逐字符有效的，因此它们必须用有效的标记进行扩展，以保持有效性。所有这些文件都可以在本书的网页上下载，也可以在本书的配套网站上下载。

HTML 版本和变体

这一部分将强调 HTML 的某些版本，原因有二。首先，有些对网络的发展产生了重大影响，并被用作未来标准的基础。第二，有些在引进 10 多年后仍在使用。

虽然大多数早期的 HTML 版本已经不再使用了，但是了解它们的里程碑和 HTML 的演变是很重要的。

HTML 的正式规范创建于 1992 年，该规范以 SGML 文档类型定义的形式不断发展。HTML 很快成为网络出版的通用语言。HTML 文档可以在纯文本编辑器和 WYSIWYG 环境中手动创建。 ²

HTML 2.0 由互联网工程任务组的 HTML 工作组于 1995 年创建。它也被称为 RFC 1866 [10 ]。HTML 2.0 是核心 HTML 元素的第一个标准化形式。HTML 2.0 用于独立于平台的超文本文档。文档类型已过时，当前被声明为历史记录。更多细节可以在 W3C 档案 [11 ]中找到。

HTML 3.2 是 W3C 的首个 HTML 推荐。在这个版本中，引入了新的元素来创建表格、小程序、上标和下标，以及图像周围的文本流 [12 ]。HTML 3.2 向后兼容 2.0 版本。清单 3-1 中的代码是一个 HTML 3.2 文档的片段。

***清单 3-1。*旧 HTML 文档中的不良做法(只是演示，不应使用)

An HTML 3.2 example

Example header

<A HREF=http://www.example.com/><img align=left border=0 alt="Example:"
width=102 height=52
src=http://www.example.cimg/author.jpg></A> The Author

您可以看到这个标记不区分大小写。前面的例子是松散的代码；事实上，对于 web 开发人员来说，这是一个糟糕的例子，因为有些属性没有被引用(例如，width=102而不是width="102")，使用了应该通过使用 CSS 来消除的严格表示属性(bgcolor、align)，段落没有被关闭(</p>标签丢失)，等等。

Images 提示虽然 HTML 允许在元素和属性名中同时使用大写和小写字母，但最好习惯使用小写字母，这在每个标记中都是允许的(包括区分大小写的 XHTML)。

对于网络标准来说，第一个是真正的选择。

HTML 4 是一个符合 ISO 标准的版本(ISO 8879)，它是事实上的标准，多年来一直是“万维网的发布语言”。该规范于 1997 年发布，并于 1998 年修订。HTML 4 被 HTML 4.01 取代。

清单 3-2 显示了一个典型的 HTML 4.0 文档的片段。

***清单 3-2。*一个典型的 HTML 4 文档(过时)

An HTML 4.0 example … `

毫无疑问，这份文件的结构与前一份文件有相似之处。标记语言在不断发展，大多数版本都依赖于早期版本和变体。

以前使用的最著名的 HTML 版本之一是 HTML 4.01。十多年来，它一直是网络的主要标记语言。W3C 推荐标准于 1999 年末发布。它有三种变体:严格、过渡和框架集。在 HTML 4 时代，真正的选择是严格风格，因为它只包含那些被选择包含在未来版本中的元素。创建过渡性变体是为了让开发人员更容易停止使用不推荐使用的标签，并提供时间来学习如何在没有这些过时标签的情况下编写标记(因此得名)。因为框架已经被认为过时很多年了，所以框架集文档根本不应该被使用。框架存在许多问题。例如，如果您访问一个框架集已损坏的网站，丢失的内容会占据整个窗口。如果一个访问者通过一个框架页面的直接链接到达，上下文就会被遗漏。搜索引擎不能有效地索引框架集文档。有链接和书签问题，还有其他问题，如后退按钮在浏览器中不起作用。框架还会减少网页上的可用空间，并导致打印问题。

XHTML 版本和变体

XHTML 是一个文档类型系列，它是 HTML 在 XML 而不是 SGML 中的重构。典型的 XHTML 文件扩展名有.html、.htm、.xhtml、.xht和.xml。XHTML 文档一般应用application/xhtml+xml 互联网媒体类型；然而，偶尔也会有例外(你将在下一章看到)。

Images

除了 XHTML 的核心版本(表 3-1 )之外，还知道一些复合、扩展和特殊的配置文件(表 3-2 )，还可以定义更多。附加机制允许 XHTML 子集或超集。XHTML 1.1 + MathML 2.0 + SVG 1.1 和 XHTML+RDFa 文档是 XHTML 超集的典型例子。由于在其中应用了额外的(外部)元素集，它们拥有比简单的 XHTML 文档更广泛的标记元素。

Images

XHTML 1.1 + MathML 2.0 + SVG 1.1 文档可以用任何一种化合物编写，它们都有自己的文档格式。所选择的语言是宿主语言(参见本章后面的“XHTML + MathML + SVG”一节)。

XHTML 1.0

根据其 2000 年发布(2002 年修订)的规范的副标题，XHTML 1.0 是“HTML 4 在 XML 1.0 中的重新表述” 18 。与 HTML 4.01 的三种风格相似，XHTML 1.0 也分别定义了严格、过渡和框架集变体。XHTML 1.0 Strict 只包含那些在 HTML 4.01 中没有被否决的元素和属性。每一个“缺失”的元素和属性都可以被它们的 CSS 等价物所替代。

³ 已经暂停。

⁴ 由开放移动联盟而非 W3C 定义。

XHTML 1.0 Transitional 提供了在 Strict variant 中不允许的表示元素，如 center 或 font。清单 3-3 和 3-4 展示了一个例子。

***清单 3-3。*XHTML 1.0 过渡文档中仍在使用一个很久以前就被弃用的元素

A paragraph aligned to center.

***清单 3-4。*清单 3-3 中的代码用 XHTML 1.0 编写，风格化为 CSS

`.center {
text-align: center;
}

A paragraph aligned to center.

XHTML 1.0 也有一个框架集变体，尽管正如我们前面看到的，强烈建议消除框架集，即使它们是 web 最初十年中 Web 文档的一个常见特征。

清单 3-5 展示了一个 XHTML 1.0 严格框架文档。

***清单 3-5。*一个 XHTML 1.0 严格框架文档

Minimal XHTML 1.0 Document

This is a minimal XHTML 1.0 document.

Images 提示对于任何种类的 XHTML 文档来说，这都是最好的起点，因为这种文档类型只包含从 HTML 派生出来的基本标记元素，并且在大多数标记语言中仍然通用。这种标记也作为使用外部词汇表进行扩展的基础(这样做，文档类型将会改变)。如果您想使用 HTML5 中引入的新标记元素，并从 XHTML 1.0 Strict 迁移，只需进行最小的更改(例如删除 DTD，将字符编码声明更改为新的，并添加新元素)。

XHTML 1.1

多年来，人们已经认识到，标记语言中的表示组件可以用样式表更有效地处理。此外，如果在文档中应用所选元素的子集而不是整个元素集，为手持设备开发的 web 文档可以更有效地使用有限的资源。这就是 XHTML 模块化背后的基本思想，这些元素子集被称为元素模块。

XHTML 1.1 是“基于模块的 XHTML”，专门包含那些由“XHTML 模块化”定义的元素。因此，HTML 4 和 XHTML 1.0 中不推荐使用的元素不能在 XHTML 1.1 中使用。XHTML 1.1 的模块如下 [20 :

结构模块:body、head、html、title
文本模块:abbr，acronym，address，blockquote，br，cite，code，dfn，div，em，h1，h2，h3，h4，h5，h6，kbd，p，pre，q，samp，span，strong，var
超文本模块:a
列表模块:dl、dt、dd、ol、ul、li
对象模块:object，param
展示模块:b、big、hr、i、small、sub、sup、tt
编辑模块:del，ins
双向文本模块:bdo
表单模块:button、fieldset、form、input、label、legend、select、optgroup、option、textarea
表格模块:caption、col、colgroup、table、tbody、td、tfoot、th、thead、tr
图像模块:img
客户端图像映射模块:area，map
服务器端图像映射模块:img上的ismap属性
内在事件模块:事件属性
元信息模块:meta
脚本模块:noscript，script
样式表模块:style元素
样式属性模块(已弃用):style属性
链接模块:link
基本模块:base

前面模块的描述，它们的元素和属性，以及它们的最小内容由“XHTML 的模块化”19 定义。

清单 3-6 展示了一个 XHTML 1.1 框架文档。

***清单 3-6。*一个 XHTML 1.1 框架文档

XHTML 1.1 sample document title

XHTML 1.1 sample document body

XHTML 1.1 也可以用在混合名称空间文档中，以支持数学标记和矢量图形(参见“XTHML+MathML+SVG”)。

XHTML 2.0

XHTML 2.0(也称为 XHTML 2)可能是下一代标记语言，是 XHTML 1.0 和 1.1 的继任者。然而，它仍处于工作草案阶段，从未成为一项建议。

虽然 XHTML 2.0 有一些早期标记语言的元素，但是它有向后兼容性的问题。尽管如此，熟悉 XHTML 1.0 和 1.1 的编码人员可以轻松开发 XHTML 2.0 文档。

“XHTML 模块化”指的是 XHTML 2.0 不仅仅是另一种标记语言，而是一种 XHTML 宿主语言 [19 。它由具有元素和属性的模块组成。然而，与“XHTML 的模块化”相比，XHTML 2.0 中有几个更新的模块。

在其暂停之后，几个原本打算包含在 XHTML 2.0 中的特性(除了重要的文本和超链接模块之外)正在由 W3C 内部的独立工作组开发。这些技术包括访问、RDFa、角色、XForms 或 XML 事件。

HTML5

HTML5 最初是由来自苹果、Mozilla 基金会和 Opera Software 的个人提出的，被称为 Web 超文本应用技术工作组 ( WHATWG ) [21 。后来，W3C 注意到了 WHATWG 的提议，并宣布重新开始 HTML 规范的工作。WHATWG 发现 XHTML 2.0 过于以文档为中心，因此不适合博客、论坛、网络商店和多媒体网站。他们主要关心的是为动态 web 应用创建一个平台。

尽管名字有点复杂， HTML5 不仅仅是另一种 HTML 语言。它经常在 web 应用的上下文中使用。它是 HTML 的完全重构，具有新的功能。尽管如此，HTML5 被设计成向后兼容旧的浏览器。此外，HTML5 使用与 HTML 和 XHTML 文档都兼容的 HTML 语法。但是，不支持处理指令。除了众所周知的文本/html 媒体类型之外，还可以使用一种称为text/html-sandboxed的新媒体类型，这使得在不将内容提供给网站其余部分的情况下解释文件成为可能。由于一种分离创作和呈现一致性需求的新方法，不再需要废弃的标签。

在未来几年，当早期的浏览器版本仍然存在时，HTML5 支持可能是至关重要的。存在诸如“HTML5 测试”的服务，其在打开它们的浏览器中检查 HTML5 支持 [24 ]。至于标记贡献者，W3C 测试网页上提供了一些测试，在那里可以查看当前的测试，并提交新的测试 [25 ]。

HTML5 不仅强烈关注标记中的结构和多媒体元素，还关注应用编程接口(APIs 因此，具有一些编程知识的 web 开发人员可以为他们的 web 站点开发应用。HTML5 应用是可访问的和独立于设备的，代码可以很容易地重用。此外，与传统的过程式编程相比，这些 web 应用需要声明式编程(因此需要更少的代码)。然而，很大一部分 HTML5 功能可以通过使用其他技术来实现，包括 CSS3、服务器端脚本、JavaScript 转换、Java 或 XSLT。

清单 3-7 显示了一个 HTML5 框架文档。

***清单 3-7。*一个 HTML5 框架文档

Sample HTML5 document

Document sample

Article1

The first article of the document.

Article2

The second article of the document.

` ` `

HTML5 还支持外部词汇，如可缩放矢量图形(SVG)和 MathML，这两种词汇都可以直接嵌入到 HTML5 标记中。例如，SVG 图像可以嵌入在<svg>和</svg>标签之间，如清单 3-8 所示。

***清单 3-8。*直接在 HTML5 中嵌入 SVG

<svg > <rect stroke="black" fill="blue" x="50px" y="50px" width="300px" height="150px" stroke- width="2"> </svg>

MathML 方程可以类似地嵌入。这些元素也可以嵌套起来用于更复杂的内容 [27 ]。

Images 注意与普遍的误解相反，HTML5 还不是一个标准！该规范的不同模块处于不同的开发阶段，您可能会看到误导性的标签，如“生活标准”，其中大部分仅指相应的模块。根据 W3C 的预期，HTML5 很可能会在 2014 年成为 W3C 的推荐标准 [ 28 ]。

XHTML5

在 HTML5 中，开发人员可以自由选择风格，因为 HTML5 可以用 HTML 或 XML 语法编写。在后一种情况下，该标记称为 XHTML5。XHTML5 是 HTML5 的 XML 序列化。HTML5 规范描述了语法。但是，不要混淆，因为 XHTML5 是 XML 的应用。换句话说，HTML5 和 XHTML5 拥有相同的词汇，但解析规则不同。

使用 HTML5 规范定义的元素和属性的文档可能被写成有效的 XML 文档。这种标记通常被称为多语言，它是同时是 HTML5 和 XML 文档的文档的重叠语言。如果一个 web 文档是一个有效的 HTML 文档和一个格式良好的 XML 文档，并且在作为 HTML 处理和作为 XML 解析时生成相同的 DOM，那么该 web 文档的标记可以被认为是多语言标记。HTML5 和 XHTML5 序列化是交叉兼容的。但是，XHTML5 有更严格的语法。此外，XHTML5 的某些部分(如处理指令)在 HTML5 中是无效的。

清单 3-9 显示了一个 XHTML5 框架文档。

⁵ 除了那些 HTML 和 xml 解析器生成不同 DOM 的 XML、xmlns 和 xlink 属性，例如xml:lang, xml:space, xml:base, ", and xlink:href.

***清单 3-9。*一个 XHTML5 框架文档

An XHTML5 example

Document sample

Article1

The first article of the document.

Article2

The second article of the document.

标示语法

虽然相似，但 HTML(直到版本 5)和 XHTML 的标记有一些相当大的差异。我们将在这里检查主要的。

HTML 语法

各个标记组件被称为元素。在 HTML 中，在被称为标签的尖括号中提供的关键字界定了它们所应用的文档片段。元素应该有一个开始标签和一个结束标签，如清单 3-10 所示。

***清单 3-10。*开始和结束标签的伪代码

**<element_name>** element_content **</element_name>**

开始标签包含元素的名称，用尖括号括起来(以<element>的形式)。诸如外观、行为或功能等元素特征由开始标签上指定的可选属性(图 3-1 )决定。它们由空格隔开。

images

图 3-1。 HTML 元素结构

为了区分结束标签和开始标签，结束标签在开角括号后有一条斜线(形式为</element>)。例如，一个简单的 HTML 段落看起来像清单 3-11 。

***清单 3-11。*HTML 中的一个简单段落

**<p>**A simple paragraph.**</p>**

这些元素可以通过指示连贯的部分，如标题、段落、列表、表格、图像嵌入、表格等，为 web 文档提供结构和含义。

用于呈现文档的浏览器的默认样式表决定了默认外观。然而，默认外观可以被外部样式表任意覆盖，这将在我们讨论级联样式表(CSS)时讨论。

HTML 中的两个特殊标签不同于所有其他标签。可以通过标签添加注释。文档类型可以由<!DOCTYPE>标签定义(参见本章后面的“文档类型声明”一节)。

XHTML 语法和限制

HTML 和 XHTML 语言的元素和属性集在很大程度上是重叠的，大多数 HTML 元素都可以在相应的 XHTML 1.0 版本中使用(XHTML 1.0 Transitional 中的 HTML 4.01 Transitional 元素和 XHTML 1.0 Strict 中的 HTML 4.01 Strict 元素)。但是，XHTML 规范中引入的一些元素可以排他地应用于 XHTML 中(比较表 3-7 中各种标记语言版本的元素)。早期的 HTML 和 XHTML 版本之间的主要区别是，XHTML 比 HTML 更严格，并且它是可扩展的，而 HTML 不是。 ⁶ 随着最新标记版本 HTML5 和 XHTML5 的引入，HTML 和 XHTML 词汇表之间的差异完全消失了，因为 HTML5 具有与 XHTML5 完全相同的元素和属性。

通过理解有效的 HTML 和 XHTML 标记之间的区别，您向网站标准化迈出了重要的第一步。事实上，这些要点不仅可以作为有效 XHTML 标记的基础，还可以作为可访问性和语义符号的基础。这些规则是创作同时向后和向前兼容的 web 文档的关键。

⁶4.01 版本之前。从 HTML5 开始，外部词汇表，如 SVG 和 MathML，也可以在 HTML 中使用，您将在后面看到。

格式良好

格式良好是 XHTML 中的一个基本概念。所有元素都必须关闭。嵌套应该按照正确的顺序进行(列表 3-12 )。XHTML 中的重叠元素是不正确的(清单 3-13 )。

***清单 3-12。*恰当地嵌套元素

**<p>**Part of this **<strong>**bold text should be **<em>**italic as well**</em></strong>.</p>**

***清单 3-13。*重叠元素(不正确)

<p>Part of this <strong>bold text should be <em>italic as well</strong></em>.</p>

名字是小写的

因为 XML 是区分大小写的，所以所有的 XHTML 元素和属性名都必须是小写的。

所需的结束标签

在 HTML 中，可以省略几个元素的结束标签，这在 XHTML 中是不允许的(清单 3-14 和 3-15 )。

***清单 3-14。*正确关闭元素

This is the first paragraph.

This is the second one.

***清单 3-15。*XHTML 中未终止的元素不正确

<p>This is the first paragraph. <p>This is the second one.

所有在 DTD 中声明为空元素 ( meta、link、br、hr、img、input)的元素都可以用结束标记(类似于非空元素)或简写符号来结束；换句话说，在声明结束前插入一个空格和一个斜杠字符，如清单 3-16 所示

***清单 3-16。*用速记符号结束元素的伪代码(自结束)

<element_name attrib1="value*1*" … attribn="value*n*" />

这提供了更短的代码。虽然空格是可选的，但它应该是首选的，因为结果更容易阅读(清单 3-17 )。没有结束标签的标签也被称为自闭标签。

***清单 3-17。*终止空元素

<br **/**>

在 XHTML 中，所有未终止的元素都是不正确的，包括未终止的空元素(清单 3-18 )。

***清单 3-18。*未终止的空元素在 XHTML 中不正确

<br> unterminated elements are incorrect in XHTML <hr>

根据参数的数量和元素的行为,script元素可以应用于完整的形式(带有结束标签)或简写符号。

引用的属性值

所有属性都必须包含 XHTML 中的值。所有属性值都必须用引号括起来(清单 3-19 )。XHTML 中不允许使用不带引号的属性值(清单 3-20 )。

***清单 3-19。*正确定义 XHTML 属性

<input **type="checkbox" name="checkbox" id="checkbox" value="True" checked="checked"** />

***清单 3-20。*未加引号和最小化的属性(在 XHTML 中不正确)

<input **type=checkbox name=checkbox id=checkbox value=True checked** />

无属性最小化

属性-值对必须写完整(清单 3-21 )。XHTML 不支持属性最小化(清单 3-22 )。属性名如compact和checked不能在没有指定其值的元素中使用(表 3-3 )。

***清单 3-21。*属性要写全

<option value="eng" **selected="selected"**>English</option>

***清单 3-22。*最小化属性(在 XHTML 中不正确)

<option value="eng" selected>English</option>

Images

空白处理

在 XHTML 中，开头和结尾的空白字符被去除。

与 HTML 不同，XHTML 属性值中的空白字符被规范化为单个空格。根据 XML 规范，单个单词间空格(#x20)被附加到空白字符序列(#x20、#xD、#xA、#x9 ) [30 )。

使用脚本和样式元素

虽然script和style HTML 元素的内容类型是字符数据(CDATA)，但它是 XHTML 中经过处理的字符数据(#PCDATA)。script和style元素用#PCDATA 内容定义；换句话说，<被处理为标记代码的开始，而<被识别为一个实体(清单 3-23 )。

***清单 3-23。*未转义的脚本内容

<script type="text/javascript"> <![CDATA[ unescaped script content ]]> </script>

XML 处理器识别这些 CDATA 部分。它们在文档对象模型中表示为节点。

或者，可以使用外部脚本文件/样式表文件，消除对非转义脚本或样式内容的需要。

标识符

XHTML 中应该使用 id 属性作为标识符，而不是 HTML 4 中定义的name属性。

当在元素a、applet、form、frame、iframe、img和map上定义片段标识符时，XHTML 文档必须使用id属性。这确保了 XML 所需的良好结构。

元素禁止

在 XHTML 中，元素不能任意嵌套。那些不熟悉 XHTML 的人经常会犯嵌套错误。嵌套规则不应该与重叠混淆，重叠在 XHTML 中是严格禁止的。XHTML 1.0 的嵌套规则类似于 HTML 4.01。但是，也有一些不同之处。在 XHTML 中table元素可以直接包含一个tr元素，这在 HTML 中是不允许的。在这种情况下，tbody元素隐含在 HTML 中，而不是 XHTML 中。这种行为在某些情况下很重要，比如在 web 页面的 CSS 中将tbody用作选择器。表 3-4 总结了那些 XHTML 中不允许的父子元素关系。

Images

此外，XHTML 规范中的描述定义了一些嵌套限制。因此，当应用 XHTML 文档类型时，一些嵌套违规不能被验证器识别，而当使用 HTML 时，错误可以被清楚地识别。

与 HTML 不同，如果不将文本包装在容器元素(比如 p)中，就不能在 XHTML 主体中直接提供文本。这种尝试通常会在 W3C 标记验证器中导致错误消息“此处不允许字符数据”(第十四章)。

无效字符

旧的 HTML 文档，尤其是在网络出现的第一个十年中编写的文档，通常充满了字符实体。这不仅适用于那些用来表示非拉丁字符的文档，也适用于那些包含特殊字符的文档，如版权符号( )或注册商标符号()。这些实体应该在 XHTML 中消除(除了少数特殊字符的情况，如前所述)。强烈建议在 UTF-8 编码中直接使用字符。

注释中的破折号受到限制

双破折号只能出现在 XHTML 注释的开头和结尾(清单 3-24 )。

***清单 3-24。*XHTML 中的一个评论

避免使用不推荐使用的元素

尽管在某些 XHTML 版本和变体中也可以使用大量的 HTML 元素(如前所述)，但是blackface、blockquote、embed、layer、noembed和shadow这些不推荐使用的元素却不能。除了内容可以提供object的embed和noembed外，都可以用样式表代替。而且，有些元素在 XHTML 1.0 Transitional 和 XHTML 1.0 Frameset 中是允许的，但在 XHTML 1.0 Strict 中却不能使用(表 3-5 )。

Images

虽然在 XHTML 1.0 Strict 和 XHTML 1.1 中menu元素被替换为ul元素(或者在 XHTML2 中为nl，但是在 XHTML5 中可以再次使用。

最有争议的元素是i和b，它们没有被否决，可以在每个 XHTML 版本中分别用于创建斜体和粗体文本。然而，它们纯粹是表示性的元素，没有结构意义。尽管大多数用户代理呈现适当的结构元素(em 和strong)与基本字符格式化元素i和b相似，但是em和strong是优选的。

应用大多数或所有 XHTML 版本和变体支持的最严格的 XHTML 元素集是一个好的实践。当然，也可以使用新版本(如 XHTML5)中引入的新元素，但前提是浏览器支持变得足够并得到验证。

一般来说，XHTML 1.0 严格的手工编码人员也可以很容易地学习和应用其他 XHTML 文档类型，因为它们消除了过时的元素。

避免不赞成使用的属性

在 XHTML 中，一些 HTML 属性已经被弃用，取而代之的是其他属性或样式表(表 3-6 )。

Images

数据类型

可以在元素内容和属性值中使用的数据类型是由 dtd 和所用标记语言的规范定义的。虽然许多元素和属性允许大多数 Unicode 字符(如p、div和 section 元素)，但也有一些元素和属性有特定的限制。显然，a元素的href属性中的链接必须包含有效的 URL 或文件路径(清单 3-25 )。了解允许的值对于提供有效的属性值非常重要。例如，img元素的width属性应该是一个用数字表示的值，可以有也可以没有单位px或%，不能在任何单位中(清单 3-26 )。

**清单 3-25。**属性值中正确和不正确的 URL

<a href="http://www.example.com/about/">  <a href="contact.htm">  <a href="a**;**b.html"> 

***清单 3-26。*正确和不正确的Width属性值

<img src="img/logo.png" width="128" height="128" alt="logo" />  <img src="img/logo.png" width="100px" height="100px" alt="logo" />  <img src="img/logo.png" width="78**pt**" height="64**pt**" alt="logo" /> 

由于多种原因，字符在某些数据类型中可能是非法的，例如，它们被保留或不安全。

HTML 元素和属性可以包含各种数据类型，例如大小写信息、SGML 基本数据类型、文本字符串、URIs、颜色、长度、内容类型、语言代码、字符编码、单个字符、日期和时间、链接类型、媒体描述符、脚本数据和样式表数据 [31 ]。

核心标记元素内容值和属性值的语法源自 SGML 标记，如下所示:

PCDATA :解析后的字符数据。混合内容；换句话说，一个元素可以包含任意数量的字符数据和/或任意顺序的子元素。

⁷ 它仅在某些元素上被弃用(例如，不能在 td 上使用，但在img上允许)。

CDATA :字符数据。文件字符集中的一个字符序列，可以包括字符实体。CDATA 属性值不应包含前导或尾随空白字符。用户代理用字符替换字符实体，用单个空格替换回车和制表符，并在解释 CDATA 属性值时忽略换行符。对于script和style元素，CDATA 部分被视为原始文本，并按原样向前传递。结束标签的开始分隔符</被认为是元素内容的终止符。
NAME，ID :标识符令牌，必须以字母(A–Z，a–z)开头，后面可以跟任意数量的字母、数字(0–9)、连字符(-)、下划线(_)、冒号(:)和句点(.)
数字:最少包含一位数字(0–9)的令牌。

它们已经在 ISO 8879 标准 [32 ]中引入，它们决定了在标记属性中使用的数据类型的允许值，比如 URL、文本、数字等等。

PCDATA 和 CDATA 数据类型主要用于 XML 应用和序列化，包括 XHTML、RSS、Atom 等等(第七章)。SGML 和 XML 文档类型定义文件也使用 PCDATA 和 CDATA 进行标记声明。

Images 小心在 HTML 中，<![CDATA[...]]>是一个伪评论；即，字符序列]]>被认为是常规字符数据。在 XHTML 中，<![CDATA[...]]>是 CDATA 节；换句话说，字符序列]]>应该是 CDATA 段的结束标记。否则，将导致格式良好性错误。

自然，现代标记语言中有更多的数据类型。HTML5 的基本数据类型如下:

文本:Unicode 字符序列，不包含U+0000字符、除空格字符之外的控制字符或任何永久未定义的 Unicode 字符。
字符串:文本和字符引用的任意混合。
Token :不带空格字符的字符串。
浏览上下文名称:不以下划线(_)字符开头的字符串，长度至少为一个字符。
浏览上下文名称或关键字:一个字符串，可以是浏览上下文名称，也可以是下列字符串之一:_blank、_self、_parent或_top。
ID :不含空格字符的字符串，长度至少为一个字符。
Name :不含空格字符的字符串，长度至少为一个字符。
哈希名引用:以#字符开头的字符串。
数字:整数、正整数、非负整数、浮点数、正浮点数、非负浮点数。
日期和时间:RFC 3339 中定义的日期时间，附加约束条件是文字字母 T 和 Z 必须始终大写，日期+整年被描述为四位或更多位表示大于 0 的数字。
URL:RFC 3987 中定义的有效 IRI 引用。
MIME 类型:标识 RFC 2046 定义的有效 MIME 媒体类型的字符串。
字符编码名称:对 IANA 注册中心的名称或别名进行编码的字符。
元字符集字符串:由以下部分组成的字符串(按此顺序):文字字符串text/html;，一个或多个可选空格字符，文字字符串charset=，字符编码名(HTML5)或字符串UTF-8 (XHTML5)。
刷新值:非负整数或包含非负整数的字符串、;字符、一个或多个空格字符、字符串url=，最后是 URL(按此顺序)。
默认样式名:字符串。
媒体查询列表:W3C 规范“媒体查询” 33 中定义的媒体查询列表。
语言标签:BCP 47[34 中定义的语言标签。
键标签列表:一组有序的唯一空格分隔的标记，每个标记的长度正好是一个 Unicode 码位。
Dropzone 值:一组无序的唯一空格分隔标记，每个标记都是值copy、move或link中的一个，或者是最少三个字符的任意字符串，以文字字符串s:(普通 Unicode 字符串)或f:(文件项)开头。默认值为copy。
Functionbody :根据 ECMA 262，是 Functionbody 产品的任何 JavaScript 代码。
坐标:矩形坐标(四个整数)，圆坐标(两个整数和一个非负整数)，或者多边形坐标(最少六个整数)。
沙盒允许关键字列表:一组无序的唯一空格分隔标记，可以是文字字符串allow-forms、allow-scripts、allow-top-navigation或allow-same-origin。
Pattern :正则表达式，是根据 ECMA 262 的 JavaScript 模式产品。
电子邮件地址:匹配 ABNF 产品1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )的任何字符串，其中atext如 RFC 5322 中所定义，ldh-str如 RFC 1034 中所定义。
Color :一个正好 7 个字符长的字符串，以一个#字符开始，后面是范围0–9、a–f和A–F中的 6 个字符。

标记元素

HTML 的各种版本和变体提供了一组不同的元素；换句话说，它们有不同的词汇，尽管有很大程度的重叠(表 3-7 ，不包括历史版本)。

HTML 的早期版本引入了基本的标记元素，后来的版本逐渐扩展了元素集。一些元素随着时间的推移变得过时并且被废弃、⁸移除或替换。此外，新规范通常会引入新元素。HTML 3.2 规范中列出的元素有 70 个 [35 ]，HTML 4.01 中有 91 个 [36 ]，HTML5 中有 100 多个 [37 ]。

HTML 的过渡、框架集和严格风格的元素与 XHTML 的对应元素有很大的相似之处。XHTML 1.0 框架集是 HTML 4.01 框架集的 XML 等价物，HTML 4.01 框架集是提供框架集文档定义的文档类型，是 20 世纪 90 年代后期常见的 web 功能。XHTML 1.0 Transitional 是 HTML 4.01 Transitional 的 XML 等价物，这种文档类型包括表示元素，如center和font，它们被排除在严格变体之外。XHTML 1.0 Strict 是 HTML 4.01 Strict 的 XML 等价物，它严格地包括那些没有被否决的元素。

各种 XHTML 版本和变体提供了一组不同的元素。XHTML 1.0 Transitional 中有 89 个元素，XHTML 1.0 Frameset 中有 92 个，XHTML 1.0 Strict 中有 78 个，XHTML 1.1 中有 83 个，XHTML 2.0 中有 99 个，XHTML5 中有 100 多个(与 HTML5 相同) [38 ]。XHTML 1.0 中已经不推荐使用applet、basefont、center、dir、font、isindex、menu、s、strike、u元素。因此，它们可以在 XHTML 1.0 Transitional 或 XHTML 1.0 Frameset 中使用，但不能在 XHTML 1.0 Strict 或更高版本中使用。 ⁹ 这个重要的事实，十几年来很多应用 HTML4 或者 XHTML 1.0 的过渡变体的开发者都没有理解。一个过渡变体，即使写得没有错误，也允许包含在规范中已经被弃用的过时元素，目的是表明这些元素将从未来的标记版本中删除，因此不应该使用。换句话说，数以百万计的网站直到最近还在使用一种标记，这种标记允许在 HTML 4.01 中已经过时的元素！

XHTML 1.0 Strict 和 XHTML 1.1 有一组非常相似的元素。最重要的区别是 XHTML 1.1 引入了 Ruby 元素并移除了access元素。在 XHTML 1.1 之前，使用的是 lang 属性(而不是今天首选的xml:lang)。在 XHTML 1.0 之前，锚点和客户端地图的name属性一直被使用，应该被 XHTML 1.1 中的id属性所取代。XHTML 1.1 的本质是元素被收集到模块，使得在资源有限的环境(例如移动设备)中应用完整元素集的子集成为可能，这被称为 XHTML 模块化(如本章前面所述)。

XHTML 2.0 有几个其他标记语言中没有的元素，即action、delete、di、dispatch、ev:listener、group、h、handler、insert、l、load、message、model、nl、output、range、rebuild、recalculate、refresh、repeat、reset、revalidate、secretXHTML 2.0 中引入了这些元素，但在(X)HTML5 中停止了。XHTML 1.1 中已经定义了少量的 XHTML 2.0 元素，有些已经包含在(X)HTML5 中，比如ruby，有些则被排除在外，比如rtc。基本元素源自早期版本。

HTML5 之前的 ⁸

唯一的例外是 HTML5 中再次允许的菜单，尽管有了新的含义。

如前所述，XHTML 的最新版本 XHTML5 拥有与 HTML5 相同的元素集。在过去十年中，标记元素和属性最重要的扩展是在(X)HTML5 中实现的，特别是因为新的结构化和多媒体元素不能在任何早期版本中使用。

Images

块与行内元素

为了提供对不同文档部分的完全控制，HTML 元素位于不同的级别。类似于文字处理器中使用的字符、段落和文档格式级别，HTML 提供了具有不同范围的标签。被称为行内元素的某些元素既可以应用于单个字符，也可以应用于字符串，比如字体特征、斜体或粗体文本、下标和上标。 ¹⁰ 它们通常放在包含文本和/或行内元素的段落(p)或分部(div)中。这些容器是构成 web 文档基本结构的块元素。这些元素也可以是其他块元素的容器。块级元素有自己的块边距、宽度和高度属性，可以独立于文档的其他部分进行设置(参见第五章)。块级元素通常在新的一行上呈现。相比之下，行内元素被视为文本流的一部分，不能有边距，不能有宽度或高度属性，并且可以换行。

在清单 3-27 中，标题下面的段落以新的一行开始，因为h1和p都是块级元素。段落中强调的文本(在<em>和</em>之间)是连续呈现的，并不从新行开始，因为em是一个行内元素。虽然div可能有边距(从 CSS 设置)，但em没有。

***清单 3-27。*块与行内元素

Attention

View our special offers now!

大多数可以在文档体中使用的 HTML 元素被分类为块级元素或行内元素。有一些元素可以在这两种上下文中使用(比如按钮、对象和脚本)。

专门用于字符格式化的过时的 HTML 元素应该被 CSS 所取代。(这些样式元素已经从严格版本和后来的所有其他版本中删除。)

块级元素

在 HTML5 中，以下元素被作为块级元素处理:article、aside、blockcode、blockquote、body、button、canvas、caption、col、colgroup、dd、div、dl、dt、embed、fieldset、figcaption、figure、footer、form、h1、h2、h3、h4、h4。 pre、progress、section、table、tbody、textarea、td、tfoot、th、thead、tr、ul、video。

行内元素

通常，行内元素只能包含文本或其他行内元素。它们通常在当前行中呈现。HTML5 的内联元素有a、abbr、address、area、b、cite、code、del、details、dfn、command、datalist、em、font、i、iframe、img、input、ins、kbd、label、legend、link、mark、meter、meter

可以是块元素或行内元素的元素

诸如button、del、iframe、ins、map、object和script之类的元素既可以用作块级元素，也可以用作行内元素。如果用作行内元素(例如，在另一个行内元素或段落中)，这些元素不应包含任何块级元素。

属性

HTML5 元素属性汇总在表 3-8 [39 中。

Images

全局属性和事件处理程序将在以下部分按类别进行描述。

全局属性

表 3-9 总结了适用于大多数元素的属性。

Images

虽然在 HTML 4 中也可以使用accesskey, class, dir, id, lang, style, tabindex,和title属性，但是在 HTML5 中它们的上下文和允许的值集被改变了。

窗口事件属性

HTML5 向 body 元素添加了几个属性，用于在浏览器窗口上执行操作。它们在表 3-10 中进行了总结。在 HTML 4 中，只能应用 onblur、onfocus 和 onload 属性。

Images

所有窗口事件属性都有一个脚本作为属性值。

表单事件属性

有几个动作与 HTML 表单相关联。用户可能会添加不正确的数据，错过所需的行，等等。表 3-11 总结了表单上使用的事件处理程序。

Images

注意，HTML5 不支持onreset属性。

键盘事件属性

网页功能也可以通过键盘激活，有三个属性可以应用于所有元素(表 3-12 )。

Images

鼠标事件属性

在图形用户界面时代，许多用户动作都是由定点设备触发的，定点设备通常是鼠标。在表 3-13 中描述的鼠标事件属性适用于所有 HTML5 元素。

触摸事件属性

表 3-14 总结了 HTML5 支持的触摸事件。

媒体事件属性

媒体事件属性适用于所有 HTML5 元素，但最常用于媒体元素，如audio、embed、img、object和video。它们在表 3-15 中进行了总结。

Images

HTML 文档结构

HTML 文档应用了一个独立于平台和语言的接口，称为文档对象模型 ( DOM )，使得将 HTML、XHTML 和 XML 元素作为对象引用成为可能 [40 ]。该模型为脚本 [41 ]提供动态内容访问和更新以及文档样式。DOM 可以被认为是一种使网页像应用一样运行的机制。DOM 可以被可视化为一个文档中标记元素层次的树形结构(清单 3-28 、图 3-2 )。

***清单 3-28。*一个结构良好的 HTML 文档

A DOM example ` `

Paragraph content

` ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/0302.jpg)

***图 3-2。**清单 3-28 的 DOM 树 *

不正确的结束元素——以及在许多情况下丢失的结束标记——会破坏 DOM 结构，这可能会产生严重的后果，从布局混乱到样式不正确。由于 web 浏览器内置的错误处理功能，许多这样的错误可能会在渲染时被即时纠正，但预期的结构只能假设。开发人员不应该依赖这种错误处理功能！

HTML 文档通常由文档类型声明、正式的公共标识符和将文档与适当的 DTD 相关联的链接组成，在文件的最开头按此顺序排列(HTML5 文档除外，它通常省略最后一项)。所有 HTML 文档都必须有一个html根元素 ¹¹ ，分别包含文档头和文档体 [43 ]。

文档头提供与整个文档相关的处理信息和元数据。背景、字体样式、边距和其他样式通常也在这里定义。

文档体保存文档的内容。例如，这可以包含简单文本、格式化文本、图像、视频、小程序或动态内容。块元素可以用div元素分组(图 3-3 )，而行内内容可以用span分隔。具有段落语义的文本应该由p元素提供。

在 HTML 的旧版本中，通常的结构看起来像清单 3-29 中的。

***清单 3-29。*文档结构达 HTML 4.01

Sample HTML document structure **

** **

Abstract

… first paragraph of main content …

** **

Overview

… second paragraph of main content …

** **

** **** `

即使 HTML 4.01 规范将它表示为可选的。

images

***图 3-3。*HTML 4.01 中的典型文档结构

在 HTML5 中有额外的、有意义的(语义的)结构化元素(图 3-4 )，所以 HTML5 文档的典型结构更加复杂和符合逻辑(清单 3-30 )。

***清单 3-30。*典型的 HTML5 文档结构

Sample HTML5 document structure ` ` **

Document structure sample

** **

Abstract

This sample document demonstrates the structure of HTML5 documents.

** **

Overview

HTML5 adds more semantics to the document stucture. Instead of using general purpose divisions, it provides meaningful elements.

** **

** **** ` ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/0304.jpg)

***图 3-4。*html 5 中的文档结构

HTML5 的新结构元素可以总结如下:

article:文章、博客帖子、论坛帖子等等
aside:侧边栏，如对文章的交叉引用
section:元素组(通常带有一个header和一个footer)
章节的标题(通常有一个标题和一个简短的概述)
hgroup:标题组的h1–h6元素，用于副标题、备用标题或标语
footer:整个页面或部分页面的页脚信息(因此，一个页面中可能会有更多的footer标签)
nav:导航元素

当然，并不是所有的结构化元素都能在所有的网页上使用，它们应该被相应地应用。

单据类型声明

由于标记语言有各种不同的版本，具有不同的特性，所以应该以不同的方式处理它们。如前所述，一种文档类型的元素不一定允许出现在其他文档类型中。因此，适当的呈现强烈依赖于所使用的文档类型的标识。

一个简单的解决方案是在文档的顶部声明文档类型，将它与正式定义的规范相关联。文档类型声明可以用一个形式公共标识符 ( FPI )和所谓的文档类型定义的 URI(DTD)来定义。这些 URIs 用于识别，它们不是超链接。这是一种机器可读的方式来表达“这个文档是 HTML”或“这个文档是 XHTML。”大多数 DTD 驱动程序文件是由万维网联盟提供的。

FPI 是人类可读的描述性名称，用于标识 HTML 版本，而 DTD 定义了 W3C 服务器上的.dtd文件(机器可读语法)的位置(该文件指定了文档类型应该遵循的规则)。

你可以在清单 3-31 中看到 HTML 文档类型声明的一般语法。注意 HTML5 有一个流线型的DOCTYPE，你会看到。

***清单 3-31。*文档类型声明的通用语法

`<!DOCTYPE root-element PUBLIC "FPI" Images
SYSTEM "URI"

`

根元素是html，因为它是 HTML 文件中最先打开和最后关闭的元素(参见“核心结构元素”)。

各种版本的 HTML 使用相似的语法(HTML5 除外):

HTML 2.0(历史，不再使用)<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
HTML 3.2(历史版本，不再使用)<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
HTML 4.0 过渡版(不应使用)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) "http://www.w3.org/TR/REC-html40/loose.dtd">
HTML 4.0 框架集(过时，不应使用)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) "-//W3C//DTD HTML 4.0 Frameset//EN">
HTML 4.0 严格版<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) "http://www.w3.org/TR/REC-html40/strict.dtd">
HTML 4.01 过渡版(不应使用)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 框架集(过时，不应使用)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) "http://www.w3.org/TR/html4/frameset.dtd">
HTML 4.01 严格版<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01+RDFa <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01+RDFa 1.1//EN" ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) "http://www.w3.org/MarkUp/DTD/html401-rdfa11-1.dtd">
HTML5 ( DOCTYPE不带 DTD)。与以前的基于 SGML 的 HTML 版本不同，HTML5 既不需要 FPI 也不需要对 DTD 的引用。文件类型可以由DOCTYPE声明<!DOCTYPE html>定义。由于 HTML5 的text/html序列化不是基于 SGML 的，HTML5 只为模式选择应用文档类型。<!DOCTYPE HTML>

核心结构要素

xHTML 文档必须包含一个元素，它是所有其他元素的父元素，即html元素。这个元素被称为根元素。在 HTML 2.0 规范中，它和另外两个基本结构元素head和body一起被标准化了。

html 根元素包含文档中的所有其他元素；换句话说，<html>开始标签和</html>结束标签界定了文档。

HTML 头

HTML 文档的头部是处理信息和元数据的容器。文档头应位于<head>和</head>标签之间，文档体之前。

HTML 头中的常见元素(每个元素都有一个示例)包括:

title元素(必需)<title>Document title</title>
元元素 ¹² (可选，一个或多个)<meta name="keywords" content="web standardization, valid XHTML5, valid ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) XHTML+RDFa, tableless CSS layout, W3C validation, WCAG, semantic web, ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) accessibility">
链接元素(可选，一个或多个)<link rel="stylesheet" type="text/css" media="all" href="alt2.css" ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) title="Alternate style 2">
脚本元素(可选，一个或多个)<script type="text/javascript" src="js/loading.js"></script>

文档正文是 web 文档的主要内容。它可能包含块元素和行内元素，包括但不限于纯文本和格式化文本、列表、标题、段落、分割、图像、对象、表单和表格。但是，某些禁止规定决定了哪些元素可以包含在其他元素中。

元素嵌套

为了维护逻辑文档结构，某些 HTML 元素不能包含所有类型的数据或元素。例如，表体和数据单元格等表的元素应该在表内；当用作行内元素时，ins元素不能包含块级内容，依此类推。有些元素不能包含其他同类的封闭元素(例如，form、label)。由某些元素分隔的内容只能是某种类型的数据(如script、style)。

某些嵌套规则需要内容类别的知识。在 HTML5 中，区分以下种类的内容 [44 ]:

元数据内容:决定页面内容的表现或行为，建立文档与其他文档的关系，或者提供附加信息的内容。
base，command，link，meta，noscript，script，style，title
流动内容:文档和应用主体中使用的大多数元素都称为流动内容。
a、abbr、address、area(作为一个map元素的后代)、article、aside、audio、b、
、bdi、bdo、blockquote、br、button、canvas、cite、code、command、datalist、del、details、
、dfn、div、dl、
、hgroup、hr、i、iframe、img、input、ins、kbd、keygen、label、map、mark、math、menu、meter、
、nav、noscript、object、ol、output、p、pre、progress、q、q。

12 详见第七章。

分节内容:定义页眉页脚范围的内容。
article，aside，nav，section
标题内容:定义一个节的标题的内容。
h1，h2，h3，h4，h5，h6，hgroup
语法内容:文档文本和段落中的元素。
a(仅含短语内容)、abbr、area(作为某map元素的后代)、
、audio、b、bdi、bdo、br、button、canvas、cite、code、command、datalist、del(仅含
短语内容)、dfn、em、embed、i、iframe、iframe。 meter、
、noscript、object、output、progress、q、ruby、s、samp、script、select、small、span、
、strong、sub、sup、svg、textarea、time、u、var、video、wbr和文本
嵌入内容:从外部资源导入的内容，或者直接嵌入到文档中的另一个词汇表的内容。
audio``canvas``embed``iframe``img``math``object``svg``video
互动内容:专用于用户互动的内容。
a、audio(仅具有controls属性)、button、details、embed、iframe、img、
(仅具有usemap属性)、input(仅当type属性未设置为
hidden)、keygen、label、menu(仅当type属性未设置为toolbar)、object、
(仅具有usemap属性)

最常见的元素可以嵌套如下:

html

Images head

Images title(必选)

Images script, style

Images CDATA

Images base, meta, link(空)

Images object

Images param(空)

Images 流量

Images body

Images ins, del

Images 流量

Images 块

Images 内嵌

Images script

Images CDATA

Images 块

Images address

Images 内嵌

Images article

Images header

Images 切片(article、aside、section)

Images aside

Images header

Images 切片(article、aside、section)

Images audio, video

Images blockquote

Images 块

Images script

Images CDATA

Images div

Images 流量

Images dl

Images dt

Images 内嵌

Images dd

Images 流量

Images fieldset

Images #PCDATA

Images 内嵌

Images 流量

Images legend

Images 内嵌

Images form

Images 除了封闭的form块

Images script

Images CDATA

Images footer

Images 流量

Images h1``h2``h3``h4``h5``h6,p

Images 内嵌

Images #PCDATA

Images a

Images 内联，除了一个封闭的a元素

Images button

Images 流程除a、button、fieldset、form、label、select、textarea外

Images abbr``b``bdo``cite``code``dfn``em``i``kbd``q``samp``small``span``strong``sub``sup``var

Images 内嵌

Images img，br(空)

Images input(空)

Images label

Images label除括label

Images map

Images area(空)

Images 块

Images object

Images param(空)

Images flow

Images script

Images CDATA

Images select

Images optgroup

Images option

Images textarea

Images header

Images hgroup

Images h1``h2``h3``h4``h5``h6(最少 2 个)

Images h1``h2``h3``h4``h5``h6

Images form

Images img

Images 流量

Images hr(空)

Images nav

Images header

Images 切片(article、aside、section)

Images noscript

Images 流量

Images pre

Images 内联除img、object、small、sub、sup

Images section

Images header

Images hgroup

h1、h2、h3、h4、h5、h6(最少 2 个)

Images h1``h2``h3``h4``h5``h6

Images form

Images img

Images 流量

Images footer

Images 切片(article、aside、section)

Images table

Images caption

Images 内嵌

Images colgroup

Images col(空)

Images thead，tbody

Images tr

Images th，td

Images 流量

Images ul，ol

Images li

Images 流量

理解了块级元素和行内元素之间的区别之后，嵌套元素就变得相当简单了。空元素，如img或hr，不能包含其他元素。有些元素不仅对元素有限制，而且对它们可以包含的数据类型也有限制(例如，脚本元素的内容应该是 CDATA)。违反元素的嵌套顺序可能会破坏文档的 DOM 结构，这使得呈现不可靠，危及网页的可用性。

XHTML 文档结构

XHTML 文档结构在某种意义上类似于 HTML，有头和主体部分；但是，还存在其他限制。因为 XHTML 文档也是 XML 文档，所以它们以 HTML 中未知的 XML 声明开始。此外，根据正在开发的 web 文档的主要目的，有几种文档类型和配置文件可供选择。

XML 声明

XHTML 文档的第一行通常是可选的 XML prolog(W3C 推荐使用它)。最常用的 XML 声明看起来像清单 3-32 中的。

***清单 3-32。*最常用的 XML 声明

<?xml version="1.0" encoding="utf-8"?>

声明前不允许有任何内容(可选的字节顺序标记除外)。

虽然字符编码只是可选的，但强烈建议使用。

一些较旧的浏览器不能处理 XML 声明。网页可能变得不可见，或者内容呈现不正确(例如，在 IE6 中)。IE7 忽略 XML prolog，并以严格模式正确呈现内容(在第一章的中讨论)。

单据类型声明

与 HTML 类似，XHTML 文档使用特定的文档类型声明 ¹³ 来标识正在使用的文档类型。

一般来说，将一个 XHTML 文档转换成另一个 XHTML 文档类型很简单，尤其是在专门应用 XHTML 1.0 Strict 元素的情况下。但是，由于规格之间的差异，在执行此类操作时必须小心。XHTML 1.0 Transitional 要宽松得多，更改这些文档的文档类型声明可能会导致大量错误，为了获得有效的 XHTML 1.0 Strict、XHTML 1.1 或 XHTML5 文档，应该调整这些错误。

直到最近，W3C 的前质量保证兴趣小组还维护着一个“文档类型声明推荐列表”45。尽管它可以被认为是“有效 dtd 的列表”，但它并不完整；因此，一些较新的以及最新的文档类型没有列出(例如，Mobile Profile、XHTML 2.0 或 XHTML+RDFa)，部分原因是该小组于 2007 年关闭。这并不影响此类文件的应用或验证。一些非 W3C 验证器使用前面的列表，如果使用了列表中缺少的文档类型，就会给出警告。

这种警告在许多情况下被认为是误报，因为一些较少使用的早期 dtd 以及最新的文档类型不在列表中。

各种 XHTML 版本和变体的文档类型声明总结如下:

XHTML5 之前的 13

一般文件
- XHTML Basic 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
- XHTML Basic 1.1 <!DOCTYPE html PUBLIC ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) "-//W3C//DTD XHTML Basic 1.1//EN" ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
- XHTML 1.0 过渡版(不应使用)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- XHTML 1.0 框架集(过时，不应使用)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
- XHTML 1.0 严格版<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- XHTML Basic 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
- XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
- XHTML 2.0 (XHTML2)(暂停[46)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN" ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) "http://www.w3.org/MarkUp/DTD/xhtml2.dtd">
- XHTML5 ( DOCTYPE不带 DTD) <!DOCTYPE html>
- XHTML+RDFa <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
手机档案
- XHTML 移动配置文件 1.0 <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
- XHTML 移动配置文件 1.1 <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN" ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd">
- XHTML 移动配置文件 1.2 <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
数学标记
- MathML 1.01 <!DOCTYPE math SYSTEM ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) "http://www.w3.org/Math/DTD/mathml1/mathml.dtd">
- MathML 2.0 <!DOCTYPE math PUBLIC "-//W3C//DTD MathML 2.0//EN" ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) "http://www.w3.org/TR/MathML2/dtd/mathml2.dtd">
- MathML 3.0 <!DOCTYPE math PUBLIC "-//W3C//DTD MathML 3.0//EN" ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) "http://www.w3.org/Math/DTD/mathml3/mathml3.dtd">
图形标记
- SVG 1 .0㎡t 0㎡
- SVG 1 .1 tiny .. . ??㎡
- SVG 1.1 basic±0±0
- SVG 1.1 全文
复合文档
- XHTML + MathML + SVG(使用 XHTML 作为宿主)<!DOCTYPE html PUBLIC ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
- XHTML + MathML + SVG(使用 SVG 作为宿主)<!DOCTYPE svg:svg PUBLIC ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">

XHTML 中的根元素

所有 XML 文档必须包含一个根元素，其语法如清单 3-33 所示。

***清单 3-33。*根元素的伪代码

**<root>** <child> <subchild>.....</subchild> </child> **</root>**

XHTML 文档的根元素必须是html。此外，根元素必须包含一个xmlns属性，以便将其与 XHTML 名称空间相关联。命名空间 URI 对于 XHTML 1.0 和 XHTML5 文档是[www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)，对于 XHTML2 文档是[www.w3.org/2002/06/xhtml2/](http://www.w3.org/2002/06/xhtml2/)。因此，最常见的 XHTML 名称空间声明类似于清单 3-34 。

***清单 3-34。*最常见的 XHTML 名称空间声明

<html **>** **XML 文档的自然语言通常由html元素 ¹⁴ ( 清单 3-35 )的xml:lang属性来标识。

***清单 3-35。*常用的xml:lang属性

<html **xml:lang="en">**

名称空间声明

除了默认的 XHTML 名称空间[www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)，还可以在 XHTML 文档中使用其他名称空间。例如，XHTML+RDFa 文档经常为语义标记使用额外的名称空间(更多细节，参见第七章)。在清单 3-36 所示的例子中，FOAF 词汇表规范的名称空间遵循默认的名称空间声明。

***清单 3-36。*附加名称空间声明

<html version="XHTML+RDFa 1.0" ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) **xmlns:foaf="http://xmlns.com/foaf/0.1/"** ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) xml:lang="en">

在混合名称空间的文档中，比如 XHTML + MathML + SVG，多个名称空间声明出现在整个文档体中(与前面在 head 部分声明的不同)。清单 3-37 显示了一个例子。

**清单 3-37。**复合文档的body中的名称空间声明

`

<svg:svg version="1.1" Images
xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

虽然经常使用，但这只是识别 XML 文档语言的众多选项之一(见第四章)。

XHTML 头

XHTML 文档的标题可以用和 HTML 完全一样的方式写，也就是在开始和结束标签之间(清单 3-38 )。

清单 3-38。 XHTML 文档标题

**<title>**Title of the sample XHTML document**</title>**

像在 HTML 文档中一样，meta、link和script元素可以在 XHTML 文档的 head 部分提供。然而，在 XHTML 中，这些元素(以及所有其他元素)应该是封闭的。这些空元素应用 XHTML 速记符号(自结束)(清单 3-39 )。

***清单 3-39。*XHTML 中的自结束链接元素

<link rel="stylesheet" type="text/css" media="all" href="alt2.css" ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) title="Alternative style 2" />

在下面的例子中，title属性被用来指示搜索引擎显示在哪里可以找到德语和匈牙利语版本的原始英语文档(清单 3-40 )。xml:lang属性声明目标文档的语言。

***清单 3-40。*链接到同一文档的其他语言版本

`
The document in English
<link title="Das Dokument auf Deutsch"
rel="alternate"
href="http://example.com/german/" />
xml:lang="de"
<link lang="hu" title="A dokumentum magyarul"
rel="alternate"
xml:lang="hu"
href="http://example.com/hungarian/" />

被指定为链接目标的页面的字符编码可以由charset属性声明。

media属性指定链接适用的媒体。表 3-16 总结了可能的值。

清单 3-41 显示了为三种不同媒体类型(all、handheld、print)编写的三种不同样式表的例子。

***清单 3-41。*不同媒体类型的 CSS 文件

`<link rel="stylesheet" type="text/css" media="all" href="main.css" Images
title="Default style" />

rel属性(代表关系)是一个用空格分隔的一个或多个值的列表，指定当前页面和目标资源之间的关系(清单 3-42 )。可能的值有alternate、appendix、bookmark、chapter、contents、copyright、glossary、help、index、next、prev、section、stylesheet和subsection。

***清单 3-42。*属性rel的应用示例

`<link rel="alternate" type="application/rss+xml" title="New feed of example page" Images
href="http://www.example.com/rss.xml" />

` ` `

可以类似地确定文档的作者(清单 3-43 )。

***清单 3-43。*作者链接

<**link rel="author"**> href="http://www.example.com/" />

收藏夹图标(favicon^{15T5)，默认为 16x16 像素的正方形图标，可以通过shortcut icon或icon链接(清单 3-44 )来确定。第一种是所有浏览器都支持的；但是，它并没有在 HTML 规范中声明。}

***清单 3-44。*链接到网站的图标

<**link rel="shortcut icon"** href="favicon.ico" type="image/x-icon" />

尽管默认的图像格式是 ICO，但现代浏览器也支持其他格式，如 PNG、动画 PNG、JPEG、GIF、动画 GIF 和 SVG。它们可以以列表 3-45 所示的形式使用。

***清单 3-45。*链接示例为rel="icon"

`<link rel="icon" type="image/vnd.microsoft.icon"> href="http://www.example.com/image.ico" />

<link rel="icon" type="image/png"> href="http://www.example.com/image.pgn" />

<link rel="icon" type="image/gif"> href="http://www.example.com/image.gif" />`

Images 提示由于属性值图标直到 HTML5 和浏览器支持变化后才被标准化，所以用shortcut icon和icon属性值声明同一个图标文件是一种常见的做法。

文件大小也可以是 32x32 或 48x48 像素，颜色深度为 8 位、24 位或 32 位。然而，由于不同的浏览器支持，favicon 的首选格式是网站根目录中提供的事实上的文件名和类型( favicon.ico )。请注意，分辨率和色深越大，下载时间就越长。文件大小应该保持在合理的范围内(详见第九章)。

属性也经常在其他上下文中使用。例如，微格式rel="license"、rel="nofollow"和rel="tag"在(X)HTML 元素上提供了各种元数据，最常见的是在a元素上。一般来说，它们是文档主体的一部分，但用于特定的目的；因此，稍后将在第七章的中对其进行描述。

在 XHTML 文档的 head 部分，除了默认的 XHTML 名称空间之外，还可以使用其他名称空间的属性值。清单 3-46 显示了一个例子。

¹⁵ 也称为书签图标、URL 图标、快捷方式图标或网站图标

***清单 3-46。*链接到额外的名称空间

<**link rel="foaf:primaryTopic"** type="application/rdf+xml" title="FOAF" ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) href="http://www.example.com/metadata/foaf.rdf" />

在这种情况下，还需要 FOAF 名称空间来使foaf:primaryTopic有意义。附加名称空间的声明应该在html元素上提供，如前一节所述(清单 3-36 )。

XHTML 正文

从文档结构的角度来看，XHTML 文档体类似于 HTML 体。但是，XHTML 区分大小写。因此，JavaScript 事件处理程序onload不能用 HTML 中使用的 camel case 符号 onLoad 来编写。它应该是小写的(清单 3-47 )。

***清单 3-47。*XHTML 中区分大小写的事件处理程序

<body **onload="function();"**>

从 HTML 转移到 XHTML

web 标准化组织的一个常见任务是将 HTML 文档转换成 XHTML。然而，随着 HTML 全新系列的发布，越来越多的 web 开发人员打算使用 HTML5。 ¹⁶ 使用更严格的标记有几个原因。虽然在升级到 XHTML 时对 HTML 文档所做的一些更改很简单，但是这两种格式在特性和行为上有很大的不同，需要加以考虑。由于 XHTML 是 HTML 4 作为 XML 应用的重新表述，因此它可以作为一种符合 XML 的语言使用，并具有所有附带的好处:

严格标记:与 HTML 不同，XHTML 遵循严格的约定。因此，没有丢失的结束标记、重叠的元素或不必要的属性，只有纯代码。XHTML 格式良好，易于编写、解释和阅读。内容和风格是分开的。
新标记的简单引入:通过 XHTML 模块可以很容易地添加新元素和属性。
XML 一致性:因此，它们很容易用标准的 XML 工具来查看、编辑和验证。
DOM 选择:applet 和脚本，以及其他应用可以应用 HTML 文档对象模型或 XML 文档对象模型。
互操作性:随着 web 标记语言的发展，符合 XHTML 约定的文档将更有可能在未来不同的用户代理之间进行互操作。

此外，通过适当的标记可以确保向后和向前的兼容性。

重要的是要记住，HTML5 也可以用 XML 风格的语法编写，称为 XHTML5，它使用相同的词汇，并提供格式良好的 XML 文件。

特定的标记语言

除了通用的 HTML 和 XHTML 标记语言之外，还有更具体的语言，如表示矢量图形(SVG)、数学注释(MathML)、多媒体演示(SMIL)或与其他媒体同步的文本信息的语言(TTML [47 )。这种语言的词汇要么用在特定的文件类型中，要么嵌入在通用标记中。以下部分提供了 SVG 和 MathML 的概述。

SVG

与浏览器多年来处理的 GIF、PNG 或 JPEG 等光栅图形格式相反，直到 HTML5 的引入，矢量图形的原生支持才出现。虽然 1998 年出现了矢量标记语言 ( VML )和精确图形标记语言 ( PGML )，但很快在 1999 年又出现了可缩放矢量图形(SVG)；然而，实施者不得不等待十年。

SVG 是一种基于 XML 的标记，用于描述二维静态和动态(动画或交互式)矢量图形 [48 ]。第一个版本 SVG 1.0 在 2001 年成为 W3C 推荐标准，随后在 2003 年成为 SVG 1.1。除了完整版，SVG 还有一个微小的规范和一个为移动设备优化的基本规范 [49 ]。它们被描述为 SVG 1.1 的概要文件。SVG Tiny 1.2 在 2008 年成为 W3C 的推荐标准。SVG 1.2 的完整版本在工作草案阶段被搁置，取而代之的是 SVG 2.0，这是一个全新的版本，对 HTML5、CSS3 和 Web 字体提供了高级支持(第九章)。由于(X)HTML5 中的原生 SVG 支持以及越来越多的浏览器支持，SVG 格式逐渐流行起来。¹⁷Internet Explorer 9+、Firefox 3.5+、Safari 3.1+和 Opera 9.5+具有原生 SVG 渲染和嵌入支持，不需要 SVG 图像插件。

Images 注意现代浏览器对 SVG 的支持不需要显示 SVG 的插件，每种嵌入方法(内嵌、通过img、通过object)和特性(SVG 效果、SMIL 动画中的 SVG、SVG 过滤器、CSS 背景中的 SVG 和 SVG 字体)都不一样。

大多数支持 SVG 的浏览器不呈现 SVG 文件，除非它们是作为 image/svg+xml 提供的。嵌入式 SVG 文件最常见的呈现错误是它们使用了不正确的 MIME 类型。

SVG 适用于徽标、图形、地理信息系统等等。SVG 格式的主要优点可以总结如下:

可访问性:图像通常会被移动用户以及视障人士放大。SVG 图像是可缩放的，没有失真或质量损失。此外，在 SVG 中，文本被呈现为文本。也可以开发对象的文本等价物。
最佳文件大小:尽管这取决于图像内容的复杂性，但 SVG 文件通常比位图文件小。
可脚本性:SVG 图像的所有特性都可以通过 JavaScript 和 DOM 来操作。
动画 : SVG 元素和元素组也可以在没有脚本的情况下制作动画。这可以通过使用同步多媒体集成语言(SMIL)和 SVG 来实现。

¹⁷ 虽然在 XHTML 1.x/2.0 中也可以使用。

Images 注意 SMIL 是一种 XML 标记语言，它定义了媒体同步、布局、动画、视觉过渡和媒体嵌入的标记。它支持带有文本、图像、音频、视频的演示文稿，以及到其他 SMIL 演示文稿的链接。SMIL 是 W3C 推荐的 [ 50 ]。

语法

嵌入和内嵌 SVG 图像的根元素都是svg。清单 3-48 显示了一个例子。

清单 3-48。svg根元素

**<svg** **>** <rect x="10" y="10" rx="0" ry="0" width="80" height="80" fill="#898989" /> **</svg>**

名称空间前缀也可以在xmlns属性中指定。这样，对应的命名空间就不是默认的命名空间。因此，必须给所有元素分配一个明确的名称空间前缀，如清单 3-49 中的所示。

***清单 3-49。*显式名称空间前缀

<**svg:svg xmlns:svg**="http://www.w3.org/2000/svg"> <**svg:rect** x="10" y="10" rx="0" ry="0" width="80" height="80" fill="#898989" /> <**/svg:svg**>

两个示例都使用 rect 元素绘制一个矩形，矩形具有左上角定位(x、y)、尺寸(width、height)以及可选的水平和垂直角半径(rx、ry)。如果省略长度单位，则假定它们以像素为单位。这类对象的默认填充颜色是黑色，可以被fill属性覆盖。

类似地，可以在 SVG 中绘制其他几何形状。例如，圆可以通过水平和垂直中心以及半径来声明(清单 3-50 )。

***清单 3-50。*SVG 中的一个圆

<circle cx="100" cy="100" r="90" stroke="#666" fill="#fff" />

对于椭圆，需要水平和垂直中心，以及水平和垂直半径(列表 3-51 )。

***清单 3-51。*SVG 中的省略号

<ellipse cx="100" cy="100" rx="120" ry="80" fill="blue" />

svg元素可以以任意顺序 [51 ]包含以下任何元素:动画元素(animate、animateColor、animateMotion、animateTransform、set)、描述性元素(desc、metadata、title)、形状元素(circle、ellipse、line、path、polygon、polyline、rect)、结构元素(defs、g、svg、) clipPath、color-profile、cursor、filter、font、font-face、foreignObject、image、marker、mask、pattern、script、style、switch、text、view。

嵌入

通过使用 img 或 object 元素，或者通过将 SVG 代码直接写入标记( inline SVG )，可以将 SVG 图像嵌入到标记中。

第一种方法应用标记元素 img，它用于 JPEG 或 PNG 等其他图像(清单 3-52 )。

***清单 3-52。*用img元素嵌入 SVG

<img src="img/cover.svg" width="400" height="300" alt="Book cover" />

然而，这种嵌入类型直到最近才在具有本地 SVG 支持的浏览器中得到支持。在不支持通过img元素嵌入 SVG 的浏览器和浏览器版本中，可以使用object元素(不能保证用户安装了 SVG 插件)。清单 3-53 显示了一个例子。

***清单 3-53。*使用object嵌入 SVG

<object type="image/svg+xml" data="img/cover.svg" width="400" height="300"> <img src="img/cover.png" alt="Book cover" /> </object>

该技术的缺点是图像是作为一般对象而不是图像提供的，从语义的角度来看这不是最佳的:表示图像的元素的含义在逻辑上是由具有关于内容的更具体信息的img元素提供的。主要优点是它在不能显示 SVG 的浏览器中显示图像的替代版本(在本例中是 PNG)。此外，对象元素包含在 DOM 中，这允许编写 SVG 图像的脚本。

提供 SVG 内容的第三种选择是直接将其写入 XHTML 或 HTML5 标记。与在 XHTML 中直接嵌入 SVG 相关的主要风险是，包含内嵌 SVG 文件的 XHTML 文档应该是有效的，充当application/xml或application/xml+xhtml，并且有一个 XHTML DOCTYPE。否则，浏览器中不会显示 SVG 图像。此外，如果 XHTML 文档通过真正的 XML 解析正确地提供给浏览器，那么 Internet Explorer 根本不会呈现文档(不仅仅是 SVG 图像)。 ¹⁸ 这个问题在 HTML5 中是不存在的，直接 SVG 嵌入是它的原生特性。

¹⁸ 这个问题可以通过为 Internet Explorer 指定 MIME 类型text/html和为服务器上的其他浏览器指定application/xml来解决。

由于这些问题，提供外部 SVG 文件通常是更好的解决方案，尤其是在整个站点使用相同文件(如徽标)的情况下。

有一些非标准化的方法叫做 SVG 支持库，比如 JavaScript API“raphal”52。它以所有图形对象也是 DOM 对象的方式支持 SVG 和 VML，并有可能附加 JavaScript 事件处理程序。Raphaë提供了跨浏览器的解决方案；但是，它需要启用 JavaScript，并通过 JavaScript 而不是 SVG 标记来应用员接口。Raphaë的优势在于它为 IE8 或更早版本提供了 VML，并为所有支持 SVG 的浏览器提供了 SVG。

MathML

数学标记语言(MathML) 是一个 XML 应用，用于描述 Web 上的数学注释。它提供了内容和结构，使索引和处理方程成为可能。

数学标记语言的第一个版本 MathML 1.0 在 1998 年成为 W3C 的推荐标准[53，并在 1999 年稍作修改成为 MathML 1.01[54。经过三年的发展，MathML2 在 2001 年获得了推荐地位，直到 2003 年作为第二版进一步完善 [55 ]。在认识到第二个版本的局限性后，MathML3 中引入了几个新功能，如高级换行符和缩进、初等数学符号、Content MathML 与 OpenMath 的对齐、对双向语言的支持、math标签的新属性、语义注释、与宿主环境的交互、链接以及新元素，如mglyph和mpadded [56 。

MathML 受到各种应用的支持，包括网页、电子书、屏幕阅读器、盲文显示器、公式编辑器、墨水输入设备以及电子学习和计算软件工具。然而，MathML 的呈现引擎实现各不相同，没有浏览器提供完整的 MathML 支持。

Internet Explorer 没有本机 MathML 支持，MathPlayer 插件一直用于 IE8 之前的版本。不幸的是，MathPlayer 不能在 IE9 下工作。MathML 的原生渲染支持在基于 Gecko 的浏览器中可用，比如从第一版开始的 Firefox 和 Camino，以及从版本 5.1 开始的 Safari。Opera 从 9.5 版本开始支持 MathML。截至 2011 年，Chrome 还不支持 MathML，但 WebKit 支持正在开发中。

语法

MathML 有表示、内容和混合标记元素。MathML 标记有两种风格。第一个主要关注公式的显示，称为 Presentation MathML 。第二个， Content MathML ，强调数学注释的语义。

与 XHTML 类似，MathML 中有两种类型的元素:带有开始和结束标记的元素以及自结束的空元素。但是，MathML 中空元素的比例比 XHTML 中高得多。元素可以有由名称和值组成的可选属性(后者用双引号或单引号引起来)。大多数 MathML 属性值必须采用预定的格式，比如正整数或关键字true。

MathML 中有容器元素如 mrow(一组子表达式)和令牌元素如mi(标识符；即常数、变量或函数的名称)。元素mo代表一个操作符(例如+)、一个栅栏(例如{)或者一个分隔符(例如,)。数字文字由mn指定。正确使用mi、mo和mn对于为渲染引擎提供足够的信息以应用正确的印刷规则至关重要。只有当标记元素分隔纯文本字符、特殊实体引用或符号(有意义的最小单位)时，容器才能包含其他元素。清单 3-54 显示了一个例子。

清单 3-54。MathML 中容器和令牌元素的简单例子

<mrow> <mi>a</mi> <mo>+</mo> <mi>b</mi> </mrow>

实体引用以&符号(&)开始，以分号(;)结束。除了α这样的关键字之外，还允许使用一种数字格式来表示符号的 Unicode 码位。支持 1800 多个符号。

MathML 命名空间是[www.w3.org/1998/Math/MathML](http://www.w3.org/1998/Math/MathML)。它可以通过两种方式声明:使用xmlns属性或带有xmlns前缀的属性。在第一种情况下，默认名称空间应用于提供它的元素，以及所有子元素(清单 3-55 )。

***清单 3-55。*应用 MathML 名称空间的演示 MathML 文档片段

<math mode="display" **> <mrow> <mi>x</mi> <mo>=</mo> <mfrac> <mrow> <mrow> <mo>-</mo> <mi>b</mi> </mrow> <mo>±</mo> <msqrt> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo>-</mo> <mrow> <mn>4</mn> <mo>⁢</mo> <mi>a</mi> <mo>⁢</mo> <mi>c</mi> </mrow> </mrow> </msqrt> </mrow> <mrow> <mn>2</mn> <mo>⁢</mo> <mi>a</mi> </mrow>** ** </mfrac> </mrow> </math>

这与清单 3-56 中的内容符号相同。

***清单 3-56。*内容 MathML 相当于清单 3-55 中的

<math> <apply> <eq/> <ci>x</ci> <apply> <divide/> <apply> <plus/> <apply> <minus/> <ci>b</ci> </apply> <apply> <root/> <apply> <minus/> <apply> <power/> <ci>b</ci> <cn>2</cn> </apply> <apply> <times/> <cn>4</cn> <ci>a</ci> <ci>c</ci> </apply> </apply> </apply> </apply> <apply> <times/> <cn>2</cn> <ci>a</ci> </apply> </apply> </apply> </math>

在支持 MathML 的浏览器中，两者都应呈现为以下众所周知的二次公式:

Images

在第二种情况下，前缀将其他元素和属性与特定的名称空间相关联。例如，名称空间和前缀是在 body 元素上声明的，如清单 3-57 所示。

*清单 3-57。body*上的名称空间和前缀声明

<body **xmlns:m="http://www.w3.org/1998/Math/MathML"**>

这增加了数学符号的含义，比如清单 3-58 中的符号。

***清单 3-58。*使用 MathML 前缀的例子

<m:math> <m:mrow> <m:mi>x</m:mi> <m:mo>+</m:mo> <m:mn>y</m:mn> </m:mrow> </m:math>

嵌入

由于 MathML 是一种 XML 语言，它可以直接嵌入到 XML 文件中，包括 XHTML(见下一节)。由于缺乏对名称空间的支持，4.01 之前的 HTML 版本都不支持 MathML 嵌入。HTML5 是第一个支持 MathML 的 HTML 版本。

组合、概要和混合命名空间文档

几个新开发的网站功能非常有用，但不是基本文档所必需的。这些技术是由各种规范定义的，这些规范可以用作某些版本的(X)HTML 的扩展。其中一个结合了标记和附加语义，而另一个支持(X)HTML 文档中的数学标记和矢量图形。这些复合文档中的一些有它们自己的 dtd，它们可以根据这些 dtd 和名称空间 ¹⁹ 进行验证，这些名称空间为标识符的上下文提供容器，包括唯一命名的元素和属性。

(X)HTML+RDFa

发布语义上有意义的结构化数据的需求，比如 RDFa 中的元数据，并不是最近才出现的。XHTML 中的 RDFa 在 2008 年 10 月 14 日成为万维网联盟(W3C)的推荐标准。XHTML+RDFa(可扩展超文本标记语言+属性中的资源描述框架)是 XHTML 标记语言的扩展版本，用于通过格式良好的 XML 文档形式的属性和处理规则的集合来支持 RDF。这种组合是当今最先进的标记代码之一。XHTML+RDFa 通过嵌入丰富的语义标记提供了开发语义 Web 内容的选项。该语言的 1.1 版是 XHTML 1.1 的超集，根据 RDFa Core 1.1 集成了属性。换句话说，就是通过 XHTML 模块化的 RDFa 支持。RDFa Core 1.1 规范描述了如何使用属性在任何标记语言中表达结构化数据，重点是 HTML(而不是 XHTML)、SVG、开放文档格式和其他支持 web 的文档格式 [58 ]。如果宿主语言是 XHTML，则称为 XHTML+RDFa 1.1 [59 ]。

通过利用名称空间，XHTML 文档可以包含来自其他基于 XML 的语言(如 SVG 和 MathML)的片段，从而提供可扩展性。这个选项是 XHTML 语言的特权，在 HTML5 之前不被 HTML 支持。

XHTML+RDFa 中的 RDFa 标记重用了标记代码，从而消除了不必要的重复。XHTML+RDFa 可以在标记代码中提供机器可读的元数据，这使得额外的用户功能可用。最重要的是，可以自动执行操作，实现最新的发布、结构化搜索和共享 [60 ]。

XHTML+RDFa 还没有广泛分发，可能是因为缺乏创作工具和内容管理系统的支持 [61 ]。然而，有一个好的趋势，特别是因为在(X)HTML5 中引入了原生 RDFa 支持。虽然规范 HTML+RDFa 1.1 主要是 HTML5 的扩展，但它描述了应用 RDFa 的规则和指南，不仅在 HTML5 中，而且在 HTML 4.01 和 XHTML5 [62 ]中。

清单 3-59 展示了一个 XHTML+RDFa 框架文档。

***清单 3-59。*一个带有额外名称空间的 XHTML+RDFa 框架文档

An XHTML+RDF example

This is a paragraph with semantic content. It was written by ![Images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) John Smith.

RDFa 符号在第七章的中有描述。

XHTML-Print

XHTML-Print 是在 W3C 推荐标准“XHTML 的模块化”中定义的。此配置文件可在打印环境中使用，无需安装打印机专用驱动程序。XHTML-Print 对于移动设备和低成本打印机也很有用，这些设备和打印机通常缺少大的(整页)缓冲区，并且通常从上到下、从左到右纵向打印。

XHTML-Print 文档结构基于 XHTML 1.0 规范。但是，应用和使用限制适用于图像、样式和表单。

XHTML + MathML + SVG

展示 XML 威力的最简单方法之一是创建混合名称空间的文档。通用和数学标记以及矢量图形可以通过 XHTML + MathML + SVG 配置文件在同一文档中进行描述。这个概要文件结合了 XHTML 1.1、MathML 2.0 和 SVG 1.1。

XHTML + MathML + SVG 文档的宿主语言可以是 XHTML，也可以是 SVG。

XHTML 作为宿主语言

清单 3-60 展示了一个典型的 XHTML + MathML + SVG 文档。

***清单 3-60。*一个 XHTML 中的 XHTML + MathML + SVG 骨架文档

Sample XHTML 1.1 plus MathML 2.0 plus SVG 1.1 document

MathML sample

Math expression $y = \frac{1}{\sqrt{x^{2} + 1}}$ inside an XHTML paragraph.

SVG sample

` ` A star

如果需要，开发人员可以自由地更改 DTD 的参数实体。由于 MathML 和 SVG 需要额外的支持，前面代码的有效性不能保证所有 web 浏览器都能正确呈现文档。

SVG 作为宿主语言

用foreignObject ( 清单 3-61 )将 XHTML 和 MathML 插入 SVG 可以创建一个混合文档。

***清单 3-61。*SVG 中的一个 XHTML+MahtML+SVG 骨架文档

]>
<svg version="1.1" xml:lang="en" Images Images
Images Images
xmlns:xlink="http://www.w3.org/1999/xlink">
SVG as the host language

<xhtml:p xmlns:xhtml="http://www.w3.org/1999/xhtml">

<math:math xmlns:math="http://www.w3.org/1998/Math/MathML">

</math:math>

</xhtml:p>

`

选择一种标记语言

选择标记语言时要考虑的最重要的一个方面是浏览器支持。即使最新的标记语言上有成千上万的资源，浏览器对其功能的支持也在逐渐增加，但呈现用最新标记编写的网页总是会有一些风险。

HTML 4.01 和 XHTML 1.0 的过渡版本已经开发出来，通过提供已经计划好替换的功能(标记为不推荐使用的元素)，来减轻 web 开发人员的工作。他们的目的是给开发人员时间来改变过时的标记，而不是维护它们。传统的变体旨在提供一种向现代 web 标准过渡的方式。框架集文档与 XHTML 的哲学相矛盾。因此，XHTML 1.0 的框架集变体具有与过渡变体相似的目的。这两种变体的设计都考虑到了向后兼容性。换句话说，只要有可能，XHTML 1.0 Strict 应该是在引入之后才使用的。尽管许多内容作者都这样做了，但无错误标记一直非常少见。但是，在错误百出的实现中应用严格规范的标记有什么意义呢？事实上，这不完全是网络开发者的错。Web 开发人员经常不得不处理第三方和 CMS 基于不符合标准的模板生成的动态内容形式的错误标记。

XHTML 1.1 中模块化的潜力也没有得到开发。XHTML 2.0 受到了 web 开发人员的批评，W3C 被迫暂停了该规范的开发。

因为在(X)HTML5 中引入了新的高级特性，所以可以推荐 HTML5，但是要注意逐渐改进浏览器支持。对于传统的 web 文档，没有理由将有效的 XHTML 1.0 严格标记更改为 HTML5，除非后者中引入的一些新功能对于内容来说是必不可少的。

XHTML 1 的好处。 x over HTML 4。 x

尽管严格的 XML 代码有很多优点，但开发人员花了几年时间才意识到 XHTML 的强大，并实现了 XHTML 而不是 HTML。HTML 和 XHTML 各有利弊(表 3-17 )。

Images

很容易看出，一些声称有利的 HTML 特性并不一定是真正的好处，因为精确、严格的标记应该总是比松散的标记更好。

HTML 5 优于 HTML 4 的好处。 x 和 XHTML

HTML 的最新版本克服了早期 HTML 版本和 XHTML 的一些限制和不一致性。HTML5 的新解析规则不是基于 SGML 的，这使得解析更加灵活，提高了兼容性。新元素提供了更复杂的文档结构(article、aside、audio、bdo、canvas、command、datalist、details、embed、figcaption、figure、footer、header、hgroup、keygen、mark、meter、nav、output、progress、rp、rt、ruby、section、source、source)废弃的标记元素已被删除，包括acronym、applet、basefont、big、center、dir、font、frame、frameset、isindex、noframes、strike和tt。引入了新的属性，例如id、tabindex和hidden全局属性，以及自定义数据属性data-*。改进了meta元素上的charset属性和script元素上的async属性。内联 SVG 和 MathML 可以嵌入到text/html文档中。

HTML5 被大量开发者和 W3C 推荐，因为它满足了所有常见的用户需求，并支持适合大多数应用的现代媒体。

Web 标记的替代方案

尽管 web 文档的大部分是以(X)HTML 文件发布的，但表格、小册子、传单、海报、动画、源代码、演示文稿和办公文档通常以其他格式提供，如 Google 索引的格式:

adobe flash(“??”)
Adobe 可移植文档格式(.pdf)
Adobe PostScript （ .ps ）
Autodesk Design Web 格式(.dwf)
基本源代码(.bas)
C/C++源代码(.c、.cc、.cpp、.cxx、.h、.hpp)
谷歌地球(.kml，.kmz)
GPS 交换格式(.gpx)
汉坤汉语（ .hwp ）
Java 源代码(.java)
微软 Excel ( .xls，.xlsx)
微软 PowerPoint ( .ppt，.pptx)
微软 Word ( .doc，.docx)
OpenOffice 演示文稿(.odp)
OpenOffice 电子表格(.ods)
OpenOffice 文字(〈??〉)
Perl 源代码(.pl)
Python 源代码(.py)
富文本格式(.rtf，.wri)
文本(.ans、.asc、.cas、.txt、.text)

始终使用合适的文件类型进行 web 发布。(X)HTML 文档是一般内容的首选，应尽可能使用。随着 HTML5 的引入，作为标记发布的文档份额变得更大。html 5——特别是由 CSS3 样式表支持的——具有创建动画而不是 Flash、演示而不是 PowerPoint 演示的所有功能，等等。然而，可编辑的文档不应该被转换成标记。下载一个 Word 文档并根据需要进行修改会非常方便。只需签名的可打印文档通常以 PDF 格式提供。特殊文件类型容易混淆，用户代理无法处理。 ²⁰ 以正确的文件格式提供文档是网络作者的责任。

总结

在这一章中，你学习了标记语言的版本和变体，这在很多方面都是有益的。首先，需要了解标记语言的历史，以便能够为您的项目选择最合适的标记。其次，当从一种文档类型转换到另一种文档类型时，这些标记语言之间的关系至关重要。第三，熟悉 HTML 和 XHTML 语言的词汇不仅有助于比较，而且有助于确保只使用所选文档类型中允许的元素和属性。

无错误标记代码是符合标准的网站的最重要的功能之一，但是只有通过正确的设置才能充分发挥它的潜力。下一章将讨论服务器配置的基础知识，最常见的内容类型，以及用于查询和链接网站的 URIs。

浏览器无法通过扩展名识别的未知文件类型仍可能被处理或呈现(例如 XML 序列化中提供的未知格式可能被表示为 XML 树)。

参考文献

Raggett D(2005)HTML 入门，修订版。万维网联盟。www.w3.org/MarkUp/Guide/2010 年 9 月 11 日访问

Smith M (2010) HTML:标记语言参考。万维网联盟。dev.w3.org/html5/markup/2011 年 1 月 21 日访问

Pilgrim M (2010) HTML5:启动并运行。塞瓦斯托波尔奥莱利媒体

Meloni JC，Morrison M (2009)在 24 小时内自学 HTML 和 CSS。印第安纳波利斯的萨姆斯

Lemay L，Colburn R (2010)每天一小时自学 HTML 和 CSS 的网络出版:包括新的 HTML5 内容(第六版)。印第安纳波利斯的萨姆斯

鲍威尔 TA (2010) HTML & CSS:完整参考(第五版 edn)。麦格劳-希尔·奥斯本公司

W3C (2010) W3C 备忘单。万维网联盟。www.w3.org/2009/cheatsheet/2010 年 10 月 1 日访问

蒂姆·伯纳斯·李(1999 年)《时代》杂志百名世纪人物。时代杂志。205 . 188 . 238 . 181/time/time 100/scientist/profile/bernerslee . html。2010 年 9 月 11 日访问

使用 HTML、XML 和 CSS 的多用途出版。计算机械协会，www.w3.org/People/Janne/porject/paper.html，??。2010 年 9 月 11 日访问

伯纳斯-李 T (1995)超文本标记语言-2.0，RFC 1866。网络工作组，互联网工程任务组。datatracker.ietf.org/doc/rfc1866/2010 年 9 月 11 日访问

康诺利 D (1999) HTML 2.0 材料。万维网联盟。www.w3.org/MarkUp/html-spec/2010 年 9 月 11 日访问

Raggett D (1997) HTML 3.2 参考规范，W3C 推荐标准。万维网联盟。www.w3.org/TR/REC-html322010 年 9 月 11 日访问

Raggett D，Le Hors A，Jacobs I (1998) HTML 4.0 规范，W3C 推荐。万维网联盟。www.w3.org/TR/1998/REC-html40-19980424/2010 年 9 月 11 日访问

Raggett D，Le Hors A，Jacobs I (1999) HTML 4.01 规范，W3C 推荐。万维网联盟。www.w3.org/TR/html401/2010 年 10 月 1 日访问

一个 XHTML + MathML + SVG 的概要文件。W3C 工作草案。万维网联盟。www.w3.org/TR/XHTMLplusMathMLplusSVG/xhtml-math-svg.html2011 年 2 月 17 日访问

Adida B，Birbeck M，McCarron S，Pemberton S(2008)XHTML 中的 RDFa:语法和处理。扩展 XHTML 以支持 RDF 的属性和处理规则的集合，W3C 推荐。万维网联盟。www.w3.org/TR/rdfa-syntax/2010 年 9 月 10 日访问

麦卡隆 S (2010) XHTML+RDFa 1.1。通过 XHTML 模块化支持 RDFa，W3C 工作草案。万维网联盟。www.w3.org/TR/2010/WD-xhtml-rdfa-20100803/2010 年 9 月 10 日访问

Pemberton S 等人(2002) XHTML 1.0 可扩展超文本标记语言(第二版)。HTML 4 在 XML 1.0 中的重构。W3C 推荐。万维网联盟。www.w3.org/TR/xhtml1/2010 年 10 月 5 日访问

Altheim M，Boumphrey F，Dooley S，McCarron S，Schnitzenbaumer S，Wugofski T(2001)XHTML 的模块化，W3C 推荐。万维网联盟。www.w3.org/TR/2001/REC-xhtml-modularization-20010410/2010 年 9 月 14 日访问

Altheim M，McCarron S(eds)(2001)XHTML 1.1 文档类型。W3C 推荐。万维网联盟。www.w3.org/TR/xhtml11/doctype.html2010 年 10 月 6 日访问

希克森 I(2010)html 5 标准草案。网络超文本应用技术工作组。www.whatwg.org2010 年 9 月 9 日访问

希克森 I (2007) W3C 重新开始 HTML 的努力。载于:WHATWG 博客，2007 年 3 月 7 日。网络超文本应用技术工作组。blog.whatwg.org/w3c-restarts-html-effort2010 年 9 月 9 日访问

希克森一世(2008)与 XHTML2 的关系。In: HTML 5。用于 HTML 和 XHTML 的词汇表和相关 API，W3C 工作草案。万维网联盟。www.w3.org/TR/2008/WD-html5-20080122/#relationship02010 年 9 月 9 日访问

leen heer N(2010)HTML5 测试——你的浏览器对 html 5 的支持程度如何？尼尔斯·林希尔。www.html5test.com/。2011 年 1 月 19 日访问

W3C (2011)测试–HTML Wiki。万维网联盟。www.w3.org/html/wiki/Testing2011 年 1 月 19 日访问

Pemberton S (2010) XML 及其应用。万维网联盟。www.w3.org/2010/Talks/11-11-steven-applications/2010 年 11 月 11 日访问

Van Kesteren A (2010) HTML5 与 HTML4 的差异。万维网联盟。www.w3.org/TR/2010/WD-html5-diff-20100624/2010 年 9 月 23 日访问

Le Hégaret P，Jacobs I(2011)html 5 最后一次调用的常见问题。万维网联盟。www.w3.org/2011/05/html5lc-faq.html于 2011 年 8 月 14 日访问

Graff E (2011)多语言标记:HTML 兼容的 XHTML 文档。万维网联盟。www.w3.org/TR/html-polyglot/于 2011 年 8 月 12 日访问

Bray T，Paoli J，Sperberg-McQueen CM，Maler E，Yergeau F (2008)可扩展标记语言(XML) 1.0，第 3.3.3 节-属性值规范化。万维网联盟。www.w3.org/TR/REC-xml/2010 年 9 月 23 日访问

Raggett D，Le Hors A，Jacobs I (eds) (1999)基本 HTML 数据类型。在:HTML 4.01 规范。万维网联盟。www.w3.org/TR/html4/types.html2011 年 2 月 15 日访问

ISO (1996)“信息处理—文本和办公系统—标准通用标记语言(SGML)”。ISO 8879:1986/Cor 1:1996。国际标准化组织。www . iso . org/iso/iso _ catalogue/catalogue _ TC/catalogue _ detail . htm？csnumber=28557 。2011 年 2 月 15 日访问

Lie H W，elik T，Glazman D，van Kesteren A (eds) (2010 年)媒体询问。万维网联盟。www.w3.org/TR/css3-mediaqueries/于 2011 年 8 月 13 日访问

Phillips A，Davis M (eds) (2009)用于识别语言的标签。互联网工程任务组。tools.ietf.org/html/bcp47于 2011 年 8 月 13 日访问

Raggett D (1997) HTML 3.2 参考规范。W3C 推荐。万维网联盟。www.w3.org/TR/REC-html322010 年 10 月 1 日访问

Raggett D，Le Hors A，Jacobs I (eds) (1999)元素索引。在:HTML 4.01 规范。W3C 推荐。万维网联盟。www.w3.org/TR/html401/index/elements.html2010 年 10 月 1 日访问

希克森一世(编辑)(2010)元素索引。HTML 5——一个用于 HTML 和 XHTML 的词汇表和相关 API。W3C 工作草案。万维网联盟。www.w3.org/TR/html5/index.html#elements-12010 年 10 月 1 日访问

希克森本人(编辑)(2011) HTML5 属性。In: HTML5。HTML 和 XHTML 的词汇表和相关 API。万维网联盟。www.w3.org/TR/html5/index.html#attributes-12011 年 2 月 16 日访问

Le Hégaret P (2009)文档对象模型(DOM)。万维网联盟。www.w3.org/DOM/2011 年 1 月 25 日访问

Le Hors A，Le Hégaret P，Wood L，Nicol G，Robie J，Champion M，Byrne S (eds) (2004)文档对象模型(DOM)3 级核心规范 1.0。W3C 推荐。万维网联盟。www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/2010 年 10 月 1 日访问

Zeldman J，Marcotte E (2010)一种让网页表现得像应用一样的标准方法。在:用网络标准设计，第三版。，新骑手，伯克利

一个 HTML 文档的全局结构。在:HTML 4.01 规范。W3C 推荐。万维网联盟。www.w3.org/TR/REC-html40/struct/global.html2010 年 10 月 12 日访问

希克森本人(主编)(2011)种内容。HTML 5——HTML 和 XHTML 的词汇表和相关 API。万维网联盟。www.w3.org/TR/html5/content-models.html#kinds-of-content于 2011 年 8 月 14 日访问

Dubost K，Curran P (2007)推荐在 Web 文档中使用的 Doctype 声明。万维网联盟质量保证兴趣小组。www.w3.org/QA/2002/04/valid-dtd-list.html2010 年 9 月 17 日访问

Axelsson J，Birbeck M，Dubinko M，Epperson B，Ishikawa M，McCarron S，Navarro A，Pemberton S(2006)XHTML 2.0 文档类型。在:XHTML 2.0，W3C 工作草案。万维网联盟。www.w3.org/TR/xhtml2/xhtml2-doctype.html#s_doctype2010 年 9 月 23 日访问

亚当斯 G (ed)，多兰 M，弗瑞德 G，海斯 S，霍奇 E，柯比 D，米歇尔 T，辛格 D (2011)时控文本标记语言(TTML) 1.0。万维网联盟。www.w3.org/TR/ttaf1-dfxp/2011 年 2 月 18 日访问

W3C SVG 工作组(2011)什么是 SVG？网络图形标记。万维网联盟。www.w3.org/Graphics/SVG/2011 年 1 月 24 日访问

Andersson O、Berjon R、Dahl strm E、Emmons A、Ferraiolo J、Grasso A、Hardy V、Hayman S、Jackson D、Lilley C、McCormack C、Neumann A、Northway C、金特 A、Ramani N、Schepers D、Shellshear A (eds)等人(2008)的可缩放矢量图形(SVG) Tiny 1.2 规范。万维网联盟。www.w3.org/TR/SVGTiny12/2011 年 1 月 24 日访问

博尔特曼 D，扬森 J，塞萨尔 P，穆兰德 S，海奇 E，德梅利奥 M，金特 J，川村 H，韦克 D，帕涅达 XG，梅伦迪 D，克鲁兹-拉拉 S，汉克里克 M，祖克 DF，米歇尔 T(编辑)(2008)同步多媒体集成语言(SMIL 3.0)。万维网联盟。www.w3.org/TR/SMIL/于 2011 年 8 月 14 日访问

Dahl strm E、Ferraiolo J、Fujisawa J、Grasso A、Jackson D、Lilley C、McCormack C、Doug Schepers D、Watt J、Deng ler P((2010)SVG 元素。在:可缩放矢量图形(SVG) 1.1(第二版)。万维网联盟。www.w3.org/TR/SVG11/struct.html#SVGElement2011 年 1 月 24 日访问

Baranovskiy D(2011)raphal-JavaScript 库。德米特里·巴拉诺夫斯基。raphaeljs.com/2011 年 1 月 23 日访问

Ion P，Miner R (eds)，Buswell S，Devitt S，Diaz A，Poppelier N，Smith B，Soiffer N，Sutor R，Watt S 等(1998)数学标记语言(MathML) 1.0 规范。万维网联盟。www.w3.org/TR/1998/REC-MathML-19980407/2011 年 2 月 9 日访问

Buswell S，Devitt S，Diaz A，Ion P，Miner R，Poppelier N，Smith B，Soiffer N，Sutor R，Watt S 等(1999)数学标记语言(MathML) 1.01 规范。万维网联盟。www.w3.org/TR/REC-MathML/2011 年 2 月 9 日访问

Ausbrooks R，Buswell S，Carlisle D，Dalmas S，Devitt S，Diaz A，Froumentin M，Hunter R，Kohlhase M，Poppelier N，Smith B，Soiffer N，Sutor R，Watt S 等(2003)数学标记语言(MathML)2.0 版(第二版)。万维网联盟。www.w3.org/TR/MathML2/2011 年 2 月 9 日访问

卡莱尔 D、扬 P、迈纳 R (eds)、奥斯布鲁克斯 R、布斯韦尔 S、卡莱尔 D、查夫查尼泽 G、达尔马斯 S、德维特 S、迪亚兹 A、杜利 S、亨特 R、科尔哈斯 M、拉兹雷克 A、利布雷希特 P、米勒 B、罗利 C、萨金特 M、史密斯 B、索伊弗 N、苏托尔 R、瓦特 S 等人(2010)数学标记语言(MathML)3.0 版。万维网联盟。www.w3.org/TR/MathML3/2011 年 2 月 9 日访问

Adida B，Birbeck M，McCarron S，Pemberton S(eds)(2008)XHTML 中的 RDFa:语法和处理。扩展 XHTML 以支持 RDF 的属性和处理规则的集合。W3C 推荐。万维网联盟。www.w3.org/TR/2008/REC-rdfa-syntax-20081014/2010 年 10 月 27 日访问

Adida B、Birbeck M、McCarron S、Herman I (eds) (2010) RDFa Core 1.1。通过属性嵌入 RDF 的语法和处理规则。W3C 工作草案。万维网联盟。www.w3.org/TR/2010/WD-rdfa-core-20101026/2010 年 10 月 27 日访问

McCarron S(ed)(2011)XHTML+RDFa 1.1-通过 XHTML 模块化支持 RDFa。万维网联盟。www.w3.org/TR/2010/WD-xhtml-rdfa-20100422/2011 年 5 月 3 日访问

波洛克·JT(2009)虚拟语义网。霍博肯，卫斯理出版社

沃森 M (2009)脚本智能:Web 3.0 信息、收集和处理。伯克利阿普莱斯

Sporny M、McCarron S(编辑)、Adida B、Birbeck M、Pemberton S(作者)(2010 年)HTML+RDFa 1.1。在 HTML4 和 HTML5 中支持 RDFa。万维网联盟。www.w3.org/TR/2010/WD-rdfa-in-html-20101019/2010 年 10 月 26 日访问

谷歌公司(2010)谷歌可以索引哪些文件类型？谷歌网站管理员中心。www.google.com/support/webmasters/bin/answer.py?hl=en&回答=35287 。2011 年 1 月 15 日访问****

四、服务和配置

web 文档的正确外观和处理不能简单地通过应用严格的、无错误的标记来保证。Web 服务器配置对网站的外观、操作和行为有重大影响。文档应该使用正确的媒体类型和字符编码。内容协商可用于向支持相应媒体类型的浏览器提供各种文档版本。XHTML 文档可以作为 HTML 或 XML 提供，但是在处理上有很大的不同。XML 文件由比 SGML 解析器更容易出错的 XML 解析器处理。XHTML 作为 XML 存在着文档根本无法呈现的风险。另一方面，向后兼容的服务不能利用严格 XML 标记的好处。将 HTML 和 XHTML 从服务器发送到呈现引擎有几个方面，所有这些都应该被考虑以实现正确的设置。

在本章中，您将学习如何配置您的网站、浏览器和服务器，以便正确地提供 web 文档。熟悉最重要的 MIME 类型对于正确提供 web 文档及其使用的文件至关重要，例如样式表、图像、音频和视频文件、ZIP 存档和 office 文档。除了互联网媒体类型，您还将学习域名配置；URIs、URL 和 urn 的区别；基本目录的应用；和实践来消除文件扩展名。

HTTP 头

万维网上数据通信的基础是超文本传输协议(HTTP)。它是一种网络协议，在客户端-服务器计算模型中充当请求-响应协议。在这种模型中，典型的客户端是 web 浏览器，而在网站主机上运行的应用是服务器。在每次查询过程中，客户机向服务器提交一条 HTTP 请求消息。作为回报，服务器向客户机发送一个包含附加数据的响应消息，例如关于请求的完成状态信息，该消息与 web 文档一起从服务器发送到用户代理。这些报头字段构成了 HTTP 报头。报头字段确定 HTTP 通信的参数。HTTP 请求用于指示哪些内容类型和字符集是可接受的(Accept、Accept-Charset)、消息发送的日期和时间(Date)、域名(Host)、代表用户代理的字符串(User-Agent，等等。

正如您在清单 4-1 中看到的，HTTP 响应提供了服务器名称(Server)、返回数据的备用位置(Content-Location)以及响应过期的日期和时间(Expires)。Vary字段确认缓存的响应是否可以使用，而不是重复请求。隐私偏好项目平台(P3P)策略可以通过P3P字段进行设置。资源的特定版本的标识符由ETag提供。这些是最常见的 HTTP 头字段，但还有更多，所有这些都在 RFC 4229 [1]中有描述。

清单 4-1。 HTTP 报头示例

HTTP/1.1 200 OK Date: Fri, 10 Sep 2010 10:05:08 GMT Server: Apache/2.2.16 (Unix) PHP/5.3.3 Content-Location: index.html Vary: negotiate,accept-language,accept-charset TCN: choice P3P: policyref=http://example.com/p3p.xml Cache-Control: max-age=21600 Expires: Fri, 10 Sep 2010 16:05:08 GMT Last-Modified: Fri, 21 Aug 2009 22:18:49 GMT ETag: "3668bab8;37e77d1c" Accept-Ranges: bytes Content-Length: 11537 Connection: close Content-Type: text/html; charset=UTF-8 Content-Language: en

互联网媒体类型(MIME)

互联网媒体类型(也称为哑剧类型或内容类型)决定了浏览器处理网络文件的方式。它们是网站的文件格式标识符。因此，为网站组件和网页设置正确的媒体类型至关重要。

多用途互联网邮件扩展(MIME)规范是由互联网工程任务组在 1992 年提出的(关于 IETF 的更多信息，参见第一章)。大多数规范都以 IETF/ISOC 征求意见稿(RFC)的形式提供。尽管最初的 MIME 概念是为格式化非 ASCII 消息而设计的，但它在 web 浏览器中被用来呈现或处理(X)HTML 之外的文件。IANA 注册对互联网媒体类型进行了标准化(同样，参见第一章了解更多关于 IANA 的信息)[2]。非标准 MIME 类型和子类型可以通过它们的前缀来识别，因为它们都以x-开头。特定于供应商的子类型以vnd.开头，而个人子类型以prs.开头。

媒体类型至少由两部分组成:类型、子类型和可选参数。

XML 数据可以分配给两种 MIME 媒体类型:application/xml和text/xml。RFC 3023 [3]对它们进行了定义。此外，MIME 类型可以通过后缀+xml来识别。从 web 标准化组织的角度来看，最重要的媒体类型是为 XHTML 注册的 XML 媒体类型，即在 RFC 3236 [4]中定义的application/xhtml+xml。虽然 XHTML 文档可以使用application/xhtml+xml、application/xml或text/xml媒体类型，但是 W3C 推荐将 XHTML 作为 XML 使用其专用的 MIME 类型application/xhtml+xml [5]。然而，如果没有正确的 XML 头，使用这种媒体类型不能保证正确的 XML 处理(更多关于 XML 头的信息，见第三章)。此外，Internet Explorer 6 和更早的 IE 版本不呈现作为application/xhtml+xml的文档内容；相反，系统会提示用户下载该文件。

高级版本 S/MIME 也支持消息加密。

images 注意如果 XHTML 网页的媒体类型设置为text/html，它将被解析为 HTML。如果媒体类型设置为application/xhtml+xml，浏览器会将文档解析为 XML。这是一个巨大的差异！使用正确 MIME 的 XHTML 文件不能包含一个错误；否则，文档将不会被呈现，XML 解析器将给出一个错误，正如前面在第一章和第三章中提到的。

另一种注册的 XML 媒体类型是application/atom+xml，它用于由提议的标准 RFC 4287 [6]定义的 Atom 联合格式(参见第八章)。这种类型的其他常用 XML 媒体类型有application/rss+xml(RSS；参见第八章)、application/mathml+xml(MathML；参见第三章)，image/svg+xml(SVG；参见第三章)，以及application/xslt+xml(XSLT；参见第五章。MIME 类型的完整列表发布在 IANA 网站上[7]。

HTTP 头的Content-Type字段将数据格式描述为 MIME 媒体类型(清单 4-2 )。此外，该条目还可以提供文档的字符编码(如前面在第二章中所讨论的)。

***清单 4-2。*一个内容类型的例子

Content-Type: application/xhtml+xml; charset=UTF-8

web 页面的 MIME 类型也可以用meta元素在文档级设置，如清单 4-3 中的所示。

***清单 4-3。*带有meta元素的 MIME 类型声明

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

一般来说，MIME 类型text/html用于 HTML 文档，application/xhtml+xml用于 XHTML 文档。然而，XHTML 文档可以同时支持这两者(我们将在本章后面看到)。

种类繁多的互联网媒体类型并不固定。自定义 MIME 类型也可以在 IANA 注册[8]。

常见媒体类型

下面几节列出了最常见的媒体类型。请注意，这绝不是一个完整的列表。

特定应用的媒体类型

表 4-1 总结了最常见的特定于应用的 MIME 类型。

² 不能在 IE8 或更早版本中使用

images

特定于供应商的媒体类型

表 4-2 总结了最常见的特定于供应商的 MIME 类型。

images

在不久的将来，与广泛使用的文件格式相关联的非标准化 MIME 类型很可能会被注册。application/x-dvi代表与设备无关的文档。LaTeX 文件的 MIME 类型application/x-latex也还没有标准化。Adobe Flash 文件可能会有已经广泛使用的媒体类型，application/x-shockwave-flash。可能与application/x-rar-compressed MIME 类型相关联的 RAR 存档文件也仍然没有标准化。

音频媒体类型

表 4-3 总结了最常见的音频 MIME 类型。

images

图像媒体类型

表 4-4 总结了最常见的图像 MIME 类型。

多部分对象媒体类型

表 4-5 总结了最常见的多部分对象介质类型。

images

文字媒体类型

表 4-6 总结了最常见的文本媒体类型。

images

视频媒体类型

表 4-7 总结了最常见的视频媒体类型。

images

上菜 XHTML

提供 XHTML 有两种方法，这两种方法各有优缺点。下面几节将对它们进行描述。

将 XHTML 作为 HTML

在网络的早期，HTML 是唯一的标记语言。几年后，新的创新出现了，这些创新是 HTML 所不能覆盖的。XML 规则被加入其中，创造了 XHTML，一种新的标记语言。这些规则也是将 HTML 文档转换成 XHTML 时应该应用的规则，正如前面在第三章中讨论的。

但是，HTML 4.01 的词汇或多或少被保留了下来；因此，它类似于 XHTML 1.0。因此，XHTML 文档可以作为 HTML 提供给呈现引擎。这种方法提供了向后兼容性。媒体类型可以用来请求浏览器将 XHTML 作为 HTML 而不是 XML 来处理。如果一个 XHTML 文档的媒体类型被定义为text/html，那么渲染引擎会像解析 HTML 一样解析网页。如果给定媒体类型为application/xhtml+xml，浏览器将把文档作为 XML 处理。

默认情况下，一些服务器和服务器端脚本平台(PHP、ASP 等)将text/html媒体类型应用于 web 内容。XHTML 的“肮脏秘密”是几个带有 XML 解析器的浏览器将文档视为带有 XHTML 语法的text/html，将DOCTYPE视为 HTML。 ³ 但是向后兼容是有代价的:XML 令人印象深刻的特性根本无法在以这种方式服务的 XHTML 中使用。如果文档不能充分发挥其潜力，那么应用严格的规则又有什么意义呢？在向后兼容性不是主要问题的地方，解决方案是将 XHTML 作为 XML。

将 XHTML 作为 XML

在编程语言等许多环境中，错误是完全不被接受的。代码可靠性强烈依赖于标记结构和正确性。浏览器拒绝呈现无效 XHTML 标记的行为可能看起来很烦人；然而，浏览器有一个很好的理由这样做。充满错误的 HTML 文档通过猜测开发人员的意图来处理。浏览器不能每次都成功完成这项任务，也不能保证结果。此外，渲染引擎的误差容限提供了各种结果。

有些情况下错误是不可容忍的。例如，在科学出版中，数学方程式的表达应该是可靠的。如果这样的文档发布在 Web 上，并且在 XHTML 中嵌入了 MathML，那么错误是不可容忍的，因为后果可能会花费数百万甚至是致命的。这是 XML 解析器对错误极度敏感的主要原因。

作为一个 XML 语言家族，XHTML 本来是作为 XML 来使用的。这种方法享有 XML 的所有好处。然而，这也涉及到严重的风险。Web 文档作为application/xhtml+xml请求浏览器根据 XML 的规则处理它们。因为无效的 XHTML 标记根本不会在 web 浏览器中呈现，所以在将 XHTML 作为 XML 提供时应该格外小心。源代码中错误位置的一个简单字符会导致 XML 解析错误消息，而不是网页内容(正如第一章中已经暗示的)。大概这也是 HTML 一直被大部分内容作者和开发者所偏爱的原因之一。然而，真正的 web 标准化人员不应该害怕编写纯 XHTML 代码。如果您学会了如何使用前一章中描述的实践，您不仅能够创建无错误的 XHTML 文档，还能够创建任何类型的结构化标记。

真正的 XML 解析器，比如 Firefox 或 Safari，考虑的是文档的 MIME 类型(由服务器发送),而不仅仅是文件语法和文档类型。

尽管现代浏览器支持 MIME 类型，但一些老的浏览器不支持。保持与旧浏览器的向后兼容性并支持现代浏览器的高级 XML 应用的一个选择是称为内容协商的技术。可以通过.htaccess ⁴ 设置或者使用服务器端脚本语言来完成。

HTTP 规范定义了为同一资源的不同版本服务的机制[60]。文档类型、文档语言和图像类型就是一些例子[61]。首选的和可接受的文档格式——在我们的例子中，是 HTML 和 XHTML 文件之间的首选——可以在 HTTP 头中定义，如清单 4-4 所示。

***清单 4-4。*HTTP 报头中的内容协商

Accept: text/html, application/xhtml+xml, application/xml; q=0.9, */*; q=0.8

使用前面的例子，浏览器可以指定 HTML 和 XHTML 优先于 XML。“相对质量参数”(q)及其值(qvalue)被认为如下。所有没有指定偏好值的项目都获得默认值1(在本例中为text/html和application/xhtml+xml)。application/xml的指定值为0.9，所有其他格式为0.8。按降序排序的优先级值揭示了实际的优先级，换句话说，1表示text/html和application/xhtml+xml，而0.9表示application/xml，而0.8表示任何其他内容类型。

在 Apache 服务器上，应该将清单 4-5 中所示的指令添加到您的.htaccess(或httpd.conf)文件中，以设置正确 MIME 类型所需的 HTTP 头。

**清单 4-5。**在text/html和application/xhtml+xml和之间的偏好

Options +Multiviews AddType application/xhtml+xml;qs=0.8 AddType text/html;qs=0.9

“源的质量”参数(qs)，在我们的例子中设置为0.8，决定了AddType指令是否应用指定的 MIME 类型。由于application/xhtml+xml的qs值小于text/html，application/xhtml+xml将只被兼容的浏览器使用；否则，首选版本将是 MIME 类型text/html。

内容协商也可以用服务器端脚本语言实现。清单 4-6 、 4-7 和 4-8 总结了最常见的实现。

***清单 4-6。*PHP 中的内容协商

$accept = $_SERVER["HTTP_ACCEPT"]; $ua = $_SERVER["HTTP_USER_AGENT"]; if (isset($accept) && isset($ua)) { if (stristr($accept, "application/xhtml+xml") || stristr($ua, "W3C_Validator")) { header("Content-Type: application/xhtml+xml"); } }

⁴web 服务器上的通用配置文件(注意是以句点开头，没有扩展名)。

***清单 4-7。*ASP 中的内容协商

Dim strAccept, strUA strAccept = Request.ServerVariables("HTTP_ACCEPT").Item strUA = Request.ServerVariables("HTTP_USER_AGENT").Item If InStr(1, strAccept, "application/xhtml+xml") > 0 Or InStr(1, strUA, "W3C_Validator") > 0 Then Response.ContentType = "application/xhtml+xml" End If

***清单 4-8。*ASP 中 C#的内容协商。网

string accept = Request.ServerVariables["HTTP_ACCEPT"]; string ua = Request.ServerVariables["HTTP_USER_AGENT"]; if (accept != null && ua != null) { if (accept.IndexOf("application/xhtml+xml") >=0 || ua.IndexOf("W3C_Validator") >= 0) { Response.ContentType = "application/xhtml+xml"; } }

前面的代码使用自己的语法执行内容协商。例如，在 PHP 中，$_SERVER数组中包含的服务器变量用于评估用户代理的 HTTP Accept 头，并通过header函数设置适当的 MIME 类型(清单 4-6 )。

URIs、URL 和 urn

一个统一资源标识符 ( URI )是一个在互联网上标识一个名称或一个资源的字符串(RFC 2396 [62])。URIs 可以归类为统一资源定位符(URL；RFC 1738 [63])、统一资源名称 ( URNs )或两者。URN 定义了资源的身份，而 URL 提供了查找资源的方法(包括协议和路径)。URIs 经常被错误地用作 URL 的同义词，尽管 URI 是一个更广泛的术语(RFC 3305 [64])。URN 和 URL 都是 URI 的子集，但它们通常是不相交的集合。

URL 最著名的例子是万维网上的网站地址。清单 4-9 显示了通用的 URL 语法。

***清单 4-9。*网址语法

protocol://domain:port/path?query_string#fragment_identifier

协议 ( 方案名)后面跟一个冒号。URL 的其他部分取决于所使用的方案。通常有一个域名或 IP 地址，一个可选的端口号，以及一个可选的资源或脚本路径。PHP 或 CGI 脚本之类的程序可能有一个查询字符串。URL 的结尾可以是可选的片段标识符。

因为这些部分中有许多是可选的，所以省略了其中的一个或多个部分。清单 4-10 显示了一个例子，其中http是协议，[www.masteringhtml5css3.com](http://www.masteringhtml5css3.com)是域，路径指向shop目录。

***清单 4-10。*一个典型的网址

http://www.masteringhtml5css3.com/shop/

URI 引用在标记语言中被广泛使用，例如，作为 HTML 中a元素的href属性的属性值，或者作为 XML DTD 中SYSTEM关键字之后的系统标识符。

执着的 URIs

所有网络用户都知道，当浏览器地址栏中输入的网站地址无法检索时，会是什么样子。当用户单击网页的超链接时，也会发生同样的情况。

URIs 失去联系有很多原因。最简单的原因是文件已被移动到另一个文件夹或已从服务器上删除。另一个原因是服务器上应用的技术已经改变。例如，一家公司过去应用 CGI 脚本，但最近改用 Perl。在这种情况下，位于cgi-bin目录中的文件的 URIs 已经过时。

只有在少数情况下，停止维护 URIs 是可以接受的，例如公司或组织已经关闭。然而，应该消除无原因的变化。

设计不良的 URIs 是网页上大量死链接的罪魁祸首。将 URIs 设计成在未来几十年都可以使用是一项相当复杂的任务。

设计 URIs

可以通过最小化其中提供的信息来持久地设计 URIs[65]。更新文档的作者可能不同于原始文档的作者，因此作者不应包括在内。主题也应该被删除，因为它变化非常快。例如，一个网络技术博客应该使用目录名markup，而不是当前最新技术的确切名称(XHTML11、HTML5)。表示文档状态的目录名，如draft或latest不应该在 URIs 使用，因为文档状态会随着时间而改变。每个文档的最新版本都需要一个持久的 URI。

网站的某些部分可能只对成员开放。还应取消 URIs 的查阅，因为文件可能会从私人部门转移到公共部门，反之亦然。

在 URIs 最常提供的无用信息是文件扩展名。目前被认为是最先进的技术和工具可能会在不久的将来发生变化，或者开发人员可能会改变应用的技术。更改 URIs 不仅会影响网页或网页组件的可查找性，还会影响您的维护任务。精心选择的目录名是合乎逻辑的，很少应该在标记的引用中更改。

images 提示使用名称script或scripts作为您存储网站脚本文件的目录，而不要使用php或javascript，因为如果您以后采用进一步的脚本语言，网站文件中的 URIs 将反映一种特定的语言，而不是一个通用的名称。同样，目录名style或styles比css或xsl更实用，名字news或feed比rss或atom更吉利。名字images比jpg好听，一个doc或者docs目录可以容纳从 PDF 到 Word 文档的多种文档，而不仅仅是某一种类型。

表示软件机制的目录名，如cgi-bin，也应该从 URIs 中删除。他们可能会改变。主题名称、公司部分、访问级别或安全级别也不适合 URIs。分类可以改变。创建日期是固定的，因此可以提供。请记住，通过代理和重定向，多个 web 服务器可以隐藏在一个明显的服务器中。

除了为用户和机器提供描述性的名称，URIs 应该简单、稳定和易于管理。正确设计的 URIs 是语义网的基础部分[66]。

域名

Web 资源可以通过唯一的 IP 地址来定位。然而，它们很难被记住。因此，在大多数情况下，域名被用来代替。图 4-1 显示了域名和 URL 的关系；[www.example.com](http://www.example.com)是节点example.com的子域，节点example.com是com域的子域。域名语法规则由 RFC 1035 [67]、RFC 1123 [68]和 RFC 2181 [69]定义。

images

***图 4-1。*网址内的域名

子域树最多可以包含 127 级。每个标签最多可包含 63 个字符。根据 RFC 2181，域名的全长是 253 个字符。

传统的域名不能包含基于拉丁字母的带有音调符号的字符、非拉丁字符或文字。随着国际化域名(IDN)的引入，可以用本地字母和文字表示多种语言的名称和单词。

域名在注册之前应该仔细考虑。它们应该容易记忆和拼写[70]。还有 SEO 方面的考虑。虽然一个人的名字多年来通常保持不变，但一个产品或技术的名字可能会改变。例如，随着高清时代的开始，一家 DVD 商店的老板可能已经从销售 DVD 转向销售蓝光。但是包含 DVD 字样的域名还是代表老技术。如果使用了电影或电影这个词，这个域名就不会过时。找到一个合适的域名，仍然是免费的，并包含流行的关键字，可以是一个真正的挑战。

没有 WWW

虽然www.子域名在网络上很常见，但一些网站管理员认为它已经过时或不合适[71]。类似于不使用request@mail.example.com格式的邮件服务器，web 服务器可以允许通过主域访问网页。

在 Apache 服务器上，通过将清单 4-11 中的代码添加到.htaccess文件中，可以将www.从域内的 URIs 中移除。它的名字代表超文本访问。该文件提供目录级的访问控制，可用于授权、认证、重定向、阻塞、定制错误响应和缓存控制。

**清单 4-11。**用.htaccess配置从 URIs 移除www.

RewriteEngine On RewriteCond %{HTTP_HOST} ^www\.example\.com$ [NC] RewriteRule ^(.*)$ http://example.com/$1 [R=301,L]

这段代码使得没有必要从网站的每个超链接中逐个删除www.。然而，很大一部分网站管理员不同意将www.从 URIs 移除。根据他们的推理，www.是一个提醒，万维网(WWW)只是互联网上众多服务之一。

images 提示之前的代码实际上并不需要，因为域名注册价格中通常包含无限数量的子域名。一种常见的做法是，域所有者将主域和www子域指向 web 服务器的同一个目录。换句话说，[www.domain.com](http://www.domain.com)是首选的 URI，检索domain.com的用户被重定向到[www.domain.com](http://www.domain.com)。这样，无论有没有www，用户都可以访问相同的内容。

Base href

前面几节讨论了绝对 URL。由于许多网页组件位于与域相关联的根目录的子目录中，因此也可以使用相对 URL。然而，它们更短，并且不总是方便的。例如，如果层次太深，并且样式表位于一个网页上面三个目录的styles目录中，那么路径就会变得相当长(清单 4-12 )。

***清单 4-12。*复杂网站中的漫漫长路

<link rel="stylesheet" type="text/css" href="**../../../styles/main.css**" />

如果所有的位置都是根据根目录声明的话，情况会有所不同(清单 4-13 )。

***清单 4-13。*为网站设置基本目录

<base href=**"**http://example.com/**"** />

指定的 URL 用作文档中所有相对 URL 的基础。通过将base元素添加到文档头，可以简化最初的例子(清单 4-14 )。

***清单 4-14。*根据基目录的短路径

<link rel="stylesheet" type="text/css" href="**styles/main.css**" />

消除文件扩展名

创建永久 URIs 的关键技术之一是删除文件扩展名。在 Apache 等基于文件的 web 服务器上，可以通过内容协商【73】来完成。我们在本章前面使用了内容协商来设置 MIME 类型之间的优先级；现在我们将使用它来创建文件类型的优先顺序。因此，文件扩展名可以保留在文件中，但可以安全地从链接中删除[74]。

使用类型映射文件，Apache 服务器可以检查目录中具有给定名称和任何扩展名的所有文件，并选择适当的文件(优先级最高的文件)。类型映射文件优先于文件扩展名(即使启用了隐式文件名模式匹配的特殊搜索，多视图)。高质量图像文件变体的优先级可通过qs参数设置。在清单 4-15 中，文件logo.svg将被用于引用没有扩展名的文件的所有 URIs。如果目录中没有该文件的 SVG 版本，将使用 PNG 版本。

**清单 4-15。**由qs参数设置的文件类型的优先顺序

`URI: logo

URI: logo.svg
Content-type: image/svg+xml; qs=0.8

URI: logo.png
Content-type: image/jpeg; qs=0.5`

qs值从0.000到1.000不等。永远不会选择qs值为0.000的变体。不同变体的条目由不能在条目内使用的空行分隔。

对于拥有成百上千个文件的大型站点来说，显式设置特定文件变量的路径是不可行的。Apache 服务器上内容协商的第二个选项是使用 MultiViews 搜索特性，服务器在目录中执行隐式文件名模式匹配，并从结果中进行选择。MultiViews 是消除文件扩展名的一个很好的选择，它有助于容易维护(如果将使用新的文件版本)和优化标记(因为链接更短)。多视图可以在服务器配置或.htaccess文件中启用(清单 4-16 )。

***清单 4-16。*多视图启用

<Directory /home/www/example/htdocs> Options + MultiViews </Directory>

现在，当服务器接收到对不存在 img/logoimg/logo的请求时，服务器在images目录中搜索所有名为logo.*的文件，根据每个文件的扩展名分配 MIME 类型。然后，服务器根据偏好选择最佳匹配，并交付该资源。例如，让我们假设images目录包含以下文件变量:logo.svg、logo.png和logo.gif。当有一个针 img/logo`的查询时，优先顺序将被考虑在对该查询的回答中(清单 4-17 )。

***清单 4-17。*图像文件格式的优先顺序

Accept: image/svg+xml; q=.8, image/png; q=.5, image/gif;q=0.2, */*;q=0.1

启用多视图时，服务器将搜索引用的目录，并以最高质量(由于最高优先级)交付图像，换句话说，logo.svg。这是在中实现的，这种方式使得 HTML/XHTML 文件中的 URIs 不需要包含文件扩展名，这使得维护更容易并且减小了文件大小。URIs 现在可以忽略资源背后的技术。由于example.cimg/logo.svg变成了example.cimg/logo，整个场地使用的 logo 嵌入也从<img src="logo.svg" alt="Company logo">变成了<img src="logo" alt="Company logo">。

虽然以.html或.php结尾的 URI 在不久的将来可能会保持不变，但即使是广泛使用的文件类型在几年内也可能会很快过时或不太常用。Flash 动画(.swf)可能会被更改为 HTML5 标记(.html)，PNG 图像(.png)可能会被更改为 SVG 版本(.svg)，等等。因此，所有当前创建的网站内部链接以及其他网站上的外部链接都将无效。

万维网联盟已经掌握了消除链接中的扩展名。即使网站的图像在链接中也没有扩展名(文件有扩展名)，因此如果图像将被改变，例如从logo.png到logo.svg，那么在数百个 web 文档中指向该文件的链接不应该被修改。

带有扩展名的引用仍然可用；然而，它们不允许服务器选择当前可用的和未来的格式中的最佳者。另一方面，通过类型地图声明或启用多视图搜索【75】，多年来使用的光栅图像可以立即更新为新的 SVG 版本。不带扩展名的文件名为内容类型通用，带扩展名的文件名为内容类型专用。

有一个所有 web 服务器都支持的特殊文件，叫做index.html。当用户没有在地址栏中指定文件时，浏览器默认打开该文件(通过内容协商，扩展名不仅可以是.html，还可以是.php、.jsp、.aspx等等)。这就是为什么不需要在域名末尾输入文件名和扩展名如[www.example.com/index.html](http://www.example.com/index.html)就可以打开网站的原因。这种服务器行为也可用于创建对站点内网页的永久访问。不是将about.html、services.html、portfolio.html和contact.html文件添加到域的根目录，而是将它们作为 index.html 文件提供在它们自己的子目录中。因此，网站的页面可以作为[www.example.com/about/](http://www.example.com/about/)、[www.example.com/services/](http://www.example.com/services/)等访问，而没有文件扩展名。当然，如果在服务器上设置了每个目录的默认文件，也可以保留原始文件名。但是，在这种情况下，如果网站的宿主提供商发生变化，也应该迁移服务器设置。

命名空间 URIs

命名空间 URIs 用于唯一标识 XML 应用，并将其与其他 XML 语言区分开。当您希望将元素或属性与特定的 XML 名称空间相关联时，与名称空间 URI 相关联的前缀非常方便。虽然名称空间 URI 不一定指向特定的文档，但是很多都指向，比如 XHTML 1 使用的[www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)名称空间。 x /5(之前在第三章中讨论过)。前面的名称空间 URI 将让 XML 解析器知道文档中使用的元素和属性来自 XHTML 词汇表。

images 注意命名空间 URIs 可能揭示了相应的规范或标准，但许多只是占位符。

即使它们通常被设计成稳定的，名称空间也可能随着时间的推移而演变。为了消除这个问题，名称空间通常在purl.org【77】注册为持久统一资源定位符。如果它们指向的资源发生变化，可以在purl.org上的配置文件设置中修改 URI，这将为最新的 URI 提供永久地址。

XML 名称空间应该由相应的 W3C 推荐标准[78]控制。

总结

在本章中，您学习了 HTTP 头的一般结构，它提供了服务器发送的 web 文档的信息。到目前为止，您已经知道了最常见的 MIME 类型及其声明，这可以用来确保浏览器能够正确处理您的 web 站点组件。您还知道如何在服务器上使用内容协商来消除文件扩展名，这使得将来的维护更加容易。此外，您还学习了如何正确地服务 XHTML，这非常重要，因为用作application/xhtml+xml的 XHTML 文档将由 XML 解析器解析，而不是由对错误不太敏感的 HTML 解析器解析。你知道如何设计 URIs 来最大化他们的持久性。

到目前为止，您已经准备好创建符合标准的标记，并使用适当的设置来提供网站文件。在下一章中，你将学习使用层叠样式表(CSS)将网站内容从其表现中分离出来的技术。

参考文献

诺丁汉 M，Mogul J (2005) HTTP 标题字段注册。RFC 4229。互联网协会。tools.ietf.org/html/rfc4229。于 2011 年 8 月 15 日访问
IANA (2007)哑剧媒体类型。互联网号码分配机构。www.iana.org/assignments/media-types/。2011 年 1 月 1 日访问
Murata M，Laurent S，Kohn D (2001) XML 媒体类型。互联网协会。tools.ietf.org/html/rfc3023。2010 年 10 月 8 日访问
Baker M，Stark P (2002)“应用/xhtml+xml”媒体类型。互联网协会。tools.ietf.org/html/rfc3236。2010 年 10 月 8 日访问
Masayasu I (2002) XHTML 媒体类型。W3C 注释。万维网联盟。www.w3.org/TR/2002/NOTE-xhtml-media-types-20020801/。2010 年 10 月 8 日访问
Nottingham M，say re R(eds)(2005)Atom 联合格式。互联网协会。tools.ietf.org/html/rfc4287。2010 年 10 月 8 日访问
IANA (2007)哑剧媒体类型。互联网号码分配机构。www.iana.org/assignments/media-types/。2010 年 10 月 8 日访问
IANA (2002)申请媒体类型。互联网号码分配机构。www.iana.org/cgi-bin/mediatypes.pl。2011 年 1 月 1 日访问
Nottingham M，say re R(eds)(2005)Atom 联合格式。提议的标准。互联网协会。tools.ietf.org/html/rfc4287。2010 年 11 月 22 日访问
Gregorio J，de Hora B (eds) (2007)原子出版协议。提议的标准。互联网协会。tools.ietf.org/html/rfc5023。2010 年 11 月 22 日访问
Hoehrmann B (2006)脚本媒体类型。互联网协会。tools.ietf.org/html/rfc4329。2011 年 1 月 1 日访问
crock Ford D(2006)JavaScript 对象符号(json)的应用/json 媒体类型。RFC 4627。互联网协会。tools.ietf.org/html/rfc4627。2011 年 1 月 1 日访问
Carlisle D，Ion P，Miner R(eds)(2010)MathML 实例的媒体类型选择。数学标记语言(MathML)3.0 版。W3C 推荐。万维网联盟。www.w3.org/TR/MathML3/appendixb.html2011 年 1 月 2 日访问
自由 N，博伦斯坦 N (1996)八位流亚型。在:多用途互联网邮件扩展(MIME)第二部分:媒体类型。RFC 2046。互联网协会。tools.ietf.org/html/rfc2046。2011 年 1 月 1 日访问
冈萨尔维斯 I，菲佛 S，蒙哥马利 C (2008)奥格媒体类型。RFC 5334。互联网协会。tools.ietf.org/html/rfc5334。2011 年 1 月 1 日访问
Taft E，Pravetz J，Zilles，Masinter L (2004)应用/pdf 媒体类型。RFC 3778。互联网协会。tools.ietf.org/html/rfc3778。2011 年 1 月 1 日访问
多用途因特网邮件扩展(MIME)第一部分:因特网消息体的格式。RFC 2045。互联网工程任务组。tools.ietf.org/html/rfc2045。2011 年 2 月 18 日访问
自由 N，博伦斯坦 N ( 1996) PostScript 亚型。在:多用途互联网邮件扩展(MIME)第二部分:媒体类型。RFC 2046。互联网协会。tools.ietf.org/html/rfc2046。2011 年 1 月 1 日访问
Swartz A (2004)应用/rdf+xml 媒体类型注册。RFC 3870。互联网协会。www.ietf.org/rfc/rfc3870.txt。2011 年 1 月 2 日访问
IANA(2007)MIME 类型应用/rtf 的注册。互联网号码分配机构。www.iana.org/assignments/media-types/application/rtf。2011 年 1 月 3 日访问
莱文森 E (1995) SGML 媒体类型。互联网号码分配机构。www.rfc-editor.org/rfc/rfc1874.txt。2011 年 1 月 3 日访问
Hoschka P (2006)应用/smil 和应用/smil+xml 媒体类型。RFC 4536。互联网协会。www.ietf.org/rfc/rfc4536.txt。2011 年 1 月 3 日访问
Baker M，Nottingham M (2004)“应用/soap+xml”媒体类型。RFC 3902。互联网协会。tools.ietf.org/html/rfc3902。2011 年 1 月 1 日访问
Prud'hommeaux E，Seaborne A (2007)互联网媒体类型、文件扩展名和 Macintosh 文件类型。in:RDF 的 SPARQL 查询语言。万维网联盟。www.w3.org/TR/2007/CR-rdf-sparql-query-20070614/#mediaType。2011 年 1 月 3 日访问
Beckett D，Broekstra J (eds) (2007)互联网媒体类型、文件扩展名和 Macintosh 文件类型。In: SPARQL 查询结果 XML 格式。万维网联盟。www.w3.org/TR/2007/CR-rdf-sparql-XMLres-20070925/#mime。2011 年 1 月 3 日访问
Baker M，Stark P (2002)“应用/xhtml+xml”媒体类型。RFC 3236。互联网协会。tools.ietf.org/html/rfc3236。2011 年 1 月 1 日访问
Murata M，St.Laurent S，Kohn D (2001) XML 媒体类型。RFC 3023。互联网协会。tools.ietf.org/html/rfc3023。2011 年 1 月 1 日访问
凯 M(编辑)(2007)XSLT 媒体类型。在:XSL 转换(XSLT)版本 2.0 中。W3C 推荐。万维网联盟。www . w3 . org/TR/2007/REC-XSLT 20-2007 01 23/# media-type-registration。2011 年 1 月 3 日访问
保罗·林德纳(编辑)(1993)注册新的 MIME 内容类型/子类型应用/zip。互联网号码分配机构。www.iana.org/assignments/media-types/application/zip。2011 年 1 月 1 日访问
ashbridge M(2006)MIME 类型应用的注册/vnd.google-earth.kml+xml。互联网号码分配机构。www . iana . org/assignments/media-types/application/vnd . Google-earth . KML+XML。2011 年 1 月 3 日访问
ashbridge M(2006)MIME 类型应用的注册/vnd.google-earth.kmz。互联网数字地址分配机构。www . iana . org/assignments/media-types/application/vnd . Google-earth . kmz。2011 年 1 月 3 日访问
林德纳 P (1993)注册的媒体类型申请/msword。互联网号码分配机构。www.iana.org/assignments/media-types/application/msword2011 年 1 月 2 日访问
gill SS(1996)MIME 类型应用的注册/vnd.ms-excel。互联网号码分配机构。www . iana . org/assignments/media-types/application/vnd . ms-excel。2011 年 1 月 3 日访问
gill SS(1996)MIME 类型应用的注册/vnd.ms-powerpoint。互联网号码分配机构。www . iana . org/assignments/media-types/application/vnd . ms-PowerPoint。2011 年 1 月 3 日访问
舒伯特 S (2009)应用/vnd . oasis . open document . graphics MIME 类型。互联网号码分配机构。www . iana . org/assignments/media-types/application/vnd . oasis . open document . graphics。2011 年 1 月 2 日访问
舒伯特 S (2009)应用/vnd . oasis . open document . presentation MIME 类型。互联网号码分配机构。www . iana . org/assignments/media-types/application/vnd . oasis . open document . presentation。2011 年 1 月 2 日访问
37.舒伯特 S (2009)应用/vnd . oasis . open document . spread sheet MIME 类型。互联网号码分配机构。www . iana . org/assignments/media-types/application/vnd . oasis . open document . spread sheet。2011 年 1 月 2 日访问
舒伯特 S (2009)应用/vnd . oasis . open document . text MIME 类型。互联网号码分配机构。www . iana . org/assignments/media-types/application/vnd . oasis . open document . text。2011 年 1 月 2 日访问
尼尔森 M (2000)音频/mpeg 媒体类型。RFC 3003。互联网协会。tools.ietf.org/html/rfc3003。2011 年 1 月 1 日访问
barbato L(2008)Vorbis 编码音频的 RTP 有效载荷格式。RFC 5215。互联网协会。tools.ietf.org/html/rfc5215。2011 年 1 月 1 日访问
Windows Media Services 的 Microsoft Support (2003) MIME 类型设置。KB 288102。微软公司。support.microsoft.com/kb/288102。2011 年 1 月 2 日访问
弗莱舍曼 E (1998)波和 AVI 编解码器注册。RFC 2361。互联网协会。tools.ietf.org/html/rfc2361。2011 年 1 月 1 日访问
Boutell T 等人(1997) PNG(便携式网络图形)规范版本 1.0。RFC 2083。互联网工程任务组。tools.ietf.org/html/rfc2083。2011 年 1 月 1 日访问
Randers-Pehrson G (2009)媒体类型图像/png 的注册。互联网号码分配机构。www.iana.org/assignments/media-types/image/png。2011 年 1 月 2 日访问
Andersson O 等人(2008)图像/svg+xml 的媒体类型注册。In:可缩放矢量图形(SVG) Tiny 1.2 规范。W3C 推荐。www.w3.org/TR/SVGTiny12/mimereg.html。2011 年 1 月 2 日访问
Parsons G，Rafferty J (2002)标记图像文件格式(TIFF)-图像/tiff MIME 子类型注册。RFC 3302。互联网协会。tools.ietf.org/html/rfc3302。2011 年 1 月 1 日访问
Butcher S (ed) (2003)供应商树- vnd.microsoft.icon .互联网数字地址分配机构。www . iana . org/assignments/media-types/image/vnd . Microsoft . icon。2011 年 1 月 2 日访问
Levinson E(1998)MIME 多部分/相关内容类型。RFC 2387。互联网协会。tools.ietf.org/html/rfc2387。2011 年 1 月 2 日访问
Masinter L (1998)从表单返回值:多部分/表单数据。RFC 2388。互联网协会。tools.ietf.org/html/rfc2388。2011 年 2 月 18 日访问
Galvin J，Murphy S，Crocker S，Freed N(1995)MIME 的安全多部分:多部分/签名和多部分/加密。RFC 1847。互联网工程任务组。tools.ietf.org/html/rfc1847。2011 年 1 月 2 日访问
Lie H，Bos B，Lilley C (1998)文本/css 媒体类型。RFC 2318。互联网协会。tools.ietf.org/html/rfc2318。2011 年 1 月 2 日访问
Shafranovich Y (2005)逗号分隔值(CSV)文件的通用格式和 MIME 类型。RFC 4180。互联网协会。tools.ietf.org/html/rfc41802011 年 1 月 2 日访问
“文本/html”媒体类型。RFC 2854。互联网协会。tools.ietf.org/html/rfc2854。2011 年 1 月 2 日访问
Hoehrmann B (2006)脚本媒体类型。RFC 4329。互联网协会。tools.ietf.org/html/rfc4329。2011 年 1 月 2 日访问
Gellens R (2004)文本/普通格式和 DelSp 参数。互联网协会。tools.ietf.org/html/rfc3676。2011 年 1 月 2 日访问
Lim Y，Singer D(2006)MPEG-4 的 MIME 类型注册。RFC 4337。tools.ietf.org/html/rfc4337。2011 年 1 月 2 日访问
冈萨尔维斯 I，菲佛 S，蒙哥马利 C (2008)奥格媒体类型。RFC 5334。互联网工程任务组。tools.ietf.org/html/rfc5334。2011 年 1 月 2 日访问
林德纳·P(编辑)(1993 年)。MIME 内容类型/子类型视频/quicktime 的注册。互联网号码分配机构。www.iana.org/assignments/media-types/video/quicktime。2011 年 1 月 2 日访问
Windows Media Services 的 Microsoft Support (2003) MIME 类型设置。微软公司。support.microsoft.com/kb/288102。2011 年 1 月 2 日访问
诺丁汉 M，Mogul J (2005) HTTP 标题字段注册。互联网协会。tools.ietf.org/html/rfc4229。2010 年 10 月 8 日访问
Fielding R，Irvine UC，Gettys J，Mogul J，Frystyk H，Masinter L，Leach P，Berners-Lee T (1999)超文本传输协议-HTTP/1.1。万维网联盟和互联网协会。www.w3.org/Protocols/rfc2616/rfc2616-sec14.html。2010 年 10 月 8 日访问
Berners-Lee T，Fielding R，Masinter L (1998)统一资源标识符(URI):一般语法。RFC 2396。互联网协会。tools.ietf.org/html/rfc2396。2011 年 1 月 18 日访问
伯纳斯-李 T，马辛特 L，麦卡希尔 M(编辑)(1994 年)统一资源定位器(网址)。RFC 1738。互联网工程任务组。tools.ietf.org/html/rfc1738。2011 年 1 月 18 日访问
Mealling M，dene nberg R(eds)(2002)W3C/IETF URI 计划兴趣小组联合报告:统一资源标识符(URIs)、URL 和统一资源名称(urn):澄清和建议。RFC 3305。互联网协会。tools.ietf.org/html/rfc3305。2011 年 1 月 18 日访问
伯纳斯-李 T (1998)酷 URIs 不改变。万维网联盟。www.w3.org/Provider/Style/URI。2010 年 12 月 13 日访问
Sauermann L，Cyganiak R (eds)，Ayers D，vlkel M(2008)语义网的酷 URIs。W3C 兴趣小组说明。万维网联盟。www.w3.org/TR/cooluris/。2011 年 2 月 18 日访问
Mockapetris P (1987)域名-实施和规范。RFC 1035。互联网工程任务组。tools.ietf.org/html/rfc1035。2011 年 1 月 19 日访问
Braden R (ed) (1989)互联网主机的要求-应用和支持。RFC 1123。互联网工程任务组。tools.ietf.org/html/rfc1123。2011 年 1 月 19 日访问
Elz R，Bush R (1997)对 DNS 规范的说明。RFC 2181。互联网工程任务组。tools.ietf.org/html/rfc2181。2011 年 1 月 19 日访问
尼尔森 J (2007) URL 作为用户界面。雅各布·尼尔森。www.useit.com/alertbox/990321.html。2011 年 1 月 19 日访问
没有 WWW (2008) www。已弃用。no-www.org/。2011 年 1 月 19 日访问
汉普顿 M (2011) www。不推荐使用。迈克尔·汉普顿。www.yes-www.org/。2011 年 1 月 19 日访问
Fielding R，Irvine UC，Gettys J，Mogul J，Frystyk H，Masinter L，Leach P，Berners-Lee T (1999)内容协商。输入:超文本传输协议-HTTP/1.1。互联网协会。www.w3.org/Protocols/rfc2616/rfc2616-sec12.html。2010 年 10 月 8 日访问
TASF (2011)内容协商。Apache HTTP 服务器版本 2.0。阿帕奇软件基金会。httpd.apache.org/docs/2.0/content-negotiation.html。2011 年 1 月 23 日访问
TASF (2011)阿帕奇模块修改 _ 协商。阿帕奇软件基金会。httpd . Apache . org/docs/2.0/mod/mod _ negotiation . html # type maps。2011 年 1 月 23 日访问
Berners-Lee T (ed) (2011)命名空间随时间而变化。在:W3C 命名空间的 URIs。万维网联盟。www.w3.org/2005/07/13-nsuri。2011 年 2 月 18 日访问
OCLC，泽费拉(2011)持久统一资源定位器(PURL)。OCLC 在线计算机图书馆中心有限公司。purl.org。2011 年 2 月 18 日访问
Bray T，Hollander D，Layman A，Tobin R，Thompson HS(eds)(2009)XML 1.0 中的名称空间(第三版)。W3C 推荐。万维网联盟。www.w3.org/TR/xml-names/。2011 年 2 月 18 日访问

五、样式表

网站标准化的金科玉律是将内容和外观分开。XHTML 元素消除了样式属性。样式表应该在外部文件中提供。CSS 中提供的样式定义与早期 HTML 文档中应用的内联样式具有相似的特性。然而，命名约定和附加机制经常令人困惑。除了代码有效性之外，还有其他一些特性，如范围、属性值继承和分隔符的顺序，也应该考虑这些特性以获得优化的 CSS 文件。

在这一章中，你将学习常用的网站样式标准，包括一般的 CSS 语法规则和对每个网站都至关重要的选择器语法。在研究了不同 CSS 版本的属性之间的差异之后，您将对标准化问题和提供向后兼容性的挑战有一个坚实的理解。您还将熟悉 CSS 规则集优化的基本原则。此外，您将分析渲染引擎用于确定要应用的样式的方法。

层叠样式表

层叠样式表 ( CSS )是 W3C 推出的一种样式表语言(style language)。层叠是指确定样式规则优先级的过程。CSS 用于定义结构化文档的表示语义。它提供了对 HTML 和 XHTML 文档及其元素的视觉和听觉特征的控制。一些典型的特征是，例如，字体、颜色、背景、边距、边框和层。CSS 提供了一个强大的特性，不仅支持可视媒体，还支持在不同类型的设备上运行的特殊浏览器:媒体类型。CSS 不仅支持最常用的视觉媒体类型，还支持其他媒体类型，这些媒体类型可以按如下方式分组:

听觉:听觉浏览器的属性。例子:pitch、pitch-range、play-during、richness、voice-family。
交互:允许用户交互的设备属性。例子:nav-down、nav-index、nav-left、nav-right、nav-up。

尽管与 web 文档相关的大多数样式都是视觉的，CSS 也支持听觉属性，包括音量、说话、暂停、提示、空间属性和声音特征。它们用于听觉表达，例如当一个文档被转换为纯文本并输入到屏幕阅读器时。除了提高可访问性，听觉样式表在在线教育、娱乐、车内使用等方面也有潜力。

分页和不连续:分割成一页或多页的文件内容属性，如要打印的文件页面。例子:image-orientation、page、page-break-before、page-break-inside、page-policy、size。
语音:语音样式属性。例子:cue、cue-after、cue-before、mark、mark-after、mark-before、pause、speak-header、speak-numeral、speak-punctuation、speech-rate、stress。

正如您将在本章后面看到的，大多数 CSS 属性都是可视属性，或者可以应用于所有媒体，但也有许多属性是为特定媒体类型设计的。

CSS 的主要概念之一是将 HTML/XHTML 内容与外观分开，换句话说，将样式与结构区分开来。另一个目标是集中化，这意味着从一个位置提供对多个文档样式的完全控制。

尽管 CSS 主要用于样式化(X)HTML web 文档，但它也可以应用于所有种类的 XML 文档，例如 XUL 或 SVG [1 ]。在 SVG 中，许多 CSS 属性在样式中被重用，例如字体属性、文本属性和其他可视属性。SVG 还使用 CSS 特性，比如 CSS 语法、选择器、外部样式表、级联、继承和 at-rules，稍后将详细描述其中的每一项。由于 SVG 是一个 XML 应用，内部 CSS 样式表可以作为 CDATA 部分提供(清单 5-1 )。

***清单 5-1。*在 SVG 中嵌入 CSS

CSS 甚至可以在有或没有 MathML 的情况下用于数学符号，MathML 是在第三章第一部分中讨论的标记语言，它是专门为在网络上发布方程式和数学符号而设计的 [2 ， 3 ]。

级别、配置文件和模块

CSS 的各种版本通常被称为 CSS 级别。每个 CSS 级别都基于前一个级别，并添加了新的属性和功能。三个最重要的版本是 CSS1、CSS 2.1 和 CSS3。

为特定设备创建的至少一个 CSS 级别的子集被称为 CSS 简档，例如 CSS 打印简档 [4 、CSS 电视简档 [5 、以及 CSS 移动简档 [6 。

构成 CSS3 的规范被称为 CSS 模块。

images 注意配置文件不等于媒体类型，这是在 CSS2 中引入的。

下面几节将介绍三个主要的 CSS 版本。

CSS1

CSS Level 1 是第一个级联样式表规范，发布于 1996 年。它是 W3C 推荐的，但是它的开发已经被 W3C [7 ]关闭了。CSS1 引入了字体属性、元素颜色、对齐、表格、边距、边框、填充和定位的样式。CSS1 属性可以应用于唯一标识的元素或元素组。

CSS2 和 CSS 2.1

CSS Level 2 是作为 CSS1 的超集开发的，并且已经扩展了几个新特性。最重要的是层顺序(z-index)、三种元素定位(absolute、relative和fixed)、aural媒体类型和双向文本。

CSS Level 2 Revision 1，通常缩写为 CSS 2.1 [8 ]，多年来一直是 Web 上最终的样式解决方案。CSS 2.1 在 2011 年成为 W3C 推荐标准。

CSS3

CSS3 的开发始于 2005 年。与其他 CSS 规范相比，CSS3 是模块化的 [9 。它由单独的文档描述，如模块选择器、媒体查询、文本、背景和边框、颜色、2D 变换、3D 变换、过渡、动画和多栏。这些模块处于不同的开发和浏览器实现阶段。直到最近，只有少数模块被标准化了，比如色彩模块 [10 ]。

CSS3 中引入了各种新的功能和特性，如border-radius、box-shadow、background-origin；HSL、HSLA 和 RGBA 的颜色声明；text-shadow；text-overflow；word-wrap；box-sizing；属性选择器；多栏布局；网络字体；和演讲。

语法和惯例

由不存在的属性、不正确的值、格式错误的声明等引起的解析错误可以通过遵循正确的 CSS 语法来消除。该语法确保了 CSS 在语法上的正确性，这使得浏览器能够正确地处理解析规则、选择器、属性、值和单元符号。虽然基本规则是相似的，但是每个 CSS 版本都有自己的语法 [11 ]。作为 CSS 2.1 的超集，CSS3 引入了额外的语义约束。

标识符和类别

ID 和类标识符应该总是以字母开头。因为这些标识符对应于id和class标记属性，并且因为具有id属性的元素在网页中是唯一的，所以 ID 标识符可以用于样式化页面的唯一元素。如果相同的样式应用于多个元素，应该使用类标识符。标识符名称区分大小写。强烈推荐使用字母a–z和数字0–9，尽管下划线和连字符也是允许的。名字应该有意义和语义。应该使用唯一的名称。

单位

CSS 支持多个测量值，这些测量值汇总在表 5-1 中。

images

images 注尽管种类繁多，但大部分时间只使用其中三种单位:%、em和px。

颜色声明

CSS 中有几种表示颜色的符号。以下部分提供了一个简要的概述，这是很重要的，因为颜色声明的例子将在整个章节的演示规则集中大量使用。

十六进制表示法

十六进制表示法是目前为止 CSS 中声明颜色最常用的表示法。在网页上使用的 RGB 颜色空间中，任何颜色都可以通过加色混合来表示，使用三种颜色的不同强度变量:红色、绿色和蓝色(RGB)。三种基色的 256 种色调足以混合任何颜色，因为人眼不能区分强度差为 1/256 的任何两种相邻的红色、绿色或蓝色色调。由于每个通道有 256 个色调，每个通道的值从 0 到 255(十六进制表示法中的00到ff)不等；0 是通道最暗的阴影，255 是最亮的。

十六进制数字系统应用位置(也称为位值)符号。与十进制数字系统的 10 个数字相反，十六进制系统中有从0到9和a到f的 16 个符号(字母代表从10到15的值)。最后一个符号对应于乘以 16 的 0 次^次幂^{2的值，最后一个符号之前的符号代表乘以 16 的 1 次^次幂的值，依此类推。}

因此，十六进制的符号0–9对应十进制的相同数字，而十六进制的a等于十进制的10、b到11、c到12、d到13、e到14、f到15。可以通过位值计算更多的数字(从0开始)。比如十六进制值e8对应十进制值232，因为 14 16¹+8 16⁰= 14 16+8 1 = 224+8 = 232。从十进制到十六进制的转换可以类似地执行，但是计算过程相反。比如十进制记数法中的86是十六进制记数法中的56，因为 86/16 = 5.375，所以第一位数字是 5。5 16=80，余数是 6，是第二位数，因为 5 16¹+6 16⁰= 5 16+6 1 = 80+6 = 86。

在 CSS 中，十六进制颜色声明以一个数字符号(#)开始，后面是六个十六进制(hex)值，每个通道两个。它们被用来任意混合颜色。比如纯红色可以通过#ff0000设置。换句话说，红色通道的强度最大(ff)，而绿色和蓝色的强度最小(00)。同样，纯绿色是#00ff00，而纯蓝色是#0000ff。如果每个通道的值都设置为00，则结果为黑色(#000000)。如果所有值都是最大值，则得到白色(#ffffff)。如果每个通道的值相同，结果是灰色阴影(清单 5-2 )。

***清单 5-2。*为所有段落声明灰色字体颜色

p { color: #898989; }

images 提示如果每个通道的两位数相同，可以通过省略第二位来缩写。例如，#f00代表红色，#0f0代表绿色，#00f代表蓝色，#000代表黑色，#fff代表白色等等。

RGB 和 RGB(a)符号

RGB 模型中每个颜色通道的饱和度也可以用十进制数或百分比来声明(清单 5-3 )。

***清单 5-3。*简单的 RGB 符号

p { color: rgb(0, 255, 0) /* equivalent to rgb(0, 100%, 0), #00ff00 and #0f0 */ }

任何非零的 0 次幂都是 1。

CSS 2.1 支持前面的符号，但在 CSS3 中已经扩展了颜色的透明度(alpha 通道)。这种符号被称为 RGB(a)。例如，透明度为 75%的纯绿色(相当于 25%的不透明度)可以如清单 5-4 中的所示进行声明。请注意，alpha 始终是一个百分比(从 0 到 1 的值)，而不是像其他颜色一样从 0 到 255。

***清单 5-4。*CSS3 中的一个 RGB(a)符号

p { color: rgb(0, 255, 0, **0.25**); }

HSL(a)符号

在 CSS 中，颜色也可以用 HSL(a)符号来表示，其中颜色由它们的色调、饱和度和亮度来表示。第一个值可以是 0 到 360 之间的数字，而第二个和第三个值可以声明为百分比。alpha 通道的工作方式与 RGB(a)相同(清单 5-5 )。

***清单 5-5。*HSL(A)符号中的透明色

#warning { background-color: hsl(240, 78%, 50%, 0.25); }

提示如果你想使用照片或网站上看到的颜色，你可以通过多种方式获得代码。首先，您可以检查页面或站点的样式表中的颜色代码。如果不方便，还有其他技术可以得到色标。如果您的计算机上没有安装高级图像处理应用，您只需使用“打印屏幕”按钮创建一个屏幕截图，然后将其复制并粘贴到基本的图像处理应用，如 Microsoft Paint。选择拾色器工具，然后单击您选择的颜色。从“颜色”菜单中选择“编辑颜色”选项，然后单击“定义自定义颜色”。 ³ 你得到颜色的色相、明度、饱和度，以及红、绿、蓝分量。因为它们是以十进制提供的，所以需要用诸如 Windows Calculator 之类的应用将其转换成十六进制(在科学模式下)。如果您有比 Paint 更高级的图像操纵器，如 Adobe Photoshop，您可以在粘贴的图像上使用拾色器工具，以获得不同颜色空间和符号的颜色代码，包括十进制和十六进制。

Windows 7 中的 Paint 版本有一个功能区界面，而不是早期版本中的传统菜单。

网页安全色

在彩色电脑屏幕的最初几年，电脑只支持 256 种不同的颜色。在那个时代，216 种颜色的列表被称为网页安全色。这种跨浏览器调色板用于确保所有计算机，包括使用 256 色调色板的计算机，都能正确显示颜色。网页安全色由每个通道的00、33、66、cc和ff值组成(例如00ff00、663300、993300、cc6600和ff9966)。

images 注意从表现的角度来看，网页安全色不再有趣，因为所有现代的屏幕、显示器和投影仪都能够表现 RGB 色彩空间中的任何颜色。

颜色名称

CSS 支持 16 种基本颜色的名称。这些关键字比它们对应的十六进制值 ⁴ ( 表 5-2 )更容易读懂。然而，强烈建议使用十六进制记数法(见第十三章)。

images

⁴ 学会了用十六进制记数法调色后，使用数值就成了例行任务。

选择器语法

一个 CSS 选择器识别 CSS 样式将被应用的那些标记元素。特定的元素组由各种类型的选择器决定样式。一个 CSS 规则(或者多个声明的 CSS 规则集)的一般结构如图图 5-1 所示，可以用清单 5-6 所示的伪代码编写。

images

图 5-1。 CSS 规则结构

***清单 5-6。*CSS 规则集的伪代码

selector [, selector*2*, …, selector*n*] [:pseudo-class] { property: value; [property*2*: value*2*; … property*m*: value*m*;] }

同一个选择器的多个声明可以组织成用分号(;)分隔的组。

images 提示虽然在规则集中省略最后一个声明后面的分号是合法的，但是强烈建议总是提供分号。它使维护和修改变得更加容易，当一个声明被移动到 CSS 中的另一个位置时变得非常方便。

例如，清单 5-7 中的规则可以写成清单 5-8 所示。

***清单 5-7。*单独声明同一个元素的规则不是最佳选择

**h1** { font-weight: bold } **h1** { font-size: 1.6em } **h1** { font-family: Verdana }

***清单 5-8。*同一元素的规则应分组

**h1** { font-weight: bold; font-size: 1.6em; font-family: Verdana; }

虽然它们是等效的，但出于许多原因，第二个版本应该是首选的。首先，它更短，因此有助于码长优化。其次，其他选择器的进一步声明可能会意外地插入单行之间，使得 CSS 文件更难维护。最后，第二种排列更容易阅读，这使得开发更容易。

元素选择器

如果一个网站的所有段落都要用 Garamond 以 1.2em 的字体大小编写，那么规则集看起来就像清单 5-9 中的。

***清单 5-9。*所有段落的规则集

**p** { font-size: 1.2em; font-family: Garamond; }

这适用于标记中的所有段落，例如清单 5-10 中的段落。

***清单 5-10。*由清单 5-9 的规则集设置样式的段落

**<p>** A paragraph. **</p>** **<p>** Another paragraph. **</p>**

自然，段落的子集可能有不同的规则集，部分或全部覆盖一般规则(见本章后面的“层叠”一节)。

在前面的示例中，选择器选择了一个标记元素。这样的选择器被称为元素选择器，并自己应用相应的元素名称。花括号包含要设置样式的元素的属性，以及应该将它们更改为的值。花括号和它们之间的内容是声明块。属性-值对之间用分号分隔。属性与其值之间用冒号分隔。每行被称为一个声明或声明。

选择器由组合子分隔，即空格、 > 或 + 。在组合符和它们周围的简单选择器之间可能会出现更多的空白字符 [12 ]。

如果应用相同的 CSS 规则，选择器也可以被分组。应该使用逗号( , )作为组合符。对通用规则进行分组有助于 CSS 代码的优化。例如，清单 5-11 分别用id属性articles和relatedlinks改变两个div元素的颜色和字体大小。

***清单 5-11。*通用规则可以分组以避免重复

**#articles, #relatedlinks** { color: white; font-size: 1.8em; }

班级选择器

以句点(.)开头的类选择器，选择所有class属性与其中指定的值相同的元素。由于class属性可以在一个网页中多次应用，所以类选择器可以用相同的类标识符来设计文档中任何元素的样式。例如,清单 5-12 中的规则在标记中被引用，如清单 5-13 和清单 5-14 所示。

***清单 5-12。*类选择器示例

**.abstract** { font-size: 1.1em; }

***清单 5-13。*清单 5-12 中的类选择器可以应用于标题

<h3 **class="abstract"**>Abstract</h3>

***清单 5-14。*同样的类选择器也可以应用于段落

`<p class="abstract">
The abstract of the first Chapter

如果规则集应该应用于具有指定类名的某些类型的元素，则可以通过在句点之前提供元素名称来编写更具体的规则。例如，如果前面的规则只对段落有效，那么它应该通过声明所需的元素类型来扩展(清单 5-15 )。

***清单 5-15。*对所有具有类名abstract 的段落的规则

**p.abstract** { font-size: 1.1em; }

ID 选择器

某些标记元素在整个 web 文档中是唯一的；也就是说，它们在每个网页上只能出现一次。它们由标识符属性id识别。那些选择 web 页面上唯一元素的选择器，其id属性等于其中指定的值，这些选择器被称为 ID 选择器，并以一个散列标记(#)开始。清单 5-16 显示了一个例子。

***清单 5-16。*一个 ID 选择器示例

**#main** { margin-left: 120px; }

清单 5-17 显示了一个应用了先前规则的标记示例。

***清单 5-17。*可应用 ID 选择器#main的示例内容

`<div id="main">
The main content has a left margin of 120 pixels.

通用选择器

一个通用选择器匹配网页上任何元素类型的名称(任何元素，不管是什么类型)。通用选择器标有星号(*)。清单 5-18 显示了一个例子。

***清单 5-18。*通用选择器示例

*****.caution { color: #ff2318; }

如果通用选择器不是简单选择器的唯一组件，星号可以省略(清单 5-19 )。

***清单 5-19。*可以安全省略星号的规则

.caution { color: #ff2318; }

考虑到清单 5-20 中显示的标记，选择器div * em将匹配大多数em元素，并应用于h1 ( favorite)、p ( impressive)、第一个li元素(hybrid electric)和第二个li ( fuel efficient)中em元素的内容。在后两种情况下，*与ul或li匹配。

***清单 5-20。*通用选择器的示范标记

My favorite car

The Lexus CT 200h is impressive due to the following reasons:

It is a hybrid electric car.

It is a fuel efficient car.

That’s why it is a nice entry-level luxury hatchback.

因为内容为entry-level luxury的em元素是div元素的直接子元素，所以*在div和em之间没有匹配的内容。

images 注意通用选择器在 Internet Explorer 7 及更早版本中的实现并不完美。

属性选择器

属性选择器选择方括号内指定属性的每个元素。属性类型或具有特定值的属性可以用它们来设置样式。例如，通过应用清单 5-21 中所示的规则，文档中所有具有title属性的img元素都可以有一个黄色边框。

**清单 5-21。**带有属性的属性选择器示例

**img[title]** { border-color: #ff0; }

属性选择器不仅可以用于属性，还可以用于属性-属性值对。例如，使用清单 5-22 所示的 CSS 规则，可以给网页中的所有logo.png图像添加 10 像素的边框。

***清单 5-22。*带有属性和属性值的属性选择器

**img[src="logo.png"]** { border: 10px; }

这适用于整个网页中清单 5-23 中标记的多个实例。

***清单 5-23。*一个标记代码，其中清单 5-22 被应用

<**img src="logo.png"** alt="logo" />

子选择器

子选择器当且仅当右边的元素是左边元素的直接子元素时，选择选择器中右边的元素。在子代和祖先之间使用大于号(**>**)。清单 5-24 显示了一个例子。

***清单 5-24。*子选择器示例

**td > a** { font-weight: bold; }

这适用于表格数据单元格内的所有超链接，例如在清单 5-25 中，但一般不影响超链接，例如在清单 5-26 中。

***清单 5-25。*清单 5-24T5 中子选择器的超链接示例

**<td><a** href="http://www.nairobicity.go.ke/"**>**Nairobi, Kenya**</a></td>**

***清单 5-26。*子选择器示例不适用于不是数据单元格子元素的锚点

**<a** href="http://www.capital.sp.gov.br/"**>**São Paulo, Brazil**</a>**

images 注意Internet Explorer 6 及更早版本不支持子选择器。

后代选择器

DOM 树上较低位置的元素样式可以由使用空格分隔的元素名称的后代选择器提供。与子选择器相比，后代选择器不要求子元素是祖先的直接子元素。清单 5-27 显示了一个例子。

***清单 5-27。*后代选择器示例

**td a** { font-weight: bold; }

这适用于表格数据单元格内的所有超链接，例如清单 5-25 (类似于前面显示的子选择器)或清单 5-28 。然而，这个规则一般不影响超链接。

***清单 5-28。*一个锚示例，其中清单 5-27 被应用

**<td><p>**One of the unique attractions of **<a** href="http://www.nairobicity.go.ke/"**>**Nairobi, Kenya**</a>** is the Nairobi National Park.**</p></td>**

注意子选择器和后代选择器之间的区别。

相邻同级选择器

相邻同级选择器选择选择器右侧的元素，当且仅当它旁边有左侧元素的实例时。**+**符号被用作组合符。兄弟元素在 DOM 层次结构中处于同一级别。清单 5-29 显示了一个例子。

***清单 5-29。*相邻同胞选择器示例

**h2 + p** { color: #0f0; }

该选择器适用于清单 5-30 ，但不适用于清单 5-31 和清单 5-32 。

***清单 5-30。*应用来自清单 5-29 的绿色的元素

**<h2>**Heading**</h2>** **<p>**A paragraph**</p>**

***清单 5-31。*不适用清单 5-29 中所示规则的一段

**<p>**A paragraph**</p>**

***清单 5-32。*由于段落前缺少二级标题，此处也不应用该样式

**<h1>**Heading**</h1>** **<p>**A paragraph**</p>**

images 注意IE6 或更早版本不支持相邻同级选择器。

伪班

伪类使用冒号将元素与其状态分开，是更复杂的选择器。根据超链接的状态，它们经常用于确定超链接的样式。例如，清单 5-33 适用于所有的a元素，但是只有当鼠标悬停在链接上时。

**清单 5-33。**当一个锚停留在上时应用的链接颜色

**a:hover** { color: #000080; }

再比如清单 5-34 ，将所有已经访问过的 ⁵ 的超链接颜色改为绿色。

⁵ 显示当前浏览器历史记录

***清单 5-34。*链接颜色设置为已访问的超链接

**a:visited** { color: #0f0; }

伪元素

伪元素可用于为特定元素部分而非整个元素添加样式。它们也可以应用于在某些元素之前或之后插入内容。组合符是一个冒号(:)。例如，清单 5-35 中的 CSS 规则将网页中所有段落的第一个字母的字体大小改为 2 em。

***清单 5-35。*段落第一个字母的规则

**p:first-letter** { font-size: 2em; }

属性值类型

CSS 属性值可以是以下内容:

关键词(例如，auto)
基本数据类型(例如，%)
关键字和自定义数据的组合(例如，url('[example.cimg/book.png](http://example.cimg/book.png)')

速记符号

某些 CSS 属性可以分组到单个属性声明中。最常见的速记符号将在以下章节中介绍。

字体属性的速记符号

字体属性可以写成清单 5-36 中的完整形式，也可以写成清单 5-37 中的简写形式。

***清单 5-36。*如果要为同一个元素设置多个字体属性，规则集会变得太长

p { font-weight: bold; font-size: 1em; line-height: 1.2em; font-family: Garamond; font-style: normal; }

***清单 5-37。*字体属性的速记符号

p { font: bold 1em/1.2em Garamond }

images 注意在第二种情况下，font-style属性没有被设置，因此取 CSS 规范中为该属性定义的默认值，即normal。

背景属性的速记符号

单独的背景属性(清单 5-38 )具有简写属性background ( 清单 5-39 )。

***清单 5-38。*可缩短的独立背景属性

body { background-color: #232323; background-image: url('img/bg.jpg'); background-repeat: no-repeat; background-position: 100% 0%; background-attachment: fixed; }

***清单 5-39。*背景属性合并成一个单一的背景属性

body { background: #232323 url('img/bg.jpg') no-repeat 100% 0% fixed; }

列表属性的速记符号

列表样式，比如在列表 5-40 中的样式，也可以通过枚举list-style速记属性的单个属性值来缩短(列表 5-41 )。

***清单 5-40。*列出可以缩短的款式

ul.tick { list-style-image: url('tick.png'); list-style-type: none; list-style-position: inside; }

***清单 5-41。*三个列表样式属性值的单行规则

ul.tick { list-style: url('tick.png') none inside; }

填充、边框和边距属性的简写符号

有五个属性用于设置顶部、右侧、底部和左侧填充(分别为padding-top、padding-right、padding-bottom、padding-left)或所有这些属性以及速记属性padding。对于边框(border-top、border-right、border-bottom、border-left、border)和边距(margin-top、margin-right、margin-bottom、margin-left、margin)也存在类似的约定。有多种选项可以缩短属性值枚举的顺序:

Four values set the padding of each side: the top, the right, the bottom, and finally the left padding (clockwise, starting from top) (Listing 5-42).

提示这个顺序值得记忆，因为它不仅可以用于填充，还可以用于边框和边距。

***清单 5-42。*用四个值填充速记属性

#decor { padding: 10px 5px 20px 30px; }
Three values set the top, right, and left (equally), and the bottom padding (Listing 5-43).

***清单 5-43。*用三个值填充速记属性

#decor { padding: 10px 20px 15px; }
Two values set an equal padding for the top and bottom sides, and then an equal padding for the right and left sides (Listing 5-44).

***清单 5-44。*用两个值填充速记属性

#decor { padding: 30px 20px; }
One value sets an equal padding for all sides (Listing 5-45).

***清单 5-45。*用一个值填充速记属性

#decor { padding: 10px; }

类似的简写符号可用于通过border和margin简写属性设置 border 和 margin 属性值。进一步的填充、边框和边距属性也可以用速记符号书写。清单 5-46 显示了一个例子。

***清单 5-46。*可以缩短的边框属性

.book { border-width: 1px; border-style: solid; **border-top-color: #000;** **border-right-color: #000;** **border-bottom-color: #000;** **border-left-color: #000;** }

因为在这个例子中每边的边框颜色都是一样的，所以第三、四、五、六行中的属性可以写成border-color ( 清单 5-47 )。

清单 5-47。border-color速记属性设置元素每一侧的边框颜色

.book { border-width: 1px; border-style: solid; **border-color: #000;** }

即使边框颜色不同，也可以通过简单地按照上、右、下、左的顺序(顺时针，从顶部开始)枚举所需的颜色，由border-color速记属性来声明。

所有先前的属性仍然可以缩短为一行，如清单 5-48 所示。

***清单 5-48。*多物业最短边界申报

.book { border: 1px solid #000; }

实施

有三种方法可以实现 CSS。选择的方法决定了样式的范围。

Inline style: Styling with the most limited scope. An inline style is embedded in an (X)HTML tag to which it exclusively applies. This CSS fragment is defined by the style attribute that can be provided on most markup elements. The attribute value has the same syntax as the contents of a CSS declaration block except that the delimiting braces are omitted [13]. Listing 5-49 shows an example.

***清单 5-49。*内联样式声明示例

<img src="logo.png" **style="**margin: 10px;**"** alt="logo" />
Embedded (internal) style: A code block usually located in the document head. Embedded styles are used for styling rules unique to that web page (the element to style does not occur in other pages on the site). Listing 5-50 shows an example.

***清单 5-50。*嵌入式风格的一个例子

`
…
** **
…
`
External style sheet: An external style sheet is a separate file with the .css extension that contains style rules for multiple web documents, such as an entire web site. This is a plain-text file usually encoded in US-ASCII. CSS files cannot contain the style element, just the CSS style rules themselves. Each page refers to that file with the link element in the (X)HTML head section. Listing 5-51 shows an example.

***清单 5-51。*链接到 XHTML 中的外部样式表文件

**<link rel="stylesheet" type="text/css" href="**main.css**" />**

在 XML 文档(XML、XUL、SVG 等)中，外部样式表可以由第一个文档段 [14 ] ( 清单 5-52 )中的 XML 处理指令 xml-stylesheet提供。

***清单 5-52。*链接到 XML 格式的外部样式表文件

**<?xml-stylesheet type="text/css" href="**default.css**"** title="Default style" **?>**

嵌入样式会覆盖在外部 CSS 文件中声明的相应样式，这使得在为单个网页声明一些特定规则时，可以使用网站的主要样式规则。内联样式更加具体，并且局部覆盖外部样式表的样式以及嵌入的样式(如果有的话)。

样式表也可以用@import规则从其他样式表文件导入 CSS 规则。它应该在@charset规则(如果有)之后但在所有其他规则之前提供。如果额外的 CSS 文件在同一个目录结构中，那么路径就足够了(清单 5-53 )。

***清单 5-53。*重用外部样式表

**@import "**styles/alter.css**";**

包含此规则的文件的规则集将覆盖导入样式的相应规则(如果有)。例如，如果一个站点的不同页面有相同的样式，除了作为设计的一部分被修改的background-color，那么所有的样式都可以被导入并且background-color属性被覆盖(在清单 5-54 中的alter.css)。类似地，为移动设备设计的样式表可以重用主要样式，但删除背景图像 ⁶ ，并将文档主体的最大宽度设置为当今智能手机可用的最大屏幕宽度(清单 5-54 中的mobile.css)。其他款式都是进口的，包括color和font-family。

***清单 5-54。*重用和扩展网站主 CSS 文件的样式

images

更健壮的声明提供的不是文件的路径，而是文件的 URL。清单 5-55 显示了一个例子。

***清单 5-55。*通过提供完整的 URL 导入样式表文件

@import url("http://www.example.com/alter.css");

导入样式表的应用之一是为 web 站点提供替代样式，这些样式有多种用途。例如，可以通过为不同的媒体提供不同的样式表来提高可访问性。站点的特定于媒体的 CSS 文件可以在标记中由link元素上的media属性控制，正如前面在第三章中讨论的。这种 CSS 文件的规则集有一个由站点的主 CSS 文件定义的交集。特定于媒体的规则的文件相互依赖，并且经常从彼此导入规则(清单 5-56 )。多个 CSS 文件也可以用于网站设计。

⁶ 在这个例子中，background-image属性是使用main.css文件中的速记属性background设置的。

***清单 5-56。*导入特定媒体风格

@import url("print.css") print; @import url("mobile.css") handheld and (max-width: 480px);

显示和可视性

HTML 和 XHTML 文档的元素级别已经讨论过了。在 CSS 中，(X)HTML 元素通常可以通过以下方式显示:

Block: Uses the full width available, along with a new line before and after (Listing 5-57)

***清单 5-57。*元素显示为块的规则

display: block;
Inline: Uses only as much width as needed without breaking the row (Listing 5-58)

***清单 5-58。*元素内联显示规则

display: inline;
Not displayed: Removes the element completely from the document so it does not take up any space, even though its corresponding markup is still in the source code (Listing 5-59)

***清单 5-59。*无空格隐藏元素的规则

display: none;
Hidden: Hides the element but still takes up space in the layout (Listing 5-60)

***清单 5-60。*用空格符隐藏元素的规则

visibility: hidden;

层叠

CSS 中的 C 代表级联。它是一种机制，用于确定一组样式规则中的一个声明，这些规则应该应用于某个元素-属性对。浏览器按照以下顺序考虑三个特征来选择声明 [15 ]:

Weight: The declaration with the highest weight is chosen. In CSS3, the weight of a declaration is based on the origin of the declaration and its level of importance. The origin can be of three kinds: author, user, and user agent. CSS declarations have two levels of importance: normal and important (the first one is the default level; the second one is optional and should be marked). An important declaration looks like Listing 5-61.

***清单 5-61。*最重要的规则

#menu { margin-top: 12px **!important**; }

提示级联机制的适当利用消除了对!important规则的需要。

源自不同来源的样式表的权重按降序排列如下:
1. 用户样式表(重要)
2. 作者样式表(重要)
3. 创作样式表(普通)
4. 用户样式表(普通)
5. 渲染引擎的默认样式表
因此，开发人员编写的声明通常比用户样式表更重要，用户样式表比浏览器的默认样式更重要。这就是为什么链接通常用网站开发者定义的字体颜色而不是默认的锚色来呈现的原因(清单 5-62 )。

***清单 5-62。*CSS 文件中的规则比浏览器默认样式表中的相应规则权重更大

a { font-color: #12ee12; }
Specificity: The declaration with the highest specificity is chosen. The specificity of selectors can be calculated as follows [16]:
- 计算选择器中 ID 属性的数量。
- 计算选择器中其他属性和伪类的数量。
- 计算选择器中元素名称的数量。
- 这些数字的串联就是特异性。
- 负选择器的计数类似于它们的简单选择器参数。
- 伪元素被忽略。
在清单 5-63 中，第一个声明的特异性最低，最后一个声明的特异性最大。所有段落的字体颜色都是相同的(黑色)，除了包含在一个分区中的那些段落，它们具有不同的字体颜色(绿色)。具有为class属性声明的tip值的div元素有一个更具体的规则，这使得它们的字体颜色与众不同(红色，不同于任何其他段落的颜色)。

***清单 5-63。*越来越具体的声明

`p

div p

.tip p `
声明顺序:如果两个声明具有相同的权重、来源和特性，则选择最后一个声明(还应考虑导入的样式表)。导入的样式规则在样式表规则之前处理。进一步导入的样式表规则按照@import规则的顺序考虑。

继承

在 web 标记语言和样式表中，某些代码会被自动重用。在 CSS 中，父元素的属性值可以设置给它们的子元素。元素-属性组合的指定值是从父元素的相应计算值中复制的。这个过程叫做继承。它消除了定义简单属性的需要。例如，如果定义了 web 文档的背景色，文档中的所有容器元素、分隔线和段落都将继承该属性。当然，它们中的任何一个都可以被任意覆盖。

某些 CSS 属性值被定义为继承的。除非为这些元素-属性组合指定了值，否则该值由继承决定。

inherit值可用于通过继承确定的所有属性。例如，颜色是一种可继承的属性。然而，锚元素的颜色通常被用户代理样式表设置为蓝色。通过使用值inherit，用户代理样式表的声明可以被覆盖:所有子锚元素从父元素继承前景色的值(清单 5-64 )。

***清单 5-64。*继承的财产价值

#warning { color: #000; } #warning a:link { color: inherit; }

images 注应该考虑的是，属性越具体，可以应用的元素就越少。正如您将在 CSS 属性概述中看到的，很大一部分 CSS 属性根本没有被继承。

范围和结构

与最初几年使用的带下划线的蓝色超链接不同，现代网站经常使用不同的颜色和装饰来适应整体设计。然而，当超链接使用虚线下划线时，链接图像共享相同的样式是相当令人沮丧的。为了解决这个问题，应该移除图像边框并设置更具体的样式。清单 5-65 显示了一个例子。

***清单 5-65。*消除一般规则声明的链接下划线的具体规则

`img {
border: 0;
}

a.nounder {
border-bottom: none;
}`

规则的范围对它们的应用有很大的影响。适用于同一类别中更多(大多数)元素的规则应该在网站开发的早期阶段确定。例如，如果绝大多数段落都有相同的缩进，那么这个值应该作为一个通用的 CSS 规则应用于所有的p元素(例如，p { text-indent: 3em; })，而另一个规则应该写入不同的段落类(例如，p.morein { text-indent: 5em; })。

在最佳情况下，对于那些可以作为整个网站基础的属性，范围和继承都要考虑，比如默认字体大小(清单 5-66 )。

***清单 5-66。*整个网站的默认字体大小可以从文档体继承

body { font-size: 0.8em; }

对于那些需要不同字体大小的元素，比如标题，可以专门设置该属性(清单 5-67 )，所有其他元素继承为文档正文设置的默认字体大小。因此，没有必要为所有的p和div元素声明字体大小，如果它们所需的字体大小是默认的，因为属性是从body元素继承的。

***清单 5-67。*覆盖先前清单中设置的默认字体大小的特定声明

h1 { font-size: 1.4em; } h2 { font-size: 1.2em; } h3 { font-size: 1em; }

盒子模型

块元素的实际标记内容由可选的填充、边框和边距包装，称为 CSS 盒模型 ( 图 5-2)17。这些矩形框是为文档树中的某些标记元素生成的。

images

***图 5-2。*CSS 盒子模型

文本和图像出现在内容中。填充清除内容周围的区域。填充受框的背景颜色影响，类似于填充周围的边框区域。边距是边框周围最外面的区域。它没有背景色，是透明的。每个区域的大小可以由 CSS 属性决定。既然是可选的，也可以折叠到0(即完全消除)。

两个垂直相邻的块体元件的边缘通常会相互塌陷；也就是说，边距根据第一个框的较大底部边距的大小以及它下面的另一个框的顶部边距的大小来呈现。

IE 盒子模型 Bug

从 CSS 的第一个版本开始，所有块级元素的宽度和高度都是显式指定的，只决定可见元素的宽度或高度，填充、边框和边距是在以后应用的。在早期版本的 Internet Explorer 中，CSS 规范实现不正确，这通常被称为 Internet Explorer box 模型错误。例如，Internet Explorer 5 将内容、填充和边框包含在指定的宽度或高度内，导致框的呈现更窄或更短 [18 ] ( 图 5-3 )。

images

***图 5-3。*W3C 和 IE5 盒子模型的比较。注意宽度的不同解释。

Internet Explorer 6 和更新的 IE 版本 ⁷ 在其符合标准的模式下应用了正确的实现，但出于兼容性的原因，当页面以怪癖模式呈现时，bug 仍然存在。

CSS 属性概述

表 5-3 总结了 CSS 属性的丰富选择。CSS1 中有 53 个属性，CSS2 中有 120 个，CSS 2.1 中有 115 个，CSS3 中有 200 多个(还在增加中)。

images

Mac 版的 ie 浏览器(于 2006 年停产)中没有这个漏洞。

⁸none 值适用于所有介质。

浏览器对 CSS 属性的支持各不相同，并且正在逐步改进。然而，即使是 CSS 2.1 属性也只是在最近才获得了或多或少的完整和正确的实现。因此，旧的浏览器不支持所有的属性，并且许多属性的实现不正确。这是多年来在不同浏览器下呈现同一个网站的巨大差异的主要原因。随着 CSS 属性在现代浏览器中的正确实现(如果不是完全实现的话),这种差异已经减少到最小。

images 提示强烈建议谨慎应用 CSS3 规则，因为 CSS3 的大部分模块尚未标准化，浏览器支持也各不相同。造型不是一个“要么一切要么什么都没有”的命题。例如，基本的 CSS 属性——也是 CSS 2.1 和大多数浏览器所支持的——可以用来定位一个div元素，并为它提供诸如背景颜色、字体大小和边距之类的样式。尽管通过使用 CSS3 属性border-radius声明的圆角不能在旧的浏览器中呈现，但是总的布局和样式在旧的浏览器中提供了与支持 CSS3 的现代浏览器相似的外观。类似地，如果在网站上使用 Web 字体嵌入——旧版浏览器不支持——一个通用字体和至少一个通用字体系列应该被声明为后备机制(详见第九章)。

初始属性值

所有 CSS 属性都有它们的初始值，当属性值既不是通过级联也不是通过继承设置时，这些初始值就会被应用。每个属性的初始值由 CSS 规范定义。初始值是相应 CSS 属性的允许值之一。例如，颜色声明(以任何允许的格式，通常以十六进制表示)，transparent和inherit都是background-color属性的合法值，其中transparent是初始值，通过在 CSS 文件中声明所需的值可以很容易地覆盖它(清单 5-68 )。

***清单 5-68。*声明的值覆盖 CSS 规范定义的初始值

body { background-color: #198c00; }

这就是为什么所有段落、分割和其他元素的背景都是透明的原因。另一个例子是列表的项目符号类型，它经常在没有覆盖的情况下使用。如果属性list-style-type的值不是开发者设置的，则使用初始值进行渲染，也就是disc。但是，它可以被该属性的任何其他允许值覆盖，包括circle、square、decimal、decimal-leading-zero、lower-roman、upper-roman、lower-greek、lower-latin、upper-latin、armenian、georgian、lower-alpha、upper-alpha、none和inherit。最后一个值inherit不仅可以应用于list-style-type，还可以应用于任何其他 CSS 属性，以便显式应用相应属性的初始值。

因为根元素没有父元素，所以默认情况下，它的值被设置为初始属性值。

渲染引擎的默认样式

由于呈现引擎的默认样式表包含某些属性的不同属性值，因此网站开发人员未声明的属性值在各种浏览器下可能会有所不同。由于不同的行高、边距、字体大小和其他属性，网站的整体外观通常是不一致的。尽管某些默认属性值只是略有不同，但开发人员不能依赖于呈现引擎的默认样式。

images 提示通过覆盖渲染引擎默认样式表的 CSS 属性值，可以最小化浏览器 CSS 实现之间的不一致性。这种技术叫做 CSS 重置。最著名的 CSS 重置文件之一是由 Eric A. Meyer 编写和维护的(清单 5-69 )，可以在您的网站上免费使用 [ 19 ]。

***清单 5-69。*CSS 复位

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }

XSL

虽然它并没有被广泛使用，而且只有有限的 web 开发人员熟悉它，但是自 1999 年以来，除了 CSS 之外的一种技术也可以用于样式化某些 web 文档。可扩展样式表语言 ( XSL )是一个语言家族，可用于 XML 文件的样式化、操作和转换。有三种 XSL 语言；然而，其中只有一种是样式表语言:

XSL 转换(XSLT):一种 XML 样式表语言，可用于将 XML 文档转换成其他 XML 文档或其他格式，如 HTML 或纯文本。原始文档保持不变，并基于现有文档创建一个新文档。
XSL 格式化对象 (XSL-FO):一种 XML 标记语言，用于指定 XML 文档的可视化格式。一些软件支持 XSL-FO，可以提供各种输出格式，包括纯文本、PDF、PS、SVG、PCL 和 MIF。
XML 路径语言(XPath):XSLT 也可以使用的非 XML 查询语言。

XSLT 样式表

XSLT 样式表由一个或多个样式表模块组成，这些模块是 XML 文档的一部分，或者单独形成整个 XML 文档。XSLT 的典型文件扩展名是.xsl和.xslt。XSLT 样式表使用媒体类型application/xslt+xml。

名称空间

XSLT 名称空间是[www.w3.org/1999/XSL/Transform](http://www.w3.org/1999/XSL/Transform)。但是，XSLT 处理器 [21 ]也可以识别其他(保留的)名称空间，包括:

标准函数命名空间，[www.w3.org/2005/xpath-functions](http://www.w3.org/2005/xpath-functions)
XML 命名空间，[www.w3.org/XML/1998/namespace](http://www.w3.org/XML/1998/namespace)
模式名称空间，[www.w3.org/2001/XMLSchema](http://www.w3.org/2001/XMLSchema)
模式实例名称空间，[www.w3.org/2001/XMLSchema-instance](http://www.w3.org/2001/XMLSchema-instance)

结构

XSLT 样式表的结构看起来像清单 5-70 中的。

清单 5-70。 XSLT 样式表结构

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:import href="…"/> <xsl:include href="…"/> <xsl:strip-space elements="…"/> <xsl:preserve-space elements="…"/> <xsl:output method="…"/> <xsl:key name="…" match="…" use="…"/> <xsl:decimal-format name="…"/> <xsl:namespace-alias stylesheet-prefix="…" result-prefix="…"/> <xsl:attribute-set name="…"> … </xsl:attribute-set> <xsl:variable name="…">…</xsl:variable> <xsl:param name="…">…</xsl:param> <xsl:template match="…"> … </xsl:template> <xsl:template name="…"> … </xsl:template> </xsl:stylesheet>

请注意，前面的示例显示了所有允许的元素类型；然而，样式表可能包含零个或多个这样的元素。

元素

XSLT 样式表在 XML 文档中由xsl:stylesheet或xsl:transform元素表示。一个xsl:stylesheet元素必须有一个version属性。xsl:stylesheet元素可以包含以下类型的元素:xsl:import、xsl:include、xsl:strip-space、xsl:preserve-space、xsl:output、xsl:key、xsl:decimal-format、xsl:attribute-set、xsl:param、xsl:variable、xsl:namespace-alias和xsl:template。表 5-4 提供了 XSLT 1.0 元素的概述。

images

XSLT 元素的应用很简单，并且遵循一般的 XML 创作原则。清单 5-71 显示了一个例子。

清单 5-71。 XSLT 元素和属性符合 XML 指南

<xsl:param name="page-header-margin">20px</xsl:param>

标准属性

几个标准属性与 XSLT 元素相关联，包括version、exclude-result-prefixes、extension-element-prefixes、xpath-default-namespace、default-collation和use-when。为了将它们与作者定义的属性区分开来，它们应该用名称空间符号写成xsl:version、xsl:exclude-result-prefixes、xsl:extension-element-prefixes、xsl:xpath-default-namespace、xsl:default-collation和xsl:use-when。

结合 CSS 和 XSL

XSL 还可以用作复杂的基于 XML 的文档和 CSS 格式模型之间的桥梁。因为 CSS 没有 XML 语法，所以 CSS 属性在 XSL 语法中变成了 XML 属性。主 CSS 对象是chunk。可能还需要其他对象。通常它们是其他具有功能的chunk对象，如anchor，或者更远的对象，如switch。例如，清单 5-72 中的 CSS 规则集可以用 XSL 语法编写，如清单 5-73 所示。

***清单 5-72。*要转换成 XSL 的 CSS 规则集示例

{ font-size: 1.2em; text-indent: 1em; }

***清单 5-73。*清单 5-72 中的 XSL 等价物

<css:chunk font-size="1.2em" text-indent="1em">

总结

在这一章中，你学习了如何将表示和内容分开，这在网站标准化中是必要的。您知道级联样式表的语法，这是几乎每个网站都使用的语言。您已经掌握了 CSS 选择器的使用，并可以在日常工作中应用它们来精确控制那些需要样式化的元素或元素集的外观。到目前为止，您已经知道如何放心地使用 CSS 的层叠功能，这使得创建长度最佳且易于维护的 CSS 文件成为可能。您还知道如何通过应用回退机制和即使是旧浏览器也支持的属性来确保向后兼容性。您了解了 XML 文件不仅可以用 CSS 样式化，还可以用 XSL 样式化。

在下一章，你将学习服务器端脚本和 web 应用的标准化问题。

参考文献

1。Dahl strm E、Dengler P、Grasso A、Lilley C、McCormack C、Schepers D、Watt J、Ferraiolo J、Jun F、Jackson D(eds)(2011)CSS 造型。在:SVG 1.1(第二版)。万维网联盟。www.w3.org/TR/SVG/styling.html#StylingWithCSS于 2011 年 8 月 18 日访问

2。Chavchanidze G (2004)用层叠样式表格式化数学文章。安德烈·拉兹马兹数学研究所。www.princexml.com/samples/math.pdf2010 年 10 月 9 日访问

3。Bos B，Carlisle D，Chavchanidze G，Ion PDF，Miller BR(2011)A MathML for CSS Profile。W3C 推荐。万维网联盟。www.w3.org/TR/mathml-for-css/2011 年 8 月 18 日访问

4。Grant M (ed) (2006) CSS 打印配置文件。万维网联盟。www.w3.org/TR/css-print/于 2011 年 8 月 17 日访问

5。Hayes S，Adams G，elik T，Lie HW (2003) CSS 电视简介 1.0。万维网联盟。www.w3.org/TR/css-tv于 2011 年 8 月 17 日访问

6。舒伯特的 CSS 移动配置文件 2.0。万维网联盟。www.w3.org/TR/css-mobile/于 2011 年 8 月 17 日访问

7 .。Lie HW，Bos B (2008)级联样式表，级别 1。W3C 推荐标准(修订版)。万维网联盟。www.w3.org/TR/CSS1/2010 年 10 月 9 日访问

8。博斯 B、切利克 T、希克森 I、李 HW (eds) (2011)级联样式表 2 级修订版 1 (CSS 2.1)规范。万维网联盟。www.w3.org/TR/CSS21/2011 年 8 月 18 日访问

9。Meyer EA，Bos B (eds) (2001)模块描述和相关信息。请参阅:CSS3 简介。W3C 工作草案。万维网联盟。www.w3.org/TR/css3-roadmap/#module2010 年 10 月 9 日访问

10。elik T，Lilley C，Baron LD，Pemberton S，Pettit B (eds) (2011) CSS 颜色模块级别 3。万维网联盟。www.w3.org/TR/css3-color/于 2011 年 8 月 18 日访问

11。博斯 B，切利克 T，希克森 I，李 HW(编辑)(2011)CSS 2.1 语法。在:级联样式表级别 2 修订版 1 (CSS 2.1)规范中。W3C 推荐。万维网联盟。www.w3.org/TR/CSS21/grammar.html.于 2011 年 8 月 18 日加入

12。博斯 B，切利克 T，希克森 I，李 HW(编辑)(2011)选择器语法。在:级联样式表级别 2 修订版 1 (CSS 2.1)规范中。W3C 推荐。万维网联盟。www.w3.org/TR/CSS21/selector.html#selector-syntax2011 年 8 月 18 日访问

13。埃利克 T，埃特马德 EJ(编辑)(2010)语法和解析。输入:CSS 样式属性。万维网联盟。www.w3.org/TR/2010/CR-css-style-attr-20101012/#syntax。2010 年 10 月 16 日访问

14。Clark J，Pieters S，Thompson HS (eds) (2010)将样式表与 XML 文档关联 1.0(第二版)。W3C 推荐。万维网联盟。www.w3.org/TR/xml-stylesheet/2010 年 11 月 2 日访问

15。李华伟(编辑)(2005)级联。在:CSS3 模块:级联和继承。W3C 工作草案。万维网联盟。www.w3.org/TR/2005/WD-css3-cascade-20051215/#cascading2010 年 10 月 10 日访问

16。格雷兹曼 D，切利克 T，希克森 I，林斯 P，威廉姆斯 J(编辑)(2001)计算一个选择器的特异性。输入:选择器。万维网联盟。www.w3.org/TR/2001/CR-css3-selectors-20011113/#specificity2010 年 10 月 10 日访问

17。博斯 B，切利克 T，希克森 I，李 HW (2010)箱型模型。在:级联样式表级别 2 修订版 1 (CSS 2.1)规范中。W3C 工作草案。万维网联盟。www.w3.org/TR/CSS21/box.html2010 年 12 月 12 日访问

18。Silver L (2006)固定盒子，而不是在盒子外面思考。in:Internet Explorer 6 中的 CSS 增强功能。微软公司。msdn . Microsoft . com/en-us/library/bb 250395 . aspx # CSS enhancements _ topic 3。于 2011 年 8 月 19 日访问

19。Meyer EA，Meyer KS (2011) CSS 工具:重置 CSS。埃里克. a .迈耶凯瑟琳. s .迈耶。meyerweb.com/eric/tools/css/reset/于 2011 年 8 月 19 日访问

20。Clark J (ed) (1999) XSL 转换(XSLT)版本 1.0 W3C 推荐标准。万维网联盟。www.w3.org/TR/xslt2010 年 10 月 12 日访问

21。凯 M(编辑)(2007) XSL 转换(XSLT)版本 2.0。W3C 推荐。万维网联盟。www.w3.org/TR/xslt20/2010 年 10 月 12 日访问

六、脚本和应用

许多现代网页都是动态的。它们不仅仅只有句法结构和语义。不同的网站部分可以有不同的行为，并可能对用户交互作出反应。较大的站点需要需要处理的数据库。小程序可以在远程服务器或本地计算机上运行。但是，服务器端语言生成的内容往往是不正确的。尽管内容作者不能影响内容管理系统的硬编码部分，但模板通常提供了包含标准化潜力的手工编码选项。

在本章中，您将了解为什么动态内容的标准化比静态页面的标准化更具挑战性。熟悉最广泛使用的客户端和服务器端脚本语言的基本语法是至关重要的，因为用这些语言编写的小程序通常嵌入到标记中。因此，脚本嵌入可能会影响整个网页的标准符合性。您还将学习如何为脚本提供替代内容。虽然使用 web 编程语言、框架和开发平台来提供 web 应用的服务器端生成的标记的标准符合性在不断提高，但仍然有许多结果页面包含错误的情况。这些开发技术中有许多尚未标准化，但仍在全球范围内使用。因此，其中一些被认为是事实上的标准。许多技术依赖于许多其他技术，有些依赖于标准。本章提供了一些最常见的脚本和应用开发技术的快速概述；然而，这份清单无论如何都不完整。

客户端-服务器架构

分布式应用结构在资源或服务提供者(称为服务器和服务请求者(称为客户端)之间划分任务和/或工作负载，称为客户端-服务器模型。客户端和服务器通过 Web 进行通信，以交换数据和执行任务。

客户端-服务器架构代表了 web 应用中协作程序之间的关系。例如，联系人表单可以在客户端进行评估，在服务器端进行处理。

下面几节将讨论最流行的客户端和服务器端脚本和编程语言、技术和框架的一般语法和语法约定。请注意，脚本和应用的详细描述超出了本书的范围。从标准化的角度分析 Web 编程。直接嵌入到标记中的脚本对标准的符合性有相当大的影响，所以标准化组织应该关注有效的嵌入。虽然内容管理系统(CMSs)的核心在许多情况下是硬编码的，但是它们的模板可以被用户修改，这使得提供符合标准的代码片段成为可能。

脚本和标准实现

一个脚本是在运行 [1 ]之前不需要预处理(比如编译)的程序代码。web 文档的小动态组件，如当前日期或交互式内容和行为可以通过脚本语言添加。可以在网页内容上执行修改，而无需重新加载页面的新版本。使用异步 JavaScript 和 XML ( Ajax )可以在网页上添加或发送内容，也不需要重新加载新的页面版本。

客户端脚本有恒定的内容，如果仔细提供，可以产生有效的标记。另一方面，服务器端脚本提供了动态生成的内容。当检查标记错误时，作为该任务基础的程序的源代码相当复杂。此外，由服务器端脚本技术生成的标记中使用的模板在许多情况下是硬编码的，不能被内容作者修改。对拥有成千上万网页的大型网站进行验证和标准化实际上是不可能的。

依赖于存储在数据库中并由服务器端脚本处理的数据的网站的主要问题是较高的复杂性和缺乏完全控制。CMSs 使用的模板并不总是符合标准的。因此，这些模板的所有错误都存在于应用这些模板的数千个站点中。此外，脚本或数据库的单个问题会导致错误消息，而不是网页内容(图 6-1 )。

images

***图 6-1。*内容被错误信息替换

在网页上运行的小程序和为生成网页而创建的程序有着巨大的区别。服务器端脚本语言功能强大，提供了静态内容无法实现的特性。例如，小的联系方式没有任何问题。但是，只要合适，就应该使用服务器端脚本。有数据库需求的大型网站肯定应该应用这些技术。此外，服务器端脚本可以提供相同的页眉、页脚等，作为整个 web 站点中相同标记片段的模板，可以很容易地从单个位置进行维护(与静态 web 页面相反)。但是，在不依赖于数据库和动态生成内容的网站上，应该尽量减少服务器端脚本的应用，例如小规模、小册子风格的网站。这是获得和确保完全符合标准的最直接的方法。毫无疑问，Web 上很大一部分无效标记代码是由服务器端脚本语言生成的。在许多情况下，需要额外的实践来获得有效的标记，例如处理在 PHP 会话的 URL[2]中用作参数分隔符的&字符。

客户端开发

客户端开发是指那些在客户端运行的 web 程序，一般是 web 浏览器，而不是在服务器端执行(在 web 服务器上)。根据用户输入和其他变量，客户端程序可用于在网页上提供不同的和不断变化的内容。例如，可以根据一天中的当前时间将“动态”问候添加到网页中。

Ajax

Ajax 是异步 JavaScript 和 XML 的缩写。它不是一种编程语言，而是一组相互关联的 web 开发技术，如 HTML、CSS、DOM、JavaScript、XML 和 XSLT。Ajax 可以在客户端创建交互式 web 应用。支持 Ajax 的网站应用可以异步地向服务器发送数据和从服务器检索数据(这就是该名称的由来)。Ajax 适合在异步交换数据时避免整页重载。这种方法确保了当前页面的显示和行为不会受到干扰。尽管名字如此，Ajax 并不需要 XMLJavaScript Object Notation (JSON)，一种轻量级的基于文本的开放标准 [3 ]，经常被用来代替。请求也不一定是异步的。Ajax 通常使用XMLHttpRequest对象 [4 ]来检索数据。DOM 和 JavaScript 一起用于动态显示信息，并允许用户与显示的信息进行交互。使用 Ajax 交换的数据可以使用 XSLT 操作。

images 注意现代浏览器都有内置的XMLHttpRequest对象。在 IE7 之前，Internet Explorer 提供了一个名为ActiveXObject的对象。

为了演示 Ajax，清单 6-1 中的代码创建了一个链接，用文本文件的内容替换元素的内容。文档对象模型用于操作对象。对象用于让 HTTP 请求加载文件ajaxdemo.txt并显示其内容。

清单 6-1。 Ajax 演示

在文档体中，我们需要一个函数调用和一个带有要替换文本的div(清单 6-2 )。

***清单 6-2。*函数调用和div原文

Click here to replace text

Original text in the markup

http.open()参数是在后台发送请求的异步参数。

弹性

Adobe Flex 是一个基于 Adobe Flash 技术 [5 ]的软件开发工具包(SDK)，用于跨平台的富互联网应用。用户界面布局和行为由基于 XML 的声明性语言 MXML 描述，而客户端逻辑是使用 ActionScript 3.0 编程语言创建的。

images 注意 ActionScript 是一种面向对象的语言，是 ECMAScript 的一种方言。因此，ActionScript 是 JavaScript 语法和语义的超集。最常见的是，ActionScript 嵌入在 SWF 文件中。

例如，让我们创建一个简单的 RSS 新闻阅读器！首先，我们需要编写一个通用的 XML 声明，然后是一个 MXML 声明(清单 6-3 )。

***清单 6-3。*XML 和 MXML 宣言

`
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">

</mx:Application>`

在mx:Application中，应该定义我们的HTTPService，并为面板准备好自定义控件(DataGrid、TextArea 和 Button)(清单 6-4 )。

***清单 6-4。*自定义控件的HTTPService和面板

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"> <mx:HTTPService id="httpRSS" url="http://www.example.com/rss/" resultFormat="object" /> <mx:Panel id="reader" title="Simple RSS Reader" width="600"> </mx:Panel> </mx:Application>

现在是时候定义数据网格了。面板的水平尺寸应由width参数设定。RSS 文件的每个 item 标签都通过dataProvider属性绑定到一个 DataGrid 行。接下来，我们创建一个事件处理程序来显示用户选择的 RSS 条目中描述标签的内容。entries.selectedIndex变量用于确定哪个项目被点击了。通过httpRSS.result.rss.channel.item[entries.selectedIndex].description检索相应项目的描述。RSS 描述的值被分配给 TextArea 的htmlText属性(清单 6-5 )。

***清单 6-5。*为 RSS 阅读器创建数据网格

<mx:DataGrid id="entries" width="{reader.width-15}" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) dataProvider="{httpRSS.result.rss.channel.item}" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) cellPress= ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) "{body.htmlText=httpRSS.result.rss.channel.item[entries.selectedIndex].description}"> <mx:columns> <mx:Array> <mx:DataGridColumn columnName="title" headerText="Title" /> <mx:DataGridColumn columnName="pubDate" headerText="Date" /> </mx:Array> </mx:columns> </mx:DataGrid>

最后，需要使用mx:TextArea标签创建一个 TextArea，需要使用click事件处理程序创建一个按钮来调用HTTPService对象上的send()方法(清单 6-6 )。

***清单 6-6。*文本区和按钮

<mx:TextArea id="body" editable="false" width="{reader.width-15}" height="400" /> <mx:Button label="Load RSS channel items" click="{httpRSS.send()}" />

html 5 API

HTML5 提供的不仅仅是新的结构化元素。HTML5 支持许多原本只能通过插件或复杂代码获得的特性 [6 ]。除了标记元素和属性，HTML5 还指定了脚本应用编程接口(API)7。本地绘图 API、本地套接字等消除了与插件相关的问题，例如缺少或禁用对漏洞问题的支持。

一些 HTML5 APIs 在 W3C 标准化下，而另一些在 WHATWG 开发下。下面几节将讨论一些最常用的 API。

html 5 画布 API

HTML5 中引入了canvas标记元素。它允许 2D 形状和位图图像的动态脚本化呈现。

images 注意html 5 canvas 没有内置的场景图，这是一种通用的数据结构，用于安排图形场景的逻辑(通常是空间)表示。场景图通常由基于矢量的图形系统使用，包括 SVG。在 SVG 中，所有绘制的形状都作为一个对象存储在场景图或 DOM 中，然后呈现为位图图形。因此，如果 SVG 对象属性发生变化，浏览器可以自动重新渲染场景，这在画布上是不可能的。从这个角度来看，SVG 图形比 HTML5 画布上的形状更高级。

在清单 6-7 中，你可以看到如何在 HTML5 画布上画一个简单的三角形。首先，为不支持 HTML5 画布的旧浏览器声明一个带有替代文本内容的定制大小的画布。第二，一个script元素指定了两个变量来缩短代码，一个二维画布，一个祖母绿填充颜色，一个三角形的三个角的坐标，以及带有填充颜色的三角形。

***清单 6-7。*在 HTML5 画布上画画

IE9+、Firefox 3.0+、Chrome 1.0+、Safari 3.0+和 Opera 9.5+都支持 HTML5 画布。

html 5 文件和 DnD API

HTML5 文件 API 在 web 浏览器中提供了易于使用的文件控制。万维网联盟正在对文件 API 进行标准化。Drag & Drop (DnD) API 规范定义了一个基于事件的机制，该机制添加了额外的标记，用于声明可在网页上拖动的元素。网络超文本应用技术工作组 [9 ]正在开发 DnD API。

清单 6-8 中的代码创建了一个界面，通过浏览你计算机上的目录或使用拖放来选择文件。将使用 HTML5 文件 API 检索所选文件的名称、大小和 MIME 类型。

***清单 6-8。*文件 API 演示

Choose file(s)

` `

You can also drag and drop your files here

Retrieved file information

<no files uploaded yet>

前一个例子(<div id="drop">)中代表拖放区的分割应该使用边框或者背景色来使其可见(清单 6-9 )。

***清单 6-9。*上例的 CSS 规则集

#drop { border: 2px dashed #f00; padding: 10px; }

接下来，创建一个非常简单的拖放示例，其中包含五个单词，可以从一个部门拖到另一个部门，然后再拖回来。首先，声明div项，并用draggable属性使它们可拖动。然后，将它们放入一个容器div，并创建第二个div(目标)(清单 6-10 )。

***清单 6-10。*DnD 示例的标记

Drag the word “DnD” to the other box and back

dog

called

Bobby

在文档头中，声明一个script元素，并创建在以下情况发生时要调用的函数(清单 6-11 ):

项目开始被拖动
被拖移的项目位于另一个项目上方
拖动完成
被拖动的项目被放下

***清单 6-11。*处理拖拽的功能

<script> function dragStarted(evt) { evt.dataTransfer.effectAllowed = 'move'; evt.dataTransfer.setData("text/plain", evt.target.getAttribute('id')); evt.dataTransfer.setDragImage(evt.target, 0, 0); return true; } `function dragOver(evt) {
evt.preventDefault();
}

function dragEnded(evt) {
return true;
}

function dragDropped(evt) {
var idDrag = evt.dataTransfer.getData("Text");
evt.target.appendChild(document.getElementById(idDrag));
evt.preventDefault();
}
`

最后，在文档头或外部文件中声明样式，包括框的布局和颜色(清单 6-12 )。

***清单 6-12。*盒子的样式

`body {
width: 800px;
margin: 100px auto;
}

#leftDiv, #rightDiv {
float: left;
width: 200px;
height: 100px;
margin: 50px;
background-color: #bbdeee;
border: 1px solid #000;
}

.word {
width: 60px;
height: 20px;
margin: 5px;
text-align: center;
font-weight: bold;
background-color: #ff6;
display: inline-block;
cursor: move;
}`

Firefox 3.6+和 Chrome 6.0+支持文件 API。Opera 11.5 支持文件 API，但不支持拖放 API。IE9 支持拖放 API，但不支持文件 API。Safari 从 4.0 版开始部分支持文件 API，在 6 版中将完全支持。

html 5 表单 API

HTML5 为input元素引入了新的属性(autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height、list、max、min、multiple、pattern、placeholder、required、step和width)，并为input元素的type属性引入了新的属性值(包括email、url、】

例如，为一个网站的注册页面创建一个(X)HTML5 表单(清单 6-13 )。

***清单 6-13。*一张登记表

HTML5 地理定位 API

地理位置 API 提供了检索客户端设备的地理位置信息的接口。换句话说，可以在 web 浏览器中使用它来查找用户的当前位置。在用户确认请求之前，不会共享用户的位置。W3C [11 ]正在对地理定位 API 进行标准化。

清单 6-14 展示了地理定位 API 的应用示例。在示例中，setOnLoadCallback函数用于创建地图。if-then构造用于检查地理定位 API 是否受支持，获取当前位置，如果成功检索，则在地图上进行标记。如有必要，我们通知用户接受地理定位请求，否则无法确定位置。该位置被硬编码为澳大利亚阿德莱德的花园岛，直到用户启用地理定位为止。在else分支，为使用浏览器但没有地理定位支持的用户设置了一个好位置。

***清单 6-14。*检索用户的位置

images 提示此位置仅为近似值。在前面的例子中，我们得到一个标记，它不一定标记用户的确切位置。更复杂的界面，如 Firefox 的“位置感知浏览”测试页面，在地图上方提供了一个半透明的圆圈，而不是一个指向确切位置的标记。

iPhone 上运行的 IE9+、Firefox 3.5+、Chrome 5.0+、Opera 10.6+和 Safari 都支持 HTML5 地理位置 API。

html 5 网络存储 API

Web Storage 是一个 API，用于在浏览器(sessionStorage)中持久存储键值对数据(类似于 cookies)，以及在会话之间保存的窗口本地存储(localStorage)。万维网联盟正在对网络存储 API 进行标准化。

images

例如，为名称-值对的本地存储创建两个输入字段，以及一个按钮，让用户设置输入的条目(清单 6-15 )。在表中显示名称-值对。创建一个文本字段，用户可以在其中添加要在单击相关按钮后从存储的对中删除的项目。添加可用于清除存储项目的按钮。提供另一个文本字段，可以在其中键入项目名称以检索其值。因为表是由displayItems函数创建的，所以该函数应该由body元素上的onload属性作为<body onload="displayItems()">加载。

***清单 6-15。*一个localStorage例子

<form name="lsform"> <fieldset title="WebStorage"> <legend>Local storage of name-value pairs</legend> <p> <label>Value:</label> <input name="data"> </p> <p> <label>Name:</label> <input name="name"> </p> <p> <input type="button" value="Set item" onclick="setTheItem()"> </p> <table id="pairs"></table> <p> Enter name to remove item: <input name="remove"> <input type="button" value="Remove item" onclick="removeTheItem()"> <input type="button" value="Clear items" onclick="clearItems()"> </p> <p> Enter name to retrieve value: <input name="retrieve"> <input type="button" value="Get value" onclick="getTheItem()"> </p> <script type="text/javascript"> function setTheItem() { var name = document.forms.lsform.name.value; var data = document.forms.lsform.data.value; localStorage.setItem(name, data); displayItems(); } function getTheItem() { var name = document.forms.lsform.retrieve.value; window.alert('The value associated with the name ' + name + ' is ' + ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) localStorage.getItem(name)); displayItems(); } function removeTheItem() { var name = document.forms.lsform.remove.value; document.forms.lsform.data.value = localStorage.removeItem(name); displayItems(); } function clearItems() { localStorage.clear(); displayItems(); } function displayItems() { var key = ""; var pairs = "<tr><th>Name</th><th>Value</th></tr>\n"; var i = 0; for (i = 0; i <= localStorage.length-1; i++) { key = localStorage.key(i); pairs += "<tr><td>" + key + "</td>\n<td>" + localStorage.getItem(key) + ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) "</td></tr>\n"; ` }
if (pairs == "NameValue\n") {
pairs += "<not set>\n<not set>\n";
}
document.getElementById('pairs').innerHTML = pairs;
}

IE 8+，Firefox 3.5+，Google Chrome 4+ ( sessionStorage从 5+开始)，Safari 4+，Opera 10.50+都支持 Web 存储 API。

html 5 Web Workers API

Web Workers 是一个 API，可用于独立于任何用户界面脚本在后台执行脚本。因此，用户界面不会受到影响，所有浏览器任务都不会延迟执行。

Web Workers 中的“worker”是指存储在外部文件中的脚本，在后台加载并执行(清单 6-16 )。

***清单 6-16。*创造一个“工人”

new Worker("worker.js");

虽然复杂的 JavaScript 代码可能会使您的浏览器挂起(例如给出“无响应脚本”警告)，但 Web Workers API 可以在浏览器执行事件处理、DOM 操作、查询和处理等任务时避免用户中断。

images 注意由于 JavaScript 最初被设计为在单线程环境中运行——也就是说，多个脚本不能同时运行——所以 Web Workers 可以被认为是一个为 JavaScript 带来线程的 API。

在我们的示例中，我们创建了一个在后台从 0 数到 10，000 的“worker”。首先，在文档主体中需要两个按钮来开始和停止计数(两个具有唯一标识符的输入元素)，并且需要一个带有标识符的段落(<p id="result">)，结果将显示在该段落中(清单 6-17 )。

***清单 6-17。*Web Worker 示例的标记

Start/Stop the Worker

` `

The results

Click Start to start the Worker

我们还需要一个用于开始按钮的函数、一个错误事件处理程序和一个用于停止按钮的函数。实际执行计数的函数发生在一个外部.js文件中(清单 6-18 )。

清单 6-18。webworker.js文件

onmessage = function (evt) { for (var i = evt.data, t = 10000; i < t; i++) { postMessage(i); }; };

IE10+、Firefox 3.5+、Chrome 5.0+、Safari 4.0+和 Opera 10.6+支持 Web Workers API。

html 5 web socket API

WebSocket API 可用于传输控制协议(TCP)套接字上的双向全双工通信。

万维网联盟正在对 WebSocket API 进行标准化。

在与 web 服务器建立 WebSocket 连接之后，可以使用onmessage事件处理程序从服务器检索数据，并通过send()方法将数据从客户端发送到服务器。

可以创建一个新的WebSocket对象，如清单 6-19 中的所示。

***清单 6-19。*一个新的WebSocket对象

var Socket = new WebSocket(http://example.com/ws/);

可选地，协议也可以在 URI 之后指定。

WebSocket 对象有两个只读属性:Socket.readyState和Socket.bufferedAmount。第一个代表连接状态(0为尚未连接，1为连接已建立，2为关闭握手，3为连接关闭或无法建立)。第二个属性给出了使用send()方法排队的字节数。

WebSocket API 支持四个事件:open(套接字连接建立)message(客户端从服务器接收数据)error(通信出错)close(连接关闭)。它们可以分别由Socket.onopen、Socket.onmessage、Socket.onerror和Socket.onclose事件处理程序来处理。

WebSocket 的两种方法分别是Socket.send()(send()方法通过连接传输数据)和Socket.close()(close()方法用于终止已有的连接)。

作为一个例子，我们在文档头中创建一个客户机和服务器之间的双向 TCP 套接字(清单 6-20 )。

***清单 6-20。*创建网络套接字

<script type="text/javascript"> function myWS() { if ("WebSocket" in window) { alert("WebSocket is supported by your Browser!"); var ws = new WebSocket("ws://localhost:9998/echo"); ws.onopen = function() { ws.send("Message to send"); alert("Message sent…"); }; ws.onmessage = function (evt) { var received_msg = evt.data; alert("Message received…"); }; ws.onclose = function() { alert("Connection closed…"); }; } else { alert("WebSocket is not supported by your browser!"); } } </script>

在文档体中，应该调用myWS()函数来启动 WebSocket ( 清单 6-21 )。

***清单 6-21。*一个主播启动 WebSocket

Start WebSocket

客户端程序现在已经准备好了，但是我们还需要一个支持 WebSocket 的服务器来测试它。比如 pywebsocket，可以作为 websocket 独立服务器，也可以作为 Apache HTTP 服务器的 WebSocket 扩展，适合测试 [15 ]。

HTTP 握手之后，TCP 套接字就可以使用了，连接是活动的；服务器和客户端都可以发送数据。

在客户端，WebSocket API 被 Firefox 4+，Google Chrome 4+，Safari 5+，Opera 11+所支持。

离线网络应用

HTML5 中的离线 web 应用功能允许在线应用不间断地工作，即使互联网连接不可用。例如，当用户找不到 Wi-Fi 热点时，可以在他们的网络邮件客户端撰写邮件。

由于浏览器在离线时无法访问网站文件，所以第一步是在一个名为offline.manifest ( 清单 6-22 )的文件中指定缓存所需的资源(一个简单的基本文件列表)。

***清单 6-22。*一个offline.manifest文件

CACHE MANIFEST index.html styles.css main.js

这个文件应该作为html元素上的manifest属性的属性值提供(清单 6-23 )。该文件应该使用 MIME 类型text/cache-manifest来提供。

***清单 6-23。*使用清单文件

<html manifest="offline.manifest">

将要求用户允许在其计算机上进行缓存。

JavaScript 使用navigator.onLine可以确定浏览器的在线/离线状态。

当浏览器离线时，可以使用前面讨论的 Web 存储 API 轻松地将数据存储在本地，也就是说，sessionStorage用于在会话期间检索数据，或者localStorage用于将值保留更长时间。

Firefox 3.5+、Chrome 1.0+、Safari 4.0+和 Opera 10.6+支持离线 web 应用。

Java 小程序

Java 是一种面向对象、结构化、命令式、跨平台的编程语言。Java 最初是由 Sun Microsystems 公司开发的，该公司现在归 Oracle 公司所有。Java 可以在客户端和服务器端的各种环境中使用，包括 applets、servlets、Swing 应用和 JavaServer Pages (JSP)。

Java 小程序是用于执行特定任务的小应用，在网站上以一种称为 Java 字节码的格式提供，可以由 Java 虚拟机(JVM)执行。尽管 Java 小程序可以被 Flash、Curl 或 Microsoft Silverlight 等替代技术所取代，但它们仍然存在于 Web 上。

一个 Java applet 应该由两个object元素和自结束参数提供。内物用三叉戟，外物用壁虎。清单 6-24 显示了一个例子。

清单 6-24。 Java 小程序嵌入有object

<object classid="java:bookflip.class" type="application/x-java-applet" archive="bookflip.jar" height="120" width="120"> <param name="res" value="1" /> <param name="image1" value="01.jpg" /> <param name="link1" value="NO" /> <param name="flip1" value="0" /> <param name="image2" value="02.jpg" /> <param name="link2" value="NO" /> <param name="flip2" value="0" /> <param name="speed" value="4" /> <object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93" height="120" width="120" > <param name="code" value="bookflip" /> <param name="archive" value="bookflip.jar" /> <param name="res" value="1" /> <param name="image1" value="01.jpg" /> <param name="link1" value="NO" /> <param name="flip1" value="0" /> <param name="image2" value="02.jpg" /> <param name="link2" value="NO" /> <param name="flip2" value="0" /> <param name="speed" value="4" /> </object> </object>

每页只能呈现一次对象。正如你将看到的，Flash 对象也有类似的方法。

ECMAScript 和 JavaScript

一种广泛使用的脚本语言是 ECMAScript，它由 Ecma 国际(ECMA-262 [16 ]、ECMA-290 [17 ]、ECMA-327 [18 ]、ECMA-357 [19 ])和国际标准化组织(ISO/IEC 16262 [20 )进行标准化。ECMAScript 的互联网媒体类型为application/ecmascript，文件扩展名为.es。

ECMAScript 的三种最著名的方言是 JavaScript、JScript 和 ActionScript。第一个是 JavaScript，它是 Web 上主要的客户端脚本语言。数以百万计的网站使用它来增加互动和功能。

images 注意 JavaScript 不要和 Java 混淆。虽然两种语言都有类似 C 的语法，但是 JavaScript 是脚本语言，而 Java 是通用编程语言。JavaScript 有动态类型，Java 有静态类型。JavaScript 是弱类型语言，而 Java 是强类型语言。JavaScript 从人类可读的源代码中加载，而 Java 从编译后的字节码中检索。与基于原型的 JavaScript 对象不同，Java 对象是基于类的。

JScript 是 ECMAScript [21 ]的微软实现。JScript 的主要实现是 Windows Script 和 JScript .NET，JScript 的典型文件扩展名是.js、.jse、.wsf、.wsc，如果嵌入的话还有.htm、.html和.asp。

ActionScript 是一种面向对象的语言，最初由 Macromedia 开发，现归 Adobe Systems 所有。它是在 Adobe Flash 和前面提到的 Adobe Flex 中实现的。外部 ActionScript 文件的典型文件扩展名是.as。ActionScript 重用 ECMAScript 的 MIME 类型。

嵌入和加载 JavaScript

应用于整个网页的 JavaScript 代码通常在(X)HTML 头中声明。JavaScript 也可以在 web 文档的主体部分本地使用。在整个网站中使用的 JavaScript 代码是在外部文件中编写的。

一般来说，在网站上使用 JavaScript 有三种方式。下面几节将对它们进行讨论。

从外部文件加载 JavaScript

当同一个脚本应用于多个文档时，使用这种技术。外部 JavaScript 文件的文件扩展名为.js。这些文件的字符编码通常是 US-ASCII。用其他编码方案编码的 JavaScript 文件可能会有互操作性问题。虽然 UTF-8 是(X)HTML web 文档的最佳选择，并且可以作为默认字符编码应用于任何开发人员的文本编辑器中，但必须注意尽可能以 US-ASCII 编码 JavaScript 文件(类似于 CSS 文件)。

外部 JavaScript 文件应该只包含 JavaScript 代码(清单 6-25 )。脚本标签也必须避免(清单 6-26 )！

***清单 6-25。*标记中的 JavaScript 代码

**<script type="text/javascript">** document.write("Nice coding"); **</script>**

***清单 6-26。*外部.js文件中的相同代码

document.write("Nice coding");

外部 JavaScript 文件可以用script元素上的src属性加载。 ¹ 清单 6-27 显示了一个例子。

***清单 6-27。*从外部文件加载 JavaScript】

<script type="text/javascript" **src="scripts/click.js"**></script>

这种嵌入通常用于文档头中加载的脚本和任何太长而不能直接写入标记的脚本。替代样式选择器、字体大小调整器和隐藏层控制器脚本是这种方法的一些例子。

¹ 在 Web 的早期，language="javascript"属性-值对被用在script元素上，后来被弃用，取而代之的是type="text/javascript"。

内联 JavaScript

JavaScript 也可以作为script元素的内容直接写在标记中。假设我们在文档头或外部.js文件中有清单 6-28 中所示的 JavaScript 函数和清单 6-29 中的变量。

***清单 6-28。*一个简短的 JavaScript 函数

function fourdigits(number) { return (number < 1000) ? number + 1900 : number; }

***清单 6-29。*变数

var now = new Date(); var year = fourdigits(now.getYear());

该代码提供了当前年份，可用于“动态”版权内容，如清单 6-30 。

***清单 6-30。*内联 JavaScript 示例

这是一个内联 JavaScript 代码。在这种情况下，它将表示版权符号和名称之间的当前年份，如清单 6-31 中的所示。

***清单 6-31。**列表 6-28 、 6-29 、 6-30 、*的结果

注意，如果 JavaScript 代码由于某种原因无法运行，文档的其他部分仍然会被呈现出来(清单 6-32 )。

***清单 6-32。*禁用 JavaScript 或不支持 JavaScript 的相同代码的结果

事件处理程序

JavaScript 通常用于根据用户交互(如用鼠标单击元素)来控制文档元素或浏览器窗口。

假设一个网页上有三个图像，当用户点击它们时，它们会修改层main的字体大小。清单 6-33 显示了一个可能的解决方案。

***清单 6-33。*操作字体大小的功能

function normal() { var esize = document.getElementById('main').style; esize.fontSize = "1.1em"; } `function larger() {
var esize = document.getElementById('main').style;
esize.fontSize = "1.4em";
}

function huge() {
var esize = document.getElementById('main').style;
esize.fontSize = "1.8em";
}`

这三个函数既可以写在文档的script标签中，也可以写在外部文件font.js中。在后一种情况下，它们可以用script元素的src属性加载，如前面在清单 6-27 中所讨论的(文件路径和名称可以任意修改)。

现在可以用onclick属性加载适当的事件处理函数了(清单 6-34 )。

**清单 6-34。**当用户点击时加载适当函数的事件处理程序

<a href="#" **onclick="javascript:normal();"**> <img src="img/normal.png" alt="Normal font" title="Normal" /> </a> <a href="#" **onclick="javascript:larger();"**> <img src="img/larger.png" alt="Larger font" title="Larger" /> </a> <a href="#" **onclick="javascript:huge();"**> <img src="img/huge.png" alt="Huge font" title="Huge" /> </a>

哪个功能将被运行取决于用户点击哪个图像链接。

确定 JavaScript 支持

JavaScript 支持可以很容易地由具有替代内容的脚本来确定，如清单 6-35 中的所示。

***清单 6-35。*带有替代内容的 JavaScript】

<script type="text/javascript"> document.write("If this text is displayed, your browser supports scripting, and ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) JavaScript is enabled!") </script> **<noscript>JavaScript is NOT enabled!</noscript>**

不支持 JavaScript 的浏览器会显示noscript元素的内容。

银光

Silverlight 是微软公司为开发富互联网应用而创建的免费应用框架。Silverlight 的运行时环境作为一个 web 浏览器插件提供。Silverlight 提供了许多类似于 Adobe Flash 的功能，例如动画、绘图对象、反射效果、字形等等。

Silverlight 使用可扩展应用标记语言(XAML ),而不是可缩放矢量图形(SVG)。XAML 是一种声明性的、基于 XML 的用户界面标记语言，由微软开发，在. NET 中广泛使用

与 Flash 类似，Silverlight 的一个常见嵌入选项是使用object标签(清单 6-36 )。

清单 6-36。 Silverlight 嵌入替代内容(确定支持)

Silverlight 不仅可以在您的文本编辑器中编写，还可以在 Microsoft Visual Studio 软件开发平台中编写，这使得创建与源代码同时显示的图形界面更加容易。

服务器端开发

虽然静态内容对于许多网站组件来说已经足够了，但是高级网站功能，如 web 应用、内容管理、在线银行、表单提交、数据库管理等等，都需要服务器端编程。

images 注客户端和服务器端编程的主要区别在于，客户端脚本由浏览器下载、解释和执行，而服务器端脚本和应用运行在服务器上。

images 提示与客户端技术相反，客户端技术的支持要么嵌入在大多数浏览器中(例如 JavaScript)，要么可以通过安装免费插件轻松设置(例如 SilverLight)，而服务器端技术的支持应该由托管服务提供商提供。虽然大多数托管服务都支持 PHP 和 MySQL 等广泛采用的技术，但强烈建议您在选择服务和支付服务费用之前向提供商咨询特殊技术的支持，因为托管公司通常会拒绝安装任何不包含在其软件包中或不受其支持的软件组件(例如，FFMPEG、ionCube PHP Loader、Apache Ant、Ivy、JTA、JAXP)。有些技术依赖于其他技术，可能需要安装某些软件组件。

有各种各样的服务器端脚本和编程语言用于创建服务器端应用。下面几节描述了一些最广泛采用的方法。

cold fusion

ColdFusion 是 Adobe [23 ]提供的应用服务器，用于处理 ColdFusion 标记语言(CFML)。CFML 是一种脚本语言，使用与 HTML 结构相似的标签(这也是得名的原因)[24；它有一个类似于 PHP 的功能。除了 Adobe ColdFusion，CFML 还有几个实现，例如。NET 框架、Java 虚拟机和谷歌应用引擎。由于其可扩展性，ColdFusion 不仅是桌面环境的理想选择，也是日益流行的移动 web 应用的理想选择。

与 ColdFusion 竞争的最重要的技术是 BlueDragon [25 ]、Coral Web Builder [26 ]、IgniteFusion [27 ]、Railo [28 ]和 SmithProject [29 。

Java

在前面关于 Java 小程序的章节中已经提到了 Java 编程语言。不过服务器端也用 Java。

JavaServer Pages (JSP)是一种用于动态生成网页的 Java 技术。JSP 的语法结合了 scriptlet 元素和标记(通常是 HTML 或 XML) [30 。scriptlet 元素的内容是可能与标记混合在一起的 Java 代码。

Java 平台企业版(Java EE)是一个流行的 Java 服务器端编程平台。平台和相关的 API 在单独的规范 [31 、 32 中定义。

WebObjects 是由 Apple 开发的用于 Mac OS X 的 Java web 应用服务器和 web 应用框架。WebObjects 由苹果规范 [33 、 34 、 35 描述。

The。NET 框架

微软。NET 是一个流行的软件框架，拥有广泛的库 [36 ]。那个。NET 框架支持多种编程语言(C#、J#、VB。NET 等等)。这些语言中的任何一种都可以使用用其他语言编写的代码，这提供了高度的互操作性。框架架构的一个基础部分是名为公共语言运行时(CLR) 的应用虚拟机，它是微软对公共语言基础设施(CLI) 的实现。CLI 是 ECMA 标准(ECMA 335[37)。

的一些应用。NET 框架，如 ADO.NET、ASP.NET 和 Windows 窗体，不是前面提到的标准的一部分。

ASP.NET

Active Server Pages 通常被称为 ASP 或 ASP Classic，是由微软开发的用于创建交互式动态网页的 web 应用框架。它已经被 ASP.NET 取代，后者为网络应用和服务提供了强大的功能。典型的文件扩展名是 ASP 的.asp和 ASP.NET 文件的.aspx。

正如你在清单 6-37 中看到的，通过用<%和%>分隔脚本，一个 ASP 脚本可以嵌入到网页的文档体中。

清单 6-37。 ASP 脚本中的标记

Simple ASP embedding example` ` **<%** **response.write("Hello, World!")** **%>** `

在 2011 年在 Visual Studio 和 ASP.NET 中引入 HTML5 支持之前，ASP.NET 在大多数情况下都会生成无错误的 XHTML 标记。然而，由于 ASP.NET 不修改静态文本和非服务器标记元素，最终的标记不一定符合 XHTML 1.0 Strict 标准。根据微软的说法，一些提供可选功能的标记控件，尤其是那些具有指定其客户端行为的目标属性的控件(AdRotator、BulletedList、HyperLink、HyperLinkColumn、ImageMap、MenuItem、TreeNode)，可能会导致标记代码不符合标准 [39 。

C#

一种流行的编程语言，常用于。NET 是 C#(读作见夏普)，已经被 ECMA [40 和 ISO [41 ， 42 标准化。C#是一种多参数编程语言，它是声明性的、泛型的、函数式的和命令式的，并且具有强类型。C#应用了面向对象(基于类)和面向组件的原则。

珠

Perl 是一种高级的、解释的、通用的动态编程语言。该语言的规范可在 Perl.org 获得。在 20 世纪 90 年代后期，Perl 因为其解析能力而成为流行的 CGI 脚本语言。Perl 的核心语法总结在“Perl 风格指南”44 中。Perl 的一个令人印象深刻的文本处理特性是，如果有足够的内存，它可以处理任意长度的文本文件。

PHP

PHP:超文本预处理器是最流行的开源服务器端脚本语言之一。它是一种跨平台的通用语言，最初是为生成动态网页而设计的。这些年来，一些程序员试图引入 PHP 的“标准化”最佳实践例如， [45 、 46 、 47 、 48 ]，但都没有获得官方地位。PHP 的主要规范由 PHP 小组 [49 ]维护，它被认为是该语言事实上的标准，因为没有正式的规范。

PHP 是 ASP.NET 等竞争对手的广泛使用的、免费的、高效的替代品。

嵌入和加载 PHP

虽然一些 PHP 代码嵌入在(X)HTML 文档中，并与标记元素混合在一起，但复杂的 PHP 应用是在外部文件中提供的。

PHP 中的标记

PHP 代码通常由<?php和?>或者<script language="php">和</script>分隔。不可移植的短标签<?和<?=以及 ASP 风格的标签如<%和<%=不应该被使用。PHP 解析器只解析分隔符内的代码。在 XML 文档中(XHTML 也是如此)，第一种嵌入方法提供了格式良好的 XML 处理指令。因为它们不是文档中字符数据的一部分，所以标记和 PHP 代码的组合有可能在 PHP 解析之前在服务器上提供有效的标记。

在标记中嵌入 PHP 的最简单的例子是一个“Hello World”脚本，比如hello.php ( 清单 6-38 )。

***清单 6-38。*PHP 中的“Hello World”

Hello World in PHP ** Hello World

'; ?>** `

根据适当的服务器配置，PHP 代码应该被解析，清单 6-39 中的输出将被发送到浏览器。

***清单 6-39。*解析 PHP 后的输出

Hello World in PHP **

Hello World!

** `

结果标记验证为 HTML5。注意，为了便于理解，省略了结构元件和附加内容。

外部文件中的 PHP

外部 PHP 文件的典型文件扩展名有.php、.phtml、.php5和.phps。外部 PHP 文件通常在开始和结束分隔符之间包含 PHP 代码。换句话说，它们以<?php开始，以?>结束。然而，许多 PHP 文件，例如用于设置的文件，不一定有结束分隔符。

include命令可以用来将指定的外部 PHP 文件的内容插入到标记中(清单 6-40 )。

***清单 6-40。*嵌入 PHP 文件

<?php include("copyright.php"); ?>

外部 PHP 文件可能包含 PHP 代码、标记或两者的组合。

images 提示通常的做法是收集常见的(经常重复的)网页内容的标记片段，例如菜单和法律信息，并从外部 PHP 文件中嵌入它们。这种方法消除了站点常见脚本需求的冗余。

Python

Python 是一种通用的高级编程语言 [50 ]。与其他动态语言类似，Python 也经常被用作脚本语言。Python 支持多种编程范式。虽然 Python 主要是面向对象的，但也涉及到函数式编程风格。该语言的功能可以通过第三方工具进行扩展；例如，Python 代码可以作为独立的可执行文件提供。Python 解释器可用于各种操作系统，这使得 Python 成为一种跨平台语言。

红宝石

Ruby 是一种通用的、动态的、反射式的面向对象编程语言。最常见的 Ruby 实现之一是名为 Ruby on Rails 的开源 web 应用框架。Ruby 的主要文档包括 Ruby 核心参考 [51 ]、Ruby 标准库参考 [52 ]、Ruby C API 参考 [53 ]以及关于 Rails 可搜索 API 的文档 [54 。

SSJS

尽管 JavaScript 主要用于客户端，但它也有服务器端的实现。服务器端 JavaScript (SSJS)于 1996 年首次在 Netscape Enterprise Server 2.0 和 Netscape LiveWire 中实现。SSJS 开发的通用规范由 CommonJS 社区提供。服务器端 JavaScript Google Group 致力于创建跨平台的 SSJS 标准 API[56]。

客户端和服务器端技术的结合

并非所有的编程环境都是纯粹的客户端或服务器端技术。例如， Google Web Toolkit 有用 Java 编写 JavaScript 前端应用的工具。使用开发工具和框架 Pyjamas ，可以用 Python 开发 Ajax 应用和富互联网应用。一个用于开发具有客户端功能和服务器端处理的富互联网应用的开源平台是 Tersus 。

数据库技术

很大一部分服务器端应用和服务依赖于存储在数据库中的数据。Web 上最常用的数据库之一是跨平台关系数据库管理系统 MySQL [57 ]。它被认为是事实上的 ?? 标准，也被世界上流量最大的网站所使用。虽然它非常受欢迎，但 Ruby 和 Python 等语言经常应用 MySQL 以外的数据库服务器。Web 上其他一些常用的数据库技术有 Apache Derby [58 ]、IBM DB2 [59 ]、Firebird [60 ]、Microsoft SQL Server[61]、Oracle [62 ]、PostgreSQL [63 ]、SQLite [64 ]和 Sybase

脚本的替代内容和回退机制

在网站标准化中，为脚本提供替代内容以及为不支持脚本的用户代理设计 web 文档是至关重要的。您可以通过使用noscript元素来提供替代内容。不执行脚本，只有当浏览器配置消除了脚本或者在极少数情况下不支持script元素中使用的脚本语言时，用户代理才会呈现noscript元素的内容。没有客户端脚本支持的浏览器必须呈现noscript元素的内容。

例如，如果动态创建的数据是由script元素提供的，那么如果不支持脚本，可以使用到资源的直接链接([清单 6-41 )。

***清单 6-41。*有用的候补内容

<noscript> <p><a href="http://example.com/news/">Latest News</a></p> </noscript>

有一种做法是注释掉标记中编写的脚本，以消除不能处理script元素的浏览器呈现元素内容。高级渲染引擎认为应该执行注释中的脚本。如果使用外部脚本文件，这可以消除注释的需要。

正如你在本章前面学到的，当 JavaScript 不被支持时，一个正确嵌入的脚本不会破坏页面布局或内容流。尽管如此，这种方法通常不能提供与脚本相同的功能或行为(提供的信息应该是相似的)。替代内容或回退机制对于 JavaScript 代码的重要性可以通过“动态”菜单得到最好的证明，这种菜单不应该只依赖于 JavaScript，因为如果 JavaScript 被禁用或脚本无法加载，站点的功能将会丢失。

让我们假设你有一个特殊的帮助屏幕，包含在一个层中，默认情况下是隐藏的(清单 6-42 )，只有当用户点击菜单“帮助”时才显示。

***清单 6-42。*一帮div默认隐藏

#help { display: none; }

由于帮助是使用 JavaScript 显示的(清单 6-43 )，如果 JavaScript 被禁用或不被支持，帮助将不可用。

***清单 6-43。*显示隐藏的div功能

function display_help() { document.getElementById("help").style.display = 'block'; }

一个好的回退机制是提供一个传统的超链接——看起来与调用 JavaScript 代码的链接相同，该代码在页面上方显示特殊的帮助层——作为替代内容(清单 6-44 )。如果由于缺乏 JavaScript 支持而无法显示该层，该链接将打开另一个 web 文档，其中包含 Help div将提供的相同内容。虽然“帮助屏幕”和帮助文档的视觉外观不同，但内容是相同的。他们中的一个总是可用的。

***清单 6-44。*带有回退机制的高级菜单项

总结

在本章中，您学习了用于创建脚本、小程序和 web 应用的客户端和服务器端脚本和编程语言。每天使用这些技术是不可避免的，现在您已经知道它们在 web 应用和服务开发中是至关重要的。然而，它们中的许多是特定于供应商的，并且还没有被标准化。您还知道很大一部分不正确的标记是由服务器端应用生成的，尽管越来越多的应用提供符合标准的 web 文档。

在下一章中，你将学习新兴的语义网技术和机器可读的元数据注释。

参考文献

1。什么是脚本？在:脚本和 Ajax。万维网联盟。www.w3.org/standards/webdesign/script2011 年 1 月 24 日访问

2。Dorward D (2005)的&符号，PHP 会话和有效的 HTML。万维网联盟。www.w3.org/QA/2005/04/php-session2011 年 1 月 24 日访问

3。crock Ford D(2006)JavaScript 对象符号(json)的应用/json 媒体类型。互联网协会。tools.ietf.org/html/rfc46272011 年 8 月 20 日访问

4。范·凯斯特伦 A (2010) XMLHttpRequest。万维网联盟。www.w3.org/TR/XMLHttpRequest/2011 年 8 月 20 日访问

5。Adobe(2011)Adobe Flex–构建富有表现力的跨平台移动、web 和桌面应用。Adobe 系统公司www.adobe.com/products/flex/。2011 年 8 月 22 日访问

6。吕贝尔斯 P，艾伯斯 B，萨利姆 F (2010)亲 HTML5 编程-强大的 API，更丰富的互联网应用开发。纽约媒体有限责任公司

7 .。van Kesteren A，Pieters S (2011 年)原料药。In: HTML5 与 HTML4 的区别。万维网联盟。dev.w3.org/html5/html4-differences/#apis2011 年 8 月 22 日访问

8。阮冈纳赞 A，西京 J (2010)文件 API。万维网联盟。www.w3.org/TR/FileAPI/2011 年 8 月 22 日访问

9。希克森 I (ed) (2011)拖放。在:HTML。网络超文本应用技术工作组。www . whatwg . org/specs/we b-apps/current-work/multipage/dnd . html。2011 年 8 月 22 日访问

10。希克森一号(2011)表格。在:HTML。网络超文本应用技术工作组。www . whatwg . org/specs/we b-apps/current-work/multipage/forms . html。2011 年 8 月 23 日访问

11。Popescu A (2010)地理定位 API 规范。万维网联盟。www.w3.org/TR/geolocation-API/2011 年 8 月 20 日访问

12。Mozilla (2011)位置感知浏览。www.mozilla.com/en/firefox/geolocation/Mozilla 公司。2011 年 8 月 21 日访问

13。希克森 I (2011)网络存储。万维网联盟。www.w3.org/TR/webstorage/2011 年 8 月 20 日访问

14。希克森一世(2011)的 WebSocket API。万维网联盟。www.w3.org/TR/websockets/2011 年 8 月 20 日访问

15。Google (2011) pywebsocket -用于测试 Apache HTTP 服务器的 websocket 服务器和扩展。谷歌公司code.google.com/p/pywebsocket/。2011 年 8 月 23 日访问

16。ECMA(2009)ECMA 262 标准，第五版。Ecma 国际。www . ECMA-international . org/publications/files/ECMA-ST/ECMA-262 . pdf。2011 年 1 月 21 日访问

17。ECMA (1999) ECMAScript 组件规范。ECMA-290 标准。ECMA 国际。www . ECMA-international . org/publications/files/ECMA-ST/ECMA-290。PDF 。2011 年 8 月 23 日访问

18。ECMA (2001) ECMAScript 第三版压缩概要。ECMA-327 标准。ECMA 国际。www . Ecma-international . org/publications/files/ECMA-ST/Ecma-327 . pdf。2011 年 8 月 23 日访问

19。ECMA (2005) ECMAScript for XML (E4X)规范，第二版。ECMA-357 标准。ECMA 国际。www . Ecma-international . org/publications/files/ECMA-ST/Ecma-357 . pdf。2011 年 8 月 23 日访问

20。国际标准化组织(2002 年)国际标准化组织/IEC 16262:2002。国际标准化组织。www.iso.org/iso/catalogue_detail.htm?csnumber=338352011 年 1 月 21 日访问

21。微软(2011)JScript(ecmascript 3)-Windows 脚本 5.8。微软公司。msdn . Microsoft . com/en-us/library/hbxc2t 98% 28v = vs . 85% 29 . aspx。2011 年 8 月 23 日访问

22。微软(2011) Silverlight。微软公司。www.silverlight.net2011 年 8 月 23 日访问

23。Adobe (2011) Adobe ColdFusion 9 系列。Adobe 系统公司www.adobe.com/products/coldfusion-family.html。2011 年 8 月 23 日访问

24。Brooks-Bilson R (2009)核心 CFML 标记。CFML 咨询委员会。www.opencfml.org/display/cfmladvisory/Core+CFML+Tags2011 年 8 月 23 日访问

25。新亚特兰大(2009)从 ColdFusion 升级。在:蓝龙 7.1 用户指南。新亚特兰大通信有限责任公司。www . newatlanta . com/products/bluedrong/self _ help/docs/7 _ 1/bluedrong _ 71 _ User _ guide . pdf。2011 年 8 月 24 日访问

26。rave7 (2011)珊瑚网建设者。rave7。www.pcaonline.com/index.cfm?DocID=10082&fkb = y2011 年 8 月 24 日访问

27。FindMySoft (ed) (2011)点火燃料 CFML 发动机。www . findmysoft . com/scripts/ignite fusion-CFML-引擎-下载. html 。2011 年 8 月 24 日访问

28。Railo (2011) Railo Technologies。Railo 技术有限公司。www.getrailo.com。2011 年 8 月 24 日访问

29。Placona M (2011)又一个免费的 ColdFusion 引擎。马科斯·普拉科纳博客。www . PLA ConA . co . uk/52/cold fusion/yet-another-free-cold fusion-engine/。2011 年 8 月 24 日访问

三十岁。Sun (2001) JAVASERVER PAGES (JSP)语法版本 1.2。太阳微系统公司java.sun.com/products/jsp/syntax/1.2/card12.pdf。2011 年 8 月 23 日访问

31。Oracle (2011)您的第一杯:JavaTM EE 平台简介。甲骨文公司。download . Oracle . com/javaee/6/first cup/doc/first cup . pdf。2011 年 8 月 23 日访问

32。Oracle (2011) Java 平台企业版 6–API 规范。甲骨文公司。download.oracle.com/javaee/6/api/2011 年 8 月 23 日访问

33。苹果(2007) WebObjects 概述。苹果公司developer . apple . com/legacy/MAC/library/documentation/web objects/web objects _ Overview/web objects _ Overview . pdf。2011 年 8 月 23 日访问

34。苹果(2007) WebObjects Web 应用编程指南。苹果公司developer . apple . com/legacy/MAC/library/documentation/Web objects/Web _ Applications/Web _ Applications . pdf。2011 年 8 月 23 日访问

35。苹果(2007) WebObjects 企业对象编程指南。苹果公司developer . apple . com/legacy/MAC/library/documentation/web Objects/Enterprise _ Objects/Enterprise Objects . pdf。2011 年 8 月 23 日访问

36。微软(2011)微软。NET 框架。微软公司。www.microsoft.com/net2011 年 8 月 24 日访问

37。ECMA (2010)公共语言基础设施(CLI)，第五版。ECMA-335 标准。ECMA 国际。www . ECMA-international . org/publications/files/ECMA-ST/ECMA-335 . pdf。2011 年 8 月 24 日访问

38。微软(2011)微软 ASP.NET 官方网站。微软公司。www.asp.net2011 年 8 月 23 日访问

39。Visual Studio 和 ASP.NET 中的微软(2010) XHTML 标准。微软公司。msdn.microsoft.com/en-us/library/exc57y7e.aspx2011 年 8 月 23 日访问

40。ECMA (2006) C#语言规范，第四版。ECMA-334 标准。ECMA 国际。www . Ecma-international . org/publications/files/ECMA-ST/Ecma-334 . pdf。2011 年 8 月 24 日访问

41。ISO (2006)信息技术–编程语言–c#。ISO/IEC 23270:2006。国际标准化组织。www . iso . org/iso/iso _ catalogue/catalogue _ ics/catalogue _ detail _ ics . htm？csnumber=42926 。2011 年 8 月 24 日访问

42。ISO (2006)信息技术-公共语言基础设施(CLI)分区 I 至 VI。ISO/IEC 23271:2006。国际标准化组织。www . iso . org/iso/iso _ catalogue/catalogue _ ics/catalogue _ detail _ ics . htm？csnumber=42927 。2011 年 8 月 24 日访问

43。丛龙飞(编辑)(2011) Perl 5 版本 14.1 文档-完整版。Perl 编程语言的官方文档。Perl5 搬运工。perldoc.perl.org/perldoc.tar.gz2011 年 8 月 23 日访问

44。丛龙飞(编辑)(2011) Perl 版本 5.14.1 文档-Perl 风格指南。perldoc.perl.org/perlstyle.pdf2011 年 8 月 24 日访问

45。Hoff T，Kristiansen F (2003) PHP 编码标准。托德·霍夫，弗雷德里克·克里斯蒂安森。www.dagbladet.no/development/phpcodingstandard/2011 年 8 月 24 日访问

46。谷歌(2011) PHP 标准工作组。谷歌公司groups.google.com/group/php-standards。2011 年 8 月 24 日访问

47。Icontem (2011) PHP 标准讨论组向世界开放- PHP 类。Icontem。www . PHP classes . org/blog/post/96-PHP-standards-discussion-group-opens-to-the-world . html。2011 年 8 月 24 日访问

48。Donat J (ed) (2011) PHP 标准。phpstandards.net2011 年 8 月 24 日访问

49。奥尔森·P(编辑)、阿舒尔·M、贝兹·F、多夫加尔·A、洛佩斯·N、马格努松·H、里克特·G、塞圭·D、弗拉纳·J 等人(2011 年)PHP 手册。PHP 文档组。www.php.net/manual/en/2011 年 8 月 24 日访问

50。PSF (2011) Python 编程语言-官方网站。Python 软件基础。www.python.org2011 年 8 月 23 日访问

51。Britt J，Neurogami (2010) Ruby 核心参考。詹姆斯·布里特，神经游戏玩家。www.ruby-doc.org/core/2011 年 8 月 24 日访问

52。Britt J，Neurogami (2011) Ruby 标准库参考。詹姆斯·布里特，神经游戏玩家。www.ruby-doc.org/stdlib/2011 年 8 月 24 日访问

53。Britt J，Neurogami (2006) Ruby C API 参考。詹姆斯·布里特，神经游戏玩家。www.ruby-doc.org/doxygen/current/2011 年 8 月 24 日访问

54。科列斯尼科夫 V (2009) Rails 可搜索 API 文档。弗拉基米尔·科列斯尼科夫。railsapi.com2011 年 8 月 24 日访问

55。丹古尔 K 等 (2009) CommonJS: JavaScript 标准库。CommonJS 社区。www.commonjs.org2011 年 8 月 24 日访问

56。谷歌(2011)CommonJS 谷歌集团。谷歌公司groups.google.com/group/commonjs。2011 年 8 月 24 日访问

57。Oracle (2010) MySQL:世界上最受欢迎的开源数据库。甲骨文公司。www.mysql.com2011 年 8 月 24 日访问

58。ASF (2011)阿帕奇德比。Apache 软件基金会。db.apache.org/derby/2011 年 8 月 24 日访问

59。IBM (2011) DB2 数据库软件。国际商业机器。www-01.ibm.com/software/data/db2/2011 年 8 月 24 日访问

60。火鸟项目(2011)火鸟:真正的开源关系数据库，适用于 Windows、Linux、Mac OS X 等。火鸟基金会有限公司。www.firebirdsql.org2011 年 8 月 24 日访问

61。微软(2011)微软 SQL Server。微软公司。www.microsoft.com/sqlserver/en/us/default.aspx2011 年 8 月 24 日访问

62。甲骨文(2011)甲骨文数据库。甲骨文公司。www.oracle.com2011 年 8 月 24 日访问

63。PostgreSQL GDG (2011) PostgreSQL:世界上最先进的开源数据库。PostgreSQL 全球开发小组。www.postgresql.org2011 年 8 月 24 日访问

64。Hipp DR (2011) SQLite。sqlite.org2011 年 8 月 24 日访问

65。Sybase (2011)数据库管理。赛贝斯公司www.sybase.com/products/databasemanagement。2011 年 8 月 24 日访问

七、元数据和语义网

web 文档的基本结构提供了所需的外观和功能。然而，默认情况下，内容是人类可读的。您可以使用额外的技术为 web 文档提供意义，使它们成为机器可读的和语义 Web 的一部分。最近为新兴的语义网技术引入了许多术语，但是由于缺乏正式的定义，许多定义有些模糊。例如，由于自动执行动作的潜力，一个新的网络时代已经开始，它被称为 Web 2.0。在在线社区门户网站上流行起来之后，语义网的一些特性以及个性化现在被称为 Web 3.0。有大量的元数据可供选择，还有微格式和各种注释，可以极大地扩展 web 文档的可能性。它们还可以大大提高网络搜索的效率。RDF 应该被用来增加网络的结构，改变传统的搜索引擎使用暴力的方法。

在本章中，你将学习机器可读的元数据注释和语义上有意义的属性。您还将熟悉资源描述框架，这是语义 Web 技术背后的基本标准。阅读完本章后，您不仅能够应用各种元数据注释，还能够创建新的词汇、方案和本体，包括但不限于以下内容:

标记中的通用元数据:常规meta标签
微格式:作为标记元素属性值提供的元数据
微数据:html 5 中通用元数据嵌入的元数据注释
RDF:语义网数据模型的标准化框架
OWL:一种用于描述和共享 web 本体的知识表示语言，它将知识正式表示为一个领域中的一组概念以及这些概念之间的关系
FOAF 和 DOAC :机器可读的人类本体和他们的专业能力
XMP，Rich Snippets，SearchMonkey RDFa :图像和视频剪辑的元数据格式

语义网

直到最近，软件代理还不能处理许多可能与文件相关联的信息。虽然文件结构和扩展名提供了一些关于文件的信息，很多信息无法表达。例如，扩展名为.jpg的文件总是代表 JPEG 图像，但在引入 Exif 和 XMP 等元数据格式之前，不提供关于快门速度、曝光程序、f-stop、光圈、ISO 速度等级或焦距的信息(见第九章)。然而，共享存储在二进制文件中的元数据仍然不是共享元数据的最有效方式，特别是如果它更通用的话。在数字时代，出售的电子文件(电子书、MP3 文件等等)可以在许多类型的设备上检索或播放。各种元数据技术可用于表达任意信息，并以机器可读格式表示与电子文档相关的任何种类的知识。机器可读数据(自动化数据)是以机器可读格式存储的数据，使得自动化软件代理可以在没有人工干预的情况下访问和处理它。

对于浏览器来说，web 文档只包含人类可读的数据。事实上，信息与包含它们的容器混淆了。与传统的 Web(“文档 Web”)不同，语义 Web 是“数据 Web”。语义网提供了机器可处理的数据，使得软件代理有可能“理解”Web 文档所表示的信息的含义(换句话说，语义)。这个功能可以用于各种服务 [2 ]，比如博物馆 [3 ]，社区网站 [4 ]，或者播客 [5 。

images 注意语义这个词在网络上的其他语境中也会用到。例如，在 HTML5 中有语义的(换句话说，有意义的)结构化元素，但是这个表达式指的是元素的“意义”。在这种情况下，单词语义将元素的“含义”与旧 HTML 版本的通用元素(如“无意义的”div)进行对比，例如section(主题分组)。标记元素的语义不应该与语义 web 上使用的元数据注释和 Web 本体的语义(换句话说，机器可处理性)相混淆。后者可以提供比标记元素更复杂的数据。

传统的 web 文档可以用额外的数据来扩展，这些数据增加了文档的意义，而不仅仅是结构。语义网是一种将会改变网络世界的新方法。令人惊讶的是，早在 2001 年，蒂姆·伯纳斯·李就描述了语义网存在的原因 [6 ]。在语义网上，可以从看似不相关的领域自动检索数据，以便组合它们，找到关系，并做出发现 [7 ]。语义网应该被认为是传统网络的延伸。

两个术语经常与语义网联系在一起，尽管它们都没有明确的定义: Web 2.0 和 Web 3.0 。

Web 2.0 是一个总括术语，用于表示构成第二代 Web 的一系列技术，如可扩展标记语言(XML)、异步 JavaScript 和 XML (Ajax)、真正简单聚合(RSS)和会话发起协议(SIP)。它们是即时消息、IP 语音、维基、博客、论坛和联合背后的底层技术和标准。

下一代 web 服务越来越多地被称为 Web 3.0，这是一个总括术语，通常指定制和语义内容以及面向人工智能的更复杂的 Web 应用，包括计算机生成的内容 [9 ]。

语义网是 Web 2.0 [0]和 Web 3.0 [1 ]的一个主要方面。Web 3.0 可以被认为是语义网的超集，其特点是社交联系和个性化。

一些技术有助于共享这些信息，而不仅仅是网页，语义 web 应用的数量也在不断增加。

由传统 web 应用控制的所有数据都由应用自己保存，这使得很大一部分数据及其关系实际上不可用于自动化处理。另一方面，语义 web 应用可以通过通用 Web 架构访问这些数据，并在应用和网站之间传输结构化数据。语义网技术可以广泛应用于各种领域，如数据集成、资源发现和分类、编目、智能软件代理、内容分级和知识产权描述 [3 ]。与传统网页相比，语义网页可以执行更广泛的任务；例如，可以自动处理数据甚至句子之间的关系(见下一节)。此外，效率更高。例如，一种非常有前途的方法提供了关系数据到 RDF 的直接映射，使得在语义网上共享关系数据库的数据成为可能。由于关系数据库在计算中非常流行，到目前为止存储在本地硬盘上的数据库可以在语义网上共享。市面上已经有商业 RDF 数据库软件包(5Store、AllegroGraph、BigData、Oracle、OWLIM、Talis Platform、Virtuoso 等等) [5 。语义工具也可以用于各种其他领域，包括业务流程建模或诊断应用。

除了这些好处之外，还有几个未解决的问题需要进一步研究，在某些情况下，还需要开发新的方法。语义 Web 应用的最大挑战是解决语义数据质量问题，并识别有用和有意义的信息。有越来越多有前途的方法；然而，它们有一个共同的特征:都依赖于标准的注释、分类法、词汇表和本体。在本章中，我们从标准化的角度分析了这些基本技术及其特性。

结构化数据

数据的结构应该支持数据类型的高级可处理性和可搜索性。结构化数据是以某种结构组织起来以便识别的数据。这种数据已经在计算中使用了几十年，例如以 Access 和 SQL 数据库的形式，其中可以执行查询来检索信息(例如，邮政编码)。与关系数据库相比，Web 上的大多数数据都存储在包含非结构化数据的(X)HTML 文档中。

传统的 web 文档包含大量可以在 web 浏览器中呈现的非结构化数据。这种方法对于出版目的来说是令人满意的；然而，存储在 web 文档中或与 web 文档相关联的大量数据不能以这种方式处理。根据 Berners-Lee 的说法，用来描述人与人之间社会联系的数据是这类数据的一个很好的例子。我设计它是为了一种社会效果——帮助人们一起工作——而不是作为一个技术玩具。网络的最终目标是支持和改善我们在世界上的网络生活。我们聚集成家庭、协会和公司。我们在远处培养信任，在拐角处培养不信任。我们相信、赞同、同意和依赖的东西是可以表现的，并且越来越多地在网络上表现出来。我们都必须确保我们用网络构建的社会是我们想要的那种。”

在语义网上，有各种各样的结构化数据，通常在资源描述框架中表达，或者基于资源描述框架，这将在后面详细描述。与传统的概念建模方法(如类图和实体关系)类似，RDF 数据模型基于以主-谓-对象表达式的形式描述和表征资源(尤其是 web 资源)的语句。主题与资源相对应。谓语表达了主语和宾语之间的关系。这样的表达式叫做三元组。

例如，陈述“草地是绿色的”可以用 RDF 三元组表达如下:

主题:“草地”
谓语:“是”
物体:“绿色”

RDF 是一个抽象模型，有几种序列化格式。因此，三元组的语法因格式而异(参见后面的“资源描述框架”一节)。

images 注意 RDF 是概念，不是语法。

“传统”网站的作者通常发布非结构化数据，因为他们不知道结构化数据的威力，觉得 RDF 太复杂，或者不知道如何以任何序列化格式创建和发布 RDF。以下是将结构化数据添加到传统(X)HTML 标记的问题的解决方案，这些数据可以由适当的软件提取并转换成 RDF:

微格式，重用标记属性
微数据，用结构化元数据扩展 HTML5 标记
RDFa，用不属于(X)HTML 词汇表的标记属性来表达 RDF

链接开放数据

链接数据(也称为链接数据)可以用来改进对“数据网”的利用。该表述指的是结构化数据的发布，通过在不同来源的数据之间创建类型化的链接 [9 ]来提供更高级别的可用性。通过使用链接数据，可以找到其他相关数据。结构化数据应满足四个要求才能称为链接数据[0]:

应将 URIs 分配给数据集的所有实体。
需要 HTTP URIs 来确保用户和用户代理可以引用所有实体。
应该使用 RDF/XML 等标准格式来描述实体。
应该创建到其他相关实体 URIs 的链接。

所有满足这些要求并向公众发布的数据称为链接开放数据 (LOD)。发布为关联数据的各种数据集由 LOD 云图表示(图 7-1 ) [1 )。

images

***图 7-1。*LOD 云图(由 Richard Cyganiak 和 Anja Jentzsch 提供)

该图像收集根据关联数据原则发布的数据集，并表示它们之间的链接。气泡的大小对应于每个数据集中存储的三元组的数量。贡献者包括链接开放数据社区项目、个人和组织。

各种各样的注释和语法

元数据是描述网站功能和内容信息的结构化数据。写在(X)HTML head sections 中的meta 标签，不需要额外的技术，可以用来描述关于网页的一般数据(前面在第三章中提到过，下一节会详细描述)。语义的、机器可读的标签可以通过微数据、微格式或 RDFa 作为(X)HTML 或 XML 元素的属性值提供。

有几种元数据技术；许多应用不同的注释。例如，对一个人的描述可以用 RDFa、微数据、vCard 微格式以及其他词汇(如 FOAF 或 DOAC)来表达。

诸如许可之类的特殊元数据可以用不同的符号来提供。图像和包含图像的网页的许可信息可以不同。提供许可证元数据对每个网站都有好处，尤其是那些版权不同于用户内容的网站，比如像 Flickr [2 这样的图片共享门户网站。图像许可可以以基本标记、微数据、rel="license"微格式和 RDFa 的形式提供。

几种元数据技术可以用多种语法编写。例如，在微格式的情况下，可以嵌入微格式的标记语言之间存在差异。在其他情况下，需要降低复杂性(例如 RDF 语法)。

meta 标签

在 20 世纪 90 年代，meta元素对网络搜索结果有很大的影响。从那以后，它们的重要性一直在下降，部分原因是被用来操纵搜索引擎排名的不道德的伎俩。一个很好的例子是关键字填充，它被用来加载一个网页，网页中有一些流行的关键字，但这些关键字不一定与页面内容相关，或者在meta标签中，或者在内容中。在后一种情况下，关键字通常是隐藏的，但是包含它们的网页会被搜索引擎编入索引。这种伎俩使开发者有可能在搜索结果中获得更高的排名，但也大大增加了搜索结果列表中不相关链接的数量。虽然现在meta标签已经不那么重要了，但是它仍然应该被用来为搜索引擎提供网页内容的信息。

HTML/XHTML 中的meta标签可以定义各种元数据，例如，内容类型、作者、发布日期、关键字、页面内容描述、字符编码等等。这些标签是在 HTML 2.0 中引入的，现在仍然有效。

在meta元素上可以使用四个属性:content、http equiv、name和scheme。第一个是唯一必需的属性。meta元素属性可以指定以下内容:

Alternatives to HTTP headers that are sent by web servers prior to the web page content. Listing 7-1 shows an example.

**清单 7-1。**由meta标签提供的文件到期日期

<meta http-equiv="expires" content="Fri, 15 October 2010 14:15:00 GMT" />
Names and associated content attributes describing aspects of (X)HTML pages. Listing 7-2 shows an example.

***清单 7-2。*带meta标签的关键字声明

<meta name="keywords" content="standardization, accessibility" />

方案指定了定义键的含义及其值的语义框架。它们还可以防止潜在的歧义。清单 7-3 显示了一个例子。

***清单 7-3。*一个元方案

<meta name="foo" content="bar" scheme="DC" />

在这种情况下，meta 元素中的 foo 元素具有来自 Dublin Core (DC)资源描述框架(RDF)的值 bar。

通过定义文档语言、最相关的关键字和简短描述，language、keywords、description和robots属性有助于更精确的 web 搜索。最后一个属性robots的值在有限的范围内提供了对搜索引擎行为的控制。可以阻止网页被索引(noindex)、抓取(nofollow)、缓存(noarchive)、描述(nosnippet)或者根据开放目录项目 ( noodp ) [4 ]进行描述。noindex、nofollow值的组合可以用值none [5 代替。例如，该设置可用于搜索引擎不应考虑其内容和链接的机密文档。 ¹ 从搜索引擎 Google、Yahoo！，而 Bing 可以具体禁用。要应用的meta name是谷歌的Googlebot，雅虎的Slurp！，而msnbot为 Bing ( 清单 7-4 )。

¹ 还有其他技术可以达到类似的效果。例如，robots.txt中不允许的目录所包含的 web 文档将不会包含在搜索结果中。

清单 7-4。 meta不同爬虫的标签

<meta name="Googlebot" content="noodp" /> <meta name="Slurp" content="noodp" /> <meta name="msnbot" content="noodp" />

如果您想阻止从 Yahoo！目录从搜索结果中显示出来，可以使用noydir值 [6 ] ( 清单 7-5 )。

***清单 7-5。*使用noydir属性值

<meta name="robots" content="noydir" />

重要的是要记住，尽管属性值多种多样，使用meta标签来阻止搜索引擎索引或抓取并不是最好的解决方案。为此，应该使用robots.txt文件。

web 文档头部分提供的典型通用元数据看起来像清单 7-6 中的。

***清单 7-6。*Web 文档meta标签的完整示例

因为meta元素上的name属性的属性值是robots，所以content属性的值(index, follow)应用于所有搜索引擎，而不是特定的一个。

模式、词汇和本体

分类法或词汇表是可以用作元数据元素值的术语的结构化集合。它们是映射概念及其关系的概念数据模式(概念数据模型)的一部分。名称空间揭示了标签和属性的含义，并形成了词汇表。形式化的概念结构可以被定义为本体，换句话说，领域中概念集合的知识表示以及它们之间的关系。Web 本体使得以机器可读的格式描述任何主题的复杂语句成为可能。

名称空间提供了一种扩展标记语言词汇的机制。为了使用各种元数据技术的外部词汇和本体，应用了 XML 名称空间工具，以便将所有属性与定义它们的适当模式相关联。可以通过这种方式提供特定的元数据，例如作者的朋友、离作者最近的机场、办公室的 GPS 坐标等等。可以为资源的附加类和实例创建用户定义的名称空间(模式)。

在语义网中，速记符号被用来减少文档长度。一种流行的机制叫做限定名 ( Qname ，应用于 XML、XML Schema、RDF、RDF Schema、OWL、Dublin Core 等等。以下是最常见的 Qnames:

dc
指命名空间 URI [purl.org/dc/elements/1.1/](http://purl.org/dc/elements/1.1/)
owl
指命名空间 URI [www.w3.org/2002/07/owl#](http://www.w3.org/2002/07/owl)
rdf
指命名空间 URI [www.w3.org/1999/02/22-rdf-syntax-ns#](http://www.w3.org/1999/02/22-rdf-syntax-ns)
rdfs
指命名空间 URI [www.w3.org/2000/01/rdf-schema#](http://www.w3.org/2000/01/rdf-schema)
xsd
指命名空间 URI [www.w3.org/2001/XMLSchema#](http://www.w3.org/2001/XMLSchema)

语义网应用的选择越来越多。例如，OntosMiner 运行本体驱动的多语言信息提取，并以各种格式提供输出，包括 RDF(S)、XML、OWL 和 N3 [7 ]。在 OWL 中，临床原型可以作为 web 本体来表示和管理。OWL 还可以应用于电子政务表示。网络本体可以用于考虑学习资源的观点，例如在线编程课程 [8 ]。财经头条新闻也可以用本体 [9 ]来表示。以下是一些比较成熟的本体论的简短列表:

书目记录的功能需求，通常简称为 FRBR ，可以用来表达具有creator、part、embodiment、successor、subject等属性的书目记录。FRBR 有四个等级:Work、Expression、Manifestation和Item【0】。
创意作品的许可可以用知识共享来表示。知识共享权利表达语言是描述 RDF 版权的理想语言。它有permits、requires、prohibits、jurisdiction、legalcode、deprecatedOn等属性，还有Work、License、Jurisdiction、Permission、Requirement、Prohibition、 1 等类。
开放数字权利语言是一种用于政策表达的开放标准，由 ODRL 倡议 [2 ]开发和推广。使用 ODRL 执行的权利的数字管理也引起了关注，ODRL 也被描述为 W3C 注释 [3 ]。
叙词表和分类法可以用 W3C 标准 SKOS 、简单知识组织系统来描述。它具有诸如broader、narrower、subject和related [4 ]的属性，这些属性对应于分类法、叙词表、分类方案以及进一步结构化的受控词汇表的属性。
地理位置可以在 Geo 中精确标注。它有lat、long和alt属性以及SpatialThing和Point类 [5 ]。
传记信息可以用传记词汇 6 来表达。
在教育方面，IMS/IEEE 学习对象元数据 ( LOM )可以做一个服务 7 。
Math-Net 可用于标准化数学部门和研究机构的信息呈现。
人和他们的社交网络可以通过朋友的朋友(FOAF)的属性如name、homepage、knows、weblog、interest在 RDF/XML 或 OWL 中精确描述(参见“FOAF”一节) [9 )。所有社交网站都应该使用 FOAF。
专业能力和成就可以通过职业描述来描述(DOAC)(见“DOAC”一节)[0]。DOAC 与可以从 FOAF+DOAC 文件生成的欧洲课程(Europass)兼容。
软件项目，尤其是开源项目，可以用项目描述(DOAP)来表达。

这些模式、词汇和本体只是无尽变化的示范。这份名单无论如何都不完整。Schemaweb.info [2 ]、vocab.org[3]和其他库收集更具体和复杂的词汇、模式和本体，例如啤酒本体 [4 ]、音乐词汇 [5 ]或视频本体 [6 ]。你也可以用谷歌搜索找到很多词汇。

然而，网络本体论有其局限性和开放性的问题。例如，用规则扩展验证 OWL 本体是相当复杂的。但是，可以通过使用声明性方法(一种称为 Datalog 的新语言) [7 ]在符号级别验证它们。应该解决各种本体之间的语义差异。实现这一目标的努力被称为本体对齐。从大型 RDFs 中存储和检索数据只能通过高级技术来执行 [8 ]。

微格式

元数据的一种特殊方法是一组简单的开放数据格式，称为微格式(F).)通过应用和重用现有技术的特性(例如,( X)HTML rel属性),并通过尽可能简单的方法引入新技术——基于普通的旧语义 HTML ( POSH )(例如 hCard)，它们与语义 Web 高度相关。它们不仅可以应用于(X)HTML 标记，还可以应用于 XML、RSS、Atom 等等。

微格式可以用class、rel和rev属性值 [9 ]来表达站点结构、链接权重、内容类型和人际关系。它们非常容易编写，支持它们的软件数量也在增加(例如，Operator [0]和 Tails Export[1]Firefox 的附加组件，Google Chrome 扩展 Michromeformats [2 ]，Microformats transformer Optimus[3]，或者 Safari、Firefox 和 IE 的 Microformats Bookmarklet[4])。

然而，仍有一些未决问题。例如，应该避免在a元素上应用各种微格式作为多个值(例如，rel="nofollow"和rel="friend")。投票链接微格式使用的rev属性不能在 HTML5 中使用。

由profile属性提供的配置文件 URIs 不能在 HTML5 中的head元素上使用，其中profile属性值可以在锚(a或链接元素(link)上为rel属性声明。例如，为 hCalender 微格式提供了一个包含所有三个选项的配置文件 URI。hCalendar 微格式基于 iCalendar 标准(RFC 2445 [5 ])。所有使用 hCalendar 符号的内容都应该引用 hCalendar XMDP 配置文件，换句话说就是 [microformats.org/profile/hcalendar](http://microformats.org/profile/hcalendar)，如清单 7-7 或清单 7-8 中所示，作为文档头，或清单 7-9 中所示，作为文档体的一部分。这些方法也可以结合使用。

***清单 7-7。*在文档头中提供 hCalendar 头配置文件(不能在 HTML5 中使用)

<head profile="http://microformats.org/profile/hcalendar">

***清单 7-8。*链接到文档头中的 hCalendar 配置文件

<link rel="profile" href="http://microformats.org/profile/hcalendar">

***清单 7-9。*在文档正文中使用 hCalendar 配置文件

<a rel="profile" href="http://microformats.org/profile/hcalendar">hCalendar</a>

HTML5 引入的新结构元素，比如article、nav和section，不能被某些微格式解析器识别。

在接下来的部分中，我们将向您概述一些最流行的微格式，即 hCalendar、hCard、rel="license"、rel="nofollow"、rel="tag"、投票链接和 XFN。

hCalendar

您可以使用 hCalendar 微格式为体育赛事、周年纪念、提醒、会议、研讨会、会议和其他事件创建日历条目。hCalendar 的根类名是vcalendar。事件的根类名是vevent，这是所有事件列表所必需的。

这些属性由 hCalendar 的元素表示。需要的属性有dtstart，需要以 ISO 日期格式提供， ² 和summary。

清单 7-10 显示了一个 hCalendar 的例子。

***清单 7-10。*为期三天的会议在 hCalendar 召开

Semantic Web Conference '11

The Semantic Web Conference 2011 will take place in Pretoria, images

South Africa.

Posted on: Aug 25, 2011

uid1@host.com

Organized by: js@expl.com

Dates: October 12, 2011, 09:30

UTC – October 14, 2011, 20:00

UTC

Status: Confirmed

Filed under:

Conference

除了 hAtom、hCalendar、hCard 和 hReview 等微格式之外，还有一些 web 技术将 ISO 8601 日期格式应用于日期时间表示，如 XML、XML schema 数据类型、RDF 和 Atom。

可选属性包括但不限于:location、url、dtend、duration、rdate、rrule、category、description、uid、geo、attendee、contact、organizer、attach和status。geo属性有子属性latitude和longitude，而attendee有子属性partstat和role。根据规范，属性列表不是最终的，正在被扩展 [6 ]。

那些必须定期发布新事件的人可能会发现 hCalendar 生成器 hCalendar-o-matic 非常有用。

hCard

hCard 微格式标准可用于通过语义标记 [8 ]来表示个人、公司和组织的联系数据。hCard 元数据应该在网站的联系页面上提供。据雅虎称，2010 年夏天，hCard 突破了 20 亿大关。Search Monkey，使其成为网络上最受个人和组织欢迎的元数据格式。

hCard 基于 vCard 标准(RFC 2426 [9 ])。事实上，现有的 vcard 可以很容易地转换为 hCard。^??

提示vCard 标准广泛用于存储电子名片。例如，Microsoft Outlook 将这种格式用于“联系人”下的名片。

hCard 类名应该是小写的。

注意hCard 的根类名是vcard。具有类名vcard的元素本身被称为 hCard。

hCard 中的两个必需属性是fn和n。然而，如果任何隐含的“N”优化规则有效，则第二个是可选的。 ⁴ 属性n可能有子属性family-name、given-name、additional-name、honorific-prefix和honorific-suffix。

其他所有属性都是可选的，包括adr、agent、bday、category、class、email、geo、key、label、logo、mailer、nickname、note、org、photo、rev、role、sort-string、sound、tel2、title、tz、uid和url。adr允许的子属性有post-office-box、extended-address、street-address、locality、region、postal-code、country-name、type、value；type和value为email；latitude和longitude为geo；organization-name和organization-unit为org；tel2的type和value。

典型的 hCard 代码类似于清单 7-11 中的。

³vCard 符号BEGIN:VCARD是 hCard 中的class="vcard"，N:是class="n"，FN:是class="fn"，以此类推。

⁴ 如果 n 被省略但fn存在，n的值将等于fn的值。

***清单 7-11。*典型的 hCard

Vancouver,
BC,
V5K
Canada

+12345678

以下 hCard 元素是单数，只能提供一次:fn、n、bday、tz、sort-string、uid、class和rev。所有其他属性都允许有多个实例。

通常，标记元素的 visible 属性值表示 hCard 属性的值。然而，也有一些例外。

对于由一个或多个 hCard 属性的a元素表示的超链接，href属性为所有具有 URL 值的属性提供属性值(例如，photo)。如果使用了img元素，src属性保存所有带有 URL 值的属性的属性值。对于object元素，数据属性提供属性值。元素的内容是所有其他属性的属性值。

如果为带有 hCard 符号的abbr元素提供了title属性，则其值将被视为 hCard 属性，而不是其他情况下使用的元素内容。

虽然手动创建 hCard 元数据很容易，但是 hCard 元数据可以由 hCard 创建者 hCard-o-matic 在规范作者的网站上生成[0]。你只需简单地填写一张关于姓名、组织、国家、电子邮件和其他联系信息的表格，软件就会生成 hCard。

为了提供额外的信息，微格式也可以嵌套。例如，体育赛事评论可能不仅包含评论，同时还包含个人信息(hCard)(清单 7-12 )。

***清单 7-12。*hReview 和 hCard 的组合

The winner takes it all Review

By John Smith, Editor images

at Consumer Reviews

Rating: 4.5 out of 5.
A fascinating performance.

审查由 hReview 微格式(class="hreview")描述。审核人姓名由span class="reviewer"透露。hCard 微格式嵌套在 hReview 微格式中，以便提供关于他的附加信息(在 <span class="reviewer vcard">中用空格分隔的属性值列表)。hCard 属性描述了审阅者的姓名(fn)、职位(title)和组织(org)。

rel= "许可证"

有数以百万计的网络资源保留部分或全部权利。许多与文档和对象相关联的许可证是复杂的，用户不可能知道它们。

可以将rel="license"微格式添加到指向许可证描述的超链接中。这对于图像尤其有用，但也可以用于任何资源。

基本的图像嵌入只应用于img元素的src和alt属性，如清单 7-13 中的所示。

***清单 7-13。*一个基本的图像嵌入

<img src="hotel.jpg" alt="The Palace Hotel" />

要声明图像许可，还应该使用rel和href属性。以知识共享署名-相似分享许可为例，它应该是清单 7-14 所示的形式。

***清单 7-14。*申报图像许可

<img src="hotel.jpg" alt="The Palace Hotel" rel="license" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) **ref="http://creativecommons.org/licenses/by-sa/3.0/" />**

href属性的值提供了描述许可证的资源的相关 URI。一些最常用的许可证契约有 [1 如下:

知识共享署名(cc by)
[creativecommons.org/licenses/by/3.0/](http://creativecommons.org/licenses/by/3.0/)
知识共享署名共享(cc by-sa)
[creativecommons.org/licenses/by-sa/3.0](http://creativecommons.org/licenses/by-sa/3.0)
知识共享署名无衍生品(cc by-nd)
[creativecommons.org/licenses/by-nd/3.0](http://creativecommons.org/licenses/by-nd/3.0)
知识共享署名非商业性(cc by-nc)
[creativecommons.org/licenses/by-nc/3.0](http://creativecommons.org/licenses/by-nc/3.0)
知识共享归属非商业共享(cc by-nc-sa)
[creativecommons.org/licenses/by-nc-sa/3.0](http://creativecommons.org/licenses/by-nc-sa/3.0)
知识共享归属非商业无衍生品(cc by-nc-nd)
[creativecommons.org/licenses/by-nc-nd/3.0](http://creativecommons.org/licenses/by-nc-nd/3.0)

您应该选择一个与您允许他人对您的作品所做的事情相匹配的许可证(商业或非商业分发、重新混合、调整、适当授权共享、修改等等)。

这个微格式的概要文件是[microformats.org/profile/rel-license](http://microformats.org/profile/rel-license) [2 ，可以在head (X)HTML 标签上指定，如清单 7-15 所示。

清单 7-15。"rel=license"?? 的头像简介】

<head profile="http://microformats.org/profile/rel-license">

rel="nofollow "

rel 属性的一个值值得进一步关注，因为它经常在搜索引擎优化 (SEO)中使用。当rel="nofollow"被添加到一个超链接时，链接目的地不应该被搜索引擎考虑为附加排名。如果文档所有者需要超链接，而又不影响他们的网页或外部网站链接的排名，则可以应用该属性值。例如，如果一个超链接在网页上是至关重要的，但是它的目标页面具有非常低的 PageRank，那么该超链接应该提供有rel="nofollow"以避免背书。

images 注 PageRank (PR)是一种链接分析算法，用于为每个 web 文档分配一个数字权重，以便在 0-10 的范围内表示其相对重要性。

例如，如果lowprsite.com的 PR 值很低，但是你必须链接到它，因为那里显示的内容，你可以使用rel="nofollow"微格式，如清单 7-16 所示。

***清单 7-16。*搜索引擎索引页面时不会考虑的链接

<a href="http://www.lowprsite.com" **rel="nofollow"**>Low PR site</a>

清单 7-17 显示了这种微格式的轮廓 URI。

*清单 7-17。rel="nofollow"*的简介 URI

<link rel="profile" href=**"http://microformats.org/profile/rel-nofollow"**>

尽管这种微格式被广泛使用，但它还有几个公开的问题。rel="nofollow"微格式表示一种行为而不是一种关系，所以这个定义是不合逻辑的。微格式的名称并不能反映其真正的含义。它不是名词。它不影响垃圾邮件。最后，许多合法的非垃圾链接可能会被忽略或降低权重，这是一个不幸的副作用，应该消除 [4 ]。

标记

自 2005 年 [5 ]以来，rel="tag"仍然是一个草案规范。与其他微格式和一般元关键字不同，这种微格式可用于可见链接。它可以应用于超链接元素，以指示链接的目的地是当前页面的一般作者指定的标签(关键字)。

在这个微格式中，空格可以作为+或%20提供。Unicode 字符根据互联网协会(RFC 3986 [6 ]描述的 URIs 通用语法规则进行编码。

投票链接

投票链接是一种基本的微格式，在a元素的rev属性上有三个可能的值:vote-for、vote-against和vote-abstain。这些值是互斥的。可选地，可视翻转可以由title属性提供。清单 7-18 显示了一个例子。

***清单 7-18。*投票链接示例

<a rev="vote-for" href="http://example.com/thumbsup/" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) title="HTML should be the primary markup language">HTML5</a> <a rev="vote-against" href="http://example.com/thumbsdown/" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) title="XHTML should be the primary markup language">XHTML5</a>

最初，规范草案在 rel 属性上应用了投票链接，现在不推荐使用 [7 ]。

清单 7-19 显示了 URI 档案参考。

***清单 7-19。*投票链接的 URI 简介

<link rel="profile" href=**"http://microformats.org/profile/vote-links"**>

XFN

第一个 HTML 微格式 XHTML 朋友网络(XFN)于 2003 年 12 月推出。XFN 是由全球多媒体协议组织设计的，用简单的超链接 [9 ]来表达人际关系。XFN 对于小册子风格的主页和博客条目特别有用。

应该提供人名作为超链接的文本(在<a>和</a>之间)。个人网站是超链接的目标，换句话说，是href属性的值。所有关系数据都可以由a元素上的rel属性提供。允许多个值，并用空格分隔。友谊类型可以是contact、acquaintance或friend。如果是个人认识的人，可以用rel属性的met属性值来表示。例如，莱斯利·西科斯的一个朋友可以在他的网站上发布 XFN 的关系，如清单 7-20 所示。

***清单 7-20。*链接到朋友的网站

I am an old friend of <a href="http://lesliesikos.com" **rel="friend met"**>Leslie Sikos</a>.

该人的住所与其朋友的住所之间的距离可以用co-resident和neighbor值来表示。亲属可以设置为child、parent、sibling、spouse或kin。也支持职业关系co-worker和colleague。感情也可以表达(muse、crush、date、sweetheart)【0】。

CSS 样式也可以添加到 XFN 元数据中。例如，朋友可以用粗体显示，同事用斜体显示，CSS 规则如清单 7-21 所示。

***清单 7-21。*造型 XFN

`a[rel~="friend"] {
font-weight: bold;
}

a[rel~="colleague "] {
font-style: italic;
}`

虽然从零开始创造 XFN 很容易，但 XFN 的创造者，如 XFN 创造者[1 或 Exefen[2 可能会加快发展。

XMDP

XHTML 元数据配置文件(XMDP)元数据是一种基于 XHTML 的格式，用于定义机器可读和人类可读的元数据配置文件。XMDP 由属性定义列表、可选描述以及一个或多个定义列表项(如果适用)组成。配置文件定义列表由class ( 列表 7-22 )标识。

清单 7-22。 XMDP 配置文件定义

<dl class="profile">

定义术语由id ( 列表 7-23 )标识。

清单 7-23。【XMDP 的定义术语和数据

<dt id="property1">property1</dt> <dd>propertydesc</dd>

例如，信息性使用的meta属性author和keywords可以由 XMDP 定义，如清单 7-24 [3 所示。

***清单 7-24。*一个完整的 XMDP 例子

author: A person who wrote (at least part of) the document.
keywords: A comma and/or space separated list of the keywords or keyphrases of the document.

清单 7-25 显示了 XMDP 配置文件 URI 的结构。

***清单 7-25。*一个 XMDP 配置文件 URI

<link rel="profile" href=**"http://gmpg.org/xmdp/samplehtmlprofile.html"**>

草稿和未来的微格式

新开发的微格式的数量正在增加。您可以应用它们来提供各种资源的特定元数据。

地址信息可以用adr [4 来描述。地理坐标(经纬度对)可根据世界大地测量系统 (WGS)以geo微格式 [5 ]提供。hAtom可用于网络联合组织 [6 ]。通过使用hAudio微格式 [7 ]可以嵌入有关音频记录的信息。hListing微格式可以应用于开放的分布式列表。图像、视频和音频媒体组件可以用hMedia [9 来描述。hNews是一种在网站上提供新闻内容的微格式[0]。产品描述可以用hProduct1 表示。烹饪和烘焙食谱可以在网上用hRecipe [2 描述。简历和履历可以用hResume [3 发布。文档评论可以写在hReview [4 。rel-directory微数据可以指示链接目的地是引用当前页面的目录列表。提供下载的文件附件可以用rel-enclosure微格式 6 表示。rel-home提供到网站主页的超链接 [7 ]。微格式是一种在线支付机制。robots meta标签的返工是robots-exclusion微格式 9 。xFolk微格式(代表 xFolksomony)是为发布书签集合[0]而设计的。

微格式社区欢迎元数据爱好者创建新的微格式。

微数据

HTML5 中引入了微数据的概念，用于标记内容，以描述特定类型的信息 [2 ]。HTML5 微数据可用于对人、组织、事件、产品、评论和链接的语义描述。

images 注意html 5 微数据中提供的很多描述也可以用微格式表示(前面讨论过)，也可以用 RDFa 表示(后面会看到)。然而，每种格式都有其优点和缺点，这将在后面详细描述。

人

各种元数据可以用来描述网络上的人。表示姓名、职务或地址等属性的选项之一是微数据。可以用微数据描述一个人，如清单 7-26 所示。

***清单 7-26。*用微数据描述一个人

John Smith lives in Adelaide, Australia and works as a images

Senior Developer at images

LS Inc.

事件

研讨会、会议、体育赛事等事件可以通过以下微数据属性进行描述:

description:事件的描述
duration:ISO 持续时间格式的事件持续日期
endDate(dtend):ISO 日期格式的事件结束日期和时间
eventType ( category):事件的类别，例如Concert、Festival、Lecture
geo:地点的地理坐标，有两个元素:latitude和longitude
location:活动的地点或场所
photo:与事件相关的照片或图像的超链接
startDate ( dtstart):事件的开始日期和时间，ISO 日期格式(必选)
summary:事件名称(必填)
url:描述事件详情的网页超链接

例如，一个体育赛事可以被描述为清单 7-27 中的所示。

***清单 7-27。*用微数据描述体育赛事

National flyball competition
Flyball

The national flyball competition is approaching.
When: Nov 13, 9:00AM—12:00AM
Where: Dog Park, 123 Arena Eve, Melbourne, VIC
Category: Sport

使用微数据的图像许可

提供图像许可信息的选项之一是 HTML5 微数据。清单 7-28 显示了一个例子。

***清单 7-28。*用微数据描述图像许可

强烈建议您在网上发布带有许可元数据的照片。这可以消除版权问题和许可问题，并有助于先进的网络搜索。

福夫

FOAF 是一个机器可读的本体，用来描述人们以及他们的联系数据、兴趣和与他人的关系。2007 年，Berners-Lee 定义了一个新的语义网概念，称为“巨型全球图”。他表示，FOAF 是 GGG 的重要组成部分:“我在一个 FOAF 文件中表达了我的网络，这是革命的开始” 4 。

与用 PHP 或 JSP 开发的传统在线社交网络不同，FOAF 网络可以在没有中央数据库的情况下构建。此外，FOAF 内容可以自动处理。没有人必须在 FOAF 网络中寻找朋友，因为系统本身描述了联系。 ⁵ 根据 2000 年开始的原 FOAF 项目，这些系统都是开放式网络 [5 ]。

FOAF 搜索引擎越来越多，比如 QDOS FOAFNet [6 ]，netEstate Friend Of A Friend (FOAF)搜索引擎 [7 ]，语义网搜索 [8 ]，或者 Quatuo [9 。例如，后者也可用于创建 FOAF 文件。然而，也有专门的 FOAF 发电机。最著名的是由利·多兹开发的 FOAF-O-MATIC。FOAF 文件可以通过填表生成(图 7-2)【0】。

然而，任何人都可以提供自己的 FOAF 文件，并搜索他人的文件。

images

图 7-2。 FOAF 自动驾驶汽车在行动

一些流行的内容管理系统，比如 Drupal，也支持 FOAF。在这些工具出现之前，缺乏图形用户界面可能是这项强大技术直到最近才得到普遍使用的主要原因。

FOAF 词汇表提供了各种类和属性来表达个人数据和关系:

基本信息
- 类:Agent，Person，
- 属性:name、nick、title、homepage、mbox、mbox_sha1sum、img、depiction ( depicts)、surname、family_name、givenname、firstName
个人信息
- 属性:weblog、knows、interest、currentProject、pastProject、plan、based_near、workplaceHomepage、workInfoHomepage、schoolHomepage、topic_interest、publications、geekcode、myersBriggs、dnaChecksum
在线账户
- 班级:OnlineAccount、OnlineChatAccount、OnlineEcommerceAccount、OnlineGamingAccount
- 属性:holdsAccount、accountServiceHomepage、accountName、icqChatID、msnChatID、aimChatID、jabberID、yahooChatID
项目和成员资格
- 班级:Project、Organization、Group
- 属性:member、membershipClass、fundedBy、theme
文档和图像
- 班级:Document、Image、PersonalProfileDocument
- 属性:topic(page)primaryTopic``tipjar``sha1``made(maker)thumbnail``logo

一个完整的 FOAF 描述看起来像清单 7-29 。

***清单 7-29。*与 FOAF 描述个人元数据

<foaf:Person> <foaf:name>Thomas Davis</foaf:name> <foaf:gender>Male</foaf:gender> <foaf:title>Mr</foaf:title> <foaf:givenname>Thomas</foaf:givenname> <foaf:family_name>Davis</foaf:family_name> <foaf:homepage rdf:resource="http://www.example.com"/> <foaf:weblog rdf:resource="http://www.example.com/blog/"/> </foaf:Person>

正如您将看到的，这样的描述可以嵌入到 XML 和 RDF 文件中。与传统的社区门户(如 PHP 和 MySQL 驱动的门户)的配置文件相比，这些文件的全部内容都可以自动处理。任何在网站上发布 FOAF 或 DOAC 文件的人都可以提供机器可读的个人介绍、资源以及同事和朋友的链接。

DOAC

FOAF 属性可以被认为是脸书上描述的个人特征和关系的语义对等物，DOAC 属性是 LinkedIn 特征的语义对等物。DOAC 词汇表不仅提供了描述专业能力的类和属性，还重新应用了来自foaf:Person领域的 FOAF 属性，包括doac:summary、doac:experience、doac:education、doac:skill、doac:reference和doac:publication、 7 。

就业历史和职业经历可以通过doac:Experience类的doac:title、doac:date-starts、doac:date-ends、doac:position、doac:activity和doac:location属性来描述。

教育培训信息可以通过doac:Education类的doac:title、foaf:organization、doac:date-starts、doac:date-ends、doac:subject、doac:level属性提供。

doac:Skill类有子类doac:Skill、doac:LanguageSkill、doac:SocialSkill、doac:OrganizationalSkill、doac:ComputerSkill和doac:DrivingSkill。

一个 FOAF+DOAC 的文件看起来像清单 7-30 中的。

***清单 7-30。*一个完整的 FOAF+DOAC 的例子

<foaf:Person> <foaf:name>John Smith</foaf:name> <foaf:mbox rdf:resource="mailto:john@jsmith.com" /> <foaf:homepage rdf:resource="http://www.jsmith.com" /> <doac:experience> <doac:VolunterExperience> <doac:title>CEO</doac:title> <doac:organization>ABC Company</doac:organization> <doac:start-date>2010-04-06</doac:start-date> <doac:end-date>2011-09-18</doac:end-date> </doac:VolunterExperience> </doac:experience> <doac:education> <doac:Degree> <doac:title>Information Management</doac:title> <doac:organization>Nanyang Technological University</doac:organization> <doac:start-date>2000-09-01</doac:start-date> <doac:end-date>2005-06-15</doac:end-date> </doac:Degree> </doac:education> <doac:skill> <doac:LanguageSkill> <doac:language>en</doac:language> <doac:reads rdf:resource="http://ramonantonio.net/doac/0.1/#nativelevel" /> <doac:writes rdf:resource="http://ramonantonio.net/doac/0.1/#nativelevel" /> <doac:speaks rdf:resource="http://ramonantonio.net/doac/0.1/#nativelevel" /> </doac:LanguageSkill> </doac:skill> </foaf:Person>

当有人在找工作或想要以机器可处理的格式描述他们职业生涯的基石时，这种元数据特别有用。因此，DOAC 文件可以用来使软件代理人根据他们的资格和经验自动提供工作。

都柏林核心

都柏林核心是由都柏林核心元数据倡议(DCMI)开发和发布的一组基本元数据元素，并由国际标准化组织(ISO 15836[2)、互联网工程任务组(IETF)(RFC 5013[3)和美国国家标准协会(ANSI/NISO z 39.85-2007[4)进行标准化。Dublin Core 元数据经常用在(X)HTML 文档head部分(类似于一般的 meta 标签)、XHTML+RDFa 文档的属性中，以及 feed channels 等其他文件中。它可以使用 meta 和 link (X)HTML 元素、RDFa、RDF/XML 表示和普通 XML [5 ]来表示。都柏林核心语法在由都柏林核心抽象模型规范 6 定义的参考模型中提供。

都柏林核心元数据元素集合定义了都柏林核心的 15 个基本元素，包括contributor、coverage、creator、date、description、format、identifier、language、publisher、relation、rights、source、subject、title、type [7 。如果专门使用这些元素，我们说的就是简单都柏林核心。扩展的元素集是更高级别的都柏林核心集，称为合格都柏林核心集，它提供了更具体的元素。除了简单都柏林核心的一般规则，进一步的规则适用于合格都柏林核心。合格的都柏林核心属性不仅可以是 15 个都柏林核心元素，还可以是都柏林核心元数据倡议或 DCMI 元素细化所推荐的其他元素。可选地，合格的都柏林核心值可能具有关联的编码方案，每个编码方案由一个名称来标识。元素细分的处理类似于属性(与 Dublin Core 名称空间相关联的元素细分名称)。

都柏林核心命名空间

Dublin Core 名称空间可以由(X)HTML link元素上的rel属性声明，也可以用 XML 中的xmlns属性声明。(X)HTML 声明由前缀和名称空间 URI 组成(见清单 7-31 )。

***清单 7-31。*都柏林核心命名空间声明

<link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" />

所有 DCMI 属性、类和编码方案的命名空间 URIs 由以下 DCMI 命名空间 URIs [8 ]定义:

[purl.org/dc/dcmitype/](http://purl.org/dc/dcmitype/)

DCMI 类型词汇中的类别
[purl.org/dc/dcam/](http://purl.org/dc/dcam/)

DCMI 抽象模型中使用的术语
[purl.org/dc/elements/1.1/](http://purl.org/dc/elements/1.1/)

都柏林核心元数据元素集，版本 1.1(15 个原始元素)
[purl.org/dc/terms/](http://purl.org/dc/terms/)

所有其他 DCMI 属性、类和编码方案

DCMI 抽象模型还应用了资源描述框架和 RDF Schema (RDFS)的一些语义概念，包括resource、property / element、class、syntax encoding scheme，一些关系(has domain、has range、sub-property of、sub-class of)，以及普通类型值字符串的概念 [9 。

简单的都柏林核心

都柏林核心记录由一个或多个属性及其相关属性值组成(清单 7-32 )。

清单 7-32*。*DC 属性(Creator)和与之关联的值(John Smith )

<meta **name="DC.Creator" content="John Smith"** />

每个属性都应该是来自 Dublin Core 元数据元素集的元素。所有属性都是可选的，并且可以重复[0]。DC 属性值被视为文字字符串，可能有关联的语言(例如，en-US)。都柏林核心记录和它们所应用的资源没有联系；然而，这种链接可以选择由元素identifier提供，资源 URI 作为属性值(清单 7-33 )。

***清单 7-33。*都柏林核心元数据与identifier

<dc:title> Tutorials </dc:title> <dc:description> HTML5 and CSS3 tutorials. </dc:description> <dc:publisher> Dr. Leslie F. Sikos </dc:publisher> **<dc:identifier>** ** http://www.lesliesikos.com/tutorials/** **</dc:identifier>**

都柏林核心元数据倡议为都柏林核心的实施推荐了三个通用规则:

Dublin Core properties should be provided as XML elements. Property values should be the contents of those elements. Listing 7-34 shows an example.

***清单 7-34。*作为 XML 元素的 Dublin Core 属性

<dc:title>Dublin Core in XML element format</dc:title>
All Dublin Core property names should be lowercase. Listing 7-35 shows an example.

***清单 7-35。*小写的都柏林核心酒店名称

<dc:title>Dublin Core example</dc:title>
Multiple property values should be declared by repeating the XML element for that property (see Listing 7-36).

***清单 7-36。*多个 Dublin Core 属性值的重复 XML 元素

<dc:creator>John Smith</dc:creator> <dc:creator>Robert Johnson</dc:creator>

合格的都柏林核心

合格的 Dublin Core 使得比简单的 Dublin Core 更具体和更高级(有意义)的注释成为可能。使用合格的都柏林核心元数据类似于添加简单的都柏林核心，除了合格的都柏林核心属性不仅可以来自最初的 15 个 DC 元素的集合，还可以来自 DCMI 元数据术语建议 [1 ]定义的附加元素或元素细化。此外，所有合格的 Dublin Core 属性值可能具有相关联的编码方案，该编码方案具有在 DCMI 元数据术语建议中被列为Term name的唯一名称。

除了一般实施指南之外，以下规则适用于合格的都柏林核心:

Similar to DC properties, the element refinement names should be XML qualified names (QName) that link to the associated DCMI namespace name (Listing 7-37).

***清单 7-37。*带 Dublin Core 的 XML QName】

<dcterms:available>2011-04</dcterms:available>

在本例中，资源变得可用或将变得可用的日期或期间用合格的 Dublin Core 表示。

元素细分可能会进一步嵌入元素细分。
Encoding schemes should be declared by the xsi:type attribute on the XML element for the property. The name of the encoding scheme is provided as the attribute value in the form of a QName. Listing 7-38 shows an example.

***清单 7-38。*编码方案申报

<dc:identifier xsi:type="dcterms:URI"> http://www.example.com/ </dc:identifier>
The names of both the element refinements and the encoding schemes should be those that are specified in the DCMI Metadata Terms recommendation. The first letter of the element and element refinement names should always be in lowercase. The first letter of encoding scheme names should be in uppercase. Scheme names are often provided in all uppercase. Listing 7-39 shows an example.

***清单 7-39。*元素细化和编码方案

<dcterms:isPartOf xsi:type="dcterms:URI"> http://www.example.com/ </dcterms:isPartOf>
The language of the property value can optionally be provided by using the xml:lang attribute (Listing 7-40).

***清单 7-40。*为都柏林核心设置自然语言

<dc:subject xml:lang="en"> website standardization </dc:subject> <dc:subject xml:lang="hu"> weblap-szabványosítás </dc:subject>

由(X)HTML 元和链接元素表示的都柏林核心

URI 引用可以是 URI，也可以是以 RFC 3986 格式 [2 ]表示的相对引用。URI 参考资料应完整表示(清单 7-41 )。

***清单 7-41。*元数据subject的完整 URI 引用

<link rel="DCTERMS.subject" href="http://example.org/docs" />

仅当相对引用可以由基本 URI(base元素上的href属性或来自文档 URI)解析时，才允许相对引用。清单 7-42 显示了一个例子。

***清单 7-42。*都柏林核心集的相对 URI 参考

一个前缀名是 DC-HTML 格式中使用的 URI 的缩写 [3 ]。一个 DC-HTML 前缀名称由一个前缀后跟一个句点 ( .)和一个本地名称组成。例如，以 DC-HTML 为前缀的名称被表示为属性值，如清单 7-43 所示。

***清单 7-43。*一个 DC-HTML 前缀名

<link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" /> <meta name="DC.title" content="Smartphone descriptions" />

Dublin Core 语句由(X)HTML meta或link元素表示，这取决于语句的内容(文字或非文字值代理)。例如，文档标题可以由 meta 元素提供，如清单 7-44 中的所示，而主题由清单 7-45 中的link元素表示。

***清单 7-44。*使用 Dublin Core 声明的文件标题

<meta name="DC.title" content="Smartphone descriptions" />

***清单 7-45。*使用 Dublin Core 声明的文档主题

<link rel="DCTERMS.subject" href="http://example.org/topic" title="Topic" />

关于文档语言、作者等的 Dublin Core 元数据可以在 XHTML 文档的 head 部分声明，如清单 7-46 所示。

***清单 7-46。*用 Dublin Core 描述的文档语言和创建者

<meta name=**"**DC.language**"** content=**"**en**"** /> <meta property=**"**dc:creator**"** content=**"**John Smith**"** />

用 XML 表示的都柏林核心

建议使用简单的 Dublin Core 元数据根据 XML 模式而不是 XML DTDs 创建 XML 应用。应该应用 XML 名称空间来标识都柏林核心元素、元素精化或编码方案。属性应该编码为 XML 元素和值。这些 XML 元素的名称应该是 XML 限定名(QNames)。属性名应该全部小写。当提供多个属性值时，XML 元素应该重复。

XML 元素的xsi:type属性应该用于实现编码方案。元素细化和编码方案使用由 DCMI 元数据术语指定的名称。属性应该被应用来在 XML [4 ]中提供合格的 Dublin Core 值的语言。清单 7-47 显示了一个复杂的例子。

***清单 7-47。*XML 中的 Dublin Core

<?xml version="1.0"?> <metadata ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) xsi:schemaLocation="http://example.com/xmlapp/ http://example.com/schemata/schema.xsd" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) xmlns:dc="http://purl.org/dc/elements/1.1/"> <dc:title> DC in XML sample document </dc:title> <dc:description> The description of the XML application. </dc:description> <dc:publisher> John Smith </dc:publisher> <dc:identifier> http://www.example.com </dc:identifier> </metadata>

都柏林核心描述集(DC-DS-XML)也可以用 XML [5 ]来表示。这些集合由一个或多个描述(包含零个或一个描述的资源 URI)以及一个或多个语句组成。这些语句包含一个属性 URI 和一个值代理。根据值代理的类型，它可以是一个值字符串(在文字值代理的情况下)或零个或一个值 URIs，零个或一个词汇编码方案 URI，以及零个或多个值字符串(在非文字值代理的情况下)。值字符串可以是普通值字符串，也可以是类型化值字符串。第一个可以可选地与值字符串语言相关联，而后一个具有语法编码方案 URI。非文字值也可以用其他描述来描述。

一个描述集元素有一个扩展名称，带有一对 XML 名称空间名称[purl.org/dc/xmlns/2008/09/01/dc-ds-xml/](http://purl.org/dc/xmlns/2008/09/01/dc-ds-xml/)和本地名称descriptionSet ( 清单 7-48 )。

***清单 7-48。*一个描述集合元素

<?xml version="1.0" encoding="UTF-8" ?> <dcds:descriptionSet ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) xmlns:dcds="http://purl.org/dc/xmlns/2008/09/01/dc-ds-xml/"> <dcds:description> <dcds:statement ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) dcds:propertyURI="http://purl.org/dc/terms/title"> <dcds:literalValueString> Smith and Sons Inc Home Page </dcds:literalValueString> </dcds:statement> </dcds:description> </dcds:descriptionSet>

描述元素是 XML 元素，是名为dcds:description的描述集元素的子元素。

statement 元素是由 description 元素的子 XML 元素表示的单个 Dublin Core 语句。语句元素的名称是dcds:statement。

值字符串元素是语句元素的子元素。文字值代理，包含一个表示文字的值字符串的文字值的值代理，可以由值字符串元素dcds:literalValueString编码，每个语句元素只能提供一次。

非文字值代理可选地包含一个值 URI，表示为语句元素的 XML 属性dcds:valueURI的值(清单 7-49 )。

***清单 7-49。*非文字值代理中的可选值 URI

<dcds:statement ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) dcds:propertyURI="http://purl.org/dc/terms/publisher" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) dcds:valueURI="http://example.com"> <dcds:valueString>Smith and Sons Inc</dcds:valueString> </dcds:statement>

对于非文字值代理，词汇编码方案 URI 可以选择由dcds:vesURI属性提供。

普通值字符串的值字符串语言可以由值字符串元素的xml:lang属性提供。应该应用 IETF RFC 4646 或更高版本 [6 的语言标识符。清单 7-50 显示了一个例子。

***清单 7-50。*值字符串语言声明

<?xml version="1.0" encoding="UTF-8" ?> <dcds:descriptionSet ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) xmlns:dcds="http://purl.org/dc/xmlns/2008/09/01/dc-ds-xml/"> <dcds:description ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) dcds:resourceURI="http://example.com"> <dcds:statement ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) dcds:propertyURI="http://purl.org/dc/terms/title"> <dcds:literalValueString xml:lang="en-US"> Example document </dcds:literalValueString> </dcds:statement> </dcds:description> </dcds:descriptionSet>

对于类型化的值字符串，应该使用语法编码方案 URI 属性dcds:sesURI。

用 RDF 表示的都柏林核心

简单的 Dublin Core 也可以用 RDF 表示，包括 RDF/XML 序列化⁶7。清单 7-51 显示了一个包括 XML 声明、XML DTD 引用、RDF 声明和资源描述的例子。

***清单 7-51。*RDF/XML 中的 Dublin Core

<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" images
xmlns:dc="http://purl.org/dc/elements/1.1/">
rdf:Description
<dc:title>Internet for everyone</dc:title>
<dc:creator>Leslie Sikos</dc:creator>
<dc:format>Book</dc:format>
<dc:identifier>ISBN 963 9425 08 7</dc:identifier>
</rdf:Description>
</rdf:RDF>`

XML 字符编码规则适用。可选地，这些文档中任何元素的语言都可以由xml:lang属性提供。

在 RDF 中表达合格的 Dublin Core 由另一个 DCMI 规范 [8 描述。相反，像dc:creator和dc:date这样的属性在本文中被认为是实体而不是名称。清单 7-52 显示了一个例子。

***清单 7-52。*RDF 中合格的 Dublin Core

<http://www.example.com> dc:creator <http://www.example.org/pj>

定义 DC RDF 实现的原始规范已经被 2008 规范 [9 ]和注释[0]所取代。例如，规范中已经删除了 DCMI 属性和类的 RDF 模式。

⁶ RDF 将在接下来的章节中描述。

资源描述框架

虽然最初被设计为元数据数据模型，资源描述框架 ( RDF )已经成为一种通用的 web 资源描述和建模语言。它可以用于存储在 web 资源中的信息的概念描述或建模。RDF 可以用来创建任何种类资源的机器可读描述，因为 RDF 文件可以用任意数量的外部词汇表进行扩展。与许多 W3C 标准不同，RDF 没有单一的规范，而是由一组文档定义的 [1 ]。

RDF 数据模型可用于描述可由 URI 识别的任何种类的资源。如前所述，RDF 文档是一系列被称为 RDF 三元组(资源-属性-值或主体-谓词-对象)的语句。表示主语和宾语之间关系的谓语(性质)只能是二元的。RDF 中的任何表达式都是三元组的集合。一组三元组被称为 RDF 图，这是一个有向的、带标签的图，表示网络上的信息。RDF 图的节点是资源和值 [2 ]。

如前所示，一个人可以用 FOAF 词汇来描述。这种描述可以用 XML 或 RDF 编写。清单 7-53 展示了如何用 RDF 编写 FOAF。

***清单 7-53。*用 RDF 描述一个人

`<rdf:RDF images
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" images
xmlns:foaf="http://xmlns.com/foaf/0.1/" images

<foaf:Person rdf:about="http://www.example.com/johnsmith/contact.rdf#johnsmith">
<foaf:mbox rdf:resource="mailto:john.smith@example.com" />
<foaf:homepage rdf:resource="http://www.example.com/johnsmith/" />
foaf:family_nameSmith</foaf:family_name>
foaf:givennameJohn</foaf:givenname>
</foaf:Person>
</rdf:RDF>`

图 7-3 将该文件表示为 RDF 图。

images

***图 7-3。*一个简单的 RDF 图

正如您将看到的，RDF 可以用多种格式表示。例如，清单 7-54 是清单 7-53 的另一种表示法。这个符号，N3，也将在后面详细描述。

***清单 7-54。*相当于前一个例子的 N3

`@prefix : http://www.example.org/~joe/contact.rdf# .
@prefix foaf: http://xmlns.com/foaf/0.1/ .
@prefix rdf: http://www.w3.org/1999/02/22-rdf-syntax-ns# .

:joesmith a foaf:Person ;
foaf:givenname "Joe" ;
foaf:family_name "Smith" ;
foaf:homepage http://www.example.org/~joe/ ;
foaf:mbox mailto:joe.smith@example.org .`

RDF 名称空间是[www.w3.org/1999/02/22-rdf-syntax-ns#](http://www.w3.org/1999/02/22-rdf-syntax-ns)，它通常与名称空间前缀rdf:相关联。

RDF 图的 URI 引用中的 Unicode 字符串不能包含控制字符(#x00–#x1F、#x7F–#x9F)。这些 URIs 应该是带有可选片段标识符的绝对 URIs。

RDF 文字用于标识数字和日期之类的值。RDF 文字是包含一个或两个命名组件的 Unicode 字符串。它们应该写成在 归一化形式 C 中归一化的 UTF-8(典范分解后是典范合成 [3 ])。RDF 文字可以是普通的，也可以是类型化的。普通文字是由可选的语言标签组合而成的字符串(规范化为小写)。它们对应于自然语言中的纯文本。类型化文字是与数据类型 URI 结合的字符串，用于将词汇到值的映射应用于文字字符串。

资源描述框架的正式语法是在 1999 年引入的。RDF 有以下词汇:

rdf:Alt, rdf:Bag, rdf:Seq

替代容器、无序容器和有序容器(rdfs:Container是三者的超类)
rdf:List

RDF 列表的类别
rdf:nil

一个空列表(rdf:List的一个实例)
rdf:Property

属性的类别
rdf:Statement, rdf:subject, rdf:predicate, rdf:object

具体化
rdf:type

一个谓词，标识资源是其实例的类
rdf:XMLLiteral

类型化文字的类

这个词汇表也被用作可扩展知识表示语言 RDF 模式的基础(参见“RDF 模式”一节)。

有一种叫做 SPARQL (发音为“Sparkle”)的查询语言，可以用来检索和操作以 RDF 存储的信息，或者以 RDF [5 ]格式存储的信息。输出可以是结果集或 RDF 图。还可以通过一种称为 SPARQL 1.1 统一 HTTP 协议 [6 ]的协议来更新 RDF 图。

从标准化的角度来看，资源描述框架技术非常重要，原因有很多。首先，RDF 的基本数据模型是一个标准图。第二，命名系统应用标准的 URL。RDF 使用的数据检索和组合机制也是标准技术。

RDF 可以以多种语法/序列化格式提供，例如，RDF XML 序列化(RDF/XML)、RDFa、Turtle、Notation3、JSON-LD、N Triples [7 ]、TRiG [8 ]和 TRiX [9 。下一节将介绍最常见的方法。

XML 序列化语法中的 RDF

RDF 应用推荐和最常用的语法是 XML 序列化格式 RDF/XML [0]。尽管 RDF 还有其他更容易阅读和书写的符号(见下一节)，RDF/XML 提供了广泛接受的 XML 文档。然而，RDF/XML 的基本问题是用树结构表示图形的矛盾。

RDF/XML 的互联网媒体类型是application/rdf+xml。推荐的文件扩展名是.rdf。

RDF 的 XML 序列化提供了格式良好的 XML 文档(第一章)。

例如，一个人的维基百科页面可以用 RDF/XML 以机器可读的形式描述，如清单 7-55 所示。

***清单 7-55。*用 RDF/XML 描述的维基百科页面

<rdf:RDF ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) xmlns:dc="http://purl.org/dc/elements/1.1/"> <rdf:Description rdf:about="http://en.wikipedia.org/wiki/Rowan_Atkinson"> <dc:title>Rowan Atkinson</dc:title> <dc:publisher>Wikipedia</dc:publisher> </rdf:Description> </rdf:RDF>

N3 语法中的 RDF

符号 3，通常缩写为 N3 ，是 RDF 的非 XML 序列化的简写。它是 RDF 的超集，比 RDF 的 XML 序列化更紧凑。N3 的语法由 W3C 以多种格式 [1 ]定义，例如以扩展的巴科斯诺尔形式(EBNF)⁷[2】。

N3 的 MIME 类型和字符编码应该声明为text/n3; charset=utf-8。典型的文件扩展名是.n3。语法中没有指定标记化和空白处理。

用于解析相对 URIs 的基本 URIs 可以用形式为@base <[example.com/overview/](http://example.com/overview/)>的@base指令来设置。

前缀可以通过@prefix指令与名称空间 URI 相关联。

字符串转义的几个规则来源于 Python，分别是:stringliteral、stringprefix、shortstring、shortstringitem、longstring、longstringitem、shortstringchar、longstringchar。此外，还可以应用在另一个 RDF 序列化(N-Triples)中使用的\U扩展。合法的转义序列有\newline、\\(反斜杠、\)、\'(单引号、')、\"(双引号、")、\n (ASCII 换行，LF)、\r (ASCII 回车，CR)、\t (ASCII 水平制表符，Tab)、\uhhhh(BMP 中的 Unicode 字符)和\U00hhhhhh(平面 1-16 符号中的 Unicode 字符)。无法使用转义符\a、\b、\f和\v，因为 RDF 中不允许使用相应的字符。

速记符号可用于以下常见谓词:

a(代表<[www.w3.org/1999/02/22-rdf-syntax-ns#type>](http://www.w3.org/1999/02/22-rdf-syntax-ns#type>))
=(代表<[www.w3.org/2002/07/owl#sameAs](http://www.w3.org/2002/07/owl#sameAs)>)
=>(代表<[www.w3.org/2000/10/swap/log#implies](http://www.w3.org/2000/10/swap/log#implies)>)
<=(代表<[www.w3.org/2000/10/swap/log#implies](http://www.w3.org/2000/10/swap/log#implies)>)

可以在新的词汇表中定义新的类和新的属性 [3 ]。一个类可以被定义为清单 7-56 ，因为rdf:type属性在 N3 被缩写为a。

EBNF 是一个元语法符号家族，可以用来表达上下文无关的语法。

***清单 7-56。*N3 的一个 RDF 班

:Sport a rdfs:Class.

该类的一个对象可以被定义，如清单 7-57 所示。

***清单 7-57。*声明一个 N3 类的对象

:Kayak a :Sport.

对象可以在多个类中。类之间的关系可以写成清单 7-58 所示。

***清单 7-58。*N3 的阶级关系

:Watersport a rdfs:Class; rdfs:subClassOf :Sport .

可以定义一个属性，如清单 7-59 所示。

***清单 7-59。*N3 财产申报

:paddle a rdf:Property.

类之间的关系不一定是层级关系。你可以在清单 7-60 中看到一个例子。

***清单 7-60。*N3 的非等级关系

:paddle rdfs:domain :Sport; rdfs:range :Watersport.

上一节描述的这个人的维基百科页面可以用 N3 语编写，如清单 7-61 所示。

***清单 7-61。*N3 的一个维基百科页面描述

`@prefix dc: http://purl.org/dc/elements/1.1/.

http://en.wikipedia.org/wiki/Rowan_Atkinson
dc:title "Rowan Atkinson";
dc:publisher "Wikipedia".`

Notation3 有几个子集，包括 Turtle、N-Triples、n3 RDF 和 N3 规则。其中最流行的将在下一节讨论。

Turtle 语法中的 RDF

N3 的一个子集是简洁的 RDF 三重语言，通常被称为海龟。Turtle 提供了一种语法，以紧凑的文本形式描述 RDF 图，这种形式很容易开发。它是符号 3 (N3)的子集和 N-三元组的超集。Turtle 在语义 Web 开发人员中很流行，被认为是 RDF/XML 的易于阅读的替代品。Turtle 正在被万维网联盟标准化。海龟文件的典型文件扩展名是.ttl。海龟文件的字符编码应该是 UTF-8。乌龟的 MIME 类型是text/turtle。Turtle 得到了很多可用于查询和分析 RDF 数据的软件框架的支持，比如 Jena [5 ]、Redland [6 ]、Sesame [7 ]。

Turtle 文件由一系列指令、代表三元组的语句和空行组成。在 Turtle 中，三元组可以写成一系列主-谓-宾语术语，由空格分隔，以句号(.)结束。URIs 应该写在尖括号中(<>)。文字由双引号("")分隔。清单 7-62 显示了一个例子。

***清单 7-62。*海龟语法的一个基本例子

<http://example.com/shop> <http://example.com/contact> "Text content" .

URI 长度可以通过@PREFIX ( 列表 7-63 )减少。

***清单 7-63。*一个 URI 前缀声明

@PREFIX ex: <http://example.com/> .

在这种情况下，第一个例子可以写成清单 7-64 。

***清单 7-64。*使用前缀

ex:shop ex:contact "Text content" .

其中ex:shop声明了[example.com/](http://example.com/)与shop的连接，揭示了最初的 URI [example.com/shop](http://example.com/shop)。

RDFa

RDF 的力量，前面已经演示过，可以通过用相当复杂的语法编写的外部文件来利用。然而，有一个很好的例外:RDFa。RDFa(属性中的 RDF)为任何标记语言(从这个角度来看，宿主语言，如前面在第三章中讨论的)增加了属性级扩展，以描述结构化数据。换句话说，RDFa 符号可以在属性中声明，而不是在元素中声明(这是其他 RDF 序列化格式使用的方法)。虽然很多属性是由 RDFa 定义的，但是有些标记属性(比如href和rel)是重用的。只要有可能，文本内容也会被重用。RDFa 可以充当“人类和数据网”之间的桥梁，因为 RDFa 使得在(X)HTML 标记 [8 ]中编写 RDF 三元组成为可能。可以通过 RDFa 应用编程接口(RDFa API) [9 ]从 web 文档中提取和利用结构化信息。RDF 数据模型映射的机制允许 RDF 三元组嵌入到 web 文档中，以及由兼容的软件提取 RDF 模型三元组。

RDFa 提供了在 web 文档的某些属性中嵌入丰富元数据的选项[0]。用于此目的的属性集如下:

about, src

描述元数据的资源的统一资源标识符(URI)或压缩 URI(居里) [1
rel, rev

与其他资源的关系
href, resource

合作伙伴资源
property

元素内容的属性
content

使用property属性时元素内容覆盖(可选)
datatype

指定用于property属性的文本数据类型(可选)
typeof

主题的 RDF 类型(可选)

RDFa 使得任意混合多个独立开发的词汇表成为可能。它可以在不分析所应用的特定词汇表的情况下被解析。这是在标记中提供不同类型的机器可读结构化数据的最先进的技术之一。

由于 RDFa 中的“a”代表的属性的样式通常在级联样式表中提供，所以直接使用 CSS 选择器来样式化代码 [2 ]。例如，如果创建者的名字和前一个例子的书名出现在整个站点中，那么所有的实例都可以使用通用选择器(清单 7-65 )进行样式化。

***清单 7-65。*造型 RDFa

`* [property="dc:creator"] {
color: #2a56d3;
font-style:italic;

}

[property="dc:title"] {
font-size: 2em;
font-family: Georgia;
}`

关于 RDFa 的最新消息可以在 W3C RDFa 工作组的网站上找到，网址是www.w3.org/2010/02/rdfa/[3。

例如，让我们用 FOAF 词汇用 RDFa 符号描述一个人！首先我们需要声明 FOAF 名称空间(要么在文档头中，要么在body元素上)。RDFa 的about属性可以用来表示主语，而 RDFa 属性property设置谓语(清单 7-66 )。

***清单 7-66。*使用 FOAF 的 RDFa 注释

`<body xmlns:foaf="http://xlmns.com/foaf/0.1/">
<p about="#smith" property="foaf:name">John Smith

p元素的内容是人类和机器可读的文本，将呈现在网页上。

现在用另一个人来扩展前面的例子，表达两个人之间的关系(清单 7-67 )！实体的类可以由typeof属性声明。在这种情况下，我们使用 FOAF 词汇表中的Person类来“让浏览器知道”John Smith 是一个人。第二个人用完全相同的方式声明。最后，我们使用 FOAF 词汇表中的术语knows，并将其作为属性rel的值传递，以表示约翰·史密斯认识彼得·约翰逊(由属性resource声明)。

***清单 7-67。*两个人以及他们之间的关系在 RDFa 中用 FOAF 表达

`<body xmlns:foaf="http://xmlns.com/foaf/0.1">

<span about="#john" typeof="foaf:Person" property="foaf:name">John Smith is images
interested in smartphones. <span about="#jane" typeof="foaf:Person"
** property="foaf:name">Peter Johnson** is an Android developer. <span images
** about="#john" rel="foaf:knows" resource="#peter">John and Peter knows each other. images **

将这个机器可读的语句与使用 PHP 显示的 MySQL 数据库记录进行比较，您就可以一窥语义 Web 的威力了！

RDFa 可以类似地使用其他词汇。例如，都柏林核心元数据可以使用 RDFa 嵌入到标记中，如清单 7-68 所示。

***清单 7-68。*使用 DC 的 RDFa 注释

`<p xmlns:dc="http://purl.org/dc/elements/1.1/" images
about="#standardweb" property="dc:title">
Web standardista Dr. Sikos describes images
Web standardization, accessibility, and Web semantics in his latest book images
Web standards. The first press images
release has been published on <span about="#webstandards" property="dc:date" images
content="2011-11-16">16 November 2011.

微格式对比微数据对比 RDFa

您应该已经注意到，某些微格式和 HTML5 微数据定义了类似的概念来描述人、事件或许可证。另一方面，RDFa 并不局限于这些概念，它可以用来注释任何种类的资源。

正如前面所讨论的，微格式重用 HTML 属性(例如，class，title)，并且具有难以组合的独立词汇表，因为微格式不使用名称空间机制。最后但同样重要的是，微格式没有定义 RDF 表示。 ⁸

如前所述，HTML5 微数据为 HTML5 标记提供新闻属性。HTML5 微数据易于编写，在使用单一外部词汇表的文档中工作良好。在 HTML5 微数据中，组合不同的词汇表相当复杂。默认情况下，该技术支持一些词汇表映射，比如 Dublin Core elements。一个缺失的特性是数据类型和名称空间的概念。然而，幸运的是，HTML5 微数据定义了到 RDF 的通用映射，因此它可以用来表示三元组。

使用 XSLT 和 GRDDL 等技术将微格式转换成 RDF 是可能的，但是这种转换依赖于所使用的词汇表。

与微格式和微数据相反，RDFa 是 RDF 的完全序列化，因此提供了所有这些的最先进的注释。默认情况下，RDFa 定义新的标记属性并使用 URIs 和名称空间。因此，组合词汇表非常容易(类似于 RDF)。RDFa 在文字和 URI 资源方面是完全灵活的。

RDF 模式

按照 W3C 元数据活动的说法， RDF Schema ( RDFS )是“一种受来自知识表示的思想影响的陈述性表示语言” 4 。RDF Schema 用结构(类、属性的属性等等)扩展了 RDF。它可以用来形式化人类可读和机器可处理的词汇表之间的元数据交换。除了前面讨论的基本 RDF 词汇，RDFS 还有几个额外的构造:

班级
- rdf:Property
- rdf:XMLLiteral
- rdfs:Class
- rdfs:Datatype
- rdfs:Literal
- rdfs:Resource
Properties
- rdf:type
- rdfs:comment
- rdfs:domain
- rdfs:isDefinedBy
- rdfs:label
- rdfs:range
- rdfs:seeAlso
- rdfs:subClassOf
- rdfs:subPropertyOf

这些类和属性提供了比 RDF 更高级的知识表示，可以用于 web 本体的基本描述。这就是更具表达性的语言 Web 本体语言(OWL)重用许多 RDFS 组件的原因(见下一节)。

例如，资源“金刚鹦鹉”可以被声明为“鸟”类的一个子类，如清单 7-69 所示。

***清单 7-69。*一个简单的 RDFS 例子

<?xml version="1.0"?> <rdf:RDF ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) xml:base="http://www.example.com/birds#"> <rdf:Description rdf:ID="bird"> <rdf:type rdf:resource="http://www.w3.org/2000/01/rdf-schema#Class"/> </rdf:Description> <rdf:Description rdf:ID="macaw"> <rdf:type rdf:resource="http://www.w3.org/2000/01/rdf-schema#Class"/> <rdfs:subClassOf rdf:resource="#bird"/> </rdf:Description> </rdf:RDF>

这个符号也可以用rdfs:Class代替rdf:Description并省略rdf:type ( 清单 7-70 )来缩短。

***清单 7-70。*上一个例子的优化版本

<?xml version="1.0"?> <rdf:RDF ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) xml:base="http://www.example.com/birds#"> <rdfs:Class rdf:ID="bird" /> <rdfs:Class rdf:ID="macaw"> <rdfs:subClassOf rdf:resource="#bird"/> </rdfs:Class> </rdf:RDF>

猫头鹰

Web 本体语言是一种知识表示语言，主要目的是创建 web 本体。Web 本体可以用于各种目的，例如搜索、查询形成、索引、代理或服务元数据管理，或者提高应用和数据库的互操作性。Web 本体对于知识密集型应用尤其有用，在这些应用中，文本提取、决策支持或资源规划是常见的任务，在用于知识获取的知识库中也是如此。

Web 本体语言的缩写 OWL 不是故意直白的 [6 ]。OWL 本体是 RDF 图，换句话说，是 RDF 三元组的集合。类似于 RDF 图，OWL 本体图可以用各种语法符号表示。猫头鹰有三个变种:猫头鹰 Lite 、猫头鹰 DL 、猫头鹰 Full [7 。OWL 是比 RDF 更高级的语言；实际上，它是 RDF 的一个词汇扩展。因此，RDF 图是完整的本体。

默认的 OWL 名称空间是[www.w3.org/2002/07/owl#](http://www.w3.org/2002/07/owl)，它定义了 OWL 词汇表。没有专门为 OWL 定义的 MIME 类型。建议对 OWL 文档使用application/rdf+xml或 application/xml MIME 类型。推荐的文件扩展名是.rdf或.owl。

OWL 的第一个版本开始于 2002 年，第二个版本 OWL2 开始于 2008 年。OWL 在 2004 年成为 W3C 推荐标准 8，OWL2 在 2009 年成为 W3C 推荐标准[149，150]。

语法

在高层，可以使用 OWL 抽象语法 [1 ]和 OWL2 函数语法 [2 ]。OWL 还支持几种交换语法，包括 RDF 语法 [3 ] (RDF/XML [4 ]，RDF/Turtle [5 ])，OWL2 XML 语法 [6 ]，以及 Manchester 语法 [7 ]。RDF/XML 是标准语法 [8 ]。

例如，智能手机本体的类声明可以用不同的语法编写，如清单 7-71 到 7-75 所示。

清单 7-71。 OWL2 函数语法示例

Ontology(<http://example.com/smartphone.owl> Declaration( Class( :Smartphone ) ) )

清单 7-72。 OWL2 XML 语法示例

<Ontology ontologyIRI="http://example.com/smartphone.owl"> <Prefix name="owl" IRI="http://www.w3.org/2002/07/owl#"/> <Declaration> <Class IRI="Smartphone"/> </Declaration> </Ontology>

清单 7-73。 RDF/XML 语法示例

<rdf:RDF> <owl:Ontology rdf:about=""/> <owl:Class rdf:about="#Smartphone"/> </rdf:RDF>

清单 7-74。 RDF/Turtle 示例

<http://example.com/smartphone.owl> rdf:type owl:Ontology . :Smartphone rdf:type owl:Class .

***清单 7-75。*曼彻斯特语法示例

Ontology: <http://example.com/smartphone.owl> Class: Smartphone

属性

在 OWL 中，存在以下类型的属性:

对象属性将个人与其他个人联系起来
将个体链接到数据值的数据类型属性(对象属性的子类)
标注属性 ( owl:AnnotationProperty)
本体属性 ( owl:OntologyProperty)

属性特征由属性公理定义。基本形式只表达存在。例如，在智能手机本体中，属性hasKeyboard可以被声明来表达手机的一个主要特征(见清单 7-76 )。大多数入门级手机都有电话键盘，而许多智能手机只有触摸屏，但有些有完整的 QWERTY 键盘。

***清单 7-76。*猫头鹰里的一份财产申报

<owl:ObjectProperty rdf:ID="hasKeyboard"/>

OWL 属性公理也可以定义额外的特征。OWL 支持 RDF 模式结构，如rdfs:subPropertyOf、rdfs:domain和rdfs:range。与其他属性的关系可以用owl:equivalentProperty和owl:inverseOf ( 列表 7-77 )来表示。

***清单 7-77。*两个等效的智能手机属性(加速度计和重力传感器)

<owl:ObjectProperty rdf:ID="hasAccelerometer"> <owl:equivalentProperty> <owl:ObjectProperty rdf:ID="hasGsensor"/> </owl:equivalentProperty> </owl:ObjectProperty>

全局基数约束由owl:FunctionalProperty和owl:InverseFunctionalProperty定义。逻辑属性特征由owl:SymmetricProperty和owl:TransitiveProperty [9 ] ( 清单 7-78 )定义。

***清单 7-78。*OWL 中的一个对称性质

<owl:SymmetricProperty rdf:ID="hasLiveConnection"> <rdfs:domain rdf:resource="#Smartphone"/> <rdfs:range rdf:resource="#Smartphone"/> </owl:SymmetricProperty>

OWL 为表达关系提供了精确的声明，即使它们是显而易见的。例如，两个智能手机特性的属性层次可以用函数语法来表达，如清单 7-79 所示。

***清单 7-79。*OWL 中的属性层次

SubObjectPropertyOf( :hasGeotagging :hasCamera )

类别

与 RDF 类似，OWL 提供了对资源进行分组的类。OWL 中有六种不同的类描述:

Class identifier (URI reference). A named instance of owl:Class, a subclass of rdfs:Class.⁹ Listing 7-80 shows an example.

***清单 7-80。*OWL 中的一个类标识符

<owl:Class rdf:ID="Handheld"/>
Set of individuals (instances of a class) defined by the owl:oneOf property. For example, the class of smartphones can be declared in the RDF/XML syntax with the RDF construct rdf:parseType="Collection", as shown in Listing 7-81.

***清单 7-81。*OWL 中的类实例

<owl:Class> <owl:oneOf rdf:parseType="Collection"> <owl:Thing rdf:about="#Touch"/> <owl:Thing rdf:about="#Type"/> <owl:Thing rdf:about="#TouchType"/> <owl:Thing rdf:about="#Business"/> </owl:oneOf> </owl:Class>
Property restriction: a value constraint or a cardinality constraint (for example, Listing 7-82).

***清单 7-82。*猫头鹰里的财产限制

<owl:Restriction> <owl:onProperty rdf:resource="hasGPS" /> <owl:allValuesFrom rdf:resource="#Smartphone" /> </owl:Restriction>
Intersection of two or more class descriptions. For example, the intersection of two Brochures enumerations can be described by the statement owl:intersectionOf, as presented in Listing 7-83.

***清单 7-83。*十字路口的猫头鹰

<owl:Class> <owl:intersectionOf rdf:parseType="Brochures"> <owl:Class> <owl:oneOf rdf:parseType="Brochures"> <owl:Thing rdf:about="#Manual" /> <owl:Thing rdf:about="#Guide" /> <owl:Thing rdf:about="#Prospectus" /> </owl:oneOf> </owl:Class> <owl:Class> <owl:oneOf rdf:parseType="Brochures"> <owl:Thing rdf:about="#Specs" /> <owl:Thing rdf:about="#Overview" /> <owl:Thing rdf:about="#Guide" /> </owl:oneOf> </owl:Class> </owl:intersectionOf> </owl:Class>

其中交集是具有唯一共同个体Guide的类。
两个或多个类描述的联合。例如，前一个例子的并集包含个体Manual、Guide、Prospectus、Specs和Overview(如果他们都不同的话)。
类描述的补充。类扩展恰好包含那些不属于构成语句对象的类描述的类扩展的个体。补码可以用owl:complementOf属性来描述。

OWL Lite 和 OWL DL 中的 ⁹ 。在 OWL Full 中，它们是等价的。

类描述可以组合成类公理。类的层次结构可以用子类公理 ( 清单 7-84 )来表示。

***清单 7-84。*猫头鹰中的阶级等级

SubClassOf( :Slide :Smartphone )

两个类的等价性表示它们所包含的个体是相同的。清单 7-85 显示了一个例子。

***清单 7-85。*OWL 中的等价类

EquivalentClasses( :Virtualkeyboard :Softquerty )

虽然一般来说，个人可以是几个阶层的成员，但在许多情况下，成员资格是排他性的。例如，智能手机属于直板或滑板外形。这种级不衔接可以用清单 7-86 表示。

***清单 7-86。*猫头鹰中的阶级脱节

DisjointClasses( :Bar :Slide )

组合元数据

模式经常在语义网上被组合，以便应用所有那些被设计来表达关于被描述的网页主题的元数据的特定词汇。最长的名称空间列表出现在提供大量附加元数据的 web 文档中，最常见的是在(X)HTML+RDFa 中。清单 7-87 显示了一个例子。

***清单 7-87。*XHTML+RDFa 文档中的一长串名称空间

这些词汇前缀允许使用当前文档中列出的外部词汇定义的术语。强烈建议只列出文档中实际使用的名称空间，这有助于代码优化和维护。尽管不必要的名称空间不会在浏览器中导致任何错误信息，但它们会使标记更加复杂。

由于词汇表的不同特性，组合应用并不总是简单明了的。例如，许多术语包含在各种词汇表中，选择其中一个往往只受个人偏好的驱使。事实上，您应该考虑候选属性的规范，以便为给定的场景选择最合适的属性。

在 RDF 中组合词汇

混合任何词汇表中的属性的最简单方法是创建一个 RDF 文件。例如，一个完全机器可读的个人资料使用 FOAF 术语来描述一个人的头衔、姓名、性别、即时消息帐户、主页、电话号码和关系。离此人办公室最近的机场可以用联系词汇表中的一个术语来表示，文件创建的日期可以由 Dublin Core 来声明，等等(清单 7-88 )。

***清单 7-88。*用 RDF 写的个人简介使用的几个词汇

`
<rdf:RDF images
xmlns:contact="http://www.w3.org/2000/10/swap/pim/contact#" images
xmlns:dc="http://purl.org/dc/terms/" images
xmlns:foaf="http://xmlns.com/foaf/0.1/" images
xmlns:google="http://rdf.data-vocabulary.org/#" images
xmlns:owl="http://www.w3.org/2002/07/owl#" images
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" images
xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" images
xmlns:wot="http://xmlns.com/wot/0.1/" images
xmlns:xhv="http://www.w3.org/1999/xhtml/vocab#"

<rdf:Description rdf:about="http://www.example.com/metadata/foaf.rdf">
foaf:titleDr</foaf:title>
foaf:givennameJohn</foaf:givenname>
foaf:surnameSmith</foaf:surname>
foaf:gendermale</foaf:gender>
<foaf:depiction rdf:resource="http://www.example.cimg/jsmith.jpg"/>
<foaf:based_near rdf:resource="http://dbpedia.org/resource/New_York "/>
<contact:nearestAirport rdf:resource=" http://www.panynj.gov/airports/jfk.html"/>
<foaf:phone rdf:resource="tel:+1123456789"/>
<foaf:homepage rdf:resource="http://www.example.com"/>
<google:url rdf:resource="http://www.example.com"/>
<foaf:holdsAccount rdf:resource="http://www.linkedin.com/in/jsmith"/>
<foaf:holdsAccount rdf:resource="http://www.facebook.com/jsmith"/>
<foaf:holdsAccount rdf:resource="http://www.twitter.com/jsmith"/>
<foaf:interest rdf:resource="http://dbpedia.org/resource/Photography"/>
<foaf:interest rdf:resource="http://dbpedia.org/resource/Semantic_Web"/>
<foaf:interest rdf:resource="http://dbpedia.org/resource/Classical_music"/>
<rdfs:seeAlso rdf:resource="http://www.example.com/metadata/foaf.rdf"/>
<rdfs:seeAlso rdf:resource="http://www.example.com/metadata/doac.rdf"/>
<rdf:type rdf:resource="http://xmlns.com/foaf/0.1/Person"/>
<rdf:type rdf:resource="http://rdf.data-vocabulary.org/#Person"/>
<rdf:type rdf:resource="http://purl.org/dc/terms/Agent"/>
<owl:sameAs rdf:resource="http://www.example.com/about/"/>
<foaf:publications rdf:resource="http://www.example.com/metadata/doac.rdf"/>
<foaf:knows rdf:resource="http://www.1stfriendsweb site.net/foaf.rdf"/>
<foaf:knows rdf:resource="http://www.2ndfriendssite.com/foaf/"/>
<dc:date rdf:datatype="http://www.w3.org/2001/XMLSchema#date">2010-08-22</dc:date>
<dc:creator>John Smith</dc:creator>
<rdf:type rdf:resource="http://xmlns.com/foaf/0.1/PersonalProfileDocument"/>
<xhv:stylesheet rdf:resource="http://www.example.com/styles.css"/>
<wot:assurance rdf:resource="http://www.example.com/signature.asc"/>
<foaf:primaryTopic rdf:resource="http://www.example.com/about/"/>
<dc:title>Dr. John Smith associate professor</dc:title>
</rdf:Description>
</rdf:RDF>`

微数据和微格式

如前所述，重叠特征可以用微数据和微格式来描述，也可以用 RDFa 来描述任意特征。微格式也可以与(X)HTML5 微数据同时使用。例如，hCard 可以与微数据同时应用，如清单 7-89 所示。

***清单 7-89。*将 hCard 与微数据相结合

<a href="http://example.com" itemprop="url">John Smith: Photographer

RDF 中的都柏林核心和 vCard

资源描述框架的灵活性使得同时使用来自外部名称空间的多种元数据变得很简单。因此，丰富的语义可以同时从各种词汇表添加到文档中(清单 7-90 )。

***清单 7-90。*RDF 中的 Dublin Core 和 vCard

RDF:RDF
<RDF:Description RDF:HREF="http://uri-of-Document-1">
<DC:Creator RDF:HREF="#Creator_001"/>
</RDF:Description>
<RDF:Description ID="Creator_001">
CARD:NameJohn SmithCARD:Name
CARD:Emailjsmith@example.netCARD:Email
CARD:AffiliationABC Ltd.CARD:Affiliation
</RDF:Description>
</RDF:RDF>`

都柏林核心、vCard 和数学网

在小册子风格的主页上对一个人的介绍可以用多种方式描述。其中之一就是都柏林核心和 vCard 的结合。通过在 RDF 中提供这些数据，可以增强对这些数据的索引和处理。清单 7-91 显示了一个例子。

***清单 7-91。*将 DC 和 vCard 与 Math-Net 结合

<?xml version="1.0"?> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) xmlns:dc="http://purl.org/dc/elements/1.1/" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) xmlns:vCard="http://www.w3.org/2001/vcard-rdf/3.0#"> <rdf:Description> <dc:creator> <rdf:Description rdf:about="http://jsmith.com/about.htm"> <rdfs:label>John Smith</rdfs:label> <vCard:FN>John Smith</vCard:FN> <vCard:N rdf:parseType="Resource"> <vCard:Family>Smith</vCard:Family> <vCard:Given>John</vCard:Given> <vCard:Prefix>Dr</vCard:Prefix> </vCard:N> <vCard:BDAY>1976-05-12</vCard:BDAY> </rdf:Description> </dc:creator> </rdf:Description> </rdf:RDF>

重要的是要记住，都柏林核心元素命名约定和 XML 元素嵌套并不适用于所有其他元数据模式。

Math-Net 方案中的一些词汇可以用来扩展其他词汇表达的人的描述，包括 Dublin Core 和 vCard [0]。

DC、IMS 和 ODRL

当使用 XML 或 RDF/XML 语法时，Dublin Core 可以与外部元数据词汇表结合使用，如 IEEE 学习对象元数据(IMS) [1 ]或开放数字版权语言(ODRL)元数据 [2 ]。例如，当使用绿石数字图书馆软件 [3 ]时，可以通过结合 Dublin Core、LOM 和描述学习材料的本地标签来适当地提供大学中数字学习材料的存储、保存和检索。

例如，一个在线教育系统可以用三种不同类型的元数据来精确描述(清单 7-92 )。

***清单 7-92。*DC、IMS 和 ODRL 的组合

<record ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) xsi:schemaLocation="http://www.example.org/virtualtutor/ ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) http://www.example.org/virtualtutor/schema.xsd" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) xmlns:dc="http://purl.org/dc/elements/1.1/" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) xmlns:dcterms="http://purl.org/dc/terms/" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) xmlns:oex="http://odrl.net/1.0/ODRL-EX" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) xmlns:odd="http://odrl.net/1.0/ODRL-DD" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) xmlns:ims="http://www.imsglobal.org/xsd/imsmd_v1p2"> <dc:title> Virtual Tutor </dc:title> <dc:identifier xsi:type="dcterms:URI"> http://www.example.org/virtualtutor/ </dc:identifier> <dc:description> Online educational system. </dc:description> <ims:typicallearningtime> <ims:datetime> 2011-08-02T08:00 </ims:datetime> </ims:typicallearningtime> <dc:rights> All rights reserved. </dc:rights> <oex:rights> <oex:asset> <oex:context> <odd:uid idscheme="URI"> http://www.example.org/virtualtutor/ </odd:uid> </oex:context> </oex:asset> </oex:rights> </record>

特殊应用

有一些元数据方法专门用于图像或给定的媒体内容类型，如 YouTube 视频。其中一些在标记中提供，而另一些则嵌入到二进制文件中，如图像。

图像元数据和 XMP

数码照片和自定义图像是网站不可或缺的组成部分。可以为它们提供各种类型的元数据，包括描述性、技术性和管理性元数据。

一种高级方法是通过标记提供图像元数据。alt 属性对于有效性至关重要。正确提供的属性值也可以提高可访问性(见第十章)。然而,longdesc属性可以用来提供到图像和其他非文本内容的详细描述的链接，它的软件支持很差，在(X)HTML5 中已经过时。

除了标记中提供的图像描述和前面讨论的用 RDFa 编写的描述或图像许可，高级和专业的图像处理软件，如 Adobe Photoshop，可用于添加或修改图像文件本身包含的元数据(图 7-4 )。在一定程度上，现代操作系统的文件浏览器也可以执行这项任务。

images 注关于博览会的几种类型的元数据被嵌入数码相机拍摄的 JPEG 文件中，这些文件可以在图像浏览器和处理应用中检索。

images

***图 7-4。*在 Photoshop 中处理图像文件元数据

在幕后，Adobe Photoshop 应用由 Adobe Systems 创建的可扩展元数据平台(XMP)标准。《XMP》的连载可以嵌入几种流行的文件格式，包括 GIF、JPEG、JPEG 2000、PNG、TIFF 图像，以及 PDF 文件 ¹⁰ [4 。GIF 支持 XMP 嵌入作为一个应用扩展，带有标识符 XMP 数据和认证码 XMP。在 JPEG 文件中，XMP 元数据嵌入在具有段头 http://ns.adobe.com/xap/1.0/\x00.的应用段 1 (0xFFE1)中。在 JPEG 2000 图像中，XMP 元数据可以位于由 UID 0x be 7 ACF CB 97 a 942 e 89 c 71999491 E3 fac 标识的 uuid 原子处。在 PNG 文件中，xmp 嵌入在带有关键字 XML:com.adobe.xmp 的 iTXt 文本块中。XMP 位于 TIFF 图像中的标签 700 处。可移植文档格式支持在 PDF 对象的元数据流中嵌入 XMP。

images

***图 7-5。*二进制 JPEG 图像文件中的文本 RDF 元数据

从这个角度来看，图像的主要问题是它们是二进制文件(图 7-5 )，需要不同于文本文件的索引或搜索方法。例如，在谷歌图片搜索中，还有其他方面，包括用于消除非常小(例如，1x1 像素)的图片、骗局等的技术。在存储在图像文件本身中的元数据之上使用的文本元数据总是提供高级别的处理和共享选项。

¹⁰ 外部。xmp sidecar 文件可以提供给不支持嵌入式 xmp 元数据的所有其他文件格式。

YouTube 视频的元数据

流行的视频共享网站 YouTube 提供了一个方便的选项，可以将存储在 YouTube 服务器上的视频嵌入到自定义网页中。RDFa 符号可以用来提高这类视频的网络搜索效率。

关于如何通过删除embed标签并将所需属性移动到object标签来从 YouTube 嵌入代码中创建符合标准的标记的细节将在稍后的第十三章中描述。

有两种视频元数据格式可以写入谷歌认可的标记中:脸书共享和雅虎！SearchMonkey RDFa [5 ]。它们可以交替使用，也可以同时使用。它们应该以不需要 JavaScript 或 Flash 就可以阅读的方式直接写入标记中。

脸书分享和 RDFa 丰富的片段

脸书共享需要图像和视频资源 URL(image_src和video_src)。medium属性支持值audio、image、video、news、blog和mult。可以使用video_width和video_height属性提供视频大小。视频的 MIME 类型可以用video_type(值为application/x-shockwave-flash)来识别。使用description属性可以编写最多 200 个字符的简短描述。视频的标题可以通过title属性添加，最长可以是 60 个字符。这些属性也被谷歌认可。

一个完整的脸书股票示例如清单 7-93 所示。

***清单 7-93。*一个脸书股票的例子

雅虎！SearchMonkey RDFa

雅虎！SearchMonkey 元数据可以在object标签上提供，如清单 7-94 所示。

***清单 7-94。*一个雅虎！SearchMonkey 示例

search monkey 媒体名称空间xmlns:media是必需的，唯一可接受的值是"http://search.yahoo.com/searchmonkey/media/"。在用户点击播放按钮之前预览视频的分辨率为 105x93 像素的 GIF、JPEG 或 PNG 图像应该由 URI 定义为media:thumbnail的href属性值。用户点击播放按钮时要播放的视频应该由media:video的资源定义。

所有其他标签都是可选的，包括都柏林核心名称空间(xmlns:dc)和都柏林核心元数据(dc:contributor、dc:creator、dc:date、dc:description、dc:identifier、dc:license、dc:subject)、媒体元数据(media:duration、media:height、media:player、media:region、media:title、media:type、media:views、media:width)以及review:rating、 6 。

SEO 中的元数据

虽然较高的页面排名或较好的搜索列表位置与标准化网站之间没有严格的相关性，但有几种技术有助于获得更好、更高质量的 web 文档。语义内容为 web 文档增加了意义，使信息索引、搜索和处理更加容易。元数据注释极大地扩展了 web 搜索的潜力。

RDFa 丰富的 web 文档的潜力正在增加，因为主要的搜索引擎已经开始在索引的同时处理这些注释。越来越多的元数据被搜索引擎索引和考虑。例如，谷歌在 2009 年开始在搜索结果页面上应用 hCard、hProduct 和 hReview 微格式以及 RDFa，称之为丰富片段 [7 。雅虎！自 2008 年以来，已经为 RDFa 和微格式编制了索引 [8 ]。富含 RDFa 或微格式的 Web 站点内容可以通过提供有用的结构化数据来增强 web 搜索。

Google 对 hCard 微格式派生的微数据、微格式和 RDFa contact 属性进行索引，包括name、nickname、photo、title、role、url、affiliation、friend、contact、acquaintance和address。分别代表名称、隶属关系和地址的微格式属性fn、org和adr也显示在 web 搜索页面上。 ¹¹ 此外，谷歌还能识别 XFN 微格式friend、contact和acquaintance 0】。在 XFN 和 FOAF 表达的关系和联系也由谷歌[ [1 ]处理。

如前所述，锚元素上的rel属性的nofollow属性值可用于确保网页不会从目的链接获得 PageRank。这样的链接被 Google 关注，但是不添加 PageRank。Bing 不跟随链接，页面也不被索引。雅虎！跟随链接并索引页面。清单 7-95 显示了一个例子。

***清单 7-95。*在链接上应用nofollow属性

<a href="http://www.lowprsite.com" rel="nofollow">External site</a>

雅虎！SearchMonkey 支持以下元数据 [2 ]:

微格式，包括 hCard、hCalendar、hReview、hAtom、hResume、adr、geo、tag 和 XFN
网页摘要和结构化标记
嵌入式 RDF

¹¹ 谷歌只显示人类可读的内容。不显示机器可读的元数据。例如，声明为 span 元素内容的日期<span class="value-title" title="2011-12-06T20:00-08:00" /> 06 December，8 PM 是人类可读的内容，它是独立于 ISO 日期格式(2011-12-06T20:00-08:00)中的title属性的机器可读属性值而指定的。

雅虎中的微格式搜索可以用清单 7-96 中的所示的形式的查询很容易地执行。

***清单 7-96。*雅虎使用的微格式搜索语法

searchmonkeyid:com.yahoo.page.uf.*metadata_name*

其中metadata_name是小写的元数据名称。RDFa 和 eRDF 搜索是相似的。唯一的区别是字符串uf应该改为rdf。例如，可以使用查询searchmonkeyid:com.yahoo.page.uf.hcard搜索 hCard 微格式，使用searchmonkeyid:com.yahoo.page.rdf.rdfa搜索属性中的 RDF，等等。

RDFa 之类的元数据注释可以有效地提供更好的搜索结果。网上提供的语义内容越多，从搜索引擎得到的搜索结果就越合理和相关。 ^{12 用(X)HTML 标记、XML、RDF、FOAF 和 DOAC 描述的小册子式名片和个人信息的索引非常简单。然而，嵌入在传统标记中的语义内容只有在网络爬虫使用的机制支持时才能被处理。幸运的是，可由搜索引擎处理的有意义的元数据类型的数量在不断增加。}

尽管元数据应用在搜索引擎优化方面有相当大的潜力，但也有一些限制。例如，图像元数据无法得到充分利用，因为大部分社交媒体和照片共享网站要么在上传期间删除所有嵌入的元数据，要么在没有元数据的情况下应用新的即时生成的文件(即使是另一种文件格式)。另一方面，由匿名维基百科编辑上传到互联网的图像，可以通过谷歌索引的嵌入元数据找到(如果有的话)。这一特点是否有利尚有争议。

与任何其他数据类似，明智地决定在网上发布什么是很重要的。出版一本书的 ISBN 号或者一个网站条目的 DBpedia 描述的链接完全没有问题；然而，几种类型的元数据发布起来是有风险的，因为它们可能被滥用。尤其是电子邮件地址、电话号码和即时消息屏幕名称应该非常小心地提供。

元数据嵌入与可访问性密切相关。可访问性指南可以确保为对象提供替代内容，并且文档结构组织良好(第十章)。

同样需要注意的是，SEO 和用户体验(UX)并不一定一致。例如，频繁重复的关键字会降低人的可读性 [3 ]。

总结

在这一章中，你学习了语义网的基本概念。到目前为止，您已经知道如何在源代码级别创建机器可读的元数据注释和外部元数据文件。你熟悉最常见的模式、词汇和本体；资源描述框架的主要系列；以及用 OWL 创建本体的基础。您知道如何组合来自不同词汇表的注释，以机器可读的格式描述许可证和图像，并使用这些元数据来提高网站文件的可搜索性。

下一章将向您展示如何从头开始创建符合标准的新闻提要频道，并最大化它们的互操作性。

然而，重要的是要记住，标记只是搜索引擎考虑的一件事。例如，全面和独特的网站内容对于在搜索结果中获得更好的位置变得越来越重要。

参考文献

Herman I (ed) (2009)你如何定义语义网的主要目标？W3C 语义网常见问题。万维网联盟。www.w3.org/2001/sw/SW-FAQ#swgoals2011 年 6 月 5 日访问
使用 SPARQL 和智能代理发现语义 Web 服务。网络语义学:万维网上的科学、服务和代理 2010，8(4):310–328
语义网上的芬兰博物馆。网络语义学:万维网上的科学、服务和代理 2005，3(2–3):224–241
使用语义网在 Web 2.0 社区中链接和重用数据。网络语义学:万维网上的科学、服务和代理 2008，6(1):21–28
Celma，Raimond Y. ZemPod:播客的语义网方法。网络语义学:万维网上的科学、服务和代理 2008，6(2):162–169
Berners-Lee T (2001)语义网的商业模型。万维网联盟。www.w3.org/DesignIssues/Business2010 年 11 月 16 日访问
Murphy T (2010) Lin Clark 阐述了 Drupal 的重要性。社交媒体。social media . net/2010/09/07/Lin-Clark-on-why-Drupal-matters。2010 年 9 月 9 日访问
Hausenblas M，Adida B，Herman I(2008)RDFa——连接文档网络和数据网络。Joanneum 研究，知识共享，万维网联盟。www.w3.org/2008/Talks/1026-ISCW-RDFa/2010 年 11 月 19 日访问
科比·N(编辑)(2011)问&答:康拉德·沃尔夫拉姆谈 Web 3.0 中的应用交流。丹尼斯出版有限公司www . it pro . co . uk/621535/q-a-Conrad-wolfram-on-communication-with-apps-in-web-3-0。2011 年 8 月 25 日访问
Ankolekar A，krtzsch M，Tran T，Vrandeč，d .两种文化:混合 Web 2.0 和语义 Web。网络语义学:万维网上的科学、服务和代理 2008，6(1):70–75
香农 V (2006)一个“更具革命性”的网络。论坛报国际先驱。纽约时报公司。www.nytimes.com/2006/05/23/technology/23iht-web.html?scp=1&sq = A+% 27 more+革命性%27+Web & st=nyt 。2011 年 8 月 25 日访问
Adida B，Birbeck M，McCarron S，Herman I (eds) (2010 年)摘要。在:RDFa 核心 1.1。通过属性嵌入 RDF 的语法和处理规则。W3C 工作草案。万维网联盟。www.w3.org/TR/rdfa-core/2010 年 11 月 22 日访问
Herman I (2009) W3C 语义网常见问题。万维网联盟。www.w3.org/RDF/FAQ2010 年 11 月 16 日访问
Arenas M，Prud'hommeaux E，Sequeda J (eds) (2010)关系数据到 RDF 的直接映射。万维网联盟。www.w3.org/TR/rdb-direct-mapping/2010 年 11 月 19 日访问
Clark K(2010)RDF 数据库市场。克拉克&帕西亚有限责任公司。weblog . clarkparsia . com/2010/09/23/the-rdf-database-market/。2010 年 11 月 21 日访问
Oinonen K (2005)在语义网技术的商业应用道路上。商业中的语义网——如何进行。《语义网的工业应用:第一届 IFIP 语义网工业应用 WG12.5 工作会议论文集》。国际信息处理联合会。纽约斯普林格科学+商业媒体公司
Nagy M，Vargas-Vera M (2010)迈向自动语义数据集成:多主体框架方法。在:语义网。武科瓦尔·因特
Dertouzos LM，Berners-Lee T，Fischetti M (1999)编织网络:万维网发明者的最初设计和最终命运。哈珀旧金山，旧金山
《关联数据——迄今为止的故事》。语义网和信息系统 2009，5(3):1–22
伯纳斯-李 T (2009)关联数据。万维网联盟。www.w3.org/DesignIssues/LinkedData.html2011 年 8 月 25 日访问
Cyganiak R，Jentzsch A .链接开放数据云图。http://lod-cloud.net。2011 年 7 月 20 日访问
雅虎(2010)Flickr——照片分享。雅虎！www.flickr.com 公司公司】。2010 年 10 月 15 日访问
谷歌站长中心团队(2007)使用 robots meta 标签。谷歌公司Google webmastercentral . blogspot . com/2007/03/using-robots-meta-tag . html。2010 年 10 月 16 日访问
美国在线公司(2010 年)ODP–开放目录项目。网景公司。www.dmoz.org/2010 年 10 月 16 日访问
TWRP (2007)关于机器人< META >的标签。网络机器人页面。www.robotstxt.org/meta.html2010 年 11 月 2 日访问
Sullivan D (2007)雅虎提供 NOYDIR 选择退出雅虎目录标题&描述。搜索引擎之地。第三门媒体。search engine land . com/Yahoo-provides-noydir-opt-out-of-Yahoo-directory-titles-descriptions-10631。2010 年 10 月 16 日访问
Ontos (2010) OntosMiner。翁托斯股份公司。www.ontos.com/o_eng/index.php?cs=3-22011 年 8 月 25 日访问
吴克(主编)(2010)语义网。武科瓦尔科技公司
Mellouli S，Bouslama F，Akande A (2010)一种用于表示财经标题新闻的本体。doi:2010 . 02 . 001
Davis I、Newman R、D'Arcus B (2005)在 RDF 中表达核心 FRBR 概念。理查德.纽曼伊恩.戴维斯。vocab.org/frbr/core.html2011 年 2 月 21 日访问
知识共享(2011)描述了 RDF 中的版权。知识共享权利表达语言。知识共享。creativecommons.org/ns2011 年 2 月 21 日访问
ODRL (2011)开放数字版权语言(ODRL)倡议。odrl.net2011 年 8 月 25 日访问
Iannella R (2002)开放数字版权语言(ODRL)版本 1.1。万维网联盟。www.w3.org/TR/odrl2011 年 2 月 21 日访问
Miles A，Bechhofer S (eds) (2009) SKOS 简单知识组织系统参考。万维网联盟。www.w3.org/TR/skos-reference/2011 年 2 月 21 日访问
Brickley D (ed) (2006) WGS84 地理定位:一个 RDF 词汇表。万维网联盟。www.w3.org/2003/01/geo/wgs84_pos.rdf2011 年 2 月 21 日访问
Davis I，Galbraith D (2010) BIO:传记信息的词汇。伊恩·戴维斯，大卫·加尔布雷斯。vocab.org/bio/0.1/2011 年 2 月 21 日访问
学习对象元数据的 IEEE 1484.12.1-2002 标准的 IMS (2006) IMS 元数据最佳实践指南。版本 1.3 最终规格。IMS 全球学习联盟。www . IMS global . org/metadata/mdv1p 3/imsmd _ bestv1p 3 . html。2011 年 2 月 21 日访问
奥斯纳布吕克大学(2002)数学-网络 RDF 集合。奥斯纳布吕克大学。www . iwi-iuk . org/material/rdf/1.1/。2011 年 2 月 21 日加入
Brickley D，Miller L (2007) FOAF 词汇规范 0.9。丹·布里克利，莉比·米勒。xmlns.com/foaf/0.1/2011 年 2 月 21 日访问
帕拉达 RA (2008) DOAC 词汇规范。拉蒙·安东尼奥·帕拉达。ramonantonio.net/doac/0.1/2011 年 2 月 21 日访问
邓比尔·E(2011)DOAP。艾德·邓比尔。trac.usefulinc.com/doap2011 年 2 月 22 日访问
林赛诉 Schemaweb 案(2011 年)。RDF 模式目录。VicSoft 有限公司 www.schemaweb.info 。2011 年 2 月 21 日访问
戴维斯一世(2006)vocab.org——一个词汇的 URI 空间。伊恩·戴维斯。vocab.org2011 年 2 月 21 日访问
奥姆勒维(2006)啤酒本体论。大卫·奥姆勒。www.purl.org/net/ontology/beer.owl2010 年 11 月 17 日访问
Kanzaki M (2007)音乐词汇。网络神崎。www.kanzaki.com/ns/music.rdf2010 年 11 月 17 日访问
Sikos LF(2011)vid ont–视频本体。vidont.org/2011 年 5 月 30 日访问
鲍梅斯特 J，塞佩尔 D (2010)本体中的异常与规则。网络 Semant，doi:10.1016/j.websem
Khan L (2009)语义网和云计算。在:拉蒂富尔汗博士的研究。达拉斯大学。www.utdallas.edu/~lkhan/research.html2010 年 11 月 13 日访问
Smarty A (2010)如何使用各种 REL 属性——学习微格式。搜索引擎杂志。www . search engine journal . com/how-to-use-variable-rel-attributes-learning-microformats/16144/。2010 年 11 月 11 日访问
Kaply M (2010)火狐操作插件。迈克尔·卡普里。addons.mozilla.org/en-US/firefox/addon/4106/2010 年 11 月 17 日访问
De Bruin R (2010) Tails 出口火狐插件。罗伯特·德·布鲁因。addons.mozilla.org/en-US/firefox/addon/2240/2010 年 11 月 17 日访问
ryckbost b(2010)michrome 格式 Google Chrome 扩展。布莱恩·赖克博。chrome . Google . com/extensions/detail/oalbifknmclbnmj jdemjkhmpjjj。2010 年 11 月 17 日加入
Baranovskiy D(2010)Optimus–微格式转换器。德米特里·巴拉诺夫斯基。microformatique.com/optimus/2010 年 11 月 17 日访问
左逻辑(2010)微格式书签。左逻辑有限公司leftlogic.com/projects/microformats_bookmarklet。2010 年 11 月 17 日访问
Dawson F，Stenerson D (1998)互联网日历和日程安排核心对象规范(iCalendar)。互联网协会。www.ietf.org/rfc/rfc2445.txt2010 年 11 月 12 日访问
elik T，Suda B (2010) hCalendar 1.0。微格式社区。microformats.org/wiki/hcalendar2010 年 11 月 12 日访问
King R，elik T，Mullen weg M(2008)hCalendar Creator。微格式社区。microformats.org/code/hcalendar/creator2010 年 11 月 11 日访问
elik T，Suda B (2010) hCard 1.0。微格式社区。microformats.org/wiki/hcard2010 年 11 月 11 日访问
道森 F，霍维斯 T (1998) vCard MIME 目录简介。互联网协会。www.ietf.org/rfc/rfc2426.txt2010 年 11 月 11 日访问
elik T (2005) hCard 创建者。微格式社区。microformats.org/code/hcard/creator2010 年 11 月 11 日访问
Casserly C、Domicone A、Green L、Heung A、Kinkade N、Linksvayer M、Park J、Peters D、Rees J、Roberts A、Rose T、Ruttenberg A、Schultz AJ、Steuer E、Vollmer T、Webber C、Wilbanks J、Yergler N、Yip J 等人(编辑)(2010)执照。知识共享。creativecommons.org/about/licenses/2010 年 10 月 17 日访问
elik T (2005) rel= "许可证"。microformats.org/wiki/rel-license微格式社区。2010 年 11 月 12 日访问
Olbertz D(2010)No to rel = " No follow "。对抗垃圾邮件，而不是博客。德克·奥尔伯茨。nonofollow.net2010 年 11 月 13 日访问
elik T，Marks K (eds)，Cutts M，Shellen J (2005) rel="nofollow "。微格式社区。microformats.org/wiki/rel-nofollow2010 年 11 月 12 日访问
elik T，Marks K，Powazek D (2010) rel="tag "。微格式社区。microformats.org/wiki/rel-tag2010 年 11 月 12 日访问
Berners-Lee T，Fielding R，Masinter L (2005)统一资源标识符(URI):通用语法。互联网协会。www.ietf.org/rfc/rfc3986.txt2011 年 8 月 25 日访问
elik T，Marks K (2010)投票链接。微格式社区。microformats.org/wiki/vote-links2010 年 11 月 13 日访问
Paul A (2003)社交网络开始在网络上成形。西雅图时报。community.seattletimes.nwsource.com/archive/?date = 2003 12 29&slug = Paul 29。2010 年 11 月 10 日访问
GMPG(2010)XFN-XHTML 朋友网。全球多媒体协议组。gmpg.org/xfn/2010 年 11 月 10 日访问
Lewis EP (2008)用微格式获取语义，第二部分:XFN。艾米莉·p·刘易斯。ablognotlimited . com/index . PHP/articles/getting-semantic-with-microformats-part-2-xfn/。2010 年 11 月 11 日访问
Mullenweg M，elik T (2004) XFN 1.1 创建者。全球多媒体协议组。gmpg.org/xfn/creator2010 年 11 月 11 日访问
mulweng m(2010)exefen。马修穆朗格。ma . TT/tools/exefen . PHP/。2010 年 11 月 11 日加入
elik T (2003) XMDP:简介和格式描述。全球多媒体协议组。gmpg.org/xmdp/description2010 年 11 月 13 日访问
elik T(2010)ADR 微格式草案规范。微格式社区。microformats.org/wiki/adr2010 年 11 月 13 日访问
elik T(2009)geo 微格式草案规范。微格式社区。microformats.org/wiki/geo2010 年 11 月 13 日访问
Janes D，Carlyle B，Tantek e lik T(2010)hAtom 微格式草案规范。微格式社区。microformats.org/wiki/hatom2010 年 11 月 13 日访问
Sporny M，McEvoy M 等人(2010 年)提出的 hAudio 微格式草案规范。微格式社区。microformats.org/wiki/haudio2010 年 11 月 13 日访问
埃利克·T、哈雷·R(编辑)、阿尔金·A、多纳托·C、金·R(2010)所列的缩微格式草案规范。微格式社区。microformats.org/wiki/hlisting2010 年 11 月 13 日访问
McEvoy M、elik T、Marks K、Hodder M、Begbie R、Kinberg J、Messina C、Rein L、Newell C、Sporny M、Johnson M、MC evoy M(2010)hMedia 微格式草案规范。微格式社区。microformats.org/wiki/hmedia2010 年 11 月 13 日访问
Malek J，Myles S，Moore M，Ng M，Martin TB(2010)hNews 微格式草案规范。微格式社区。microformats.org/wiki/hnews2010 年 11 月 13 日访问
Lee P，Myers J，Cook C，gustaf son A(2010)h product 微格式草案规范。微格式社区。microformats.org/wiki/hproduct2010 年 11 月 13 日访问
l rtsch T(ed)，Berriman F，Ward B，Inkster T(2010)h recipe 微格式草案规范。微格式社区。microformats.org/wiki/hrecipe2010 年 11 月 13 日访问
King R，elik T，Levine J，Marks K(2010)hResume 微格式草案规范。微格式社区。microformats.org/wiki/hresume2010 年 11 月 13 日访问
elik T，Diab A，McAllister I，Panzer J，Rifkin A，Sippey M(2010)hre view 微格式草案规范。微格式社区。microformats.org/wiki/hreview2010 年 11 月 13 日访问
King R，Cook B，elik T，Marks K(2009)rel-directory 微格式草案规范。微格式社区。microformats.org/wiki/rel-directory2010 年 11 月 14 日访问
Marks K(2009)rel = " enclosure "微格式草案规范。微格式社区。microformats.org/wiki/rel-enclosure2010 年 11 月 14 日访问
Ayers D(2009)rel = " home "微格式草案规范。微格式社区。microformats.org/wiki/rel-home2010 年 11 月 14 日访问
Pedersen AH、Kinberg J、Dedman J、Van Dijk P(2010)rel-payment 微格式草案规范。微格式社区。microformats.org/wiki/rel-payment2010 年 11 月 14 日访问
Janes P (2009 年)机器人排斥概况。规范草案。微格式社区。microformats.org/wiki/robots-exclusion2010 年 11 月 14 日访问
Gibson B (2010)的 xFolk 微格式。规范草案。微格式社区。microformats.org/wiki/xfolk2010 年 11 月 14 日访问
4K 协会(2009)所以你想开发一种新的微格式？微格式社区。microformats.org/wiki/process2010 年 11 月 13 日访问
希克森一世(2010) HTML 微数据。万维网联盟。http://www.w3.org/TR/microdata/.于 2010 年 10 月 17 日加入
Berners-Lee T (2007)巨型全球图。麻省理工学院。dig.csail.mit.edu/breadcrumbs/node/2152010 年 9 月 23 日访问
Berners-Lee T (2007)巨型全球图。麻省理工学院。dig.csail.mit.edu/breadcrumbs/node/2152010 年 9 月 23 日访问
Brickley D (2010) FOAF 项目网站。朋友的朋友(FOAF)项目。www.foaf-project.org/2010 年 9 月 23 日访问
QDOS (2010) FOAFNet。qdos！qdos！ foaf.qdos.com/ 。2010 年 9 月 23 日加入
NetEstate (2010)朋友的朋友(FOAF)搜索引擎。NetEstate。www.foaf-search.net2010 年 9 月 23 日访问
Intellidimension (2010)语义网搜索。智能维度。www.semanticwebsearch.com/query/.于 2010 年 9 月 23 日加入
Quatuo (2010)搜索 FOAF 个人资料/创建、管理、存储和发布你的朋友的朋友(FOAF)的个人资料-一个语义网项目。夸托。www.quatuo.com2010 年 9 月 23 日访问
多兹 L(2010)FOAF-阿-马蒂奇。www.ldodds.com/foaf/foaf-a-matic.en.html.·利·多兹。2010 年 9 月 23 日访问
沃克 J (2010)的 Drupal FOAF 模块。drupal.org/project/foaf德赖斯·布塔尔特。2010 年 9 月 23 日访问
ISO (2009)信息和文件——都柏林核心元数据元素集。ISO 15836:2009。国际标准化组织。www . iso . org/iso/iso _ catalogue/catalogue _ ics/catalogue _ detail _ ics . htm？csnumber=52142 。2011 年 8 月 26 日访问
昆泽 J，贝克 T (2007)都柏林核心元数据元素集。IETF 信托。www.ietf.org/rfc/rfc5013.txt2011 年 8 月 27 日访问
NISO ANSI(2007)都柏林核心元数据元素集。ANSI/NISO Z39.85。国家信息标准组织。www.niso.org/kst/reports/standards/kfile_download?id %说明% 3 iso-8859-1 = Z39-85-2007 . pdf&pt = rkgkixzw 643 yeuayuqz 1 bfwdhig 4-24 rjbczbw 8 UE 4 vwdpzsjds 4 rjlz 0t 90 _ D5 _ ymGsj _ ikva 86 hjp 37 r _ hfeijh 12 lhqjw 52b-5 uda Amy 22 wjjl0 y 5 ghhtjwci3 v。2011 年 8 月 26 日访问
希尔曼 D (2005)语法问题。In:使用都柏林核心。都柏林核心元数据倡议。dublincore.org/documents/usageguide/#whichsyntax2010 年 11 月 2 日访问
Powell A，Nilsson M，Naeve A，Johnston P，Baker T (2007) DCMI 抽象模型。DCMI 推荐。都柏林核心元数据倡议。dublincore.org/documents/abstract-model/2010 年 10 月 25 日访问
DCMI (2010)都柏林核心元数据元素集，版本 1.1。DCMI 推荐。都柏林核心元数据倡议。dublincore.org/documents/dces/2010 年 10 月 22 日访问
Powell A、Wagner H (eds)、Weibel S、Baker T、Matola T、Miller E、Johnston P (2007)都柏林核心元数据倡议(DCMI)的名称空间政策。都柏林核心元数据倡议。dublincore.org/documents/dcmi-namespace/2010 年 10 月 26 日访问
Powell A，Nilsson M，Naeve A，Johnston P，Baker T (2007) DCMI 抽象模型语义学。在:DCMI 抽象模型。都柏林核心元数据倡议。Dublin core . org/documents/2007/02/05/abstract-model/# Sect-5。2010 年 10 月 26 日访问
Hillmann D (2005)使用都柏林核心元素，都柏林核心元数据倡议。都柏林核心元数据倡议。dublincore.org/documents/usageguide/elements.shtml2010 年 9 月 11 日访问
DCMI 使用委员会(2010) DCMI 元数据术语。DCMI 推荐。都柏林核心元数据倡议。dublincore.org/documents/dcmi-terms/2010 年 10 月 22 日访问
Berners-Lee T，Fielding R，Masinter L (2005) RFC 3986:统一资源标识符(URI):通用语法。互联网工程任务组。www.ietf.org/rfc/rfc3986.txt2010 年 10 月 26 日访问
Johnston P，Powell A (2008)使用 HTML/XHTML 元和链接元素表达都柏林核心元数据。都柏林核心元数据倡议。dublincore.org/documents/dc-html/2010 年 11 月 9 日访问
Powell A，Johnston P (2003)用 XML 实现都柏林核心的指南。都柏林核心元数据倡议。dublincore.org/documents/dc-xml-guidelines/2010 年 11 月 6 日访问
Johnston P，Powell A (2008)使用 XML (DC-DS-XML)表达都柏林核心描述集。都柏林核心元数据倡议。dublincore.org/documents/dc-ds-xml/2010 年 11 月 7 日访问
Phillips A，Davis M (2006)用于识别语言的标签。互联网协会。www.ietf.org/rfc/rfc4646.txt2010 年 11 月 8 日访问
Beckett D，Miller E，Brickley D (2002)用 RDF/XML 表达简单的都柏林核心。都柏林核心元数据倡议。dublincore.org/documents/dcmes-xml/2010 年 10 月 31 日访问
Kokkelink S，schwnzl R(2002)在 RDF / XML 中表达合格的都柏林核心。都柏林核心元数据倡议。dublincore.org/documents/dcq-rdf-xml/2010 年 11 月 2 日访问
Nilsson M、Powell A、Johnston P、Naeve A (2008)使用资源描述框架(RDF)表达都柏林核心元数据。都柏林核心元数据倡议。dublincore.org/documents/dc-rdf/2010 年 11 月 2 日访问
Nilsson M，Baker T (2008)对 RDF 中 Dublin Core 元数据的 DCMI 规范的注释。都柏林核心元数据倡议。dublincore.org/documents/dc-rdf-notes/2010 年 11 月 2 日访问
Beckett D，McBride B (eds) (2004)导言。In: RDF/XML 语法规范。W3C 推荐。万维网联盟。www.w3.org/TR/rdf-syntax-grammar/#section-Introduction2010 年 11 月 21 日访问
克莱恩 G，卡罗尔 JJ，麦克布赖德 B(编辑)(2004)资源描述框架(RDF):概念和抽象语法。W3C 推荐。万维网联盟。www.w3.org/TR/rdf-concepts/.于 2010 年 11 月 21 日加入
Davis M，Whistler K (eds) (2010) Unicode 标准附录 15。Unicode 规范化形式。Unicode 联合会。www.unicode.org/reports/tr15/#Norm_Forms2010 年 11 月 15 日访问
Ora Lassila O，Swick RR(eds)(1999)RDF 的形式语法。In:资源描述框架(RDF)模型和语法规范。万维网联盟。www.w3.org/TR/1999/REC-rdf-syntax-19990222/#grammar2010 年 11 月 21 日访问
Prud'hommeaux E，Seaborne A(eds)(2008)RDF 的 SPARQL 查询语言。万维网联盟。www.w3.org/TR/rdf-sparql-query/2011 年 2 月 22 日访问
Ogbuji C (ed) (2010) SPARQL 1.1 用于管理 RDF 图的统一 HTTP 协议。万维网联盟。www.w3.org/TR/sparql11-http-rdf-update/2011 年 2 月 22 日访问
格兰特 J，贝克特 D，麦克布赖德 B(编辑)(2004) N-Triples。RDF 测试用例。W3C 推荐。万维网联盟。www.w3.org/TR/rdf-testcases/#ntriples2010 年 11 月 21 日访问
Chris Bizer C，cyganak r(2007)trig 语法。柏林自由大学。www . wiwiss . fu-Berlin . de/bizer/trig/spec/。2010 年 11 月 21 日加入
卡罗尔·JJ，Stickler P(2004)XML 中的 RDF 三元组。惠普实验室。www.hpl.hp.com/techreports/2003/HPL-2003-268.pdf2010 年 11 月 21 日访问
Beckett D，McBride B (2004) RDF/XML 语法规范。万维网联盟。www.w3.org/TR/rdf-syntax-grammar/2010 年 11 月 15 日访问
伯纳斯李 T，康诺利 D (2008)注释 3 (N3):一个可读的 RDF 语法。W3C 团队提交。万维网联盟。www.w3.org/TeamSubmission/n3/2010 年 11 月 15 日访问
Berners-Lee T，Connolly D(2008)XML 1.1 格式中使用的 EBNF N3 语法。万维网联盟。www.w3.org/2000/10/swap/grammar/n3-ietf.txt2010 年 11 月 15 日访问
Berners-Lee T (2005)初级读本:使用 N3 进入 RDF 语义网。万维网联盟。www.w3.org/2000/10/swap/Primer2010 年 11 月 15 日访问
134。Prud'hommeaux E，Carothers G (ed)，Beckett D，Berners-Lee T (2011)简明 RDF 三重语言。万维网联盟。www.w3.org/TR/2011/WD-turtle-20110809/2011 年 8 月 25 日访问
Jena——一个面向 Java 的语义 Web 框架。http://openjena.orgepi morphics 有限公司2011 年 8 月 26 日访问
Beckett D (2011)雷德兰 RDF 库。戴夫·贝克特。librdf.org2011 年 8 月 26 日访问
阿杜纳(2011)openRDF.org——芝麻的故乡。阿杜纳。www.openrdf.org2011 年 8 月 26 日访问
Zeldman J，Marcotte E (2009)用网络标准进行设计，第三版。新骑手，伯克利
Sporny M，Adrian B，Birbeck M(编辑)，Herman I (2010) RDFa API。用于从 Web 文档中提取结构化数据的 API。万维网联盟。www.w3.org/TR/rdfa-api/2011 年 2 月 22 日访问
Adida B、Birbeck M、McCarron S、Herman I (eds) (2010) RDFa Core 1.1。通过属性嵌入 RDF 的语法和处理规则。万维网联盟。www.w3.org/TR/rdfa-core/2011 年 2 月 22 日访问
伯贝克 M，麦卡隆 S (2009)居里语法 1.0。一种表达紧凑 URIs 的语法，W3C 候选推荐标准。万维网联盟。www.w3.org/TR/curie/2010 年 9 月 11 日访问
小 Lewis，Moscovitz M (2009)高级 CSS。伯克利艾德的朋友
Adida B，Herman I (eds) (2011) W3C RDFa 工作组。万维网联盟。www.w3.org/2010/02/rdfa/2011 年 2 月 22 日访问
Swick R (ed) (2002)元数据活动声明。万维网联盟。www.w3.org/Metadata/Activity.html2010 年 10 月 28 日访问
Brickley D，Guha RV，McBride B (eds) (2004) RDF 词汇描述语言 1.0: RDF 模式。万维网联盟。www.w3.org/TR/rdf-schema/2011 年 2 月 22 日访问
赫曼一世(2010)“为什么是猫头鹰而不是 WOL？”。语义网技术教程。万维网联盟。www . w3 . org/People/Ivan/core presentations/RDFTutorial/slides . html # % 28114% 29。2010 年 10 月 28 日访问
史密斯 MK，韦尔蒂 C，麦克吉尼斯 DL (eds) (2004)猫头鹰的种类。OWL 网络本体语言指南。W3C 推荐。www.w3.org/TR/2004/REC-owl-guide-20040210/#OwlVarieties2010 年 11 月 15 日访问
迪安 M，施赖伯 G (eds)，贝希霍费尔 S，范哈梅林 F，亨德勒 J，霍罗克斯 I，麦克吉尼斯 DL，帕特尔-施耐德 PF，斯坦拉(2004) OWL 网络本体语言参考。W3C 推荐。万维网联盟。www.w3.org/TR/owl-ref/2011 年 8 月 26 日访问
Hitzler P，krtzsch M，Parsia B，Patel-Schneider PF，鲁道夫 S (eds) (2009) OWL 2 网络本体语言-初级读本。W3C 推荐。万维网联盟。www.w3.org/TR/owl-primer/2011 年 8 月 26 日访问
Motik B，Grau BC，Horrocks I，Wu Z，Fokoue A，Lutz C (eds)，Calvanese D，Carroll J，德贾科莫 G，Hendler J，Herman I，Parsia B，Patel-Schneider PF，Ruttenberg A，Sattler U，Schneider M(2009)OWL 2 Web Ontology Language-Profiles。W3C 推荐。万维网联盟。www.w3.org/TR/owl2-profiles/2011 年 8 月 26 日访问
Patel-Schneider PF，Horrocks I (eds) (2004)抽象语法。在:OWL 网络本体语言。语义和抽象语法。万维网联盟。www.w3.org/TR/2004/REC-owl-semantics-20040210/syntax.html2010 年 10 月 28 日访问
Motik B，Patel-Schneider PF，Parsia B (eds)，Bock C，Fokoue A，Haase P，Hoekstra R，Horrocks I，Ruttenberg A，Sattler U，Smith M (2009) OWL 2 Web 本体语言。结构规范和函数式语法。W3C 推荐。万维网联盟。www.w3.org/TR/owl-syntax/2010 年 10 月 28 日访问
Patel-Schneider PF，Motik B (eds)，Grau BC，Horrocks I，Parsia B，Ruttenberg A，Schneider M (2009) OWL 2 Web 本体语言。映射到 RDF 图。W3C 推荐。万维网联盟。www.w3.org/TR/2009/REC-owl2-mapping-to-rdf-20091027/2010 年 10 月 29 日访问
Beckett D，McBride B (eds) (2004) RDF/XML 语法规范。W3C 推荐。万维网联盟。www.w3.org/TR/rdf-syntax-grammar/2010 年 10 月 28 日访问
Beckett D，Berners-Lee T(2008)Turtle-Terse RDF 三元组语言。W3C 团队提交。万维网联盟。www.w3.org/TeamSubmission/turtle/2010 年 10 月 28 日访问
Motik B，Parsia B，Patel-Schneider PF (eds)，Bechhofer S，Grau BC，Fokoue A，Hoekstra R (2009) OWL 2 Web 本体语言。XML 序列化。W3C 推荐。万维网联盟。www.w3.org/TR/owl-xml-serialization/.于 2010 年 10 月 28 日加入
Horridge M，Patel-Schneider PF (2009) OWL 2 Web 本体语言。曼彻斯特语法。W3C 工作组说明。万维网联盟。www.w3.org/TR/2009/NOTE-owl2-manchester-syntax-20091027/2010 年 10 月 28 日访问
W3C OWL 工作组(eds) (2009)语法。OWL 2 网络本体语言。文档概述。W3C 推荐。万维网联盟。www.w3.org/TR/owl2-overview/#Syntaxes2010 年 10 月 28 日访问
迪安 M，施赖伯 G(编辑)，贝赫霍费尔 S，范哈梅伦 F，亨德勒 J，霍罗克斯 I，麦克吉尼斯 DL，帕特尔-施耐德 PF，斯坦拉(2004)性质。OWL 网络本体语言参考。W3C 推荐。万维网联盟。www.w3.org/TR/owl-ref/#Property2010 年 10 月 30 日访问
Kokkelink S，schwnzl R(2002)DC 与其他词汇和 DumbDown 合作。In:用 RDF / XML 表达合格的都柏林核心。都柏林核心元数据倡议。dublincore.org/documents/dcq-rdf-xml/#sec32010 年 11 月 2 日访问
Barker P，Campbell LM，Roberts A，Smythe C(eds)(2006)IEEE 1484 . 12 . 1-2002 学习对象元数据标准的 IMS 元数据最佳实践指南。最终规格。IMS 全球学习联盟。www.imsglobal.org/metadata/mdv1p3/imsmd_bestv1p3.html2010 年 10 月 23 日访问
Iannella R (ed) (2002) ODRL 1.1 表达式语言模式。开放数字权利语言倡议。odrl.net/1.1/ODRL-EX-11-DOC/index.html2010 年 10 月 23 日访问
Rivera-Aguilera AB，Vega-López M，Pozo-Marrero A (2010 年)元数据应用简介:整合不同的元数据方案，对数字学习材料集合进行编目。都柏林核心和元数据应用国际会议论文集。匹兹堡都柏林核心元数据倡议
Adobe Systems Inc. (2010)在应用文件中嵌入 XMP 元数据。见:XMP 规范，第三部分-文件存储。www . Adobe . com/content/dam/Adobe/en/devnet/xmp/pdf/xmpspecificationpart 3 . pdf。2010 年 11 月 17 日访问
Sikos LF (2011)针对 Web 3.0 视频的高级(X)HTML5 元数据和语义。DESIDOC 图书馆与信息技术杂志 2011，31(4):247–252；publications . drdo . gov . in/ojs/index . PHP/DJ lit/article/view file/1105/434。2011 年 7 月 20 日访问
雅虎！Inc .(2009)search monkey–视频。雅虎！开发者网络。http://developer.search.yahoo.com/help/objects/video 公司公司】。2010 年 10 月 15 日访问
Goel K，Guha RV，Hansson O (2009)介绍了丰富的片段。谷歌公司Google webmastercentral . blogspot . com/2009/05/introducing-rich-snippets . html。2010 年 10 月 21 日访问
Bir beck M(2009)RDFa 简介。一份单独的杂志。www.alistapart.com/articles/introduction-to-rdfa2010 年 9 月 9 日访问
Goel K，Gupta P，Hansson O (2009)帮助我们让网络更好:丰富片段的更新。谷歌公司Google webmastercentral . blogspot . com/2009/10/help-us-make-web-better-update-on-rich . html。2010 年 10 月 21 日访问
谷歌站长中心(2010)人。关于联系方式。谷歌公司www.google.com/support/webmasters/bin/answer.py?答案=146646 。2010 年 11 月 10 日访问
谷歌(2010 年)社交图谱 API。谷歌代码实验室。code.google.com/intl/hu/apis/socialgraph/2010 年 11 月 11 日访问
雅虎！开发者网络(2008) Monkey 发现微格式和 RDF。雅虎！Inc .developer . Yahoo . com/blogs/ydn/posts/2008/12/monkey _ finds _ microformats _ and _ rdf/。2010 年 11 月 13 日访问
安德森 E，德波特 V，费瑟斯通 D，巩特尔 L，雅各布博士，詹森-因曼 L，米尔斯 C，施密特 C，西姆斯 G，沃尔特 A (2010)网络写作的工作(或不工作)。《与网页标准互动——网页设计的整体方法》。新骑手，伯克利

八、网络联合

互联网上共享的最新信息量不断增长。Web syndication 提供新闻订阅渠道，以便发布最近更新的网站内容、最新新闻或论坛帖子的摘要。这些 web 提要使用户无需浏览网站就能了解最新信息。此外，相同的提要还可以在多个网站之间共享。尽管两种流行的 web 联合格式(RSS 和 Atom)具有相对简单的词汇表，但是新闻提要通道需要符合严格的标准，首先是 XML。

在本章中，您将学习如何手动创建符合标准的新闻订阅源频道，并在保持符合标准的同时经常更新它们。你将熟悉 RSS 和 Atom 这两个主要竞争对手的优缺点。此外，您将了解用于新闻提要元素的数据格式，以及缺省值和合法属性值。您还将熟悉所需的通道和项目元素，以及为了最大化互操作性而应该提供的元素。

新闻提要

Web syndication 使网站组件可用于多个站点，而无需登录或下载其他站点的无关组件。这个短语通常指的是网络新闻源 ( 新闻频道)，提供最近添加内容的最新摘要和网站的最新变化。最常见的新闻提要用于最新新闻、新闻标题、博客条目和论坛帖子。

web syndication 的第一批技术出现于 1997 年，包括频道定义格式 [1 ，元内容框架 [2 ，以及scripting news[3。Netscape 在 1999 年发布了第一个版本的Really Simple Syndication(RSS)，后来成为了最广泛使用的 web 提要格式。另一个流行的新闻提要 Atom 的规范的第一部分是在 2005 年引入的。

由于订阅源阅读器和聚合器运行在各种软件平台和设备上，包括但不限于 web 浏览器、Windows 新闻订阅源阅读器小工具、Microsoft Outlook 和智能手机上的新闻订阅源阅读器，因此互操作性至关重要。

真正简单的联合

真正简单的联合(RSS)是最广泛使用的 web 联合格式。因为 RSS 是一个 XML 应用，所以它可以通过 XML 名称空间进行扩展。除了表示新闻和新闻稿的传统用途之外，RSS 还有一些特殊的应用，比如为银行提供最新的汇率。

RSS 的典型文件扩展名是.rss和.xml。与 RSS 相关的互联网媒体类型是application/rss+xml，它还没有被标准化 6 。

RSS 用属性title、link、description、channel和item描述轻量级联合频道。

RSS 有以下版本:RSS 0.90、RSS 0.91、RSS 0.92 和 RSS 2.0。在 2000 年，RDF Site Summary 这个名称被使用，它指的是基于 RDF 的模块化的可扩展性。0.91 版本被称为 Rich Site Summary，它放弃了 RDF 结构，并从 Dave Winer 为他的新闻网站“scriptingNews”开发的 Scripting News 联合格式中导入了元素。当前的首字母缩略词是简单联合。RSS 规范的最新版本在 RSS 咨询委员会网站 [8 ]上有一个永久的 URI。最广泛使用和最先进的版本 RSS 2.0.11 [9 ]将在接下来的章节中讨论。

创建 RSS 文件

要创建一个 RSS 文件，首先需要一个 XML 声明和一个rss元素。rss元素是 RSS 文件的根元素，也是channel元素的容器，后者提供关于文件的信息并包含item元素(新闻提要条目)。清单 8-1 显示了一个 RSS 文件的一般结构。对于 RSS 2.0.11 来说，rss元素上的version属性是必需的，其值必须是2.0(没有指明 subversion)。

***清单 8-1。*具有最大互操作性的 RSS 文件的一般结构

<?xml version="1.0" encoding="utf-8" ?> <rss version="2.0" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) xmlns:content="http://purl.org/rss/1.0/modules/content/" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) xmlns:dc="http://purl.org/dc/elements/1.1/" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) xmlns:atom="http://www.w3.org/2005/Atom"> <channel> <title>An RSS news feed example</title> <link>http://www.example.com</link> <pubDate>Mon, 08 Aug 2011 08:03:00 +0200</pubDate> <image> <url>http://www.example.cimg/logo.png</url> <title>An RSS news feed example</title> <link>http://www.example.com</link> </image> <dc:creator>John Smith</dc:creator> <description>The news feed of rock star John Smith. Concerts, CDs, and more.</description> <language>en</language> <sy:updatePeriod>daily</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <atom:link href="http://www.example.com/rss.xml" rel="self" type="application/rss+xml" /> <item> <title>News item 2</title> <link>http://www.news2link.com</link> <pubDate>Mon, 08 Aug 2011 08:03:00 +0200</pubDate> <dc:creator>John Smith</dc:creator> <category>CDs</category> <guid>http://www.news2link.com</guid> <description>Description of news item 2</description> <content:encoded>The full content of News #2.</content:encoded> </item> <item> <title>News item 1</title> <link>http://www.news1link.com</link> <pubDate>Sun, 07 Aug 2011 08:48:00 +0200</pubDate> <dc:creator>John Smith</dc:creator> <category>Concerts</category> <guid>http://www.news1link.com</guid> <description>A bit more about news 1</description> <content:encoded><![CDATA The full content of News #1\. In CDATA sections, ![images <a href="http://examp.com">markup code</a> can also be included. ]]></content:encoded> </item> </channel> </rss>

自然，RSS 文件通常包含更多的item元素。

images 提示理论上，一个 RSS 频道可以包含任意数量的条目。但是，一些 RSS 阅读器(如 Windows 中的新闻阅读器小工具)不支持大于大约 150KB 或 2，800 行的 RSS 文件，如果您每天更新 RSS 文件，这相当于大约 7 个月。建议您将文件大小保持在此限制之下，以最大化互操作性。

有些元素是必需的，有些是可选的，但强烈建议使用。首先，我们将检查所需的元素。

必需元素

如前一节所示，rss元素包含了channel元素及其所有内容。RSS 2.0 中channel元素的必需元素有title、link和description。

标题元素

title元素表示频道的名称。它通常与相关网站的标题相一致。清单 8-2 显示了一个例子。

***清单 8-2。*一个 RSS 频道的标题

<title>John Smith Headlines</title>

链接元素

link元素是一个 URI，代表新闻提要所在的域。清单 8-3 显示了一个例子。

***清单 8-3。*RSS 中的一个链接

<link>http://example.com/</link>

描述元素

description元素包含一个描述频道的句子或句子片段，如清单 8-4 所示。

***清单 8-4。*RSS 中的一个频道描述

<description>The latest news about rock star John Smith.</description>

可选元素

在 RSS 2.0 新闻源中，channel元素有 16 个可选的子元素，包括category、cloud、copyright、docs、generator、image、language、lastBuildDate、managingEditor、pubDate、rating、skipDays、skipHours、textInput、ttl和webMaster。我们将在这里更详细地查看所有这些子元素。

所有提供 URL 的 RSS 2.0 元素的一个共同特点是，它们应该以 IANA [10 ]定义的 URI 方案开头，例如，http://、https://、news://、mailto://或ftp://。注意http://和ftp://方案不能在 RSS 2.0 之前的 RSS 版本中使用。

类别元素

可以为 RSS 频道指定一个或多个类别，用于分类和过滤。例如，致力于语义 web 事件的网站的 RSS 新闻提要可能包含诸如会议、研讨会、规范等类别。另一个例子可能是一个书商，他使用类别来指示最新图书发行的类别，以便潜在客户可以轻松地跟踪某个类别的最新图书(例如，对罗马人感兴趣的人不一定涉及技术书籍)。category元素不仅可以用于整个频道，还可以单独用于每个项目。清单 8-5 显示了一个例子。

***清单 8-5。*RSS 中的一个category元素

<category>Workshops</category>

元素有一个可选的domain属性，它是一个标识分类的 URI(清单 8-6 )。

***清单 8-6。*类别带域

<category domain="http://www.example.com/vocab">WS</category>

为频道声明的category元素的值可以被门户用来对 RSS 新闻订阅源频道进行分类，而为 item 元素指定的category元素的值被某些新闻订阅源阅读器显示为超链接，可以用作过滤器(例如，在现代浏览器中实现的订阅源阅读器中)。通过点击其中一个链接，订阅源阅读器可以隐藏所有其他类别的新闻条目。

云元素

为了立即得到 RSS 频道更新的通知，可以使用cloud元素为 RSS 提要编写一个发布-订阅协议。它指定了一个支持 rssCloud 接口的 web 服务(可以在 HTTP-POST、XML-RPC 或 SOAP 1.1 中实现)。支持两种请求方法:请求通知的客户端到云调用和执行通知的云到客户端调用。一个客户端请求有五个必需的参数，包括发生更新时云调用的远程过程的名称、客户端的 TCP 端口、客户端的远程过程调用路径、字符串xml-rpc(如果客户端使用 XML-RPC)或soap(如果使用 SOAP)，以及 RSS 文件的 URL。用于通知请求的 IP 地址必须与接收通知的 IP 地址一致。清单 8-7 显示了一个例子。

***清单 8-7。*使用 RSS 中的cloud元素

<cloud domain="rpc.example.com" port="80" path="/RPC2" registerProcedure="pingMe" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) protocol="soap"/>

云发送给客户机的更新通知包含一个参数:发生变化的 RSS 文件的 URL。作为响应，客户端必须返回布尔值TRUE。

版权元素

***清单 8-8。*在 RSS 中提供版权信息

docs 元素

使用的 RSS 格式文档的超链接可以由docs元素提供。典型的元素值是[www.rssboard.org/rss-specification](http://www.rssboard.org/rss-specification)。

发电机元件

软件工具生成的 RSS 提要可以很容易地从generator元素的值中识别出来，生成器软件通常在这里识别自己(清单 8-9 )。

***清单 8-9。*由活字生成的 RSS 新闻源

<generator>Movable Type 4.34-en</generator>

如果元素被省略或者包含一个简单的文本编辑器，通常表明提要是由源代码级别的手工编码人员编写的(正如我们在本章中所做的)。在这种情况下，作者提供一个文本编辑器，如 Notepad++并通常使用都柏林核心词汇表将自己标识为创建者。但是，大多数人应用饲料发电机。

图像元素

channel元素的一个可选子元素是image，它可以用来为 RSS 提要提供一个图像。它有三个必需的和三个可选的子元素:

表示频道的图像的 URL 由url子元素表示。图像格式可以是 GIF、JPEG 或 PNG。必选。
图像的替代文本由title定义。当 RSS 被嵌入到(X)HTML 中时，这个字符串作为alt属性的文本被转发。title子元素的值应该与通道的title元素的值一致。必选。
到频道站点的图像超链接由link子元素决定。子元素link的值应该与通道的link元素的值一致。必选。
图像宽度可以由width子元素以像素为单位确定。默认值为88，最大值为144。可选。
图像高度可以由width子元素以像素为单位确定。默认值为31，最大值为400。可选。
包含在(X)HTML 中图像超链接的title属性中的图像描述可以由description子元素提供。可选。

清单 8-10 显示了一个例子。

***清单 8-10。*为 RSS 文件指定的标志图像

<image> <url>http://www. bigprofitconsulting.cimg/logo.png</url> <title>Big Profit Consulting</title> <link>http://www.bigprofitconsulting.com</link> </image>

images 注意为 RSS 文件声明的图像显示在 RSS 阅读器中，例如在浏览器中实现的阅读器，但不被提要阅读器使用，例如 Outlook 中的提要阅读器或 Windows 提要阅读器小工具。

语言元素

新闻提要内容的自然语言可以由language元素声明。例如:

<language>en</language>

表 8-1 总结了允许值。

images

除了最初的 Netscape 版本(0.91)不包含代码et(爱沙尼亚语)和haw(夏威夷语)，所有 RSS 版本都支持这些语言代码。也可以使用 HTML 4.01 规范 [11 ]中定义的 HTML language标签中允许的语言代码。W3C 参考 RFC 1766 [12 ]。为 ISO 639 [13 ]语言缩写保留两个字母的主要代码，包括fr(法语)、de(德语)、it(意大利语)、nl(荷兰语)、el(希腊语)、es(西班牙语)、pt(葡萄牙语)、ar(阿拉伯语)、he(希伯来语)、ru(俄语)、zh(中文)、ja(日语)、hi(印地语)、ur(乌尔都语)和sa(梵语)。两个字母的子码是 ISO 3166 国家代码 [14 ]。

managing editor 元素

元素可以用来提供新闻提要编辑器的电子邮件地址。清单 8-11 显示了一个例子。

***清单 8-11。*声明 RSS 编辑器

<managingEditor>john@example.com (John Smith)</managingEditor>

pubDate 和 lastBuildDate 元素

频道内容的发布日期可以由pubDate元素提供。每次更新新闻提要时，元素值都会发生变化。RSS 应用日期和时间规范 RFC 822 [15 ，除了年份可以用两个或四个字符表示(后者是首选)。应根据格林威治标准时间(GMT)/协调世界时(UTC)的差异提供偏移量。例如，在英国伦敦时间 2010 年 11 月 24 日上午 08:04(换句话说，在 GMT 时区)更新的一个 RSS 频道可以显示在清单 8-12 、中所示的发布日期，而在斐济苏瓦(时区 1200 GMT 或 UTC+12)发布的另一个新闻订阅源同时可以被编写为如清单 8-13 中所示。

***清单 8-12。*GMT 时区的出版日期

<pubDate>Wed, 24 Nov 2010 08:04:00 GMT</pubDate>

***清单 8-13。*UTC+12 时区的发布日期

<pubDate>Wed, 24 Nov 2010 08:04:00 +1200</pubDate>

images 注意在管辖区实行夏令时(夏令时)的国家，时差一年变化两次。

新闻提要的最后修改日期可以用与pubDate相同的格式由lastBuildDate元素表示。

skip hours 和 skipDays 元素

没有更新的时间段可以由skipHours元素提供，天数可以由skipDays元素提供。skipHours的允许值是介于0和23(GMT 时间)之间的整数(清单 8-14 )。

***清单 8-14。*一个只在工作时间检查更新的 RSS 频道

<skipHours> <hour>0</hour> <hour>1</hour> <hour>2</hour> <hour>3</hour> <hour>4</hour> <hour>5</hour> <hour>6</hour> <hour>7</hour> <hour>17</hour> <hour>18</hour> <hour>19</hour> <hour>20</hour> <hour>21</hour> <hour>22</hour> <hour>23</hour> </skipHours>

skipDays元素有七个day子元素(完整的星期几)。它们可以用来指定新闻订阅频道不更新的日子，因此没有必要检查更新(清单 8-15 )。

***清单 8-15。*周末不更新的 RSS 源

<skipDays> <day>Saturday</day> <day>Sunday</day> </skipDays>

images 注申报的小时或天数仅为提示。RSS 阅读器可能无法在列出的时间段内读取频道。

文本输入元素

channel元素的另一个可选子元素是文本Input，它可以用来指定一个搜索框。它有四个必需的子元素:

Submit按钮的标签由title子元素决定。
文本输入区可以由description子元素描述。
name子元素标识文本对象。
link子元素提供了用于处理请求的 CGI 脚本的 URL。

许多 RSS 阅读器都忽略了 text Input元素。

TTL 元件

从源刷新之前的缓存持续时间可以用ttl元素(代表“生存时间”)以分钟表示。以三个小时为例，它可以写成清单 8-16 。

***清单 8-16。*RSS 中的 180 分钟缓存

<ttl>180</ttl>

站长元素

负责 RSS 频道技术问题的网站管理员的电子邮件地址可以用webMaster元素表示。

item 元素的子元素

item 元素有十个子元素:author、category、comments、description、enclosure、guid、link、pubDate、source、title。所有子元素都是可选的；但是，至少应该为每个项目元素提供一个标题或描述。

作者子元素

新闻提要条目作者的电子邮件地址可以由author子元素提供。清单 8-17 显示了一个例子。

***清单 8-17。*RSS 作者

<author>info@example.com (John Smith)</author>

类别和发布子元素

item元素的category和pubDate子元素的语法与channel元素的相应子元素的语法相同(参见“0”和“0”部分)。

注释子元素

如果有一个与新闻条目(item元素)相关的论坛或博客，那么可以通过item元素的comments子元素提供到该页面的链接。清单 8-18 显示了一个例子。

***清单 8-18。*一个 RSS 条目的评论

<comments>http://example.com/blog/14352</comments>

描述子元素

项目(新闻摘要)的文本由description子元素分隔，如清单 8-19 中的所示。

***清单 8-19。*一个 RSS 项目描述

<description> Reports from workshop sessions </description>

外壳子元件

item元素的enclosure子元素可以用来描述与新闻提要条目相关的文件(通常是音频或视频)。它有三个必需的属性:url(文件的 URL)、length(以字节为单位的文件大小)和type(媒体类型)，如清单 8-20 所示。

***清单 8-20。*一个圈地

<enclosure url="http://example.com/download/words.mp3" length="4875577" type="audio/mpeg"/>

guid 子元素

每个 RSS 条目可能有一个唯一标识它的字符串，称为全局唯一标识符。guid子元素没有特定的语法规则，但是它的内容通常是一个 URL ( 清单 8-21 )。

清单 8-21。 A guid指定与新闻条目相关的永久链接

<item> <title>New HTML5 and CSS3 tutorials</title> <link>http://www.lesliesikos.com/tutorials/</link> <pubDate>Mon, 06 Feb 2012 14:22:00 +0930</pubDate> <dc:creator>Dr. Leslie Sikos</dc:creator> <category>Website</category> ** <guid isPermaLink="true">http://www.lesliesikos.com/tutorials/</guid>** <description>Tutorials on HTML5 video embedding and CSS3 transitions</description> <content:encoded>Several tutorials have recently been published on emerging ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) technologies such as HTML5 video embedding and CSS3 transitions.</content:encoded> </item>

guid子元素有一个可选属性isPermaLink，可以设置为true或false。在第一种情况下(这是默认的)，属性值必须是一个 URL，指向由item元素描述的完整文章或故事。很少使用false值。事实上，整个isPermaLink属性经常被省略。

images 注意guid子元素，如果提供的话，在整个 RSS 文件中应该是唯一的。如果在文件中多次描述了同一网站的频繁更新，则可能很难满足此标准。

RSS 阅读器将guid子元素的值视为一个字符串。

images 提示虽然guid子元素是可选的，但是为了最大化互操作性，建议为所有的item元素都提供这个子元素。

链接子元素

项目的 URL 可以由link子元素提供。清单 8-22 显示了一个例子。

***清单 8-22。*为 RSS 项目声明的链接

<link>http://example.com/news</link>

源子元素

如果条目内容来自外部 RSS 频道，它可以由source子元素提供。该值是资源通道的标题。source元素有一个必需的属性url，它是资源的 URL(清单 8-23 )。

***清单 8-23。*一个 RSS 条目的来源

<source url="http://www.example.com/news.xml">John Smith Headlines</source>

标题子元素

RSS 频道项目的标题可以由item元素的title子元素声明。清单 8-24 显示了一个例子。

***清单 8-24。*一个 RSS 条目的标题

<title>A new W3C standard</title>

名称空间

RSS 的默认名称空间是[purl.org/rss/1.0/](http://purl.org/rss/1.0/)，它是 RDF Site Summary (RSS) 1.0 名称空间[web.resource.org/rss/1.0/](http://web.resource.org/rss/1.0/)的永久 URL 形式。名称空间可以以清单 8-25 中的形式提供。

***清单 8-25。*声明 RSS 名称空间

<rss version="2.0" xmlns:rss="http://purl.org/rss/1.0/">

关于频道更新的附加数据可以由 RSS ( [purl.org/rss/1.0/modules/syndication/](http://purl.org/rss/1.0/modules/syndication/))的网络联合命名空间提供。它用三个元素扩展了 RSS 频道:

新闻频道更新的周期可以用sy:updatePeriod元素来描述。允许的值有hourly、daily、weekly、monthly和yearly。如果省略，则假定为daily。
更新的频率可以用sy:updateFrequency元素来表示与更新周期的关系。它的值是一个正整数。
为了计算发布时间表，可以通过sy:updateBase元素定义一个基准日期。它应该是 W3C 日期和时间格式之一的#PCDATA 日期 [16 ]。

默认情况下，新闻源条目是纯文本内容。然而，新闻聚合器通常支持 XML 中不允许的(X)HTML 标记。实体编码和 CDATA 转义的内容可以通过由[purl.org/rss/1.0/modules/content/](http://purl.org/rss/1.0/modules/content/)名称空间定义的content:encoded元素来提供。如果由link元素限定的超链接不够，并且需要额外的超链接(在新闻条目内容中)，那么content:encoded元素特别有用。尽管文本格式和其他标记代码也可以用这种方式编写，但它们被许多 RSS 阅读器忽略了。

有一个元素atom:link，它可以从另一个联合格式(Atom ¹ )中使用，以提供新闻提要频道的自链接。为了应用这个元素，应该声明 Atom 名称空间[www.w3.org/2005/Atom](http://www.w3.org/2005/Atom)。

高级新闻提要通常至少包含清单 8-26 中的名称空间声明。

***清单 8-26。*RSS 中典型的名称空间声明

`<rss version="2.0" images
**  xmlns:content="http://purl.org/rss/1.0/modules/content/"** images
**  xmlns:dc="http://purl.org/dc/elements/1.1/"** images
**  xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"** images
**  xmlns:atom="http://www.w3.org/2005/Atom"** images

`

这样做，可以在channel中使用这些名称空间中的元素，如清单 8-27 所示，或者在item元素中使用，如清单 8-28 中的示例。

***清单 8-27。*RSS 频道中来自外部名称空间的元素

**<dc:creator>**Dr. Leslie Sikos**</dc:creator>** **<sy:updatePeriod>**daily**</sy:updatePeriod>** **<sy:updateFrequency>**1**</sy:updateFrequency>** **<sy:updateBase>**2011-01-01T12:00+00:00**</sy:updateBase>** **<atom:link** href="http://www.lesliesikos.com/sikos.xml" rel="self" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) type="application/rss+xml" **/>**

***清单 8-28。*RSS 项目中来自外部名称空间的元素

**<content:encoded>**<![CDATA An escaped RSS item can contain markup elements such as ![images <a href="http://www.example.com/">hyperlinks</a> that work in all major news feed ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) readers. ]]>**</content:encoded>**

设计 RSS 源

支持新闻提要的浏览器通常提供基本样式或者根本不提供样式(而是呈现树结构)。对此不满意或者想要确保高级外观(在所有浏览器中也是相似的)的开发人员可以使用 CSS 或 XSLT 格式化 RSS 频道。

在第一种情况下，需要一个 CSS 引用，如清单 8-29 中的所示。

***清单 8-29。*使用 CSS 文件对 RSS 进行样式化

<?xml version="1.0" encoding="utf-8" ?> **<?xml-stylesheet type="text/css" href="css/feed.css" ?>** <rss version="2.0">

编写 CSS 规则很简单。例如，主标题的字体大小可以通过清单 8-30 中给出的 CSS 规则来增加。

原子格式将在本章后面描述。

***清单 8-30。*设置 RSS 频道和标题的字体大小

**channel title** { font-size: 1.4em; }

可以设置文档的字体，如清单 8-31 所示。

***清单 8-31。*整个 RSS 文档的 CSS 规则

**rss** { font-family: Verdana, Helvetica, sans-serif; }

类似地，可以为其他 RSS 元素设置更多样式。许多信息不一定相关，可以省略，例如清单 8-32 中的信息。

***清单 8-32。*用 CSS 隐藏 RSS 元素

channel link, channel language, channel copyright, channel managingEditor, ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) channel webMaster, channel docs, channel lastBuildDate { ** display: none;** }

第二种方法应用 XSL 转换，这提供了更多的控制。例如，可以激活超链接，可以更改节点顺序。XSL 文件可以被链接，如清单 8-33 所示。

***清单 8-33。*使用 XSLT 对 RSS 进行样式化

<?xml version="1.0" encoding="utf-8" ?> **<?xml-stylesheet type="text/xsl" href="css/feed.xsl" ?>** <rss version="2.0">

images 注意当自定义样式表应用于新闻源时，某些浏览器的内置 RSS 阅读器提供的搜索或类别列表等附加功能将不可用。

原子

Atom 新闻提要规范由两个标准组成:Atom 联合格式和 ?? Atom 发布协议。第一种是由 IETF 提议的标准(RFC 4287 [17 ]定义的 XML 语法的 web 提要格式。第二个是基于 HTTP 的协议，可用于创建和更新 web 资源。它也是一个建议标准(RFC 5023 [18 )。本节重点介绍 Atom 联合格式。

Atom 提要的文件扩展名是.atom和.xml。Atom 的互联网媒体类型是application/atom+xml。

Atom 命名空间是[www.w3.org/2005/Atom](http://www.w3.org/2005/Atom)。

创建原子文件

Atom 文件以 XML 声明开始。Atom 文件的根元素和新闻提要条目的容器(entry元素)是feed元素。清单 8-34 显示了一个 Atom 文件的一般结构。

***清单 8-34。*原子文件的一般结构

<?xml version="1.0" encoding="utf-8"?> <feed > <title>An Atom news feed example</title> <link rel="alternate" type="text/html" href="http://www.example.com/" /> <link rel="self" type="application/atom+xml" href="http://www.example.com/News/atom.xml" /> <id>tag:www.example.com,2008-09-29://4</id> <updated>2011-08-08T08:03:00Z</updated> <entry> <title>News item 2</title> <link rel="alternate" type="text/html" href="http://www.expl.com/2011.html#entry-9167" /> <id>tag:www.expl.com,2011://4.9167</id> <published>2011-08-08T08:03:00Z</published> <updated>2011-08-08T08:03:00Z</updated> <summary>Summary of news entry 2</summary> <author> <name>John Smith</name> </author> <category term="Home Page Stories" /> <category term="Web of Services" /> <content type="html" xml:lang="en" xml:base="http://www.example.com/">The full content ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) of News #2.</content> </entry> <entry> <title>News item 1</title> <link rel="alternate" type="text/html" href="http://www.example.com/news/#entry-9165" /> <id>tag:www.example.com,2011://4.9165</id> <published>2011-08-07T08:48:00Z</published> <updated>2011-08-07T08:48:00Z</updated> <summary>Summary of news entry 1</summary> <author> <name>John Smith</name> </author> <category term="Publication" /> <category term="Web design" /> <category term="Press releases" /> <content type="html" xml:lang="en" xml:base="http://www.example.com/"> <![CDATA The full content of News #1\. In CDATA sections, ![images <a href="http://example.com/markup/">markup code</a> can also be included. ]]> </content> </entry> </feed>

这些元素和属性将在下面的章节中详细描述。

文本构造

Atom 的文本构造包含语言敏感的、人类可读的文本。文本构造的一个可选属性是type属性。如果提供，该属性必须具有下列值之一:text、html或xhtml。如果省略，Atom feed 阅读器会将文本构造视为用默认值text指定的。MIME 类型不能声明为type属性的属性值。

人称结构

Atom 中有三个 person 构造来描述一个实体，比如一个人或一个公司:name、uri和 email。

Atom 新闻提要必须恰好包含一个提供作者姓名的name元素。元素内容是区分语言的。

uri元素是可选的，最多可以提供一个链接到作者网站的元素。元素的内容是一个国际化资源标识符(IRI)，其格式由 RFC 3987 [19 ]定义。

作者的电子邮件地址可以由可选的email元素声明，在 Atom 文件中只能使用一个这样的元素。元素的内容应该符合 RFC 2822 [20 ]定义的标准互联网消息格式。

日期结构

日期构造元素的内容应该根据 RFC 3339 [21 ]中定义的日期时间格式进行声明。日期和时间应该用大写的T分开，而当省略数字时区偏移量时，应该使用大写的Z(清单 8-35 )。

***清单 8-35。*Atom 中的一些有效时间戳

<updated>2012-12-13T08:15:01Z</updated> <updated>2012-12-13T08:15:01.25Z</updated> <updated>2012-12-13T08:15:01+01:00</updated> <updated>2012-12-13T08:15:01.25+01:00</updated>

Atom 新提要的所有日期值都应符合日期和时间表示的 ISO 标准(ISO 8601:2004 [22 ])和 W3C 日期和时间格式 [23 ]规范，以及 W3C 推荐标准“XML Schema Part 2:data types Second Edition”[24]中的 ISO 8601 公约。

容器

Atom 中有三个容器元素:

feed元素，包含整个提要
entry元素，包含一个简单的新闻条目
content元素，包含完整的故事(新闻条目的内容)

接下来的部分将详细描述这些容器。

进给元素

如前所述，Atom feeds 的顶层元素是feed；它包含新闻提要元数据和内容(所有其他 Atom 元素)。除了feed元素的所有子entry元素包含至少一个author元素之外，feed元素需要一个或多个author元素。必须为所有feed元素提供一个id元素。feed元素必须恰好包含一个updated元素。所有的feed元素只需要一个title元素。feed元素应该包含一个link元素，其rel属性值设置为self。

任意数量的category和contributor元素可以包含在feed元素中。每个feed只允许有一个generator。这同样适用于icon和logo元件。

feed元素最多可以包含一个link元素，其rel属性值设置为alternate，并且具有相同的type和hreflang属性值。除了这些link元素之外，额外的link元素可以包括在feed元素中。

每个feed元素只允许有一个rights和subtitle元素。

所有的原子元素都将在接下来的章节中描述。

条目元素

Atom 新闻可以由entry元素提供。它可以是feed元素的子元素，也可以是提要中独立的顶级元素。entry元素必须至少有一个author元素，除非在具有author元素的entry中提供了一个source元素，或者feed元素包含一个author元素。可选地，entry元素具有任意数量的category元素。entry元素可能最多有一个content元素。entry元素的另一个可选子元素是contributor。可以提供任意数量的贡献者。

entry元素必须有一个id元素。

没有content的entry元素必须至少提供一个具有rel属性和alternate属性值的link元素。

entry元素不能包含多个具有rel属性的link元素和具有完全相同类型和hreflang属性值的替代属性值。可选地，还可以为entry元件提供额外的link元件。

entry元素最多可以包含一个published、rights、source和summary元素。

如果entry包含一个具有src属性的content元素或者entry内容是 Base64 编码的，则应该为entry元素提供summary子元素。 ²

条目元素必须恰好包含一个title和一个updated元素。

内容元素

Atom 新闻内容可以由content元素提供。此元素的内容是语言敏感的。元素有两个属性:type和src。

content元素上的type属性的值可能是text、html或xhtml。如果省略，text将被 Atom 阅读器视为默认值。另一种选择是提供 MIME 媒体类型(但不是复合类型)。

content元素有一个可选的src属性。该属性的值应该是符合 RFC 3987 的国际化资源标识符。如果提供了src属性，content必须为空。type属性也应该和src属性一起提供一个 MIME 类型。

² 尽管atom:content元素的type属性是一种互联网媒体类型，但它既不是 XML 媒体类型，也不是以文本/开头或以/xml或+xml结尾。

元数据和内容元素

与 RSS 类似，Atom 中有几个元素用来表示元数据和描述新闻条目的内容，如author、category、contributor、generator、icon、id、link、logo、published、rights、source、subtitle、summary、title、updated。其规范赋予内容意义的元素和具有特殊限制的元素将在以下部分中描述。

作者元素

Atom 提要中的作者可以分为三个级别。如果author元素不是作为entry元素的子元素提供的，那么作者是从source元素的author子元素派生的。否则，由feed元素的author声明的作者被认为是(清单 8-36 )。

***清单 8-36。*声明 Atom 提要的作者

<author> <name>John Smith</name> </author>

类别元素

category元素有三个属性:必需的term和可选的scheme和label ( 清单 8-37 )。

***清单 8-37。*Atom 中的类别声明

<category term="Publication" />

属性的值是语言敏感的。属性值中使用的字符实体被视为字符，而不是标记。

贡献者元素

对条目或整个提要做出贡献的个人或公司可以用contributor元素来表示(清单 8-38 )。

***清单 8-38。*一个饲料贡献者

<contributor> <name>Alex Sikos</name> </contributor>

发电机元件

如果使用软件工具来生成 Atom 新闻提要，那么可以通过generator元素来识别。generator元素有两个可选属性。根据 RFC 3987，uri属性的值应该是一个国际化的资源标识符。另一个可选属性是代表 Atom 生成器版本的version(清单 8-39 )。

***清单 8-39。*在供料中发现了一台原子发生器

<generator uri= "http://www.sixapart.com/movabletype/" ver="4.34-en">Movable Type</generator>

图标元素

类似于uri元素的内容和generator元素的uri属性的内容，icon元素的内容也应该是符合 RFC 3987 的 IRI 引用。该元素为 Atom 新闻提要指定一个图像文件。应提供图像分辨率(清单 8-40 )。

***清单 8-40。*Atom Feed 的图标

<icon>http://example.cimg/ icon.gif</icon>

id 元素

id元素是以小写形式提供的永久标识符(清单 8-41 )。它被用作feed元素和entry元素的子元素。

***清单 8-41。*一个原子标识符

<id>tag:example.org,2003:3</id>

百分号编码，这种使用以百分号(%)、 ³ 开头的字符串对 URI 的某些字符进行编码的机制应该尽可能地消除。⁴URIs 应避免圆点。国际化资源标识符应该是 NFC 标准化的，或 NFKC 标准化的。应该保留空的片段标识符。id元素中的 URIs 区分大小写。在比较id实例时，应用百分比转义的标识符被认为不同于不应用百分比转义的标识符。

链接元素

与 Atom 条目或整个提要相关的外部超链接可以由link元素提供。这个元素有六个属性:href、rel、type、hreflang、title和length。必需的href属性包含链接的国际化资源标识符。根据 RFC 3987 的 IRI 或 isegment-nz-nc 语法规则，可选的rel属性必须有一个非空字符串作为值。允许的值有alternate、related、self、enclosure和via。可选的属性type必须有一个 MIME 媒体类型作为它的值。hreflang属性也是可选的。当提供时，它必须有一个 RFC 3066 语言标签。可选的title属性是语言敏感的。标题中使用的字符实体被认为是字符而不是标记。关于链接内容的建议长度的提示可以由可选的八位字节的length属性提供。清单 8-42 显示了一个典型的link元素。

³ 百分比编码最广为人知的一个例子是在设计拙劣的 URIs 中代替空格字符出现的%20字符串。

⁴ 如果百分比编码是必要的并且无法消除，字母应该是大写字母 A-f。

**清单 8-42。**原子中的一种link元素

<link rel="self" type="application/atom+xml" href="http://example.net/ atom.xml" />

标志元素

可以通过logo元素(清单 8-43 )提供一个图像来直观地标识您的 Atom 新闻提要。其内容是 IRI 参考(RFC 3987)。徽标图像的纵横比应为 2:1(水平对垂直)。

***清单 8-43。*一个 Atom Feed 的 Logo 图片

<logo>http://example.cimg/ icon.gif</logo>

发布的元素

新闻条目的第一个版本的编写时间可以通过published元素的日期结构来指定(清单 8-44 )。

***清单 8-44。*一个published元素

<published>2011-09-18T16:35:24Z</published>

这样的时间戳可能与条目中的updated元素的内容一致。

权利元素

自定义版权信息可以写成文本结构，并使用rights元素添加到 Atom 新闻提要中(清单 8-45 )。

***清单 8-45。*Atom 中的版权信息

源元素

如果一个entry来自外部 Atom 新闻提要，那么原始条目的元数据可以有选择地用作source元素的子元素。在所有情况下都应该保留元素author、contributor、rights和category。

子标题元素

Atom 提要可以用一个字符串来描述，该字符串作为subtitle元素的内容提供，它提供了比title元素更长的描述(清单 8-46 )。

***清单 8-46。*Atom 新闻提要的描述

<title type="text">Steven Johnson News</title> <subtitle> The news feed of poet Steven Johnson. New booklets, press releases, readings, and more. </subtitle>

摘要元素

可以用summary元素为每个 Atom 条目添加一个简短的描述(清单 8-47 )。

***清单 8-47。*一个原子条目的概要

<summary>The latest book of S. Johnson, “My Darling”, has been released.</summary>

RSS 还是 Atom？

互联网媒体类型application/rss+xml未注册，而application/atom+xml由 IANA 注册。

与仅支持 RSS 文档格式的 RSS 2.0 相比，Atom 新闻提要的 Atom 条目文档可以应用任何网络协议。因此，Atom 新闻提要的聚合和提取有了更多的可能性。

尽管 RSS 2.0 的名称空间不是 XML 名称空间，但是它可以选择包含来自外部 XML 名称空间的元素(如前所述)。Atom 1.0 的名称空间本身就是一个 XML 名称空间，也可能包含来自其他 XML 名称空间的元素和属性。这些外部元素和属性的实现由规范指南明确定义。可以得出结论，Atom 比 RSS 更具可扩展性。

RSS 不支持相对 URIs，而 Atom 重用 xml:base 属性，该属性允许相对引用。

RSS 2.0 中没有定义模式。Atom 1.0 应用了 RelaxNG 模式，这是一个非标准化的 ISO 标准 ISO/IEC 19757-2:2008[25]。它可以用来验证 Atom 新闻提要中提供的数据。可选地，可以从 RelaxNG 生成更多的模式。

实际上，大多数新闻提要阅读器都支持这两种格式。正确编写的 RSS 和 Atom 文件是格式良好的 XML 文件，可以用多种方式进行处理，并且可以使用名称空间机制进行扩展。在使用提要阅读器应用时，用户通常不会注意到这两种格式之间的区别。

总结

本章向您介绍了 RSS 和 Atom 新提要格式，以及创建符合标准的提要通道和手动维护它们所需的所有背景信息和实践，而不会中断 XML 序列化格式、RSS 或 Atom 格式要求或最高级别的互操作性。

在下一章中，您将学习如何保护网站的布局，如何在 web 上使用高级排版功能，以及如何优化图像文件以最大化用户体验。您还将学习符合标准的跨浏览器视频和多媒体嵌入技术。

参考文献

埃勒曼 C (1997)通道定义格式(CDF)。微软公司。www.w3.org/TR/NOTE-CDFsubmit.html2010 年 11 月 23 日访问
Guha RV，Bray T (eds) (1997)使用 XML 的元内容框架。www.w3.org/TR/NOTE-MCF-XML/2010 年 11 月 23 日访问
Winer D (1997)用 XML 编写新闻脚本。戴夫·维纳。scripting . com/davenet/1997/12/15/scriptingnewsinxml . html。2010 年 11 月 23 日访问
RAB (2008) RSS 0.90 规范。转自 1999 年出版的 Netscape 原始规范。RSS 咨询委员会。www.rssboard.org/rss-0-9-02010 年 11 月 23 日访问
Asman P，Cannon S，Sommo C (2010)扩展 RSS 以满足中央银行的需求。都柏林核心和元数据应用国际会议论文集。匹兹堡都柏林核心元数据倡议
Cadenhead R，Smith G，Hanna J，Kearney B (2006)应用/rss+xml 媒体类型。互联网协会。www.rssboard.org/rss-mime-type-application.txt2010 年 11 月 22 日访问
Beged-Dov G、Brickley D、Dornfest R、Davis I、Dodds L、Eisenzopf J、Galbraith D、Guha RV、MacLeod K、Miller E、Swartz A、van der Vlist E 等(2008) RDF 站点摘要(RSS) 1.0。RSS 开发工作组。web.resource.org/rss/1.0/spec2010 年 11 月 23 日访问
RAB(2008)RSS 规范的当前版本。RSS 咨询委员会。www.rssboard.org/rss-specification2010 年 11 月 23 日访问
RAB (2010)规范历史。RSS 咨询委员会。www.rssboard.org/rss-history2011 年 8 月 28 日访问
互联网名称与数字地址分配机构(2010)永久 URI 计划。互联网号码分配机构。www.iana.org/assignments/uri-schemes.html2010 年 11 月 26 日访问
Raggett D，Le Hors A，Jacobs I (eds) (1999)语言代码。在:HTML 4.01 规范。万维网联盟。www.w3.org/TR/REC-html40/struct/dirlang.html#langcodes2010 年 11 月 24 日访问
Alvestrand H (1995)用于识别语言的标签。互联网工程任务组。www.ietf.org/rfc/rfc1766.txt2010 年 11 月 24 日访问
ISO (2002) ISO 639-1:2002。国际标准化组织。www . iso . org/iso/iso _ catalogue/catalogue _ ics/catalogue _ detail _ ics . htm？csnumber=22109 。2010 年 11 月 24 日访问
ISO (2006) ISO 3166-1:2006。国际标准化组织。www . iso . org/iso/iso _ catalogue/catalogue _ TC/catalogue _ detail . htm？csnumber=39719 。2010 年 11 月 24 日访问
Crocker DH(ed)(1982)ARPA 互联网文本信息的格式标准。特拉华大学。http://asg.web.cmu.edu/rfc/rfc822.html。2010 年 11 月 24 日访问
Wolf M，Wicksteed C (1997)日期和时间格式。万维网联盟。www.w3.org/TR/NOTE-datetime2010 年 11 月 27 日访问
Nottingham M，say re R(eds)(2005)Atom 联合格式。提议的标准。互联网协会。tools.ietf.org/html/rfc42872010 年 11 月 22 日访问
格雷戈里奥 J，德霍拉 B(编辑)(2007)原子出版协议。提议的标准。互联网协会。tools.ietf.org/html/rfc50232010 年 11 月 22 日访问
Duerst M，Suignard M (2005)国际化资源标识符(IRIs)。互联网工程任务组。tools.ietf.org/html/rfc39872010 年 12 月 1 日访问
雷斯尼克 P(编辑)(2001)互联网信息格式。互联网协会。tools.ietf.org/html/rfc28222010 年 12 月 1 日访问
Klyne G，Newman C (2002)互联网上的日期和时间:时间戳。互联网协会。tools.ietf.org/html/rfc33392010 年 12 月 2 日访问
ISO (2004)数据元素和交换格式-信息交换-日期和时间的表示。ISO 8601:2004。国际标准化组织。www . iso . org/iso/iso _ catalogue/catalogue _ TC/catalogue _ detail . htm？csnumber=40874 。2010 年 12 月 2 日访问
Wolf M，Wicksteed C (1998)日期和时间格式。万维网联盟。www.w3.org/TR/NOTE-datetime2010 年 12 月 2 日访问
Biron PV，Malhotra A (eds) (2004 年)ISO 8601 公约。XML 模式第二部分:数据类型第二版。W3C 推荐。万维网联盟。www.w3.org/TR/xmlschema-2/#isoformats2010 年 12 月 2 日访问
国际标准化组织(2008)国际标准化组织/IEC 19757-2:2008。信息技术-文件模式定义语言(DSDL)-第二部分:基于常规语法的验证 RELAX NG。国际标准化组织。www . iso . org/iso/iso _ catalogue/catalogue _ TC/catalogue _ detail . htm？csnumber=52348 。2010 年 12 月 7 日访问

九、优化的外观

设计一直是网站开发中的一个重要因素，部分原因是外观决定了第一印象。如果一个网站的设计吸引眼球，访问者更有可能成为顾客或客户。Web 排版最近开始吸引注意力，尤其是通过适当的空白处理和 web 字体的引入。作为网站基本组成部分的图像应该针对 web 发布进行优化，以达到合理的质量与文件大小比率，并最大限度地减少下载时间。由于高速互联网连接已经变得普遍，对共享多媒体内容的需求已经大大增加。在 HTML5 中引入新元素之前，通用对象一直用于嵌入音频和视频内容。虽然设计和多媒体非常受欢迎，但基本的可用性原则应该始终牢记在心:功能重于设计。

在这一章中，你将学习如何创建多栏布局和固定菜单，而不用现在已经过时的方法，例如应用表格和框架的方法。这一章还描述了一个 CSS 属性，叫做z index，它提供了对一个在另一个之上的层的外观的完全控制。

直到最近，大多数网站使用一个小列表中的一种或多种字体，导致了某种单调。这些年来，有许多方法可以使用更多种类的字体，但是没有一种方法非常令人满意或可靠。现在，您可以通过声明使用字体文件来呈现文本内容来改善文本的外观，这使得使用精心选择的字体以高质量显示网页成为可能。然而，网站不仅可以包含文本。您将学习如何优化用于 web 发布的图像并嵌入多媒体文件，如 Flash 内容、音频和视频。

布局

web 内容的布局决定了整体外观，并对功能、可用性、可访问性和设计有很大的影响。Web 布局应该是可靠的，并且独立于浏览器和分辨率。

定位和浮动

一些网页组件被放置在与浏览器窗口的一个角相关的页面上，例如左上角(0, 0位置)，而其他组件的位置取决于它们的父元素(容器)的位置。有各种选项，包括相对、绝对和固定定位。除了适当的定位，您还必须小心提供独立于浏览器和分辨率的解决方案。

在您的网站上，也许某些组件应该“浮动”在网页上，内容应该出现在正文的旁边，而不是上面或下面。典型的例子是图像，它经常应用float属性将文本环绕在图像周围。

绝对和固定位置

根据设计和站点结构，某些页面组件(徽标、菜单、页眉、页脚等)应该是固定的，在页面滚动时不应移动。

CSS 规则position: fixed;与position: absolute;非常相似，但是第一个规则在用户滚动页面时阻止元素滚动，而第二个规则则不阻止。Internet Explorer 6 或更早版本不支持position: fixed;规则，这是多年来网站开发中的一个主要布局问题。为了提供类似的效果，position: fixed;没有恢复为position: absolute;，而是被认为是position: static;，这导致根本没有定位。因此，带有position: fixed;的 web 页面底部的一个层(它原本是一个页脚，在用户滚动页面时保持不变)根据旧浏览器中的 DOM 结构出现在页面上，导致不美观甚至不可用的外观。从 IE7 及更高版本或在其他浏览器中不存在该问题。

无表格网页布局

直到最近，相当数量的网站应用表示标记而不是语义代码。(X)HTML 表格已被用于安排网站内容和确保逐像素布局。这种简单快捷的“开发”也受到了 WYSIWYG 开发工具的鼓励。然而，它有许多缺点。布局依赖于表格的网站会浪费带宽，并且需要更长的下载和渲染时间。文档结构不合逻辑，使得语义数据更难或不可能检索。这些网站不可访问且难以维护。

无表格网页布局消除了使用表格进行页面布局和网页元素定位的 [1 ]。这并不意味着网页上不允许使用表格，但是表格应该专门用于表格数据。

网页组件的定位和布局可以完全由层控制，这些层在标记中表示为div元素。

以下部分描述了两种非常常见的布局类型。当然，开发人员也可以创建其他布局，但关键是任意布局都可以用div元素来描述。

多栏布局

典型的网页布局是浮动分栏 [2 ]的多栏布局。多栏网站通常在每页的顶部有一个标题。菜单通常在左边(或右边)提供。此外，页脚是每页底部经常使用的组件。通常的列数是一、二或三。图 9-1 显示了一个典型的三列布局。

images

***图 9-1。*三列布局

你可以在页面顶部看到主菜单。主菜单下面是主要内容。左边有子菜单，而右边有附加功能，如搜索框和博客条目。

集中列布局

另一种典型的排列方式是使用宽度约为 700–900 像素的中央列(??)，理想情况下不超过 800 像素，以确保主要内容在 800×600 (SVGA)的小分辨率下仍然可见。 ¹ 这类网站通常会把标题和主菜单放在最上面。或者，在主列的左侧(或右侧)可能有一个次级或子菜单。如果需要，可以在底部有一个页脚。

¹ 下一个标准分辨率为 1024×768 (XGA ),比许多具有互联网浏览功能的现代移动设备的屏幕分辨率都要高，例如上网本或具有宽屏显示的小型笔记本电脑。由于典型分辨率不断提高，最新型号可能支持 1024×600 (WSVGA)或更高的分辨率，这为 XGA 优化提供了足够的宽度。智能手机屏幕的分辨率更小，网站可以通过替换样式表为其优化，正如前面在第五章中讨论的。

水平居中页面内容有多种可能性。一种常用的方法是将属性值auto应用到容器的左右两边(图 9-2 )。CSS2 规范 [3 ]的勘误表中介绍了这种技术。清单 9-1 显示了一个例子。

***清单 9-1。*自动宽度页边距居中

#content { width: 720px; margin: 0px auto; } images

***图 9-2。*自动宽度页边距居中

该方法适用于所有支持 CSS2 的浏览器。

Simon Coggins 介绍的另一种集中内容的方法是使用偏移量和负边距。在声明了容器元素的宽度之后(类似于前面的方法)，通过绝对定位和 50%的左偏移的组合，它的左边缘在页面内水平居中。由于内容从页面的后半部分开始，因此层的左边距应该设置为层宽度的一半。例如，如果要居中的层的宽度是 780px，左边距应该设置为-390px ( 图 9-3 )。

images

***图 9-3。*负边际集中

相应的 CSS 规则集可以如清单 9-2 所示编写。

***清单 9-2。*负边际集中

#main { position:absolute; width: 780px; left: 50%; margin-left: -390px; }

对象周围的文本

在许多情况下，网页文本应该“环绕”一个对象或图像。您可以通过使用float属性来实现这种效果；换句话说，图像(或者它的容器)应该是浮动的(清单 9-3 )。

***清单 9-3。*浮动图像容器的样式

`#onleft {
float: left;
}

#onright {
float: right;
}`

图 9-4 显示了一个没有样式的图像和两个使用先前规则的浮动图像。如果没有浮动，文本不会环绕图像:只有文本的第一行出现在图像旁边(顶部照片)。第二张图片应用了清单 9-3 的第一条规则，呈现在左边，右边被文本包围。第三张图片使用了清单 9-3 中的第二条规则，因此出现在右边，而文字围绕在图片的左边。

images

***图 9-4。*漂浮的影像

由于文本将被呈现在浮动图像的右边，你应该声明边距以得到如清单 9-3 所示的最终结果。如果您想要在右侧显示一个页面的所有图像，您可以在没有标识符或类别的图像上指定float:right;规则为img { float:right; }。

如果要确保下一个段落显示在浮动图像的下面，可以使用clear属性来停止左侧(clear: right;)、右侧(clear: left;)或图像两侧(clear:both;)的浮动。

层层叠叠

网站组件也可以在虚拟空间中考虑，其中组件顺序可以由表示深度(第三维)的 CSS 属性设置。这个属性叫做z-index。它经常用于设置层顺序。值越大，元素在堆栈中的顺序越高。具有最大z-index的元素出现在页面所有其他元素之上。这个属性只作用于定位的元素(有一个position规则的元素)。例如，清单 9-4 和清单 9-5 中的规则集将带有徽标的层放在主要内容之上。

***清单 9-4。*下层(对比清单 9-5 )

#main { ** position:absolute;** width: 780px; left: 50%; margin-left: -390px; ** z-index: 1;** }

***清单 9-5。*上层(对比清单 9-4 )

#logo { ** position: absolute;** width: 146px; height: 120px; margin-top: 20px; margin-left: 20px; ** z-index: 2;** }

images 注意 Flash 内容需要一个额外的参数，允许开发人员覆盖默认设置，将 Flash 内容呈现在其他元素前面(参见“在 XHTML 中嵌入 Flash”一节)。

排版

文本一直是一个基本的 web 组件。第一个 web 文档主要包含(如果不是全部的话)白底黑字的文本。在接下来的几年里，网络逐渐转变为一个完整的多媒体平台。同时，出现了更复杂的空白处理和字符编码。

与书籍和其他印刷媒体相反，在这些媒体中，正确的字体排列和字体设计总是由排版来保证，直到最近，网络还缺乏这些功能。

在引入 TFT 显示器和为其设计的 ClearType 字体后，字符在屏幕上变得非常清晰。随着网络字体的日益流行，网络上出现了层出不穷的各种字体。

你必须小心，不仅要提供引人注目的字体和类型，还要提供清晰易读的文本。实现这一目标所需的技术被称为网页排版，它也应该保证字符和空白的正确外观。

误用字符

根据万维网联盟的说法，你应该注意在网页上使用正确的标点符号，而不是误用的对应符号(表 9-1 ) [4 )。哪些标点符号是印刷正确的取决于网页的自然语言。例如，在英式英语中，单引号通常比双引号更受欢迎，逗号通常位于右引号之外，而不是 ?? 之内。在其他语言中，引号可能会颠倒。在长破折号和短破折号的使用上也存在类似的差异。

images

在某些字体中，左引号和右引号看起来是相同的，称为直引号、竖引号或打字机引号，不应在文本流中使用。另一方面，这些字符在标记中用作属性值的分隔符。

images 提示许多文本编辑器不支持印刷(卷曲)引号，并插入它们误用的对等物。获得正确引号的一个方法是将它们插入到字处理器中(通常通过按 Shift+2)，然后通过剪贴板将字符复制到源代码中。

即使在标记中使用了正确的引号，浏览器也可能会错误地呈现它们。尽管将q标签应用于短引语是一个简单明了的想法，但是 ² 浏览器会以不同的方式呈现它。Firefox 3.6.6 正确地呈现了左引号和右引号。但是，IE8 错误地应用了字符„来开始引用(结束是正确的)。在 Safari 5 和 Opera 10.6 中，被误用的等效物"被用于渲染。然而，报价的呈现也依赖于所使用的语言，并且依赖于标记中正确的语言设置。

网页字体

最初，Web 是作为一种基于文本的媒体开发的。最初，可供 web 设计人员选择的字体仅限于所有主要平台上本地安装的字体的交集。1998 年，CSS2 规范引入了字体匹配和下载机制(在 CSS 2.1 中已被丢弃)。在 CSS3 中，可以应用外部字体，如果特定字体无法下载或没有安装在用户的计算机上，可以声明多个(相似)字体作为后备选项。然而，这项技术存在法律和技术两方面的问题。

² 如果报价跨越多行，应该用 blockquote 标签代替。

字体一般是有版权的；因此，他们的字体文件不能在网站上存储和使用。甚至那些被宣传为免费字体的字体在很多情况下也不能用于网站。自从微软在“Web 核心字体”计划下发布了标准字体包，Arial、Georgia 和 Verdana(以及其他字体)已经成为 Web 上事实上的 ?? 字体。

images 注意各种字体的字符种类千差万别。虽然大多数字体文件都支持英文字母和常用标点符号，但对于用英语以外的自然语言编写的站点来说，受支持字符的列表应该是一个主要问题。多语言网站不应应用不支持所有必需字符的字体文件，这使得不同语言版本可以应用相同的字体。避免不支持的字符的一个方法是应用 Unicode 字体。然而，并不是所有在字体收藏网站上显示为“Unicode 字体”的字体都支持真正广泛的 Unicode 字符。事实上，字体文件的大小通常为 20MB 到 25MB(相比之下，典型的字体文件大小为 50KB 到 300KB)，这对于 web 发布来说是不够的:字体文件在下载时不会出现，这比下载整个页面及其所有组件(包括图像)要花费更多的时间。

从技术角度来说，浏览器对字体嵌入和下载的支持因浏览器而异。然而，由于标准化和实现的日益普及，这种差异正在减少。从版本 4 开始，Internet Explorer 支持字体嵌入。其他浏览器推出了 TrueType (TT)和 OpenType (OT)字体的字体链接(Firefox 3.5+，Opera 10+，Safari 3.1+，Google Chrome 4.0+)。Internet Explorer 9+也支持 TT/OT 字体，但只支持那些嵌入权限设置为可安装的字体。TT 已经扩展到支持附加元数据和 gzip 压缩，称为 Web 开放字体格式(WOFF)。WOFF 是一种跨浏览器、仅用于 web 的格式，由 W3C[6 标准化，并受 Internet Explorer 9+、Mozilla Firefox 3.6+和 Google Chrome 5+支持。

images 注出现在某些字母和符号笔画末端的半结构细节在印刷术中被称为衬线。使用衬线的字体，如 Times New Roman、Cambria、Garamond 和 Georgia，称为衬线字体。没有这些小突出特征的字体是无衬线字体、 ³ 例如，Verdana、Tahoma 和 Helvetica。声明一个通用字体系列(serif、sans-serif、草书、fantasy、monospace)是一个很好的后备机制 [ 7 ]。

sans 这个词在法语中是“没有”的意思。

两种不同的字体(或者两种不同格式的同一个字体 ⁴ )可以用回退机制声明，如清单 9-6 所示，也可以如清单 9-7 所示应用。

***清单 9-6。*使用不同格式存储的字体

@font-face { font-family: "Csuff"; src: url("http://example.com/fonts/csuff.ttf"); src: url("http://example.com/fonts/csuff.eot"); }

***清单 9-7。*应用带有回退机制的网络字体

p { font-family: "Csuff", "Helvetica", sans-serif; }

请注意，还提供了广泛可用的字体，以及始终有效的字体系列声明，以防两种外部字体都无法使用。

images 提示衬线字体易于阅读 ⁵ 适用于在网页上发布的中等或大字体的长文本块，以及打印机样式表。无衬线字体更适合小字体的短文本，例如页脚中的版权信息，通常用 Verdana 或类似的字体书写。像 Courier 和 DejaVu Sans Mono 这样的等宽字体是预格式化文本、计算机代码和打字机效果的理想选择。草书字体，如 Comic Sans MS 和 Brush Script，用于草书笔迹，如签名。幻想字体最适合用于标题和艺术文本(例如，Impact 和 Copperplate)。

字体的普通、粗体和斜体版本，以及粗体和斜体字体通常存储在单独的文件中。因此，需要多个声明来下载和应用所选字样的适当字体样式(清单 9-8 )。否则，标题和strong元素的内容将使用普通字体而不是粗体显示，em元素将使用普通字体而不是斜体显示，等等。

***清单 9-8。*同一字体的多个声明

`@font-face {
font-family: Calluna;
src: url('fonts/Calluna-Regular.otf');
}

@font-face {
font-family: Callunab;
src: url('fonts/Calluna-Bold.otf');
}

@font-face {
font-family: Callunai;
src: url('fonts/Calluna-It.otf');
}

body {
font-family: "Calluna", "Helvetica", serif;
}

h1, h2, h3, strong {
font-family: "Callunab";
}

em {
font-family: "Callunai";
}`

虽然有将字体从一种格式转换成另一种格式的工具，但在许多情况下这是法律禁止的。

这就是它们被广泛应用于书籍、报纸和杂志的原因。

网络字体也有一些替代品。一种被称为图像替换的技术，被许多人认为是合法的，被一些网页设计师用来使用字体的渲染图像。然而，图像替换阻止了文本选择，具有可搜索性和可访问性问题，并且增加了带宽使用。

另一种方法是应用基于闪存的解决方案可扩展的因曼闪存替代方案 ( sIFR )。它类似于图像替换，但文本是可选的，并呈现为矢量图形。一个很大的缺点是，这种方法依赖于客户端的 Flash 插件。

文字也可以用 SVG 或者 VML ⁶ (对于 Internet Explorer 到版本 8)用 JavaScript 替换。

在 SVG 1.1 中，可以在 SVG 文档中创建字体。SVG 字体可以改善表示文本的图形(如徽标)的语义。Safari 3+和 Opera 8+部分支持 SVG 字体。

类似于(X)HTML 文档，CSS 也可以应用在 SVG 文档中。因此，@font-face规则也可以用于 SVG 文本 [8 ]。清单 9-9 显示了一个例子。

***清单 9-9。*在 SVG 中使用@fontface CSS 规则的例子

早期版本的 Internet Explorer 不支持 SVG，而是支持矢量标记语言(VML ),现在已经过时。

嵌入外部内容

大多数网站不仅包含格式化文本，还包含图形和多媒体内容、音频和视频剪辑以及 Flash 动画。与文本文件中由标记语言描述的格式化文本内容不同，这种类型的内容是从二进制文件中检索的。尽管它的最佳格式和功能没有针对 web 发布进行标准化，但它的优化对整体外观、观感、文件大小和下载时间有着巨大的影响。

光栅图形

位图图形(也称为光栅图像)是常见的网站组件，它存储在映射的位数组中，代表像素网格。在 web 上，位图文件格式主要用于存储照片和其他非艺术线条的图像。有几个图像文件功能需要针对 Web 发布进行优化，如像素密度、颜色深度和分辨率。您应该根据内容和期望的质量来选择文件格式。

Web 图像处理和润饰的黄金法则是，无论要修改什么，都不要覆盖原始的主文件(即使文件很大)。例如，如果您不保留.psd文件，则在 Photoshop 中的多个图层上创建的复合图像中的标题以后将无法修改。同样，如果您没有存储原始文件，经过大量修饰或压缩的照片也无法恢复到原始状态(这在许多情况下可能很有用)。

images 注以下章节描述了主要特点和可能性；然而，图像处理的详细描述超出了本书的范围。

像素密度

不仅仅是文本内容，图形也可以而且应该针对网络发布进行优化。空间点密度的度量是每英寸点数(dpi)，这意味着在 1 英寸(2.54 厘米)的跨度内，一条线上代表的单个点的数量。虽然点密度与图像分辨率相关，但它是间接相关的。然而，代替用于打印的点，计算机屏幕应用像素来构建图像。它们的密度可以用每英寸像素(ppi)来表示。虽然令人困惑，但计算机屏幕的标准化像素密度通常以 dpi 而不是 ppi (72、96 和 120 dpi)表示是不正确的。最低值 72 ppi 来自印刷字体，其中 1 磅被定义为 1/72 英寸(0.0139 英寸或 352.8 米)。在 72 ppi 屏幕上显示的图像与 72 dpi 的打印版本具有相同的物理尺寸；换句话说，纸上的 1 pt 等于屏幕上的 1 px。然而，这只是一种理论方法；并不准确，也失去了意义。由于像素密度不仅影响图像渲染的质量，也影响文本的可读性，较高的值为提供了更好的用户体验。现代操作系统和计算机屏幕通常支持 96–120 PPI。屏幕的像素密度可以通过以像素为单位的对角线分辨率(使用勾股定理)和以英寸为单位的对角线尺寸的比值来计算:

images

在哪里

d_p以像素为单位的对角线分辨率，

w_p是以像素为单位的宽度分辨率，

h_p是以像素为单位的高度分辨率，并且

d_I是以英寸为单位的对角线尺寸。

例如，一台配备 WSVGA (1024x600)屏幕的 10.1 英寸上网本提供 117.51 ppi，一台配备 WSXGA+ (1680x1050)屏幕的 20 英寸显示器提供 99.06 ppi，一台 23 英寸高清(1920x1080)显示器提供 95.78 ppi。

智能手机从这方面来说很有竞争力。4.3 英寸的 HTC Evo 4G 拥有 WVGA (800x480)屏幕，对应的像素密度为 216 ppi。2010 年，苹果 iPhone 4 采用了最大分辨率的屏幕，称为视网膜显示屏 (960x640)，这为 3.5 英寸的屏幕提供了令人难以置信的 326 ppi ⁷ 。截至 2011 年，高端智能手机推出了分辨率为 1280x720 的高清显示屏，典型屏幕尺寸为 4.3 英寸，像素密度甚至更高。

虽然 web 发布的最佳像素密度还没有标准化，但应该考虑到计算机屏幕和设置通常最大支持 120 ppi，平均应用 96 ppi。较大的像素密度会不必要地增加文件大小。

分辨率

在屏幕上，分辨率决定图像大小，而不是一般的质量(打印则相反)。作为一般规则，应该应用提供所需细节的最小图像尺寸。在大多数情况下，现代数码相机拍摄的 8-10 MP 照片应该调整到较小的分辨率，以便在网络上发布。应该记住的是，高分辨率的照片体积很大(根据压缩比和文件格式，可能有几兆字节)，因此下载时间太长。此外，他们有太多的细节，可能会导致法律问题，考虑到背景中的人脸、车牌等等。人脸的高分辨率描绘可以用于欺诈目的，因为它可以很容易地修饰和打印(特别是在护照尺寸上)。

强烈建议在img元素上提供width和height属性，以便更快地呈现网页图像。但是，这些属性不应该用于调整照片的大小。在线画廊和相册应该应用链接到原始或全尺寸版本图像的小缩略图。

在距离人眼 12 英寸的距离，这是人类视网膜能够处理的最大细节量(因此得名)。

走样

调整数字图像的大小会导致失真和质量下降。例如，以较低分辨率呈现的高分辨率图像可能会导致称为混叠的失真伪像。抗锯齿允许物体的边缘被平滑渲染。在 web 上，抗锯齿通常应用于字体和弯曲的 Web 图形，如圆角。

抗锯齿需要与背景融合的强度逐渐降低的额外颜色(图 9-5 )。

images

***图 9-5。*锯齿与反锯齿字体和圆圈。上面是原始图像，下面是放大图。注意左边图像的像素化边缘。

在网络上使用抗锯齿字体有利也有弊。最重要的优势是更平滑的字体，其中许多更容易阅读，因为减少了模糊，与印刷类型相似(取决于所使用的字体)，并且在许多情况下更美观。然而，小字体变得太模糊而无法阅读，而且锐利的边缘也不总是精确的。

images 注意不同网页字体的可读性差别很大，甚至同样的字体在中等大小时看起来很漂亮，但用小字体时就变得不可读了。这两种状态之间通常会有一个过渡:字体曲线的某些部分会消失，而其他部分仍然可见。而且同样的网页字体在各种浏览器中的渲染也是不一样的。

颜色深度

在位图图像或视频帧缓冲区中表示单个像素的颜色所需的位数通常从 1 到 2 不等 ³² ，被称为色深。因此，颜色深度越高，文件越大，这是图像优化的一个重要因素。

单色(二进制)图像(如带有黑线的艺术线条)应以 1 位色深存储，换句话说，每个像素有两个可能的值。

完全由 256 种灰度组成的黑白照片应该表示为 8 位灰度图像(2 ⁸ = 256)。

24 位色深(真彩色)应用每通道0和255之间的各种强度值的红色、绿色和蓝色(RGB 颜色模型)，以通过加色混合再现 2⁸2⁸2⁸= 2²⁴= 16，777，216 种不同的颜色。因为人眼不能区分这些通道的任何两个相邻强度值，所以这个色深足以存储照片。

具有部分透明部分的照片级真实感图像可以用 32 位表示，并带有一个称为 alpha 通道 ⁸ (即 RGBA 色彩空间)的附加通道。

徽标、象形图和图标的颜色深度会有所不同，这取决于复杂性和图像内容。

压缩

为了减小文件大小，数字位图图像通常被压缩。由于所需带宽较小，压缩图像不仅在存储方面很受欢迎，在网络发布方面也很受欢迎。

图像压缩可以是有损的或无损的。在有损压缩的情况下，部分原始信息丢失且无法恢复，可能会影响图像质量。无损压缩算法允许从压缩数据中重建原始数据，这是一个很好的功能，但并不总是需要。有损压缩算法产生的文件通常比使用无损压缩的文件小；但是，如果压缩比过高，它们的质量可能会降低。如您所见，JPEG 是最流行的有损图像格式，PNG 是网络上最流行的无损图像格式。

图像处理软件工具通常提供调整压缩程度的选项，使得在存储大小和图像质量之间进行权衡成为可能。例如，Adobe Photoshop 有一个 JPEG 压缩比的标度，其值为0–12。支持的质量范围有Low(0–4)Medium(5–7)High(8–9)Maximum(10–12)。在文件另存为…对话框中确定文件的名称和目的地后，这些设置才可用(图 9-6 )。

还有其他方法来提供透明度，但对于部分透明的照片，这是常见的解决方案。

images

***图 9-6。*文件小质量好

JPEG 通常可实现 10:1 的压缩，图像质量几乎没有损失。

隔行扫描

某些位图格式(如 GIF 和 PNG)可以在图像完全下载之前提供图像的降级副本。这种方法被称为交错。先进的图像处理软件应用支持隔行扫描，并提供将这些文件保存为隔行扫描或非隔行扫描的选择。通过在渐进式 JPEG 文件中应用频率分解层级，可以在照片中实现类似的效果。在慢速拨号连接的时代，交错是一个有用的功能，但在高速互联网连接广泛应用后，它失去了大部分的意义。

透明度

部分透明的图像越来越受欢迎。它们不仅可用于设计效果，还可提供可用于不同背景颜色或纹理的图像(图 9-7 )。

images

***图 9-7。*三个不同背景上的图像(第一行)。第二行放大到 600%。透明阴影完全适合所有背景

然而，并不是所有的光栅图像格式都支持透明。对于部分透明的几何形状和卡通风格的图像，GIF 通常是一个好的(有时是最好的)选择，而 PNG 则是更复杂的部分透明图像的理想选择。除了具有相对较大的相同颜色区域的非常简单的形状之外，PNG 是更好的选择。

光栅文件格式

网络上最常见的光栅图像文件格式是 JPEG、GIF 和 PNG。

联合图像专家组(JPEG)是一种常见的数字照片有损压缩格式。第一部分已在 ISO/IEC 10918-1:1994 [9 ]和 ITU-T T.81 (09/92) [10 ]、ISO/IEC 10918-2:1995[11]和 ITU-T T.83 (11/94) [12 ]、ISO/IEC 10918-3:1997[13]和 ITU-T T . 84(07/96)[14]中标准化

图形交换格式的原始版本 GIF87a 于 1987 年 [18 ]推出，支持透明和隔行扫描的增强版本 GIF89a 于 1989 年 [19 ]推出。

可移植网络图形(PNG)格式由 IETF RFC 2083 在 1997 年 [20 ]和 ISO/IEC 15948 在 2004 年 [21 进行标准化。然而，PNG 格式直到最近才获得完全支持。尽管 Internet Explorer 从 4.01b 版开始支持 PNG 图像，但直到 IE9，这种实现既不完整也不正确(例如，IE6 对 alpha 通道透明性的支持有缺陷)。各种浏览器之间的颜色不一致，部分原因是伽玛校正的处理方式不同(例如，在 Windows 下运行的 Safari 上，PNG 图像的颜色显示不正确)。幸运的是，现代浏览器克服了这些问题。

为给定图像选择正确的文件格式，应考虑文件类型和压缩算法的主要特征(表 9-2 )。

例如，与 JPEG 等其他格式相比，简单的图像(如实心圆)可以用两种颜色存储在 GIF 中，文件大小非常小。对于没有复杂内容的图像，可以使用 GIF、TIF 和 PNG 等文件格式的调色板(选定/索引颜色)来降低颜色深度。当然，抗锯齿版本需要更大的颜色深度，从而导致更大的文件大小。尽管 GIF 和 PNG 格式通常比 JPEG 更适合存储图标和徽标，但对于此类内容，应该首选 SVG 矢量格式(参见“矢量图形”一节)。

尽管 JPEG 压缩算法对照片非常有效，但它会向整个图像添加额外的像素，包括实心区域。结果，简单的图像变得比原来更复杂。这就是为什么以 JPEG 格式存储的实心圆，即使压缩率很高，其文件大小也比相同内容的 GIF 文件大几倍的主要原因。此外，如果压缩比高，JPEG 伪像会变得明显，从而导致图像质量降低。另一方面，JPEG 可以完美地处理复杂的图像。如果压缩设置正确，图像质量与文件大小的比率非常好。

文件大小优化

像素密度、分辨率、尺寸、颜色深度、压缩比、图像复杂性和文件格式都对文件大小有很大影响。

有一个叫做动画可移植网络图形(APNG)的扩展支持动画。APNG 由 Firefox 3+，Opera 9.5+和谷歌 Chrome 的插件提供原生支持。

应该通过裁剪图像中无用或不必要的部分来优化宽度和高度。对于扫描的高分辨率图像，这是一项典型的任务，在这种情况下，通常可以删除图像部分而不会丢失信息。

必须使用所需的颜色深度；24 位色深是许多软件工具中的默认设置，在许多情况下可以在不影响图像质量的情况下降低色深。例如，黑白绘图不应存储 1600 万色。

所有图像都必须使用合适的压缩比。

使用 Photoshop 的文件保存为 Web & Devices…功能(图 9-8 )可以有效优化大小质量比。

images

***图 9-8。*Photoshop 中网页发布的文件格式和设置比较

Photoshop 还提供对所需文件大小的优化，但应该记住，图像内容和复杂性决定了合理的压缩级别。

除了 Photoshop 或 GIMP 中可用的 JPEG 文件的压缩设置之外，一些软件工具(如 JPEG Optimizer [22 ])能够通过对各种图像区域应用不同的压缩比来优化文件大小与质量的比率。

文件大小优化的主要目的是实现文件大小和图片质量之间的完美平衡。一个包含低质量图片的快速网页是没有意义的。

小的、高度压缩的版本(缩略图)应该提供到在线照片图库和相册中更大的、高质量版本的链接。这种方法允许用户确定图像是否与他们相关，因此，下载更大的版本是合理的，这自然会花费更多的时间。

矢量图形

矢量图像和位图图像有不同的应用领域。位图最适合于照片和照片级真实图像，而矢量图像可以应用于由直线和曲线组成的艺术品和插图。尽管如此，位图仍然在 Web 上广泛用于各种图像，包括应该以矢量格式提供的图像，部分原因是缺乏对所有主流浏览器的单一标准矢量格式的本地支持。在圣文森特和格林纳丁斯的广泛支持下，这种情况已经开始改变。

可缩放矢量图形应优先用于所有需要基本形状的图像，如圆形和多边形、贝塞尔路径和曲线、文本、不透明度、变换(旋转、倾斜、缩放等)、 ¹⁰ 渐变和动画。SVG 内容也可以与位图图形结合，例如与 PNG 文件结合。

和 PNG 类似，为了向后兼容，也要考虑 SVG 的浏览器支持。应该记住，浏览器对 SVG 的支持与内联 SVG 不同，SVG 应该通过img或object元素嵌入。此外，SVG 有几个版本，对不同版本的支持也各不相同。Gecko 布局引擎自 2005 年以来一直没有完整的 SVG 1.1 支持，自 2006 年以来一直没有完整的 WebKit 支持。Opera 从版本 8 开始支持 SVG 1.1 Tiny，从版本 9 开始支持 SVG 1.1 Basic 和部分 SVG 1.1 Full，从版本 9.5 开始支持部分 SVG Tiny 1.2(包括压缩 SVG)。

闪光

Flash 是在 Web 上发布活动内容的最流行的技术之一。然而，Flash 开发工具提供的标准嵌入代码通常不符合标准，并且存在一些与浏览器相关的问题。此外，如果 Flash 内容由于任何原因无法显示，则应支持自动激活的替代内容。

在 XHTML 中嵌入 Flash

第一个 Flash 实现应用了embed元素，该元素在 HTML 4 和 XHTML 中被弃用，取而代之的是object元素，但后来又被重新添加到 HTML 5 规范中(见下一节)。因此，在 XHTML 文档中，Flash 内容应该由object元素提供。

为了避免特定于浏览器和供应商的代码，已经引入了各种实现方法，包括复制(两次烹饪的方法*)、嵌套对象方法和闪存数据格式*。后者，即闪存 Satay，通过包含一个额外的movie参数，提供了健壮的、符合标准的闪存实现。W3C 也建议这种方法 [23 ]。清单 9-10 显示了一个例子。**

**______________

CSS3 也支持类似的效果。

***清单 9-10。*利用 Flash Satay 嵌入 Flash

<object type="application/x-shockwave-flash" **data="australia.swf"** width="735" height="677" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) id="flash"> <param **name="movie" value="australia.swf"** /> </object>

注意，同一个 Flash 文件既被指定为object元素上的data属性值，又被指定为movie参数值。同样重要的是要认识到，旧方法使用的classid和codebase参数已经被取消。如果在修改传统 Flash 嵌入代码时将codebase参数留在代码中，它会阻止 Firefox 呈现 Flash 内容，而显示可选提供的替代内容(或者什么也不显示)。

然而，即使这种方法也有一些已知的问题。例如，使用 Flash Satay 方法，某些浏览器(如 Internet Explorer)不会流式播放 Flash 电影。等待整个文件下载完毕，然后开始播放，这种方法只适用于小文件和快速互联网连接。

如果您开发一个网页，各层之间相互重叠，那么默认情况下 Flash 内容会出现在所有其他网站元素的上方，这可能会非常令人沮丧。为了提供在包含 Flash 内容的页面中设置层顺序的可能性，应该设置一个附加参数(wmode)(清单 9-11 和 9-12 )。

***清单 9-11。*设置不透明 Flash 内容的wmode

<param name="wmode" value="opaque" />

参数值opaque表示内容不透明。如果是透明的，属性值应该改为transparent ( 清单 9-12 )。

***清单 9-12。*设置透明闪光内容的wmode

<param name="wmode" value="transparent" />

虽然 Flash 内容的透明度和 Flash 内容在图层顺序中的堆栈位置之间似乎没有关联，但是应该使用wmode参数来设置这两者。在wmode参数上使用了opaque或transparent属性值；Flash 内容可以发送到网页中的任何层之后(或在层顺序中的任何所需位置)。与wmode相关的唯一问题是 Flash 内容对于使用屏幕阅读器的用户来说变得不可访问，因此最好尽可能避免。

类似于(X)HTML 标记，Flash 内容应该是可访问的和搜索引擎友好的。应该检测用户安装的 Flash 插件的版本，以确定它是否是最新的。过时的插件可能会遇到只有更高版本的插件才支持的功能。这应该被认为是为了消除破碎和缺失的内容。

至于版本困境，Adobe 提供了 Flash Player 检测套件[24；然而，该套件提供的代码不符合标准。

DOM 脚本可以解决这些问题。一个开放源代码的例子是 Geoff Stearns 等人的 SWFObject 。SWFObject 提供了一种跨浏览器的方法，使用非常小的 JavaScript 代码将 SWF 文件嵌入到网页中。这段 JavaScript 代码检测 Flash Player、声明替代内容、改进搜索引擎索引、帮助 Flash Player 下载(如果没有安装的话)、包括 Adobe Express Install 并为 JavaScript 开发人员提供一个 API。然而，使用 JavaScript 的版本检测依赖于脚本，导致更长的代码，并且使 Flash 嵌入过于复杂。作为结论，没有比 Flash Satay 更好的符合标准、跨浏览器的 Flash 嵌入方法了。

在(X)HTML5 中嵌入 Flash

HTML5 有一个embed元素，用于需要插件的嵌入内容。它支持 HTML5 的所有标准属性和事件属性。此外，它还具有特定的属性src、type(指定 MIME 类型)、height和width。你可以像清单 9-13 中的那样使用它。

***清单 9-13。*嵌入在(X)HTML5 中的基本 Flash】

<embed src="australia.swf" />

embed标签还支持 HTML5 的全局和事件属性，这已经在第三章中讨论过了。

音频

在 HTML5 之前，从来没有对在网页上播放音频的原生标记支持。大多数音频内容都是通过 Flash 等插件播放的。这种方法的主要问题是，并非所有的浏览器都有相同的插件。

HTML5 指定了通过audio元素包含音频内容的标准方式。它可以用来播放声音文件以及音频流。元素支持三种主要的音频格式:MP3、Ogg Vorbis 和 WAV。然而，浏览器对这些格式的支持各不相同(表 9-3 )。注意在 IE8 和更早的版本中根本不支持audio元素。

images

元素的基本用法很简单(清单 9-14 )。

***清单 9-14。*基本音频嵌入(X)HTML5

<audio src="valerie.mp3"> </audio>

除了指定要播放的音频内容的源 URL 的src属性之外，还有用于自动播放(autoplay="autoplay")、控制按钮(controls="controls")、重复播放(loop="loop")和在页面加载时加载(preload="preload")的其他属性。如果autoplay存在，则最后一个被忽略。

为了实现更高级别的可访问性，应该提供替代内容(清单 9-15 )。

***清单 9-15。*音频替代内容

<audio src="valerie.mp3" controls="controls"> <p><a href="valerie.mp3">Valerie by Joy</a></p> </audio>

由于浏览器支持的某些格式不能在另一种浏览器中播放，audio元素允许链接到不同音频文件的多个源声明。清单 9-16 显示了一个例子。

***清单 9-16。*不同格式的多源申报

<audio controls="controls"> ** <source src="valerie.mp3" type="audio/mpeg" />** ** <source src="valerie.ogg" type="audio/ogg" />** <p><a href="valerie.mp3">Valerie by Joy</a></p> </audio>

浏览器可以播放不同音频格式中第一个支持的格式。

视频

多年来，发布视频只能通过通用对象嵌入来实现。由于各种视频和音频编解码器以及不同的浏览器支持，仍然没有在 Web 上发布视频的最终解决方案。

在 XHTML 中嵌入视频

YouTube 或 Google Video 等视频共享服务通过 Flash Player、播放电影，其中的内容可以使用前面讨论过的 Flash Satay 方法嵌入。清单 9-17 显示了一个例子。

***清单 9-17。*使用 Flash Satay 嵌入 Flash Sdeo】

窗口媒体视频文件(.wmv)可以通过使用 MIME 类型video/x-ms-wmv ( 清单 9-18 )来嵌入。

Adobe Flash Player 广泛用于在网站上嵌入视频，因为许多浏览器都提供了原生支持。

***清单 9-18。*嵌入 WMV 视频文件

<object type="video/x-ms-wmv" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) data="http://www.example.com/dreamcar.wmv" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) width="320" height="260"> <param name="src" value="http://www.example.com/dreamcar.wmv" /> <param name="autostart" value="true" /> <param name="controller" value="true" /> </object>

对于 QuickTime 视频，有专门的 MIME 类型:video/quicktime和application/x-quicktime。IE 倾向于通过 ActiveX 控件打开这样的视频。为了以独立于浏览器的方式嵌入 QuickTime 视频，你可以使用列表 9-19 中的方法。

***清单 9-19。*嵌入一个 QuickTime 视频文件

作为 IE 风格的条件注释 ¹² 提供的代码被除了 Internet Explorer 之外的所有浏览器使用，在 Internet Explorer 中它被隐藏并应用外部对象。

在(X)HTML5 中嵌入视频

与使用 XHTML 中的object元素嵌入视频的复杂性相反，(X)HTML5 提供了video元素，它易于使用，并且对嵌入的视频具有完全的控制权。IE9+、Firefox 3.5+、Chrome 3.0+、Opera 10.5+和 Safari 3.0+都支持video元素。但是，其可用性还取决于支持的编解码器。如果你只是从大量的视频文件格式中想到 DivX、Xvid、WMV、FFmpeg、3ivx、索伦森或 Flash Video，web 浏览器的视频编解码器支持无疑还处于初级阶段(表 9-4 )。

这个方法是由拉克伦·亨特提出的。

当然，没有必要最大化 Web 上本地支持的视频格式的数量，但是对最广泛使用的高级格式的可靠支持将是可取的。

images 注意许多视频文件都是以容器格式存储的，并不局限于一种视频和音频编解码器。因此，对视频容器的完全支持应该包括对该容器格式中允许的所有类型的视频和音频编解码器的支持。例如，如果浏览器供应商希望引入对.flv Flash 视频的支持，则需要支持 H.264/MPEG-4 AVC、Sorenson、Screen Video 和 VP6 视频编解码器，以及 AAC、ADPCM、Linear PCM、Nellymoser、MP3 和 Speex 音频编解码器。此外，许多编解码器拥有专有许可证或受到专利的阻碍(这是 Chrome 放弃 H.264 支持的主要原因)。显然，音频和视频编解码器的不同关联以及许可问题使得在 Web 上标准化视频实现变得相当复杂。不同的格式适合不同的用途和应用领域，视频发布没有终极选择:看场景而定。

清单 9-20 显示了video元素的基本代码。

***清单 9-20。*基本视频嵌入(X)HTML5

<video src="sample.ogv"> </video>

可以随意添加高度或宽度等特征。在视频无法呈现的情况下，也可以定义表示视频中的一帧的图像。此外，在开始和结束的video标签之间也可以给出替换内容(清单 9-21 )。

清单 9-21。(X)html 5 视频嵌入的附加属性和替代内容

<video src="sample.ogv" width="320" height="240" poster="sample.jpg"> ** <p>Download the <a href="video.ogv">sample video</a> (OGV, 5.34 MB)</p>** </video>

通过使用video元素上的controls属性，可以在浏览器中显示或隐藏视频控件(清单 9-22 )。

***清单 9-22。*为(X)HTML5 视频嵌入设置显示的控件

<video src="xyz.mov" **controls="controls"**> </video>

由于每个浏览器中的视频编解码器支持不同，因此可以以各种格式提供相同的视频，从而避免了下载无法在系统上播放的视频的需要。清单 9-23 显示了一个例子。

***清单 9-23。*不同格式的相同视频

<video> ** <source src="video.mp4" type="video/mp4" />** ** <source src="video.ogv" type="video/ogg" />** <p>Download the <a href="video.ogv">sample video</a> (OGV)</p> </video>

但是，MIME 类型不能反映以容器格式存储的视频的编解码器(例如，MPEG-4 中的 H.264)。它们可以由codecs参数提供(清单 9-24 )。

***清单 9-24。*在(X)HTML5 中声明视频编解码器

<video controls="controls"> <source src="video.mp4" **type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'** /> <source src="video.ogv" **type='video/ogg; codecs="theora, vorbis"'** /> <p>Download the <a href="video.ogv">sample video</a></p> </video>

必须注意对type属性值交替使用单引号和双引号。

(X)HTML5 的video元素提供回放支持检测，包括media元素上的canPlayType()方法或onerror事件监听器。清单 9-25 是第二种方法的一个例子。

***清单 9-25。*视频背板支持(X)HTML5 中的检测

<video controls="controls"> <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"' ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) ** onerror="fallback(this.parentNode)**" /> <p>Download the <a href="video.ogv">sample video</a> (OGV)</p> </video>

主要问题是浏览器中的视频支持还没有标准化。因此，不存在最终的跨浏览器视频嵌入代码。

尽管video元素的主要优点之一是避免了object元素和插件声明，但它们在某些情况下仍然有用。如果插件优于简单的错误消息，那么可以将object元素嵌入到video元素中。Flash 支持 MPEG-4/H.264/AAC 播放，所以一个.mp4文件通常可以用清单 9-26 中给出的代码播放。

清单 9-26。 MPEG-4 背板

<video controls="controls"> <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) onerror="fallback(this.parentNode)" /> <object data="videoplayer.swf"> <param name="flashvars" value="video.mp4" /> <p>Download the <a href="video.ogv">sample video</a> (OGV)</p> </object> </video>

某些浏览器无法播放视频或自动下载整个视频文件，即使播放尚未开始。Firefox 3.6+是一个例外，它只下载确定持续时间和渲染视频帧所需的片段。这个行为可以被preload属性覆盖。属性值none强制浏览器避免下载。metadata属性值暗示应该下载足够的数据来显示一帧并确定持续时间。值auto如果可能的话下载整个视频。通过省略仅在用户点击按钮时才提供的属性和源元素，可以在不支持preload="none"的浏览器中模拟它的效果(清单 9-27 )。

**清单 9-27。**用户点击加载视频

<video controls="controls"> Video not supported </video> <input type="button" value="Load video" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) ** onclick="document.getElementsByTagName('video')[0].src = 'video.mp4';"** />

此外，自定义控件也可以添加到视频嵌入中，因为(X)HTML5 中用于视频的 DOM API 支持几个可以通过 JavaScript 处理的事件。清单 9-28 显示了一个例子。

***清单 9-28。*定制视频控件

<script> var video = document.getElementsByTagName('video')[0]; </script> <input type="button" value="Play" onclick="video.play()" /> <input type="button" value="Pause" onclick="video.pause()" />

回放可以通过video元素的autoplay属性自动开始(清单 9-29 )。

***清单 9-29。*自动开始播放视频

<video src="abc.mp4" **autoplay="autoplay"**></video>

然而，并不是所有的用户都想下载视频，一个start按钮通常是首选。此外，如果同一页面上有多个视频，自动播放是不可能的，尤其是如果至少有两个不是静音的。

目前，video标签的src属性值应该是一个物理文件，这样就无法嵌入你最喜欢的来自 YouTube 的阿斯顿马丁视频。例如，清单 9-30 中的代码不能使用。

***清单 9-30。*使用video标签无法播放 YouTube 视频(非法示例)

<video src="http://www.youtube.com/watch?v=wKhEpifPTlY"></video>

(X)HTML5 视频可以使用drawImage方法用 JavaScript 在canvas上动态绘制，如清单 9-31 所示。

***清单 9-31。*使用 JavaScript 在画布上绘制的视频

总结

在本章中，您学习了如何通过使用标准优化外观来提供高级用户体验。您已经熟悉了许多有助于用户印象并影响网站可用性和功能的网站组件。您知道确保在各种设备上的正确外观是一个真正的挑战，这可以通过创建具有健壮布局的独立于浏览器和分辨率的网站来实现。您很清楚，许多曾经流行的技术已经过时，表格应该用于表示表格数据，而不是用于布局。CSS 提供了对网站组件外观的完全控制，应该使用多列布局来代替框架集文档。您还知道如何为您的网站优化图像，并以独立于浏览器、符合标准的方式嵌入 Flash 和视频文件。

在下一章中，你将学习最大化用户访问你的网站的可访问性技术。通过遵循可访问性指南，您不仅能够支持残障人士和移动用户，还能够支持所有其他人，因为每个人都从高级别的 web 可访问性中受益。

参考文献

hazal-Massieux D(2005)无表布局指南。万维网联盟。www.w3.org/2002/03/csslayout-howto2010 年 12 月 7 日访问
Cederholm D (2009) CSS 布局。在:网络标准解决方案，特别 edn。伯克利艾德的朋友
REC-CSS2-19980512 中的 W3C (2003)勘误表。万维网联盟。www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html2010 年 12 月 14 日访问
W3C (2010)英文排版。W3C 备忘单。万维网联盟。www.w3.org/2009/cheatsheet/#typo。2010 年 12 月 7 日访问
Mason B (2009)当免费字体不再免费时。小批量公司blog . type kit . com/2009/06/11/when-free-fonts-arent-free/。2011 年 1 月 24 日访问
基尤 J，乐铭 T，范布洛克兰德 E (2011) WOFF 文件格式 1.0。万维网联盟。www.w3.org/TR/WOFF/2011 年 9 月 7 日访问
博斯 B，切利克 T，希克森 I，李 HW (2011)通用字体系列。在:级联样式表级别 2 修订版 1 (CSS 2.1)规范中。W3C 推荐。万维网联盟。www.w3.org/TR/CSS2/fonts.html#generic-font-families2011 年 9 月 8 日访问
Dahl strm E，Dengler P，Grasso A，Lilley C，McCormack C，Schepers D，Watt J，Ferraiolo J，Jun F，Jackson D (eds)的“字体-面”元素。在:可缩放矢量图形(SVG) 1.1(第二版)。W3C 推荐。万维网联盟。www.w3.org/TR/SVG/fonts.html#FontFaceElement2011 年 9 月 7 日访问
ISO (1994)信息技术-连续色调静态图像的数字压缩和编码:要求和指南。国际标准化组织/IEC 10918-1:1994。国际标准化组织。www . iso . org/iso/iso _ catalogue/catalogue _ TC/catalogue _ detail . htm？csnumber=18902 。2011 年 2 月 26 日访问
ITU-T (1992) T.81:信息技术-连续色调静态图像的数字压缩和编码-要求和指南。国际电信联盟。www.itu.int/rec/T-REC-T.812011 年 2 月 26 日访问
ISO (1995) ISO/IEC 10918-2:1995 信息技术-连续色调静态图像的数字压缩和编码:符合性测试。国际标准化组织。www . iso . org/iso/iso _ catalogue/catalogue _ TC/catalogue _ detail . htm？csnumber=20689 。2011 年 2 月 26 日访问
ITU-T (1994) T.83:信息技术-连续色调静态图像的数字压缩和编码:符合性测试。国际电信联盟。www.itu.int/rec/T-REC-T.832011 年 2 月 26 日访问
ISO (1997) ISO/IEC 10918-3:1997 信息技术-连续色调静态图像的数字压缩和编码:扩展。国际标准化组织。www . iso . org/iso/iso _ catalogue/catalogue _ TC/catalogue _ detail . htm？csnumber=25037 。2011 年 2 月 26 日访问
ITU-T (1996) T.84:信息技术-连续色调静态图像的数字压缩和编码:扩展。国际电信联盟。www.itu.int/rec/T-REC-T.842011 年 2 月 26 日访问
ISO(1999)ISO/IEC 10918-4:1999 信息技术–连续色调静态图像的数字压缩和编码:JPEG 规范、SPIFF 规范、SPIFF 标签、SPIFF 色彩空间、APPn 标记、SPIFF 压缩类型和注册机构(REGAUT)的注册。国际标准化组织。www . iso . org/iso/iso _ catalogue/catalogue _ TC/catalogue _ detail . htm？csnumber=25431 。2011 年 2 月 26 日访问
ITU-T (1998) T.86:信息技术-连续色调静态图像的数字压缩和编码:JPEG 规范、SPIFF 规范、SPIFF 标签、SPIFF 色彩空间、APPn 标记、SPIFF 压缩类型和注册机构(REGAUT)的注册。国际电信联盟。www.itu.int/rec/T-REC-T.862011 年 2 月 26 日访问
ISO (2011) ISO/IEC FDIS 10918-5 信息技术–连续色调静态图像的数字压缩和编码:JPEG 文件交换格式(JFIF)。国际标准化组织。www . iso . org/iso/iso _ catalogue/catalogue _ TC/catalogue _ detail . htm？csnumber=54989 。2011 年 2 月 26 日访问
CompuServe(1987)GIF-图形交换格式。定义基于光栅的图形信息的存储和传输机制的标准。计算机服务公司。www.w3.org/Graphics/GIF/spec-gif87.txt。2011 年 2 月 26 日访问
CompuServe (1990)图形交换格式版本 89a。计算机服务公司。www.w3.org/Graphics/GIF/spec-gif89a.txt2011 年 2 月 16 日访问
Boutell T 等人(1997) PNG(便携式网络图形)规范 1.0 版。RFC 2083。互联网工程任务组。tools.ietf.org/html/rfc20832011 年 2 月 26 日访问
ISO (2004) ISO/IEC 15948:2004 信息技术-计算机图形和图像处理-便携式网络图形(PNG):功能规范。国际标准化组织。www.iso.org/iso/catalogue_detail.htm?csnumber=295812011 年 2 月 26 日访问
xat.com(2011)JPEG 优化器:用于 Windows 的 JPEG 图像压缩器。xat.com 互联网技术。xat.com/jpegopt/2011 年 2 月 26 日访问
W3C (2010)如何在有效的(X)HTML 网页中包含 flash？在:标记验证器的帮助和常见问题中。万维网联盟。validator.w3.org/docs/help.html#faq-flash2010 年 12 月 15 日访问
Adobe (2010) Flash Player 检测工具包。Adobe 系统公司。www.adobe.com/products/flashplayer/download/detection_kit/2010 年 12 月 7 日访问
谷歌公司(2010) Swfobject。谷歌项目托管。code.google.com/p/swfobject/2010 年 12 月 7 日访问**

十、可访问性

随着 web 服务和技术的快速发展，互联网用户的数量不断增加。由于许多人遭受各种暂时或永久的残疾和缺陷，先进的 web 开发实践应该应用于提供所有人都可以访问的内容。越来越多的网页设计者和开发者意识到网页可访问性的重要性。W3C 提供了有用的指导方针来确保内容的可访问性。现代软件工具和网站中实现的可访问性支持应该明确指出，以便残障人士能够容易地识别它们。HTML5 标记还通过高级结构化元素、元数据和可访问的富互联网应用(ARIAs)支持可访问性。网页无障碍技术并不局限于视障人士或其他残障人士。事实上，它们还简化了网络内容的移动访问，提高了网页的整体质量。

在这一章中，你将学习可访问网站的标准，以及实现这些标准的技术。你将理解网页可访问性的概念，并熟悉最广泛采用的官方指南。相应的指南为残疾人提供了访问您的网站的途径，并为使用硬件功能有限的设备的人(如移动用户)改善了用户体验。即使关闭了样式表，网站的内容也应该清晰可辨，能够被屏幕阅读器有效地读出，并且能够在基于文本的浏览器(如 Lynx)中呈现。此外，支持可访问性的技术有一个很好的副作用:它们有助于网站的可用性；因此，您可以进一步提高任何网站的整体质量。

定义网络无障碍

默认情况下，包含各种组件的网站，尤其是包含非文本内容(如视频)的网站，不能被所有人使用。对于一些人来说，即使是普通的网站组件，比如文本，也很难阅读，有时甚至是不可能的。并非所有用户都能看到颜色或移动鼠标。每个人都知道，当一个网站无法运行或者其功能因为某种原因很难使用时，它是多么令人沮丧。现在想象一下，这种感觉被放大了十倍或一百倍，这就是残疾人在使用不可访问的网站时所遭受的痛苦。沮丧的程度因人而异，因为有些人生活在视觉障碍中，而另一些人生活在移动性、灵活性、听觉或认知障碍中。

越来越多的国家颁布了立法，以满足残疾人无障碍访问网站的需要或不歧视残疾人的要求。例如澳洲的 1992 年残疾歧视法*、爱尔兰的 2005 年**残疾法 2 、英国的 1995 年残疾歧视法3 或美国的 1973 年康复法第 508 条修正案 4 。*

网页可访问性涵盖了那些为每个人(包括残障人士)提供可用网页内容的网站开发实践。W3C 主任蒂姆·伯纳斯·李在 1997 年的 W3C 上宣布成立网页可访问性倡议国际项目办公室(IPO)，他对可访问性的定义如下:“网络的力量在于它的普遍性。无论是否残疾，每个人都能获得是一个重要方面"6。

虽然公共汽车台阶上色彩鲜明的对比色条带为视力受损者提供了更好的可见度，但这种条带对其他人也是有用的(例如，在光线不足的情况下或当有人赶时间时)。许多坡道不仅对坐轮椅的人有用，对带孩子的父母、滑板运动员、直排轮溜冰者或搬运重物的人也有用。同样，改进的网页内容可访问性不仅对残疾人有用，对所有普通用户也有用。例如，网页可访问性有助于提高移动浏览的用户体验，并且每个人都使用移动设备，而不仅仅是残疾人。

残障人士可以使用多种软件工具和硬件设备来浏览网页(以及使用电脑)。这种工具和设备被称为辅助技术 (AT)。

images

***图 10-1。*辅助技术的例子

根据 2010 年世界标准日的信息，全世界至少有 6 . 5 亿人受到某种残疾的影响。考虑到随着世界人口老龄化，无障碍环境的需求也在不断增长。此外，无障碍不仅仅是老年人或残疾人的问题。任何人在人生的任何阶段都可能经历暂时性的可及性降低。

与普遍的误解相反，网页可访问性的作者不仅仅关注视觉障碍。许多人有运动、行动、听觉或认知问题。网络对残疾人的重要性不亚于任何人，如果不是更重要的话。原因是网络提供了对服务和/或信息的访问，没有它就不能轻易获得这些服务和/或信息(例如在线订购)。然而，设计糟糕的网站会制造障碍，阻止人们使用网络。

万维网联盟为网页内容( WCAG )、创作工具( ATAG ) [10 )和用户代理( UAAG ) [11 )提供了可访问性指南和技术。可访问性测试结果可以用一种叫做评估语言(EARL)【12)的特殊语言来表示。

结合 HTML、JavaScript、Ajax 和其他技术开发的动态内容和高级用户界面的可访问性是由 W3C 的 Web Accessibility Initiative (WAI)发布的规范集合定义的。这个集合被称为可访问的富互联网应用套件，它包括以下文档 [13 ]:

有时也使用自适应技术这一术语。

WAI-ARIA 技术规范:针对 web 标准的作者和编辑，以及用户代理和可访问性评估工具的开发者的可访问性提示 [14
WAI-ARIA 初级读本:WAI-ARIA 的技术方法，详细描述了应用 WAI-ARIA [15 可以解决的无障碍问题
WAI-ARIA 创作实践:关于使用 WAI-ARIA 开发的可访问富互联网应用的实用指南
WAI-ARIA 用户代理实施指南:用户代理无障碍要求 17

诸如同步多媒体集成语言(SMIL)或定时文本标记语言(TTML)之类的标准也可以用来提高网站的可访问性，同步多媒体集成语言是一种用于描述多媒体演示的 XML 标记，定时文本标记语言提供与视频等媒体同步的文本。

WCAG 1.0

网站内容可访问性指南的第一个版本(WCAG 1.0)在 1999 年成为 W3C 的推荐标准，其口号是“如何使网站内容对残疾人来说是可访问的”WCAG 1.0 由 14 条指导原则组成:

必须为听觉和视觉内容提供等效的替代方案。
用颜色表达的信息必须在没有颜色的情况下也是可用的和可感知的。
必须正确应用标记和样式表。
必须声明 web 文档的自然语言。
表必须以一种优雅地转换的方式创建。
应用新技术的页面必须优雅地转变。
必须为对时间敏感的内容更改提供用户控制。
必须确保嵌入式用户界面的直接可访问性。
网站设计必须独立于设备。
必须使用临时解决方案。
必须应用 W3C 技术和指南。
必须提供关于背景和方向的信息。
导航必须易于理解。
文件必须清晰简单。

每个指导方针被细分为检查点，作为检查 WCAG 一致性的基础。他们有 65 个人。每个检查点都有一个优先级，从 1 到 3。正如您将在下一节看到的，它们非常类似于 WCAG 2.0 中引入的一致性级别。三个优先级别如下:

优先级 1 ( 参见A 级一致性):开发者必须满足这些要求，否则一个或多个组不能访问内容。
优先级 2 ( 比照AA 级(双 A 级合格):开发商应满足这些要求；否则，某些群体将很难访问这些内容。这一水平消除了重大障碍。
优先级 3 ( 参见AAA 级(AAA 级)一致性):开发人员可能会处理这些检查点，以便最大化可访问性。

WCAG 2.0

网页内容可访问性指南的第二个版本(WCAG 2.0)在 2008 年成为 W3C 的推荐标准。WCAG 2.0 可以概括为遵循四项原则的十二条指导方针 [22 ]:

原则 1:用户界面组件和发布的信息对任何人都是可感知的。

1.对于非文本内容，必须提供替代文本，以便可以将其更改为其他形式。

2.基于时间的媒体必须有替代品。

3.Web 内容必须在不丢失信息或结构的情况下通过不同的表示形式可用。

15.视觉和听觉内容必须易于区分。

原则 2:可操作的用户界面和可用的导航。

16.所有功能都必须可以通过键盘使用。

17.不能强迫用户在时间限制内执行操作。

18.必须避免可能导致癫痫发作的设计。

19.必须为用户浏览网站提供指导和帮助。

原则 3:用户界面的可理解内容和操作。

20.文本内容必须方便阅读，易于理解。

21.内容外观和操作必须是可预测的。

22.必须为用户提供帮助，以避免、发现和纠正错误。

原则 4:具有高互操作性的健壮内容，可以在任何类型的用户代理上可靠地使用，包括辅助技术。

23.必须最大限度地兼容当前和未来的用户代理和辅助技术，包括在有限资源上运行的那些 [23 ]。

这些指南包含 61 个成功标准。WCAG 2.0 的一致性可以通过应用一系列技术来实现 [24 ]。其中一些是必须满足成功标准的(足够的技术，而其他的只是可选的(咨询技术)。W3C 声称没有一种可访问性技术可以被称为必需的或强制的 [25 。它们只是推荐性的，开发者可以选择应用它们。

与拥有三个优先级的 WCAG 1.0 相比，WCAG 2.0 的成功标准分为三个合规级别。WCAG 2.0 所有级别的一致性要求在以下章节中进行了总结。通常，以下部分中的单词必须——类似于 W3C 发布的 WCAG 规范中的单词使用——对应于 A 级一致性，这是 WCAG 2.0 中最低级别的可访问性(例如，非文本内容的文本替换)。单词应该对应于 AA 级一致性(例如，直播同步媒体的字幕)。单词可以和可以对应 AAA 级符合性(例如，可选手语翻译)。

可访问性一致性级别越高，应用的要求或限制就越多。例如，准则 1.4 描述了可区分的颜色使用以及区分前景和背景的要求。为了达到 A 级，你不应该仅仅依靠颜色来传达信息。AA 级有更严格的要求，规定最低对比度为 4.5:1(大文本为 3:1)，而 AAA 级要求更高的对比度为 7:1(大文本为 4.5:1)。

请注意，有些要求是一般性的，而有些要求是特定于技术的，仅适用于某种技术，如闪存。有些技术可以单独使用，也可以与类似的技术结合使用，如简短和详细的描述，但关于其应用的相应要求取决于所需的可访问性级别。

重要的是要记住，不建议将 AAA 级一致性作为一般策略，因为由于内容的性质或特殊的技术功能和限制，有些内容类型不能以文档满足所有 AAA 标准的方式发布。换句话说，使用某些内容类型可能会将可访问性的最大可达级别限制为 WCAG 2.0 AA，而如果存在某些内容类型，则无法满足 WCAG 2.0 AAA。例如，章节标题有助于 AAA 一致性；但是，它们不能添加到所有类型的文档中(例如，一封长信 [26 ])。自然，当创建一个可访问的网站或重新设计一个不可访问的网站以使其变得可访问时，应该重新组织、添加或修改网站结构或标记元素，但是内容作者没有理由仅仅为了使网站可访问或更易访问而修改网页的文本内容。另一个例子是 Flash，在 WCAG 规范形成的时候，它就有了可访问性障碍，一般来说，同时提供 Flash 内容和实现 AAA 级一致性是不可行的。

此外，WCAG 一致性可以被限制到一个符合替代版本而不是整个网站。例如，如果网站的复杂设计使得满足 WCAG 要求变得不可行，那么仍然可以通过提供备用样式表来访问网站，或者在设计更复杂的情况下，提供网站中每个页面的备用、可访问版本。因此，确定 WCAG 一致性需要深入的站点分析，而不能通过简单地打开主页来判断。

images 注与带有标签汤和糟糕标记的文档相反，结构良好、内容编写得当、符合标准的网站默认提供基本的可访问性，可以进一步扩展以实现所需的(高级)可访问性。

场地结构要求

所有网页(不仅仅是主页)都必须有由title元素提供的描述性标题。在最理想的情况下，标识主题的页面标题是简短的，没有上下文也是合理的和可理解的。此外，它们应该是独一无二的，可以在站点中识别页面。表 10-1 显示了一个例子。

images

指向主要内容页面的超链接必须提供在站点内每个网页的顶部。

images

链接到该网站的所有其他网页必须可以直接或间接从主页。当前访问的网页和网站的其他部分之间的关系可以通过适当选择的网站组件和精心编写的元素内容(描述性 URIs、描述性标题、使用link rel提供的元数据、面包屑路径、使用标题添加的章节等)清楚地表示出来。

面包屑轨迹可被应用来帮助用户可视化内容结构，简化导航，并标识站点结构内以及当前网页内的当前位置。这可以通过显示路径中的位置或站点结构中当前网页的位置来获得。面包屑痕迹可以提供到以前访问过的网页的链接。它们被放置在每个网页中的相同位置。用于面包屑跟踪的典型分隔符有▼、►、>、|、::和/。例如，可以清楚地指示网络商店用户正在浏览屏幕尺寸等于或大于 22 英寸的 LCD 显示器，因为电子产品>计算机&配件>显示器> LCD > 22 英寸&以上(图 10-2 )。

images

***图 10-2。*面包屑路径方便导航

当前位置也可以显示在导航栏中。网站所有其他页面的列表以及相关网页的链接也可以简化导航。link元素可用于清晰地指示当前网页与网站内其他网页之间的多种关系(用rel属性的值，如Start、Next、Prev、Contents、Index)。清单 10-1 显示了一个例子。

清单 10-1 。在文档头中声明网页关系

`
Chapter 4
…

…

必须在网站上添加一个逻辑标签顺序，让用户可以轻松地浏览链接、对象和表单控件。

***清单 10-2。*为菜单、搜索框和网页 Flash 标题声明的 Tab 键顺序

`…

…

![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) Home
![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) About
![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) Services
![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) Portfolio
![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) Contact

… … `

搜索功能对所有网站都至关重要，因为它可以帮助用户找到内容。为网站提供搜索功能的一种流行方法是创建一个特定于网站的 Google 搜索字段(也显示在前面的示例中)。搜索按钮应该与搜索栏相邻。

内容部分必须以标题元素开始，以提供结构(h1–h6)。必须提供描述性的标题和标签，允许用户选择与他们相关的信息。用标题可以有效地组织页面。在(X)HTML5 中，文档介绍应该应用header元素。

内容要求

源代码中内容的顺序必须与内容的视觉呈现相一致；换句话说，DOM 顺序必须与视觉顺序相匹配。紧接在用于激活动态内容插入的元素之后插入到文档对象模型中的动态内容，通过利用用户代理的默认 tab 顺序，确保了正确的 tab 顺序(以及屏幕阅读器的正确阅读顺序)。网页内容必须按有意义的顺序排列。这也适用于交互元素。页面部分的重新排序必须通过使用 DOM 来执行。重复的组件应该总是以相同的顺序呈现。必须允许用户通过可展开和可折叠的菜单跳过重复的菜单项。闪存内容必须应用tabIndex属性，以指定逻辑读取顺序和逻辑 tab 键顺序。

用户协助

网站地图和目录也有助于访问。可以在每个网页上添加帮助链接。可以使用一个专用的帮助页面来收集对经验不足的用户有帮助但在主要内容中被忽略的信息，因为这些信息对大多数用户来说是显而易见的(也许是令人讨厌的)。此外，帮助页面可能会提供有关在 web 上不常见的特殊网站功能的信息。例如，高度可访问的网站的用户可以被告知用键盘按钮控制菜单的选项，这并不是在每个网站上都可用的。帮助也可以以助手的形式提供，他向新访问者介绍网站的功能和内容。这种助手可以是具有数字角色的动画(也称为多媒体化身)或具有真人的视频剪辑，其给出指令或服务概述或解释与公司组合相关的概念(图 10-3 )。

images

***图 10-3。*助理(真人视频剪辑)【28

保证了可读性

在最佳情况下，文本易于阅读。复杂的文本内容可以用一种形式概括，这种形式要求阅读能力不如高中教育水平高。例如，对于一些人来说，一篇技术文章可能太复杂而无法阅读，而包含较短句子和更多常用单词的文本摘要可能对他们有所帮助。为了实现 AAA 一致性，即使调整了浏览器窗口的大小，文本行平均也不能超过 80 个字符。

患有某些认知障碍的人在跟踪单倍行距时有困难，他们可能会发现 1.5-2 倍的行距更便于阅读。网页可能有按钮，通过增加行间距和段落间距来提高可读性。

***清单 10-3。*用于操作行距和段落间距的示例按钮

`…

…

…

This is the first paragraph of the main content.

This is the second paragraph of the main content.

此外，letter-spacing CSS 属性必须用于控制单词之间的间距(字符之间的空白)，这可以进一步增加可读性。最好以相对单位(%或em)提供字体大小。对于容器(如表格)的文本大小，首选em单位，其中基于百分比的字体在调整大小时可能会导致字体过大。由文本格式表示的信息，如字体、字号或文本修饰，也必须无需格式化即可访问。基本文本格式不仅适用于(X)HTML 文档，也适用于纯文本文件。文本文件必须具有代表段落、列表和标题的文本格式。

文本的视觉呈现应该用 CSS 属性来控制，如font-family、font-size、font-style、font-weight、color、letter-spacing、line-height、text-align、text-transform、、background-image以及伪类:first-line、:first-letter、:before、:after。这些属性和伪类避免了对图像文本的需要。

颜色使用

Web 内容必须是可访问的，而不具备识别位置、形状、大小或声音所需的感官感知能力。

对于有某些认知障碍的人来说，左右两边对齐的对齐文本可能很难阅读。因此，文本向一侧对齐只会提高可访问性。如果由于布局目的而不可行，则可以添加一种机制来根据请求移除完全对齐。

如果允许用户使用浏览器的默认颜色，也就是说，CSS 规则没有指定背景色、文本颜色或文本背景色，有视觉障碍的用户可以覆盖他们看不清的某些颜色。这种技术保证了背景上呈现的文本的可读性。但是可以指定容器布局和边框颜色。

可以应用允许用户改变文本部分的前景和背景颜色的跨浏览器颜色选择器解决方案。

文本-背景对比度应为 4.5:1，以实现 AA 一致性(大文本为 3:1)，而 AAA 一致性(包括文本图像)的最低对比度可能为 7:1(大文本为 4.5)。应该始终提供高对比度控件，允许用户切换到具有足够对比度的演示文稿。通过考虑亮度的差异，可以很容易地计算任意选择的颜色之间的对比度。

WCAG 2.0 规范将相对亮度定义为“色彩空间中任意点的相对亮度，对于最暗的黑色归一化为 0，对于最亮的白色归一化为 1。”在 sRGB 颜色空间的情况下，颜色的相对亮度定义为 L = 0.2126 × R + 0.7152 × G + 0.0722 × B，其中 R、G 和 B 分量定义如下 [29 ]:

images

如果你不想计算色彩对比度，有许多有用的工具可以为你检查，例如 WebAIM 色彩对比度检查器 [30 ]，Juicy Studio 的光度色彩对比度分析器 [31 ]，或 WAT-C 的光度对比度分析器 1.1[32。

用颜色表达的信息必须在没有颜色的情况下也是可用的和可感知的。当使用文本颜色差异来传达信息时，必须有额外的视觉提示。每当使用颜色线索来传达信息时，都必须添加语义标记。

添加到页面中的可选多色选择工具可以任意改变前景和背景颜色，允许用户根据个人喜好指定颜色(图 10-4 )。

images

***图 10-4。*W3C 建议的颜色选择器示例 [33 ]

信息和结构必须与表示分离，以支持不同的表示。可以为网页中主要内容的文本和背景以及组件组提供各种颜色组合。

缩写、定义和外来词

单词的完整形式可以在它们的缩略形式之前。缩写可能有一个内联扩展或解释，当它们第一次出现在网页中时，会与它们相关联。所有缩写的定义可以由abbr和acronym元素提供。定义的单词可以用dfn元素括起来。术语、缩写、首字母缩写和首字母缩略词可以链接到它们的定义，以便提供最高级别的可访问性。作为定义列表项编写的术语和短语最容易理解。它们可以通过一个由link元素提供的简单超链接收集到一个术语表页面上。或者，可以嵌入搜索功能，通过外部在线词典提供定义。除了缩写，所有以不寻常的方式或受限制的方式使用的单词或短语都可以通过定义变得更容易理解。

至少在单词第一次出现在网页中时，紧接在该单词之后提供的特殊或外来单词的发音有助于 AAA 一致性。其他实例也可以提供到发音列表的链接。

web 文档的默认语言必须在 HTTP 头中标识，并通过标记中的html元素上的lang和/或xml:lang属性来标识。这对于包含 Flash 内容的网页也很重要，因为嵌入的 Flash 对象继承了由lang和/或xml:lang属性提供的语言设置。用默认语言之外的语言编写的文档节必须在它们的包含元素上明确标识。

为了确保双向内联内容的文本方向，必须应用 Unicode 从右到左标记(&rlm;、‏或U+200F)和从左到右标记(&lrm;、‎或U+200E)。

内联内容的文本方向必须应用dir属性来清楚地指示文本方向。

在许多语言中，如阿拉伯语、希伯来语或东亚语言，文本意义很大程度上取决于发音。用这种语言编写的 Web 内容可以应用带有ruby、rt和rp元素的 Ruby 注释，以便提供关于文本片段的发音和含义的信息。

images 注很久以前，远东的教科书中就引入了红宝石注释，为学生提供有关复杂字符的提示。例如，用汉字音节表(书写系统)书写的日语文本通常包含只有至少高中毕业的日本人才知道的字符。用平假名(所有日本人都熟悉的音节表)书写的拼音文本可以使文本更清晰。类似地，繁体中文文本可以使用拼音注释以简体中文显示。

使用 Ruby，可以在 Ruby 标记(ruby元素的内容)中声明一个基本文本，以及相关联的 Ruby 文本(rt元素)，还可以选择声明 Ruby 括号(rp)，可以为不能正确呈现 Ruby 文本的浏览器声明。例如，可以为教育门户网站上的单词提供发音提示，而外国单词或不常见的名称可以音译成英语(清单 10-4 )或使用国际音标(IPA)表示(清单 10-5 )。

***清单 10-4。*东京的红宝石标注

![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U1002.jpg) <rp> (</rp> <rt>Tō kyō</rt> <rp>)</rp> </ruby>

对于简单的拼音标记，用户代理应该以大约一半的字体大小在基本文本之上呈现拼音文本。在我们的例子中，结果应该看起来像图 10-5 。

images

***图 10-5。*IE9 中呈现的单词 Tokyo 的红宝石注释

images 注意 Ruby 注释在 Internet Explorer 中呈现得最准确。

不支持 Ruby 注释的浏览器会以内联方式呈现之前的代码，而不会中断文本流(图 10-6 )。

images

图 10-6 。Ruby 注释的回退机制在起作用

***清单 10-5。*使用拼音注释的东欧名字的国际音标表示法

Count

István Széchenyi
(pronounced:
ˈiʃtvaːn ˈseːtʃeːɲi
)

was one of the greatest statesmen of Hungarian history.

清单 10-5 在兼容的浏览器中呈现，如图图 10-7 所示。

images

***图 10-7。*红宝石注释提供的发音提示

在不识别 Ruby 标记的浏览器中，同样的例子会以内联方式呈现(图 10-8 )。

images

***图 10-8。*在不支持拼音注释的浏览器中内嵌的发音提示

更复杂的 Ruby 注释不仅可以指定前面显示的默认显示和回退机制，还可以指定位置偏移、对齐、间距和突出。Ruby 注释是作为 XHTML 1.1 模块引入的，也可以在 HTML5 中使用。 ²

最易访问的文档应用标准的变音符号，允许用户根据请求打开和关闭它们。

应该应用正确选择的位置和单位，以支持浏览器的缩放和文本大小调整功能。

可访问的网站有控件，允许用户递增地改变所有文本的大小(高达 200%)。在文本容器的尺寸保持不变的情况下，当文本调整大小时，不能有内容或功能的损失。

用户界面

内容必须可以通过备用用户界面访问。必须提供正确编写的标记，以允许辅助技术理解内容、公开表单控件 id 等信息，并通过 API(例如 DOM)控制某些元素。

必须应用标准的 DOM 函数来动态地向网页添加内容，而不是脚本，脚本提供的内容不一定被屏幕阅读器读取。

images 注意屏幕阅读器可能不会自动读取动态添加的内容。动态添加的新内容的阅读可以通过将焦点设置到新元素或将其添加到用户继续浏览时将遇到的当前位置之下来确保。

所有网站都应该使用液体布局来呈现内容，而不引入不必要的水平滚动条。页面内容应该适应可用的水平空间。布局区域应根据需要使用文本和重排来调整大小，以显示页面部分。高度可访问的网站消除了水平滚动，即使用户调整了浏览器窗口的大小。实现这种简单布局的技术之一是在%中指定文本容器的宽度。如果在默认屏幕上不可行，可以提供不需要水平滚动的替代布局。

XHTML 1.1 和 HTML5 的实现是有区别的。截至 2011 年，原始规范的 rb (ruby base)元素不能在 HTML5 中使用，然而，它的重新引入仍然是一个开放的问题。清单中的例子展示了 HTML5 的例子。

内容定位应该基于结构化标记。CSS 可以增强外观，但是内容结构在没有样式表的情况下也必须保持有意义。

如果网页的默认版本的内容不可访问，但符合 WCAG 标准的替代版本可以访问，则该网页必须链接到不符合标准的页面的开头。如果无法从内容中删除不可访问的对象，则必须在这些对象的旁边或与其相关联的位置添加一个链接，该链接将链接到另一个符合 WCAG 标准的版本。用户首选项必须保存在 cookie 中。替换版本的可访问性必须始终通过.htaccess或 HTTP referrer 头来确保。必须提供一个风格切换器，以确保与 WCAG 兼容的风格的替代版本。 ³ 创建风格切换器需要三种不同类型的样式表:

1.*持久 CSS 文件:*用于共享整个站点通用样式的基本样式。rel属性被设置为stylesheet，而title属性被省略(清单 10-6 )。

***清单 10-6。*一个持久的 CSS 文件

<link **rel="stylesheet"** type="text/css" href="styles/main.css" />

24.首选 CSS 文件:加载页面时默认启用的样式。rel属性的属性值为stylesheet，提供了title属性(清单 10-7 )。

***清单 10-7。*首选 CSS 文件

<link **rel="stylesheet"** type="text/css" href="styles/main.css" **title="Preferred"** />

25.替代 CSS 文件:为站点的替代版本设计的 CSS 文件，这些文件重用主样式表文件中声明的样式，但覆盖其中一些样式(例如，将字体大小设置为更大的值，或者修改字体颜色以获得更高的对比度)，或者在重用的样式之上添加新的样式(例如，定义移动设备的最大宽度)。它们不仅可以用于增加可访问性，还可以用于网站的设计或特定媒体版本(正如前面在第三章中暗示的)。替代的 CSS 文件有一个rel属性值alternate stylesheet而不是stylesheet，它们有一个title属性来标识它们(清单 10-8 )。

***清单 10-8。*替代样式表

`<link rel="alternate stylesheet" type="text/css" href="styles/large.css" images
title="Large" />

首先，创建三个 CSS 文件，一个用于主样式(清单 10-9 )，两个用于替代样式，分别提供大字体大小(清单 10-10 )或高对比度的大字体大小(清单 10-11 )。

因为不是所有的功能都可以通过 CSS 来提供，一个符合标准的网站替代版本并不总是通过简单地创建额外的样式表来提供。

***清单 10-9。*主 CSS 文件(main.css )

`body {
background-color:#004c25;
color: #cff;
font-family: Garamond, serif;
font-size: 1.2em;
}

#wrapper {
width: 800px;
margin: auto;
}

#wrapper a:link

#wrapper a:hover

#wrapper a:visited

#colorswitch a:link {
padding: 10px;
}`

***清单 10-10。*CSS 文件为大字体版本(large.css )

`@import ("main.css");

body {
font-size: 1.8em;
}`

***清单 10-11。*高对比度版本的 CSS 文件(contrast.css )

`@import ("main.css");

body {
background-color: #000;
font-size: 2em;
}

#wrapper a:hover `

接下来，我们需要一个脚本来设置所选 CSS 文件的样式，并将选择存储在一个 cookie 中，如果用户返回到页面，就可以读取这个 cookie 了(清单 10-12 )。如果没有 cookies，替代样式将仅应用于当前会话的当前页面，这几乎是无用的。如果一个有视觉障碍的用户选择了“高对比度主题”，他或她可能会喜欢用相同的设置来阅读网站的所有页面。

清单 10-12。styleswitcher.js35

`function setActiveTheme(title) {
var i, a, main;
for (i = 0; (a = document.getElementsByTagName("link")[i]); i++) {
if (a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if (a.getAttribute("title") == title) a.disabled = false;
}
}
}

function getActiveTheme() {
var i, a;
for(i = 0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && images
!a.disabled) return a.getAttribute("title"); }
return null;
}

function getPreferredTheme() {
var i, a;
for (i = 0; (a = document.getElementsByTagName("link")[i]); i++) {
if (a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days2460601000));
var expires = "; expires=" + date.toGMTString();
}
else expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) { var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}

window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredTheme();
setActiveTheme(title);
}

window.onunload = function(e) {
var title = getActiveTheme();
createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredTheme();
setActiveTheme(title);`

最后，我们把所有的组件放在一起，并在我们的网站上获得样式切换器功能(清单 10-13 )。

***清单 10-13。*以风格切换器为特色的标记代码

Style switcher demo 

Style switcher demo

This is the content.

Default CSS Large fonts High contrast

` ` `

用脚本滚动的内容，如横幅，必须有暂停或停止滚动的机制。

对 CSS 中的文本片段应用图像替换的网页应该有一个允许用户在两个版本之间切换的界面。

Web 内容结构应该包含适当的语义标记元素。必须根据元素的含义而不是它们的(默认)外观来使用它们。语义上有意义的标记，如em或strong必须用于强调和特殊的文本。必须对列表和链接组应用ol、ul和dl元素。必须使用map元素对链接进行分组。

键盘用户不能被一个只能用鼠标访问的网站阻止。这同样适用于默认情况下不可通过键盘访问的 Flash 对象。

images 注意同一元素上的重复属性可能会导致辅助技术的关键错误，必须被消除。

接收焦点或被定点设备悬停的元素的外观应该被改变(例如，突出显示)以向用户提供视觉反馈(例如，改变背景或边框颜色)。Flash 内容还应该提供高度可见的焦点指示。

替代文本、标签和名称应该在具有相同功能的组件之间共享。

为使用内容所需的所有信息提供的可选手语版本可以提高聋人或有某些认知障碍的人的可访问性。它可以是使用 Flash 等技术的多媒体化身，也可以是动画或真实手语翻译的视频剪辑(图 10-9 )。

images

***图 10-9。*一个签约头像 [36 ]

Web 站点组件，如标记、样式表和 XML 文件，必须经过验证，以保证正式规范、语法、句法和词汇的正确使用。必须根据标记规范使用开始和结束标记。所有网页都必须格式良好。

非文本内容的标记要求

可以应用图像、照片、图形和符号来改善用户体验并帮助用户理解内容。但是，所有非文本内容，如图像、嵌入对象(Flash 内容、小程序、音频、视频等)、 ASCII 艺术、表情符号和 leetspeaks 必须有替代文本。

所有图像都必须有一个alt属性。对于那些可以被辅助技术安全忽略的图像，必须省略title属性，并将alt文本设置为 null ( alt="")。如果一个图像和它的相关文本有相同的链接，为了避免不必要的重复，它们必须被合并。

像 1x1 像素的 GIF 文件这样的间隔图像应该完全去除，以利于 CSS 边距和填充。

对于那些简短描述不够的图像和对象，必须添加详细描述。多年来，longdesc属性一直用于这个目的。然而，longdesc属性在(X)HTML5 中已经过时，必须使用一个带有描述链接的常规a元素来代替。

用颜色表示的非文本内容也必须有不用颜色也能理解的模式。

必须为非文本内容提供替代文本，以标识其目的(即使是需要感官体验的内容)。此外，必须为具有相同目的的非文本内容提供简短和详细的描述，以展示相同的信息。

如果原始的非文本内容太长，或者仅使用文本无法获得相同的信息，则必须编写简短的替代文本，简要概括非文本内容。

专门用于装饰的图像，如背景图像、图像翻转或标签图像，必须使用 CSS 提供。由于没有附加标记，辅助技术可以忽略这些非文本内容。

必须为图像映射中的所有area元素编写替代文本。

必须为所有对象提供文本或非文本替代项。替代文本可以直接写在object元素的内容中。嵌套对象可以提供非文本替换。

相邻的非文本内容共享信息或功能必须用替代文本描述，以避免不必要的重复。

闪烁和闪烁内容

应该消除由频闪或闪光效应引起的光癫痫发作。一个链接或按钮必须总是被添加到有闪烁内容的网页中，它可以加载没有闪烁内容的等价网页。只有使用提供关闭浏览器闪烁功能选项的技术，网页上才能包含闪烁内容。必须使用脚本将闪烁内容最小化到 5 秒以下，如果可能的话，完全消除。这同样适用于动画 GIF 图像。

闪烁内容也必须最小化。1 秒钟内最多允许闪烁三次。如果因为内容特征而不可行，闪烁区域必须小于 10 度视野的 25%。内容不允许违反一般闪光阈值或红色闪光阈值，避免光敏性癫痫发作。有一些工具，如光敏癫痫分析工具(PEAT) [37 ]，可以用来评估闪烁内容，以降低癫痫发作的风险。

闪光物体

嵌入 Flash 对象的尺寸可以用相对单位(em或%)指定。

用name属性标记的非文本对象必须在 Flash 中应用，以允许辅助技术访问它们。对于 Flash 中的非文本对象，必须由description属性提供长文本替换。必须为用于相同目的的可点击图像热点提供文本替换。多年来，数据网格的可访问性描述一直用于提供屏幕阅读器可读的信息。

如果需要，Flash 图形必须以辅助技术可以忽略的方式进行标记。这可以通过直接利用 Flash 对象的辅助功能或使用 ActionScript 应用文本替代来实现。

如果相邻的文本和图像按钮(图标)具有相同的用途，则必须将它们组合成一个按钮元件实例。

用标记编写的表单优于 Flash 表单。但是，如果您必须在您的网站上使用 Flash 表单，应该考虑以下准则。必须脱离上下文来理解 Flash 控件。为此，可以通过脚本更改控件标签来提供附加信息。类似于它们的标记等价物，Flash 表单的必需字段必须被清楚地指出。相关的 Flash 表单控件必须组合在一起以提供语义含义。Flash 表单必须在客户端进行验证。如果发现错误，必须向包含无效数据的控件添加描述。Flash 表单控件必须有一个关联的文本标签(例如，通过自动标签)。默认情况下，只有CheckBox和RadioButton组件获得标签。

必须允许用户暂停由脚本控制的滚动 Flash 内容。

Flash 内容的闪烁必须由脚本控制，最多在五秒钟内停止。

链接要求

超链接锚必须始终有一个文本描述，清楚地表明链接的目的。链接必须应用title属性来提供额外的链接文本。超链接必须有描述性的替代文本，清楚地表明链接的目的。

使用 CSS 选择器(没有visibility:hidden或display:none)可以隐藏为高级屏幕阅读器和盲文显示支持添加的附加链接文本。该链接文本也可以与样式切换器结合使用。必须避免重复的内容。

必须在每个网页的顶部添加一个控件，提供带有链接文本的可选页面版本，即使没有上下文也足以确定其目的。

即使没有上下文(应用描述性的链接文本)，链接的目的也必须是清楚的，但是容器上下文(段落、前面的标题、列表项、表格单元格及其关联的表格标题)也必须以进一步提高链接目的的清晰度的方式来书写。

应该确保链接颜色和文本颜色之间的最小对比度为 3:1。此外，必须在链接和控件的焦点上提供额外的视觉提示，仅使用颜色来识别它们。

目地 URIs 通常不具有足够的描述性。例如，链接文本Read more…不足以理解链接。但是，如果在同一句话中，描述先于链接，也可以理解。必须使用链接文本和包含句子的文本的组合来确定链接的目的，以确保屏幕阅读器的逻辑文本流。只要合理，就必须提供根据上下文动态变化的链接文本。

应该为所有不支持属性级长描述的网页元素和对象添加链接。链接必须紧挨着非文本内容。长描述的位置必须在短描述中指明(如果适用)。例如，图片的简短描述提供了文本“智能手机操作系统对比——请参见下面的详细信息”,而图片下方的长描述指出“在图 1 中，您可以看到智能手机操作系统的市场份额，包括 Android、BlackBerry OS、iOS、Microsoft Windows Mobile、Symbian 和 webOS。”

如果网页包含重复的内容块，如导航链接或目录，则必须在这些内容块的开头添加一个链接，以允许用户绕过它们。网页的顶部必须包含链接到内容的不同部分。

对话消息必须与设备无关。应尽可能消除弹出窗口。如果不能消除新窗口，可以提供预先警告。为了避免混淆，根据用户请求打开的带有target属性的新窗口可能会有一个适当的链接文本，清楚地表明内容将在新窗口中打开。但是，一般来说，链接应该在同一个窗口中打开，而不是在一个新的窗口或标签中打开。虽然这种方法有助于提高可访问性，但它也有缺点，可能会导致访问者的流失(如果他们忘记再次访问您的网站)。

用户输入和表单要求

表单控件和链接必须使用(X)HTML 元素提供，而不是其他技术，如 Flash。

表单的文本输入必须有一个可用于提供上下文相关帮助的title属性。

必须应用可访问名称来标记 Flash 表单控件。Flash 按钮必须始终有一个描述链接目的的可访问标签。Flash 图像按钮必须有可访问的名称，提供有关按钮功能的信息，但不描述一般的图像。

必须为Button、CheckBox和RadioButton Flash 表单组件显式设置label属性。因此，标签文本会出现在组件旁边，并可供辅助技术使用。

表单控件组必须有一个由legend元素提供的描述，并且必须用fieldset分组。

按钮必须与select元素一起应用才能执行动作。option元素必须与select元素中的optgroup组合在一起。

为了保持比例，当浏览器中的文本大小发生显著变化时，输入框和按钮等文本表单元素应该调整大小。

除了枚举选项之外，表单有时还允许用户定义的值(通常带有文本other, please specify),必须为这些值提供文本描述。

必须在表单和字段集的开头添加文本说明，清楚地表明所需的输入。文本输入元素可以有拼写检查器。必填字段必须清楚标明，例如使用星号(*)字符。如果输入是禁止值、超出允许的限制或以不支持的格式提供，则必须通过文本描述通知用户。

当使用支持可访问的富互联网应用(WAI-ARIA)的技术时，允许的输入域范围应该用aria-valuemin和aria-valuemax属性来标识。用户代理通常不允许用户输入指定范围之外的值，如果用户这样做，会生成验证错误。

用示例展示的预期数据格式降低了用户输入不充分的可能性。这同样适用于表单提交前提供的审核和更正选项。应该为 web 应用提供一种机制，以便根据请求恢复错误删除的信息。

多部分表单必须在第一页提供一个复选框，根据请求给用户更多的时间，或者完全取消会话时间限制。

应该通过客户端脚本验证用户输入。如果发现错误，必须使用警告对话框通知用户。也可以通过 DOM 添加错误消息。此外，应该提供一种机制来帮助用户找到输入错误的位置。如果用户提供的信息不充分且不能被接受，应建议正确的文本(如果可用)。

如果应用了验证码，则必须添加描述其用途的替代文本。此外，应根据请求生成另一个验证码。

除了提交按钮之外，还提供了一个复选框，鼓励用户在提交之前检查他们的输入。如果需要确认才能继续选定的操作，则可以最小化或消除表单提交问题。提交后，应提供用户可以更新或取消订单/请求的规定时间段。当数据成功提交时，应始终提供成功反馈。

可以应用aria-describedby WAI-ARIA 属性将描述性信息附加到一个或多个元素上。表单控件必须通过label元素与文本标签相关联。当label元素不可用时，必须应用title属性。除了位于字段之后的单选按钮和复选框的标签之外，标签必须紧接在字段之前(考虑文本方向)。清楚表明其用途的表单域和按钮必须相邻。

必须将文本提示添加到彩色表单控件标签中，以便将颜色和文本或字符提示结合起来传达信息。例如，用红色表示的必填字段标签可以被大多数人快速识别，但不是所有人都能看到颜色。然而，他们仍然可以阅读或听文字提示。

描述必须与预先指示上下文变化的表单控件相关联。必须使用一个submit按钮，以便允许用户明确地请求改变上下文。aria-required WAI-ARIA 属性可用于指示提交前需要用户输入。必须提供文本描述以标识未完成的必填字段。

表格要求

表格信息必须用table元素表示。表格标题必须通过使用caption元素与表格相关联。数据单元格和标题单元格必须与表格中的id、header和scope属性相关联。在 Flash 中，DataGrid组件必须用于将列标题与单元格相关联。这些组件必须有标题文本。必须在table元素上应用summary属性，以给出表格的概览。

用户控制要求

所有网站的功能必须不仅可以通过鼠标等定点设备访问，还可以通过键盘访问。这也适用于闪存内容(在标准组件上使用click事件)。

必须在所有网页上提供一个控件，允许用户停止移动、闪烁或自动更新内容。

必须为所有自动刷新或消失的内容(如横幅或 flash 标题)提供暂停和重新启动选项。指向基于时间的媒体的替代内容的链接必须紧挨着非文本内容放置。不应该强迫用户在时间限制内完成任何活动。如果时间限制即将到期，脚本必须始终警告用户。这也适用于 Flash 内容。

用户必须始终可以选择将时间限制设置为默认值的十倍。延长默认时间限制的选项也适用于 Flash 内容。此外，必须允许用户关闭时间限制。

标记元素(如锚点和表单元素)的操作必须是键盘可访问的。事件处理程序必须独立于设备，不仅允许鼠标，还允许键盘访问全部内容功能(例如，拖放)。这可以通过使用冗余的键盘和鼠标事件处理程序来实现。这同样适用于 Flash 内容以及所有脚本功能。

需要用户认证的网络服务器通常在一段时间没有用户活动后出于安全原因终止会话。如果用户不能足够快地提供输入，会话将在数据提交前超时，需要重新进行身份验证。服务器应该将此类数据存储在临时缓存中，并在用户重新验证成功后保留这些数据，这样用户就可以继续填写表单，而不是重新开始，因为之前输入的所有数据都已恢复。重新授权页面可以隐藏和加密用户数据。

上下文变化必须应用可预测的动作。例如，如果表单的数据条目不能显示在单个页面上，则在用户按下第一页最后一个条目上的 Tab 键后，不应自动加载第二页，因为这会使屏幕阅读器用户感到困惑，这是必须避免的。

应该尽可能消除自动重定向。客户端(meta refresh)和服务器端(HTTP 响应)重定向都有易访问性问题，这会让用户感到困惑。

某些用户界面组件在获得焦点时会被某些浏览器突出显示。例如，一个表单输入在 Google Chrome 中被轻微高亮显示，在 Safari 中默认被强烈高亮显示，但在 IE、Firefox 和 Opera 中根本不高亮显示(图 10-10 )。

images

***图 10-10。*Firefox 和 Safari 中相同输入栏的默认浏览器高亮显示(选择第二个文本输入)

由于突出显示因组件和浏览器而异，web 开发人员应该确保焦点指示器的高可见性。

表单组件、链接和所有属性大于0的元素都可以获得焦点。然而，一些平台的默认焦点指示器不是非常明显，并且在某些背景下可能很难看到。应始终确保重点指标的可见性。

不重要的警报是可选的。在理想情况下，用户不会被不必要的模态弹出窗口(要求用户单击 OK 按钮才能消失的对话框)打扰。

基于时间的媒体，如演示文稿，必须始终有一个替代的文本版本或描述。可以消除自动更新的内容，并提供一种推迟自动内容更新的机制。在静态页面部分或窗口中，移动和滚动文本也必须可用。

实时媒体、音频和视频要求

预先录制的同步媒体(如视频剪辑)必须有字幕。声音只能在用户请求时播放。音效必须在三秒钟内自动关闭。此外，一个容易发现的控件必须位于页面的开头附近，用于打开/关闭声音。Flash 内容也必须有一个用于相同目的的控件。

在 Flash 电影中，带有flash.accessibility.Accessibility.active属性的屏幕阅读器检测可用于关闭使用辅助技术时自动播放的声音(默认情况下，声音仍可自动播放)。

音频文件中的非语音声音可能比语音音频内容至少低 20 dB。

一个额外的，用户可选择的音轨必须提供音频描述。

文本的语音版本可以显著提高站点的可访问性，因为它比屏幕阅读器的语音更准确、更容易理解。

纯音频直播内容可能有文本替代。这可以通过实时字幕服务来实现，该服务由训练有素的操作员来完成，操作员可以以很小的延迟输入文本。请注意，这种服务在实践中很少使用。

可以为跟随有现场音频内容的脚本提供到准备好的声明或脚本的文本抄本的链接。这些脚本可以比现场转录更加准确和完整；但是，必须小心确保正确的同步。

必须为呈现纯音频或纯视频内容的基于时间的媒体提供可访问的替代方案。

必须为纯音频直播和纯视频直播内容提供描述性标签。

视频必须提供完整描述视频内容的扩展音频注释。此外，视频内容的第二个版本必须始终提供音频描述，以最大限度地提高可访问性。这也适用于 Flash 视听材料。对话的间隙必须用使用 SMIL 的扩展音频描述来填充。

盲人和某些视障人士无法访问的纯视频内容必须有普通音频格式的音频替代，如 MP3。视频流的可访问性可以通过同步视频使用手语翻译最大化，同步视频的显示可以由用户选择。

必须为视频内容添加字幕，这些字幕可以根据请求打开或关闭，因为它们可以最大限度地提高可用性。字幕不仅要为听力受损者提供对话信息，还要提供声音描述信息(不同于传统字幕)。

从 WCAG 1.0 迁移到 WCAG 2.0

一些项目要求网站从 WCAG 1.0 升级到 WCAG 2.0。几个符合 WCAG 1.0 的站点只需要很少或根本不需要修改就可以满足 WCAG 2.0 的要求。WCAG 2.0 基于 WCAG 1.0；但是，在方法和要求上有一些不同。

默认情况下，符合 WCAG 1.0 标准的网站部分符合 WCAG 2.0 标准。WCAG 的两个版本是兼容的。因此，可以同时满足 WCAG 1.0 和 WCAG 2.0 的要求。然而，由于第二个版本的高级灵活性，符合 WCAG 2.0 的站点不会自动满足 WCAG 1.0 的要求。一些 WCAG 2.0 的成功标准与 WCAG 1.0 的检查点非常相似。另一方面，有一些 WCAG 1.0 的需求在 WCAG 2.0 中是不需要的。WCAG 2.0 的一些要求比 WCAG 1.0 [38 ]中的相关要求更加具体。

WCAG 1.0 是特定于技术的 [39 ]，而 WCAG 2.0 适用于 W3C 和非 W3C 技术，只要它们提供可访问性 [40 。

WCAG 1.0 使用临时解决方案(“直到用户代理……”)，而 WCAG 2.0 成功标准合规性假定用户代理支持。

在 WCAG 1.0 中，JavaScript 被认为是一种存在可访问性问题的技术。事实上，JavaScript 是可以访问的，这取决于所使用的应用和功能(我们将在后面更详细地讨论)。WCAG 2.0 考虑使用屏幕阅读器成功测试脚本技术。

从 WCAG 1.0 迁移到 2.0 的主要步骤可以总结如下 [42 ]:

应该确定一致性参数。
应确定应用的技术。
应分析技术要求的应用潜力。
WCAG 1.0 检查点应根据 WCAG 2.0 的要求进行检查。
应该检查 WCAG 2.0 的成功标准。

最后，虽然听起来很奇怪，但并不是每个人都热衷于最高级别的网络可访问性。虽然从可访问性的角度来看，WCAG 2.0 给人留下了深刻的印象，但由于许多原因，它仍然受到批评。例如，规范非常长且复杂，技术中立的描述对于开发人员来说很难实现，包括非常特殊的需求(特别是 AAA 一致性，如实时字幕服务)，一些定义很难理解，当存在可访问版本时，不可访问的页面版本是可以容忍的，测试非常复杂，并且不是所有的内容都可以以符合最严格要求的方式编写。

美国第 508 条

除了 W3C 标准之外，世界各地还有针对特定国家/地区的 web 可访问性标准和/或法规。在美国，对政府网站的一个基本要求是遵守 508 条款。修正案的子部分 B 描述了技术标准。web 开发者最重要的部分是 1194.22(基于 Web 的内网和互联网信息与应用) [44 。

第五百零八部分定义的基于 web 的技术和信息标准基于 W3C WAI 指南。因此，1194.22 和 WCAG 1.0 检查点是一致的 [45 ]。

对图形或动画的使用没有限制，但它们必须以可访问的形式提供。除了为图形提供的文本标签和描述之外，本节还介绍了样式表、表单、脚本、多媒体内容、图像映射、语言和插件的可用性。

应为所有非文本元素编写替代文本。多媒体演示应该与其等效的替代方案同步。信息不能只用颜色来表达。

信息表示不能完全依赖关联的样式表。

应该为数据表声明行标题和列标题。

数据表的数据单元格和标题单元格应该关联。

客户端图像映射应该优先于服务器端图像映射，除非区域不能用可用的几何形状来定义。

应该为服务器端图像映射的所有活动区域提供冗余文本链接。

框架应该有唯一的标题。

应消除频率为 2–55 赫兹的屏幕闪烁。

一个纯文本页面应该提供相同的信息和功能。

辅助技术必须能够访问脚本提供的内容。

需要第三方软件(如插件)的 Web 内容必须提供指向插件网站的链接。

表单应该提供对辅助技术的访问。

应该允许用户跳过重复的导航链接。

应通知用户定时响应要求，并允许延长时间限制。

语义(X)HTML5 元素和 WAI-ARIA

HTML5 规范中引入的新语义标记元素，如header、hgroup、footer、article、section、aside和nav，都包含了可访问性潜力。但是，请记住，浏览器对这些元素的支持各不相同，这一点很重要。

对 ARIA 角色的支持也在增加。ARIA 角色可以作为附加标记来应用，以提高可访问性潜力；换句话说，它们的存在不会在没有 ARIA 支持的系统上引起任何问题。ARIA 角色作为属性被添加到诸如banner、complementary、contentinfo、form、main、navigation或search的元素中。几个 ARIA 角色描述文档结构，即:article、columnheader、definition、directory、document、group、heading、img、list、listitem、math、note、presentation、region、row、rowheader、separator和toolbar。

结构化元素的角色可以由role属性提供。清单 10-14 显示了一个例子。

***清单 10-14。*使用role属性

<header **role="banner" /**>

某些角色在一个页面中必须是唯一的。显示的横幅标题代码就是一个很好的例子。虽然开发人员可以使用无限数量的标题，但只有一个标题可以是横幅标题。

JavaScript 可访问性

脚本提供的隐藏内容、导航和奇怪的用户控制行为会导致混乱和可访问性问题。例如，用于检查用户输入的onblur事件可以覆盖用户代理的默认行为，并保持焦点直到给出正确答案，这使得屏幕阅读器在没有输入正确答案的情况下无法访问页面的任何其他部分(包括其他地方提供的反馈文本)。并不是所有的事件处理程序都是独立于设备的，有些依赖于鼠标(onmouseover、onmouseout、ondblclick)或者键盘(比如onkeydown、onkeyup)，并不能在所有的设备上触发。如果使用了与设备无关的事件处理程序(如onfocus、onblur、onselect或onchange)，通过脚本提供的内容和功能是可访问的，提供了完整的键盘控制，并且脚本不会通过修改或覆盖正常的浏览器功能而造成混乱，则脚本是可访问的 [46 ]。当 JavaScript 不能被本地访问时，必须提供一个可访问的替代方案。

下拉菜单和弹出菜单在整个网络中普遍使用。然而，键盘用户不能直接访问onmouseover和onmouseout事件处理程序。因此，必须提供替代方案。

对于键盘用户来说，触发onfocus和onblur事件处理程序可能不方便或不可访问。

onclick事件处理程序是一个独立于设备的事件处理程序；但是，有些应用依赖鼠标。与链接或表单控件不同，在链接或表单控件中，可以通过按 Enter 键来触发onclick事件处理程序，而在使用键盘导航时，纯文本和表格单元格不能获得焦点。因此，键盘用户不能为链接或表单控件以外的元素激活onclick事件。如果该事件与表单元素一起使用(例如，用于表单验证)，这不是问题，使用onclick事件的提交按钮可以被定点设备和键盘激活。

ondblclick事件处理程序一般是依赖于鼠标的，因为它与鼠标的双击相关联，并且在所有输入设备(如键盘)上没有等效的事件。

下拉选择列表如语言选择器通常应用onchange事件处理程序。通过单击从列表中选择一个选项直接进入相应的版本，这对于鼠标用户来说非常方便。然而，这些列表对于键盘用户来说是不可访问的，因为他们除了第一个选项外不能选择(在按下键盘上的光标向下键后，第一个选项立即被选择)。该问题的一个可能的解决方案是添加一个按钮作为onclick事件处理程序的触发器。但是，在这种情况下，所有用户都应该在选择了触发事件处理程序所需的选项后按下按钮。

也可以以独立于设备的方式应用onselect事件处理程序。

某些事件处理程序如onkeydown和onkeyup可以由键盘专门触发。鼠标无法访问与它们相关联的操作。

动态内容，如document.write呈现的当前时间，不能被屏幕阅读器读取。

images 注意动态网页的一些特性也可以用纯 CSS(尤其是 CSS3)实现；因此，为了支持 CSS，某些 JavaScript 代码可以被删除(例如，过渡效果或转换菜单项)。然而，屏幕阅读器不能很好地处理某些 CSS 特性，例如，被display: none;或visibility: hidden;隐藏的元素。

PDF 可访问性

Adobe Acrobat 和 Acrobat Reader 提供辅助功能(图 10-11 )以及屏幕阅读器选项。它们可以在“编辑首选项”下找到，或者直接使用快捷键 Ctrl+K 找到。您可以在“查看”“大声朗读”下找到“屏幕阅读器”选项。

images

***图 10-11。*Adobe Acrobat/Acrobat Reader 中的辅助功能首选项

设置助手等特殊功能可在高级辅助功能下设置(图 10-12 )。

images

***图 10-12。*辅助功能设置助手

通常通过扫描纸质文档创建的纯图像 PDF 文件存在可访问性问题。无法搜索文本。颜色无法调整。屏幕阅读器不能阅读只有图像的 PDF 文件。作者应该使用 Acrobat 的 OCR 功能以文本形式提供文本文档，同时保留结构。

非结构化 PDF 文件的可访问性各不相同。他们的阅读顺序可以改变。它们提供自动标记，作者可以选择使用手动标记。受保护的文件不能保存为可访问的格式。

结构化 PDF 文件的文本完全可以访问。超链接是功能性的。图像的替换文本是可访问的(如果存在)。页码是正确的。屏幕阅读器可以正确读取基本数据表。如果提供的话，可选书签可以进一步提高可访问性。也可以访问受保护的文件。然而，即使是结构化的 PDF 文件也有一些已知的可访问性问题。例如，段落不能被完美地定位。字体属性信息不可用。

Flash 可访问性

虽然易访问性一直是 Flash 技术的一个弱点，但是开发者环境和免费播放器在这方面都得到了改进。Adobe Flash Professional 和 Adobe Flash Player 有几个支持辅助技术的功能 [47 。

Flash 电影的布局和结构可能相当复杂，使得屏幕阅读器很难阅读内容。为整个电影添加的描述可以为屏幕读者提供关于电影结构的提示。

必须为图形元素添加文本等价物，例如图形图标的名称或手势动画的描述。元素组必须有一个等效的文本。

永不停止移动的电影会导致屏幕阅读器频繁刷新。即使在底部包含电影的网页上，屏幕阅读器也可能将 motion 解释为页面更新，并返回顶部重新开始阅读。这种行为可以通过使影片剪辑或整个影片的子对象不可访问来消除 [48 ]。

为了允许用户控制动作，必须在电影中添加 Next 按钮，而不是在有限的时间内显示信息。

Flash 中有几个用户界面组件是可访问的，这些组件自动执行常见的可访问性任务，如标记或提供键盘访问。可访问性对象可以用类enableAccessibility()来启用。

FLVPlayback 组件提供了在 Flash 应用中包含视频播放器的选项，以播放下载的 Adobe Flash 视频(FLV)文件和流式 FLV 文件。FLVPlaybackCaptioning 组件可以将字幕与视频相关联。字幕组件支持定时文本标记语言(TTML) W3C 标准，以及多字幕和切换控制。

有多种方法可以控制 Flash 中的读取顺序，例如限制舞台大小、提供额外的线性内容版本或通过 ActionScript 指定读取顺序。

用户控件必须可以通过键盘访问。必须在按钮上添加键盘快捷键。为了考虑屏幕阅读器的限制，脚本必须保持在框架内，并且必须避免将空的电影剪辑用作按钮。

在 Flash Professional CS5 中，引入了一个新的组件来显示包含在定时文本格式(DFXP)中或与 FLV 文件集成在一起作为提示点的音频字幕。Flash Professional CS5 还为可访问的视频播放器外观提供本机支持。

用户控制对于音频回放是必须的，例如播放和暂停按钮。

对于所有控件，在控件发生变化时向用户提供反馈是很重要的。

前面在 WCAG 要求中描述的颜色选择的一般规则也适用于 Flash 内容。

数学符号的可访问性

GIF 图像中提供的数学公式对于视力受损的人来说可能难以阅读，如果没有文本描述，屏幕阅读器也无法阅读。

相比之下，MathML 方程更容易理解。MathML 的可访问性潜力由一个用于 Internet Explorer 的免费 MathML 插件的可访问性特性清楚地展示出来，⁴Design Science math player[49】。该软件为屏幕阅读器提供数学符号的音频或盲文描述。MathPlayer 还具有本地语音功能(从本地菜单中选择speak expression)。它允许键盘导航。MathPlayer 2 还包含 MathZoom，允许用户放大单个表达式。匹配算法确保当周围的文本被缩放时，数学符号的字体大小增加。此外，MathPlayer 支持换行符，如果缩放字体大小，这可以提高可读性。它提供了大声朗读的子表达式的同步突出显示，这有助于患有某些学习障碍如阅读障碍或计算障碍的人。

由于 Internet Explorer 从第 9 版开始就支持 MathML，所以只有早期版本才需要 MathML 插件。该公司还提供创建数学符号的工具，如 MathType(参见“MathType”一节)。

总结

在本章中，你学习了在标记、样式表、客户端和服务器端脚本以及多媒体内容中应用的可访问性指南。现在，您可以创建任何人都可以使用的具有所需可访问性级别的网站，而不用考虑用户的残疾或浏览设备的限制。

在下一章，你将会学到网络标准化的工具。您将熟悉在选择高级文本编辑器、特定编辑器或标记校正器时需要考虑的要求，它们可以极大地简化您的工作。

参考文献

《澳大利亚残疾歧视法》(1992 年)。澳大利亚法律信息研究所。www.austlii.edu.au/au/legis/cth/consol_act/dda1992264/2011 年 1 月 6 日访问
众议院办公室(2005 年)《残疾法》。爱尔兰国民议会。www.oireachtas.ie/documents/bills28/acts/2005/a1405.pdf2011 年 1 月 6 日访问
OPSI (1995 年)残疾歧视法。英国成文法数据库。www.statutelaw.gov.uk/content.aspx?activeTextDocId=33303272011 年 1 月 6 日访问
美国接入委员会(2010)508 条款主页:电子和信息技术。美国准入委员会。www.access-board.gov/508.htm2011 年 1 月 6 日访问
Henry SL (ed) (2011)网络无障碍倡议(WAI)。万维网联盟。www.w3.org/WAI/2011 年 2 月 4 日访问
W3C (1997)万维网联盟发起了网页可访问性倡议国际项目办公室。万维网联盟。www.w3.org/Press/IPO-announce2010 年 10 月 14 日访问
Régis J，Morrison A，Touré H (2010 年)世界标准日致辞。国际标准化组织。www.iso.org/iso/wsd2010/wsd2010_message.htm2010 年 10 月 14 日访问
Paciello MG (2000 年)残疾人网络无障碍。劳伦斯 CMP 图书公司
Henry SL，McGee L (eds) (2010)可达性。在:网页设计和应用。万维网联盟。www.w3.org/standards/webdesign/accessibility2010 年 10 月 14 日访问
Richards J，Spellman J，Treviranus J，May M (eds) (2010)创作工具可访问性指南(ATAG) 2.0。万维网联盟。www.w3.org/TR/ATAG20/2011 年 2 月 2 日访问
Allan J，Ford K，Richards J，Spellman J (eds) (2010)用户代理可访问性指南(UAAG) 2.0。万维网联盟。www.w3.org/TR/UAAG20/2011 年 2 月 2 日访问
Abou-Zahra S，Squillace M (eds) (2009)评估和报告语言(EARL) 1.0 模式。万维网联盟。www.w3.org/TR/EARL10-Schema/2011 年 2 月 2 日访问
亨利·SL(编辑)(2011)WAI-ARIA 文件。在:WAI-ARIA 概述。万维网联盟。www.w3.org/WAI/intro/aria.php#is2011 年 9 月 9 日访问
Craig J，Cooper M，Pappas L，Schwerdtfeger R，Seeman L (2011)可访问的富互联网应用(WAI-ARIA) 1.0。万维网联盟。www.w3.org/TR/wai-aria/2011 年 2 月 2 日访问
Pappas L，Schwerdtfeger R，Cooper M (2010) WAI-ARIA 1.0 初级读本——富互联网应用可访问性挑战和解决方案介绍。www.w3.org/TR/wai-aria-primer/2011 年 9 月 9 日访问
Scheuhammer J，Cooper M (2010) WAI-ARIA 1.0 创作实践——作者理解和实现可访问富互联网应用的指南。万维网联盟。www.w3.org/TR/wai-aria-practices/2011 年 9 月 9 日访问
Snow-Weaver A，Cooper M (2010) WAI-ARIA 1.0 用户代理实施指南——用户代理开发者理解和实施可访问富互联网应用的指南。万维网联盟。www.w3.org/TR/wai-aria-implementation/2011 年 9 月 9 日访问
博尔特曼 D，扬森 J，塞萨尔 P，穆兰德 S，海奇 E，德梅利奥 M，金特 J，川村 H，韦克 D，帕涅达 XG，梅伦迪 D，克鲁兹-拉拉 S，汉克里克 M，祖克 DF，米歇尔 T(编辑)(2008)同步多媒体集成语言(SMIL 3.0)。W3C 推荐。万维网联盟。www.w3.org/TR/SMIL/2011 年 9 月 13 日访问
Adams G (ed) (2010)时控文本标记语言(TTML) 1.0。W3C 推荐。万维网联盟。www.w3.org/TR/ttaf1-dfxp/2011 年 9 月 13 日访问
齐索姆 W，范德黑登 G，雅各布斯 I(编辑)(1999)网页内容无障碍指南 1.0。万维网联盟。www.w3.org/TR/WAI-WEBCONTENT/2011 年 1 月 24 日访问
考德威尔 B，库珀 M，里德 LG，范德黑登 G，齐索姆 W，斯拉丁 J，怀特 J(编辑)(2008)网页内容无障碍指南(WCAG) 2.0。万维网联盟。www.w3.org/TR/WCAG20/2011 年 1 月 25 日访问
范德黑登 G，里德 LG，考德威尔 B，亨利 SL，莱蒙 G(编辑)(2010)如何迎接 WCAG 2.0。可定制的 Web 内容可访问性指南 2.0 要求(成功标准)和技术的快速参考。万维网联盟。www.w3.org/WAI/WCAG20/quickref/2011 年 1 月 14 日访问
范德黑登 G，里德 LG，考德威尔 B，亨利 SL (2008)如何迎接 WCAG 2.0。可定制的 Web 内容可访问性指南 2.0 要求(成功标准)和技术的快速参考。万维网联盟。www.w3.org/WAI/WCAG20/quickref/20081211/2010 年 9 月 23 日访问
库珀 M，里德 LG，范德黑登 G，考德威尔 B，齐索姆 W，斯拉丁 J(编辑)(2010)WCAG 2.0 技术。Web 内容可访问性指南 2.0 的技术和失败。万维网联盟。www.w3.org/TR/WCAG20-TECHS/2011 年 1 月 24 日访问
库珀 M，里德 LG，范德黑登 G，考德威尔 B，齐索姆 W，斯拉丁 J(编辑)(2010)附录 a .如何从其他文件中引用 WCAG 2.0。在:了解 WCAG 2.0。理解和实现 Web 内容可访问性指南 2.0 的指南。万维网联盟。www.w3.org/TR/UNDERSTANDING-WCAG20/appendixA.html.于 2011 年 2 月 2 日进入
Cooper M，Reid LG，Vanderheiden G，Caldwell B (eds) (2010)章节标题:理解章节 2.4.10。在:了解 WCAG 2.0。万维网联盟。www . w3 . org/TR/UNDERSTANDING-wcag 20/navigation-mechanisms-headings . html。2011 年 9 月 10 日访问
Abou-Zahra S 等人(编辑)(2005 年)对网站可访问性的一致性评估。万维网联盟。www.w3.org/WAI/eval/conformance.html2011 年 2 月 2 日访问
WebsynergiDesign (2011)可访问性–我们的经验&可访问网站设计组合。网站协同设计有限公司www . websynergi . com/accessibility/accessibility-bobby-W3C . aspx2011 年 9 月 10 日访问
Caldwell B，Cooper M，Reid LG，Vanderheiden G (eds) (2008)相对亮度。在:网页内容无障碍指南(WCAG) 2.0。W3C 推荐。万维网联盟。www . w3 . org/TR/2008/REC-wcag 20-2008 12 11/# relativeluminancedef。2011 年 9 月 11 日访问
WebAIM (2011)色彩对比检查器。犹他州州立大学。webaim.org/resources/contrastchecker/2011 年 9 月 11 日访问
Juicy Studio (2011)光度色彩对比度分析仪。多汁工作室。juicystudio.com/services/luminositycontrastratio.php2011 年 9 月 11 日访问
WAT-C (2005)光度对比度分析仪 1.1。网络辅助工具联盟。www.wat-c.org/tools/CCA/LCRA/index.html2011 年 9 月 11 日访问
库珀 M，里德 LG，范德黑登 G，考德威尔 B，齐索姆 W，斯拉丁 J(编辑)(2010)颜色选择器。工作实例。WCAG 2.0 的技术。Web 内容可访问性指南 2.0 的技术和失败。万维网联盟。www.w3.org/TR/WCAG20-TECHS/working-examples/G175/index.php2011 年 1 月 28 日访问
Ishida R (ed) (2011) CSS3 Ruby 模块。万维网联盟。www.w3.org/TR/css3-ruby/2011 年 9 月 11 日访问
Sowden P (2001)替代样式:使用替代样式表。一份单独的杂志。www.alistapart.com/d/alternate/styleswitcher.js2011 年 9 月 12 日访问
W3C (2004)演示了在签名科学项目中使用的签名头像技术。TERC。www.w3.org/2004/Talks/0628-rdig-sims/vcom3d-signsci.mov2011 年 9 月 12 日访问
Trace Center (2011)光敏癫痫分析工具(PEAT)。威斯康星大学。trace.wisc.edu.peat/2011 年 9 月 11 日访问
WCAG EOWG WG(eds)(2009)WCAG 1.0 检查站与 WCAG 2.0 检查站的比较，按数字顺序排列。万维网联盟。www.w3.org/WAI/WCAG20/from10/comparison/2011 年 2 月 3 日访问
齐索姆 W .范德黑登 G .雅各布斯 I(编辑)(1999 年)准则 11。使用 W3C 技术和指南。在:网页内容可访问性指南 1.0。万维网联盟。www.w3.org/TR/WAI-WEBCONTENT/#gl-use-w3c2011 年 2 月 3 日访问
库珀 M，里德 LG，范德黑登 G，考德威尔 B，齐索姆 W，斯拉丁 J (2008)理解无障碍支持。在:了解 WCAG 2.0。理解和实现 Web 内容可访问性指南 2.0 的指南。万维网联盟。www . w3 . org/TR/2008/NOTE-UNDERSTANDING-wcag 20-2008 12 11/conformance . html# UC-accessibility-support-head。2011 年 2 月 3 日访问
齐索姆 W .范德黑登 G .雅各布斯 I(编辑)(1999 年)准则 6。在:网页内容可访问性指南 1.0。万维网联盟。www.w3.org/TR/WCAG10/wai-pageauth.html#技脚本。2011 年 2 月 3 日访问
如何将你的网站从 WCAG 1.0 升级到 WCAG 2.0。万维网联盟。www.w3.org/WAI/WCAG20/from10/websites.html.于 2011 年 2 月 2 日进入
克拉克 J (2006)让 WCAG2 见鬼去吧。一份名单之外。www.alistapart.com/articles/tohellwithwcag22010 年 9 月 23 日访问
美国政府(2010) 1194.22 基于网络的内联网和互联网信息及应用。在:第五百零八部分标准指南。美国政府。www . Section 508 . gov/docs/Section % 20508% 20 standards % 20 guide . pdf。2011 年 2 月 4 日访问
美国政府(2010)第 1194.22 号照会。在:第五百零八部分标准指南。美国政府。www.section508.gov/index.cfm?fuseAction=stdsdoc2011 年 2 月 4 日访问
WebAIM (2011)创建可访问的 JavaScript。创建可访问的 JavaScript 概述。牢记网页可访问性。webaim.org/techniques/javascript/2011 年 2 月 3 日访问
Adobe (2011) Adobe Flash 可访问性设计指南。Adobe 系统公司。www . adobe . com/accessibility/products/flash/best _ practices . html。2011 年 2 月 4 日访问
Adobe (2011)可访问性最佳实践概述。中:Adobe Flash 辅助功能设计指南。Adobe 系统公司www . adobe . com/accessibility/products/flash/best _ practices . html。2011 年 9 月 12 日访问
设计科学(2011) MathPlayer 会说话！MathPlayer:语音指令和示例。设计科学。www . dessci . com/en/products/math player/tech/accessibility . htm。2011 年 2 月 4 日访问

十一、开发工具

由于现代标记元素和属性变得越来越复杂，复杂的开发软件被用来生成网页。然而，某些 web 内容(如描述性元数据)可能非常复杂，经常需要人工决策。高级文本编辑器总是在每个网络标准的软件列表中占有最高的优先权。虽然它们可以用于各种任务，但应该应用特定的编辑器，如语义编辑器和标记纠正器。高级文本编辑器也可以与 SFTP 客户端集成。WYSIWYG 编辑器和内容管理系统对快速开发很有用；但是，它们经常产生无效代码。因此，在网站标准化和优化中应该尽量减少它们的应用。

在这一章中，你将学习一些软件工具，它们可以帮助你开发符合标准的网站。您将熟悉那些在选择开发工具、优化器和测试环境时应该考虑的重要特性。

功能要求

尽管经验丰富的 web 标准化人员可以在任何文本编辑器中编写有效的代码，但所选择的软件工具应该提供一些高级功能，这些功能对于高效的手工编码至关重要:

全面的字符编码支持，包括完整的 Unicode 支持
空白字符支持
控制字符支持，例如，CR+LF (Windows)、LF only (UNIX)和 Apple (CR only)换行
带标签的多文件编辑
用于突出显示 (XHTML、CSS、XML、脚本等)的语法的可定制颜色模式
退回/重做
强制自动换行
加行号
自动缩进
标签对和元素嵌套指南
操作系统集成(将应用添加到右击菜单)

所选的编辑器应至少与您的一个浏览器集成为默认源代码编辑器，您可以使用该编辑器通过按钮或热键打开当前渲染的 web 文档进行编辑。

文本编辑器还有一些不是很重要但很有用的特性:

自定义颜色和字体设置
可定制的工具栏
拼写检查器
模板
书签
完全支持拖放
内置 FTP 客户端或与 FTP 客户端集成
转换(大写、小写、颠倒大小写和首字母大写)
国际版本(对某些开发人员来说可能比较方便)
支持在远东语言中使用的双字节字符系统(DBCS)，如中文或日语(如果需要)
浏览器预览 ¹ (启动默认或选定的网页浏览器进行调试和测试)

文字编辑

与微软 word 或 OpenOffice.org Writer 等文字处理器相比，纯文本编辑器不能用于文档格式化。不过，这些基本的文本编辑器可以用来创建网页。然而，它们并不方便，而且缺少一些重要的功能。例如，它们中的许多不能正确处理所有的控制和空白字符。最广为人知的例子就是 Windows 下的记事本和 Linux 下的 vi。

写字板等高级文本编辑器提供文本格式和其他附加功能。源代码编辑器是高级文本编辑器，带有专门为手工编码者和程序员设计的附加工具。它们最常见的特性是各种标记语言、样式表和编程语言的语法突出显示。这些全功能编辑器是适合手工编写网页的综合工具。以下是一些例子:

Linux 操作系统

蓝鱼 [1
科莫多编辑 [2 ]

Mac OS 系统

bbedit[3 的缩写形式
文字包裹器 [4

Windows 操作系统

EditPad Lite(有免费版 [5 ]和低价版 [6 )
EditPlus [7
NotePad++(免费、开源 [8 ])
TextPad(低成本、免费评估 [9 ])

跨平台

Arachnophilia(适用于 Windows、Linux、Unix、FreeBSD 和 Mac OS [10 ])

¹ 一些开发人员不使用该功能，而是手动打开所需的浏览器。

举个例子，我们来看看 Notepad++的主要特性。这是一个多文件编辑器，具有方便的文件管理器选项。例如，编辑器只需单击一下即可保存多个文件，打开最近编辑过的文件，并为每个打开的文件提供选项卡。它有一个完全可定制的界面，具有高级功能，如线条标记、打开和关闭标签对的指南、折叠或显示当前编辑的 DOM 树级别的结构化指南，以及语法高亮(图 11-1 )。

images

***图 11-1。*Notepad ++中的语法高亮显示和标签对指南

语法高亮支持多种编程和 web 开发语言，从 HTML 到 XML，从 PHP 到 Ruby。有几个预定义的颜色主题可供选择，如果需要，您也可以创建并应用新的主题。不同的文档组件(缩进参考线、标记、标记、空白、标签对、活动和非活动标签等)可以单独设置样式。记事本++可以改变文件的文字方向。它还支持各种字符编码，可以添加和删除字节顺序标记，支持大端和小端 Unicode 文件，并将文件从一种编码转换为另一种编码。 ² 应用中打开的文档可以在任何安装的浏览器中预览。

Notepad还提供了高级的文本转换功能，例如转义某些字符、将小写字符转换为大写字符(反之亦然)、搜索匹配字符串、将十进制数字转换为十六进制数字、插入当前日期和时间、对列表进行升序或降序排序、自动将前导空格转换为制表符等等。Notepad也支持宏，可以多次运行。特性列表可以通过额外的插件来扩展，例如 Base64 编码和解码的 MIME 工具。

所见即所得编辑

图形创作工具可能很舒适，但是不能保证在所有情况下都符合标准。它们的功能甚至对高级开发人员也很有用，并且它们提供了一个带有标记窗口、即时预览和高级调试工具的界面。然而，并不是所有的开发人员都应用它们，有些人专门使用高级文本编辑器。图形开发环境通常只需要标记和 CSS 的基础知识(有时不需要任何技术背景)，这是它们非常受欢迎的主要原因。然而，由于大量的功能，可能会有可用性问题。例如，界面可能会让一些用户感到困惑和害怕，尤其是那些没有几年专业知识的用户。尽管有图形界面，有些系统还是很难掌握。此外，所有这些工具都有不同的界面，其中一个工具的专家不一定熟悉其他系统，这是一个限制，特别是如果编辑器只适用于一个平台。相比之下，手工编码者几乎可以在任何环境下工作，因为文本编辑器可用于所有平台，并且它们的主要功能非常相似。

值得注意的是，大多数所见即所得编辑器都有内置的源代码编辑器。因此，WYSIWYG 编辑器也可以作为源代码编辑器使用。此外，图形编辑器的一些特性对任何 web 开发人员都是有用的，比如数据库管理、web 服务器和框架。此外，还有专门用于 web 标准化的 WYSIWYG 编辑器，如 XStandard XHTML 和 W3C Amaya ( 图 11-2 )。

² 此功能可用于某些编码，这些编码可以合理地转换成另一种更高级的编码，而不会牺牲某些字符(例如，ANSI 到 UTF-8)。

images

**图 11-2。**阿玛亚的一个 SVG 文件

有许多商业和免费的编辑工具。然而，与高级文本编辑器和源代码编辑器相比，许多商业所见即所得编辑器都很昂贵。另一方面，有几个图形开发者不仅是免费的，而且是开源的。以下是一些例子:

Windows 操作系统

微软表情网页 12
微软网站矩阵 13

跨平台

适用于 Windows 和 Mac OS 的 Adobe Dreamweaver(商业版) [14
W3C Amaya，一个免费的开源 HTML、MathML 和 SVG 编辑器 [15
XStandard XHTML，符合标准的 XHTML 编辑器，可用于 Windows 和 Mac OS(免费精简版) [16 ]

业界领先的创作应用 Dreamweaver 的标准合规性在不断发展。然而，web 标准花了几年时间才引起人们的注意。

最新版本支持 HTML、CSS、XSLT、JavaScript、ActionScript、XML、ASP、ColdFusion、JSP 和 PHP。Dreamweaver 中的一些功能和工具不仅对一般开发有用，而且对符合标准的开发也有用。例如，无效代码突出显示、信息栏中显示的语法错误警告、与当前选定元素关联的 CSS 属性列表以及语法突出显示。程序界面具有高度的可定制性，并以不同的模式显示代码、结果或同时显示两者(图 11-3 )。

images

***图 11-3。*代码和设计可以在 Adobe Dreamweaver 中同时显示。

内容管理系统和博客

内容管理系统(CMSs)是主要为 web 内容创作和博客发布开发的 WYSIWYG 工具。很多都是 PHP 驱动的。最知名的内容管理系统都是跨平台的，比如 Drupal [17 ]，Joomla！ [18 ，还有 WordPress [19 ]。除了 web 发布的常见任务之外，它们还提供现代功能，如语义内容支持。然而，CMSs 的标准支持各不相同。毫无疑问，他们是网络上大量无效标记的罪魁祸首。图 11-4 显示了一个典型的例子。

images

***图 11-4。*CMS 生成的每十行标记中的错误和警告

因为它们是为快速开发而设计的，不需要源代码编辑，有经验的 web 标准化人员会尽可能避免使用它们。虽然有越来越多的 CMS 声称可以产生符合标准的代码(LiveStoryboard [20 ]、WebDandy [21 ]、sNews [22 ]等等)，但是它们中的大多数都没有提供一个整体的标准实现方法；但是，有些会产生接近最佳的合理标记代码。

网络标准支持

编辑对标准的支持各不相同。几个工具知道某些标记版本或变体，而其他工具只支持部分 CSS(表 11-1 )。不存在最终的解决方案，但是任何综合的工具都可能是手工编码者的好选择。例如，BlueFish 不仅支持所有(X)HTML 版本和变体，还支持 RSS、Atom、MathML、CSS2、frames、JavaScript、Java、XSLT、XForms 和 XPath。

images

具体编辑

除了高级文本编辑器之外，web standardistas 的工具集中还有一些不可错过的特殊工具。这些工具包括语义编辑器、标记纠正器、特殊编辑器、SFTP 客户端和浏览器插件。

语义编辑器和推理器

随着 OWL 的日益流行，越来越多的 OWL 开发工具出现在市场上。Web 本体是机器可处理的，语义推理机(也称为推理引擎或规则引擎)可用于从本体描述的事实或公理中推断逻辑结果。下面描述一些最有用的语义编辑器和推理机。

Protégé 是一个免费的开源框架 [23 ，也是使用最广泛的 OWL 编辑器之一。它是开发和测试本体的有效工具。Protégé支持多种文件格式和语法，包括 OWL、函数语法中的 OWL、曼彻斯特语法中的 OWL、RDF/XML、OBO 平面文件、KRSS2、Latex 和 Turtle。它不仅可以直接打开保存的文件，还可以打开在线本体。

是一个 OWL 推理机，可以用来确定本体的一致性，识别类之间的关系，以及进一步的任务。它可以在命令行、Java 应用中使用，或者作为一个被保护的插件使用(图 11-5 )。

images

***图 11-5。*运行在门徒中的隐士推理者

《隐士》是根据 LGPL 许可证 [24 ]发行的。 TopBraid Composer 是一款用于数据建模和语义数据处理的图形化开发工具，支持 RDF、OWL 和 SPARQL [25 ]等标准。 Pellet 是用于 Java 的 OWL 2 推理机 [26 ]。 RacerPro 2.0 支持 RDF、RDFS、OWL Lite、OWL DL 和 SPARQL 等标准。也可以连接外部软件 [27 ]。FaCT++是兼容 OWL DL 和 OWL 2 [28 ]的描述逻辑推理机。

MathType

MathType 是由 Design Science 开发的数学符号高级编辑器。方程式和注释可以通过强大的图形用户界面进行编辑(图 11-6 )。

images

***图 11-6。*MathType 中的方程式编辑

该软件适用于 Windows 和 Mac OS [29 ]。该编辑器通常嵌入到 Microsoft Word 中，以取代方程式编辑器(根据 Word 版本，可以作为新菜单或新功能区)，但它也可以用于其他文字处理器，如 OpenOffice、Google Docs 或 Apple Pages。在 MathType 中编辑的数学注释也可以导出到 MathML 和 LaTeX。事实上，使用 MathType 是生成 MathML 最简单的方法之一。除了 MathType，W3C 浏览器/编辑器 Amaya 也可以用来生成 MathML。

标记修正器

尽管复杂的标记组件(如元数据)需要人工决策，但传统的(X)HTML 标记元素和属性可以可靠地自动更正。它们在许多情况下是有用的；然而，标记校正器不能取代手工编码的网络标准。与开发人员相反，软件工具并不总是支持最新的标准；其中一些已经停产，或者将在标准发布日期几年后更新。

HTML 整洁

HTML Tidy 是一个标记修正器，修复无效的 HTML，改进标记的布局和缩进样式。这个工具是由戴夫·拉格特开发的，他是 W3C 的几个标记规范的合著者和编辑。因为它是用 ANSI C 编写的，所以预编译的二进制文件可用于各种平台，并且可以为其他平台编译。HTML Tidy 可以在 W3C 许可下在 Sourceforge.net 获得(既有可下载的二进制代码也有源代码) [30 ，或者作为在线服务在 W3C [31 ]获得。

该软件可以识别和纠正缺失或不匹配的结束标记、混淆的标记和引号，并根据预定义的样式 [32 ]更改标记布局。

整理为 PHP

PHP 脚本生成的 HTML 标记可以被 PHP 扩展 Tidy 检查和纠正。例如，可以编写一些函数，将 HTML 标记片段作为字符串，并通过 HTML Tidy 运行它们。输出是有效的标记。这种方法使得自动页面处理和标准化成为可能。如果代码中有错误，位置(行、列)和错误原因被清楚地指出或自动纠正 [33 ]。

日志验证器

W3C 日志验证器“将服务器日志分析引擎与批量验证、链接检查和其他面向质量的处理结合起来，逐步改进和维护网站质量” 34 。它会查找最常下载的无效文档、断开的链接、其他错误和不一致，并设置修复它们的优先级列表。此功能旨在通过一次只更正一定数量的文档来逐步标准化大型无效网站。最终，整个网站将被修复，但标准化组织可以决定如何安排开发时间和精力。

日志验证器应用处理模块，根据标记和样式表建议验证最新的服务器日志(根据 W3C HTML 和 CSS 验证服务)。SurveyEngine 模块为可能影响网站整体质量的最流行文档创建错误摘要。基本处理模块仅根据流行度生成文档列表。日志验证器支持三种类型的输出:原始、邮件和 HTML。

作为开发工具的浏览器

尽管 web 浏览器的主要目的是处理和呈现 web 文档，但是它们也可以用于开发和标准化。通过关闭样式表和非文本内容或者应用基于文本的浏览器，可以有效地评估可访问性。

调试和附加组件

浏览器中有各种内置的调试功能，如 Internet Explorer 中的开发者工具(工具开发者工具或 F12) [35 ]，Safari 中的开发者工具(编辑首选项在菜单栏中显示开发者菜单) [36 ]，或 Opera 中的开发者模式(查看开发者工具) [37 。

浏览器还可以通过安装开发者插件来扩展附加功能，其中许多插件是免费提供的。

Firefox 有许多对开发人员有用的附加组件。例如，HTML Validator 是一个扩展，它在 Firefox [39 ]中添加了 HTML 验证。它在浏览时会在状态栏中以图标的形式清楚地指示标记错误的数量。Live HTTP Headers 在浏览 [40 ]时显示页面的 HTTP 标题。FireFTP 是一个免费、安全、跨平台的浏览器 FTP 客户端。用户代理切换器扩展添加了一个菜单和一个工具栏按钮来切换浏览器的用户代理 [42 ]。IE 选项卡扩展支持从 IE6 到 IE9 的 Internet Explorer 呈现，这对于测试目的很有用 [43 ]。web developer 扩展为浏览器添加了各种 Web Developer 工具，例如禁用某些样式或按媒体类型显示 CSS 的选项 [44 ]。Firefox 最全面的开发者插件之一是 Firebug [45 ]。它将几个开发工具集成到浏览器中，直接编辑、调试和监控 HTML、CSS 和 JavaScript ( 图 11-7 )。

images

***图 11-7。*萤火虫在行动

这些火狐工具中的一些也可以在 Chrome 下使用(例如，Firebug [46 ]，Web Developer [47 ])，没有 Chrome 版本的工具也有 Chrome 的对等版本(例如 IE Tab [48 ])。Chrome ⁴⁹ ]下还有很多其他的开发者工具，比如 W3C html 5&CSS3 Validator[50]，Validity 验证地址栏的标记(或者用热键验证) [51 ]，colorPicker [52 ]，XML Tree [53 ]，Resolution Test [54 ，只是为了

在文本浏览器中测试网页

在 Lynx [55 ]等文本浏览器中测试网站是检查信息可用性的最佳方法，无需样式和图形 ³ 以及可访问性。适当设计的网页内容在文本浏览器中仍然是可用的(图 11-8 ),而大部分网站却不是这样。

默认情况下，Lynx 无法显示非文本内容，但可以从 Lynx 启动外部程序，如图像查看器或视频播放器。

images

***图 11-8。*在 Lynx 中浏览可访问的网站

查看源代码

Web 浏览器提供了查看当前打开的网页的源代码的选项(通常通过选择查看源代码或页面源代码，从本地菜单中选择类似的菜单项，或者按 Ctrl/Cmd+U 或在 Safari 中按 Ctrl/Cmd+Alt+U)。此功能可用于分析标记和站点的其他组件。尽管向其他开发人员学习非常有用，但重要的是要记住，大量网站不符合标准，不应被视为参考或最佳实践。

网站内容的版权和产生它的标记代码的版权是不同的。一般来说，未经许可从其他网页派生的代码是不允许发布的。

总结

在这一章中，你学习了如何选择开发工具，独立于你偏好的平台。到现在为止，你应该知道有效工作所需要的重要特性，比如对控制字符和特殊字符(比如 BOM)的支持。网站标准化最基本的工具是一个高级的文本编辑器，一个精心选择的软件工具组合可以加速你的网站标准化工作，包括重新设计和从头开始的项目。

在你掌握了前几章描述的标准、方法和知识之后，是时候将理论应用于实践了。在下一章中，所有这些都将在逐步指南中一起使用，以提高您的标准化技能。

参考文献

Sessink O (2011)蓝鱼。蓝鱼项目组。bluefish.openoffice.nl/2011 年 2 月 5 日访问
科莫多软件公司(2011 年)。活动状态软件。www.activestate.com/komodo-ide2011 年 2 月 5 日访问
裸机软件(2011) BBEdit。裸机软件公司www.barebones.com/products/bbedit/。2011 年 2 月 5 日访问
裸机软件(2011) TextWrangler。裸机软件公司www.barebones.com/products/textwrangler/index.html。2011 年 2 月 5 日访问
Goyvaerts J (2011) EditPad Lite。刚伟软件有限公司www.editpadlite.com。2011 年 2 月 5 日访问
Goyvaerts J (2011) EditPad Pro。刚伟软件有限公司www.editpadpro.com。2011 年 2 月 5 日访问
ES-Computing(2011)EditPlus–文本编辑器、HTML 编辑器、PHP 编辑器和 Java 编辑器 Windows 版。ES-计算。www.editplus.com2011 年 2 月 5 日访问
何 D 等人(2011) Notepad++。唐浩。notepad-plus-plus.org2011 年 2 月 5 日访问
HELIOS (2011) TextPad。Helios 软件解决方案。www.textpad.com/products/textpad/index.html2011 年 2 月 5 日访问
卢图斯 P (2009)嗜蜘蛛主页。www.arachnoid.com/arachnophilia/保罗·路特斯。2010 年 10 月 13 日访问
htmlArea (2011)所见即所得编辑器目录。htmlArea。www.htmlarea.com2011 年 2 月 5 日访问
微软(2011)微软表情网。微软公司。www.microsoft.com/expression/products/Web_Overview.aspx2011 年 2 月 5 日访问
微软(2011)微软公司。www.microsoft.com/web/webmatrix/2011 年 2 月 5 日访问
Adobe (2011) Adobe Dreamweaver。Adobe 系统公司。www.adobe.com/products/dreamweaver/2011 年 2 月 5 日访问
金特五世(编辑)(2010 年)。万维网联盟。www.w3.org/Amaya/2011 年 2 月 5 日访问
Belus Technology(2011)x standard XHTML(Strict 或 1.1)所见即所得编辑器。符合标准的 XHTML 编辑器。贝卢斯科技公司xstandard.com/。2011 年 2 月 5 日访问
Buytaert D (2011) Drupal。德赖斯·布塔尔特。drupal.org2011 年 2 月 5 日访问
Moffatt S 等人(2011) Joomla！www.joomla.org 开放源码公司。2011 年 2 月 5 日访问
Mullenweg M，Boren R，Jaquith M，Ozz A，Westwood P (2011 年)。wordpress.org/2011 年 2 月 5 日访问
live story board(2011)live story board web 内容管理。Web 标准节省时间，降低成本，增加灵活性——不要忽视它们。liveSTORYBOARD 公司www . live story board . com/Benefits/CMS-standards-compliant . html。2011 年 9 月 16 日访问
Web Dandy (2011) Web Dandy 内容管理系统-可访问性成为标准。www.webdandy-cms.co.uk/w3c-standards.htm。2011 年 9 月 16 日访问
s news(2011)s news——轻量级内容管理系统。snewscms.com2011 年 9 月 16 日访问
斯坦福大学(2010)的 Protégé Ontology 编辑器和知识获取系统。斯坦福生物医学信息学研究中心。protege.stanford.edu/2010 年 10 月 29 日访问
Motik B，Shearer R，Glimm B，Stoilos G，Horrocks I (2011)隐士猫头鹰推理者。牛津大学。hermit-reasoner.com/2011 年 3 月 1 日访问
TopQuadrant (2011) TopBraid 作曲人。TopQuadrant 公司www.topquadrant.com/products/TB_Composer.html。2011 年 3 月 1 日访问
Parsia (2010) Pellet:开源 OWL 2 推理器。克拉克&帕西亚有限责任公司。clarkparsia.com/pellet2010 年 10 月 29 日访问
Haarslev V，Hidde K，ml ler R，Wessel M 等人(2011) RacerPro。赛车手系统有限公司&公司www.racer-systems.com。2011 年 3 月 1 日访问
Tsarkov D 等人(2011) FaCT++。德米特里·察尔科夫等人code.google.com/p/factplusplus/。2011 年 3 月 1 日访问
设计科学(2011)MathType–方程式编辑器。设计科学。www.dessci.com/en/products/mathtype/2011 年 3 月 1 日访问
Raggett D，Paehl D，Nelson C，Hennecke C，Teague T (2008) HTML 整洁库项目。SourceForge.net:免费查找、创建和发布开源软件。tidy.sourceforge.net2011 年 9 月 15 日访问
整理你的 HTML。万维网联盟。services.w3.org/tidy/tidy2011 年 9 月 15 日访问
用 HTML TIDY 清理你的网页。戴夫·拉格特。www.w3.org/People/Raggett/tidy/2011 年 3 月 1 日访问
PHP 小组(2011)PHP:Tidy-manual。PHP 小组。php.net/manual/en/book.tidy.php2011 年 3 月 1 日访问
Thereaux O，Dubost K，Bless T，Skytta V，Cope AS，雷日奇 S 等人(2007) LogValidator。万维网联盟。www.w3.org/QA/Tools/LogValidator/2011 年 3 月 1 日访问
微软(2010)用开发者工具调试 HTML 和 CSS。微软公司。msdn . Microsoft . com/en-us/library/DD 565627(v = vs . 85)。aspx 。2011 年 3 月 2 日访问
苹果(2011) Safari 开发者工具。苹果公司developer . apple . com/technologies/safari/developer-tools . html。2011 年 9 月 16 日访问
Bovens A (2010) Opera 扩展开发人员工作流程。Opera Software ASA。dev . opera . com/articles/view/opera-extensions-developer-workflow/。2011 年 3 月 2 日访问
Mozilla (2011)网络开发::Firefox 的附加组件。Mozilla 基金会。addons . Mozilla . org/en-US/Firefox/extensions/we B- development/。2011 年 3 月 2 日访问
Gueury M (2011) Html 验证器。Mozilla corp . https://addons . Mozilla . org/en-us/Firefox/addon/html-validator/。2011 年 9 月 16 日访问
Savard D，Coukouma N (2011)实时 HTTP 报头。Mozilla corp . https://addons . Mozilla . org/en-us/Firefox/addon/live-http-headers/。2011 年 9 月 16 日访问
uvalo M (2011 年)FireFTP。Mozilla 公司addons.mozilla.org/en-US/firefox/addon/fireftp/。2011 年 9 月 16 日访问
Pederick C (2011)用户代理切换器。Mozilla corp .addons . Mozilla . org/en-US/Firefox/addon/user-agent-switcher/。2011 年 9 月 16 日访问
Mozilla (2011) IE 标签 V2。Mozilla corp .addons . Mozilla . org/en-US/Firefox/addon/ie-tab-2-ff-36/。2011 年 9 月 16 日访问
Pederick C (2011)网页开发者。Mozilla 公司addons . Mozilla . org/en-US/Firefox/addon/we b-developer/。2011 年 9 月 16 日访问
Hewitt J .和 Odvarko J .等人(2011 年)。Mozilla 公司getfirebug.com/。2011 年 9 月 16 日访问
Simonetti P (2011)为谷歌浏览器开发的 Firebug Lite。Mozilla 公司getfirebug.com/releases/lite/chrome/。2011 年 9 月 16 日访问
Pederic C (2011)网络开发人员。Mozilla corp .chrome . Google . com/web store/detail/bfbameneiokkkgbdmiekhjnmfkcnldhhm。2011 年 9 月 16 日访问
Blackfish (2011) IE Tab。黑鱼软件。https://chrome . Google . com/web store/detail/hehijbfgiekmjfkfjpbkbammjbdenadd。2011 年 9 月 16 日访问
49 谷歌(2011)谷歌 Chrome 开发者工具页面。谷歌公司chrome.google.com/webstore?类别= ext % 2 F11-网络开发。2011 年 9 月 16 日访问
cebeci g(2011)W3C html 5&CSS 3 验证器。chrome . Google . com/Webster/detail/idfkidbjjecdefblbikogdknfp。2011 年 9 月 16 日加入
Renyard I (2011)有效期。伊恩·伦亚德。chrome . Google . com/web store/detail/bbicmjjbohdfglopkidebfccilipgeif。2011 年 9 月 16 日访问
太多 P (2011) colorPicker。彼得·戴特。chrome . Google . com/Webster/detail/jeimeildimppbfayellilaedkdo。2011 年 9 月 16 日加入
Stroop A (2011) XML 树。艾伦·斯特鲁普。chrome . Google . com/web store/detail/gbambbheopgpmaagmckhpjbfgdfkpadb。2011 年 9 月 16 日访问
Beckford B (2011)分辨率测试。本·贝克福德。chrome . Google . com/web store/detail/idhfcdbheobinplaamokffboaccidbal。2011 年 9 月 16 日访问
Dickey T 等人(2011)猞猁来源分布和百花香。互联网软件联盟。lynx.isc.org/2011 年 3 月 2 日访问

十二、把这一切放在一起

熟悉某些技术和标准并不足以标准化无效站点和从零开始开发有效站点。网站标准化总是一项复杂的工程，它同时考虑到各种各样的需求。该列表包括但不限于完全符合标准；最佳码长；互操作性；有意义的、结构化的和可访问的内容；充足的元数据；和适当的设置。通过本章提供的一系列分步指南，可以最有效地学习如何创建有效的代码。

熟悉 web 标准之后，是时候学习如何在文本编辑器中从头开始创建基本的符合标准的 web 站点组件，并为您的 web 页面扩展它们了。您将学习的大多数 XHTML 1.0 Strict 代码片段都可以用作 XHTML 项目和新 HTML 项目的 HTML5 标记的基础。您将看到如何使用缩进来创建清晰、易于维护的标记，并在开始标记之后立即提供结束标记，以避免遗漏标记。本指南还展示了从段落到列表、从表格到表格的结构元素的合理、合乎逻辑的使用。掌握列表、表格、对象和表单的基本结构后，您将能够扩展、修改和标准化相应的标记元素，即使标记相当长且复杂，也不会迷失在细节中。 ¹

选择相关标准

在网站标准化中，没有终极选择。浏览器支持和开发人员的关注点在不断变化。大多数开发人员至少对 W3C 推荐标准有所了解；然而，也有其他标准化组织发布的标准，如 ERCIM、IETF、WaSP 或 WSG(如第一章中所述)。即使开发人员完全掌握了标准，也不一定能恰当地应用它们。

标准的选择对网站标准化的每个过程和未来的可能性都有严重的影响。当考虑各种标记语言及其变体之间的相似性和差异时，应该在设计和开发阶段之前做出选择。

标准之间的切换

这是一个常见的误解，即不惜一切代价立即应用最新技术是开发现代网站的关键。事实上，没有最终规范的最新技术不推荐使用。最新的标准(带有 W3C 状态“推荐”)应该被专有地应用，并且可能被改变的工作草案不应该被使用。例如,没有理由使用有效的 XHTML 标记将网站更新为 XHTML5(更不用说 HTML5 了),除非该规范中引入的新元素在网站上是必需的。主要原因是这些技术的采用和标准化程度不同。此外，应用这些技术的网站不能被验证(或者验证器提供这个特性只是作为一个实验工具)。此类网站的用户可能会面对无法工作的组件，被提示下载未知类型的文件，等等。功能性和可用性比不正确地使用最新的、未定稿的规范更重要(图 12-1 )。

¹ 本章中的每个分步指南都侧重于某个元素或元素组以及相应的标记元素。当添加额外的内容和属性时，标记的复杂性会急剧增加，但基本结构总是保持不变。

images

***图 12-1。*现代标记应用不正确。有什么意义？

另一方面，如果 web 开发人员想要保持竞争力，他们就不应该落后。此外，他们应该让他们的客户或老板相信高质量代码和开发时间的重要性，这通常与直接的商业利益相冲突。

逐步发展

使用有效的标记、样式、语义内容和可访问的代码创建符合标准的网站应该是开发网站的首选方式。您可以通过在开发过程中验证标记、样式表和其他组件(如 feed channel)来验证个别技术是否符合标准。然而，整个网站完全符合标准要比这复杂得多。正如本书中所讨论的，完全的标准符合性包括有效的字符编码(最好是有效的 UTF-8)、有效的 HTML 或有效的 XHTML 标记(越严格越好)、有效的 CSS、有效的 RSS 或有效的 Atom 新闻提要、有效的 RDF、有效的元数据、有效的 XML、有效的对象嵌入、有效的脚本嵌入、WCAG 2.0 和 Section 508 一致性、可访问性友好、语义 Web 技术的应用、独立于浏览器和分辨率的代码，以及正确的服务器设置，这只是提到的最重要的几个。

从零开始

通常，从头开始创建网站时，应该执行下列核心任务:

确定文档类型。
创建index.html文件。必须提供所有必需的元素，以及强烈推荐用于结构化的元素。 ² 一般来说，html 元素应该被用作所有 HTML 和 XHTML 文档的根元素。标记文档应该包含一个文档头(在<head>和</head>之间)和一个文档体(由<body>和</body>分隔)。除了 HTML 4.01 和 XHTML 中使用的通用容器div和段落p，或者更具体的 HTML5 结构化元素header、article和section，网页内容的内聚部分应该有标题。在(X)HTML 中，有六个级别的标题:h1、h2、h3、h4、h5、h6(从最大到最小)。不应跳过级别(例如，在没有h3而只有h1和h2的文档中应用h4)。
倍增文件。精心应用的复制和粘贴减少了手工编码人员的开发时间。它提供了整个站点的完整性；但是，如果修改了初始文件，则应该对所有文件进行修改。这种修改在动态站点上通常更容易，因为动态站点通常集中存储相同的部分。
使用基本布局、颜色和字体样式的初始设计创建主样式表文件(例如，main.css)。应该预先确定主要的设计概念。
提供可选元素。哪些可选元素是合理的取决于项目。在大多数情况下，建议使用各种meta元素。几个link元素也经常被应用，包括但不限于到外部文件的链接，例如 Atom 或 RSS 新闻提要(atom.xml、rss.xml)、网站图标(favicon.ico)或可选元数据(metadata.rdf、foaf.rdf、doac.rdf)。
添加有用的扩展。有用和免费的网站扩展和 API 的数量在不断增加。有些是谷歌分析跟踪代码(JavaScript)，互动谷歌地图的联系方式，或类似的社交网络和推特按钮。虽然它们很受欢迎，并被数百万人使用，但大多数都没有标准化。黄金法则是，您必须小心避免第三方软件开发人员提供的无效嵌入代码。

images 注意这并不意味着你必须牺牲第三方内容，因为许多无效的嵌入代码可以用符合标准的方式重写。

根据客户需求完成其他任务。
在 web 服务器上设置主机。
除了最简单的静态网站，所有的网站都采用服务器端的脚本和应用，并具备必要的技术支持和配置。这些取决于用户需求。
上传并安装。
- 静态文件可以直接上传到 web 服务器。
- 服务器端应用通常有一些应该上传到服务器的安装文件。可以在服务器上执行这些文件来安装和配置应用。
通过域共享网站。

开发工具通常会提供模板和框架文档来开始你的工作。甚至文本编辑器也有插入标记元素的选项，这可能比键入要快。

请注意，这些任务没有固定的顺序，尽管有些任务总是在其他任务之前。此外，这些步骤适用于静态网页。如果站点依赖于服务器端脚本，步骤取决于系统的类型。

遵循下一节中讨论的基本原则是从头开始开发符合标准的代码的良好起点。网站组件列表无论如何都是不完整的。但是，这些示例中的大多数可以应用于各种标记语言和样式表，并且经常应用于网站开发。

images 注意步骤命令的顺序只是一个建议。

XHTML

XHTML 1.0 Strict 文档可以通过以下步骤开发。通过应用所需的文档类型，可以类似地创作其他 XHTML 文档。

创建 XML 声明。<?xml version="1.0" encoding="UTF-8"?>
添加文档类型声明。<?xml version="1.0" encoding="UTF-8"?> **<!DOCTYPE html ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg)** ** PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg)** **"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">**
添加具有默认命名空间和语言设置的根元素。`

`
还可以根据请求添加额外的名称空间。
添加文档头和文档体。`
****

`
添加文档标题。`
**XHTML Document Sample** `
添加标题内容，包括元数据、基本 URI、链接和脚本。虽然它们是可选元素，但其中许多是经常使用的。其中最常见的是指向外部 CSS 文件的链接:
- 用文件路径或 URI 创建一个基本链接。如果使用 XHTML 语法，则需要自结束。<link href="styles/main.css" />
- 设置链接类型。<link **type="text/css"** href="styles/main.css" />
- 确定链接角色。<link **rel="stylesheet"** type="text/css" href="styles/main.css" />
- 设置媒体类型(可选)。<link rel="stylesheet" type="text/css" **media="all"** href="styles/main.css" />
标题内容可以根据请求任意扩展，例如使用来自外部词汇表(如 DC)的元数据。具有高度定制内容的典型标题部分如下所示:`
XHTML Document Sample
`
添加正文内容。`
XHTML Document Sample `

(X)HTML5

(X)HTML5 文档可以通过以下步骤开发:

创建文档类型声明。<!DOCTYPE html>
添加根元素。`

`
添加文档头和文档体。`
****

`
添加标题。与上一节中讨论的示例类似，可以任意添加元数据、基本 URI、链接和脚本。`
**Sample HTML5 document structure** `
添加字符编码声明。`
Sample HTML5 document structure **** `
提供内容。`
Sample HTML5 document `

链接

超链接是网页的基本元素，可以按如下方式开发:

提供基础锚。它可以是外部站点的 URI，如下所示:<a href=**"http://www.example.com"**>
- 或者站点内的路径，如下所示:<a href=**"gallery/"**>
- 超链接也可以指向带有片段标识符的文档片段(由id属性标识)。这里有一个例子:<a href="gallery/canada.html**#calgary"**>
设定目标(如果需要)。外部链接通常会在新窗口中打开。这里有一个例子:<a href="http://www.example.com" **target="_blank"**>
添加跳转索引以提高可访问性(可选)。<a href="http://www.example.com" **tabindex="5"** target="_blank">
确保外部链接不会影响你网站的页面排名(可选)。<a href="http://www.example.com" **rel="nofollow"** tabindex="5" target="_blank">
- 步骤 2 和 4 仅适用于外部链接。

图像

图像嵌入了img元素。如果使用 XHTML 语法，则需要自结束。图像文件的位置由src(源)属性决定。

嵌入基本图像。<img src="img/logo.png" />
提供在图像无法显示的情况下可以呈现的替代内容(可访问性的基础)。<img src="img/logo.png" **alt="The logo of Big Profit Company"** />
提供当用户将鼠标移动到图像上时显示的文本(可选)。它可以与替代文本相同，也可以不同。<img src="img/logo.png" alt="The logo of Big Profit Company" **title="The logo of Big Profit** ** Company"** />

列表

有序列表(ol)和无序列表(ul)的列表项都由<li>和</li> ( 清单 12-1 )分隔。

***清单 12-1。*有序和无序列表中的列表项结构

<ol> <ul> **<li></li>** **<li></li>** **<li></li>** **<li><li>** … … **<li></li>** **<li></li>** </ol> </ul>

无序列表可以创建如下:`
`
列表项可以任意添加。`
- Apricot
- Cherry
- Peach
`

定义列表定义了定义术语(dt)及其描述(dd ) ( 列表 12-2 )。

***清单 12-2。*定义列表示例

<dl> ** <dt>** <label>Web site development</label> ** </dt>** **<dt>**RDF**</dt>** **<dd>**A W3C acronym for Resource Description Framework, an XML specification for ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) metadata models.**</dd>** **<dt>**RSS**</dt>** **<dd>**Really Simple Syndication. An XML format for frequently updated content, e.g., ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) news headlines, blog entries.**</dd>** </dl>

列出可访问性

可以通过添加 accesskey 和 tabindex 等元素来提高列表的可访问性。这里有一个例子:

<ul> <li> <a href="http://www.example.com/" title="Home" **accesskey="h" tabindex="1"**>Home</a> </li> <li> <a href="about/" title="Introduction" **accesskey="a" tabindex="2"**>About</a> </li> <li> <a href="gallery/" title="Gallery" **accesskey="g" tabindex="4"**>Gallery</a> </li> <li> <a href="shop/" title="Webstore of oil paintings" **accesskey="s" tabindex="6"**>Shop</a> </li> <li> <a href="exhibition/" title="Exhibitions" **accesskey="e" tabindex="7"**>Exhibitions</a> </li> <li> <a href="contact/" title="Address and phone" **accesskey="c" tabindex="7"**>Contact</a> </li> </ul>

样式列表

您可以将无序列表用于比简单列表更复杂的目的。它们通常用于创建菜单。 ³ 典型的水平菜单会覆盖默认的显示样式，如清单 12-3 所示，以便将列表项呈现在彼此旁边而不是下方。

***清单 12-3。*内嵌显示的列表项目样式

li { ** display: inline;** }

这种列表项的超链接经常使用的一种简单样式是底部边框。

***清单 12-4。*菜单超链接的底部边框

**a:hover {** color: #949295; ** border-bottom: 1px solid #949295;** }

自然，这种风格很少在全球范围内应用。相反，它使用列表的标识符或其容器父元素(如#main a:hover或#navtabs li a:hover)进行扩展。

创建自定义导航效果的常用技术是向列表项添加背景图像。清单 12-5 显示了一个例子。

***清单 12-5。*带背景图片的自定义导航效果

li { ** background: url('img/navbg.png') 5px no-repeat;** padding-left: 16px; }

如果某些链接，比如第一个、最后一个或当前选择的链接，具有不同于所有其他链接的样式，那么应该为它们提供唯一的标识符(清单 12-6 )。

***清单 12-6。*第一项和最后一项更具体的规则

li id="first">

Contact

第一个规则集的样式如清单 12-7 所示。

XHTML 2.0 还为导航列表提供了更具体的元素 nl。

***清单 12-7。*第一个列表项目的特定规则集

**li.first {** background: none; padding-left: 0; }

如果项目不仅仅是一个小的网页，这些样式不应该被全局应用，因为这些特定的样式将被应用到整个文档中的所有列表，其中大部分应该被覆盖(将有更多的样式规则被覆盖，而不是继承的规则来满足我们的需要)。相反，应该在列表中添加一个标识符，如清单 12-8 中的所示。

***清单 12-8。*用于导航的无序列表被识别为不同样式

Home

Contact

从现在开始，所有的风格都要以#navtabs ( 清单 12-9 )开头。

***清单 12-9。*为无序列表navtabs 的第一个列表项设置样式的特定规则集

**#navtabs li.first {** background: none; padding-left: 0; }

或者，可以在容器级别声明样式，并使用继承来设置列表的样式。 ⁴ 当文档中使用了多个样式相同或略有不同的列表时，这种方法很有用。这种差异很容易被更具体的样式规则覆盖。

可以为访问键和其他功能声明其他样式。例如，清单 12-10 中的标记可以用清单 12-11 中显示的 CSS 规则来样式化。

***清单 12-10。*一个用于样式化访问键的跨度

**S<span class="ak">i</span>**temap

***清单 12-11。*访问键的 CSS 规则

span.ak { color: red; background-color: #ffffbb; border-bottom: solid navy 1px; }

⁴ 注意，在这种情况下，标记中的标识符应该从 id 改为 class，从散列符号(#)改为句点(。)在 CSS 中。

CSS 可以将默认项目符号更改为任意字符或图像。清单 12-12 展示了一个例子，它适用于无序列表，比如清单 12-13 中的列表。

***清单 12-12。*子弹图像

ul.tick { ** list-style-image: url('img/tick.png')** }

***清单 12-13。*应用清单 12-12 中呈现的自定义项目符号样式

The major benefits of standard compliance

<ul class="tick">

Resolution independence

Browser independence

Interoperability

Robust functionality

结果在视觉上比带有普通项目符号的列表更吸引人(也更具体)。

janu images

***图 12-2。*用 CSS 自定义项目符号

表格

我们假设一个 5x5 的 iPhone 机型对照表需要呈现在一个网页上(表 12-1 )。

images

所有表格都应该有一个开始和结束标记。`
`
表格行应该由<tr>和</tr>分隔。第一行是这样开始的:`

`
表头单元格应写在<th>和</th>之间。由于所需的表格有五列，因此需要五个标题单元格元素:`

`
应该为第一行数据单元开始新的一行。`

`
数据单元格应该由td标签提供。由于所需的表格有五列，每行需要五个数据单元元素。`

`
由于行的结构相同，包含五个数据单元格的表格行可以通过简单的复制和粘贴操作复制三次:<table> <tr> <th></th><th></th><th></th><th></th><th></th> </tr>
`

`

最后，单元格应该填入数据:`

images

Model	iPhone	iPhone 3G	iPhone 3GS	iPhone 4
Preinstalled OS	iPhone OS 1.0	iPhone OS 2.0	iPhone OS 3.0	iOS 4.0
Display resolution	480 x 320	480 x 320	480 x 320	960 x 640
CPU clockrate	620 MHz	620 MHz	833 MHz	1 GHz
Camera	2 MP	2 MP	3 MP	5 MP (rear), 0.3 MP (front)

表格可访问性

您可以进一步改进标记以增加可访问性。对于非可视浏览器来说，处理和理解表格具有挑战性。您可以使用表格标题(th)和标题(caption)标记元素以及 summary 属性来提高表格的可访问性。前两个对于可视化浏览器也很有用，而第三个对于屏幕阅读器很有价值。

表头元素th不仅增加了第一行的含义，而且当读取表的每一行时，屏幕阅读器都会重复这个元素。它有助于视障人士理解表格单元格之间的相关性。

虽然由caption元素提供的数据通常对于小的、易于理解的表格来说已经足够了，但是更复杂的表格可能会提供一个summary属性(清单 12-14 )。然而，summary 属性在 HTML5 中被认为是过时的，可以用details元素来代替。 ⁵ 因此，建议您在表格旁边或包含表格的figure元素内的caption元素或figcaption元素中描述表格结构。或者，也可以在表格周围的常规段落中描述表格。这些方法也可以结合使用。

***清单 12-14。*表格标题

**A comparison table of iPhone models.**
Model	iPhone	iPhone 3G	iPhone 3GS	iPhone 4
Preinstalled OS	iPhone OS 1.0	iPhone OS 2.0	iPhone OS 3.0	iOS 4.0
Display resolution	480 × 320	480 × 320	480 × 320	960 × 640
CPU clockrate	620 MHz	620 MHz	833 MHz	1 GHz
Camera	2 MP	2 MP	3 MP	5 MP (rear), 0.3 MP (front)

如果需要，还可以向表格单元格添加访问键。

表格样式

虽然大多数浏览器通常以粗体显示表格标题，但是表格单元格、填充和边框的默认样式在每个呈现引擎中都是不同的，这在许多情况下是不够的。但是，所有的表格功能都可以通过 CSS 规则集任意设置样式。例如，border-collapse属性的默认值separate可以被覆盖，以便尽可能将边框折叠成一个单独的边框(清单 12-15 )。

***清单 12-15。*设置边框折叠

table { **border-collapse: collapse;** }

⁵ 截至 2011 年，details元素还没有被浏览器正确支持；因此，建议等待实现

在这种情况下，border-spacing和empty-cells属性将被忽略。标题和数据单元格的填充和边框可以如清单 12-16 中的所示进行设置。

***清单 12-16。*表头和数据单元格的填充和边框

th, td { **padding: 10px;** **border: 1px solid #13b141;** }

下拉选择列表

选择列表可以提供选项供选择。假设多语言网站需要一个语言选择器。它可以开发如下:

用select元素创建一个选择列表。``
添加默认选项。``
添加更多选项。提供每个语言版本的 URIs 作为选项值。``
要加载适当的网页，可以通过事件处理程序将作为选项值提供的子域用作目标 URIs。尽管使用onchange事件处理程序是合乎逻辑的，但键盘用户无法访问它。其中一个解决方案是提供一个带有onclick事件处理程序的按钮，它是独立于设备的。例如，下面这个功能<script type="text/javascript"> function goto_URL(object) { window.location.href=object.options[object.selectedIndex].value; } </script>
文档头或链接的外部文件中声明的可以由input元素上的onclick事件处理程序使用，如下:`

`
请注意，也可以应用其他方法，例如服务器端重定向，这消除了对 JavaScript 的需求。

表格

可以通过以下步骤创建基本表单:

创建一个空表单。`

`
指定用于处理表单数据的服务器端脚本的位置。`<form action="register.php">
`
指定用于发送数据的方法。表单数据可以作为 URL 变量(method="get")或 HTTP post ( method="post")发送。
- get 方法将表单数据作为名称-值对附加到 URL 上，这使得对表单提交的结果添加书签成为可能。但是，由于 URL 的长度限制，不能保证所有的表单数据都会被传输。此外，get 方法不足以转换密码等敏感信息，因为这些数据在浏览器的地址栏中是可见的。
- post 方法将表单数据作为 HTTP post 事务发送。此方法没有大小限制，并且比 get 方法更安全。`<form method="post" action="register.php">
  `
为表单元素创建逻辑组。<form method="post" action="register.php">
添加所需的表单控件，如文本字段(text)和复选框(checkbox)及其属性。`

**
**

`
提高可访问性。元素给一个表单控件添加一个标签。元素给一个fieldset分配一个标题。跳转顺序可以通过tabindex属性设置。`

Personal data
First name

<input type="text" name="firstname" id="firstname" size="15" maxlength="30"
tabindex="12" />

<label for="lastname">Last name

<input type="text" name="lastname" id="lastname" size="20" maxlength="50"
tabindex="13" />

Main interests
<input name="interests" type="checkbox" value="1" id="photo" tabindex="14" />
Photography

<input name="interests" type="checkbox" value="2" id="video" tabindex="15" />
Videography

<input name="interests" type="checkbox" value="3" id="web" tabindex="16" />
Web

`

闪现内容

您可以在 XHTML 中嵌入带有通用object标签的 Flash 文件，如下所示:

声明一个应用/x-shockwave-flash 对象。``
添加带有跨浏览器代码的源代码。`<object type="application/x-shockwave-flash" data="flash/header.swf">

`
提供属性，如尺寸和标识符(如果需要)。`<object type="application/x-shockwave-flash" data="flash/header.swf" width="610"
** height="224" id="flash"**>

`
如果 Flash 内容具有透明背景，则应该将其声明为可选参数。这也是提供在网页内设置层顺序的可能性所需要的。`<object type="application/x-shockwave-flash" data="flash/header.swf" width="610"
height="224" id="flash">

`
Add alternate content such as a placeholder image and text descriptions to improve accessibility. If a short description is not adequate, a good practice is to add a hyperlink to a resource that describes the object. <object type="application/x-shockwave-flash" data="flash/header.swf" width="610" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) height="224" id="flash"> <param name="movie" value="flash/header.swf" /> <param name="wmode" value="transparent" /> **<a href="longdesc/"><img src="img/altheader.jpg" alt="The image alternative for ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg)** **the Flash header." title="Our headquarters" /></a>** </object>

在(X)HTML5 中，应该用embed标签代替object。
Create an embed element. Since the parameters can be provided as attributes of embed, the self-closing tag can be applied in XHTML5 as follows: <embed />

显然，在 HTML5 中应该省略简写符号。
添加文件的路径或 URI。这可以通过使用src属性而不是应用于object元素的data来完成。<embed **src="flash/header.swf"** />
添加尺寸和可选参数。<embed src="flash/header.swf" **width="550" height="400" wmode="transparent"** />

RSS 新闻源

创建 RSS 新闻源通常包括以下步骤:

Create the XML declaration. Since RSS 2.0 news feeds should be valid XML documents, the first line is the XML declaration: <?xml version="1.0" encoding="utf-8"?>

字符编码是可选的，但建议使用。
Create the RSS channel. The contents of the RSS channel should be written within the rss and channel tags as follows: `

`

如果需要额外的名称空间，应该将它们添加到rss元素中。通过提供转义 HTML 标记、带有 Dublin Core 元数据的创建者、由联合命名空间定义的更新周期和频率以及来自 Atom 词汇表的自链接，可以实现最广泛的互操作性。应添加以下名称空间声明:

`<rss version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:atom="http://www.w3.org/2005/Atom"

`
提供 feed 信息，包括必需的title、link、description元素，以及可选元素lastBuildDate、language。**<title>**John Smith photography**</title>** **<link>**http:// example.com/**</link>** **<description>**The news feed of Alaskan photographer John Smith.**</description>** **<lastBuildDate>**Fri, 10 Feb 2012 14:47:00 GMT 0900**</lastBuildDate>** **<language>**en-US**</language>**
Provide news items. To create a valid RSS 2.0 feed channel with the highest level of interoperability, each item should have the following elements: title, link, description, pubDate, and guid. <item>
**<title>**Photo exhibition**</title>** **<link>**http://example.com/events/**</link>** **<pubDate>**Fri, 10 Feb 2012 14:47:00 GMT 0900**</pubDate>** <dc:creator>John Smith</dc:creator> <category>Events</category> **<guid>**http://example.com/events/**</guid>** **<description>**Best shots of 2011**</description>** <content:encoded><![CDATA My photo exhibition ![images <a href="http://example.com/events/">Best shots of 2011</a> takes place at the ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) Moose Hotel in Anchorage, AK, USA on 17–18 February 2012\. ]]></content:encoded> </item>

这是可以复制和粘贴的部分，然后在每次订阅源频道更新最新新闻时进行修改。下一个消息应该在最近的一个之前提供，也就是在源代码中更早一些。
验证。
分享。新闻提要通常通过链接到包含它们的 XML 文件来使用 ^** 。要使用现代浏览器的内置 RSS 阅读器，应该在(X)HTML 文档的 head 部分提供一个链接。这里有一个例子:<link rel="alternate" type="application/rss+xml" title="John Smith photography" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) href="http://www.example.com/rss.xml" />

这使得浏览器能够识别出当前网页有 RSS 新闻提要。

通过重新设计使网站有效

标记越严格，就越容易升级到新版本。然而，在某些情况下，如果不完全重写站点，迁移到另一个标准是不可行的。关于样式表，在大多数情况下，有效的 CSS 2.1 可以很容易地用 CSS3 特性进行扩展。尽管如此，标准化一个现有的网站可能是一项艰巨的任务。

一般有两种可能:从头重写整个网站或者手动逐个规范每个页面。两者似乎都需要比开发人员所能负担的更多的工作。第一种方法通常会导致链接断开。第二种方法需要大量的时间和工作(除非站点非常小),并且只能在少数情况下执行。

万维网联盟提出了一个解决方案:精心挑选的部分应该系统地更新。最常提供的(最流行的)文档可以被日志验证器识别，它还试图在最流行的文档中找到 n 个无效文档(如前一章所述)。当然，整个项目受到截止日期和可承受工作量的影响。

总结

在这一章中，你看到了一系列一步一步的指南，指导你如何一个字符一个字符地手工创建基本的网站组件。通过学习结构元素的语义用法，您现在能够在后台创建具有逻辑流和完美 DOM 的有意义的标记。XHTML 1.0 Strict 的核心元素可以在大多数项目中使用，自然有或没有自结束标记(取决于您选择的标记语言)。这种精心创建的标记代码提供了高级别的互操作性，几乎可以在任何设备上运行的任何浏览器中呈现，而无需多个站点版本。即使 CSS 样式被禁用，标题、段落、列表和其他站点组件仍然清晰可辨，并且内容不仅可以被最新的浏览器访问，也可以被非常旧的版本和具有有限功能和标准支持的移动浏览器访问。

⁶ 另一个选项是使用脚本检索所需数量的频道项目。如果您希望将最新的新闻作为网页的一部分而不是单独的文件发布，那么您需要一个脚本来打开文件、检索新闻提要条目的内容并生成相应的标记代码。

在下一章中，你将学习广泛使用的符合标准的最佳实践，这些实践可以应用到你的日常工作中。

参考文献

使你的网站有效:一步一步的指南。万维网联盟。[www.w3.org/QA/2002/09/Step-by-step](http://www.w3.org/QA/2002/09/Step-by-step)。2011 年 1 月 9 日访问

十三、最佳实践

除了适当使用 web 标准提供的最佳标记和样式之外，还有一些独立于浏览器的、可靠的、令人满意的设计约定，因此可以作为最终的解决方案来应用。最佳实践应该是网站开发的重中之重。虽然它们会随着时间的推移而变化，但许多可以应用多年。了解提供符合标准的代码的技术，并将它们与那些导致不正确标记的技巧和黑客区分开来是很重要的。

到目前为止，您应该已经了解了标记、样式、新闻提要和其他网站组件的主要 web 标准。是时候学习如何在实践中应用这些标准了，这些标准可以用在任何开发人员的日常工作中。即使符合标准的网页也不一定以有意义的、合乎逻辑的方式提供内容；因此，您应该了解标记元素和 CSS 属性的用途，以最大限度地提高网页质量。最终目标是找到结构、表示和行为的正确组合，并把它们分开，以便利用 web 标准的好处。

恰当地使用元素

web 开发的一个关键点是适当元素的应用。如果适用，请始终应用更具体的元素。以下是一些例子:

表格数据的表格
浮动元素而不是定位组件的表格(非常糟糕的做法)
标题代替一般段落
段落，而不是用断行来分隔行(非常糟糕的做法)
段落用于文本段落，而不是分割
术语及其描述的定义列表，而不是一般段落
标题、文章和章节，而不是一般的div容器(HTML5)
用audio和video元素代替一般的object嵌入(HTML5)

这些项目中的大部分都是严重错误，即使包含它们的网站是有效的。

按逻辑顺序排列的内容

尽管 CSS 样式使得任意定位文档部分和元素成为可能，但是内容应该按照逻辑顺序编写。这种方法具有以下优点:

更易于开发和维护
基于文本的浏览器效率更高
即使没有 CSS，内容也清晰可用(以防.css文件无法加载或样式表被关闭)
通过对听觉浏览器和屏幕阅读器的高级支持来提高可访问性，默认情况下，听觉浏览器和屏幕阅读器在不中断连续性的情况下阅读页面

可靠定位

第九章中讨论的 Coggins 方法可以扩展，不仅可以水平定位，还可以垂直定位。“死点”定位是一种将容器元素定位到屏幕正中央的技术，与分辨率或纵横比无关。它也是独立于浏览器的。例如，在 800 × 600 层的情况下，可以应用清单 13-1 中的规则。

清单 13-1。“死点”定位

#wrapper { position: absolute; left: 50%; top: 50%; margin-left: -400px; margin-top: -300px; width: 800px; height: 600px; }

当然，如果这种技术用于加载屏幕上的徽标，则应通过将顶部偏移量减少到所需值来应用比例，如 2:3、1:3或黄金分割。但是，您应该考虑到，非常小的图像或简短的文本在不同的屏幕上看起来完全不同。此外，如果定位的层大于浏览器窗口的分辨率，部分内容将被截断，并且对于某些用户来说变得不可访问。因此，定位的图层不应大于目前全球使用的最小分辨率(该分辨率在不断提高)。有几种替代解决方案，如分辨率检测、特定于媒体的样式表(例如，最大化移动设备的宽度)或具有流动布局的独立于浏览器的设计。后一种，液体布局，在设计允许内容根据可用空间跨越整个页面宽度的所有情况下都是理想的(根据需要扩展或收缩 ¹ )。

尺寸和比例

样式表的有效性不能保证正确的大小和比例。CSS 单元的选择对网页组件的整体外观以及内容的可用性和可读性有很大的影响。

¹ Liquid layout 不仅适用于不同分辨率，也适用于相同分辨率下的大小调整窗口。

相对单位长度

CSS 的相对单位(em和%)是根据另一个元素的特征计算的，应该用于长度。

只有在目标媒体的物理特性已知的情况下，才能使用绝对单位，如英寸、厘米、磅和十二点活字。一个典型的例子是网页的打印选项，其中官方文档的默认输出可以是 12pt Times New Roman，在标准尺寸的纸张上具有 2.5 cm 的边距，例如北美信纸(8.5 ×11”)或标准 A4 纸(210 × 297 mm，ISO 216 国际标准 [1 ])。

正确组合单元

在 CSS 中可以使用em单元来提供可伸缩的样式。它是测量长度的通用单位，如页边距或元素填充。它允许开发人员指定几个与当前字体大小相关的 CSS 属性。因此，即使用户放大了字体大小，以此单位声明的边距也保持成比例。

为了简化在em中表示的字体大小的计算，用户体验专家 Richard Rutter 介绍了一种技术，在body元素上应用 62.5%的字体大小(清单 13-2 ) [2 )。

***清单 13-2。*拉特法

body { font-size: 62.5%; }

由于许多用户代理样式表使用的 16px 默认大小的 62.5%是 10px，前面的规则使清单 13-3 中的规则样式的段落字体大小为 12 像素，因为1.2:10 = 12 px。

images 注意尽管该值被广泛应用，但它并不完全可靠，在某些浏览器中可能会有所不同。

***清单 13-3。*使用鲁特法轻松计算字体大小

p { font-size: 1.2em; }

虽然基于em的大小调整可以用来确保在任何屏幕上可读的字体大小，但这种方法有一个已知的问题。如果用户更改默认字体大小或在浏览器中应用缩放，文本可能会变得不可读。另一方面，以像素为单位设置的字体大小在不同的环境中很健壮，但与其他元素和屏幕不成比例。分辨率越大，字体越小。此外，浏览器的内置文本缩放不能在所有情况下用于基于像素的字体大小的内容。

images 注意由于浏览器之间的差异，网页上的字体大小是具有挑战性的。IE7+中的放大镜功能不会在所有情况下统一缩放绝对定位的内容(有时会缩小)。IE 支持使用%、em或命名大小设置的字体缩放和文本大小更改。在 Firefox 2 及更早版本中，仅支持文本大小更改；然而，改变pt和px字体的大小也可能超出%、em中设置的大小，或者使用命名大小声明。Firefox 3+支持缩放和文本大小更改。Opera 9+还有缩放功能。缩放在不同的浏览器下可能会产生不同的结果，这取决于与页面相关联的内容和样式。

正确嵌入外部内容

由于 Web 是一个真正完整的多媒体平台，所以网页通常具有嵌入的视频剪辑、交互式对象和其他外部组件。然而，由于内容资源提供了不正确的嵌入代码，因此在许多情况下需要额外的任务来使它们符合标准。此外，由于随嵌入代码一起提供的代码不充分，有时无法执行标准化。即使 web 开发人员标准化了无效的嵌入代码，他们也无法纠正相关的名称空间、脚本和其他组件。一个很好的例子就是脸书 ² 的经典“喜欢”盒子。在 Facebook.com 的开发者部分生成的嵌入代码所提供的名称空间和词汇不一致。开发人员在 Web 上使用的“解决方案”之一是将不正确的标记部分添加到 JavaScript 函数中，如清单 13-4 中的函数，它将由撇号分隔的标记片段写入(X)HTML 源代码。 ³

***清单 13-4。*一种广泛使用的嵌入无效代码的伎俩

**document.write('**<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) <fb:like-box href="http://www.facebook.com/pages/Your-page/122946805997761" width="280" ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) show_faces="true" stream="false" header="false"></fb:like-box>**');**

如果直接写在标记中，相同的片段会在验证器中给出错误消息。按钮的iframe版本也有问题，因为它不能在 XHTML 中使用。可以重写为一个object(参数相同)，但是之后就停止工作了。API 和第三方软件组件的用户如果希望他们的 web 页面得到验证，通常会使用前面的技巧。

images 警告用 JavaScript 提供 document.write 的标记代码是一种你不应该使用的黑客技术。同样的技巧也适用于验证几乎任何类型的不正确的标记，这些标记肯定不能被真正的 web 标准所接受，即使这些标记代码是有效的。它当然会进行验证，因为验证器不会考虑外部.js文件中写入的内容。此代码仍然无效！然而，在许多情况下，如何在不牺牲功能性或有效性的情况下提供这样的内容是一个悬而未决的问题。

幸运的是，脸书从 2011 年秋季开始为“喜欢”按钮和盒子提供有效的 HTML5 嵌入代码。然而，经典的嵌入代码仍然在许多网站上使用。

³ 假设启用了 JavaScript

将 YouTube 视频嵌入为有效的 XHTML 或 HTML5

流行的视频分享门户网站 YouTube 为 YouTube 视频提供了两种类型的嵌入代码:

老式的嵌入代码应用带有参数的object元素和一个embed元素。它只支持 Flash 播放。
新的嵌入代码使用了一个iframe，支持 Flash 和 HTML5 视频内容。

在 YouTube 上的每个视频下，都有一个分享按钮，提供了当前视频的链接，并带有长链接、高清链接和声明播放的开始位置等选项。在链接区域下方，有一个嵌入按钮。单击它后，会出现一个文本框，其中包含所选的新型嵌入代码，可以复制到剪贴板。在这个文本框下面，还有更多定制嵌入代码的选项，比如声明大小 ⁴ 或者使用旧式的嵌入代码。

从标准化的角度来看，两个版本都需要一些改进。

在 XHTML 中，应该解决以下问题:

旧式嵌入代码包含的embed元素在 XHTML 中无效。
新型嵌入代码使用的iframe元素在 XHTML 1.0 Strict 或 XHTML 1.1 中不能使用(仅在 XHTML 1.0 Transitional 中，不应使用)。此外，应该提供data和type属性来最大化互操作性(没有它们，嵌入将无法在某些浏览器下工作)。然而，提供data属性，同时从建议的嵌入代码中保留movie参数，可以确保浏览器独立性，因为一些渲染引擎将使用外部声明(object元素上data属性的值),而其他渲染引擎将使用内部声明(movie参数的值)来标识要从中检索视频的 URL(类似于第九章中介绍的用于 Flash 嵌入的 Flash Satay 方法)。

在 HTML5 中，应该解决以下问题:

如果您喜欢新型嵌入代码，那么frameborder和allowscreen属性不应该用在iframe元素上。
如果您想使用旧式代码，object元素中缺少data和type属性。此外，param元素和embed元素应该使用简写符号来结束，而不是使用结束标记</param>和</embed>。

假设我们想用清单 13-5 和清单 13-6 中的嵌入代码嵌入视频。

⁴ 使用嵌入代码时，尺寸也可以在标记中任意修改。

***清单 13-5。*新的嵌入代码，例如 YouTube 建议的视频

<iframe width="560" height="315" src="http://www.youtube.com/embed/L2tuL_2Q3vA?rel=0" frameborder="0" allowfullscreen></iframe>

***清单 13-6。*新型嵌入式代码，例如 YouTube 建议的视频

<object width="560" height="315"><param name="movie" value="http://www.youtube.com/v/L2tuL_2Q3vA?version=3&hl=en_US&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/L2tuL_2Q3vA?version=3&hl=en_US&rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

在 XHTML 中，旧式的嵌入应该是首选的，并做相应的修改(清单 13-7 )。

***清单 13-7。*XHTML/html 5 中的标准化嵌入代码

images 注意不要忘记应用文档类型的嵌套规则。在 XHTML 1.0 Strict 中，object元素要包装在div或p等容器元素中；否则，代码将无法验证。

同样的代码也可以用在 HTML5 中，其中的embed元素也可以被保留；但是，可以安全地删除它:前两行确保了浏览器独立性。在 HTML5 中，也可以使用新型的嵌入代码。可以通过移除frameborder和allowfullscreen属性来标准化(清单 13-8 )。

***清单 13-8。*嵌入 HTML5 的符合标准的 YouTube】

将谷歌地图嵌入为有效的 XHTML 或 HTML5

定义办公室、餐馆等位置的一种流行方法是嵌入交互式 Google Maps 对象。

谷歌地图提供的源代码类似于清单 13-9 中的。

***清单 13-9。*谷歌提供的一个谷歌地图嵌入代码

然而，该代码不符合标准。在 HTML5 中，应该删除frameborder、scrolling、marginheight和marginwidth属性(样式应该通过 CSS 实现)。在 XHTML 中，嵌入代码应该修改如下:

由于 inline frame 元素(iframe)不能在 XHTML 1.0 Strict 和 XHTML 1.1 中使用，所以应该用object标签代替。
type属性应该用值text/html来定义；否则，即使代码有效，地图也不会出现。
src属性应该由data属性替换。
应该删除frameborder、scrolling、marginheight和marginwidth属性。
object元素应该被一个p或div容器元素包围。
样式应该由 CSS 定义以适应页面设计(如果默认外观不合适)。

结果应该是清单 13-10 中的形式。

***清单 13-10。*清单 13-9 中嵌入代码的标准化版本

View Larger Map

这种嵌入代码可以在所有现代浏览器上工作，并验证为 XHTML 1.0 Strict、XHTML 1.1 和 HTML5。然而，嵌入了object元素的(X)HTML 文档存在一个问题:旧版本的 Internet Explorer 会忽略 CSS 中由z-index设置的层顺序。

语义网最佳实践

万维网联盟的语义 Web 最佳实践和部署工作组为创作语义 Web 站点提供文档。最重要的如下:

语义网上的图像标注 [4 :该文档描述了图像元数据的重要性和优势。它为基于语义网的图像注释和用例提供了指南。提到了相关的 RDF 和 OWL 词汇表，以及免费工具的概述。
发布 RDF 词汇表的最佳实践方法:该文档为词汇表设计者提供了 RDF 模式和 OWL 最佳实践。
RDFa Primer——桥接人类和数据网 [6 ]:展示了使用 RDFa 符号提供元数据的技术，以及将现有人类可见的文本和链接转换为机器可读数据而不重复内容的技术。还有一个 RDFa 符号的实例，名为“语义仙境中的爱丽丝” ⁷ 。它可以用作提供带有外部词汇表的图像、个人和许可元数据的起点。
在语义网上发布同义词库的快速指南 [8 ]:该文档描述了如何使用 RDF 来表达同义词库的内容和结构，以及相关的元数据。
管理语义网的词汇表——最佳实践 [9 ]:识别、记录和发布词汇术语的外部词汇表可以在广泛的应用中引用和重用。但是，适当的维护是不可避免的。

WAI-ARIA 最佳实践

W3C WAI-ARIA 创作实践指南描述了开发富互联网应用的最佳实践。推荐创建可访问的小部件、键盘导航、表单属性、拖放支持、关系、对话框和可重用组件库的方法。

移动网络最佳实践

越来越多的用户在手机、智能手机或 PDA 上浏览互联网，这些设备的屏幕尺寸和分辨率较小，带宽和容量有限，界面不如台式计算机方便。为它们优化的网页应该以适当的方式设计和提供，以提供合理的用户体验。为移动媒体进行设计时，应考虑移动设备、PDA 和智能手机的具体特性 [11 ]。最重要的如下 [12 ]:

有限的带宽:压缩、缓存和最小化数据大小等技术有助于改善移动用户体验。应尽可能消除 Cookies 和重定向。
有限的处理能力:大的 DOM、巨大的背景图片、大量的脚本等等，都会增加处理时间。因此，用户将不得不等待相对较长的时间，这是应该避免的。使用 XHTML Basic 可以为移动设备提供简单的标记 [13 ]。至于风格，CSS 有一个专用于移动设备的配置文件 [14 ]。
有限的技术支持:不依赖脚本、嵌入对象、cookies 或样式表。表格显示应该最小化。由于移动浏览器通常只支持一小部分文件类型，下载部分应该警告用户移动设备不支持的文件格式。
更小的界面:自动签到功能和动态更新页面不变的焦点可以让移动应用的使用更加方便。应尽可能提供预选的默认值。应指定默认文本输入模式、语言和/或输入格式 [15 ]。在确定尺寸和定位时，应考虑小屏幕尺寸和分辨率。绝对单位和像素度量应该被消除。
更难的导航:顶部导航越简单，在移动设备上就越容易使用。应该清楚地确定链接目标。用于可访问性的访问键也可以简化导航。
灵活性:如果对设备进行分类，可以显著提升用户体验。为 JavaScript 提供替代内容非常重要。
特定于移动设备的特性:某些网页组件在移动设备上比在计算机上更容易被利用。例如，电话号码应该具有直拨功能。

在移动设备上呈现网站需要优化。弹出窗口应该完全消除。图形组件不应用于间隔。应该减少图像地图的使用。应该避免的不良做法(如框架或基于表格的布局)会使网页在移动设备上不可用

提供稳健性

Web 开发人员应该确保内容可以使用，即使一些预期的技术无法使用或失败。下面几节将讨论一些常见的例子。

声明备用通用字体

由于计算机可用的字体种类繁多，因此无法保证每个浏览器中都有一种特殊的字体。CSS 规范定义的通用字体系列之一，即serif、sans-serif、cursive、fantasy和monospace [16 ]，应该总是被指定。让我们来看一个 Gill Sans 中提供的文本示例，该示例并不适用于所有用户。可以应用清单 13-11 中所示的规则；它确保文档文本在可用时用 Gill Sans 字体呈现，在不可用时用任何其他 sans-serif 字体呈现。根据应用的浏览器和配置，它可能是 Arial、Helvetica 或类似的字体。

***清单 13-11。*字体的后备机制

body { font-family: "Gill Sans", **sans-serif;** }

当然，你也可以指定更多(最好是相似的)相同类型的字体(清单 13-12 )，第一个可用的字体将被应用，但是通用字体系列声明将一直工作。

***清单 13-12。*通用字体系列之前的相似字体列表

body { font-family: **"Gill Sans", "London", "Corinthian"**, sans-serif; }

具有适当特性的声明

Web 开发人员经常不得不从各种设置和选项中进行选择。一般来说，声明的定义方式应该能够在最广泛的设备和设置上获得期望的效果或功能。例如，CSS 可靠支持的颜色名称仅限于 16 种颜色(如第五章所述)。尽管所有的浏览器都知道它们，并且看起来对开发人员友好，但是十六进制符号应该是首选的，因为 Web 上没有最终的颜色列表。某些浏览器支持额外的颜色名称，但它们不是标准化的。没有理由在 CSS 中混合基本颜色名称和其他颜色符号。毕竟，十六进制记数法可以产生几乎任何颜色。

测试

由于标准化不能保证几个网站特性，测试在大多数情况下是至关重要的。

在多个浏览器中渲染

由于呈现引擎、标记和样式的差异，有效性无法确保在不同的用户代理下正确呈现。因此，在发布之前，应该在所有主流浏览器上检查网站的易读性和功能性。 ⁵ 越复杂的站点设计，在不同浏览器下提供相似的渲染就越复杂。有一些免费的、独立于浏览器的样式表可以消除这项耗时的任务。W3C 核心风格 [17 ]就是很好的例子。

没有样式的可读性

测试网站的一种高级方法是用浏览器的默认样式表来呈现它们。结构合理、逻辑清晰的 web 文档即使没有为它们开发的样式表也能保持清晰易读。这个测试对于检查内容的可访问性也很有用。

⁵ 正如上一章所讨论的，一些浏览器提供了使用不同渲染引擎渲染网页的选项，并且有越来越多的插件可用于测试 browserindependence on tabs。

总结

在本章中，您学习了标准化的最佳实践，这些实践应该与热情的内容作者和开发人员介绍的趋势相区别。您可以在几乎所有场景中安全地应用这些经过时间验证的技术，并提高整体网页质量，从代码优化到健壮的呈现。

使用目前所介绍的技术和标准创建的网站的标准符合性应该通过验证来批准，这将在下一章中描述。

参考文献

ISO (2007)书写纸和某些类别的印刷品-裁切尺寸-A 和 B 系列，以及机器方向的指示。ISO 216:2007。国际标准化组织。www . iso . org/iso/iso _ catalogue/catalogue _ TC/catalogue _ detail . htm？csnumber=36631 。2011 年 9 月 18 日访问
Rutter R (2004)如何使用 ems 调整文本大小。理查德·鲁特。clagnut.com/blog/3482011 年 1 月 25 日访问
Swick R，Schreiber G，Wood D (eds) (2006)语义网最佳实践和部署工作组。万维网联盟。www.w3.org/2001/sw/BestPractices/2011 年 1 月 16 日访问
特朗西 R，范奥森布鲁根 J，潘，斯塔穆 G(编辑)，哈拉谢克-维纳 C，西蒙 N，祖瓦斯 V (2007)语义网上的图像标注。万维网联盟。www.w3.org/2005/Incubator/mmsem/XGR-image-annotation/2011 年 1 月 16 日访问
Berrueta D，Phipps J (eds) (2008)发布 RDF 词汇表的最佳实践方法。万维网联盟。www.w3.org/TR/swbp-vocab-pub/2011 年 1 月 16 日访问
Adida B，Birbeck M (2008) RDFa 初级读本——连接人类和数据网络。万维网联盟。www.w3.org/TR/xhtml-rdfa-primer/2011 年 1 月 16 日访问
阿迪达 B，伯贝克 M (2008)爱丽丝梦游语义仙境。RDFa 符号示例。万维网联盟。www.w3.org/TR/xhtml-rdfa-primer/alice-example.html2011 年 1 月 16 日访问
Miles A (ed) (2005)在语义网上发布辞典的快速指南。万维网联盟。www.w3.org/TR/2005/WD-swbp-thesaurus-pubguide-20050517/2011 年 1 月 16 日访问
Baker T (ed) (2005)管理语义网的词汇——最佳实践。万维网联盟。esw.w3.org/VocabManagementNote2011 年 1 月 16 日访问
Scheuhammer J，Cooper M (eds) (2010) WAI-ARIA 1.0 创作实践。理解和实现可访问的富互联网应用的作者指南。万维网联盟。www.w3.org/TR/wai-aria-practices/2011 年 1 月 16 日访问
Connors A，Sullivan B (eds) W3C (2010)移动网络应用最佳实践。W3C 推荐。万维网联盟。www.w3.org/TR/mwabp/2011 年 1 月 15 日访问
W3C (2010)移动网络应用最佳实践卡。万维网联盟。www.w3.org/2010/09/MWABP/2011 年 1 月 15 日访问
McCarron S，Ishikawa M (eds) (2010) XHTML 基础 1.1 -第二版。万维网联盟。www.w3.org/TR/xhtml-basic/2011 年 1 月 15 日访问
舒伯特 S(编辑)(2008) CSS 移动配置文件 2.0。万维网联盟。www.w3.org/TR/css-mobile/2011 年 1 月 15 日访问
W3C (2010)移动网络最佳实践。W3C 备忘单。万维网联盟。www.w3.org/2009/cheatsheet/#mwbp2011 年 1 月 15 日访问
博斯 B、切利克 T、希克森 I、列 HW (eds) (2010)通用字体系列。在:级联样式表级别 2 修订版 1 (CSS 2.1)规范中。万维网联盟。www . w3 . org/TR/2010/WD-CSS2-2010 12 07/fonts . html # generic-font-families。2011 年 1 月 15 日访问
Bos B (2009) W3C 核心风格。万维网联盟。www.w3.org/StyleSheets/Core/Overview.html2011 年 1 月 16 日访问

十四、验证

网络上使用的各种计算机语言，包括但不限于(X)HTML、CSS、RDF 和 RSS，提供了结构、样式、元数据、语义和其他文档特征。与自然语言相似，它们有自己的语法、词汇和句法需要遵循。然而，就像用自然语言编写的文档中出现的语法、结构或拼写错误一样，web 文档中也可能存在错误。验证是根据 DTD 或模式检查 web 文档源代码的任务。它有助于无错误、干净的代码，并提高整体网页质量。

即使是一个字符也可能影响您精心创建的符合标准的代码，因此定期检查您的文档非常重要。完成必要的例程后，您就能够在源代码级别修改或扩展 web 文档，而不会破坏标准遵从性。在这一章中，你将学习到一些工具，这些工具可以帮助你定位和纠正错误，并保证你的代码没有错误。

概念

标记语言语法规则是由文档类型定义(dtd)定义的。在 HTML5/XHTML5 之前，开发人员应该已经提供了与正在使用的文档类型相关联的 DTD 的引用(如第三章中所讨论的)。

Web 文档可以根据这些规则进行验证，这被称为验证。用于执行验证的工具被称为验证器。成功通过验证的文件被宣称为有效；换句话说，它们没有错误，并且不包含不正确使用的元素或属性。然而，验证既不保证结构良好，也不保证元素的正确使用。有效的文档遵循相应 DTD 中概述的语法规则，这使得用户代理能够正确地构造 DOM 并准确地呈现文档。

应用 dtd 中定义的语法规则在技术规范中有描述，其中大部分由 W3C 发布。

标准一致性是那些满足所有由适当的 DTD 和规范描述的要求的 web 文档的特征。当一个 web 文档按照包含在相应标记语言的技术规范中的形式语法正确编写时，它是有效的，然而一致性涉及整个规范。由于一些一致性需求，比如属性值的正确使用，不能用形式语法来描述，有效性只是一致性的一部分。因此，有效性和一致性可能是相同的，但后者是一个更广泛的术语。

有效的文档是根据所用语言的正式语法编写的。符合标准的文档以推荐的方式应用该技术。

验证不应被视为发布前的最后一步。相反，它应该作为开发的一个重要部分来执行。如果大量使用新的标记元素或属性，而开发人员无法提供 100%的确定性，验证可以帮助识别潜在的错误，并防止无效标记被复制或增加。即使是最有经验的网络标准制定者也可能会发现验证是有用的，并认为它是一种辅助而不是强制性的任务。例如，在向源中插入新的结构元素后，识别大量的——通常是相同的——结束标记(例如四到五个或更多连续的</div>标记)会非常不方便。虽然在包含 100-200 行的文件中找到开始标记-结束标记对非常容易，但对于较大的文件来说，这项任务可能会非常艰巨。 ¹

无论开发人员多么有经验，或者使用多么复杂的开发工具，错误都是不可避免的。这就是验证器可以帮助开发人员工作的地方。正如您将看到的，验证器提供了错误位置，以及可能原因和潜在解决方案的提示。

由于验证有助于整体网页质量，验证器和高级特定检查器也被称为 web 质量保证工具 [2 。

标记验证

HTML/XHTML 文档的主要验证器是位于[validator.w3.org](http://validator.w3.org)的 W3C 标记验证服务。事实上，标记验证服务 1.1 版可用于验证多种类型的标记 [3 ]，包括以下几种:

HTML:ISO/IEC 15445:2000(“ISO HTML”)，HTML 2.0，HTML 3.2，HTML 4.01 框架集，HTML 4.01 过渡，HTML5
MathML : MathML 2.0
微笑微笑 1.0，微笑 2.0
SVGSVG:1。0，SVG 1。1，SVG 1。1 基本，SVG 1。1 Tiny
XHTML : XHTML Basic 1.0，XHTML Basic 1.1，XHTML 1.0 Frameset，XHTML 1.0 Strict，XHTML 1.0 Transitional，以及 XHTML 1.1，XHTML Mobile Profile 1.2，和 XHTML Print 1.0
混合命名空间文档:XHTML+RDFa^{2T5、XHTML 1.1 + MathML 2.0、XHTML 1.1 + MathML 2.0 + SVG 1.1}

W3C 标记验证服务提供了三个选项来验证 web 文档:

直接输入验证:验证文本框中提供的标记。代码可以直接输入，也可以从高级文本编辑器中复制粘贴。这个适合测试。因为没有要验证的物理文件，所以无论是字符编码还是服务器设置都不能通过直接输入来检查。
上传文件验证:验证上传到临时文件夹的文件。也可以检查字符编码。有经验的 web 标准化人员不经常使用此选项，因为文件可以通过同样的努力(在静态文件的情况下)上传到主机(最终目的地)。
URI 的确认:在网络服务器上确认上传的版本。这是验证标记、字符编码和服务器设置的最终验证。它是最终检查和验证他人开发的网页的理想工具。

¹ 即使有工具在开始和结束标签对之间用垂直虚线表示层次结构(例如 Notepad++)。

RDFa 符号可以在 XHTML 文档中得到完美的验证。然而，截至 2011 年，验证器仍然不能识别 HTML5 中的 RDFa，并给出错误。

W3C 验证程序支持以下字符编码:UTF-8、UTF-16、ISO-8859-1、ISO-8859-2、ISO-8859-3、ISO-8859-4、ISO-8859-5、ISO-8859-6-i、ISO-8859-7、ISO-8859-8、ISO-8859-8-i、ISO-8859-9 和 ISO-8859-10

自动检测文档类型和字符编码，并相应地用于验证。如果检测是不可能的，验证器假定文档类型和/或字符编码；然而，结果可能不可靠。适当服务的符合标准的 web 文档总是提供这两种数据；因此，验证器准确地执行验证。也可以手动强制验证器使用特定的文档类型和/或字符编码；但是，在一般情况下不应使用该功能。它应该被认为是一个后备机制，而不是一个重要的功能。

如果标记中有错误，则用红色条纹和错误数量清楚地表示出来(图 14-1 )。甚至网页的图标也变成了红色方块。

images

***图 14-1。*红色条纹以及错误和警告的数量清楚地表明标记是无效的。

默认情况下，连续错误/潜在错误按顺序列在摘要下，换句话说，按发生的顺序(在标记中的位置)排列。可以重写此行为，以便按错误类型对错误消息进行分组。然而，由于许多错误会导致更多的错误(例如丢失结束标记)，因此在大多数情况下顺序检查就足够了。

images 提示由于标记错误之间相关性的可能性很高，因此只纠正一些错误(尤其是在文档充满错误的情况下)然后重新验证文档可能更方便。错误的数量可能会呈指数下降。作为直接输入，重新验证对于测试特殊或新标记规范的实现也很有用。

您可以在标准化项目中使用标记验证服务的一些高级设置。可以显示(X)HTML 源代码，错误消息直接链接到相应的行。这对开发人员来说是一个有用的特性。文档标题的树形结构可以通过 outline 选项来可视化，这使得更容易意识到哪个标题被遗漏了(如果有的话)。通过勾选“验证错误页面”复选框，可以验证服务器发送的自定义 404 错误页面除了默认情况下提供的简明报告之外，还可以使用详细输出选项请求更多的解释和更长的建议。W3C 标记验证服务的另一个选项是使用在第十一章中讨论的 HTML Tidy 工具来纠正标记错误。

除了错误位置之外，标记验证服务给出了更正的提示和相应规范和常见问题的链接(图 14-2 )。一些字符可能会被突出显示，这是另一种帮助，有时会使无效字符的检测变得非常容易。

images

***图 14-2。*W3C 标记验证服务清楚地指出错误位置，并提供有用的更正提示。

标记验证结果和建议不仅对缺乏经验的开发人员有用，对专家也有用。使用行号，很容易找到错误，这是纠正错误的先决条件，即使对于那些不依赖于纠正提示的人来说也是如此。

在必要的修正和最终的重新验证之后，结果应该看起来像图 14-3 中的。

images

***图 14-3。*绿色条纹和结果“通过”表示标记有效。

images 注意截至 2011 年，验证 HTML5 仍然只是 W3C 标记验证服务的一个实验性功能。因此，验证器会给出一个警告(不是错误！)即使被分析的网页是有效的。验证器不能识别 HTML5 和 XHTML5 文档中的 RDFa 注释。 ³ 此外，与有效的 XHTML 文档相比，validator 不为有效的 HTML5 文档提供带有超链接的验证徽章。如稍后将讨论的，这种徽章可以从单独的站点下载。

W3C 标记验证器不仅是免费的，而且是开源的，可以在 W3C 软件许可 [4 ]下获得。任何人都可以建立服务的镜像或对其开发做出贡献。

XHTML5 中提供的 XML 声明和所有名称空间声明都会导致错误消息，即使它们是有效的。而且，XHTML5 文档的验证结果陈述的是 HTML5 而不是 XHTML5。

虽然网上还有其他的标记验证器，比如 WDG HTML 验证器 [5 ]，或者离线工具，比如火狐插件 HTML 验证器 [6 ]，但是还是推荐使用 W3C 标记验证服务。它是 W3C Unicorn 的一部分，如果还应该检查样式表和提要通道，就可以使用它(参见后面的“W3C Unicorn”一节)。

对于动态网站的开发人员来说，验证标记更加复杂，因为标记验证器通常不能处理 PHP 之类的脚本。检查动态生成的(X)HTML 输出、执行更正和重新验证文档都是真正的挑战。这是动态生成的网页经常无效的主要原因之一。

验证 XML

可以验证 XML 文档是否符合 DTD、XML 模式或模式语言 RELAX NG。语法格式良好是一个基本要求，但它不能保证 XML 的有效性，这有几个约束，如正确使用必需和可选的元素和属性，正确的文档结构和语法，以及正确应用的数据类型。

尽管 XML 验证和解析在逻辑上是独立的任务，但两者通常都是由 XML 解析器执行的。考虑到即使一个错误也可能阻止文档被解析或显示其树结构，web 浏览器的 XML 解析器总是可以用作基本的 XML 验证器。

不是所有的 XML 解析器都需要 XML 有效性，但是根据相关模式检查文档的 XML 解析器需要 XML 有效性。

可以通过 Apache Ant [7 ]的xmlvalidate任务对 XML 文件进行批量验证。例如，清单 14-1 中的目标验证由dir属性指定的目录中的.xml文件。 ⁴

***清单 14-1。*用xmlvalidate 验证 XML

<target name="validate-xml"> <xmlvalidate lenient="no"> <fileset dir="semweb/ont" includes="*.xml" /> <attribute name="http://xml.org/sax/features/validation" value="true"/> <attribute name="http://apache.org/xml/features/validation/schema" value="true"/> <attribute name="http://xml.org/sax/features/namespaces" value="true"/> </xmlvalidate> </target>

验证 RDF/XML

以 XML 序列化格式(RDF/XML)编写的 RDF 文档可以通过 W3C RDF 验证服务在[www.w3.org/RDF/Validator](http://www.w3.org/RDF/Validator) [8 进行检查。可以通过 URI 或直接输入来执行验证。验证器不仅检查 RDF 代码，还表示 RDF 三元组(图 14-4 )。

⁴ 相对于 Ant 构建文件

images

***图 14-4。*从一个有效的 RDF 文件中检索到的主谓宾三元组

可选地，RDF 图可以以各种格式生成，包括嵌入或链接的 PNG、SVG、GIF、PostScript、IsaViz/ZVTM、HPGL 和 HPGL/2。尽管弧线看起来像手绘的曲线，并且经常相互重叠——这并不是视觉上最吸引人的表现方式——但图像输出对于演示或设计是有用的。同样重要的是要记住，在 Web 上很少有类似的服务可以从 RDF 生成图形图像。

images

***图 14-5。*W3C RDF 验证服务生成的 RDF 图的细节

images 注意与光栅(PNG)输出相反，SVG 输出不仅具有无与伦比的质量，而且还包含作为超链接的 URIs。

可选地，三元组可以以 N-三元组格式显示。节点、弧线和文本的颜色，以及字体大小和方向都可以设置为高级选项。

验证新闻源

因为 RSS 和 Atom 新闻提要应该是有效的 XML 文档，所以必须注意提供没有错误的元素和格式良好的 XML 结构。

万维网联盟在[validator.w3.org/feed/](http://validator.w3.org/feed/) [9 为 Atom 和 RSS 运行 W3C 提要验证服务。与其他 W3C 验证器类似，它不仅提供 URI 验证，还提供直接输入验证。成功验证后，该服务会提供一个“有效 RSS”或“有效 Atom”徽标(取决于经过验证的提要)、一个嵌入代码和一个文本链接。

用于 Atom 和 RSS 的提要验证器和位于[feedvalidator.org](http://feedvalidator.org)的 KML 也可以用于验证 RSS 2.0 和 Atom 1.0 提要 [10 ]。此外，它还验证了blogChannel、dc、itunes、mod_admin、mod_syndication和mod_content、^、、、名称空间的元素。

验证 CSS

样式表验证应该根据使用的 CSS 级别来执行。虽然有效的 CSS1 样式表也是有效的 CSS 2.1 样式表，但在 CSS 2.1 [11 ]中，一些 CSS1 规则集应该用稍微不同的语义编写。由于在 CSS2.1 中省略了某些 CSS 2 特性，所以并非所有的 CSS 2 样式在 CSS 2.1 中都有效 [12 ]。同样，CSS3 中引入的新属性在早期的 CSS 版本中是无效的。有效的 CSS 样式表必须符合相应版本的语法规则，并且必须只包含该规范中定义的 at 规则、属性和属性值。

尽管标记语言版本和变体的选择范围相对较广，但是由于文档类型声明的原因，在大多数情况下可以自动选择用于标记验证的文档类型。然而，CSS 中没有类似的机制，确定要验证的样式表的版本也不是那么简单。首先，CSS 中没有版本声明，其次，词汇表之间有很大的重叠，使得自动版本检测成为不可能。因此，默认情况下，[jigsaw.w3.org/css-validator/](http://jigsaw.w3.org/css-validator/) [13 的 W3C CSS 验证服务根据 CSS 2.1 验证样式表。但是，要应用的配置文件可以作为高级选项手动覆盖。例如，如果你想验证 URI 的 CSS3 文件，你应该构造一个类似于清单 14-2 中所示的 URI ⁶ 。

***清单 14-2。*手动覆盖 CSS3 验证

http://jigsaw.w3.org/css-validator/validator?uri=www.example.com/styles/main.css ![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U001.jpg) ** &profile=css3**&usermedium=all&warning=0&lang=en

⁵ 内容:仅编码

⁶ 当然，您可以从“更多选项”下的下拉列表中选择配置文件“SS level 3”但是，如果您想为 CSS3 按钮提供验证链接，您需要手动构造一个 URI，因为默认代码假定是 CSS 2.1。

与标记验证服务类似，CSS 验证器可以通过 URI、文件上传或直接输入来执行验证。CSS 验证器主要用于验证外部 CSS 文件，但也可以检查内部样式。然而，在后一种情况下，应该首先使用标记验证服务对(X)HTML 文档进行验证。

CSS 验证服务支持 CSS1、CSS2、CSS 2.1 和 CSS3 样式表，以及其他文档配置文件。可以手动选择媒体类型，包括all、aural、Braille、embossed、handheld、print、projection、screen、TTY、TV或presentation。默认介质类型为all。除了错误，验证器可能还会识别警告。由于它们可能是误报或错误的结果，警告可以被隐藏。

验证请求结合基本 URI [jigsaw.w3.org/css-validator/validator](http://jigsaw.w3.org/css-validator/validator)应用参数。支持的参数如下:

uri:待验证单据的 URI。它可以是 CSS 或(X)HTML。
text:要验证的 CSS 文档。
usermedium:用于验证的媒体类型。
output : html (HTML)、xhtml (XHTML，默认)、soap12 (SOAP 1.2)、text(纯文本)。
profile : css1、css2、css21、css3、svg、svgbasic、svgtiny、mobile、atsc tv、tv或none。
lang:报表语言，如en(默认)fr``it``ko``ja``es``zh-cn``nl``de``it或pl。
warning:可能值为no(隐藏警告)、0(较少警告)、1或2(较多警告)的警告级别。2是默认值。

W3C CSS 验证服务的输出类似于 W3C 标记验证器的结果页面。绿色条纹表示有效文件，而红色条纹表示 CSS 文件无效。

验证 I18N

万维网联盟的国际化活动组运行 W3C 国际化检查器 [14 。I18N 检查器可用于根据以下因素检查网页的国际化友好性:

字符编码 : HTTP Content-Type，字节序标记，XML 声明，Content-Type元数据，HTML5 meta charset
语言设置:html元素上的lang和xml:lang属性，HTTP Content-Language，以及content-language元数据
文本方向 : ltr(默认)或rtl
class和id名称:非 ASCII 以及非 NFC 类和标识符
请求头 : Accept-Language，Accept-Charset

验证超链接

最令人失望的浏览器体验之一就是断开的超链接(死链接)。位于[validator.w3.org/checklink](http://validator.w3.org/checklink)的 W3C 链接检查器是一个有用的工具，用于检查 web 文档的内部和外部超链接 [15 ]。链接的文档也可以在最多 150 个文档中递归检查。包含散列标记(如index.html#about)的 URI 片段包含在测试中。不检查robots.txt文件中声明的机器人排除规则禁止的链接(图 14-6 )。

images

***图 14-6。*链接检查器结果

超链接验证不仅对于检查入口点非常有用，而且对于重要文件(如样式表文件、脚本或外部 URIs)也非常有用，这些文件可能会被管理员在不通知的情况下随时修改。例如，永久重定向(HTTP 响应状态代码 301)也由链接检查器识别，尽管它们有效，但是这样的链接应该被更新。该结果可用于消除断开的链接和与所分析的网页的链接相关联的可访问性障碍。

验证可访问性

与其他网站功能不同，可访问性不能由验证器 100%确定地进行验证。虽然标记错误，如不正确的元素使用、缺少标签或结构错误，可以自动识别，但可访问性太复杂，无法自动验证 [16 ]。许多潜在问题需要人工决策、检查或确认。脚本和noscript内容的等效功能、文本描述的充分性、脚本功能和效果、由段落和断行表示的可视列表以及对象中的暂停选项是不能完全确定地自动检查的一些特征。

尽管如此，还是有一些有用的工具可以让易访问性开发人员的工作变得更容易。这种工具应该在网站开发的各个阶段使用，以防止易访问性障碍，修复遇到的障碍，并提高整体网页质量。可访问性工具的主要任务是识别标记中易于访问的元素和属性。此外，某些工具可以帮助开发人员执行那些无法自动验证的检查 [18 ]。可访问性工具根据 W3C Web 可访问性指南(WCAG 1.0 和/或 WCAG 2.0)以及第五百零八部分进行验证。

一个典型的在线易访问性检查工具是加拿大多伦多大学包容性设计研究中心发布的 AChecker ( [achecker.ca](http://achecker.ca) [19 )。AChecker 可以测试网站是否符合各种可访问性准则，包括 WCAG 1.0/2.0 A/AA/AAA 级、第五百零八部分、斯坦察法案和 BITV。该接口通过 URL 或文件上传提供可访问性检查。它识别三种类型的错误:已知的、可能的和潜在的问题。已知的问题被认为是可以确定的错误(例如，img元素缺少alt属性，input元素缺少标签)。可能的问题需要人工决策(例如，误用的元素，select元素上的onchange事件处理程序可能会导致上下文的极端变化)。潜在的问题往往根本不是错误；但是，它们需要人工决策和确认(例如，可能需要dir属性来标识文本方向的变化，数据表可能需要th元素，脚本用户界面可能无法从键盘获得)。不幸的是，并不是每个建议都有效，其中一些是不正确的(例如，如果文档的自然语言是由xml:lang属性标识的，那么在 XHTML+RDFa 中html元素上的lang属性既不有效也不是必需的) (图 14-7 )。

images

图 14-7。 AChecker 提供了好的建议；然而，并不是所有的都是有效的。

AChecker 也支持 HTML 验证。它提供了错误描述和更正建议。

在线可访问性验证工具 Cynthia 可由 URI 根据 508 条款和 WCAG 1.0 对所有优先级 [20 ]进行验证。还提供了高级选项，如浏览器模拟或线路排除。对于处理易访问性的开发人员来说，报告清晰而有用(图 14-8 )。

images

***图 14-8。*详细的可访问性报告，包括解释和 W3C 指南的链接

最全面的辅助工具之一是 WebAIM WAVE [21 ]。这是一个免费的在线工具，在[wave.webaim.org](http://wave.webaim.org)呈现带有可访问性错误、警告和信息的网页(图 14-9 )。它可以识别可访问的属性值、不可访问和潜在不可访问的内容(如 Flash 或脚本)以及依赖于设备的内容(如键盘陷阱)。

images

***图 14-9。*WAVE 呈现的可访问菜单部分

虽然 WAVE 是一个侧重于标记的通用辅助工具，但还有更多特定的工具。例如，有几个免费的在线工具用于评估文本颜色与背景颜色的对比度，如颜色对比度分析仪 [22 ]、光度颜色对比度分析仪 [23 ]，或者威斯康星大学提供的白色背景下彩色文本的索引 [24 。

重要的是要记住，没有任何可访问性工具能够以任何方式执行完整的评估。

随着 HTML5 中新语义元素的引入，必须注意应用最新的可用检查器。

最终的可访问性测试始终是一个现实生活中的测试，涉及由残疾人进行的评估。

验证移动友好性

随着移动浏览的广泛流行，在移动设备上测试你的网站是至关重要的。然而，在各种移动设备上查看网站实际上是不可行的。幸运的是，[validator.w3.org/mobile/](http://validator.w3.org/mobile/)的 W3C mobileOK Checker 可以帮助你分析你的网页是否适合移动浏览 [25 ]。mobileOK 检查器应用 W3C 推荐标准“W3C mobileOK 基本测试 1.0”26 中定义的测试，对故障进行分类，并给出有用的错误描述(图 14-10)。

images

***图 14-10。*W3C mobile ok checker 在评估网站是否适合移动浏览时给出了有用的提示。

更正标记的问题后，网站将满足提供合理的移动浏览体验的基本要求。

统一验证器

虽然单个的验证器可以组合使用来验证完整的网站，但是对于大型项目来说，这是不方便的，而且速度很慢。开发人员可以应用统一的验证器轻松有效地执行多重验证。

W3C 独角兽

2010 年 7 月 27 日，W3C 发布了 Unicorn，这是一个统一的验证器，可以在[validator.w3.org/unicorn/](http://validator.w3.org/unicorn/) [27 买到，口号是“提高网络质量”Unicorn 是最终的标记、CSS、新闻提要验证器和 mobileOK 检查器。验证可以通过 URI、文件上传或直接输入单独或同时进行。高级选项与前面讨论的各个 W3C 验证服务提供的选项相同。独角兽有多种语言版本。

根据所选择的测试，输出提供了关于标记、样式表和新闻提要的有效性，以及网页的移动友好性的信息。

images

***图 14-11。*web 标准化的天堂:有效的标记、有效的样式表和有效的新闻提要

类似于单个 W3C 验证器，有效文档用绿色条纹表示，而无效文档用红色条纹表示。通过单击条纹，可以按类别折叠/取消折叠认证测试结果(默认情况下不折叠)。在右侧，您可以在每个条带中看到错误、警告和信息(如果有)的数量。这些数字是超链接，可用于跳转到页面上的相应部分。对于有效的 web 页面，验证器不仅提供可靠的信息，还提供带有评估链接的 W3C 徽章，这些链接可以嵌入到您的有效 web 页面中。换句话说，Unicorn 的输出与独立验证器的输出是相同的。

总验证器

另一个统一验证器是 Total Validator，它曾经是一个在线服务。相比之下，目前的版本只能作为不同平台的桌面软件工具使用 [29 ]。基本版可以免费下载。Total Validator 可用于不同的平台，包括 Windows、OS X 和 Linux。 ⁷ Total Validator 是一个小而强大的工具，它结合了一个标记验证器、一个可访问性验证器、一个拼写检查器和一个链接验证器(图 14-12 )。

images

***图 14-12。*总验证器配置界面

该界面仅用于启动流程。在声明了要验证的网页的 URI 和参数后，Total Validator 会打开一个浏览器窗口并显示验证结果。错误和警告显示在标记代码中，并带有超链接，链接到标记代码后相应的详细描述条目(图 14-13 )。

基本工具基于 Java，需要 Java 1.5 或更高版本。

images

***图 14-13。*带有一段标记代码(顶部)的验证结果和页面底部的详细描述

除了常见的标记语言，如 XHTML 1.0 Strict、XHTML 1.1 和 HTML5(以及许多旧版本)，Total Validator 还支持 HTML + RDFa 1.1、XHTML + RDFa 1.1、用作多语言的 HTML5，甚至 XHTML5。在 WCAG 的所有级别都可以检查无障碍情况，也可以根据第 508 条进行检查。拼写检查器支持美国和英国英语、法语、意大利语、西班牙语和德语。

Total Validator 提供了在不同浏览器中分析网页外观的截图，包括从 1.5 版开始的各种版本的 Firefox、从 5.5 版开始的 Internet Explorer、Konqueror 3.5、Lynx 2.8、Opera 和 Safari。

一个有趣的选项是，验证结果可以保存为 HTML 格式，下次执行该工具时，只需单击按钮 Last Results 即可打开。

约会网站

一个全面的商业验证器是 SortSite，由 PowerMapper [30 ]开发。其主要特点可概括如下:

可访问性:检查是否符合 WCAG 1.0、WCAG 2.0 和 508 条款。
断开的链接:检查断开的链接和不正确的服务器配置。
兼容性:检查特定于浏览器的代码、脚本和图像格式。
合规性:检查是否符合欧盟和美国法律。
标记和样式 : HTML、XHTML 和 CSS 验证。
搜索引擎优化:查谷歌，雅虎！、和 Bing 内容指南
可用性:根据 Usability.gov 指南进行检查。

提取语义内容

可以使用 W3C 语义数据提取器 [31 ]来检查网站的语义内容。它可以提取如下语义数据:

通用元数据
- 文档标题中提供的标题、作者和描述
- 嵌入在文档正文中的 RDFa 元数据(也以 RDF/XML 格式生成)
相关资源
- 链接文件，例如 RSS 或 Atom 新闻源
文档标题中提供了术语表、版权和书签
文件的大纲
引语和引文

菜单点和 URIs 带有超链接。

另一个全面的语义数据提取工具是位于[inspector.sindice.com](http://inspector.sindice.com) [32 的 Sindice Web Data Inspector。该工具可用于从 URI 或直接输入提供的标记、RDF/XML、Turtle 或 N3 文档中提取 RDF 三元组。Sindice Web Data Inspector 可以专门用于检索语义数据(Inspect 按钮)或组合语义数据提取和验证(Inspect + Validate 按钮)，以及本体分析和推理(图 14-14 )。

images

***图 14-14。*Sindice Web Data Inspector 开始屏幕上的综合选项

因此，该工具提供了从文件中检索到的主谓宾三元组的完整列表(图 14-15 )。输出格式也可以更改为 N-triples 或 RDF/XML。

images

***图 14-15。*语义数据提取正在进行中

“适马”选项是机器可读元数据的一个很好的例子。软件工具可以从正确编写的语义文档中提取结构化数据，并任意显示(图 14-16 )。这是语义网的真正本质！

images

***图 14-16。*从 RDF 中提取个人描述，并以视觉上吸引人的方式显示

Sindice Web Data Inspector 的一个非常好的特性是可以从语义文档生成一个可伸缩的图(图 14-17 )。该图不仅显示了三元组，还提供了文件中使用的本体和词汇的快速总结。

images

***图 14-17。*从 RDF 文件生成的可扩展图形

Sindice Web Data Inspector 还有一个带有两个不同选项的验证功能。第一个称为“RDF 语法验证”，根据 W3C 规范执行 RDF 语法验证。第二个选项是“学究式验证器”，它对提取的三元组进行验证。在有效文档的情况下，两个验证器都给出结果“有效文档”

表示有效性

网站的标准一致性可以通过“有效”图标(也称为有效性徽章或有效性标志)来轻松表达。除了通知读者，如果使用得当，它们还可以用作即时验证链接。在验证 web 文档时，W3C 验证器自己提供的示例代码中列出了预期的超链接(图 14-18 )。

images

***图 14-18。*带有嵌入代码的 W3C 验证图标

请注意，这些代码只是建议。例如，img元素上的style属性可以省略，以支持外部 CSS 规则。XHTML [33 ]的推荐嵌入代码在清单 14-3 中给出。

***清单 14-3。*嵌入 W3C 验证图标的代码

W3C 图标

W3C“有效”图标在左边代表 W3C 标志，在右边代表建议(图 14-19 )。在许多情况下，还会显示版本或建议。

images

***图 14-19。*传统 W3C 有效性图标的结构

图标的默认大小为 88 × 31 像素。万维网联盟为每个图标提供了两个版本:金色和蓝色。内容作者可以自由选择使用哪一个。W3C 商标许可以及徽标和图标使用政策适用于所有 W3C 有效性图标。不允许修改图标。

W3C 有效标志只能在通过验证的网页上使用。它们是为验证而设计的。图标必须提供一个超链接，根据相应的 W3C 技术或标准来验证网页。因此，单击正确设置的“有效标记按钮”会将页面的 URI 传递给 W3C 标记验证服务，该服务会给出相同的结果页面，就好像 URI 直接用于验证器网页上的验证一样。CSS 验证按钮也是如此。因此，内容提供商和 web 开发人员也可以使用这些按钮在每次修改页面时重新验证页面。专家可以使用该工具来确保自己对最新修改的了解，而无需加载相应的验证器和手动添加 URI。

万维网联盟不验证网页的有效性；因此，确保一致性和一致性是开发者和 Web 作者的责任。

W3C 质量保证网站 [34 ]上列出了 W3C 验证图标的完整列表，包括以下内容:

标记图标:“HTML 2.0”、“HTML 3.2”、“HTML 4.0”、“HTML 4.01”、“ISO/IEC 15445 的 ISO-HTML”(遗留缺失)、“XHTML 1.0”、“XHTML 1.1”、“XHTML Basic 1.0”、“XHTML-Print 1.0”、“XHTML+RDFa”
CSS 图标:一个通用有效的“CSS”图标和更多用于“CSS 1 级”和“CSS 2 级”的特定图标
XML 图标:“XML 1.0”、“XML 1.1”
【SVG icons】??【SVG 1】。0、“SVG 1”。1、“SVG 1”。2、“SVG Tiny 1”。1 "、" SVG Tiny 1 "。" 2 "
MathML 图标:【mathml 2.0】

有效性图标也可以直接从 W3C 图标库获得(和其他图像一起) [35 。

代表技术

除了验证之外，还有许多图标可以用来表示网站使用的 web 技术。他们不仅可以表达潜在的技术，还可以表达贡献、网站开发者同意的倡议，或者他们同情的项目和组织。它们还可以用来自豪地展示很少实现但在其他网站上几乎看不到的高级功能。最常用的 W3C 技术图标如下:

"HTML5 "
- " HTML5 支持 CSS3/Styling "
- " HTML5 支持语义"
- “HTML5 支持离线和存储”
- " HTML5 支持连接/实时"
- “HTML5 支持多媒体”
- HTML5 支持图形、3D 和效果
- " HTML5 支持设备访问"
- “HTML5 Powered with Performance & Integration”
  
  技术名称是可选的，可以组合在一起(通过在最后选择的技术前添加单词“and”)。徽章可以用徽章生成器 5000 在水平和垂直方向上生成。带有或不带有 wordmark 的 HTML5 标记、支持元素、技术类别和贴纸模板可作为单独的 SVG 和 PNG 文件使用。HTML5 徽标也有单色版本。所有徽章都使用知识共享署名 3.0 许可证 [36 ]发布。
“用层叠样式表制作”。
辅助功能图标:“威-A WCAG 1.0”、“威-AA WCAG 1.0”、“威-AAA WCAG 1.0”37、“威-A WCAG 2.0”、“威-AA WCAG 2.0”、“威-AAA WCAG 2.0”38。
语义网技术按钮:“GRDDL”、“OWL”、“POWDER”、“RDF”、“RDFa”、“RIF”、“SKOS”、“SPARQL”39。

然而，W3C 并不是唯一发布技术图标和徽标的机构。以下是一些例子:

" Unicode 编码"
“此处使用都柏林核心”
“Java—立即获取”
“HCARD”、“XFN 友好”以及其他微格式的图标和徽标 [40
“辛西娅测试”41
“搜索引擎友好”
没有弹出窗口，没有间谍软件
"由 PERL 提供支持"
page rankn/10—pr checker . info(其中 n 是 1 到 10 之间的数字) [42 ]

总结

在这一章中，你了解到有强大有效的工具来检查你的 web 文档中的错误。它们可以在开发过程中使用，对于重新设计非常有用。许多这样的验证器都是免费工具，可以在线获得。最常用的是标记验证器和 CSS 验证器，因为标记和样式表是可以自动验证的基本网站组件。验证网站的可访问性是一个真正的挑战，因为 WCAG 的几个方面经常需要人工决策。

最后一章将列举导致无效标记、样式表、新闻订阅频道和可访问性障碍的最常见错误。

参考文献

Murphy C，Persson N (2009)有效代码不一定是结构良好的代码。在:HTML 和 CSS 网络标准解决方案-一个网络标准化的方法。伯克利艾德的朋友
Thereaux O，Lacourba V 等人(eds) (2010)网络质量保证工具。www.w3.org/QA/Tools/2011 年 1 月 7 日访问
W3C(2011)W3C 标记验证服务 1.1 版。万维网联盟。validator.w3.org2011 年 1 月 4 日访问
W3C(2011)W3C 标记验证器的源代码可用性。万维网联盟。validator.w3.org/source/2011 年 1 月 4 日访问
奎因 L (2007) WDG HTML 验证器。利亚姆.奎恩。www.htmlhelp.com/tools/validator/2011 年 1 月 4 日访问
Gueury M(2010)Firefox 的 HTML 验证器插件。马克·古里。addons.mozilla.org/en-US/firefox/addon/249/2011 年 1 月 8 日访问
Apache Ant 项目(2010) XMLValidate。阿帕奇软件基金会。ant.apache.org/manual/Tasks/xmlvalidate.html2011 年 1 月 26 日访问
Prud'hommeaux E (2007) W3C RDF 验证服务。www.w3.org/RDF/Validator2011 年 1 月 5 日访问
Thereaux O 等人(2010) W3C 提要验证服务，用于 Atom 和 RSS。万维网联盟。validator.w3.org/feed/2010 年 11 月 30 日访问
Ruby S，Pilgrim M，Walton J，Ringnalda P(2009)Atom、RSS 和 KML 的提要验证器。萨姆·鲁比，马克·皮尔格林，约瑟夫·沃尔顿和菲尔·林纳尔达。feedvalidator.org2010 年 11 月 30 日访问
博斯 B、切利克 T、希克森 I、列 HW(编辑)(2010)CSS 2.1 语法。在:级联样式表级别 2 修订版 1 (CSS 2.1)规范中。W3C 工作草案。万维网联盟。www.w3.org/TR/CSS/grammar.html2011 年 1 月 5 日访问
博斯 B，切利克 T，希克森 I，李 HW(编辑)(2010)符合性:要求和建议。在:级联样式表级别 2 修订版 1 (CSS 2.1)规范中。W3C 工作草案。万维网联盟。www.w3.org/TR/CSS/conform.html2011 年 1 月 5 日访问
W3C 质量保证(2011) CSS 验证服务。万维网联盟。jigsaw.w3.org/css-validator/2011 年 1 月 5 日访问
W3C I18N 活动组(2010 年)。万维网联盟。qa-dev.w3.org/i18n-checker/2010 年 9 月 30 日访问
W3C (2010) W3C 链接检查器。万维网联盟。validator.w3.org/checklink2011 年 1 月 5 日访问
Abou-Zahra S (ed) (2010)评估网站的可访问性:概述。万维网联盟。www.w3.org/WAI/eval/Overview.html2011 年 1 月 6 日访问
Abou-Zahra S (ed) (2006)网站可访问性评估工具的完整列表。万维网联盟。www.w3.org/WAI/ER/tools/complete.html2011 年 1 月 6 日访问
Abou-Zahra S (ed) (2010)选择网页可及性评估工具。万维网联盟。www.w3.org/WAI/eval/selectingtools.html2011 年 1 月 7 日访问
ATRC (2009)阿契克(网页可及性检查者)。多伦多大学。 achecker.ca 。2011 年 9 月 19 日访问
他的软件(2010)他的软件辛西娅说门户。www.cynthiasays.com/软件公司。2011 年 2 月 4 日访问
Kasday L，Andersen A，Smith J，Hernandez D，Bohman P，Anderson S，Maturi N，Varanasi B，Parija J (2011)波。网页可及性评估工具。牢记网页可访问性。wave.webaim.org2011 年 2 月 3 日访问
Johansson D (2010)色彩对比分析仪。唐纳德·约翰逊。www.colorsontheweb.com/colorcontrast.asp2011 年 2 月 3 日访问
柠檬 G (2011)光度色对比度分析仪。多汁工作室。juicystudio.com/services/luminositycontrastratio.php2011 年 2 月 3 日访问
UoW (2011)颜色对比样本索引。威斯康星大学。trace.wisc.edu/contrast-ratio-examples/index.htm2011 年 2 月 3 日访问
W3C (2010) W3C mobileOK 检查器。你的网站对手机友好吗？万维网联盟。validator.w3.org/mobile/2011 年 9 月 19 日访问
Owen S，Rabin J (eds) (2008) W3C mobileOK 基本测试 1.0。W3C 推荐。万维网联盟。www.w3.org/TR/mobileOK-basic10-tests/2011 年 9 月 19 日访问
W3C (2011) Unicorn -统一验证器。万维网联盟。validator.w3.org/unicorn/2011 年 1 月 7 日访问
W3C (2010)对 Unicorn 的翻译。万维网联盟。validator.w3.org/unicorn/translations2010 年 9 月 23 日访问
Total Validator(2011)Total Validator。www.totalvalidator.com2011 年 1 月 5 日访问
power mapper(2010)power mapper–网站测试和站点地图工具。Powermapper 软件。www.powermapper.com/2011 年 1 月 5 日访问
hazal-Massieux D(ed)(2011)W3C 语义数据提取器。万维网联盟。www.w3.org/2003/12/semantic-extractor.html2011 年 1 月 7 日访问
Sindice (2011) Sindice 网络数据检查员。http://inspector.sindice.com 辛迪斯有限公司。2011 年 9 月 20 日访问
W3C (2010)“有效”图标。在:标记验证器的帮助和常见问题中。万维网联盟。validator.w3.org/docs/help.html#icon2010 年 12 月 20 日访问
所有 W3C 验证图标的(2010)列表。万维网联盟。www.w3.org/QA/Tools/Icons2010 年 12 月 20 日访问
W3C (2011) W3C 图标库。万维网联盟。www.w3.org/Icons/2011 年 1 月 8 日访问
W3C (2011) W3C HTML5 标志。万维网联盟。www.w3.org/html/logo/2011 年 1 月 19 日访问
W3C (2008) W3C 网页内容可访问性指南 1.0 一致性标志。万维网联盟。www.w3.org/WAI/WCAG1-Conformance2011 年 1 月 8 日访问
W3C (2010) W3C 网页内容可访问性指南 2.0 一致性标志。万维网联盟。www.w3.org/WAI/WCAG2-Conformance2011 年 1 月 8 日访问
Jacobs I (2009) W3C 语义网标志和政策。万维网联盟。www.w3.org/2007/10/sw-logos.html2011 年 1 月 8 日访问
墨西拿 C，巴拉诺夫斯基 D，巴特尔梅 W (2010) Icons。微格式维基。微格式社区。microformats.org/wiki/icons2011 年 1 月 8 日访问
his software(2010)Cynthia 测试按钮指南——何时、为何以及如何使用。www.cynthiasays.com/org/cynthiatested.htm 软件公司。2011 年 2 月 4 日访问
页面排名检查器(2011)谷歌页面排名检查器。prchecker.info/2011 年 1 月 8 日访问

十五、最常见的错误

实现网站有效性需要考虑几个因素。代码要么是手工编写的，要么是自动生成的，错误是不可避免的。服务器设置也是如此。错误出现在标记、样式表、XML 文件、脚本等等中。通过分析和学习最常见的错误，可以消除或至少最小化其中的许多错误。因此，可以快速有效地识别、定位和纠正它们。

即使是最精心创建的网页也可能包含错误。在本章中，您将了解最常见的错误及其解决方案。了解它们是非常有益的，因为它们出现得相当频繁，学习如何纠正它们将减少纠正所需的时间，并减轻您的标准化工作。

常见发球失误

最常见的一个服务错误是将 XHTML 作为text/html来服务。多年来，web 浏览器处理 XHTML 标记就像处理 HTML 一样。这被称为“XHTML 的肮脏秘密”自结束标记和其他特定于 XHTML 的符号已经被忽略，XHTML 文档已经由 SGML 解析器而不是 XML 解析器呈现[1]。结果，XML 的所有有益特性都没有得到利用。

相比之下，现代浏览器支持正确的 MIME 类型。XHTML 文档应该作为application/xhtml+xml而不是text/html，正如在第四章中所讨论的。

常见标记错误

Web 标准化人员应该知道所有常见的标记错误，以便于识别、查找和纠正它们。不正确使用的元素、错误的文档结构、不正确关闭的标签、缺少alt属性、直接提供的&字符、忽略大小写、不唯一的标识符和拼错的关键字是最常见的标记错误。它们中的许多都被标记验证器清楚地指出，并且可以很容易地被纠正。验证器还提供了有用的纠正提示。但是，一些错误会导致其他几个错误。例如，一个部门缺少结束标记不仅会使文档在浏览器中折叠，而且会使嵌套变得不正确。因此，可能会发生这样的情况，一个验证器指出有 18 个错误的无效文档只有 2-3 个错误。所以，不要被最初的错误数量吓倒！

不正确使用的元素

作为一条黄金法则，必须特别注意消除标记中不必要的容器。例如，位于页面右侧带有文本“环绕”的图像可以直接样式化,而不是将它们放在浮动分区上。另一个例子是p标签，它应该用于段落容器而不是回车。看看清单 15-1 中显示的(非常糟糕的)例子。

***清单 15-1。*一种永远不应该使用的做法

This is a very bad practice

dating back to the early days

of the Web

unfortunately it is still in use

even if it has many drawbacks, e.g.,

illogical

hard to identify related content`

省略结束标签的技巧应该被遗忘。虽然它在 HTML 中是允许的，但它不是干净的代码，在 XHTML 中是无效的。具有基本(X)HTML 知识的初学者可能会认为应该将br元素添加到每一行的末尾，而不是错误地强制段落换行。他们错了。

网页内容应该是合乎逻辑的。前五行应该属于一个段落，后两行应该属于一个无序列表。前面的例子应该如清单 15-2 所示编写。

***清单 15-2。**清单 15-1 的正确标注为 *

This is a very bad practice dating back to the early days of the Web. Unfortunately it images
is still in use even if it has many drawbacks, e.g.,

Illogical
Hard to identify related content

文本宽度可以由外部样式表设置，以便达到与原始示例预期的相似(或完全相同)的效果。这完全取决于内容和出版需求。在这种情况下，清单 15-3 中的标记和清单 15-4 中显示的外部 CSS 文件中的适当样式将是一个标准的解决方案。

***清单 15-3。*更先进的解决方案

This is a very bad practice dating back to the early days of the Web. Unfortunately it images
is still in use even if it has many drawbacks, e.g.,

Illogical

Hard to identify related content

***清单 15-4。*清单 15-3 中的 CSS 规则集

.thinbox { width: 400px; height: 600px; font-size: 14px; }

结构不正确

使用不当的元素通常会违反 DOM 模型。应该提供必需的元素，并遵循嵌套规则。此外，应该通过以适当的方式使用正确的容器和元素来维护文档结构。看看清单 15-5 中的代码。

***清单 15-5。*列出没有结构或语义的项目(不正确)

`- first item

second item
third item
`

由于前面的行是列表中的项目，它们显然应该被收集到一个无序列表中。

***清单 15-6。**清单 15-5 的正确标注为 *

first item

second item

third item

由li元素提供的默认项目符号可以在 CSS 中更改为任意字符或图像(参见“样式列表”一节)。CSS 将呈现与结构完全分离；因此，任何元素都可以是任意样式的。

误用的表格

无表布局:网络标准化的说法。表格是用来组织数据的，不是用来控制布局的。为此，应该使用div元素。它们的位置、大小、颜色、层顺序、透明度和许多其他特征可以通过样式表设置(清单 15-8 中的而不是清单 15-7 中的)。

***清单 15-7。*误用桌子的碎片

***清单 15-8。*修正标记中表格数据的结构

Meaningful content in data cell

Content of other data cell

表格的位置由内容元素、文本和图像以及容器div元素决定。参数应该作为 CSS 规则集在与文档相关联的外部样式表中给出(参见“表格样式化”一节)。

非最佳代码长度

类似于第一章中讨论的“标签汤”，更具体的“div 汤”指的是除法的误用和过度使用(泽尔德曼称之为divi tis【2】)。清单 15-9 显示了一个例子。

***清单 15-9。*一个红利

The Latest News

主要问题是根本没有结构(即使它可能是有效的)。不必要的分歧应该消除。此外，这些名字太长了(尽管是描述性的)。它们应该保持在合理的范围内。

记住，在(X)HTML5 中，其他致力于结构化的元素应该作为主容器使用。

元素和属性错误

当使用另一个规范中定义的元素时，会出现总元素错误。应该根据文档类型使用元素。

不正确的嵌套元素会破坏文档结构，应该被删除。(X)HTML 文档中元素的位置和顺序不是任意的，应该满足第三章中讨论的嵌套规则的标准。

这两个错误都会导致 W3C 标记验证服务中出现消息“文档类型不允许此处有元素”。

类似的问题也与属性有关。W3C 标记验证服务给出错误消息“没有属性‘attrib _ name’”。允许属性的选择取决于所使用的文档类型。例如，在 XHTML 的过渡变体规范中定义的几个属性在严格的 XHTML 文档中是不允许的，详见第三章。类似地，XHTML 中也禁止几个 HTML 属性。样式属性应该在 CSS 中提供，而不是在标记中。应用特定于供应商的扩展如marginheight也会导致类似的问题。如果一个元素没有定义，它的属性也被认为是无效的。

结束标签错误

W3C 标记验证服务通过消息“省略了元素的结束标记，但其声明不允许这样做”清楚地指出了缺少的结束标记。W3C 标记验证服务将额外的(不必要的)结束标记标识为“未打开元素的结束标记”。

确保元素正确结束的最简单的方法之一是在打开后立即写结束标签，如清单 15-10 所示。

***清单 15-10。*在任何子元素之前提供结束标记

在提供结束标记之前，不应写入元素内容。这似乎是显而易见的，但是考虑到在开始和结束标记之间可能有数百行代码。此外，可能有几个相同的后续结束标记，即使使用缩进，它们的开始对也可能难以识别。

标识符

通常，在(X)HTML 标记中使用两种类型的标识符。自然地，主要用于样式化多个元素的class标识符可以在同一个文档中应用多次——而对于id属性则不是这样，它在整个文档中应该是惟一的(比如片段标识符)。

常见样式表错误

虽然 CSS 解析器有处理样式表错误的机制[3]，但是应该通过适当的创作来消除它们，并通过验证来确认。用不正确的属性和不存在的属性值编写声明是 CSS 中最常见的错误。

不存在的属性

最常见的 CSS 错误之一是应用了不存在的样式属性。W3C CSS 验证器用消息“属性不存在”清楚地指出了这些错误

CSS 命名约定不同于(X)HTML 标记中使用的命名约定。经验较少的人可能会键入一个符合逻辑的“应该是正确的”CSS 属性名例如，左边距可以用margin left属性设置，尽管left-margin(不存在)会更合理。即使看起来很简单，结果也是不正确的。如果有人不熟悉级联样式表的全部词汇，那么在应用它们之前，应该在适当的 CSS 规范中检查所有属性。另一个很好的例子是内容垂直集中的表格数据单元格。在 Web 的早期，许多样式都是直接在 HTML 属性上提供的，为此，valign属性被用在td元素上。然而，在 CSS 中，没有名为valign的属性。对应的属性有不同的名称:vertical-align。

不存在或使用错误的属性值

为了避免由不正确的 CSS 属性值导致的错误，应该知道允许的值以及关联的数据类型。此外，知道初始值(默认值)非常有用。例如，collapse、separate或inherit这三个属性值中的一个可以设置为border-collapse属性，用于设置表格边框是折叠成单个边框还是呈现分离状态。规则集border-collapse: yes;无法使用，因为属性值yes是非法的。因为这是一个可继承的属性，所以只有当继承的值不适合我们的目的并且需要被覆盖(或确保)时，才需要相应的规则集。

忽略继承

冗余经常出现在糟糕的 CSS 中。尽管这样的样式表可能是符合标准的，但是它们比需要的要长，使用更多的带宽，并且更难维护。只有适当考虑继承性，才能实现代码最优性。假设样式规则集出现在清单 15-11 中。

***清单 15-11。*冗余规则集(应优化)

`body {
font-family: Verdana, Arial;
font-size: 1.2em;
color: #351801;
}

p {
font-family: Verdana, Arial;
font-size: 1.2em;
color: #351801;
}

div {
font-family: Verdana, Arial;
font-size: 1.2em;
color: #351801;
}`

之前的规则明显是多余的。一些开发人员会以清单 15-12 所示的形式编写它们。

***清单 15-12。*一个更好但仍然多余的解决方案

body, p, div { font-family: Verdana, Arial; font-size: 1.2em; color: #351801; }

由于浏览器为子元素(本例中的p和div)应用了与父元素(body)相同的样式，代码仍然是多余的，应该如清单 15-13 中的所示编写。

***清单 15-13。*正确答案

body { font-family: Verdana, Arial; font-size: 1.2em; color: #351801; }

换句话说，原始示例的第二个和第三个规则集是不需要的，应该删除。注意，在长的 CSS 文件中很难注意到这些相同的、冗余的规则，因为它们之间有数十个其他规则集。这就是为什么在一开始就考虑主要的 CSS 规则是很重要的，只有当继承的值不适合整体设计和布局时才覆盖这些规则。

后代选择器(也称为上下文选择器 4】)应该用于优化代码长度。检查[清单 15-14 中显示的标记和清单 15-15 中的 CSS 规则。

***清单 15-14。*符合标准但非最佳的标记(classis)

The is the main content of the site.

The second paragraph should look like the first one.

In fact, all paragraphs of the document have the same styles.

***清单 15-15。*符合标准但非最佳的造型规则

.maintext { margin-left: 15px; margin-right: 15px; margin-top: 10px; margin-bottom: 5px; font-size: 1.4em; color: #1d4c90; }

尽管标记和样式规则都以标准形式呈现，但代码远非最佳。这种类过度使用被称为class itis【5】。一个更简短、更容易理解的最佳解决方案可能是清单 15-16 中显示的标记，以及清单 15-17 中显示的 CSS 规则。

***清单 15-16。**清单 15-14 的正确标注为 *

The is the main content of the site.

The second paragraph should look like the first one.

In fact, all paragraphs of the document have the same styles.

***清单 15-17。*最优 CSS 规则

#main p { margin: 10px 15px 5px; font-size: 1.4em; color: #1d4c90; }

如果这不是页面的唯一部分，那么可以省略id属性，并且可以修改 CSS 规则集，以便应用于一般的p元素。

颜色误差

CSS 验证通常会导致颜色警告，表明前景色和背景色存在潜在问题。例如，如果在白色背景上使用非常浅的字体颜色，可能很难甚至不可能阅读内容。在这种情况下，W3C CSS 验证器会给出消息“在两种上下文中颜色和背景颜色相同”

但是，其中一些消息可能被视为误报，因为在某些情况下，可见性根本不是问题(透明或重叠层、背景图像上的文本等)。为了安全起见，即使页面的其他组件(例如，背景图像)无法下载，文本也必须保持可读。

不正确的位置

不正确的位置错误通常是由未正确关闭的规则集引起的。应该在 W3C CSS 验证服务错误消息“该元素不能出现在 CSS 2.1 的上下文中”所指示的行附近逐一检查它们。

透明背景

透明表面在整个网络中越来越受欢迎。一个div的透明度通常如清单 15-18 中的所示设置。

***清单 15-18。*一个典型但非标准的、依赖于浏览器的透明规则集

#transdiv { opacity: 0.7; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; }

在现代浏览器中，它运行良好。然而，当作为 CSS 2.1 进行验证时，验证器会给出错误。即使在 CSS3 中，也只有第一个(opacity)有效，它在 Firefox、Opera 和 Safari 中有效，但在 IE 中无效(它需要filter属性)。因此，通过移除最后三个属性可以获得有效性；然而，这个结果在 Internet Explorer 和其他浏览器的旧版本下不起作用。

一个有效的跨浏览器解决方案可以是透明的背景图像，如清单 15-19 中的所示。

***清单 15-19。*透明的 PNG 背景文件是一个可靠的解决方案

#transdiv { background-image: url('img/transpbg.png'); background-repeat: repeat; }

其他错误

不是所有的文档都可以被验证器检查。不正确的服务或临时服务器错误是最常见的原因。如果不提供自动文档类型检测或字符编码检测所需的数据，验证将无法执行或提供不可靠的结果。

常见新闻推送错误

有效的新闻提要通道应该是格式良好的，并且符合所有通用的 XML 标准。尽管如此，由于人为错误，手动更新的新闻提要中可能会出现一些错误。最常见的错误之一是日期不正确。如果发布日期早于更新日期，验证器会给出一个错误。这被称为不可信日期。必须注意应用适当的偏移，其误用会导致同样的问题。

常见脚本错误

脚本超出了标记验证器的范围。因此，必须格外小心，以确保正确性和适当的功能。应该确保网页保持可用，即使脚本由于任何原因无法执行。重要的是要记住，为脚本编写的替代内容不能被软件工具检查，它们的评估取决于人的决定。

常见的辅助功能错误

与标记或 CSS 错误(错误取决于所使用的语言版本)相反，可访问性错误是由所考虑的指南的版本和级别决定的。描述 WCAG 2.0 的技术和失败的 W3C 集团注释[6]中收集了对可访问性错误及其解决方案的全面概述(“失败的成功标准”)。最常见的可访问性错误可以总结如下:

缺少结构化标记或表格布局
传达重要信息的图像通过 CSS 嵌入
用户无法控制停止或暂停闪烁、滚动和自动播放声音文件或视频
声音效果和同步媒体缺少标题或标签
表单的用户指南不足
困难的导航和陷阱
期限
信息的表达完全依赖于颜色、形状、位置或图形
不可访问的自定义控件
非唯一标识符(不仅不可访问，而且无效)
缺少非文本内容和脚本的替代内容和详细描述
可能会因未请求的功能(如新窗口)而打扰用户的功能
文本不够清晰易读，字体太小，或者前景色和背景色或图像之间的对比度不够
缺少文档标题
文件名或占位符等替代文本缺失或不足
缺少标签
空白或控制间距，用于在纯文本或单词中创建多列
没有警告的自动表单提交
缺少或不正确的 tab 键顺序声明
表格中缺少标题单元格、标题和摘要
指向特定于设备的事件处理程序
非特定链接，如“点击此处”或“更多”

总结

本章列举了作为 web 开发人员在日常工作中可能会遇到的最常见的错误。现在你已经很清楚当你从头开始开发时如何消除它们，当你重新设计一个站点时如何改正它们。

通读本书后，您已经了解了从头开始编写有效标记的 web 标准和技术的重要性和好处。你知道如何识别标准，并把它们与未定型的规范区分开来。现在，您已经掌握了提供有意义的语义和机器可读的元数据、将标记限制为语义，以及在项目中实现完全的标准遵从性所需的所有技能。

参考文献

希克森 I (2009)将 XHTML 作为文本/html 发送被视为有害。伊恩·希克森。www.hixie.ch/advocacy/xhtml。2011 年 1 月 17 日访问
泽尔德曼 J，马科特 E (2010)迪维蒂斯的心碎。在:用网络标准设计，第 3 版。，新骑手，伯克利
博斯 B、切利克 T、希克森 I、维姆利 HW (eds) (2010)处理解析错误的规则。在:级联样式表级别 2 修订版 1 (CSS 2.1)规范中。万维网联盟。www.w3.org/TR/CSS21/syndata.html#parsing-errors。2010 年 10 月 13 日访问
Murphy C，Persson N (2009) HTML 和 CSS 网络标准解决方案——网络标准化者的方法。伯克利艾德的朋友
Zeldman J，Marcotte E(2010)classis:标记麻疹。在:用网络标准设计，第 3 版。新骑手，伯克利
库珀 M，里德 LG，范德黑登 G，考德威尔 B，齐索姆 W，斯拉丁 J(编辑)(2010)WCAG 2.0 的失败。WCAG 2.0 的技术。Web 内容可访问性指南 2.0 的技术和失败。万维网联盟。www.w3.org/TR/WCAG20-TECHS/failures.html。2011 年 3 月 3 日访问