血鸟导航 血鸟导航
推荐
立即推荐

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

随笔2个月前发布 走在漆黑的路上
55 0 0

原文：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 浏览器的标准支持。

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

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

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

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

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

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

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

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

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

标准的制定和发布

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

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

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

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

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 上使用。 5 用高分辨率位图图形代替。但是为什么呢？只要有可能，就应该用 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 的开发者经常忽略这个简单的事实。

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

***图 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++ 6 编写，在 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 )。

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

***图 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
  • 虹膜浏览器 7 1.1.4
  • 螺栓浏览器 7 1.6 [92
  • 歌剧移动79.793

7 手机浏览器

综合测试

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

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

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

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

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

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

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

***图 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 index8[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。这些数字仅代表索引文件；预计所有其他页面也会有类似的数量级。

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

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

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

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

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

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

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

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

服务器端技术和内容管理

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

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

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

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

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

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

主要问题

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

不良做法

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

缺乏支持

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

来自版本 7 的 9

在符合标准是官方要求的地方，例如政府门户网站或欧盟项目网站，最好的解决方案是雇佣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。*高流量网站不一定应用标准代码

<body class="ego_page home hasLeftCol fbx ie8 win Locale_en_US"> <input type="hidden" name="post_form_id" value="b053066a05f482d5739d31c033b5fd90" autocomplete="off" /><div></div><div style="position:absolute; top:- 10000px; width:0px; height:0px;" ></div><div class=""></div><div><div></div><div><div class="ptm clearfix"><h1>

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

Flash 的流行

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

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

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

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

***图 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、11以及 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 可用于通过除台式计算机以外的设备(包括但不限于移动电话、投影仪和打印机)的附加样式表来提供设备独立性。 12 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 文档的国际化设置通常在开发过程之前，因此被描述为标准网站开发的第一步。

参考文献

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

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

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

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

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

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

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

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

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

  • 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 2 的互操作性和向后兼容性，并具有进一步的优势特性 [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 标准中不赞成使用它们。
  • 没有额外的数据就无法支持它们。
  • 它们很难处理，因为它们是有状态的。 3
  • 使用标记可以更有效地处理它们。
  • 应该避免使用它们，因为它们可能会导致与等效标记的潜在冲突。

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

格式化也适合标记的字符

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

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

特殊字符

某些 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>)，但是在 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 声明 4 (XHTML)

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

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

  1. HTTP Content-Type头
  2. 字节顺序标志 5
  3. XML 声明
  4. meta元素
  5. 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 编码的，则只有 BOM6)。

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

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

@charset "UTF-8";

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

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

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

转义码、特殊字符和符号

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

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

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

数字参考

数字字符引用通过通用字符集或 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 环境中，只有四种字符实体的处理得到保证:&amp;、&gt;、&lt;和&quot;(分别为&、>、<和")。幸运的是，这个简短的列表包含了那些可以用于语法符号的非常重要的字符实体(与号、大于号、小于号)。W3C 推荐在 XHTML 文档的href属性中使用&字符 [20 ]。应特别注意包含参数的 URIs。这些 URIs 中的单个&字符应由实体&amp;21 替换。

虽然&apos;实体(撇号，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 元素和属性，这些元素和属性可以安全地应用于各种文档，同时保持符合标准。这一章还会让你明白为什么严格标记总是首选。

参考文献

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

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

SGML 语言

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

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

精通 HTML5、CSS3 和 XML Web 标准（一） 注意尽管早期 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 环境中手动创建。 2

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

<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>标签丢失)，等等。

精通 HTML5、CSS3 和 XML Web 标准（一） 提示虽然 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 互联网媒体类型；然而，偶尔也会有例外(你将在下一章看到)。

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

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

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

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

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 等价物所替代。

3 已经暂停。

4 由开放移动联盟而非 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 严格框架文档

`<?xml version=”1.0″ encoding=”UTF-8″?>

       
Minimal XHTML 1.0 Document                

    This is a minimal XHTML 1.0 document.     

   `

精通 HTML5、CSS3 和 XML Web 标准（一） 提示对于任何种类的 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 框架文档

`<?xml version=”1.0″ encoding=”utf-8″?>

       
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.       

    

` `    

      Copyright © 2011 John Smith. All rights reserved.     

   `

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 ]。

精通 HTML5、CSS3 和 XML Web 标准（一） 注意与普遍的误解相反，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 框架文档。

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

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

`<?xml version=”1.0″ encoding=”utf-8″?>

       
An XHTML5 example                

      

Document sample

    

    

      

        

Article1

          The first article of the document.       

      

        

Article2

          The second article of the document.       

    

    

      Copyright © 2011 John Smith. All rights reserved.     

   `

标示语法

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

HTML 语法

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

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

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

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

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

图 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 不是。 6 随着最新标记版本 HTML5 和 XHTML5 的引入，HTML 和 XHTML 词汇表之间的差异完全消失了，因为 HTML5 具有与 XHTML5 完全相同的元素和属性。

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

64.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" 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>

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

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

空白处理

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

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

使用脚本和样式元素

虽然script和style HTML 元素的内容类型是字符数据(CDATA)，但它是 XHTML 中经过处理的字符数据(#PCDATA)。script和style元素用#PCDATA 内容定义；换句话说，<被处理为标记代码的开始，而&lt;被识别为一个实体(清单 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 中不允许的父子元素关系。

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

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

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

无效字符

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

注释中的破折号受到限制

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

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

<!-- Comment -->

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

尽管在某些 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 )。

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

虽然在 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 )。

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

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

