Document

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

2024-08-23
dfer
148
VKDoc CSDN

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

协议：CC BY-NC-SA 4.0

九、优化的外观

设计一直是网站开发中的一个重要因素，部分原因是外观决定了第一印象。如果一个网站的设计吸引眼球，访问者更有可能成为顾客或客户。Web 排版最近开始吸引注意力，尤其是通过适当的空白处理和 web 字体的引入。作为网站基本组成部分的图像应该针对 web 发布进行优化，以达到合理的质量与文件大小比率，并最大限度地减少下载时间。由于高速互联网连接已经变得普遍，对共享多媒体内容的需求已经大大增加。在 HTML5 中引入新元素之前，通用对象一直用于嵌入音频和视频内容。虽然设计和多媒体非常受欢迎，但基本的可用性原则应该始终牢记在心:功能重于设计。

在这一章中，你将学习如何创建多栏布局和固定菜单，而不用现在已经过时的方法，例如应用表格和框架的方法。这一章还描述了一个 CSS 属性，叫做z index，它提供了对一个在另一个之上的层的外观的完全控制。

直到最近，大多数网站使用一个小列表中的一种或多种字体，导致了某种单调。这些年来，有许多方法可以使用更多种类的字体，但是没有一种方法非常令人满意或可靠。现在，您可以通过声明使用字体文件来呈现文本内容来改善文本的外观，这使得使用精心选择的字体以高质量显示网页成为可能。然而，网站不仅可以包含文本。您将学习如何优化用于 web 发布的图像并嵌入多媒体文件，如 Flash 内容、音频和视频。

布局

web 内容的布局决定了整体外观，并对功能、可用性、可访问性和设计有很大的影响。Web 布局应该是可靠的，并且独立于浏览器和分辨率。

定位和浮动

一些网页组件被放置在与浏览器窗口的一个角相关的页面上，例如左上角(0, 0位置)，而其他组件的位置取决于它们的父元素(容器)的位置。有各种选项，包括相对、绝对和固定定位。除了适当的定位，您还必须小心提供独立于浏览器和分辨率的解决方案。

在您的网站上，也许某些组件应该“浮动”在网页上，内容应该出现在正文的旁边，而不是上面或下面。典型的例子是图像，它经常应用float属性将文本环绕在图像周围。

绝对和固定位置

根据设计和站点结构，某些页面组件(徽标、菜单、页眉、页脚等)应该是固定的，在页面滚动时不应移动。

CSS 规则position: fixed;与position: absolute;非常相似，但是第一个规则在用户滚动页面时阻止元素滚动，而第二个规则则不阻止。Internet Explorer 6 或更早版本不支持position: fixed;规则，这是多年来网站开发中的一个主要布局问题。为了提供类似的效果，position: fixed;没有恢复为position: absolute;，而是被认为是position: static;，这导致根本没有定位。因此，带有position: fixed;的 web 页面底部的一个层(它原本是一个页脚，在用户滚动页面时保持不变)根据旧浏览器中的 DOM 结构出现在页面上，导致不美观甚至不可用的外观。从 IE7 及更高版本或在其他浏览器中不存在该问题。

无表格网页布局

直到最近，相当数量的网站应用表示标记而不是语义代码。(X)HTML 表格已被用于安排网站内容和确保逐像素布局。这种简单快捷的“开发”也受到了 WYSIWYG 开发工具的鼓励。然而，它有许多缺点。布局依赖于表格的网站会浪费带宽，并且需要更长的下载和渲染时间。文档结构不合逻辑，使得语义数据更难或不可能检索。这些网站不可访问且难以维护。

无表格网页布局消除了使用表格进行页面布局和网页元素定位的 [1 ]。这并不意味着网页上不允许使用表格，但是表格应该专门用于表格数据。

网页组件的定位和布局可以完全由层控制，这些层在标记中表示为div元素。

以下部分描述了两种非常常见的布局类型。当然，开发人员也可以创建其他布局，但关键是任意布局都可以用div元素来描述。

多栏布局

典型的网页布局是浮动分栏 [2 ]的多栏布局。多栏网站通常在每页的顶部有一个标题。菜单通常在左边(或右边)提供。此外，页脚是每页底部经常使用的组件。通常的列数是一、二或三。图 9-1 显示了一个典型的三列布局。

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

***图 9-1。*三列布局

你可以在页面顶部看到主菜单。主菜单下面是主要内容。左边有子菜单，而右边有附加功能，如搜索框和博客条目。

集中列布局

另一种典型的排列方式是使用宽度约为 700–900 像素的中央列(??)，理想情况下不超过 800 像素，以确保主要内容在 800×600 (SVGA)的小分辨率下仍然可见。 ¹ 这类网站通常会把标题和主菜单放在最上面。或者，在主列的左侧(或右侧)可能有一个次级或子菜单。如果需要，可以在底部有一个页脚。

¹ 下一个标准分辨率为 1024×768 (XGA ),比许多具有互联网浏览功能的现代移动设备的屏幕分辨率都要高，例如上网本或具有宽屏显示的小型笔记本电脑。由于典型分辨率不断提高，最新型号可能支持 1024×600 (WSVGA)或更高的分辨率，这为 XGA 优化提供了足够的宽度。智能手机屏幕的分辨率更小，网站可以通过替换样式表为其优化，正如前面在第五章中讨论的。

水平居中页面内容有多种可能性。一种常用的方法是将属性值auto应用到容器的左右两边(图 9-2 )。CSS2 规范 [3 ]的勘误表中介绍了这种技术。清单 9-1 显示了一个例子。

***清单 9-1。*自动宽度页边距居中

#content { width: 720px; margin: 0px auto; } 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

***图 9-2。*自动宽度页边距居中

该方法适用于所有支持 CSS2 的浏览器。

Simon Coggins 介绍的另一种集中内容的方法是使用偏移量和负边距。在声明了容器元素的宽度之后(类似于前面的方法)，通过绝对定位和 50%的左偏移的组合，它的左边缘在页面内水平居中。由于内容从页面的后半部分开始，因此层的左边距应该设置为层宽度的一半。例如，如果要居中的层的宽度是 780px，左边距应该设置为-390px ( 图 9-3 )。

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

***图 9-3。*负边际集中

相应的 CSS 规则集可以如清单 9-2 所示编写。

***清单 9-2。*负边际集中

#main { position:absolute; width: 780px; left: 50%; margin-left: -390px; }

对象周围的文本

在许多情况下，网页文本应该“环绕”一个对象或图像。您可以通过使用float属性来实现这种效果；换句话说，图像(或者它的容器)应该是浮动的(清单 9-3 )。

***清单 9-3。*浮动图像容器的样式

`#onleft {
float: left;
}

#onright {
float: right;
}`

图 9-4 显示了一个没有样式的图像和两个使用先前规则的浮动图像。如果没有浮动，文本不会环绕图像:只有文本的第一行出现在图像旁边(顶部照片)。第二张图片应用了清单 9-3 的第一条规则，呈现在左边，右边被文本包围。第三张图片使用了清单 9-3 中的第二条规则，因此出现在右边，而文字围绕在图片的左边。

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

***图 9-4。*漂浮的影像

由于文本将被呈现在浮动图像的右边，你应该声明边距以得到如清单 9-3 所示的最终结果。如果您想要在右侧显示一个页面的所有图像，您可以在没有标识符或类别的图像上指定float:right;规则为img { float:right; }。

如果要确保下一个段落显示在浮动图像的下面，可以使用clear属性来停止左侧(clear: right;)、右侧(clear: left;)或图像两侧(clear:both;)的浮动。

层层叠叠

网站组件也可以在虚拟空间中考虑，其中组件顺序可以由表示深度(第三维)的 CSS 属性设置。这个属性叫做z-index。它经常用于设置层顺序。值越大，元素在堆栈中的顺序越高。具有最大z-index的元素出现在页面所有其他元素之上。这个属性只作用于定位的元素(有一个position规则的元素)。例如，清单 9-4 和清单 9-5 中的规则集将带有徽标的层放在主要内容之上。

***清单 9-4。*下层(对比清单 9-5 )

#main { ** position:absolute;** width: 780px; left: 50%; margin-left: -390px; ** z-index: 1;** }

***清单 9-5。*上层(对比清单 9-4 )

#logo { ** position: absolute;** width: 146px; height: 120px; margin-top: 20px; margin-left: 20px; ** z-index: 2;** }

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传注意 Flash 内容需要一个额外的参数，允许开发人员覆盖默认设置，将 Flash 内容呈现在其他元素前面(参见“在 XHTML 中嵌入 Flash”一节)。

排版

文本一直是一个基本的 web 组件。第一个 web 文档主要包含(如果不是全部的话)白底黑字的文本。在接下来的几年里，网络逐渐转变为一个完整的多媒体平台。同时，出现了更复杂的空白处理和字符编码。

与书籍和其他印刷媒体相反，在这些媒体中，正确的字体排列和字体设计总是由排版来保证，直到最近，网络还缺乏这些功能。

在引入 TFT 显示器和为其设计的 ClearType 字体后，字符在屏幕上变得非常清晰。随着网络字体的日益流行，网络上出现了层出不穷的各种字体。

你必须小心，不仅要提供引人注目的字体和类型，还要提供清晰易读的文本。实现这一目标所需的技术被称为网页排版，它也应该保证字符和空白的正确外观。

误用字符

根据万维网联盟的说法，你应该注意在网页上使用正确的标点符号，而不是误用的对应符号(表 9-1 ) [4 )。哪些标点符号是印刷正确的取决于网页的自然语言。例如，在英式英语中，单引号通常比双引号更受欢迎，逗号通常位于右引号之外，而不是 ?? 之内。在其他语言中，引号可能会颠倒。在长破折号和短破折号的使用上也存在类似的差异。

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

在某些字体中，左引号和右引号看起来是相同的，称为直引号、竖引号或打字机引号，不应在文本流中使用。另一方面，这些字符在标记中用作属性值的分隔符。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传提示许多文本编辑器不支持印刷(卷曲)引号，并插入它们误用的对等物。获得正确引号的一个方法是将它们插入到字处理器中(通常通过按 Shift+2)，然后通过剪贴板将字符复制到源代码中。

即使在标记中使用了正确的引号，浏览器也可能会错误地呈现它们。尽管将q标签应用于短引语是一个简单明了的想法，但是 ² 浏览器会以不同的方式呈现它。Firefox 3.6.6 正确地呈现了左引号和右引号。但是，IE8 错误地应用了字符„来开始引用(结束是正确的)。在 Safari 5 和 Opera 10.6 中，被误用的等效物"被用于渲染。然而，报价的呈现也依赖于所使用的语言，并且依赖于标记中正确的语言设置。

网页字体

最初，Web 是作为一种基于文本的媒体开发的。最初，可供 web 设计人员选择的字体仅限于所有主要平台上本地安装的字体的交集。1998 年，CSS2 规范引入了字体匹配和下载机制(在 CSS 2.1 中已被丢弃)。在 CSS3 中，可以应用外部字体，如果特定字体无法下载或没有安装在用户的计算机上，可以声明多个(相似)字体作为后备选项。然而，这项技术存在法律和技术两方面的问题。

² 如果报价跨越多行，应该用 blockquote 标签代替。

字体一般是有版权的；因此，他们的字体文件不能在网站上存储和使用。甚至那些被宣传为免费字体的字体在很多情况下也不能用于网站。自从微软在“Web 核心字体”计划下发布了标准字体包，Arial、Georgia 和 Verdana(以及其他字体)已经成为 Web 上事实上的 ?? 字体。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传注意各种字体的字符种类千差万别。虽然大多数字体文件都支持英文字母和常用标点符号，但对于用英语以外的自然语言编写的站点来说，受支持字符的列表应该是一个主要问题。多语言网站不应应用不支持所有必需字符的字体文件，这使得不同语言版本可以应用相同的字体。避免不支持的字符的一个方法是应用 Unicode 字体。然而，并不是所有在字体收藏网站上显示为“Unicode 字体”的字体都支持真正广泛的 Unicode 字符。事实上，字体文件的大小通常为 20MB 到 25MB(相比之下，典型的字体文件大小为 50KB 到 300KB)，这对于 web 发布来说是不够的:字体文件在下载时不会出现，这比下载整个页面及其所有组件(包括图像)要花费更多的时间。

