我国网站遵循Web标准情况的不完全调查
by melop at melopia 2005年2月17日
目录
本文假设您具备一定的HTML、CSS以及XML知识。如果您对相关的内容还不了解，请参阅 http://www.w3school.org。
本文适于那些有较长时间网页设计的人员阅读，也适用于网页的入门者。
背景介绍
本节扼要的介绍了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的支持得到了加强与扩展，尽管还没有达到它应有的水平。主流的“新版本浏览器” 包括下面列出的这些以及它们的更新版本:
[url=http://www.mozilla.org]mozilla Firefox 1.0
[url=http://www.mozilla.org]mozilla 浏览器及对应的Netscape产品
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可访问性评价
www.msn.com
[url=http://www.microsoft.com]Microsoft MSN站点
XHTML 1.0 Strict
http://www.msn.com
29974
Meta:260
text:3976
Summary:530
href:11385
53.9%
21
11处不符标准，总体评价4星
www.sohu.com
搜狐站点
未声明，按HTML 4.01 Transitional 处理
http://www.sohu.com
136736
Meta:44
text:6915
Summary:78
href:375909
32.6%
1259
约550处不符标准，未计算人工测评错误。总体评价1星
www.wired.com
连线IT杂志
XHTML 1.0 Transitional
http://www.wired.com
36441
Meta:33
text:8107
Summary:757
href:11545
56.1%
0 (完全标准)
8处不符标准，总体评价5星
www.pconline.com.cn
太平洋电脑网
未声明，按HTML 4.01 Transitional处理
http://www.pconline.com.cn
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星
www.zsu.com.cn
中山大学
未声明，按HTML 4.01 Transitional处理
http://www.zsu.edu.cn/2003/xxgk/xxgk.htm
11543
Meta:25
text:5124
Summary:0
href:2452
4640正文
50.4%
45
43处不符合指引,总体评价3星
数据分析
msn.com vs. sohu.com
这两家都是咨询类的门户网站，涉及内容相似，因此具有很强的可比性。Msn.com 于2005年1月改版，完全使用 XHTML 1.0 Strict重构，并使用了CSS排版。Sohu.com沿用传统的HTML表格布局，甚至无法在其网页的开头找到文档类型声明，因此测试中假设它为最宽松的HTML 4.01 Transitional。
首先看到，其真正的内容与文件大小的比例如图所示:
图表 1
图表 2
在文字浏览器和小屏幕设备当中，msn.com依然比sohu.com保持优势。看看下面的截图就一目了然了:
图表 3. 在手机设备上，msn.com仍井然有序
图表 4. 而sohu的链接挤在一起，难以阅读
图表 5. msn.com明显较sohu易读
图表 6. sohu版面混乱，还出现不少诸如IMG这样的标签
wired.com vs. pconline.com.cn
这两家都是与IT 相关的网站。Wired.com 采用的是XHTML Transitional文档类型，在本次的调查中， Wired.com是表现最佳的一个。它完全达到了w3c的相关标准，各个参数都处于前列。Pconline 即太平洋电脑网是国内访问量最大的IT站点之一。但是在测评当中，其对标准的漠视以及很差的兼容性让人留下很不好的印象。
图表 7
图表 8
在文字浏览器和小屏幕设备当中，wired.com较pconline.com.cn容易访问。看看下面的截图:
图表 9. 在手机设备上，wired.com仍井然有序
图表 10. PConline有的链接甚至与背景颜色相同，根本无法阅读。毫无意义的装饰图片混乱陈列
图表 11. wired.com明显较pconline易读
图表 12. pconline版面混乱，IMG、IFRAME这样的标签随处可见
Wired.com十分注重可访问性，注意它在每种设备中都提供了不同字体大小的选项。PConline在小屏幕设备和文本浏览器中都是难以阅读，在小屏幕设备中甚至还出现了字体颜色与背景相同这样的重大失误。
Middlebury.edu vs. Zsu.edu.cn
本来不太情愿，毕竟是自己的学校嘛，总得留点面子。可是回头一想，知道了差距才会有进步嘛。所以就把中山大学的网站ZSU.edu.cn也拿出来跟别人的比比看咯。由于这次使用的页面包含的正文量比较大，所以为了公平起见，两个页面中的正文量换算成相同，以利于比较。
图表 13
图表 14
在图表14中，两所大学页面的错误率都比较低。但是zsu.edu.cn的两类问题依然比Middlebury.edu要稍多，而且不要忘记，Middlebery.edu使用的是几乎最为严格的XHTML 1.0 Strict标准来进行验证的, 而中大只是HTML 4.01。而且在验证过程当中还发现，中大的页面当中频繁出现与其文档编码gb2312不符的UTF-8编码字符，导致验证失败。
尽管没有在所检测的URL上发现严重的可访问性问题，但是ZSU.edu.cn却有一个致命的可访问性错误。这个错误源于在其首页上使用了IFrame以及不遵从W3C规定，没有为每幅图片加上alt说明。 在文本浏览器(Opera 7模拟)中:
图表 15. 比较有条理的Middlebury.edu首页
图表 16. 充斥着IMG和IFRAME的中山大学的首页根本无法被残障人士及某些便携设备使用
结论
尽管此次调查仅仅分析了廖廖几个网站，但是却反映了很多国内外站点面临的问题。不标准导致了许多站点的高成本、低效率甚至无法被某些浏览者访问。更要命的是，国内很多的大型网站和他们的开发人员依然抱着旧有的方式不放，这是阻碍Web标准在我国推广的一个重大障碍。
希望我们能够敲响警钟，努力去改变这样的现状。
参考文献
Designing with web standards, Jeffrey Zeldman, New Riders, 2003
MSN goes CSS, Douglas Bowman, StopDesign.com , 2005
New MSN.com Homepage, Venkat Narayanan, MSDN Blog, 2005