数据类型

可以在元素内容和属性值中使用的数据类型是由 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/"> <!-- correct --> <a href="contact.htm"> <!-- correct --> <a href="a**;**b.html"> <!-- incorrect (contains an illegal character) -->

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

<img src="img/logo.png">

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

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

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

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

7 它仅在某些元素上被弃用(例如，不能在 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 进行标记声明。

精通 HTML5、CSS3 和 XML Web 标准（一） 小心在 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 的早期版本引入了基本的标记元素，后来的版本逐渐扩展了元素集。一些元素随着时间的推移变得过时并且被废弃、8移除或替换。此外，新规范通常会引入新元素。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 或更高版本中使用。 9 这个重要的事实，十几年来很多应用 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 之前的 8

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

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

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

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

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

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

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

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

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

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

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

块与行内元素

为了提供对不同文档部分的完全控制，HTML 元素位于不同的级别。类似于文字处理器中使用的字符、段落和文档格式级别，HTML 提供了具有不同范围的标签。被称为行内元素的某些元素既可以应用于单个字符，也可以应用于字符串，比如字体特征、斜体或粗体文本、下标和上标。 10 它们通常放在包含文本和/或行内元素的段落(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 中。

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

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

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

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

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

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

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

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

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

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

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

全局属性

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

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

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

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

窗口事件属性

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

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

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

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

表单事件属性

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

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

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

注意，HTML5 不支持onreset属性。

键盘事件属性

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

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

鼠标事件属性

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

触摸事件属性

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

媒体事件属性

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

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

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

HTML 文档结构

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

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

`

       
A DOM example     ` `          

Paragraph content

   ` ![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fgitee.com%2FOpenDocCN%2Fvkdoc-html-css-zh%2Fraw%2Fmaster%2Fdocs%2Fweb-std-master-h5c3-xml%2Fimg%2F0302.jpg&pos_id=img-qXtSUmcN-1724310529655)

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

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

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

      **

**     **

**     **

**       

      Copyright © 2011 John Smith. All rights reserved.       

    **

**    `

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

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

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

      **

**     **

**     **

**       

      Copyright © 2011 John Smith. All rights reserved.       

    **

**    ` ![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fgitee.com%2FOpenDocCN%2Fvkdoc-html-css-zh%2Fraw%2Fmaster%2Fdocs%2Fweb-std-master-h5c3-xml%2Fimg%2F0304.jpg&pos_id=img-LT8ThuUw-1724310529656)

***图 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” 精通 HTML5、CSS3 和 XML Web 标准（一）
  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>
  • 元元素 12 (可选，一个或多个)<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

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

精通 HTML5、CSS3 和 XML Web 标准（一） title(必选)

精通 HTML5、CSS3 和 XML Web 标准（一） script, style

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

精通 HTML5、CSS3 和 XML Web 标准（一） base, meta, link(空)

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

精通 HTML5、CSS3 和 XML Web 标准（一） param(空)

精通 HTML5、CSS3 和 XML Web 标准（一）流量

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

精通 HTML5、CSS3 和 XML Web 标准（一） ins, del

精通 HTML5、CSS3 和 XML Web 标准（一）流量

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

精通 HTML5、CSS3 和 XML Web 标准（一）内嵌

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

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

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

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

精通 HTML5、CSS3 和 XML Web 标准（一）内嵌

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

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

精通 HTML5、CSS3 和 XML Web 标准（一）切片(article、aside、section)

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

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

精通 HTML5、CSS3 和 XML Web 标准（一）切片(article、aside、section)

精通 HTML5、CSS3 和 XML Web 标准（一） audio, video

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

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

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

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

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

精通 HTML5、CSS3 和 XML Web 标准（一）流量

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

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

精通 HTML5、CSS3 和 XML Web 标准（一）内嵌

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

精通 HTML5、CSS3 和 XML Web 标准（一）流量

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

精通 HTML5、CSS3 和 XML Web 标准（一） #PCDATA

精通 HTML5、CSS3 和 XML Web 标准（一）内嵌

精通 HTML5、CSS3 和 XML Web 标准（一）流量

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

精通 HTML5、CSS3 和 XML Web 标准（一）内嵌

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

精通 HTML5、CSS3 和 XML Web 标准（一）除了封闭的form块

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

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

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

精通 HTML5、CSS3 和 XML Web 标准（一）流量

精通 HTML5、CSS3 和 XML Web 标准（一）h1``h2``h3``h4``h5``h6,p

精通 HTML5、CSS3 和 XML Web 标准（一）内嵌

精通 HTML5、CSS3 和 XML Web 标准（一） #PCDATA

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

精通 HTML5、CSS3 和 XML Web 标准（一）内联，除了一个封闭的a元素

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

精通 HTML5、CSS3 和 XML Web 标准（一）流程除a、button、fieldset、form、label、select、textarea外

精通 HTML5、CSS3 和 XML Web 标准（一）abbr``b``bdo``cite``code``dfn``em``i``kbd``q``samp``small``span``strong``sub``sup``var

精通 HTML5、CSS3 和 XML Web 标准（一）内嵌

精通 HTML5、CSS3 和 XML Web 标准（一） img，br(空)

精通 HTML5、CSS3 和 XML Web 标准（一） input(空)

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

精通 HTML5、CSS3 和 XML Web 标准（一） label除括label

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

精通 HTML5、CSS3 和 XML Web 标准（一） area(空)

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

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

精通 HTML5、CSS3 和 XML Web 标准（一） param(空)

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

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

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

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

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

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

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

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

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

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

精通 HTML5、CSS3 和 XML Web 标准（一）h1``h2``h3``h4``h5``h6(最少 2 个)

精通 HTML5、CSS3 和 XML Web 标准（一）h1``h2``h3``h4``h5``h6

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

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

精通 HTML5、CSS3 和 XML Web 标准（一）流量

精通 HTML5、CSS3 和 XML Web 标准（一） hr(空)

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

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

精通 HTML5、CSS3 和 XML Web 标准（一）切片(article、aside、section)

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

精通 HTML5、CSS3 和 XML Web 标准（一）流量

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

精通 HTML5、CSS3 和 XML Web 标准（一）内联除img、object、small、sub、sup

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

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

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

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

精通 HTML5、CSS3 和 XML Web 标准（一）h1``h2``h3``h4``h5``h6

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

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

精通 HTML5、CSS3 和 XML Web 标准（一）流量

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

精通 HTML5、CSS3 和 XML Web 标准（一）切片(article、aside、section)

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

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

精通 HTML5、CSS3 和 XML Web 标准（一）内嵌

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

精通 HTML5、CSS3 和 XML Web 标准（一） col(空)

精通 HTML5、CSS3 和 XML Web 标准（一） col(空)

精通 HTML5、CSS3 和 XML Web 标准（一） thead，tbody

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

精通 HTML5、CSS3 和 XML Web 标准（一） th，td

精通 HTML5、CSS3 和 XML Web 标准（一）流量

精通 HTML5、CSS3 和 XML Web 标准（一） ul，ol

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

精通 HTML5、CSS3 和 XML Web 标准（一）流量

理解了块级元素和行内元素之间的区别之后，嵌套元素就变得相当简单了。空元素，如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 文档使用特定的文档类型声明 13 来标识正在使用的文档类型。

一般来说，将一个 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元素 14 ( 清单 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” 精通 HTML5、CSS3 和 XML Web 标准（一）
   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” 精通 HTML5、CSS3 和 XML Web 标准（一）
   rel=“alternate” 精通 HTML5、CSS3 和 XML Web 标准（一）
   href=“http://example.com/german/” />
   xml:lang=“de” 精通 HTML5、CSS3 和 XML Web 标准（一）
  <link lang=“hu” title=“A dokumentum magyarul” 精通 HTML5、CSS3 和 XML Web 标准（一）
   rel=“alternate” 精通 HTML5、CSS3 和 XML Web 标准（一）
   xml:lang=“hu” 精通 HTML5、CSS3 和 XML Web 标准（一）
   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” 精通 HTML5、CSS3 和 XML Web 标准（一）
 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” 精通 HTML5、CSS3 和 XML Web 标准（一）
 href=“http://www.example.com/rss.xml” />

` ` `

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

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

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

收藏夹图标(favicon15T5)，默认为 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” />`

精通 HTML5、CSS3 和 XML Web 标准（一） 提示由于属性值图标直到 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 显示了一个例子。

15 也称为书签图标、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。 16 使用更严格的标记有几个原因。虽然在升级到 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 格式逐渐流行起来。17Internet Explorer 9+、Firefox 3.5+、Safari 3.1+和 Opera 9.5+具有原生 SVG 渲染和嵌入支持，不需要 SVG 图像插件。

精通 HTML5、CSS3 和 XML Web 标准（一） 注意现代浏览器对 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 来实现。

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

精通 HTML5、CSS3 和 XML Web 标准（一） 注意 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">

然而，这种嵌入类型直到最近才在具有本地 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">

该技术的缺点是图像是作为一般对象而不是图像提供的，从语义的角度来看这不是最佳的:表示图像的元素的含义在逻辑上是由具有关于内容的更具体信息的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 图像)。 18 这个问题在 HTML5 中是不存在的，直接 SVG 嵌入是它的原生特性。

18 这个问题可以通过为 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>

实体引用以&符号(&)开始，以分号(;)结束。除了&alpha;这样的关键字之外，还允许使用一种数字格式来表示符号的 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>±<!--PLUS-MINUS SIGN--></mo>       <msqrt>         <mrow>           <msup>             <mi>b</mi>             <mn>2</mn>           </msup>           <mo>-</mo>           <mrow>             <mn>4</mn>             <mo>⁢<!--INVISIBLE TIMES--></mo>             <mi>a</mi>             <mo>⁢<!--INVISIBLE TIMES--></mo>             <mi>c</mi>           </mrow>         </mrow>       </msqrt>     </mrow>     <mrow>       <mn>2</mn>       <mo>⁢<!--INVISIBLE TIMES--></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 的浏览器中，两者都应呈现为以下众所周知的二次公式:

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

在第二种情况下，前缀将其他元素和属性与特定的名称空间相关联。例如，名称空间和前缀是在 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 和名称空间 19 进行验证，这些名称空间为标识符的上下文提供容器，包括唯一命名的元素和属性。

(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 框架文档

`<?xml version="1.0" encoding="UTF-8"?>

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 骨架文档

`<?xml version="1.0" encoding="UTF-8"?>

       
Sample XHTML 1.1 plus MathML 2.0 plus SVG 1.1 document                     

MathML sample

    

Math expression                           y           =                        1                                                                x                   2                                  +                 1                                                            inside an XHTML paragraph.

    

SVG sample

    

` `      

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

SVG 作为宿主语言

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

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

`<?xml version="1.0"?>

<!ENTITY % XHTML.prefixed "INCLUDE" >
  <!ENTITY % XHTML.prefix "xhtml" >
  <!ENTITY % MATHML.prefixed "INCLUDE" >
  <!ENTITY % MATHML.prefix "math" >
]>
<svg version=“1.1” xml:lang=“en”精通 HTML5、CSS3 和 XML Web 标准（一） 精通 HTML5、CSS3 和 XML Web 标准（一）
 精通 HTML5、CSS3 和 XML Web 标准（一） 精通 HTML5、CSS3 和 XML Web 标准（一）
 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 )。

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

很容易看出，一些声称有利的 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 格式提供。特殊文件类型容易混淆，用户代理无法处理。 20 以正确的文件格式提供文档是网络作者的责任。

总结

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

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

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

参考文献

  1. Raggett D(2005)HTML 入门，修订版。万维网联盟。www.w3.org/MarkUp/Guide/2010 年 9 月 11 日访问
  2. Smith M (2010) HTML:标记语言参考。万维网联盟。dev.w3.org/html5/markup/2011 年 1 月 21 日访问
  3. Pilgrim M (2010) HTML5:启动并运行。塞瓦斯托波尔奥莱利媒体
  4. Meloni JC，Morrison M (2009)在 24 小时内自学 HTML 和 CSS。印第安纳波利斯的萨姆斯
  5. Lemay L，Colburn R (2010)每天一小时自学 HTML 和 CSS 的网络出版:包括新的 HTML5 内容(第六版)。印第安纳波利斯的萨姆斯
  6. 鲍威尔 TA (2010) HTML & CSS:完整参考(第五版 edn)。麦格劳-希尔·奥斯本公司
  7. W3C (2010) W3C 备忘单。万维网联盟。www.w3.org/2009/cheatsheet/2010 年 10 月 1 日访问
  8. 蒂姆·伯纳斯·李(1999 年)《时代》杂志百名世纪人物。时代杂志。205 . 188 . 238 . 181/time/time 100/scientist/profile/bernerslee . html。2010 年 9 月 11 日访问
  9. 使用 HTML、XML 和 CSS 的多用途出版。计算机械协会，www.w3.org/People/Janne/porject/paper.html，??。2010 年 9 月 11 日访问
  10. 伯纳斯-李 T (1995)超文本标记语言-2.0，RFC 1866。网络工作组，互联网工程任务组。datatracker.ietf.org/doc/rfc1866/2010 年 9 月 11 日访问
  11. 康诺利 D (1999) HTML 2.0 材料。万维网联盟。www.w3.org/MarkUp/html-spec/2010 年 9 月 11 日访问
  12. Raggett D (1997) HTML 3.2 参考规范，W3C 推荐标准。万维网联盟。www.w3.org/TR/REC-html322010 年 9 月 11 日访问
  13. Raggett D，Le Hors A，Jacobs I (1998) HTML 4.0 规范，W3C 推荐。万维网联盟。www.w3.org/TR/1998/REC-html40-19980424/2010 年 9 月 11 日访问
  14. Raggett D，Le Hors A，Jacobs I (1999) HTML 4.01 规范，W3C 推荐。万维网联盟。www.w3.org/TR/html401/2010 年 10 月 1 日访问
  15. 一个 XHTML + MathML + SVG 的概要文件。W3C 工作草案。万维网联盟。www.w3.org/TR/XHTMLplusMathMLplusSVG/xhtml-math-svg.html2011 年 2 月 17 日访问
  16. Adida B，Birbeck M，McCarron S，Pemberton S(2008)XHTML 中的 RDFa:语法和处理。扩展 XHTML 以支持 RDF 的属性和处理规则的集合，W3C 推荐。万维网联盟。www.w3.org/TR/rdfa-syntax/2010 年 9 月 10 日访问
  17. 麦卡隆 S (2010) XHTML+RDFa 1.1。通过 XHTML 模块化支持 RDFa，W3C 工作草案。万维网联盟。www.w3.org/TR/2010/WD-xhtml-rdfa-20100803/2010 年 9 月 10 日访问
  18. Pemberton S 等人(2002) XHTML 1.0 可扩展超文本标记语言(第二版)。HTML 4 在 XML 1.0 中的重构。W3C 推荐。万维网联盟。www.w3.org/TR/xhtml1/2010 年 10 月 5 日访问
  19. 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 日访问
  20. Altheim M，McCarron S(eds)(2001)XHTML 1.1 文档类型。W3C 推荐。万维网联盟。www.w3.org/TR/xhtml11/doctype.html2010 年 10 月 6 日访问
  21. 希克森 I(2010)html 5 标准草案。网络超文本应用技术工作组。www.whatwg.org2010 年 9 月 9 日访问
  22. 希克森 I (2007) W3C 重新开始 HTML 的努力。载于:WHATWG 博客，2007 年 3 月 7 日。网络超文本应用技术工作组。blog.whatwg.org/w3c-restarts-html-effort2010 年 9 月 9 日访问
  23. 希克森一世(2008)与 XHTML2 的关系。In: HTML 5。用于 HTML 和 XHTML 的词汇表和相关 API，W3C 工作草案。万维网联盟。www.w3.org/TR/2008/WD-html5-20080122/#relationship02010 年 9 月 9 日访问
  24. leen heer N(2010)HTML5 测试——你的浏览器对 html 5 的支持程度如何？尼尔斯·林希尔。www.html5test.com/。2011 年 1 月 19 日访问
  25. W3C (2011)测试–HTML Wiki。万维网联盟。www.w3.org/html/wiki/Testing2011 年 1 月 19 日访问
  26. Pemberton S (2010) XML 及其应用。万维网联盟。www.w3.org/2010/Talks/11-11-steven-applications/2010 年 11 月 11 日访问
  27. Van Kesteren A (2010) HTML5 与 HTML4 的差异。万维网联盟。www.w3.org/TR/2010/WD-html5-diff-20100624/2010 年 9 月 23 日访问
  28. Le Hégaret P，Jacobs I(2011)html 5 最后一次调用的常见问题。万维网联盟。www.w3.org/2011/05/html5lc-faq.html于 2011 年 8 月 14 日访问
  29. Graff E (2011)多语言标记:HTML 兼容的 XHTML 文档。万维网联盟。www.w3.org/TR/html-polyglot/于 2011 年 8 月 12 日访问
  30. 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 日访问
  31. Raggett D，Le Hors A，Jacobs I (eds) (1999)基本 HTML 数据类型。在:HTML 4.01 规范。万维网联盟。www.w3.org/TR/html4/types.html2011 年 2 月 15 日访问
  32. 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 日访问
  33. Lie H W，elik T，Glazman D，van Kesteren A (eds) (2010 年)媒体询问。万维网联盟。www.w3.org/TR/css3-mediaqueries/于 2011 年 8 月 13 日访问
  34. Phillips A，Davis M (eds) (2009)用于识别语言的标签。互联网工程任务组。tools.ietf.org/html/bcp47于 2011 年 8 月 13 日访问
  35. Raggett D (1997) HTML 3.2 参考规范。W3C 推荐。万维网联盟。www.w3.org/TR/REC-html322010 年 10 月 1 日访问
  36. Raggett D，Le Hors A，Jacobs I (eds) (1999)元素索引。在:HTML 4.01 规范。W3C 推荐。万维网联盟。www.w3.org/TR/html401/index/elements.html2010 年 10 月 1 日访问
  37. 希克森一世(编辑)(2010)元素索引。HTML 5——一个用于 HTML 和 XHTML 的词汇表和相关 API。W3C 工作草案。万维网联盟。www.w3.org/TR/html5/index.html#elements-12010 年 10 月 1 日访问
  38. 希克森一世(编辑)(2010)元素索引。HTML 5——一个用于 HTML 和 XHTML 的词汇表和相关 API。W3C 工作草案。万维网联盟。www.w3.org/TR/html5/index.html#elements-12010 年 10 月 1 日访问
  39. 希克森本人(编辑)(2011) HTML5 属性。In: HTML5。HTML 和 XHTML 的词汇表和相关 API。万维网联盟。www.w3.org/TR/html5/index.html#attributes-12011 年 2 月 16 日访问
  40. Le Hégaret P (2009)文档对象模型(DOM)。万维网联盟。www.w3.org/DOM/2011 年 1 月 25 日访问
  41. 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 日访问
  42. Zeldman J，Marcotte E (2010)一种让网页表现得像应用一样的标准方法。在:用网络标准设计，第三版。，新骑手，伯克利
  43. 一个 HTML 文档的全局结构。在:HTML 4.01 规范。W3C 推荐。万维网联盟。www.w3.org/TR/REC-html40/struct/global.html2010 年 10 月 12 日访问
  44. 希克森本人(主编)(2011)种内容。HTML 5——HTML 和 XHTML 的词汇表和相关 API。万维网联盟。www.w3.org/TR/html5/content-models.html#kinds-of-content于 2011 年 8 月 14 日访问
  45. Dubost K，Curran P (2007)推荐在 Web 文档中使用的 Doctype 声明。万维网联盟质量保证兴趣小组。www.w3.org/QA/2002/04/valid-dtd-list.html2010 年 9 月 17 日访问
  46. 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 日访问
  47. 亚当斯 G (ed)，多兰 M，弗瑞德 G，海斯 S，霍奇 E，柯比 D，米歇尔 T，辛格 D (2011)时控文本标记语言(TTML) 1.0。万维网联盟。www.w3.org/TR/ttaf1-dfxp/2011 年 2 月 18 日访问
  48. W3C SVG 工作组(2011)什么是 SVG？网络图形标记。万维网联盟。www.w3.org/Graphics/SVG/2011 年 1 月 24 日访问
  49. 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 日访问
  50. 博尔特曼 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 日访问
  51. 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 日访问
  52. Baranovskiy D(2011)raphal-JavaScript 库。德米特里·巴拉诺夫斯基。raphaeljs.com/2011 年 1 月 23 日访问
  53. 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 日访问
  54. 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 日访问
  55. 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 日访问
  56. 卡莱尔 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 日访问
  57. 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 日访问
  58. 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 日访问
  59. McCarron S(ed)(2011)XHTML+RDFa 1.1-通过 XHTML 模块化支持 RDFa。万维网联盟。www.w3.org/TR/2010/WD-xhtml-rdfa-20100422/2011 年 5 月 3 日访问
  60. 波洛克·JT(2009)虚拟语义网。霍博肯，卫斯理出版社
  61. 沃森 M (2009)脚本智能:Web 3.0 信息、收集和处理。伯克利阿普莱斯
  62. 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 日访问
  63. 谷歌公司(2010)谷歌可以索引哪些文件类型？谷歌网站管理员中心。www.google.com/support/webmasters/bin/answer.py?hl=en&回答=35287 。2011 年 1 月 15 日访问****
© 版权声明
文章版权归作者所有，未经允许请勿转载。

相关文章

Kubernetes 存储
头像 鋒華
79
DroppyScrollView 使用教程
头像 一个烟圈
47
Google Heir 开源项目指南
头像 残存在记忆里的梦想
37
店铺很久没开，从新开回来，评分什么时候恢复？ – 淘宝天猫
头像 年兵
124
请问闲鱼店和淘宝店 数据怎样分开？ – 淘宝天猫
头像 大杏仁儿
132
钢琴曲
头像 老虎哟
69

暂无评论

您必须登录才能参与评论！
立即登录
暂无评论...
头像
走在漆黑的路上 投稿者
2文章 15评论 191浏览 0获赞

相关文章

Oracle 21c-PL/SQL连接远程数据库的方式
0
PLSQL中文显示乱码
0
openGauss 用于Oracle的外部数据包装器
0
oracle数据恢复—断电导致Oracle数据库出错的数据恢复案例
0
linux Oracle19c安装
0

随机网址

猜你喜欢

XieNiao 血鸟导航，集网址、资源、资讯于一体的定制化导航主题，简约优雅的设计风格，自定义网址的用户功能，自定义主页，欢迎您的体验

服务协议 法律声明 联系我们 版权投诉 友链申请 网站收录

扫码加QQ群血鸟导航

扫码加QQ群
Copyright © 2024 血鸟导航 赣ICP备19014419号  赣公网安备36020002000448号