从技术角度来说，浏览器对字体嵌入和下载的支持因浏览器而异。然而，由于标准化和实现的日益普及，这种差异正在减少。从版本 4 开始，Internet Explorer 支持字体嵌入。其他浏览器推出了 TrueType (TT)和 OpenType (OT)字体的字体链接(Firefox 3.5+，Opera 10+，Safari 3.1+，Google Chrome 4.0+)。Internet Explorer 9+也支持 TT/OT 字体，但只支持那些嵌入权限设置为可安装的字体。TT 已经扩展到支持附加元数据和 gzip 压缩，称为 Web 开放字体格式(WOFF)。WOFF 是一种跨浏览器、仅用于 web 的格式，由 W3C[6 标准化，并受 Internet Explorer 9+、Mozilla Firefox 3.6+和 Google Chrome 5+支持。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传注出现在某些字母和符号笔画末端的半结构细节在印刷术中被称为衬线。使用衬线的字体，如 Times New Roman、Cambria、Garamond 和 Georgia，称为衬线字体。没有这些小突出特征的字体是无衬线字体、 ³ 例如，Verdana、Tahoma 和 Helvetica。声明一个通用字体系列(serif、sans-serif、草书、fantasy、monospace)是一个很好的后备机制 [ 7 ]。

sans 这个词在法语中是“没有”的意思。

两种不同的字体(或者两种不同格式的同一个字体 ⁴ )可以用回退机制声明，如清单 9-6 所示，也可以如清单 9-7 所示应用。

***清单 9-6。*使用不同格式存储的字体

@font-face { font-family: "Csuff"; src: url("http://example.com/fonts/csuff.ttf"); src: url("http://example.com/fonts/csuff.eot"); }

***清单 9-7。*应用带有回退机制的网络字体

p { font-family: "Csuff", "Helvetica", sans-serif; }

请注意，还提供了广泛可用的字体，以及始终有效的字体系列声明，以防两种外部字体都无法使用。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传提示衬线字体易于阅读 ⁵ 适用于在网页上发布的中等或大字体的长文本块，以及打印机样式表。无衬线字体更适合小字体的短文本，例如页脚中的版权信息，通常用 Verdana 或类似的字体书写。像 Courier 和 DejaVu Sans Mono 这样的等宽字体是预格式化文本、计算机代码和打字机效果的理想选择。草书字体，如 Comic Sans MS 和 Brush Script，用于草书笔迹，如签名。幻想字体最适合用于标题和艺术文本(例如，Impact 和 Copperplate)。

字体的普通、粗体和斜体版本，以及粗体和斜体字体通常存储在单独的文件中。因此，需要多个声明来下载和应用所选字样的适当字体样式(清单 9-8 )。否则，标题和strong元素的内容将使用普通字体而不是粗体显示，em元素将使用普通字体而不是斜体显示，等等。

***清单 9-8。*同一字体的多个声明

`@font-face {
font-family: Calluna;
src: url(‘fonts/Calluna-Regular.otf’);
}

@font-face {
font-family: Callunab;
src: url(‘fonts/Calluna-Bold.otf’);
}

@font-face {
font-family: Callunai;
src: url(‘fonts/Calluna-It.otf’);
}

body {
font-family: “Calluna”, “Helvetica”, serif;
}

h1, h2, h3, strong {
font-family: “Callunab”;
}

em {
font-family: “Callunai”;
}`

虽然有将字体从一种格式转换成另一种格式的工具，但在许多情况下这是法律禁止的。

这就是它们被广泛应用于书籍、报纸和杂志的原因。

网络字体也有一些替代品。一种被称为图像替换的技术，被许多人认为是合法的，被一些网页设计师用来使用字体的渲染图像。然而，图像替换阻止了文本选择，具有可搜索性和可访问性问题，并且增加了带宽使用。

另一种方法是应用基于闪存的解决方案可扩展的因曼闪存替代方案 ( sIFR )。它类似于图像替换，但文本是可选的，并呈现为矢量图形。一个很大的缺点是，这种方法依赖于客户端的 Flash 插件。

文字也可以用 SVG 或者 VML ⁶ (对于 Internet Explorer 到版本 8)用 JavaScript 替换。

在 SVG 1.1 中，可以在 SVG 文档中创建字体。SVG 字体可以改善表示文本的图形(如徽标)的语义。Safari 3+和 Opera 8+部分支持 SVG 字体。

类似于(X)HTML 文档，CSS 也可以应用在 SVG 文档中。因此，@font-face规则也可以用于 SVG 文本 [8 ]。清单 9-9 显示了一个例子。

***清单 9-9。*在 SVG 中使用@fontface CSS 规则的例子

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

早期版本的 Internet Explorer 不支持 SVG，而是支持矢量标记语言(VML ),现在已经过时。

嵌入外部内容

大多数网站不仅包含格式化文本，还包含图形和多媒体内容、音频和视频剪辑以及 Flash 动画。与文本文件中由标记语言描述的格式化文本内容不同，这种类型的内容是从二进制文件中检索的。尽管它的最佳格式和功能没有针对 web 发布进行标准化，但它的优化对整体外观、观感、文件大小和下载时间有着巨大的影响。

光栅图形

位图图形(也称为光栅图像)是常见的网站组件，它存储在映射的位数组中，代表像素网格。在 web 上，位图文件格式主要用于存储照片和其他非艺术线条的图像。有几个图像文件功能需要针对 Web 发布进行优化，如像素密度、颜色深度和分辨率。您应该根据内容和期望的质量来选择文件格式。

Web 图像处理和润饰的黄金法则是，无论要修改什么，都不要覆盖原始的主文件(即使文件很大)。例如，如果您不保留.psd文件，则在 Photoshop 中的多个图层上创建的复合图像中的标题以后将无法修改。同样，如果您没有存储原始文件，经过大量修饰或压缩的照片也无法恢复到原始状态(这在许多情况下可能很有用)。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传注以下章节描述了主要特点和可能性；然而，图像处理的详细描述超出了本书的范围。

像素密度

不仅仅是文本内容，图形也可以而且应该针对网络发布进行优化。空间点密度的度量是每英寸点数(dpi)，这意味着在 1 英寸(2.54 厘米)的跨度内，一条线上代表的单个点的数量。虽然点密度与图像分辨率相关，但它是间接相关的。然而，代替用于打印的点，计算机屏幕应用像素来构建图像。它们的密度可以用每英寸像素(ppi)来表示。虽然令人困惑，但计算机屏幕的标准化像素密度通常以 dpi 而不是 ppi (72、96 和 120 dpi)表示是不正确的。最低值 72 ppi 来自印刷字体，其中 1 磅被定义为 1/72 英寸(0.0139 英寸或 352.8 米)。在 72 ppi 屏幕上显示的图像与 72 dpi 的打印版本具有相同的物理尺寸；换句话说，纸上的 1 pt 等于屏幕上的 1 px。然而，这只是一种理论方法；并不准确，也失去了意义。由于像素密度不仅影响图像渲染的质量，也影响文本的可读性，较高的值为提供了更好的用户体验。现代操作系统和计算机屏幕通常支持 96–120 PPI。屏幕的像素密度可以通过以像素为单位的对角线分辨率(使用勾股定理)和以英寸为单位的对角线尺寸的比值来计算:

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

在哪里

d_p以像素为单位的对角线分辨率，

w_p是以像素为单位的宽度分辨率，

h_p是以像素为单位的高度分辨率，并且

d_I是以英寸为单位的对角线尺寸。

例如，一台配备 WSVGA (1024x600)屏幕的 10.1 英寸上网本提供 117.51 ppi，一台配备 WSXGA+ (1680x1050)屏幕的 20 英寸显示器提供 99.06 ppi，一台 23 英寸高清(1920x1080)显示器提供 95.78 ppi。

智能手机从这方面来说很有竞争力。4.3 英寸的 HTC Evo 4G 拥有 WVGA (800x480)屏幕，对应的像素密度为 216 ppi。2010 年，苹果 iPhone 4 采用了最大分辨率的屏幕，称为视网膜显示屏 (960x640)，这为 3.5 英寸的屏幕提供了令人难以置信的 326 ppi ⁷ 。截至 2011 年，高端智能手机推出了分辨率为 1280x720 的高清显示屏，典型屏幕尺寸为 4.3 英寸，像素密度甚至更高。

虽然 web 发布的最佳像素密度还没有标准化，但应该考虑到计算机屏幕和设置通常最大支持 120 ppi，平均应用 96 ppi。较大的像素密度会不必要地增加文件大小。

分辨率

在屏幕上，分辨率决定图像大小，而不是一般的质量(打印则相反)。作为一般规则，应该应用提供所需细节的最小图像尺寸。在大多数情况下，现代数码相机拍摄的 8-10 MP 照片应该调整到较小的分辨率，以便在网络上发布。应该记住的是，高分辨率的照片体积很大(根据压缩比和文件格式，可能有几兆字节)，因此下载时间太长。此外，他们有太多的细节，可能会导致法律问题，考虑到背景中的人脸、车牌等等。人脸的高分辨率描绘可以用于欺诈目的，因为它可以很容易地修饰和打印(特别是在护照尺寸上)。

强烈建议在img元素上提供width和height属性，以便更快地呈现网页图像。但是，这些属性不应该用于调整照片的大小。在线画廊和相册应该应用链接到原始或全尺寸版本图像的小缩略图。

在距离人眼 12 英寸的距离，这是人类视网膜能够处理的最大细节量(因此得名)。

走样

调整数字图像的大小会导致失真和质量下降。例如，以较低分辨率呈现的高分辨率图像可能会导致称为混叠的失真伪像。抗锯齿允许物体的边缘被平滑渲染。在 web 上，抗锯齿通常应用于字体和弯曲的 Web 图形，如圆角。

抗锯齿需要与背景融合的强度逐渐降低的额外颜色(图 9-5 )。

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

***图 9-5。*锯齿与反锯齿字体和圆圈。上面是原始图像，下面是放大图。注意左边图像的像素化边缘。

在网络上使用抗锯齿字体有利也有弊。最重要的优势是更平滑的字体，其中许多更容易阅读，因为减少了模糊，与印刷类型相似(取决于所使用的字体)，并且在许多情况下更美观。然而，小字体变得太模糊而无法阅读，而且锐利的边缘也不总是精确的。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传注意不同网页字体的可读性差别很大，甚至同样的字体在中等大小时看起来很漂亮，但用小字体时就变得不可读了。这两种状态之间通常会有一个过渡:字体曲线的某些部分会消失，而其他部分仍然可见。而且同样的网页字体在各种浏览器中的渲染也是不一样的。

颜色深度

在位图图像或视频帧缓冲区中表示单个像素的颜色所需的位数通常从 1 到 2 不等 ³² ，被称为色深。因此，颜色深度越高，文件越大，这是图像优化的一个重要因素。

单色(二进制)图像(如带有黑线的艺术线条)应以 1 位色深存储，换句话说，每个像素有两个可能的值。

完全由 256 种灰度组成的黑白照片应该表示为 8 位灰度图像(2 ⁸ = 256)。

24 位色深(真彩色)应用每通道0和255之间的各种强度值的红色、绿色和蓝色(RGB 颜色模型)，以通过加色混合再现 2⁸2⁸2⁸= 2²⁴= 16，777，216 种不同的颜色。因为人眼不能区分这些通道的任何两个相邻强度值，所以这个色深足以存储照片。

具有部分透明部分的照片级真实感图像可以用 32 位表示，并带有一个称为 alpha 通道 ⁸ (即 RGBA 色彩空间)的附加通道。

徽标、象形图和图标的颜色深度会有所不同，这取决于复杂性和图像内容。

压缩

为了减小文件大小，数字位图图像通常被压缩。由于所需带宽较小，压缩图像不仅在存储方面很受欢迎，在网络发布方面也很受欢迎。

图像压缩可以是有损的或无损的。在有损压缩的情况下，部分原始信息丢失且无法恢复，可能会影响图像质量。无损压缩算法允许从压缩数据中重建原始数据，这是一个很好的功能，但并不总是需要。有损压缩算法产生的文件通常比使用无损压缩的文件小；但是，如果压缩比过高，它们的质量可能会降低。如您所见，JPEG 是最流行的有损图像格式，PNG 是网络上最流行的无损图像格式。

图像处理软件工具通常提供调整压缩程度的选项，使得在存储大小和图像质量之间进行权衡成为可能。例如，Adobe Photoshop 有一个 JPEG 压缩比的标度，其值为0–12。支持的质量范围有Low(0–4)Medium(5–7)High(8–9)Maximum(10–12)。在文件另存为…对话框中确定文件的名称和目的地后，这些设置才可用(图 9-6 )。

还有其他方法来提供透明度，但对于部分透明的照片，这是常见的解决方案。

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

***图 9-6。*文件小质量好

JPEG 通常可实现 10:1 的压缩，图像质量几乎没有损失。

隔行扫描

某些位图格式(如 GIF 和 PNG)可以在图像完全下载之前提供图像的降级副本。这种方法被称为交错。先进的图像处理软件应用支持隔行扫描，并提供将这些文件保存为隔行扫描或非隔行扫描的选择。通过在渐进式 JPEG 文件中应用频率分解层级，可以在照片中实现类似的效果。在慢速拨号连接的时代，交错是一个有用的功能，但在高速互联网连接广泛应用后，它失去了大部分的意义。

透明度

部分透明的图像越来越受欢迎。它们不仅可用于设计效果，还可提供可用于不同背景颜色或纹理的图像(图 9-7 )。

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

***图 9-7。*三个不同背景上的图像(第一行)。第二行放大到 600%。透明阴影完全适合所有背景

然而，并不是所有的光栅图像格式都支持透明。对于部分透明的几何形状和卡通风格的图像，GIF 通常是一个好的(有时是最好的)选择，而 PNG 则是更复杂的部分透明图像的理想选择。除了具有相对较大的相同颜色区域的非常简单的形状之外，PNG 是更好的选择。

光栅文件格式

网络上最常见的光栅图像文件格式是 JPEG、GIF 和 PNG。

联合图像专家组(JPEG)是一种常见的数字照片有损压缩格式。第一部分已在 ISO/IEC 10918-1:1994 [9 ]和 ITU-T T.81 (09/92) [10 ]、ISO/IEC 10918-2:1995[11]和 ITU-T T.83 (11/94) [12 ]、ISO/IEC 10918-3:1997[13]和 ITU-T T . 84(07/96)[14]中标准化

图形交换格式的原始版本 GIF87a 于 1987 年 [18 ]推出，支持透明和隔行扫描的增强版本 GIF89a 于 1989 年 [19 ]推出。

可移植网络图形(PNG)格式由 IETF RFC 2083 在 1997 年 [20 ]和 ISO/IEC 15948 在 2004 年 [21 进行标准化。然而，PNG 格式直到最近才获得完全支持。尽管 Internet Explorer 从 4.01b 版开始支持 PNG 图像，但直到 IE9，这种实现既不完整也不正确(例如，IE6 对 alpha 通道透明性的支持有缺陷)。各种浏览器之间的颜色不一致，部分原因是伽玛校正的处理方式不同(例如，在 Windows 下运行的 Safari 上，PNG 图像的颜色显示不正确)。幸运的是，现代浏览器克服了这些问题。

为给定图像选择正确的文件格式，应考虑文件类型和压缩算法的主要特征(表 9-2 )。

例如，与 JPEG 等其他格式相比，简单的图像(如实心圆)可以用两种颜色存储在 GIF 中，文件大小非常小。对于没有复杂内容的图像，可以使用 GIF、TIF 和 PNG 等文件格式的调色板(选定/索引颜色)来降低颜色深度。当然，抗锯齿版本需要更大的颜色深度，从而导致更大的文件大小。尽管 GIF 和 PNG 格式通常比 JPEG 更适合存储图标和徽标，但对于此类内容，应该首选 SVG 矢量格式(参见“矢量图形”一节)。

尽管 JPEG 压缩算法对照片非常有效，但它会向整个图像添加额外的像素，包括实心区域。结果，简单的图像变得比原来更复杂。这就是为什么以 JPEG 格式存储的实心圆，即使压缩率很高，其文件大小也比相同内容的 GIF 文件大几倍的主要原因。此外，如果压缩比高，JPEG 伪像会变得明显，从而导致图像质量降低。另一方面，JPEG 可以完美地处理复杂的图像。如果压缩设置正确，图像质量与文件大小的比率非常好。

文件大小优化

像素密度、分辨率、尺寸、颜色深度、压缩比、图像复杂性和文件格式都对文件大小有很大影响。

有一个叫做动画可移植网络图形(APNG)的扩展支持动画。APNG 由 Firefox 3+，Opera 9.5+和谷歌 Chrome 的插件提供原生支持。

应该通过裁剪图像中无用或不必要的部分来优化宽度和高度。对于扫描的高分辨率图像，这是一项典型的任务，在这种情况下，通常可以删除图像部分而不会丢失信息。

必须使用所需的颜色深度；24 位色深是许多软件工具中的默认设置，在许多情况下可以在不影响图像质量的情况下降低色深。例如，黑白绘图不应存储 1600 万色。

所有图像都必须使用合适的压缩比。

使用 Photoshop 的文件保存为 Web & Devices…功能(图 9-8 )可以有效优化大小质量比。

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

***图 9-8。*Photoshop 中网页发布的文件格式和设置比较

Photoshop 还提供对所需文件大小的优化，但应该记住，图像内容和复杂性决定了合理的压缩级别。

除了 Photoshop 或 GIMP 中可用的 JPEG 文件的压缩设置之外，一些软件工具(如 JPEG Optimizer [22 ])能够通过对各种图像区域应用不同的压缩比来优化文件大小与质量的比率。

文件大小优化的主要目的是实现文件大小和图片质量之间的完美平衡。一个包含低质量图片的快速网页是没有意义的。

小的、高度压缩的版本(缩略图)应该提供到在线照片图库和相册中更大的、高质量版本的链接。这种方法允许用户确定图像是否与他们相关，因此，下载更大的版本是合理的，这自然会花费更多的时间。

矢量图形

矢量图像和位图图像有不同的应用领域。位图最适合于照片和照片级真实图像，而矢量图像可以应用于由直线和曲线组成的艺术品和插图。尽管如此，位图仍然在 Web 上广泛用于各种图像，包括应该以矢量格式提供的图像，部分原因是缺乏对所有主流浏览器的单一标准矢量格式的本地支持。在圣文森特和格林纳丁斯的广泛支持下，这种情况已经开始改变。

可缩放矢量图形应优先用于所有需要基本形状的图像，如圆形和多边形、贝塞尔路径和曲线、文本、不透明度、变换(旋转、倾斜、缩放等)、 ¹⁰ 渐变和动画。SVG 内容也可以与位图图形结合，例如与 PNG 文件结合。

和 PNG 类似，为了向后兼容，也要考虑 SVG 的浏览器支持。应该记住，浏览器对 SVG 的支持与内联 SVG 不同，SVG 应该通过img或object元素嵌入。此外，SVG 有几个版本，对不同版本的支持也各不相同。Gecko 布局引擎自 2005 年以来一直没有完整的 SVG 1.1 支持，自 2006 年以来一直没有完整的 WebKit 支持。Opera 从版本 8 开始支持 SVG 1.1 Tiny，从版本 9 开始支持 SVG 1.1 Basic 和部分 SVG 1.1 Full，从版本 9.5 开始支持部分 SVG Tiny 1.2(包括压缩 SVG)。

闪光

Flash 是在 Web 上发布活动内容的最流行的技术之一。然而，Flash 开发工具提供的标准嵌入代码通常不符合标准，并且存在一些与浏览器相关的问题。此外，如果 Flash 内容由于任何原因无法显示，则应支持自动激活的替代内容。

在 XHTML 中嵌入 Flash

第一个 Flash 实现应用了embed元素，该元素在 HTML 4 和 XHTML 中被弃用，取而代之的是object元素，但后来又被重新添加到 HTML 5 规范中(见下一节)。因此，在 XHTML 文档中，Flash 内容应该由object元素提供。

为了避免特定于浏览器和供应商的代码，已经引入了各种实现方法，包括复制(两次烹饪的方法*)、嵌套对象方法和闪存数据格式*。后者，即闪存 Satay，通过包含一个额外的movie参数，提供了健壮的、符合标准的闪存实现。W3C 也建议这种方法 [23 ]。清单 9-10 显示了一个例子。**

**______________

CSS3 也支持类似的效果。

***清单 9-10。*利用 Flash Satay 嵌入 Flash

<object type="application/x-shockwave-flash" **data="australia.swf"** width="735" height="677" ![images](https://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%2FU001.jpg&pos_id=img-ncyuqYUK-1724311458395)) id="flash"> <param **name="movie" value="australia.swf"** /> </object>

注意，同一个 Flash 文件既被指定为object元素上的data属性值，又被指定为movie参数值。同样重要的是要认识到，旧方法使用的classid和codebase参数已经被取消。如果在修改传统 Flash 嵌入代码时将codebase参数留在代码中，它会阻止 Firefox 呈现 Flash 内容，而显示可选提供的替代内容(或者什么也不显示)。

然而，即使这种方法也有一些已知的问题。例如，使用 Flash Satay 方法，某些浏览器(如 Internet Explorer)不会流式播放 Flash 电影。等待整个文件下载完毕，然后开始播放，这种方法只适用于小文件和快速互联网连接。

如果您开发一个网页，各层之间相互重叠，那么默认情况下 Flash 内容会出现在所有其他网站元素的上方，这可能会非常令人沮丧。为了提供在包含 Flash 内容的页面中设置层顺序的可能性，应该设置一个附加参数(wmode)(清单 9-11 和 9-12 )。

***清单 9-11。*设置不透明 Flash 内容的wmode

<param name="wmode" value="opaque" />

参数值opaque表示内容不透明。如果是透明的，属性值应该改为transparent ( 清单 9-12 )。

***清单 9-12。*设置透明闪光内容的wmode

<param name="wmode" value="transparent" />

虽然 Flash 内容的透明度和 Flash 内容在图层顺序中的堆栈位置之间似乎没有关联，但是应该使用wmode参数来设置这两者。在wmode参数上使用了opaque或transparent属性值；Flash 内容可以发送到网页中的任何层之后(或在层顺序中的任何所需位置)。与wmode相关的唯一问题是 Flash 内容对于使用屏幕阅读器的用户来说变得不可访问，因此最好尽可能避免。

类似于(X)HTML 标记，Flash 内容应该是可访问的和搜索引擎友好的。应该检测用户安装的 Flash 插件的版本，以确定它是否是最新的。过时的插件可能会遇到只有更高版本的插件才支持的功能。这应该被认为是为了消除破碎和缺失的内容。

至于版本困境，Adobe 提供了 Flash Player 检测套件[24；然而，该套件提供的代码不符合标准。

DOM 脚本可以解决这些问题。一个开放源代码的例子是 Geoff Stearns 等人的 SWFObject 。SWFObject 提供了一种跨浏览器的方法，使用非常小的 JavaScript 代码将 SWF 文件嵌入到网页中。这段 JavaScript 代码检测 Flash Player、声明替代内容、改进搜索引擎索引、帮助 Flash Player 下载(如果没有安装的话)、包括 Adobe Express Install 并为 JavaScript 开发人员提供一个 API。然而，使用 JavaScript 的版本检测依赖于脚本，导致更长的代码，并且使 Flash 嵌入过于复杂。作为结论，没有比 Flash Satay 更好的符合标准、跨浏览器的 Flash 嵌入方法了。

在(X)HTML5 中嵌入 Flash

HTML5 有一个embed元素，用于需要插件的嵌入内容。它支持 HTML5 的所有标准属性和事件属性。此外，它还具有特定的属性src、type(指定 MIME 类型)、height和width。你可以像清单 9-13 中的那样使用它。

***清单 9-13。*嵌入在(X)HTML5 中的基本 Flash】

<embed src="australia.swf" />

embed标签还支持 HTML5 的全局和事件属性，这已经在第三章中讨论过了。

音频

在 HTML5 之前，从来没有对在网页上播放音频的原生标记支持。大多数音频内容都是通过 Flash 等插件播放的。这种方法的主要问题是，并非所有的浏览器都有相同的插件。

HTML5 指定了通过audio元素包含音频内容的标准方式。它可以用来播放声音文件以及音频流。元素支持三种主要的音频格式:MP3、Ogg Vorbis 和 WAV。然而，浏览器对这些格式的支持各不相同(表 9-3 )。注意在 IE8 和更早的版本中根本不支持audio元素。

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

元素的基本用法很简单(清单 9-14 )。

***清单 9-14。*基本音频嵌入(X)HTML5

<audio src="valerie.mp3"> </audio>

除了指定要播放的音频内容的源 URL 的src属性之外，还有用于自动播放(autoplay="autoplay")、控制按钮(controls="controls")、重复播放(loop="loop")和在页面加载时加载(preload="preload")的其他属性。如果autoplay存在，则最后一个被忽略。

为了实现更高级别的可访问性，应该提供替代内容(清单 9-15 )。

***清单 9-15。*音频替代内容

<audio src="valerie.mp3" controls="controls"> <p><a href="valerie.mp3">Valerie by Joy</a></p> </audio>

由于浏览器支持的某些格式不能在另一种浏览器中播放，audio元素允许链接到不同音频文件的多个源声明。清单 9-16 显示了一个例子。

***清单 9-16。*不同格式的多源申报

<audio controls="controls"> ** <source src="valerie.mp3" type="audio/mpeg" />** ** <source src="valerie.ogg" type="audio/ogg" />** <p><a href="valerie.mp3">Valerie by Joy</a></p> </audio>

浏览器可以播放不同音频格式中第一个支持的格式。

视频

多年来，发布视频只能通过通用对象嵌入来实现。由于各种视频和音频编解码器以及不同的浏览器支持，仍然没有在 Web 上发布视频的最终解决方案。

在 XHTML 中嵌入视频

YouTube 或 Google Video 等视频共享服务通过 Flash Player、播放电影，其中的内容可以使用前面讨论过的 Flash Satay 方法嵌入。清单 9-17 显示了一个例子。

***清单 9-17。*使用 Flash Satay 嵌入 Flash Sdeo】

窗口媒体视频文件(.wmv)可以通过使用 MIME 类型video/x-ms-wmv ( 清单 9-18 )来嵌入。

Adobe Flash Player 广泛用于在网站上嵌入视频，因为许多浏览器都提供了原生支持。

***清单 9-18。*嵌入 WMV 视频文件

对于 QuickTime 视频，有专门的 MIME 类型:video/quicktime和application/x-quicktime。IE 倾向于通过 ActiveX 控件打开这样的视频。为了以独立于浏览器的方式嵌入 QuickTime 视频，你可以使用列表 9-19 中的方法。

***清单 9-19。*嵌入一个 QuickTime 视频文件

作为 IE 风格的条件注释 ¹² 提供的代码被除了 Internet Explorer 之外的所有浏览器使用，在 Internet Explorer 中它被隐藏并应用外部对象。

在(X)HTML5 中嵌入视频

与使用 XHTML 中的object元素嵌入视频的复杂性相反，(X)HTML5 提供了video元素，它易于使用，并且对嵌入的视频具有完全的控制权。IE9+、Firefox 3.5+、Chrome 3.0+、Opera 10.5+和 Safari 3.0+都支持video元素。但是，其可用性还取决于支持的编解码器。如果你只是从大量的视频文件格式中想到 DivX、Xvid、WMV、FFmpeg、3ivx、索伦森或 Flash Video，web 浏览器的视频编解码器支持无疑还处于初级阶段(表 9-4 )。

这个方法是由拉克伦·亨特提出的。

当然，没有必要最大化 Web 上本地支持的视频格式的数量，但是对最广泛使用的高级格式的可靠支持将是可取的。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传注意许多视频文件都是以容器格式存储的，并不局限于一种视频和音频编解码器。因此，对视频容器的完全支持应该包括对该容器格式中允许的所有类型的视频和音频编解码器的支持。例如，如果浏览器供应商希望引入对.flv Flash 视频的支持，则需要支持 H.264/MPEG-4 AVC、Sorenson、Screen Video 和 VP6 视频编解码器，以及 AAC、ADPCM、Linear PCM、Nellymoser、MP3 和 Speex 音频编解码器。此外，许多编解码器拥有专有许可证或受到专利的阻碍(这是 Chrome 放弃 H.264 支持的主要原因)。显然，音频和视频编解码器的不同关联以及许可问题使得在 Web 上标准化视频实现变得相当复杂。不同的格式适合不同的用途和应用领域，视频发布没有终极选择:看场景而定。

清单 9-20 显示了video元素的基本代码。

***清单 9-20。*基本视频嵌入(X)HTML5

<video src="sample.ogv"> </video>

可以随意添加高度或宽度等特征。在视频无法呈现的情况下，也可以定义表示视频中的一帧的图像。此外，在开始和结束的video标签之间也可以给出替换内容(清单 9-21 )。

清单 9-21。(X)html 5 视频嵌入的附加属性和替代内容

<video src="sample.ogv" width="320" height="240" poster="sample.jpg"> ** <p>Download the <a href="video.ogv">sample video</a> (OGV, 5.34 MB)</p>** </video>

通过使用video元素上的controls属性，可以在浏览器中显示或隐藏视频控件(清单 9-22 )。

***清单 9-22。*为(X)HTML5 视频嵌入设置显示的控件

<video src="xyz.mov" **controls="controls"**> </video>

由于每个浏览器中的视频编解码器支持不同，因此可以以各种格式提供相同的视频，从而避免了下载无法在系统上播放的视频的需要。清单 9-23 显示了一个例子。

***清单 9-23。*不同格式的相同视频

<video> ** <source src="video.mp4" type="video/mp4" />** ** <source src="video.ogv" type="video/ogg" />** <p>Download the <a href="video.ogv">sample video</a> (OGV)</p> </video>

但是，MIME 类型不能反映以容器格式存储的视频的编解码器(例如，MPEG-4 中的 H.264)。它们可以由codecs参数提供(清单 9-24 )。

***清单 9-24。*在(X)HTML5 中声明视频编解码器

<video controls="controls"> <source src="video.mp4" **type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'** /> <source src="video.ogv" **type='video/ogg; codecs="theora, vorbis"'** /> <p>Download the <a href="video.ogv">sample video</a></p> </video>

必须注意对type属性值交替使用单引号和双引号。

(X)HTML5 的video元素提供回放支持检测，包括media元素上的canPlayType()方法或onerror事件监听器。清单 9-25 是第二种方法的一个例子。

***清单 9-25。*视频背板支持(X)HTML5 中的检测

<video controls="controls"> <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"' ![images](https://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%2FU001.jpg&pos_id=img-ncyuqYUK-1724311458395)) ** onerror="fallback(this.parentNode)**" /> <p>Download the <a href="video.ogv">sample video</a> (OGV)</p> </video>

主要问题是浏览器中的视频支持还没有标准化。因此，不存在最终的跨浏览器视频嵌入代码。

尽管video元素的主要优点之一是避免了object元素和插件声明，但它们在某些情况下仍然有用。如果插件优于简单的错误消息，那么可以将object元素嵌入到video元素中。Flash 支持 MPEG-4/H.264/AAC 播放，所以一个.mp4文件通常可以用清单 9-26 中给出的代码播放。

清单 9-26。 MPEG-4 背板

<video controls="controls"> <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' ![images](https://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%2FU001.jpg&pos_id=img-ncyuqYUK-1724311458395)) onerror="fallback(this.parentNode)" /> <object data="videoplayer.swf"> <param name="flashvars" value="video.mp4" /> <p>Download the <a href="video.ogv">sample video</a> (OGV)</p> </object> </video>

某些浏览器无法播放视频或自动下载整个视频文件，即使播放尚未开始。Firefox 3.6+是一个例外，它只下载确定持续时间和渲染视频帧所需的片段。这个行为可以被preload属性覆盖。属性值none强制浏览器避免下载。metadata属性值暗示应该下载足够的数据来显示一帧并确定持续时间。值auto如果可能的话下载整个视频。通过省略仅在用户点击按钮时才提供的属性和源元素，可以在不支持preload="none"的浏览器中模拟它的效果(清单 9-27 )。

**清单 9-27。**用户点击加载视频

<video controls="controls"> Video not supported </video> <input type="button" value="Load video" ![images](https://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%2FU001.jpg&pos_id=img-ncyuqYUK-1724311458395)) ** onclick="document.getElementsByTagName('video')[0].src = 'video.mp4';"** />

此外，自定义控件也可以添加到视频嵌入中，因为(X)HTML5 中用于视频的 DOM API 支持几个可以通过 JavaScript 处理的事件。清单 9-28 显示了一个例子。

***清单 9-28。*定制视频控件

<script> var video = document.getElementsByTagName('video')[0]; </script> <input type="button" value="Play" onclick="video.play()" /> <input type="button" value="Pause" onclick="video.pause()" />

回放可以通过video元素的autoplay属性自动开始(清单 9-29 )。

***清单 9-29。*自动开始播放视频

<video src="abc.mp4" **autoplay="autoplay"**></video>

然而，并不是所有的用户都想下载视频，一个start按钮通常是首选。此外，如果同一页面上有多个视频，自动播放是不可能的，尤其是如果至少有两个不是静音的。

目前，video标签的src属性值应该是一个物理文件，这样就无法嵌入你最喜欢的来自 YouTube 的阿斯顿马丁视频。例如，清单 9-30 中的代码不能使用。

***清单 9-30。*使用video标签无法播放 YouTube 视频(非法示例)

<video src="http://www.youtube.com/watch?v=wKhEpifPTlY"></video>

(X)HTML5 视频可以使用drawImage方法用 JavaScript 在canvas上动态绘制，如清单 9-31 所示。

***清单 9-31。*使用 JavaScript 在画布上绘制的视频

`
Video not supported

Canvas not supported

总结

在本章中，您学习了如何通过使用标准优化外观来提供高级用户体验。您已经熟悉了许多有助于用户印象并影响网站可用性和功能的网站组件。您知道确保在各种设备上的正确外观是一个真正的挑战，这可以通过创建具有健壮布局的独立于浏览器和分辨率的网站来实现。您很清楚，许多曾经流行的技术已经过时，表格应该用于表示表格数据，而不是用于布局。CSS 提供了对网站组件外观的完全控制，应该使用多列布局来代替框架集文档。您还知道如何为您的网站优化图像，并以独立于浏览器、符合标准的方式嵌入 Flash 和视频文件。

在下一章中，你将学习最大化用户访问你的网站的可访问性技术。通过遵循可访问性指南，您不仅能够支持残障人士和移动用户，还能够支持所有其他人，因为每个人都从高级别的 web 可访问性中受益。

参考文献

hazal-Massieux D(2005)无表布局指南。万维网联盟。www.w3.org/2002/03/csslayout-howto2010 年 12 月 7 日访问
Cederholm D (2009) CSS 布局。在:网络标准解决方案，特别 edn。伯克利艾德的朋友
REC-CSS2-19980512 中的 W3C (2003)勘误表。万维网联盟。www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html2010 年 12 月 14 日访问
W3C (2010)英文排版。W3C 备忘单。万维网联盟。www.w3.org/2009/cheatsheet/#typo。2010 年 12 月 7 日访问
Mason B (2009)当免费字体不再免费时。小批量公司blog . type kit . com/2009/06/11/when-free-fonts-arent-free/。2011 年 1 月 24 日访问
基尤 J，乐铭 T，范布洛克兰德 E (2011) WOFF 文件格式 1.0。万维网联盟。www.w3.org/TR/WOFF/2011 年 9 月 7 日访问
博斯 B，切利克 T，希克森 I，李 HW (2011)通用字体系列。在:级联样式表级别 2 修订版 1 (CSS 2.1)规范中。W3C 推荐。万维网联盟。www.w3.org/TR/CSS2/fonts.html#generic-font-families2011 年 9 月 8 日访问
Dahl strm E，Dengler P，Grasso A，Lilley C，McCormack C，Schepers D，Watt J，Ferraiolo J，Jun F，Jackson D (eds)的“字体-面”元素。在:可缩放矢量图形(SVG) 1.1(第二版)。W3C 推荐。万维网联盟。www.w3.org/TR/SVG/fonts.html#FontFaceElement2011 年 9 月 7 日访问
ISO (1994)信息技术-连续色调静态图像的数字压缩和编码:要求和指南。国际标准化组织/IEC 10918-1:1994。国际标准化组织。www . iso . org/iso/iso _ catalogue/catalogue _ TC/catalogue _ detail . htm？csnumber=18902 。2011 年 2 月 26 日访问
ITU-T (1992) T.81:信息技术-连续色调静态图像的数字压缩和编码-要求和指南。国际电信联盟。www.itu.int/rec/T-REC-T.812011 年 2 月 26 日访问
ISO (1995) ISO/IEC 10918-2:1995 信息技术-连续色调静态图像的数字压缩和编码:符合性测试。国际标准化组织。www . iso . org/iso/iso _ catalogue/catalogue _ TC/catalogue _ detail . htm？csnumber=20689 。2011 年 2 月 26 日访问
ITU-T (1994) T.83:信息技术-连续色调静态图像的数字压缩和编码:符合性测试。国际电信联盟。www.itu.int/rec/T-REC-T.832011 年 2 月 26 日访问
ISO (1997) ISO/IEC 10918-3:1997 信息技术-连续色调静态图像的数字压缩和编码:扩展。国际标准化组织。www . iso . org/iso/iso _ catalogue/catalogue _ TC/catalogue _ detail . htm？csnumber=25037 。2011 年 2 月 26 日访问
ITU-T (1996) T.84:信息技术-连续色调静态图像的数字压缩和编码:扩展。国际电信联盟。www.itu.int/rec/T-REC-T.842011 年 2 月 26 日访问
ISO(1999)ISO/IEC 10918-4:1999 信息技术–连续色调静态图像的数字压缩和编码:JPEG 规范、SPIFF 规范、SPIFF 标签、SPIFF 色彩空间、APPn 标记、SPIFF 压缩类型和注册机构(REGAUT)的注册。国际标准化组织。www . iso . org/iso/iso _ catalogue/catalogue _ TC/catalogue _ detail . htm？csnumber=25431 。2011 年 2 月 26 日访问
ITU-T (1998) T.86:信息技术-连续色调静态图像的数字压缩和编码:JPEG 规范、SPIFF 规范、SPIFF 标签、SPIFF 色彩空间、APPn 标记、SPIFF 压缩类型和注册机构(REGAUT)的注册。国际电信联盟。www.itu.int/rec/T-REC-T.862011 年 2 月 26 日访问
ISO (2011) ISO/IEC FDIS 10918-5 信息技术–连续色调静态图像的数字压缩和编码:JPEG 文件交换格式(JFIF)。国际标准化组织。www . iso . org/iso/iso _ catalogue/catalogue _ TC/catalogue _ detail . htm？csnumber=54989 。2011 年 2 月 26 日访问
CompuServe(1987)GIF-图形交换格式。定义基于光栅的图形信息的存储和传输机制的标准。计算机服务公司。www.w3.org/Graphics/GIF/spec-gif87.txt。2011 年 2 月 26 日访问
CompuServe (1990)图形交换格式版本 89a。计算机服务公司。www.w3.org/Graphics/GIF/spec-gif89a.txt2011 年 2 月 16 日访问
Boutell T 等人(1997) PNG(便携式网络图形)规范 1.0 版。RFC 2083。互联网工程任务组。tools.ietf.org/html/rfc20832011 年 2 月 26 日访问
ISO (2004) ISO/IEC 15948:2004 信息技术-计算机图形和图像处理-便携式网络图形(PNG):功能规范。国际标准化组织。www.iso.org/iso/catalogue_detail.htm?csnumber=295812011 年 2 月 26 日访问
xat.com(2011)JPEG 优化器:用于 Windows 的 JPEG 图像压缩器。xat.com 互联网技术。xat.com/jpegopt/2011 年 2 月 26 日访问
W3C (2010)如何在有效的(X)HTML 网页中包含 flash？在:标记验证器的帮助和常见问题中。万维网联盟。validator.w3.org/docs/help.html#faq-flash2010 年 12 月 15 日访问
Adobe (2010) Flash Player 检测工具包。Adobe 系统公司。www.adobe.com/products/flashplayer/download/detection_kit/2010 年 12 月 7 日访问
谷歌公司(2010) Swfobject。谷歌项目托管。code.google.com/p/swfobject/2010 年 12 月 7 日访问**

十、可访问性

随着 web 服务和技术的快速发展，互联网用户的数量不断增加。由于许多人遭受各种暂时或永久的残疾和缺陷，先进的 web 开发实践应该应用于提供所有人都可以访问的内容。越来越多的网页设计者和开发者意识到网页可访问性的重要性。W3C 提供了有用的指导方针来确保内容的可访问性。现代软件工具和网站中实现的可访问性支持应该明确指出，以便残障人士能够容易地识别它们。HTML5 标记还通过高级结构化元素、元数据和可访问的富互联网应用(ARIAs)支持可访问性。网页无障碍技术并不局限于视障人士或其他残障人士。事实上，它们还简化了网络内容的移动访问，提高了网页的整体质量。

在这一章中，你将学习可访问网站的标准，以及实现这些标准的技术。你将理解网页可访问性的概念，并熟悉最广泛采用的官方指南。相应的指南为残疾人提供了访问您的网站的途径，并为使用硬件功能有限的设备的人(如移动用户)改善了用户体验。即使关闭了样式表，网站的内容也应该清晰可辨，能够被屏幕阅读器有效地读出，并且能够在基于文本的浏览器(如 Lynx)中呈现。此外，支持可访问性的技术有一个很好的副作用:它们有助于网站的可用性；因此，您可以进一步提高任何网站的整体质量。

定义网络无障碍

默认情况下，包含各种组件的网站，尤其是包含非文本内容(如视频)的网站，不能被所有人使用。对于一些人来说，即使是普通的网站组件，比如文本，也很难阅读，有时甚至是不可能的。并非所有用户都能看到颜色或移动鼠标。每个人都知道，当一个网站无法运行或者其功能因为某种原因很难使用时，它是多么令人沮丧。现在想象一下，这种感觉被放大了十倍或一百倍，这就是残疾人在使用不可访问的网站时所遭受的痛苦。沮丧的程度因人而异，因为有些人生活在视觉障碍中，而另一些人生活在移动性、灵活性、听觉或认知障碍中。

越来越多的国家颁布了立法，以满足残疾人无障碍访问网站的需要或不歧视残疾人的要求。例如澳洲的 1992 年残疾歧视法*、爱尔兰的 2005 年**残疾法 2 、英国的 1995 年残疾歧视法3 或美国的 1973 年康复法第 508 条修正案 4 。*

网页可访问性涵盖了那些为每个人(包括残障人士)提供可用网页内容的网站开发实践。W3C 主任蒂姆·伯纳斯·李在 1997 年的 W3C 上宣布成立网页可访问性倡议国际项目办公室(IPO)，他对可访问性的定义如下:“网络的力量在于它的普遍性。无论是否残疾，每个人都能获得是一个重要方面"6。

虽然公共汽车台阶上色彩鲜明的对比色条带为视力受损者提供了更好的可见度，但这种条带对其他人也是有用的(例如，在光线不足的情况下或当有人赶时间时)。许多坡道不仅对坐轮椅的人有用，对带孩子的父母、滑板运动员、直排轮溜冰者或搬运重物的人也有用。同样，改进的网页内容可访问性不仅对残疾人有用，对所有普通用户也有用。例如，网页可访问性有助于提高移动浏览的用户体验，并且每个人都使用移动设备，而不仅仅是残疾人。

残障人士可以使用多种软件工具和硬件设备来浏览网页(以及使用电脑)。这种工具和设备被称为辅助技术 (AT)。

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

***图 10-1。*辅助技术的例子

根据 2010 年世界标准日的信息，全世界至少有 6 . 5 亿人受到某种残疾的影响。考虑到随着世界人口老龄化，无障碍环境的需求也在不断增长。此外，无障碍不仅仅是老年人或残疾人的问题。任何人在人生的任何阶段都可能经历暂时性的可及性降低。

与普遍的误解相反，网页可访问性的作者不仅仅关注视觉障碍。许多人有运动、行动、听觉或认知问题。网络对残疾人的重要性不亚于任何人，如果不是更重要的话。原因是网络提供了对服务和/或信息的访问，没有它就不能轻易获得这些服务和/或信息(例如在线订购)。然而，设计糟糕的网站会制造障碍，阻止人们使用网络。

万维网联盟为网页内容( WCAG )、创作工具( ATAG ) [10 )和用户代理( UAAG ) [11 )提供了可访问性指南和技术。可访问性测试结果可以用一种叫做评估语言(EARL)【12)的特殊语言来表示。

结合 HTML、JavaScript、Ajax 和其他技术开发的动态内容和高级用户界面的可访问性是由 W3C 的 Web Accessibility Initiative (WAI)发布的规范集合定义的。这个集合被称为可访问的富互联网应用套件，它包括以下文档 [13 ]:

有时也使用自适应技术这一术语。

WAI-ARIA 技术规范:针对 web 标准的作者和编辑，以及用户代理和可访问性评估工具的开发者的可访问性提示 [14
WAI-ARIA 初级读本:WAI-ARIA 的技术方法，详细描述了应用 WAI-ARIA [15 可以解决的无障碍问题
WAI-ARIA 创作实践:关于使用 WAI-ARIA 开发的可访问富互联网应用的实用指南
WAI-ARIA 用户代理实施指南:用户代理无障碍要求 17

诸如同步多媒体集成语言(SMIL)或定时文本标记语言(TTML)之类的标准也可以用来提高网站的可访问性，同步多媒体集成语言是一种用于描述多媒体演示的 XML 标记，定时文本标记语言提供与视频等媒体同步的文本。

WCAG 1.0

网站内容可访问性指南的第一个版本(WCAG 1.0)在 1999 年成为 W3C 的推荐标准，其口号是“如何使网站内容对残疾人来说是可访问的”WCAG 1.0 由 14 条指导原则组成:

必须为听觉和视觉内容提供等效的替代方案。
用颜色表达的信息必须在没有颜色的情况下也是可用的和可感知的。
必须正确应用标记和样式表。
必须声明 web 文档的自然语言。
表必须以一种优雅地转换的方式创建。
应用新技术的页面必须优雅地转变。
必须为对时间敏感的内容更改提供用户控制。
必须确保嵌入式用户界面的直接可访问性。
网站设计必须独立于设备。
必须使用临时解决方案。
必须应用 W3C 技术和指南。
必须提供关于背景和方向的信息。
导航必须易于理解。
文件必须清晰简单。

每个指导方针被细分为检查点，作为检查 WCAG 一致性的基础。他们有 65 个人。每个检查点都有一个优先级，从 1 到 3。正如您将在下一节看到的，它们非常类似于 WCAG 2.0 中引入的一致性级别。三个优先级别如下:

优先级 1 ( 参见A 级一致性):开发者必须满足这些要求，否则一个或多个组不能访问内容。
优先级 2 ( 比照AA 级(双 A 级合格):开发商应满足这些要求；否则，某些群体将很难访问这些内容。这一水平消除了重大障碍。
优先级 3 ( 参见AAA 级(AAA 级)一致性):开发人员可能会处理这些检查点，以便最大化可访问性。

WCAG 2.0

网页内容可访问性指南的第二个版本(WCAG 2.0)在 2008 年成为 W3C 的推荐标准。WCAG 2.0 可以概括为遵循四项原则的十二条指导方针 [22 ]:

原则 1:用户界面组件和发布的信息对任何人都是可感知的。

1.对于非文本内容，必须提供替代文本，以便可以将其更改为其他形式。

2.基于时间的媒体必须有替代品。

3.Web 内容必须在不丢失信息或结构的情况下通过不同的表示形式可用。

15.视觉和听觉内容必须易于区分。

原则 2:可操作的用户界面和可用的导航。

16.所有功能都必须可以通过键盘使用。

17.不能强迫用户在时间限制内执行操作。

18.必须避免可能导致癫痫发作的设计。

19.必须为用户浏览网站提供指导和帮助。

原则 3:用户界面的可理解内容和操作。

20.文本内容必须方便阅读，易于理解。

21.内容外观和操作必须是可预测的。

22.必须为用户提供帮助，以避免、发现和纠正错误。

原则 4:具有高互操作性的健壮内容，可以在任何类型的用户代理上可靠地使用，包括辅助技术。

23.必须最大限度地兼容当前和未来的用户代理和辅助技术，包括在有限资源上运行的那些 [23 ]。

这些指南包含 61 个成功标准。WCAG 2.0 的一致性可以通过应用一系列技术来实现 [24 ]。其中一些是必须满足成功标准的(足够的技术，而其他的只是可选的(咨询技术)。W3C 声称没有一种可访问性技术可以被称为必需的或强制的 [25 。它们只是推荐性的，开发者可以选择应用它们。

与拥有三个优先级的 WCAG 1.0 相比，WCAG 2.0 的成功标准分为三个合规级别。WCAG 2.0 所有级别的一致性要求在以下章节中进行了总结。通常，以下部分中的单词必须——类似于 W3C 发布的 WCAG 规范中的单词使用——对应于 A 级一致性，这是 WCAG 2.0 中最低级别的可访问性(例如，非文本内容的文本替换)。单词应该对应于 AA 级一致性(例如，直播同步媒体的字幕)。单词可以和可以对应 AAA 级符合性(例如，可选手语翻译)。

可访问性一致性级别越高，应用的要求或限制就越多。例如，准则 1.4 描述了可区分的颜色使用以及区分前景和背景的要求。为了达到 A 级，你不应该仅仅依靠颜色来传达信息。AA 级有更严格的要求，规定最低对比度为 4.5:1(大文本为 3:1)，而 AAA 级要求更高的对比度为 7:1(大文本为 4.5:1)。

请注意，有些要求是一般性的，而有些要求是特定于技术的，仅适用于某种技术，如闪存。有些技术可以单独使用，也可以与类似的技术结合使用，如简短和详细的描述，但关于其应用的相应要求取决于所需的可访问性级别。

重要的是要记住，不建议将 AAA 级一致性作为一般策略，因为由于内容的性质或特殊的技术功能和限制，有些内容类型不能以文档满足所有 AAA 标准的方式发布。换句话说，使用某些内容类型可能会将可访问性的最大可达级别限制为 WCAG 2.0 AA，而如果存在某些内容类型，则无法满足 WCAG 2.0 AAA。例如，章节标题有助于 AAA 一致性；但是，它们不能添加到所有类型的文档中(例如，一封长信 [26 ])。自然，当创建一个可访问的网站或重新设计一个不可访问的网站以使其变得可访问时，应该重新组织、添加或修改网站结构或标记元素，但是内容作者没有理由仅仅为了使网站可访问或更易访问而修改网页的文本内容。另一个例子是 Flash，在 WCAG 规范形成的时候，它就有了可访问性障碍，一般来说，同时提供 Flash 内容和实现 AAA 级一致性是不可行的。

此外，WCAG 一致性可以被限制到一个符合替代版本而不是整个网站。例如，如果网站的复杂设计使得满足 WCAG 要求变得不可行，那么仍然可以通过提供备用样式表来访问网站，或者在设计更复杂的情况下，提供网站中每个页面的备用、可访问版本。因此，确定 WCAG 一致性需要深入的站点分析，而不能通过简单地打开主页来判断。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传注与带有标签汤和糟糕标记的文档相反，结构良好、内容编写得当、符合标准的网站默认提供基本的可访问性，可以进一步扩展以实现所需的(高级)可访问性。

场地结构要求

所有网页(不仅仅是主页)都必须有由title元素提供的描述性标题。在最理想的情况下，标识主题的页面标题是简短的，没有上下文也是合理的和可理解的。此外，它们应该是独一无二的，可以在站点中识别页面。表 10-1 显示了一个例子。

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

指向主要内容页面的超链接必须提供在站点内每个网页的顶部。

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

链接到该网站的所有其他网页必须可以直接或间接从主页。当前访问的网页和网站的其他部分之间的关系可以通过适当选择的网站组件和精心编写的元素内容(描述性 URIs、描述性标题、使用link rel提供的元数据、面包屑路径、使用标题添加的章节等)清楚地表示出来。

面包屑轨迹可被应用来帮助用户可视化内容结构，简化导航，并标识站点结构内以及当前网页内的当前位置。这可以通过显示路径中的位置或站点结构中当前网页的位置来获得。面包屑痕迹可以提供到以前访问过的网页的链接。它们被放置在每个网页中的相同位置。用于面包屑跟踪的典型分隔符有▼、►、>、|、::和/。例如，可以清楚地指示网络商店用户正在浏览屏幕尺寸等于或大于 22 英寸的 LCD 显示器，因为电子产品>计算机&配件>显示器> LCD > 22 英寸&以上(图 10-2 )。

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

***图 10-2。*面包屑路径方便导航

当前位置也可以显示在导航栏中。网站所有其他页面的列表以及相关网页的链接也可以简化导航。link元素可用于清晰地指示当前网页与网站内其他网页之间的多种关系(用rel属性的值，如Start、Next、Prev、Contents、Index)。清单 10-1 显示了一个例子。

清单 10-1 。在文档头中声明网页关系

Chapter 4
  …



  … `

必须在网站上添加一个逻辑标签顺序，让用户可以轻松地浏览链接、对象和表单控件。

***清单 10-2。*为菜单、搜索框和网页 Flash 标题声明的 Tab 键顺序

`…

…

搜索功能对所有网站都至关重要，因为它可以帮助用户找到内容。为网站提供搜索功能的一种流行方法是创建一个特定于网站的 Google 搜索字段(也显示在前面的示例中)。搜索按钮应该与搜索栏相邻。

内容部分必须以标题元素开始，以提供结构(h1–h6)。必须提供描述性的标题和标签，允许用户选择与他们相关的信息。用标题可以有效地组织页面。在(X)HTML5 中，文档介绍应该应用header元素。

内容要求

源代码中内容的顺序必须与内容的视觉呈现相一致；换句话说，DOM 顺序必须与视觉顺序相匹配。紧接在用于激活动态内容插入的元素之后插入到文档对象模型中的动态内容，通过利用用户代理的默认 tab 顺序，确保了正确的 tab 顺序(以及屏幕阅读器的正确阅读顺序)。网页内容必须按有意义的顺序排列。这也适用于交互元素。页面部分的重新排序必须通过使用 DOM 来执行。重复的组件应该总是以相同的顺序呈现。必须允许用户通过可展开和可折叠的菜单跳过重复的菜单项。闪存内容必须应用tabIndex属性，以指定逻辑读取顺序和逻辑 tab 键顺序。

用户协助

网站地图和目录也有助于访问。可以在每个网页上添加帮助链接。可以使用一个专用的帮助页面来收集对经验不足的用户有帮助但在主要内容中被忽略的信息，因为这些信息对大多数用户来说是显而易见的(也许是令人讨厌的)。此外，帮助页面可能会提供有关在 web 上不常见的特殊网站功能的信息。例如，高度可访问的网站的用户可以被告知用键盘按钮控制菜单的选项，这并不是在每个网站上都可用的。帮助也可以以助手的形式提供，他向新访问者介绍网站的功能和内容。这种助手可以是具有数字角色的动画(也称为多媒体化身)或具有真人的视频剪辑，其给出指令或服务概述或解释与公司组合相关的概念(图 10-3 )。

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

***图 10-3。*助理(真人视频剪辑)【28

保证了可读性

在最佳情况下，文本易于阅读。复杂的文本内容可以用一种形式概括，这种形式要求阅读能力不如高中教育水平高。例如，对于一些人来说，一篇技术文章可能太复杂而无法阅读，而包含较短句子和更多常用单词的文本摘要可能对他们有所帮助。为了实现 AAA 一致性，即使调整了浏览器窗口的大小，文本行平均也不能超过 80 个字符。

患有某些认知障碍的人在跟踪单倍行距时有困难，他们可能会发现 1.5-2 倍的行距更便于阅读。网页可能有按钮，通过增加行间距和段落间距来提高可读性。

***清单 10-3。*用于操作行距和段落间距的示例按钮

`…

…

此外，letter-spacing CSS 属性必须用于控制单词之间的间距(字符之间的空白)，这可以进一步增加可读性。最好以相对单位(%或em)提供字体大小。对于容器(如表格)的文本大小，首选em单位，其中基于百分比的字体在调整大小时可能会导致字体过大。由文本格式表示的信息，如字体、字号或文本修饰，也必须无需格式化即可访问。基本文本格式不仅适用于(X)HTML 文档，也适用于纯文本文件。文本文件必须具有代表段落、列表和标题的文本格式。

文本的视觉呈现应该用 CSS 属性来控制，如font-family、font-size、font-style、font-weight、color、letter-spacing、line-height、text-align、text-transform、、background-image以及伪类:first-line、:first-letter、:before、:after。这些属性和伪类避免了对图像文本的需要。

颜色使用

Web 内容必须是可访问的，而不具备识别位置、形状、大小或声音所需的感官感知能力。

对于有某些认知障碍的人来说，左右两边对齐的对齐文本可能很难阅读。因此，文本向一侧对齐只会提高可访问性。如果由于布局目的而不可行，则可以添加一种机制来根据请求移除完全对齐。

如果允许用户使用浏览器的默认颜色，也就是说，CSS 规则没有指定背景色、文本颜色或文本背景色，有视觉障碍的用户可以覆盖他们看不清的某些颜色。这种技术保证了背景上呈现的文本的可读性。但是可以指定容器布局和边框颜色。

可以应用允许用户改变文本部分的前景和背景颜色的跨浏览器颜色选择器解决方案。

文本-背景对比度应为 4.5:1，以实现 AA 一致性(大文本为 3:1)，而 AAA 一致性(包括文本图像)的最低对比度可能为 7:1(大文本为 4.5)。应该始终提供高对比度控件，允许用户切换到具有足够对比度的演示文稿。通过考虑亮度的差异，可以很容易地计算任意选择的颜色之间的对比度。

WCAG 2.0 规范将相对亮度定义为“色彩空间中任意点的相对亮度，对于最暗的黑色归一化为 0，对于最亮的白色归一化为 1。”在 sRGB 颜色空间的情况下，颜色的相对亮度定义为 L = 0.2126 × R + 0.7152 × G + 0.0722 × B，其中 R、G 和 B 分量定义如下 [29 ]:

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

如果你不想计算色彩对比度，有许多有用的工具可以为你检查，例如 WebAIM 色彩对比度检查器 [30 ]，Juicy Studio 的光度色彩对比度分析器 [31 ]，或 WAT-C 的光度对比度分析器 1.1[32。

用颜色表达的信息必须在没有颜色的情况下也是可用的和可感知的。当使用文本颜色差异来传达信息时，必须有额外的视觉提示。每当使用颜色线索来传达信息时，都必须添加语义标记。

添加到页面中的可选多色选择工具可以任意改变前景和背景颜色，允许用户根据个人喜好指定颜色(图 10-4 )。

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

***图 10-4。*W3C 建议的颜色选择器示例 [33 ]

信息和结构必须与表示分离，以支持不同的表示。可以为网页中主要内容的文本和背景以及组件组提供各种颜色组合。

缩写、定义和外来词

单词的完整形式可以在它们的缩略形式之前。缩写可能有一个内联扩展或解释，当它们第一次出现在网页中时，会与它们相关联。所有缩写的定义可以由abbr和acronym元素提供。定义的单词可以用dfn元素括起来。术语、缩写、首字母缩写和首字母缩略词可以链接到它们的定义，以便提供最高级别的可访问性。作为定义列表项编写的术语和短语最容易理解。它们可以通过一个由link元素提供的简单超链接收集到一个术语表页面上。或者，可以嵌入搜索功能，通过外部在线词典提供定义。除了缩写，所有以不寻常的方式或受限制的方式使用的单词或短语都可以通过定义变得更容易理解。

至少在单词第一次出现在网页中时，紧接在该单词之后提供的特殊或外来单词的发音有助于 AAA 一致性。其他实例也可以提供到发音列表的链接。

web 文档的默认语言必须在 HTTP 头中标识，并通过标记中的html元素上的lang和/或xml:lang属性来标识。这对于包含 Flash 内容的网页也很重要，因为嵌入的 Flash 对象继承了由lang和/或xml:lang属性提供的语言设置。用默认语言之外的语言编写的文档节必须在它们的包含元素上明确标识。

为了确保双向内联内容的文本方向，必须应用 Unicode 从右到左标记(&rlm;、‏或U+200F)和从左到右标记(&lrm;、‎或U+200E)。

内联内容的文本方向必须应用dir属性来清楚地指示文本方向。

在许多语言中，如阿拉伯语、希伯来语或东亚语言，文本意义很大程度上取决于发音。用这种语言编写的 Web 内容可以应用带有ruby、rt和rp元素的 Ruby 注释，以便提供关于文本片段的发音和含义的信息。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传注很久以前，远东的教科书中就引入了红宝石注释，为学生提供有关复杂字符的提示。例如，用汉字音节表(书写系统)书写的日语文本通常包含只有至少高中毕业的日本人才知道的字符。用平假名(所有日本人都熟悉的音节表)书写的拼音文本可以使文本更清晰。类似地，繁体中文文本可以使用拼音注释以简体中文显示。

使用 Ruby，可以在 Ruby 标记(ruby元素的内容)中声明一个基本文本，以及相关联的 Ruby 文本(rt元素)，还可以选择声明 Ruby 括号(rp)，可以为不能正确呈现 Ruby 文本的浏览器声明。例如，可以为教育门户网站上的单词提供发音提示，而外国单词或不常见的名称可以音译成英语(清单 10-4 )或使用国际音标(IPA)表示(清单 10-5 )。

***清单 10-4。*东京的红宝石标注

![images](https://gitee.com/OpenDocCN/vkdoc-html-css-zh/raw/master/docs/web-std-master-h5c3-xml/img/U1002.jpg) <rp> (</rp> <rt>Tō kyō</rt> <rp>)</rp> </ruby>

对于简单的拼音标记，用户代理应该以大约一半的字体大小在基本文本之上呈现拼音文本。在我们的例子中，结果应该看起来像图 10-5 。

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

***图 10-5。*IE9 中呈现的单词 Tokyo 的红宝石注释

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传注意 Ruby 注释在 Internet Explorer 中呈现得最准确。

不支持 Ruby 注释的浏览器会以内联方式呈现之前的代码，而不会中断文本流(图 10-6 )。

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

图 10-6 。Ruby 注释的回退机制在起作用

***清单 10-5。*使用拼音注释的东欧名字的国际音标表示法

  Count

    István Széchenyi
    (pronounced:
    ˈiʃtvaːn ˈseːtʃeːɲi
    )

  was one of the greatest statesmen of Hungarian history.

清单 10-5 在兼容的浏览器中呈现，如图图 10-7 所示。

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

***图 10-7。*红宝石注释提供的发音提示

在不识别 Ruby 标记的浏览器中，同样的例子会以内联方式呈现(图 10-8 )。

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

***图 10-8。*在不支持拼音注释的浏览器中内嵌的发音提示

更复杂的 Ruby 注释不仅可以指定前面显示的默认显示和回退机制，还可以指定位置偏移、对齐、间距和突出。Ruby 注释是作为 XHTML 1.1 模块引入的，也可以在 HTML5 中使用。 ²

最易访问的文档应用标准的变音符号，允许用户根据请求打开和关闭它们。

应该应用正确选择的位置和单位，以支持浏览器的缩放和文本大小调整功能。

可访问的网站有控件，允许用户递增地改变所有文本的大小(高达 200%)。在文本容器的尺寸保持不变的情况下，当文本调整大小时，不能有内容或功能的损失。

用户界面

内容必须可以通过备用用户界面访问。必须提供正确编写的标记，以允许辅助技术理解内容、公开表单控件 id 等信息，并通过 API(例如 DOM)控制某些元素。

必须应用标准的 DOM 函数来动态地向网页添加内容，而不是脚本，脚本提供的内容不一定被屏幕阅读器读取。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传注意屏幕阅读器可能不会自动读取动态添加的内容。动态添加的新内容的阅读可以通过将焦点设置到新元素或将其添加到用户继续浏览时将遇到的当前位置之下来确保。

所有网站都应该使用液体布局来呈现内容，而不引入不必要的水平滚动条。页面内容应该适应可用的水平空间。布局区域应根据需要使用文本和重排来调整大小，以显示页面部分。高度可访问的网站消除了水平滚动，即使用户调整了浏览器窗口的大小。实现这种简单布局的技术之一是在%中指定文本容器的宽度。如果在默认屏幕上不可行，可以提供不需要水平滚动的替代布局。

XHTML 1.1 和 HTML5 的实现是有区别的。截至 2011 年，原始规范的 rb (ruby base)元素不能在 HTML5 中使用，然而，它的重新引入仍然是一个开放的问题。清单中的例子展示了 HTML5 的例子。

内容定位应该基于结构化标记。CSS 可以增强外观，但是内容结构在没有样式表的情况下也必须保持有意义。

如果网页的默认版本的内容不可访问，但符合 WCAG 标准的替代版本可以访问，则该网页必须链接到不符合标准的页面的开头。如果无法从内容中删除不可访问的对象，则必须在这些对象的旁边或与其相关联的位置添加一个链接，该链接将链接到另一个符合 WCAG 标准的版本。用户首选项必须保存在 cookie 中。替换版本的可访问性必须始终通过.htaccess或 HTTP referrer 头来确保。必须提供一个风格切换器，以确保与 WCAG 兼容的风格的替代版本。 ³ 创建风格切换器需要三种不同类型的样式表:

1.*持久 CSS 文件:*用于共享整个站点通用样式的基本样式。rel属性被设置为stylesheet，而title属性被省略(清单 10-6 )。

***清单 10-6。*一个持久的 CSS 文件

<link **rel="stylesheet"** type="text/css" href="styles/main.css" />

24.首选 CSS 文件:加载页面时默认启用的样式。rel属性的属性值为stylesheet，提供了title属性(清单 10-7 )。

***清单 10-7。*首选 CSS 文件

<link **rel="stylesheet"** type="text/css" href="styles/main.css" **title="Preferred"** />

25.替代 CSS 文件:为站点的替代版本设计的 CSS 文件，这些文件重用主样式表文件中声明的样式，但覆盖其中一些样式(例如，将字体大小设置为更大的值，或者修改字体颜色以获得更高的对比度)，或者在重用的样式之上添加新的样式(例如，定义移动设备的最大宽度)。它们不仅可以用于增加可访问性，还可以用于网站的设计或特定媒体版本(正如前面在第三章中暗示的)。替代的 CSS 文件有一个rel属性值alternate stylesheet而不是stylesheet，它们有一个title属性来标识它们(清单 10-8 )。

***清单 10-8。*替代样式表

`<link rel=“alternate stylesheet” type=“text/css” href=“styles/large.css” 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
title=“Large” />

首先，创建三个 CSS 文件，一个用于主样式(清单 10-9 )，两个用于替代样式，分别提供大字体大小(清单 10-10 )或高对比度的大字体大小(清单 10-11 )。

因为不是所有的功能都可以通过 CSS 来提供，一个符合标准的网站替代版本并不总是通过简单地创建额外的样式表来提供。

***清单 10-9。*主 CSS 文件(main.css )

`body {
  background-color:#004c25;
  color: #cff;
  font-family: Garamond, serif;
  font-size: 1.2em;
}

#wrapper {
width: 800px;
margin: auto;
}

#wrapper a:link {
color: #ff0;
}

#wrapper a:hover {
color: #ffa000;
}

#wrapper a:visited {
color: #fff;
}

#colorswitch a:link {
padding: 10px;
}`

***清单 10-10。*CSS 文件为大字体版本(large.css )

`@import (“main.css”);

body {
font-size: 1.8em;
}`

***清单 10-11。*高对比度版本的 CSS 文件(contrast.css )

`@import (“main.css”);

body {
background-color: #000;
font-size: 2em;
}

#wrapper a:hover {
color: #ff2121;
}`

接下来，我们需要一个脚本来设置所选 CSS 文件的样式，并将选择存储在一个 cookie 中，如果用户返回到页面，就可以读取这个 cookie 了(清单 10-12 )。如果没有 cookies，替代样式将仅应用于当前会话的当前页面，这几乎是无用的。如果一个有视觉障碍的用户选择了“高对比度主题”，他或她可能会喜欢用相同的设置来阅读网站的所有页面。

清单 10-12。styleswitcher.js35

`function setActiveTheme(title) {
  var i, a, main;
  for (i = 0; (a = document.getElementsByTagName(“link”)[i]); i++) {
    if (a.getAttribute(“rel”).indexOf(“style”) != -1 && a.getAttribute(“title”)) {
       a.disabled = true;
       if (a.getAttribute(“title”) == title) a.disabled = false;
    }
  }
}

function getActiveTheme() {
  var i, a;
  for(i = 0; (a = document.getElementsByTagName(“link”)[i]); i++) {
    if(a.getAttribute(“rel”).indexOf(“style”) != -1 && a.getAttribute(“title”) && 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
!a.disabled) return a.getAttribute(“title”);   }
  return null;
}

function getPreferredTheme() {
  var i, a;
  for (i = 0; (a = document.getElementsByTagName(“link”)[i]); i++) {
    if (a.getAttribute(“rel”).indexOf(“style”) != -1
        && a.getAttribute(“rel”).indexOf(“alt”) == -1
        && a.getAttribute(“title”)
       ) return a.getAttribute(“title”);
  }
  return null;
}

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days2460601000));
    var expires = “; expires=” + date.toGMTString();
  }
  else expires = “”;
  document.cookie = name + “=” + value + expires + “; path=/”;
}

