我国网站遵循Web标准情况的不完全调查

by melop at melopia 2005年2月17日

背景介绍

本节扼要的介绍了Web标准的相关背景知识，包括其定义、历史、重要性以及最近的发展。

什么是Web标准

不需要为自己没有听说过这个词语而感到不好意思，事实上，即使是很多中国的专业网页作者也根本不在意，甚至不知道Web标准。我有5年的网页制作经验，而真正了解这个也不过半年多一点的时间。

根据定义来说, Web标准是一些规范的集合，是由W3C和其他的标准化组织共同制定的，以用它来创建和解释网页的基本内容。这些规范是专门为了那些在网上发布的可向后兼容的文档所设计，使其能够被大多数人所访问。

简单来说，Web标准就是由标准化协会，例如W3C、ECMA，所制定的一系列的规则，用来规范网页编写的各个方面。我不打算在本文中涉及过多的技术上的细节，必要时我会举出一些简单的示例用于说明问题。

Web标准历史

在90年代后期，当互联网和web逐渐成为主流时，Web浏览器(包括当时的Netscape 4及以下版本，IE 4及以下版本。行话叫Version 4浏览器)的开发商还没有完全的支持CSS（层叠式样式表，对于Web开发人员来说，他们可以用CSS来控制Html文档的表现）。考虑到CSS1是在1996年制定的，而CSS2是在1998年才制定的，所以这种对CSS支持的不足也是可以理解的。

由于浏览器对CSS的支持不够，再加上一些平面设计师的要求（这些要求与他们经常与印刷品打交道有关）导致他们为了控制网页的视觉表现而滥用HTML。一个典型的例子就是，当设计师可以用 border="0" 来隐藏表格的边框时，用隐藏表格来控制布局的方法同样被使用。另一个例子是对“transparent”（透明）的使用，同样是不可见，他们却使用空白的GIF图片来控制布局。

由于HTML从来就没被用来控制一个文档的表现，导致大量混乱代码、非法代码、浏览器的专用代码和属性就被随意的使用了。“校验”这个词也很少被人问津。对于这些代码来说，标签大杂烩（tag soup）是一个很形象的名字。

Web标准的现状

新版本的web浏览器的发布，使得对CSS的支持得到了加强与扩展，尽管还没有达到它应有的水平。主流的“新版本浏览器” 包括下面列出的这些以及它们的更新版本:

mozilla Firefox 1.0
mozilla 浏览器及对应的Netscape产品
Opera 7
Microsft Internet Explorer 6

虽然浏览器的开发商对CSS支持的步伐很缓慢，但是现在已经有许多浏览器选择了支持CSS，此时，不应该再有任何理由再像以前那样使用HTML了，应该让它恢复本来的面貌：去描述文档的结构，而不是它的表现。正因为此，我们现在才能够用CSS来达到其本来的目的了。

Web标准的优点

尽管已经说了很多，但我认为还是很有必要提一提Web标准带来的好处。毕竟没人会为一种划不来的标准去折腾自己。

Web标准具有这么些优点:

使页面加载得更快速
降低带宽带来的费用
重新新设计更有效率、花费更少
帮助在各个站点中保持视觉效果的一致性
更利于搜索引擎的检索
令站点更容易被各种浏览器和用户代理访问(包括手机、PDA和残障人士使用的文字浏览器)

尤其说说文件尺寸减小的问题。使用传统的HTML表格布局方法通常会使站点增加毫无必要的带宽传输消耗，而用户也必须等待很久才能加载完页面。根据资料显示，某页面根据Web标准重构后，代码量从原来的13.7kB下降至2.1kB，足足下降了85%之多。根据保守估计，页面重构后，平均尺寸最大也仅为原页面的70%左右。对于流量很大的站点，这无形中就是节省开支的一大妙法。

然而在我国...

有点如此突出的Web标准，近年来在国外已经得到了很大的重视。尤其是美国颁布了 501号法案以后，皆要求站点必须为残障人士提供与普通人士相当的可访问性支持。要知道，传统的布局方法是很难达到这样的要求的。

美国的多数技术性站点都开始向Web标准转型。许多大型站点也已经使用新方法重构。例如就在最近(2005年1月)，微软公司的msn站点使用XHTML Strict+CSS完全重写。访问速度大大提升，为站点带来了效益。而回顾国内的站点，却还是安于现状。而这次调查的结果也向国内的网页设计人员敲响了警钟。

调查方法。

本次调查选取了国外一些大型站点以及我国的主题类似与之的站点做出几项指标的比较。包括页面大小，代码质量(通过W3C Validator进行验证)和兼容性及可访问性。

测评结果

网站机构页面URL 文档类型 HTML大小(字节) 除去标签的内容大小比率 Markup验证错误 WAI可访问性评价 {域名已经过期} Microsoft MSN站点 XHTML 1.0 Strict http://{域名已经过期} 29974

Meta:260
text:3976
Summary:530
href:11385

53.9% 21 11处不符标准，总体评价4星 {域名已经过期} 搜狐站点未声明，按HTML 4.01 Transitional 处理 http://{域名已经过期} 136736

Meta:44
text:6915
Summary:78
href:375909

32.6% 1259 约550处不符标准，未计算人工测评错误。总体评价1星 {域名已经过期} 连线IT杂志 XHTML 1.0 Transitional http://{域名已经过期} 36441

Meta:33
text:8107
Summary:757
href:11545

56.1% 0 (完全标准) 8处不符标准，总体评价5星 {域名已经过期} 太平洋电脑网未声明，按HTML 4.01 Transitional处理 http://{域名已经过期} 151166

Meta:656
text:7228
Summary:23
href:42980