function readCookie(name) {
  var nameEQ = name + “=”;
  var ca = document.cookie.split(‘;’);
  for (var i = 0; i < ca.length; i++) {      var c = ca[i];
     while (c.charAt(0)==’ ') c = c.substring(1, c.length);
     if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
  }
  return null;
}

window.onload = function(e) {
  var cookie = readCookie(“style”);
  var title = cookie ? cookie : getPreferredTheme();
  setActiveTheme(title);
}

window.onunload = function(e) {
var title = getActiveTheme();
createCookie(“style”, title, 365);
}

var cookie = readCookie(“style”);
var title = cookie ? cookie : getPreferredTheme();
setActiveTheme(title);`

最后，我们把所有的组件放在一起，并在我们的网站上获得样式切换器功能(清单 10-13 )。

***清单 10-13。*以风格切换器为特色的标记代码

Style switcher demo

用脚本滚动的内容，如横幅，必须有暂停或停止滚动的机制。

对 CSS 中的文本片段应用图像替换的网页应该有一个允许用户在两个版本之间切换的界面。

Web 内容结构应该包含适当的语义标记元素。必须根据元素的含义而不是它们的(默认)外观来使用它们。语义上有意义的标记，如em或strong必须用于强调和特殊的文本。必须对列表和链接组应用ol、ul和dl元素。必须使用map元素对链接进行分组。

键盘用户不能被一个只能用鼠标访问的网站阻止。这同样适用于默认情况下不可通过键盘访问的 Flash 对象。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传注意同一元素上的重复属性可能会导致辅助技术的关键错误，必须被消除。

接收焦点或被定点设备悬停的元素的外观应该被改变(例如，突出显示)以向用户提供视觉反馈(例如，改变背景或边框颜色)。Flash 内容还应该提供高度可见的焦点指示。

替代文本、标签和名称应该在具有相同功能的组件之间共享。

为使用内容所需的所有信息提供的可选手语版本可以提高聋人或有某些认知障碍的人的可访问性。它可以是使用 Flash 等技术的多媒体化身，也可以是动画或真实手语翻译的视频剪辑(图 10-9 )。

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

***图 10-9。*一个签约头像 [36 ]

Web 站点组件，如标记、样式表和 XML 文件，必须经过验证，以保证正式规范、语法、句法和词汇的正确使用。必须根据标记规范使用开始和结束标记。所有网页都必须格式良好。

非文本内容的标记要求

可以应用图像、照片、图形和符号来改善用户体验并帮助用户理解内容。但是，所有非文本内容，如图像、嵌入对象(Flash 内容、小程序、音频、视频等)、 ASCII 艺术、表情符号和 leetspeaks 必须有替代文本。

所有图像都必须有一个alt属性。对于那些可以被辅助技术安全忽略的图像，必须省略title属性，并将alt文本设置为 null ( alt="")。如果一个图像和它的相关文本有相同的链接，为了避免不必要的重复，它们必须被合并。

像 1x1 像素的 GIF 文件这样的间隔图像应该完全去除，以利于 CSS 边距和填充。

对于那些简短描述不够的图像和对象，必须添加详细描述。多年来，longdesc属性一直用于这个目的。然而，longdesc属性在(X)HTML5 中已经过时，必须使用一个带有描述链接的常规a元素来代替。

用颜色表示的非文本内容也必须有不用颜色也能理解的模式。

必须为非文本内容提供替代文本，以标识其目的(即使是需要感官体验的内容)。此外，必须为具有相同目的的非文本内容提供简短和详细的描述，以展示相同的信息。

如果原始的非文本内容太长，或者仅使用文本无法获得相同的信息，则必须编写简短的替代文本，简要概括非文本内容。

专门用于装饰的图像，如背景图像、图像翻转或标签图像，必须使用 CSS 提供。由于没有附加标记，辅助技术可以忽略这些非文本内容。

必须为图像映射中的所有area元素编写替代文本。

必须为所有对象提供文本或非文本替代项。替代文本可以直接写在object元素的内容中。嵌套对象可以提供非文本替换。

相邻的非文本内容共享信息或功能必须用替代文本描述，以避免不必要的重复。

闪烁和闪烁内容

应该消除由频闪或闪光效应引起的光癫痫发作。一个链接或按钮必须总是被添加到有闪烁内容的网页中，它可以加载没有闪烁内容的等价网页。只有使用提供关闭浏览器闪烁功能选项的技术，网页上才能包含闪烁内容。必须使用脚本将闪烁内容最小化到 5 秒以下，如果可能的话，完全消除。这同样适用于动画 GIF 图像。

闪烁内容也必须最小化。1 秒钟内最多允许闪烁三次。如果因为内容特征而不可行，闪烁区域必须小于 10 度视野的 25%。内容不允许违反一般闪光阈值或红色闪光阈值，避免光敏性癫痫发作。有一些工具，如光敏癫痫分析工具(PEAT) [37 ]，可以用来评估闪烁内容，以降低癫痫发作的风险。

闪光物体

嵌入 Flash 对象的尺寸可以用相对单位(em或%)指定。

用name属性标记的非文本对象必须在 Flash 中应用，以允许辅助技术访问它们。对于 Flash 中的非文本对象，必须由description属性提供长文本替换。必须为用于相同目的的可点击图像热点提供文本替换。多年来，数据网格的可访问性描述一直用于提供屏幕阅读器可读的信息。

如果需要，Flash 图形必须以辅助技术可以忽略的方式进行标记。这可以通过直接利用 Flash 对象的辅助功能或使用 ActionScript 应用文本替代来实现。

如果相邻的文本和图像按钮(图标)具有相同的用途，则必须将它们组合成一个按钮元件实例。

用标记编写的表单优于 Flash 表单。但是，如果您必须在您的网站上使用 Flash 表单，应该考虑以下准则。必须脱离上下文来理解 Flash 控件。为此，可以通过脚本更改控件标签来提供附加信息。类似于它们的标记等价物，Flash 表单的必需字段必须被清楚地指出。相关的 Flash 表单控件必须组合在一起以提供语义含义。Flash 表单必须在客户端进行验证。如果发现错误，必须向包含无效数据的控件添加描述。Flash 表单控件必须有一个关联的文本标签(例如，通过自动标签)。默认情况下，只有CheckBox和RadioButton组件获得标签。

必须允许用户暂停由脚本控制的滚动 Flash 内容。

Flash 内容的闪烁必须由脚本控制，最多在五秒钟内停止。

链接要求

超链接锚必须始终有一个文本描述，清楚地表明链接的目的。链接必须应用title属性来提供额外的链接文本。超链接必须有描述性的替代文本，清楚地表明链接的目的。

使用 CSS 选择器(没有visibility:hidden或display:none)可以隐藏为高级屏幕阅读器和盲文显示支持添加的附加链接文本。该链接文本也可以与样式切换器结合使用。必须避免重复的内容。

必须在每个网页的顶部添加一个控件，提供带有链接文本的可选页面版本，即使没有上下文也足以确定其目的。

即使没有上下文(应用描述性的链接文本)，链接的目的也必须是清楚的，但是容器上下文(段落、前面的标题、列表项、表格单元格及其关联的表格标题)也必须以进一步提高链接目的的清晰度的方式来书写。

应该确保链接颜色和文本颜色之间的最小对比度为 3:1。此外，必须在链接和控件的焦点上提供额外的视觉提示，仅使用颜色来识别它们。

目地 URIs 通常不具有足够的描述性。例如，链接文本Read more…不足以理解链接。但是，如果在同一句话中，描述先于链接，也可以理解。必须使用链接文本和包含句子的文本的组合来确定链接的目的，以确保屏幕阅读器的逻辑文本流。只要合理，就必须提供根据上下文动态变化的链接文本。

应该为所有不支持属性级长描述的网页元素和对象添加链接。链接必须紧挨着非文本内容。长描述的位置必须在短描述中指明(如果适用)。例如，图片的简短描述提供了文本“智能手机操作系统对比——请参见下面的详细信息”,而图片下方的长描述指出“在图 1 中，您可以看到智能手机操作系统的市场份额，包括 Android、BlackBerry OS、iOS、Microsoft Windows Mobile、Symbian 和 webOS。”

如果网页包含重复的内容块，如导航链接或目录，则必须在这些内容块的开头添加一个链接，以允许用户绕过它们。网页的顶部必须包含链接到内容的不同部分。

对话消息必须与设备无关。应尽可能消除弹出窗口。如果不能消除新窗口，可以提供预先警告。为了避免混淆，根据用户请求打开的带有target属性的新窗口可能会有一个适当的链接文本，清楚地表明内容将在新窗口中打开。但是，一般来说，链接应该在同一个窗口中打开，而不是在一个新的窗口或标签中打开。虽然这种方法有助于提高可访问性，但它也有缺点，可能会导致访问者的流失(如果他们忘记再次访问您的网站)。

用户输入和表单要求

表单控件和链接必须使用(X)HTML 元素提供，而不是其他技术，如 Flash。

表单的文本输入必须有一个可用于提供上下文相关帮助的title属性。

必须应用可访问名称来标记 Flash 表单控件。Flash 按钮必须始终有一个描述链接目的的可访问标签。Flash 图像按钮必须有可访问的名称，提供有关按钮功能的信息，但不描述一般的图像。

必须为Button、CheckBox和RadioButton Flash 表单组件显式设置label属性。因此，标签文本会出现在组件旁边，并可供辅助技术使用。

表单控件组必须有一个由legend元素提供的描述，并且必须用fieldset分组。

按钮必须与select元素一起应用才能执行动作。option元素必须与select元素中的optgroup组合在一起。

为了保持比例，当浏览器中的文本大小发生显著变化时，输入框和按钮等文本表单元素应该调整大小。

除了枚举选项之外，表单有时还允许用户定义的值(通常带有文本other, please specify),必须为这些值提供文本描述。

必须在表单和字段集的开头添加文本说明，清楚地表明所需的输入。文本输入元素可以有拼写检查器。必填字段必须清楚标明，例如使用星号(*)字符。如果输入是禁止值、超出允许的限制或以不支持的格式提供，则必须通过文本描述通知用户。

当使用支持可访问的富互联网应用(WAI-ARIA)的技术时，允许的输入域范围应该用aria-valuemin和aria-valuemax属性来标识。用户代理通常不允许用户输入指定范围之外的值，如果用户这样做，会生成验证错误。

用示例展示的预期数据格式降低了用户输入不充分的可能性。这同样适用于表单提交前提供的审核和更正选项。应该为 web 应用提供一种机制，以便根据请求恢复错误删除的信息。

多部分表单必须在第一页提供一个复选框，根据请求给用户更多的时间，或者完全取消会话时间限制。

应该通过客户端脚本验证用户输入。如果发现错误，必须使用警告对话框通知用户。也可以通过 DOM 添加错误消息。此外，应该提供一种机制来帮助用户找到输入错误的位置。如果用户提供的信息不充分且不能被接受，应建议正确的文本(如果可用)。

如果应用了验证码，则必须添加描述其用途的替代文本。此外，应根据请求生成另一个验证码。

除了提交按钮之外，还提供了一个复选框，鼓励用户在提交之前检查他们的输入。如果需要确认才能继续选定的操作，则可以最小化或消除表单提交问题。提交后，应提供用户可以更新或取消订单/请求的规定时间段。当数据成功提交时，应始终提供成功反馈。

可以应用aria-describedby WAI-ARIA 属性将描述性信息附加到一个或多个元素上。表单控件必须通过label元素与文本标签相关联。当label元素不可用时，必须应用title属性。除了位于字段之后的单选按钮和复选框的标签之外，标签必须紧接在字段之前(考虑文本方向)。清楚表明其用途的表单域和按钮必须相邻。

必须将文本提示添加到彩色表单控件标签中，以便将颜色和文本或字符提示结合起来传达信息。例如，用红色表示的必填字段标签可以被大多数人快速识别，但不是所有人都能看到颜色。然而，他们仍然可以阅读或听文字提示。

描述必须与预先指示上下文变化的表单控件相关联。必须使用一个submit按钮，以便允许用户明确地请求改变上下文。aria-required WAI-ARIA 属性可用于指示提交前需要用户输入。必须提供文本描述以标识未完成的必填字段。

表格要求

表格信息必须用table元素表示。表格标题必须通过使用caption元素与表格相关联。数据单元格和标题单元格必须与表格中的id、header和scope属性相关联。在 Flash 中，DataGrid组件必须用于将列标题与单元格相关联。这些组件必须有标题文本。必须在table元素上应用summary属性，以给出表格的概览。

用户控制要求

所有网站的功能必须不仅可以通过鼠标等定点设备访问，还可以通过键盘访问。这也适用于闪存内容(在标准组件上使用click事件)。

必须在所有网页上提供一个控件，允许用户停止移动、闪烁或自动更新内容。

必须为所有自动刷新或消失的内容(如横幅或 flash 标题)提供暂停和重新启动选项。指向基于时间的媒体的替代内容的链接必须紧挨着非文本内容放置。不应该强迫用户在时间限制内完成任何活动。如果时间限制即将到期，脚本必须始终警告用户。这也适用于 Flash 内容。

用户必须始终可以选择将时间限制设置为默认值的十倍。延长默认时间限制的选项也适用于 Flash 内容。此外，必须允许用户关闭时间限制。

标记元素(如锚点和表单元素)的操作必须是键盘可访问的。事件处理程序必须独立于设备，不仅允许鼠标，还允许键盘访问全部内容功能(例如，拖放)。这可以通过使用冗余的键盘和鼠标事件处理程序来实现。这同样适用于 Flash 内容以及所有脚本功能。

需要用户认证的网络服务器通常在一段时间没有用户活动后出于安全原因终止会话。如果用户不能足够快地提供输入，会话将在数据提交前超时，需要重新进行身份验证。服务器应该将此类数据存储在临时缓存中，并在用户重新验证成功后保留这些数据，这样用户就可以继续填写表单，而不是重新开始，因为之前输入的所有数据都已恢复。重新授权页面可以隐藏和加密用户数据。

上下文变化必须应用可预测的动作。例如，如果表单的数据条目不能显示在单个页面上，则在用户按下第一页最后一个条目上的 Tab 键后，不应自动加载第二页，因为这会使屏幕阅读器用户感到困惑，这是必须避免的。

应该尽可能消除自动重定向。客户端(meta refresh)和服务器端(HTTP 响应)重定向都有易访问性问题，这会让用户感到困惑。

某些用户界面组件在获得焦点时会被某些浏览器突出显示。例如，一个表单输入在 Google Chrome 中被轻微高亮显示，在 Safari 中默认被强烈高亮显示，但在 IE、Firefox 和 Opera 中根本不高亮显示(图 10-10 )。

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

***图 10-10。*Firefox 和 Safari 中相同输入栏的默认浏览器高亮显示(选择第二个文本输入)

由于突出显示因组件和浏览器而异，web 开发人员应该确保焦点指示器的高可见性。

表单组件、链接和所有属性大于0的元素都可以获得焦点。然而，一些平台的默认焦点指示器不是非常明显，并且在某些背景下可能很难看到。应始终确保重点指标的可见性。

不重要的警报是可选的。在理想情况下，用户不会被不必要的模态弹出窗口(要求用户单击 OK 按钮才能消失的对话框)打扰。

基于时间的媒体，如演示文稿，必须始终有一个替代的文本版本或描述。可以消除自动更新的内容，并提供一种推迟自动内容更新的机制。在静态页面部分或窗口中，移动和滚动文本也必须可用。

实时媒体、音频和视频要求

预先录制的同步媒体(如视频剪辑)必须有字幕。声音只能在用户请求时播放。音效必须在三秒钟内自动关闭。此外，一个容易发现的控件必须位于页面的开头附近，用于打开/关闭声音。Flash 内容也必须有一个用于相同目的的控件。

在 Flash 电影中，带有flash.accessibility.Accessibility.active属性的屏幕阅读器检测可用于关闭使用辅助技术时自动播放的声音(默认情况下，声音仍可自动播放)。

音频文件中的非语音声音可能比语音音频内容至少低 20 dB。

一个额外的，用户可选择的音轨必须提供音频描述。

文本的语音版本可以显著提高站点的可访问性，因为它比屏幕阅读器的语音更准确、更容易理解。

纯音频直播内容可能有文本替代。这可以通过实时字幕服务来实现，该服务由训练有素的操作员来完成，操作员可以以很小的延迟输入文本。请注意，这种服务在实践中很少使用。

可以为跟随有现场音频内容的脚本提供到准备好的声明或脚本的文本抄本的链接。这些脚本可以比现场转录更加准确和完整；但是，必须小心确保正确的同步。

必须为呈现纯音频或纯视频内容的基于时间的媒体提供可访问的替代方案。

必须为纯音频直播和纯视频直播内容提供描述性标签。

视频必须提供完整描述视频内容的扩展音频注释。此外，视频内容的第二个版本必须始终提供音频描述，以最大限度地提高可访问性。这也适用于 Flash 视听材料。对话的间隙必须用使用 SMIL 的扩展音频描述来填充。

盲人和某些视障人士无法访问的纯视频内容必须有普通音频格式的音频替代，如 MP3。视频流的可访问性可以通过同步视频使用手语翻译最大化，同步视频的显示可以由用户选择。

必须为视频内容添加字幕，这些字幕可以根据请求打开或关闭，因为它们可以最大限度地提高可用性。字幕不仅要为听力受损者提供对话信息，还要提供声音描述信息(不同于传统字幕)。

从 WCAG 1.0 迁移到 WCAG 2.0

一些项目要求网站从 WCAG 1.0 升级到 WCAG 2.0。几个符合 WCAG 1.0 的站点只需要很少或根本不需要修改就可以满足 WCAG 2.0 的要求。WCAG 2.0 基于 WCAG 1.0；但是，在方法和要求上有一些不同。

默认情况下，符合 WCAG 1.0 标准的网站部分符合 WCAG 2.0 标准。WCAG 的两个版本是兼容的。因此，可以同时满足 WCAG 1.0 和 WCAG 2.0 的要求。然而，由于第二个版本的高级灵活性，符合 WCAG 2.0 的站点不会自动满足 WCAG 1.0 的要求。一些 WCAG 2.0 的成功标准与 WCAG 1.0 的检查点非常相似。另一方面，有一些 WCAG 1.0 的需求在 WCAG 2.0 中是不需要的。WCAG 2.0 的一些要求比 WCAG 1.0 [38 ]中的相关要求更加具体。

WCAG 1.0 是特定于技术的 [39 ]，而 WCAG 2.0 适用于 W3C 和非 W3C 技术，只要它们提供可访问性 [40 。

WCAG 1.0 使用临时解决方案(“直到用户代理……”)，而 WCAG 2.0 成功标准合规性假定用户代理支持。

在 WCAG 1.0 中，JavaScript 被认为是一种存在可访问性问题的技术。事实上，JavaScript 是可以访问的，这取决于所使用的应用和功能(我们将在后面更详细地讨论)。WCAG 2.0 考虑使用屏幕阅读器成功测试脚本技术。

从 WCAG 1.0 迁移到 2.0 的主要步骤可以总结如下 [42 ]:

应该确定一致性参数。
应确定应用的技术。
应分析技术要求的应用潜力。
WCAG 1.0 检查点应根据 WCAG 2.0 的要求进行检查。
应该检查 WCAG 2.0 的成功标准。

最后，虽然听起来很奇怪，但并不是每个人都热衷于最高级别的网络可访问性。虽然从可访问性的角度来看，WCAG 2.0 给人留下了深刻的印象，但由于许多原因，它仍然受到批评。例如，规范非常长且复杂，技术中立的描述对于开发人员来说很难实现，包括非常特殊的需求(特别是 AAA 一致性，如实时字幕服务)，一些定义很难理解，当存在可访问版本时，不可访问的页面版本是可以容忍的，测试非常复杂，并且不是所有的内容都可以以符合最严格要求的方式编写。

美国第 508 条

除了 W3C 标准之外，世界各地还有针对特定国家/地区的 web 可访问性标准和/或法规。在美国，对政府网站的一个基本要求是遵守 508 条款。修正案的子部分 B 描述了技术标准。web 开发者最重要的部分是 1194.22(基于 Web 的内网和互联网信息与应用) [44 。

第五百零八部分定义的基于 web 的技术和信息标准基于 W3C WAI 指南。因此，1194.22 和 WCAG 1.0 检查点是一致的 [45 ]。

对图形或动画的使用没有限制，但它们必须以可访问的形式提供。除了为图形提供的文本标签和描述之外，本节还介绍了样式表、表单、脚本、多媒体内容、图像映射、语言和插件的可用性。

应为所有非文本元素编写替代文本。多媒体演示应该与其等效的替代方案同步。信息不能只用颜色来表达。

信息表示不能完全依赖关联的样式表。

应该为数据表声明行标题和列标题。

数据表的数据单元格和标题单元格应该关联。

客户端图像映射应该优先于服务器端图像映射，除非区域不能用可用的几何形状来定义。

应该为服务器端图像映射的所有活动区域提供冗余文本链接。

框架应该有唯一的标题。

应消除频率为 2–55 赫兹的屏幕闪烁。

一个纯文本页面应该提供相同的信息和功能。

辅助技术必须能够访问脚本提供的内容。

需要第三方软件(如插件)的 Web 内容必须提供指向插件网站的链接。

表单应该提供对辅助技术的访问。

应该允许用户跳过重复的导航链接。

应通知用户定时响应要求，并允许延长时间限制。

语义(X)HTML5 元素和 WAI-ARIA

HTML5 规范中引入的新语义标记元素，如header、hgroup、footer、article、section、aside和nav，都包含了可访问性潜力。但是，请记住，浏览器对这些元素的支持各不相同，这一点很重要。

对 ARIA 角色的支持也在增加。ARIA 角色可以作为附加标记来应用，以提高可访问性潜力；换句话说，它们的存在不会在没有 ARIA 支持的系统上引起任何问题。ARIA 角色作为属性被添加到诸如banner、complementary、contentinfo、form、main、navigation或search的元素中。几个 ARIA 角色描述文档结构，即:article、columnheader、definition、directory、document、group、heading、img、list、listitem、math、note、presentation、region、row、rowheader、separator和toolbar。

结构化元素的角色可以由role属性提供。清单 10-14 显示了一个例子。

***清单 10-14。*使用role属性

<header **role="banner" /**>

某些角色在一个页面中必须是唯一的。显示的横幅标题代码就是一个很好的例子。虽然开发人员可以使用无限数量的标题，但只有一个标题可以是横幅标题。

JavaScript 可访问性

脚本提供的隐藏内容、导航和奇怪的用户控制行为会导致混乱和可访问性问题。例如，用于检查用户输入的onblur事件可以覆盖用户代理的默认行为，并保持焦点直到给出正确答案，这使得屏幕阅读器在没有输入正确答案的情况下无法访问页面的任何其他部分(包括其他地方提供的反馈文本)。并不是所有的事件处理程序都是独立于设备的，有些依赖于鼠标(onmouseover、onmouseout、ondblclick)或者键盘(比如onkeydown、onkeyup)，并不能在所有的设备上触发。如果使用了与设备无关的事件处理程序(如onfocus、onblur、onselect或onchange)，通过脚本提供的内容和功能是可访问的，提供了完整的键盘控制，并且脚本不会通过修改或覆盖正常的浏览器功能而造成混乱，则脚本是可访问的 [46 ]。当 JavaScript 不能被本地访问时，必须提供一个可访问的替代方案。

下拉菜单和弹出菜单在整个网络中普遍使用。然而，键盘用户不能直接访问onmouseover和onmouseout事件处理程序。因此，必须提供替代方案。

对于键盘用户来说，触发onfocus和onblur事件处理程序可能不方便或不可访问。

onclick事件处理程序是一个独立于设备的事件处理程序；但是，有些应用依赖鼠标。与链接或表单控件不同，在链接或表单控件中，可以通过按 Enter 键来触发onclick事件处理程序，而在使用键盘导航时，纯文本和表格单元格不能获得焦点。因此，键盘用户不能为链接或表单控件以外的元素激活onclick事件。如果该事件与表单元素一起使用(例如，用于表单验证)，这不是问题，使用onclick事件的提交按钮可以被定点设备和键盘激活。

ondblclick事件处理程序一般是依赖于鼠标的，因为它与鼠标的双击相关联，并且在所有输入设备(如键盘)上没有等效的事件。

下拉选择列表如语言选择器通常应用onchange事件处理程序。通过单击从列表中选择一个选项直接进入相应的版本，这对于鼠标用户来说非常方便。然而，这些列表对于键盘用户来说是不可访问的，因为他们除了第一个选项外不能选择(在按下键盘上的光标向下键后，第一个选项立即被选择)。该问题的一个可能的解决方案是添加一个按钮作为onclick事件处理程序的触发器。但是，在这种情况下，所有用户都应该在选择了触发事件处理程序所需的选项后按下按钮。

也可以以独立于设备的方式应用onselect事件处理程序。

某些事件处理程序如onkeydown和onkeyup可以由键盘专门触发。鼠标无法访问与它们相关联的操作。

动态内容，如document.write呈现的当前时间，不能被屏幕阅读器读取。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传注意动态网页的一些特性也可以用纯 CSS(尤其是 CSS3)实现；因此，为了支持 CSS，某些 JavaScript 代码可以被删除(例如，过渡效果或转换菜单项)。然而，屏幕阅读器不能很好地处理某些 CSS 特性，例如，被display: none;或visibility: hidden;隐藏的元素。

PDF 可访问性

Adobe Acrobat 和 Acrobat Reader 提供辅助功能(图 10-11 )以及屏幕阅读器选项。它们可以在“编辑首选项”下找到，或者直接使用快捷键 Ctrl+K 找到。您可以在“查看”“大声朗读”下找到“屏幕阅读器”选项。

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

***图 10-11。*Adobe Acrobat/Acrobat Reader 中的辅助功能首选项

设置助手等特殊功能可在高级辅助功能下设置(图 10-12 )。

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

***图 10-12。*辅助功能设置助手

通常通过扫描纸质文档创建的纯图像 PDF 文件存在可访问性问题。无法搜索文本。颜色无法调整。屏幕阅读器不能阅读只有图像的 PDF 文件。作者应该使用 Acrobat 的 OCR 功能以文本形式提供文本文档，同时保留结构。

非结构化 PDF 文件的可访问性各不相同。他们的阅读顺序可以改变。它们提供自动标记，作者可以选择使用手动标记。受保护的文件不能保存为可访问的格式。

结构化 PDF 文件的文本完全可以访问。超链接是功能性的。图像的替换文本是可访问的(如果存在)。页码是正确的。屏幕阅读器可以正确读取基本数据表。如果提供的话，可选书签可以进一步提高可访问性。也可以访问受保护的文件。然而，即使是结构化的 PDF 文件也有一些已知的可访问性问题。例如，段落不能被完美地定位。字体属性信息不可用。

Flash 可访问性

虽然易访问性一直是 Flash 技术的一个弱点，但是开发者环境和免费播放器在这方面都得到了改进。Adobe Flash Professional 和 Adobe Flash Player 有几个支持辅助技术的功能 [47 。

Flash 电影的布局和结构可能相当复杂，使得屏幕阅读器很难阅读内容。为整个电影添加的描述可以为屏幕读者提供关于电影结构的提示。

必须为图形元素添加文本等价物，例如图形图标的名称或手势动画的描述。元素组必须有一个等效的文本。

永不停止移动的电影会导致屏幕阅读器频繁刷新。即使在底部包含电影的网页上，屏幕阅读器也可能将 motion 解释为页面更新，并返回顶部重新开始阅读。这种行为可以通过使影片剪辑或整个影片的子对象不可访问来消除 [48 ]。

为了允许用户控制动作，必须在电影中添加 Next 按钮，而不是在有限的时间内显示信息。

Flash 中有几个用户界面组件是可访问的，这些组件自动执行常见的可访问性任务，如标记或提供键盘访问。可访问性对象可以用类enableAccessibility()来启用。

FLVPlayback 组件提供了在 Flash 应用中包含视频播放器的选项，以播放下载的 Adobe Flash 视频(FLV)文件和流式 FLV 文件。FLVPlaybackCaptioning 组件可以将字幕与视频相关联。字幕组件支持定时文本标记语言(TTML) W3C 标准，以及多字幕和切换控制。

有多种方法可以控制 Flash 中的读取顺序，例如限制舞台大小、提供额外的线性内容版本或通过 ActionScript 指定读取顺序。

用户控件必须可以通过键盘访问。必须在按钮上添加键盘快捷键。为了考虑屏幕阅读器的限制，脚本必须保持在框架内，并且必须避免将空的电影剪辑用作按钮。

在 Flash Professional CS5 中，引入了一个新的组件来显示包含在定时文本格式(DFXP)中或与 FLV 文件集成在一起作为提示点的音频字幕。Flash Professional CS5 还为可访问的视频播放器外观提供本机支持。

用户控制对于音频回放是必须的，例如播放和暂停按钮。

对于所有控件，在控件发生变化时向用户提供反馈是很重要的。

前面在 WCAG 要求中描述的颜色选择的一般规则也适用于 Flash 内容。

数学符号的可访问性

GIF 图像中提供的数学公式对于视力受损的人来说可能难以阅读，如果没有文本描述，屏幕阅读器也无法阅读。

相比之下，MathML 方程更容易理解。MathML 的可访问性潜力由一个用于 Internet Explorer 的免费 MathML 插件的可访问性特性清楚地展示出来，⁴Design Science math player[49】。该软件为屏幕阅读器提供数学符号的音频或盲文描述。MathPlayer 还具有本地语音功能(从本地菜单中选择speak expression)。它允许键盘导航。MathPlayer 2 还包含 MathZoom，允许用户放大单个表达式。匹配算法确保当周围的文本被缩放时，数学符号的字体大小增加。此外，MathPlayer 支持换行符，如果缩放字体大小，这可以提高可读性。它提供了大声朗读的子表达式的同步突出显示，这有助于患有某些学习障碍如阅读障碍或计算障碍的人。

由于 Internet Explorer 从第 9 版开始就支持 MathML，所以只有早期版本才需要 MathML 插件。该公司还提供创建数学符号的工具，如 MathType(参见“MathType”一节)。

总结

在本章中，你学习了在标记、样式表、客户端和服务器端脚本以及多媒体内容中应用的可访问性指南。现在，您可以创建任何人都可以使用的具有所需可访问性级别的网站，而不用考虑用户的残疾或浏览设备的限制。

在下一章，你将会学到网络标准化的工具。您将熟悉在选择高级文本编辑器、特定编辑器或标记校正器时需要考虑的要求，它们可以极大地简化您的工作。

参考文献

《澳大利亚残疾歧视法》(1992 年)。澳大利亚法律信息研究所。www.austlii.edu.au/au/legis/cth/consol_act/dda1992264/2011 年 1 月 6 日访问
众议院办公室(2005 年)《残疾法》。爱尔兰国民议会。www.oireachtas.ie/documents/bills28/acts/2005/a1405.pdf2011 年 1 月 6 日访问
OPSI (1995 年)残疾歧视法。英国成文法数据库。www.statutelaw.gov.uk/content.aspx?activeTextDocId=33303272011 年 1 月 6 日访问
美国接入委员会(2010)508 条款主页:电子和信息技术。美国准入委员会。www.access-board.gov/508.htm2011 年 1 月 6 日访问
Henry SL (ed) (2011)网络无障碍倡议(WAI)。万维网联盟。www.w3.org/WAI/2011 年 2 月 4 日访问
W3C (1997)万维网联盟发起了网页可访问性倡议国际项目办公室。万维网联盟。www.w3.org/Press/IPO-announce2010 年 10 月 14 日访问
Régis J，Morrison A，Touré H (2010 年)世界标准日致辞。国际标准化组织。www.iso.org/iso/wsd2010/wsd2010_message.htm2010 年 10 月 14 日访问
Paciello MG (2000 年)残疾人网络无障碍。劳伦斯 CMP 图书公司
Henry SL，McGee L (eds) (2010)可达性。在:网页设计和应用。万维网联盟。www.w3.org/standards/webdesign/accessibility2010 年 10 月 14 日访问
Richards J，Spellman J，Treviranus J，May M (eds) (2010)创作工具可访问性指南(ATAG) 2.0。万维网联盟。www.w3.org/TR/ATAG20/2011 年 2 月 2 日访问
Allan J，Ford K，Richards J，Spellman J (eds) (2010)用户代理可访问性指南(UAAG) 2.0。万维网联盟。www.w3.org/TR/UAAG20/2011 年 2 月 2 日访问
Abou-Zahra S，Squillace M (eds) (2009)评估和报告语言(EARL) 1.0 模式。万维网联盟。www.w3.org/TR/EARL10-Schema/2011 年 2 月 2 日访问
亨利·SL(编辑)(2011)WAI-ARIA 文件。在:WAI-ARIA 概述。万维网联盟。www.w3.org/WAI/intro/aria.php#is2011 年 9 月 9 日访问
Craig J，Cooper M，Pappas L，Schwerdtfeger R，Seeman L (2011)可访问的富互联网应用(WAI-ARIA) 1.0。万维网联盟。www.w3.org/TR/wai-aria/2011 年 2 月 2 日访问
Pappas L，Schwerdtfeger R，Cooper M (2010) WAI-ARIA 1.0 初级读本——富互联网应用可访问性挑战和解决方案介绍。www.w3.org/TR/wai-aria-primer/2011 年 9 月 9 日访问
Scheuhammer J，Cooper M (2010) WAI-ARIA 1.0 创作实践——作者理解和实现可访问富互联网应用的指南。万维网联盟。www.w3.org/TR/wai-aria-practices/2011 年 9 月 9 日访问
Snow-Weaver A，Cooper M (2010) WAI-ARIA 1.0 用户代理实施指南——用户代理开发者理解和实施可访问富互联网应用的指南。万维网联盟。www.w3.org/TR/wai-aria-implementation/2011 年 9 月 9 日访问
博尔特曼 D，扬森 J，塞萨尔 P，穆兰德 S，海奇 E，德梅利奥 M，金特 J，川村 H，韦克 D，帕涅达 XG，梅伦迪 D，克鲁兹-拉拉 S，汉克里克 M，祖克 DF，米歇尔 T(编辑)(2008)同步多媒体集成语言(SMIL 3.0)。W3C 推荐。万维网联盟。www.w3.org/TR/SMIL/2011 年 9 月 13 日访问
Adams G (ed) (2010)时控文本标记语言(TTML) 1.0。W3C 推荐。万维网联盟。www.w3.org/TR/ttaf1-dfxp/2011 年 9 月 13 日访问
齐索姆 W，范德黑登 G，雅各布斯 I(编辑)(1999)网页内容无障碍指南 1.0。万维网联盟。www.w3.org/TR/WAI-WEBCONTENT/2011 年 1 月 24 日访问
考德威尔 B，库珀 M，里德 LG，范德黑登 G，齐索姆 W，斯拉丁 J，怀特 J(编辑)(2008)网页内容无障碍指南(WCAG) 2.0。万维网联盟。www.w3.org/TR/WCAG20/2011 年 1 月 25 日访问
范德黑登 G，里德 LG，考德威尔 B，亨利 SL，莱蒙 G(编辑)(2010)如何迎接 WCAG 2.0。可定制的 Web 内容可访问性指南 2.0 要求(成功标准)和技术的快速参考。万维网联盟。www.w3.org/WAI/WCAG20/quickref/2011 年 1 月 14 日访问
范德黑登 G，里德 LG，考德威尔 B，亨利 SL (2008)如何迎接 WCAG 2.0。可定制的 Web 内容可访问性指南 2.0 要求(成功标准)和技术的快速参考。万维网联盟。www.w3.org/WAI/WCAG20/quickref/20081211/2010 年 9 月 23 日访问
库珀 M，里德 LG，范德黑登 G，考德威尔 B，齐索姆 W，斯拉丁 J(编辑)(2010)WCAG 2.0 技术。Web 内容可访问性指南 2.0 的技术和失败。万维网联盟。www.w3.org/TR/WCAG20-TECHS/2011 年 1 月 24 日访问
库珀 M，里德 LG，范德黑登 G，考德威尔 B，齐索姆 W，斯拉丁 J(编辑)(2010)附录 a .如何从其他文件中引用 WCAG 2.0。在:了解 WCAG 2.0。理解和实现 Web 内容可访问性指南 2.0 的指南。万维网联盟。www.w3.org/TR/UNDERSTANDING-WCAG20/appendixA.html.于 2011 年 2 月 2 日进入
Cooper M，Reid LG，Vanderheiden G，Caldwell B (eds) (2010)章节标题:理解章节 2.4.10。在:了解 WCAG 2.0。万维网联盟。www . w3 . org/TR/UNDERSTANDING-wcag 20/navigation-mechanisms-headings . html。2011 年 9 月 10 日访问
Abou-Zahra S 等人(编辑)(2005 年)对网站可访问性的一致性评估。万维网联盟。www.w3.org/WAI/eval/conformance.html2011 年 2 月 2 日访问
WebsynergiDesign (2011)可访问性–我们的经验&可访问网站设计组合。网站协同设计有限公司www . websynergi . com/accessibility/accessibility-bobby-W3C . aspx2011 年 9 月 10 日访问
Caldwell B，Cooper M，Reid LG，Vanderheiden G (eds) (2008)相对亮度。在:网页内容无障碍指南(WCAG) 2.0。W3C 推荐。万维网联盟。www . w3 . org/TR/2008/REC-wcag 20-2008 12 11/# relativeluminancedef。2011 年 9 月 11 日访问
WebAIM (2011)色彩对比检查器。犹他州州立大学。webaim.org/resources/contrastchecker/2011 年 9 月 11 日访问
Juicy Studio (2011)光度色彩对比度分析仪。多汁工作室。juicystudio.com/services/luminositycontrastratio.php2011 年 9 月 11 日访问
WAT-C (2005)光度对比度分析仪 1.1。网络辅助工具联盟。www.wat-c.org/tools/CCA/LCRA/index.html2011 年 9 月 11 日访问
库珀 M，里德 LG，范德黑登 G，考德威尔 B，齐索姆 W，斯拉丁 J(编辑)(2010)颜色选择器。工作实例。WCAG 2.0 的技术。Web 内容可访问性指南 2.0 的技术和失败。万维网联盟。www.w3.org/TR/WCAG20-TECHS/working-examples/G175/index.php2011 年 1 月 28 日访问
Ishida R (ed) (2011) CSS3 Ruby 模块。万维网联盟。www.w3.org/TR/css3-ruby/2011 年 9 月 11 日访问
Sowden P (2001)替代样式:使用替代样式表。一份单独的杂志。www.alistapart.com/d/alternate/styleswitcher.js2011 年 9 月 12 日访问
W3C (2004)演示了在签名科学项目中使用的签名头像技术。TERC。www.w3.org/2004/Talks/0628-rdig-sims/vcom3d-signsci.mov2011 年 9 月 12 日访问
Trace Center (2011)光敏癫痫分析工具(PEAT)。威斯康星大学。trace.wisc.edu.peat/2011 年 9 月 11 日访问
WCAG EOWG WG(eds)(2009)WCAG 1.0 检查站与 WCAG 2.0 检查站的比较，按数字顺序排列。万维网联盟。www.w3.org/WAI/WCAG20/from10/comparison/2011 年 2 月 3 日访问
齐索姆 W .范德黑登 G .雅各布斯 I(编辑)(1999 年)准则 11。使用 W3C 技术和指南。在:网页内容可访问性指南 1.0。万维网联盟。www.w3.org/TR/WAI-WEBCONTENT/#gl-use-w3c2011 年 2 月 3 日访问
库珀 M，里德 LG，范德黑登 G，考德威尔 B，齐索姆 W，斯拉丁 J (2008)理解无障碍支持。在:了解 WCAG 2.0。理解和实现 Web 内容可访问性指南 2.0 的指南。万维网联盟。www . w3 . org/TR/2008/NOTE-UNDERSTANDING-wcag 20-2008 12 11/conformance . html# UC-accessibility-support-head。2011 年 2 月 3 日访问
齐索姆 W .范德黑登 G .雅各布斯 I(编辑)(1999 年)准则 6。在:网页内容可访问性指南 1.0。万维网联盟。www.w3.org/TR/WCAG10/wai-pageauth.html#技脚本。2011 年 2 月 3 日访问
如何将你的网站从 WCAG 1.0 升级到 WCAG 2.0。万维网联盟。www.w3.org/WAI/WCAG20/from10/websites.html.于 2011 年 2 月 2 日进入
克拉克 J (2006)让 WCAG2 见鬼去吧。一份名单之外。www.alistapart.com/articles/tohellwithwcag22010 年 9 月 23 日访问
美国政府(2010) 1194.22 基于网络的内联网和互联网信息及应用。在:第五百零八部分标准指南。美国政府。www . Section 508 . gov/docs/Section % 20508% 20 standards % 20 guide . pdf。2011 年 2 月 4 日访问
美国政府(2010)第 1194.22 号照会。在:第五百零八部分标准指南。美国政府。www.section508.gov/index.cfm?fuseAction=stdsdoc2011 年 2 月 4 日访问
WebAIM (2011)创建可访问的 JavaScript。创建可访问的 JavaScript 概述。牢记网页可访问性。webaim.org/techniques/javascript/2011 年 2 月 3 日访问
Adobe (2011) Adobe Flash 可访问性设计指南。Adobe 系统公司。www . adobe . com/accessibility/products/flash/best _ practices . html。2011 年 2 月 4 日访问
Adobe (2011)可访问性最佳实践概述。中:Adobe Flash 辅助功能设计指南。Adobe 系统公司www . adobe . com/accessibility/products/flash/best _ practices . html。2011 年 9 月 12 日访问
设计科学(2011) MathPlayer 会说话！MathPlayer:语音指令和示例。设计科学。www . dessci . com/en/products/math player/tech/accessibility . htm。2011 年 2 月 4 日访问

十一、开发工具

由于现代标记元素和属性变得越来越复杂，复杂的开发软件被用来生成网页。然而，某些 web 内容(如描述性元数据)可能非常复杂，经常需要人工决策。高级文本编辑器总是在每个网络标准的软件列表中占有最高的优先权。虽然它们可以用于各种任务，但应该应用特定的编辑器，如语义编辑器和标记纠正器。高级文本编辑器也可以与 SFTP 客户端集成。WYSIWYG 编辑器和内容管理系统对快速开发很有用；但是，它们经常产生无效代码。因此，在网站标准化和优化中应该尽量减少它们的应用。

在这一章中，你将学习一些软件工具，它们可以帮助你开发符合标准的网站。您将熟悉那些在选择开发工具、优化器和测试环境时应该考虑的重要特性。

功能要求

尽管经验丰富的 web 标准化人员可以在任何文本编辑器中编写有效的代码，但所选择的软件工具应该提供一些高级功能，这些功能对于高效的手工编码至关重要:

全面的字符编码支持，包括完整的 Unicode 支持
空白字符支持
控制字符支持，例如，CR+LF (Windows)、LF only (UNIX)和 Apple (CR only)换行
带标签的多文件编辑
用于突出显示 (XHTML、CSS、XML、脚本等)的语法的可定制颜色模式
退回/重做
强制自动换行
加行号
自动缩进
标签对和元素嵌套指南
操作系统集成(将应用添加到右击菜单)

所选的编辑器应至少与您的一个浏览器集成为默认源代码编辑器，您可以使用该编辑器通过按钮或热键打开当前渲染的 web 文档进行编辑。

文本编辑器还有一些不是很重要但很有用的特性:

自定义颜色和字体设置
可定制的工具栏
拼写检查器
模板
书签
完全支持拖放
内置 FTP 客户端或与 FTP 客户端集成
转换(大写、小写、颠倒大小写和首字母大写)
国际版本(对某些开发人员来说可能比较方便)
支持在远东语言中使用的双字节字符系统(DBCS)，如中文或日语(如果需要)
浏览器预览 ¹ (启动默认或选定的网页浏览器进行调试和测试)

文字编辑

与微软 word 或 OpenOffice.org Writer 等文字处理器相比，纯文本编辑器不能用于文档格式化。不过，这些基本的文本编辑器可以用来创建网页。然而，它们并不方便，而且缺少一些重要的功能。例如，它们中的许多不能正确处理所有的控制和空白字符。最广为人知的例子就是 Windows 下的记事本和 Linux 下的 vi。

写字板等高级文本编辑器提供文本格式和其他附加功能。源代码编辑器是高级文本编辑器，带有专门为手工编码者和程序员设计的附加工具。它们最常见的特性是各种标记语言、样式表和编程语言的语法突出显示。这些全功能编辑器是适合手工编写网页的综合工具。以下是一些例子:

Linux 操作系统

蓝鱼 [1
科莫多编辑 [2 ]

Mac OS 系统

bbedit[3 的缩写形式
文字包裹器 [4

Windows 操作系统

EditPad Lite(有免费版 [5 ]和低价版 [6 )
EditPlus [7
NotePad++(免费、开源 [8 ])
TextPad(低成本、免费评估 [9 ])

跨平台

Arachnophilia(适用于 Windows、Linux、Unix、FreeBSD 和 Mac OS [10 ])

¹ 一些开发人员不使用该功能，而是手动打开所需的浏览器。

举个例子，我们来看看 Notepad++的主要特性。这是一个多文件编辑器，具有方便的文件管理器选项。例如，编辑器只需单击一下即可保存多个文件，打开最近编辑过的文件，并为每个打开的文件提供选项卡。它有一个完全可定制的界面，具有高级功能，如线条标记、打开和关闭标签对的指南、折叠或显示当前编辑的 DOM 树级别的结构化指南，以及语法高亮(图 11-1 )。

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

***图 11-1。*Notepad ++中的语法高亮显示和标签对指南

语法高亮支持多种编程和 web 开发语言，从 HTML 到 XML，从 PHP 到 Ruby。有几个预定义的颜色主题可供选择，如果需要，您也可以创建并应用新的主题。不同的文档组件(缩进参考线、标记、标记、空白、标签对、活动和非活动标签等)可以单独设置样式。记事本++可以改变文件的文字方向。它还支持各种字符编码，可以添加和删除字节顺序标记，支持大端和小端 Unicode 文件，并将文件从一种编码转换为另一种编码。 ² 应用中打开的文档可以在任何安装的浏览器中预览。

Notepad++还提供了高级的文本转换功能，例如转义某些字符、将小写字符转换为大写字符(反之亦然)、搜索匹配字符串、将十进制数字转换为十六进制数字、插入当前日期和时间、对列表进行升序或降序排序、自动将前导空格转换为制表符等等。Notepad++也支持宏，可以多次运行。特性列表可以通过额外的插件来扩展，例如 Base64 编码和解码的 MIME 工具。

所见即所得编辑

图形创作工具可能很舒适，但是不能保证在所有情况下都符合标准。它们的功能甚至对高级开发人员也很有用，并且它们提供了一个带有标记窗口、即时预览和高级调试工具的界面。然而，并不是所有的开发人员都应用它们，有些人专门使用高级文本编辑器。图形开发环境通常只需要标记和 CSS 的基础知识(有时不需要任何技术背景)，这是它们非常受欢迎的主要原因。然而，由于大量的功能，可能会有可用性问题。例如，界面可能会让一些用户感到困惑和害怕，尤其是那些没有几年专业知识的用户。尽管有图形界面，有些系统还是很难掌握。此外，所有这些工具都有不同的界面，其中一个工具的专家不一定熟悉其他系统，这是一个限制，特别是如果编辑器只适用于一个平台。相比之下，手工编码者几乎可以在任何环境下工作，因为文本编辑器可用于所有平台，并且它们的主要功能非常相似。

值得注意的是，大多数所见即所得编辑器都有内置的源代码编辑器。因此，WYSIWYG 编辑器也可以作为源代码编辑器使用。此外，图形编辑器的一些特性对任何 web 开发人员都是有用的，比如数据库管理、web 服务器和框架。此外，还有专门用于 web 标准化的 WYSIWYG 编辑器，如 XStandard XHTML 和 W3C Amaya ( 图 11-2 )。

² 此功能可用于某些编码，这些编码可以合理地转换成另一种更高级的编码，而不会牺牲某些字符(例如，ANSI 到 UTF-8)。

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

**图 11-2。**阿玛亚的一个 SVG 文件

有许多商业和免费的编辑工具。然而，与高级文本编辑器和源代码编辑器相比，许多商业所见即所得编辑器都很昂贵。另一方面，有几个图形开发者不仅是免费的，而且是开源的。以下是一些例子:

Windows 操作系统

微软表情网页 12
微软网站矩阵 13

跨平台

适用于 Windows 和 Mac OS 的 Adobe Dreamweaver(商业版) [14
W3C Amaya，一个免费的开源 HTML、MathML 和 SVG 编辑器 [15
XStandard XHTML，符合标准的 XHTML 编辑器，可用于 Windows 和 Mac OS(免费精简版) [16 ]

业界领先的创作应用 Dreamweaver 的标准合规性在不断发展。然而，web 标准花了几年时间才引起人们的注意。

最新版本支持 HTML、CSS、XSLT、JavaScript、ActionScript、XML、ASP、ColdFusion、JSP 和 PHP。Dreamweaver 中的一些功能和工具不仅对一般开发有用，而且对符合标准的开发也有用。例如，无效代码突出显示、信息栏中显示的语法错误警告、与当前选定元素关联的 CSS 属性列表以及语法突出显示。程序界面具有高度的可定制性，并以不同的模式显示代码、结果或同时显示两者(图 11-3 )。

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

***图 11-3。*代码和设计可以在 Adobe Dreamweaver 中同时显示。

内容管理系统和博客

内容管理系统(CMSs)是主要为 web 内容创作和博客发布开发的 WYSIWYG 工具。很多都是 PHP 驱动的。最知名的内容管理系统都是跨平台的，比如 Drupal [17 ]，Joomla！ [18 ，还有 WordPress [19 ]。除了 web 发布的常见任务之外，它们还提供现代功能，如语义内容支持。然而，CMSs 的标准支持各不相同。毫无疑问，他们是网络上大量无效标记的罪魁祸首。图 11-4 显示了一个典型的例子。

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

***图 11-4。*CMS 生成的每十行标记中的错误和警告

因为它们是为快速开发而设计的，不需要源代码编辑，有经验的 web 标准化人员会尽可能避免使用它们。虽然有越来越多的 CMS 声称可以产生符合标准的代码(LiveStoryboard [20 ]、WebDandy [21 ]、sNews [22 ]等等)，但是它们中的大多数都没有提供一个整体的标准实现方法；但是，有些会产生接近最佳的合理标记代码。

网络标准支持

编辑对标准的支持各不相同。几个工具知道某些标记版本或变体，而其他工具只支持部分 CSS(表 11-1 )。不存在最终的解决方案，但是任何综合的工具都可能是手工编码者的好选择。例如，BlueFish 不仅支持所有(X)HTML 版本和变体，还支持 RSS、Atom、MathML、CSS2、frames、JavaScript、Java、XSLT、XForms 和 XPath。

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

具体编辑

除了高级文本编辑器之外，web standardistas 的工具集中还有一些不可错过的特殊工具。这些工具包括语义编辑器、标记纠正器、特殊编辑器、SFTP 客户端和浏览器插件。

语义编辑器和推理器

随着 OWL 的日益流行，越来越多的 OWL 开发工具出现在市场上。Web 本体是机器可处理的，语义推理机(也称为推理引擎或规则引擎)可用于从本体描述的事实或公理中推断逻辑结果。下面描述一些最有用的语义编辑器和推理机。

Protégé 是一个免费的开源框架 [23 ，也是使用最广泛的 OWL 编辑器之一。它是开发和测试本体的有效工具。Protégé支持多种文件格式和语法，包括 OWL、函数语法中的 OWL、曼彻斯特语法中的 OWL、RDF/XML、OBO 平面文件、KRSS2、Latex 和 Turtle。它不仅可以直接打开保存的文件，还可以打开在线本体。

是一个 OWL 推理机，可以用来确定本体的一致性，识别类之间的关系，以及进一步的任务。它可以在命令行、Java 应用中使用，或者作为一个被保护的插件使用(图 11-5 )。

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

***图 11-5。*运行在门徒中的隐士推理者

《隐士》是根据 LGPL 许可证 [24 ]发行的。 TopBraid Composer 是一款用于数据建模和语义数据处理的图形化开发工具，支持 RDF、OWL 和 SPARQL [25 ]等标准。 Pellet 是用于 Java 的 OWL 2 推理机 [26 ]。 RacerPro 2.0 支持 RDF、RDFS、OWL Lite、OWL DL 和 SPARQL 等标准。也可以连接外部软件 [27 ]。FaCT++是兼容 OWL DL 和 OWL 2 [28 ]的描述逻辑推理机。

MathType

MathType 是由 Design Science 开发的数学符号高级编辑器。方程式和注释可以通过强大的图形用户界面进行编辑(图 11-6 )。

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

***图 11-6。*MathType 中的方程式编辑

该软件适用于 Windows 和 Mac OS [29 ]。该编辑器通常嵌入到 Microsoft Word 中，以取代方程式编辑器(根据 Word 版本，可以作为新菜单或新功能区)，但它也可以用于其他文字处理器，如 OpenOffice、Google Docs 或 Apple Pages。在 MathType 中编辑的数学注释也可以导出到 MathML 和 LaTeX。事实上，使用 MathType 是生成 MathML 最简单的方法之一。除了 MathType，W3C 浏览器/编辑器 Amaya 也可以用来生成 MathML。

标记修正器

尽管复杂的标记组件(如元数据)需要人工决策，但传统的(X)HTML 标记元素和属性可以可靠地自动更正。它们在许多情况下是有用的；然而，标记校正器不能取代手工编码的网络标准。与开发人员相反，软件工具并不总是支持最新的标准；其中一些已经停产，或者将在标准发布日期几年后更新。

HTML 整洁

HTML Tidy 是一个标记修正器，修复无效的 HTML，改进标记的布局和缩进样式。这个工具是由戴夫·拉格特开发的，他是 W3C 的几个标记规范的合著者和编辑。因为它是用 ANSI C 编写的，所以预编译的二进制文件可用于各种平台，并且可以为其他平台编译。HTML Tidy 可以在 W3C 许可下在 Sourceforge.net 获得(既有可下载的二进制代码也有源代码) [30 ，或者作为在线服务在 W3C [31 ]获得。

该软件可以识别和纠正缺失或不匹配的结束标记、混淆的标记和引号，并根据预定义的样式 [32 ]更改标记布局。

整理为 PHP

PHP 脚本生成的 HTML 标记可以被 PHP 扩展 Tidy 检查和纠正。例如，可以编写一些函数，将 HTML 标记片段作为字符串，并通过 HTML Tidy 运行它们。输出是有效的标记。这种方法使得自动页面处理和标准化成为可能。如果代码中有错误，位置(行、列)和错误原因被清楚地指出或自动纠正 [33 ]。

日志验证器

W3C 日志验证器“将服务器日志分析引擎与批量验证、链接检查和其他面向质量的处理结合起来，逐步改进和维护网站质量” 34 。它会查找最常下载的无效文档、断开的链接、其他错误和不一致，并设置修复它们的优先级列表。此功能旨在通过一次只更正一定数量的文档来逐步标准化大型无效网站。最终，整个网站将被修复，但标准化组织可以决定如何安排开发时间和精力。

日志验证器应用处理模块，根据标记和样式表建议验证最新的服务器日志(根据 W3C HTML 和 CSS 验证服务)。SurveyEngine 模块为可能影响网站整体质量的最流行文档创建错误摘要。基本处理模块仅根据流行度生成文档列表。日志验证器支持三种类型的输出:原始、邮件和 HTML。

作为开发工具的浏览器

尽管 web 浏览器的主要目的是处理和呈现 web 文档，但是它们也可以用于开发和标准化。通过关闭样式表和非文本内容或者应用基于文本的浏览器，可以有效地评估可访问性。

调试和附加组件

浏览器中有各种内置的调试功能，如 Internet Explorer 中的开发者工具(工具开发者工具或 F12) [35 ]，Safari 中的开发者工具(编辑首选项在菜单栏中显示开发者菜单) [36 ]，或 Opera 中的开发者模式(查看开发者工具) [37 。

浏览器还可以通过安装开发者插件来扩展附加功能，其中许多插件是免费提供的。

Firefox 有许多对开发人员有用的附加组件。例如，HTML Validator 是一个扩展，它在 Firefox [39 ]中添加了 HTML 验证。它在浏览时会在状态栏中以图标的形式清楚地指示标记错误的数量。Live HTTP Headers 在浏览 [40 ]时显示页面的 HTTP 标题。FireFTP 是一个免费、安全、跨平台的浏览器 FTP 客户端。用户代理切换器扩展添加了一个菜单和一个工具栏按钮来切换浏览器的用户代理 [42 ]。IE 选项卡扩展支持从 IE6 到 IE9 的 Internet Explorer 呈现，这对于测试目的很有用 [43 ]。web developer 扩展为浏览器添加了各种 Web Developer 工具，例如禁用某些样式或按媒体类型显示 CSS 的选项 [44 ]。Firefox 最全面的开发者插件之一是 Firebug [45 ]。它将几个开发工具集成到浏览器中，直接编辑、调试和监控 HTML、CSS 和 JavaScript ( 图 11-7 )。

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

***图 11-7。*萤火虫在行动

这些火狐工具中的一些也可以在 Chrome 下使用(例如，Firebug [46 ]，Web Developer [47 ])，没有 Chrome 版本的工具也有 Chrome 的对等版本(例如 IE Tab [48 ])。Chrome ⁴⁹ ]下还有很多其他的开发者工具，比如 W3C html 5&CSS3 Validator[50]，Validity 验证地址栏的标记(或者用热键验证) [51 ]，colorPicker [52 ]，XML Tree [53 ]，Resolution Test [54 ，只是为了

在文本浏览器中测试网页

在 Lynx [55 ]等文本浏览器中测试网站是检查信息可用性的最佳方法，无需样式和图形 ³ 以及可访问性。适当设计的网页内容在文本浏览器中仍然是可用的(图 11-8 ),而大部分网站却不是这样。

默认情况下，Lynx 无法显示非文本内容，但可以从 Lynx 启动外部程序，如图像查看器或视频播放器。

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

***图 11-8。*在 Lynx 中浏览可访问的网站

查看源代码

Web 浏览器提供了查看当前打开的网页的源代码的选项(通常通过选择查看源代码或页面源代码，从本地菜单中选择类似的菜单项，或者按 Ctrl/Cmd+U 或在 Safari 中按 Ctrl/Cmd+Alt+U)。此功能可用于分析标记和站点的其他组件。尽管向其他开发人员学习非常有用，但重要的是要记住，大量网站不符合标准，不应被视为参考或最佳实践。

网站内容的版权和产生它的标记代码的版权是不同的。一般来说，未经许可从其他网页派生的代码是不允许发布的。

总结

在这一章中，你学习了如何选择开发工具，独立于你偏好的平台。到现在为止，你应该知道有效工作所需要的重要特性，比如对控制字符和特殊字符(比如 BOM)的支持。网站标准化最基本的工具是一个高级的文本编辑器，一个精心选择的软件工具组合可以加速你的网站标准化工作，包括重新设计和从头开始的项目。

在你掌握了前几章描述的标准、方法和知识之后，是时候将理论应用于实践了。在下一章中，所有这些都将在逐步指南中一起使用，以提高您的标准化技能。

参考文献

Sessink O (2011)蓝鱼。蓝鱼项目组。bluefish.openoffice.nl/2011 年 2 月 5 日访问
科莫多软件公司(2011 年)。活动状态软件。www.activestate.com/komodo-ide2011 年 2 月 5 日访问
裸机软件(2011) BBEdit。裸机软件公司www.barebones.com/products/bbedit/。2011 年 2 月 5 日访问
裸机软件(2011) TextWrangler。裸机软件公司www.barebones.com/products/textwrangler/index.html。2011 年 2 月 5 日访问
Goyvaerts J (2011) EditPad Lite。刚伟软件有限公司www.editpadlite.com。2011 年 2 月 5 日访问
Goyvaerts J (2011) EditPad Pro。刚伟软件有限公司www.editpadpro.com。2011 年 2 月 5 日访问
ES-Computing(2011)EditPlus–文本编辑器、HTML 编辑器、PHP 编辑器和 Java 编辑器 Windows 版。ES-计算。www.editplus.com2011 年 2 月 5 日访问
何 D 等人(2011) Notepad++。唐浩。notepad-plus-plus.org2011 年 2 月 5 日访问
HELIOS (2011) TextPad。Helios 软件解决方案。www.textpad.com/products/textpad/index.html2011 年 2 月 5 日访问
卢图斯 P (2009)嗜蜘蛛主页。www.arachnoid.com/arachnophilia/保罗·路特斯。2010 年 10 月 13 日访问
htmlArea (2011)所见即所得编辑器目录。htmlArea。www.htmlarea.com2011 年 2 月 5 日访问
微软(2011)微软表情网。微软公司。www.microsoft.com/expression/products/Web_Overview.aspx2011 年 2 月 5 日访问
微软(2011)微软公司。www.microsoft.com/web/webmatrix/2011 年 2 月 5 日访问
Adobe (2011) Adobe Dreamweaver。Adobe 系统公司。www.adobe.com/products/dreamweaver/2011 年 2 月 5 日访问
金特五世(编辑)(2010 年)。万维网联盟。www.w3.org/Amaya/2011 年 2 月 5 日访问
Belus Technology(2011)x standard XHTML(Strict 或 1.1)所见即所得编辑器。符合标准的 XHTML 编辑器。贝卢斯科技公司xstandard.com/。2011 年 2 月 5 日访问
Buytaert D (2011) Drupal。德赖斯·布塔尔特。drupal.org2011 年 2 月 5 日访问
Moffatt S 等人(2011) Joomla！www.joomla.org 开放源码公司。2011 年 2 月 5 日访问
Mullenweg M，Boren R，Jaquith M，Ozz A，Westwood P (2011 年)。wordpress.org/2011 年 2 月 5 日访问
live story board(2011)live story board web 内容管理。Web 标准节省时间，降低成本，增加灵活性——不要忽视它们。liveSTORYBOARD 公司www . live story board . com/Benefits/CMS-standards-compliant . html。2011 年 9 月 16 日访问
Web Dandy (2011) Web Dandy 内容管理系统-可访问性成为标准。www.webdandy-cms.co.uk/w3c-standards.htm。2011 年 9 月 16 日访问
s news(2011)s news——轻量级内容管理系统。snewscms.com2011 年 9 月 16 日访问
斯坦福大学(2010)的 Protégé Ontology 编辑器和知识获取系统。斯坦福生物医学信息学研究中心。protege.stanford.edu/2010 年 10 月 29 日访问
Motik B，Shearer R，Glimm B，Stoilos G，Horrocks I (2011)隐士猫头鹰推理者。牛津大学。hermit-reasoner.com/2011 年 3 月 1 日访问
TopQuadrant (2011) TopBraid 作曲人。TopQuadrant 公司www.topquadrant.com/products/TB_Composer.html。2011 年 3 月 1 日访问
Parsia (2010) Pellet:开源 OWL 2 推理器。克拉克&帕西亚有限责任公司。clarkparsia.com/pellet2010 年 10 月 29 日访问
Haarslev V，Hidde K，ml ler R，Wessel M 等人(2011) RacerPro。赛车手系统有限公司&公司www.racer-systems.com。2011 年 3 月 1 日访问
Tsarkov D 等人(2011) FaCT++。德米特里·察尔科夫等人code.google.com/p/factplusplus/。2011 年 3 月 1 日访问
设计科学(2011)MathType–方程式编辑器。设计科学。www.dessci.com/en/products/mathtype/2011 年 3 月 1 日访问
Raggett D，Paehl D，Nelson C，Hennecke C，Teague T (2008) HTML 整洁库项目。SourceForge.net:免费查找、创建和发布开源软件。tidy.sourceforge.net2011 年 9 月 15 日访问
整理你的 HTML。万维网联盟。services.w3.org/tidy/tidy2011 年 9 月 15 日访问
用 HTML TIDY 清理你的网页。戴夫·拉格特。www.w3.org/People/Raggett/tidy/2011 年 3 月 1 日访问
PHP 小组(2011)PHP:Tidy-manual。PHP 小组。php.net/manual/en/book.tidy.php2011 年 3 月 1 日访问
Thereaux O，Dubost K，Bless T，Skytta V，Cope AS，雷日奇 S 等人(2007) LogValidator。万维网联盟。www.w3.org/QA/Tools/LogValidator/2011 年 3 月 1 日访问
微软(2010)用开发者工具调试 HTML 和 CSS。微软公司。msdn . Microsoft . com/en-us/library/DD 565627(v = vs . 85)。aspx 。2011 年 3 月 2 日访问
苹果(2011) Safari 开发者工具。苹果公司developer . apple . com/technologies/safari/developer-tools . html。2011 年 9 月 16 日访问
Bovens A (2010) Opera 扩展开发人员工作流程。Opera Software ASA。dev . opera . com/articles/view/opera-extensions-developer-workflow/。2011 年 3 月 2 日访问
Mozilla (2011)网络开发::Firefox 的附加组件。Mozilla 基金会。addons . Mozilla . org/en-US/Firefox/extensions/we B- development/。2011 年 3 月 2 日访问
Gueury M (2011) Html 验证器。Mozilla corp . https://addons . Mozilla . org/en-us/Firefox/addon/html-validator/。2011 年 9 月 16 日访问
Savard D，Coukouma N (2011)实时 HTTP 报头。Mozilla corp . https://addons . Mozilla . org/en-us/Firefox/addon/live-http-headers/。2011 年 9 月 16 日访问
uvalo M (2011 年)FireFTP。Mozilla 公司addons.mozilla.org/en-US/firefox/addon/fireftp/。2011 年 9 月 16 日访问
Pederick C (2011)用户代理切换器。Mozilla corp .addons . Mozilla . org/en-US/Firefox/addon/user-agent-switcher/。2011 年 9 月 16 日访问
Mozilla (2011) IE 标签 V2。Mozilla corp .addons . Mozilla . org/en-US/Firefox/addon/ie-tab-2-ff-36/。2011 年 9 月 16 日访问
Pederick C (2011)网页开发者。Mozilla 公司addons . Mozilla . org/en-US/Firefox/addon/we b-developer/。2011 年 9 月 16 日访问
Hewitt J .和 Odvarko J .等人(2011 年)。Mozilla 公司getfirebug.com/。2011 年 9 月 16 日访问
Simonetti P (2011)为谷歌浏览器开发的 Firebug Lite。Mozilla 公司getfirebug.com/releases/lite/chrome/。2011 年 9 月 16 日访问
Pederic C (2011)网络开发人员。Mozilla corp .chrome . Google . com/web store/detail/bfbameneiokkkgbdmiekhjnmfkcnldhhm。2011 年 9 月 16 日访问
Blackfish (2011) IE Tab。黑鱼软件。https://chrome . Google . com/web store/detail/hehijbfgiekmjfkfjpbkbammjbdenadd。2011 年 9 月 16 日访问
49 谷歌(2011)谷歌 Chrome 开发者工具页面。谷歌公司chrome.google.com/webstore?类别= ext % 2 F11-网络开发。2011 年 9 月 16 日访问
cebeci g(2011)W3C html 5&CSS 3 验证器。chrome . Google . com/Webster/detail/idfkidbjjecdefblbikogdknfp。2011 年 9 月 16 日加入
Renyard I (2011)有效期。伊恩·伦亚德。chrome . Google . com/web store/detail/bbicmjjbohdfglopkidebfccilipgeif。2011 年 9 月 16 日访问
太多 P (2011) colorPicker。彼得·戴特。chrome . Google . com/Webster/detail/jeimeildimppbfayellilaedkdo。2011 年 9 月 16 日加入
Stroop A (2011) XML 树。艾伦·斯特鲁普。chrome . Google . com/web store/detail/gbambbheopgpmaagmckhpjbfgdfkpadb。2011 年 9 月 16 日访问
Beckford B (2011)分辨率测试。本·贝克福德。chrome . Google . com/web store/detail/idhfcdbheobinplaamokffboaccidbal。2011 年 9 月 16 日访问
Dickey T 等人(2011)猞猁来源分布和百花香。互联网软件联盟。lynx.isc.org/2011 年 3 月 2 日访问

十二、把这一切放在一起

熟悉某些技术和标准并不足以标准化无效站点和从零开始开发有效站点。网站标准化总是一项复杂的工程，它同时考虑到各种各样的需求。该列表包括但不限于完全符合标准；最佳码长；互操作性；有意义的、结构化的和可访问的内容；充足的元数据；和适当的设置。通过本章提供的一系列分步指南，可以最有效地学习如何创建有效的代码。

熟悉 web 标准之后，是时候学习如何在文本编辑器中从头开始创建基本的符合标准的 web 站点组件，并为您的 web 页面扩展它们了。您将学习的大多数 XHTML 1.0 Strict 代码片段都可以用作 XHTML 项目和新 HTML 项目的 HTML5 标记的基础。您将看到如何使用缩进来创建清晰、易于维护的标记，并在开始标记之后立即提供结束标记，以避免遗漏标记。本指南还展示了从段落到列表、从表格到表格的结构元素的合理、合乎逻辑的使用。掌握列表、表格、对象和表单的基本结构后，您将能够扩展、修改和标准化相应的标记元素，即使标记相当长且复杂，也不会迷失在细节中。 ¹

选择相关标准

在网站标准化中，没有终极选择。浏览器支持和开发人员的关注点在不断变化。大多数开发人员至少对 W3C 推荐标准有所了解；然而，也有其他标准化组织发布的标准，如 ERCIM、IETF、WaSP 或 WSG(如第一章中所述)。即使开发人员完全掌握了标准，也不一定能恰当地应用它们。

标准的选择对网站标准化的每个过程和未来的可能性都有严重的影响。当考虑各种标记语言及其变体之间的相似性和差异时，应该在设计和开发阶段之前做出选择。

标准之间的切换

这是一个常见的误解，即不惜一切代价立即应用最新技术是开发现代网站的关键。事实上，没有最终规范的最新技术不推荐使用。最新的标准(带有 W3C 状态“推荐”)应该被专有地应用，并且可能被改变的工作草案不应该被使用。例如,没有理由使用有效的 XHTML 标记将网站更新为 XHTML5(更不用说 HTML5 了),除非该规范中引入的新元素在网站上是必需的。主要原因是这些技术的采用和标准化程度不同。此外，应用这些技术的网站不能被验证(或者验证器提供这个特性只是作为一个实验工具)。此类网站的用户可能会面对无法工作的组件，被提示下载未知类型的文件，等等。功能性和可用性比不正确地使用最新的、未定稿的规范更重要(图 12-1 )。

¹ 本章中的每个分步指南都侧重于某个元素或元素组以及相应的标记元素。当添加额外的内容和属性时，标记的复杂性会急剧增加，但基本结构总是保持不变。

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

***图 12-1。*现代标记应用不正确。有什么意义？

另一方面，如果 web 开发人员想要保持竞争力，他们就不应该落后。此外，他们应该让他们的客户或老板相信高质量代码和开发时间的重要性，这通常与直接的商业利益相冲突。

逐步发展

使用有效的标记、样式、语义内容和可访问的代码创建符合标准的网站应该是开发网站的首选方式。您可以通过在开发过程中验证标记、样式表和其他组件(如 feed channel)来验证个别技术是否符合标准。然而，整个网站完全符合标准要比这复杂得多。正如本书中所讨论的，完全的标准符合性包括有效的字符编码(最好是有效的 UTF-8)、有效的 HTML 或有效的 XHTML 标记(越严格越好)、有效的 CSS、有效的 RSS 或有效的 Atom 新闻提要、有效的 RDF、有效的元数据、有效的 XML、有效的对象嵌入、有效的脚本嵌入、WCAG 2.0 和 Section 508 一致性、可访问性友好、语义 Web 技术的应用、独立于浏览器和分辨率的代码，以及正确的服务器设置，这只是提到的最重要的几个。

从零开始

通常，从头开始创建网站时，应该执行下列核心任务:

确定文档类型。
创建index.html文件。必须提供所有必需的元素，以及强烈推荐用于结构化的元素。 ² 一般来说，html 元素应该被用作所有 HTML 和 XHTML 文档的根元素。标记文档应该包含一个文档头(在<head>和</head>之间)和一个文档体(由<body>和</body>分隔)。除了 HTML 4.01 和 XHTML 中使用的通用容器div和段落p，或者更具体的 HTML5 结构化元素header、article和section，网页内容的内聚部分应该有标题。在(X)HTML 中，有六个级别的标题:h1、h2、h3、h4、h5、h6(从最大到最小)。不应跳过级别(例如，在没有h3而只有h1和h2的文档中应用h4)。
倍增文件。精心应用的复制和粘贴减少了手工编码人员的开发时间。它提供了整个站点的完整性；但是，如果修改了初始文件，则应该对所有文件进行修改。这种修改在动态站点上通常更容易，因为动态站点通常集中存储相同的部分。
使用基本布局、颜色和字体样式的初始设计创建主样式表文件(例如，main.css)。应该预先确定主要的设计概念。
提供可选元素。哪些可选元素是合理的取决于项目。在大多数情况下，建议使用各种meta元素。几个link元素也经常被应用，包括但不限于到外部文件的链接，例如 Atom 或 RSS 新闻提要(atom.xml、rss.xml)、网站图标(favicon.ico)或可选元数据(metadata.rdf、foaf.rdf、doac.rdf)。
添加有用的扩展。有用和免费的网站扩展和 API 的数量在不断增加。有些是谷歌分析跟踪代码(JavaScript)，互动谷歌地图的联系方式，或类似的社交网络和推特按钮。虽然它们很受欢迎，并被数百万人使用，但大多数都没有标准化。黄金法则是，您必须小心避免第三方软件开发人员提供的无效嵌入代码。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传注意这并不意味着你必须牺牲第三方内容，因为许多无效的嵌入代码可以用符合标准的方式重写。

根据客户需求完成其他任务。
在 web 服务器上设置主机。
除了最简单的静态网站，所有的网站都采用服务器端的脚本和应用，并具备必要的技术支持和配置。这些取决于用户需求。
上传并安装。
- 静态文件可以直接上传到 web 服务器。
- 服务器端应用通常有一些应该上传到服务器的安装文件。可以在服务器上执行这些文件来安装和配置应用。
通过域共享网站。

开发工具通常会提供模板和框架文档来开始你的工作。甚至文本编辑器也有插入标记元素的选项，这可能比键入要快。

请注意，这些任务没有固定的顺序，尽管有些任务总是在其他任务之前。此外，这些步骤适用于静态网页。如果站点依赖于服务器端脚本，步骤取决于系统的类型。

遵循下一节中讨论的基本原则是从头开始开发符合标准的代码的良好起点。网站组件列表无论如何都是不完整的。但是，这些示例中的大多数可以应用于各种标记语言和样式表，并且经常应用于网站开发。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传注意步骤命令的顺序只是一个建议。

XHTML

XHTML 1.0 Strict 文档可以通过以下步骤开发。通过应用所需的文档类型，可以类似地创作其他 XHTML 文档。

创建 XML 声明。<?xml version="1.0" encoding="UTF-8"?>
添加文档类型声明。<?xml version="1.0" encoding="UTF-8"?> **<!DOCTYPE html ![images](https://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%2FU001.jpg&pos_id=img-ncyuqYUK-1724311458395))** ** PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ![images](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%2FU001.jpg&pos_id=img-ncyuqYUK-1724311458395))** **"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">**
添加具有默认命名空间和语言设置的根元素。`<?xml version="1.0" encoding="UTF-8"?>

`
还可以根据请求添加额外的名称空间。
添加文档头和文档体。`<?xml version="1.0" encoding="UTF-8"?>
****

`
添加文档标题。`<?xml version="1.0" encoding="UTF-8"?>
**XHTML Document Sample** `
添加标题内容，包括元数据、基本 URI、链接和脚本。虽然它们是可选元素，但其中许多是经常使用的。其中最常见的是指向外部 CSS 文件的链接:
- 用文件路径或 URI 创建一个基本链接。如果使用 XHTML 语法，则需要自结束。<link href="styles/main.css" />
- 设置链接类型。<link **type="text/css"** href="styles/main.css" />
- 确定链接角色。<link **rel="stylesheet"** type="text/css" href="styles/main.css" />
- 设置媒体类型(可选)。<link rel="stylesheet" type="text/css" **media="all"** href="styles/main.css" />
标题内容可以根据请求任意扩展，例如使用来自外部词汇表(如 DC)的元数据。具有高度定制内容的典型标题部分如下所示:`<?xml version="1.0" encoding="UTF-8"?>
XHTML Document Sample

(X)HTML5

(X)HTML5 文档可以通过以下步骤开发:

创建文档类型声明。<!DOCTYPE html>
添加根元素。`

`
添加文档头和文档体。`
****

`
添加标题。与上一节中讨论的示例类似，可以任意添加元数据、基本 URI、链接和脚本。`
**Sample HTML5 document structure** `
添加字符编码声明。`
Sample HTML5 document structure **** `
提供内容。`
Sample HTML5 document `

链接

超链接是网页的基本元素，可以按如下方式开发:

提供基础锚。它可以是外部站点的 URI，如下所示:<a href=**"http://www.example.com"**>
- 或者站点内的路径，如下所示:<a href=**"gallery/"**>
- 超链接也可以指向带有片段标识符的文档片段(由id属性标识)。这里有一个例子:<a href="gallery/canada.html**#calgary"**>
设定目标(如果需要)。外部链接通常会在新窗口中打开。这里有一个例子:<a href="http://www.example.com" **target="_blank"**>
添加跳转索引以提高可访问性(可选)。<a href="http://www.example.com" **tabindex="5"** target="_blank">
确保外部链接不会影响你网站的页面排名(可选)。<a href="http://www.example.com" **rel="nofollow"** tabindex="5" target="_blank">
- 步骤 2 和 4 仅适用于外部链接。

图像

图像嵌入了img元素。如果使用 XHTML 语法，则需要自结束。图像文件的位置由src(源)属性决定。

嵌入基本图像。<img src="img/logo.png" />
提供在图像无法显示的情况下可以呈现的替代内容(可访问性的基础)。<img src="img/logo.png" **alt="The logo of Big Profit Company"** />
提供当用户将鼠标移动到图像上时显示的文本(可选)。它可以与替代文本相同，也可以不同。<img src="img/logo.png" alt="The logo of Big Profit Company" **title="The logo of Big Profit** ** Company"** />

列表

有序列表(ol)和无序列表(ul)的列表项都由<li>和</li> ( 清单 12-1 )分隔。

***清单 12-1。*有序和无序列表中的列表项结构

<ol> <ul> **<li></li>** **<li></li>** **<li></li>** **<li><li>** … … **<li></li>** **<li></li>** </ol> </ul>

无序列表可以创建如下:`
`
列表项可以任意添加。`
- **
- Apricot
- **
  **
- Cherry
- **
  **
- Peach
- **
`

定义列表定义了定义术语(dt)及其描述(dd ) ( 列表 12-2 )。

***清单 12-2。*定义列表示例

<dl> ** <dt>** <label>Web site development</label> ** </dt>** **<dt>**RDF**</dt>** **<dd>**A W3C acronym for Resource Description Framework, an XML specification for ![images](https://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%2FU001.jpg&pos_id=img-ncyuqYUK-1724311458395)) metadata models.**</dd>** **<dt>**RSS**</dt>** **<dd>**Really Simple Syndication. An XML format for frequently updated content, e.g., ![images](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%2FU001.jpg&pos_id=img-ncyuqYUK-1724311458395)) news headlines, blog entries.**</dd>** </dl>

列出可访问性

可以通过添加 accesskey 和 tabindex 等元素来提高列表的可访问性。这里有一个例子:

<ul> <li> <a href="http://www.example.com/" title="Home" **accesskey="h" tabindex="1"**>Home</a> </li> <li> <a href="about/" title="Introduction" **accesskey="a" tabindex="2"**>About</a> </li> <li> <a href="gallery/" title="Gallery" **accesskey="g" tabindex="4"**>Gallery</a> </li> <li> <a href="shop/" title="Webstore of oil paintings" **accesskey="s" tabindex="6"**>Shop</a> </li> <li> <a href="exhibition/" title="Exhibitions" **accesskey="e" tabindex="7"**>Exhibitions</a> </li> <li> <a href="contact/" title="Address and phone" **accesskey="c" tabindex="7"**>Contact</a> </li> </ul>

样式列表

您可以将无序列表用于比简单列表更复杂的目的。它们通常用于创建菜单。 ³ 典型的水平菜单会覆盖默认的显示样式，如清单 12-3 所示，以便将列表项呈现在彼此旁边而不是下方。

***清单 12-3。*内嵌显示的列表项目样式

li { ** display: inline;** }

这种列表项的超链接经常使用的一种简单样式是底部边框。

***清单 12-4。*菜单超链接的底部边框

**a:hover {** color: #949295; ** border-bottom: 1px solid #949295;** }

自然，这种风格很少在全球范围内应用。相反，它使用列表的标识符或其容器父元素(如#main a:hover或#navtabs li a:hover)进行扩展。

创建自定义导航效果的常用技术是向列表项添加背景图像。清单 12-5 显示了一个例子。

***清单 12-5。*带背景图片的自定义导航效果

li { ** background: url('img/navbg.png') 5px no-repeat;** padding-left: 16px; }

如果某些链接，比如第一个、最后一个或当前选择的链接，具有不同于所有其他链接的样式，那么应该为它们提供唯一的标识符(清单 12-6 )。

***清单 12-6。*第一项和最后一项更具体的规则

  < li id=“first”>
     Home

…
Contact

第一个规则集的样式如清单 12-7 所示。

XHTML 2.0 还为导航列表提供了更具体的元素 nl。

***清单 12-7。*第一个列表项目的特定规则集

**li.first {** background: none; padding-left: 0; }

如果项目不仅仅是一个小的网页，这些样式不应该被全局应用，因为这些特定的样式将被应用到整个文档中的所有列表，其中大部分应该被覆盖(将有更多的样式规则被覆盖，而不是继承的规则来满足我们的需要)。相反，应该在列表中添加一个标识符，如清单 12-8 中的所示。

***清单 12-8。*用于导航的无序列表被识别为不同样式

Home
…
Contact

从现在开始，所有的风格都要以#navtabs ( 清单 12-9 )开头。

***清单 12-9。*为无序列表navtabs 的第一个列表项设置样式的特定规则集

**#navtabs li.first {** background: none; padding-left: 0; }

或者，可以在容器级别声明样式，并使用继承来设置列表的样式。 ⁴ 当文档中使用了多个样式相同或略有不同的列表时，这种方法很有用。这种差异很容易被更具体的样式规则覆盖。

可以为访问键和其他功能声明其他样式。例如，清单 12-10 中的标记可以用清单 12-11 中显示的 CSS 规则来样式化。

***清单 12-10。*一个用于样式化访问键的跨度

**S<span class="ak">i</span>**temap

***清单 12-11。*访问键的 CSS 规则

span.ak { color: red; background-color: #ffffbb; border-bottom: solid navy 1px; }

⁴ 注意，在这种情况下，标记中的标识符应该从 id 改为 class，从散列符号(#)改为句点(。)在 CSS 中。

CSS 可以将默认项目符号更改为任意字符或图像。清单 12-12 展示了一个例子，它适用于无序列表，比如清单 12-13 中的列表。

***清单 12-12。*子弹图像

ul.tick { ** list-style-image: url('img/tick.png')** }

***清单 12-13。*应用清单 12-12 中呈现的自定义项目符号样式

The major benefits of standard compliance

< ul class=“tick”>

Resolution independence
Browser independence
Interoperability
Robust functionality

结果在视觉上比带有普通项目符号的列表更吸引人(也更具体)。

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

***图 12-2。*用 CSS 自定义项目符号

表格

我们假设一个 5x5 的 iPhone 机型对照表需要呈现在一个网页上(表 12-1 )。

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

所有表格都应该有一个开始和结束标记。`
`
表格行应该由<tr>和</tr>分隔。第一行是这样开始的:`

`
表头单元格应写在<th>和</th>之间。由于所需的表格有五列，因此需要五个标题单元格元素:`




`
应该为第一行数据单元开始新的一行。`






`
数据单元格应该由td标签提供。由于所需的表格有五列，每行需要五个数据单元元素。`







`
由于行的结构相同，包含五个数据单元格的表格行可以通过简单的复制和粘贴操作复制三次:<table>   <tr>     <th></th><th></th><th></th><th></th><th></th>   </tr>
`










  `

最后，单元格应该填入数据:`







     images

)

Model	iPhone	iPhone 3G	iPhone 3GS	iPhone 4
Preinstalled OS	iPhone OS 1.0	iPhone OS 2.0	iPhone ) OS 3.0	iOS 4.0
Display resolution	480 x 320	480 x 320	480 x 320	960 x 640
CPU clockrate	620 MHz	620 MHz	833 MHz	1 GHz
Camera	2 MP	2 MP	3 MP	5 MP (rear), ) 0.3 MP (front)

表格可访问性

您可以进一步改进标记以增加可访问性。对于非可视浏览器来说，处理和理解表格具有挑战性。您可以使用表格标题(th)和标题(caption)标记元素以及 summary 属性来提高表格的可访问性。前两个对于可视化浏览器也很有用，而第三个对于屏幕阅读器很有价值。

表头元素th不仅增加了第一行的含义，而且当读取表的每一行时，屏幕阅读器都会重复这个元素。它有助于视障人士理解表格单元格之间的相关性。

虽然由caption元素提供的数据通常对于小的、易于理解的表格来说已经足够了，但是更复杂的表格可能会提供一个summary属性(清单 12-14 )。然而，summary 属性在 HTML5 中被认为是过时的，可以用details元素来代替。 ⁵ 因此，建议您在表格旁边或包含表格的figure元素内的caption元素或figcaption元素中描述表格结构。或者，也可以在表格周围的常规段落中描述表格。这些方法也可以结合使用。

***清单 12-14。*表格标题

**A comparison table of iPhone models.**
Model	iPhone	iPhone 3G	iPhone 3GS	iPhone 4
Preinstalled OS	iPhone OS 1.0	iPhone OS 2.0	iPhone OS 3.0	iOS 4.0
Display resolution	480 × 320	480 × 320	480 × 320	960 × 640
CPU clockrate	620 MHz	620 MHz	833 MHz	1 GHz
Camera	2 MP	2 MP	3 MP	5 MP (rear), 0.3 MP (front)

如果需要，还可以向表格单元格添加访问键。

表格样式

虽然大多数浏览器通常以粗体显示表格标题，但是表格单元格、填充和边框的默认样式在每个呈现引擎中都是不同的，这在许多情况下是不够的。但是，所有的表格功能都可以通过 CSS 规则集任意设置样式。例如，border-collapse属性的默认值separate可以被覆盖，以便尽可能将边框折叠成一个单独的边框(清单 12-15 )。

***清单 12-15。*设置边框折叠

table { **border-collapse: collapse;** }

⁵ 截至 2011 年，details元素还没有被浏览器正确支持；因此，建议等待实现

在这种情况下，border-spacing和empty-cells属性将被忽略。标题和数据单元格的填充和边框可以如清单 12-16 中的所示进行设置。

***清单 12-16。*表头和数据单元格的填充和边框

th, td { **padding: 10px;** **border: 1px solid #13b141;** }

下拉选择列表

选择列表可以提供选项供选择。假设多语言网站需要一个语言选择器。它可以开发如下:

用select元素创建一个选择列表。`

`
添加默认选项。`
English

`
添加更多选项。提供每个语言版本的 URIs 作为选项值。`
  English

Deutsch
  Français
  Español
  )
`
要加载适当的网页，可以通过事件处理程序将作为选项值提供的子域用作目标 URIs。尽管使用onchange事件处理程序是合乎逻辑的，但键盘用户无法访问它。其中一个解决方案是提供一个带有onclick事件处理程序的按钮，它是独立于设备的。例如，下面这个功能<script type="text/javascript"> function goto_URL(object) { window.location.href=object.options[object.selectedIndex].value; } </script>
文档头或链接的外部文件中声明的可以由input元素上的onclick事件处理程序使用，如下:`

    English
    Deutsch
    Français
    Español
    )


`
请注意，也可以应用其他方法，例如服务器端重定向，这消除了对 JavaScript 的需求。

表格

可以通过以下步骤创建基本表单:

创建一个空表单。`

`
指定用于处理表单数据的服务器端脚本的位置。`<form action=“register.php”>
`
指定用于发送数据的方法。表单数据可以作为 URL 变量(method="get")或 HTTP post ( method="post")发送。
- get 方法将表单数据作为名称-值对附加到 URL 上，这使得对表单提交的结果添加书签成为可能。但是，由于 URL 的长度限制，不能保证所有的表单数据都会被传输。此外，get 方法不足以转换密码等敏感信息，因为这些数据在浏览器的地址栏中是可见的。
- post 方法将表单数据作为 HTTP post 事务发送。此方法没有大小限制，并且比 get 方法更安全。`<form method=“post” action=“register.php”>
  `
为表单元素创建逻辑组。<form method="post" action="register.php">
添加所需的表单控件，如文本字段(text)和复选框(checkbox)及其属性。`


**
**






`
提高可访问性。元素给一个表单控件添加一个标签。元素给一个fieldset分配一个标题。跳转顺序可以通过tabindex属性设置。`

    Personal data
    First name

    <input type=“text” name=“firstname” id=“firstname” size=“15” maxlength=“30” )
     tabindex=“12” />

    <label for=“lastname”>Last name

    <input type=“text” name=“lastname” id=“lastname” size=“20” maxlength=“50” )
      tabindex=“13” />


    Main interests
    <input name=“interests” type=“checkbox” value=“1” id=“photo” tabindex=“14” />
    Photography

    <input name=“interests” type=“checkbox” value=“2” id=“video” tabindex=“15” />
    Videography

    <input name=“interests” type=“checkbox” value=“3” id=“web” tabindex=“16” />
    Web

`

闪现内容

您可以在 XHTML 中嵌入带有通用object标签的 Flash 文件，如下所示:

声明一个应用/x-shockwave-flash 对象。`

`
添加带有跨浏览器代码的源代码。`<object type=“application/x-shockwave-flash” data=“flash/header.swf”>

`
提供属性，如尺寸和标识符(如果需要)。`<object type=“application/x-shockwave-flash” data=“flash/header.swf” width=“610” )
** height=“224” id=“flash”**>

`
如果 Flash 内容具有透明背景，则应该将其声明为可选参数。这也是提供在网页内设置层顺序的可能性所需要的。`<object type=“application/x-shockwave-flash” data=“flash/header.swf” width=“610” )
height=“224” id=“flash”>

`
Add alternate content such as a placeholder image and text descriptions to improve accessibility. If a short description is not adequate, a good practice is to add a hyperlink to a resource that describes the object. <object type="application/x-shockwave-flash" data="flash/header.swf" width="610" ![images](https://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%2FU001.jpg&pos_id=img-ncyuqYUK-1724311458395)) height="224" id="flash"> <param name="movie" value="flash/header.swf" /> <param name="wmode" value="transparent" /> **<a href="longdesc/"><img src="img/altheader.jpg" alt="The image alternative for ![images](https://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%2FU001.jpg&pos_id=img-ncyuqYUK-1724311458395))** **the Flash header." title="Our headquarters" /></a>** </object>

在(X)HTML5 中，应该用embed标签代替object。
Create an embed element. Since the parameters can be provided as attributes of embed, the self-closing tag can be applied in XHTML5 as follows: <embed />

显然，在 HTML5 中应该省略简写符号。
添加文件的路径或 URI。这可以通过使用src属性而不是应用于object元素的data来完成。<embed **src="flash/header.swf"** />
添加尺寸和可选参数。<embed src="flash/header.swf" **width="550" height="400" wmode="transparent"** />

RSS 新闻源

创建 RSS 新闻源通常包括以下步骤:

Create the XML declaration. Since RSS 2.0 news feeds should be valid XML documents, the first line is the XML declaration: <?xml version="1.0" encoding="utf-8"?>

字符编码是可选的，但建议使用。
Create the RSS channel. The contents of the RSS channel should be written within the rss and channel tags as follows: `