33.7% 645 422处不符合指引,总体评价2星 www.middlebury.edu Middle Bury University XHTML 1.0 Strict http://www.middlebury.edu/about/ 11405

Meta:150
text:3180
Summary:503
href:2934
2016正文

58.7% 39 13处不符合指引,总体评价4星 {域名已经过期} 中山大学未声明，按HTML 4.01 Transitional处理 http://www.{域名已经过期}/2003/xxgk/xxgk.htm 11543

Meta:25
text:5124
Summary:0
href:2452
4640正文

50.4% 45 43处不符合指引,总体评价3星

数据分析

{域名已经过期} vs. {域名已经过期}
这两家都是咨询类的门户网站，涉及内容相似，因此具有很强的可比性。{域名已经过期} 于2005年1月改版，完全使用 XHTML 1.0 Strict重构，并使用了CSS排版。{域名已经过期}沿用传统的HTML表格布局，甚至无法在其网页的开头找到文档类型声明，因此测试中假设它为最宽松的HTML 4.01 Transitional。

首先看到，其真正的内容与文件大小的比例如图所示:

图表 1
可以清楚看到，使用了XHTML的{域名已经过期}有效传达信息的同时，减少了很多不必要的尺寸。而搜狐则足足有65%对用户来说毫无意义的代码。

图表 2
从图表2中可以看到，{域名已经过期}比较注重可访问性。其中它对一些不使用视觉浏览器的客户做出了支持，这点从“不可见描述”的比较中就可以清楚看到。另外，可访问性问题也比搜狐远远要少。令人感觉惨不忍睹的是，尽管使用了最为宽松的文档标准，{域名已经过期}的验证错误依然高达惊人的1259个! 而{域名已经过期}使用了极为严格的验证标准，验证错误就仅有21个。差距立即体现出来。

在文字浏览器和小屏幕设备当中，{域名已经过期}依然比{域名已经过期}保持优势。看看下面的截图就一目了然了:

图表 3. 在手机设备上，{域名已经过期}仍井然有序

图表 4. 而sohu的链接挤在一起，难以阅读

在文本浏览器(Opera 7模拟)中，{域名已经过期}也明显较sohu易读:

图表 5. {域名已经过期}明显较sohu易读

图表 6. sohu版面混乱，还出现不少诸如IMG这样的标签
{域名已经过期} vs. {域名已经过期}
这两家都是与IT 相关的网站。{域名已经过期} 采用的是XHTML Transitional文档类型，在本次的调查中， {域名已经过期}是表现最佳的一个。它完全达到了w3c的相关标准，各个参数都处于前列。Pconline 即太平洋电脑网是国内访问量最大的IT站点之一。但是在测评当中，其对标准的漠视以及很差的兼容性让人留下很不好的印象。

图表 7
看来，XHTML能够有效降低带宽消耗并非没有根据。与上例相似，使用了XHTML的{域名已经过期}减少了很多不必要的尺寸。而太平洋电脑与搜狐相似，真正有意义的内容仅占整个文件的33.7%。

图表 8
尽管比搜狐做得好些，但是pconline上的代码错误依然高踞在645处。与有着相似题材的{域名已经过期}的0处错误相比真是黯然失色了。自然了，如此多的代码问题，可访问性自然也就不佳, 400多处的可访问性问题也显示了这个站点的缺陷。

在文字浏览器和小屏幕设备当中，{域名已经过期}较{域名已经过期}容易访问。看看下面的截图:

图表 9. 在手机设备上，{域名已经过期}仍井然有序

图表 10. PConline有的链接甚至与背景颜色相同，根本无法阅读。毫无意义的装饰图片混乱陈列

在文本浏览器(Opera 7模拟)中:

图表 11. {域名已经过期}明显较pconline易读

图表 12. pconline版面混乱，IMG、IFRAME这样的标签随处可见

{域名已经过期}十分注重可访问性，注意它在每种设备中都提供了不同字体大小的选项。PConline在小屏幕设备和文本浏览器中都是难以阅读，在小屏幕设备中甚至还出现了字体颜色与背景相同这样的重大失误。
Middlebury.edu vs. {域名已经过期}
本来不太情愿，毕竟是自己的学校嘛，总得留点面子。可是回头一想，知道了差距才会有进步嘛。所以就把中山大学的网站{域名已经过期}也拿出来跟别人的比比看咯。由于这次使用的页面包含的正文量比较大，所以为了公平起见，两个页面中的正文量换算成相同，以利于比较。

图表 13
这次使用XHTML的Middlebury的优势不太明显，大约比Zsu高了8%左右。考虑到这两个页面都比较简单，能像这样接近也是情理之中。如果页面稍稍复杂，则Zsu肯定会有更多的垃圾代码产生。

图表 14

在图表14中，两所大学页面的错误率都比较低。但是{域名已经过期}的两类问题依然比Middlebury.edu要稍多，而且不要忘记，Middlebery.edu使用的是几乎最为严格的XHTML 1.0 Strict标准来进行验证的, 而中大只是HTML 4.01。而且在验证过程当中还发现，中大的页面当中频繁出现与其文档编码gb2312不符的UTF-8编码字符，导致验证失败。

尽管没有在所检测的URL上发现严重的可访问性问题，但是{域名已经过期}却有一个致命的可访问性错误。这个错误源于在其首页上使用了IFrame以及不遵从W3C规定，没有为每幅图片加上alt说明。在文本浏览器(Opera 7模拟)中:

图表 15. 比较有条理的Middlebury.edu首页

图表 16. 充斥着IMG和IFRAME的中山大学的首页根本无法被残障人士及某些便携设备使用