`

如果需要额外的名称空间，应该将它们添加到rss元素中。通过提供转义 HTML 标记、带有 Dublin Core 元数据的创建者、由联合命名空间定义的更新周期和频率以及来自 Atom 词汇表的自链接，可以实现最广泛的互操作性。应添加以下名称空间声明:

`<rss version=“2.0”
xmlns:content=“http://purl.org/rss/1.0/modules/content/”
xmlns:dc=“http://purl.org/dc/elements/1.1/”
xmlns:sy=“http://purl.org/rss/1.0/modules/syndication/”
xmlns:atom=“http://www.w3.org/2005/Atom”

`
提供 feed 信息，包括必需的title、link、description元素，以及可选元素lastBuildDate、language。**<title>**John Smith photography**</title>** **<link>**http:// example.com/**</link>** **<description>**The news feed of Alaskan photographer John Smith.**</description>** **<lastBuildDate>**Fri, 10 Feb 2012 14:47:00 GMT 0900**</lastBuildDate>** **<language>**en-US**</language>**
Provide news items. To create a valid RSS 2.0 feed channel with the highest level of interoperability, each item should have the following elements: title, link, description, pubDate, and guid. <item>
**<title>**Photo exhibition**</title>** **<link>**http://example.com/events/**</link>** **<pubDate>**Fri, 10 Feb 2012 14:47:00 GMT 0900**</pubDate>** <dc:creator>John Smith</dc:creator> <category>Events</category> **<guid>**http://example.com/events/**</guid>** **<description>**Best shots of 2011**</description>** <content:encoded><![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](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%2FU001.jpg&pos_id=img-43T3NDpH-1724311431931) Moose Hotel in Anchorage, AK, USA on 17–18 February 2012\. ]]></content:encoded> </item>

这是可以复制和粘贴的部分，然后在每次订阅源频道更新最新新闻时进行修改。下一个消息应该在最近的一个之前提供，也就是在源代码中更早一些。
验证。
分享。新闻提要通常通过链接到包含它们的 XML 文件来使用 ^** 。要使用现代浏览器的内置 RSS 阅读器，应该在(X)HTML 文档的 head 部分提供一个链接。这里有一个例子:<link rel="alternate" type="application/rss+xml" title="John Smith photography" ![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](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%2FU001.jpg&pos_id=img-RzcEYVGv-1724311431931) href="http://www.example.com/rss.xml" />

这使得浏览器能够识别出当前网页有 RSS 新闻提要。

通过重新设计使网站有效

标记越严格，就越容易升级到新版本。然而，在某些情况下，如果不完全重写站点，迁移到另一个标准是不可行的。关于样式表，在大多数情况下，有效的 CSS 2.1 可以很容易地用 CSS3 特性进行扩展。尽管如此，标准化一个现有的网站可能是一项艰巨的任务。

一般有两种可能:从头重写整个网站或者手动逐个规范每个页面。两者似乎都需要比开发人员所能负担的更多的工作。第一种方法通常会导致链接断开。第二种方法需要大量的时间和工作(除非站点非常小),并且只能在少数情况下执行。

万维网联盟提出了一个解决方案:精心挑选的部分应该系统地更新。最常提供的(最流行的)文档可以被日志验证器识别，它还试图在最流行的文档中找到 n 个无效文档(如前一章所述)。当然，整个项目受到截止日期和可承受工作量的影响。

总结

在这一章中，你看到了一系列一步一步的指南，指导你如何一个字符一个字符地手工创建基本的网站组件。通过学习结构元素的语义用法，您现在能够在后台创建具有逻辑流和完美 DOM 的有意义的标记。XHTML 1.0 Strict 的核心元素可以在大多数项目中使用，自然有或没有自结束标记(取决于您选择的标记语言)。这种精心创建的标记代码提供了高级别的互操作性，几乎可以在任何设备上运行的任何浏览器中呈现，而无需多个站点版本。即使 CSS 样式被禁用，标题、段落、列表和其他站点组件仍然清晰可辨，并且内容不仅可以被最新的浏览器访问，也可以被非常旧的版本和具有有限功能和标准支持的移动浏览器访问。

⁶ 另一个选项是使用脚本检索所需数量的频道项目。如果您希望将最新的新闻作为网页的一部分而不是单独的文件发布，那么您需要一个脚本来打开文件、检索新闻提要条目的内容并生成相应的标记代码。

在下一章中，你将学习广泛使用的符合标准的最佳实践，这些实践可以应用到你的日常工作中。

参考文献

使你的网站有效:一步一步的指南。万维网联盟。[www.w3.org/QA/2002/09/Step-by-step](http://www.w3.org/QA/2002/09/Step-by-step)。2011 年 1 月 9 日访问

上一篇： PHP基于微信小程序

下一篇：精通 HTML5、C