这是在 CSS Globe 上看到的一篇文章，个人感觉对理解 Web 标准和 Web 开发（尤其是前端开发）很有启发意义，特翻译分享，并加入了一些我的想法。原文地址：5 Most Common Web Standards Misconceptions。
当开始学习 Web 标准的时候，我们会听到很多关于 Web 标准的理论，这些理论不一定都是正确的，有些反而可能会误导我们。下面是一些最常见的误解。
1、Web 标准 = Validation（验证）
W3C 提供的 HTML 标记验证和 CSS 验证对学习 Web 标准和 Web 开发是很重要的，它不但能够指出代码中的错误，还能让我们学会怎样去改正错误。但是，仅仅通过验证并不意味着你的页面符合 Web 标准。我曾经把 W3C 的验证服务和英语拼写检查工具做过比较。如果你在拼写检查工具中输入这样一个句子：
Dog fox brown lazy over jump.
拼写检查工具并不会发现任何错误，因为单词拼写全是正确的。但是，这句话有意义吗？当你没有为你的页面逻辑结构使用合适的 HTML 元素时，不正和上面的那个例子一样吗？机器就是机器，它可以检测出你的语法、属性、嵌套等的正误，但是它无法了解你要表达的内容的本质。这就是 Web 语义化（semantic）的重要性。
2、Web 标准 = CSS
CSS 是一种样式单，它是一个让页面看起来更加美观的（强大的）工具，而且，CSS 也是 Web 标准的一个重要部分。但是，看看那些基于表格布局，tr、td 等标记层层嵌套如同噩梦一般的页面，你会发现它们也在通过各种方法使用着 CSS，那么，这些页面符合 Web 标准吗？
Web 标准并不只是技术，当然更不只是 CSS，而是你怎样去使用它。一个相对标准的页面，即使剥离了 CSS，它仍然应该是可读的，层次结构清晰的。
3、Web 标准 = No Tables
当从表格布局转变到 CSS 布局之后，很多开发者开始拒绝在任何情况下使用表格，他们认为“Tables are evil”。
对我来说，没有任何一个 HTML 元素是 evil 的。它们是被一群非常聪明的人发明的，每一个元素都有它的目的和存在的意义。什么时候应该使用表格，这又涉及到了 Web 语义化的问题，如果你要在页面中显示表格数据（比如日历表、统计表等），那么，表格就是你的最佳选择。
4、Web 标准 = Divs
过度使用 div，是在刚从表格布局转变到 CSS 布局的开发者中很常见的问题，我曾经也经历过。我们经常可以看到这种说法：“div+css布局”，似乎使用了 div 就是好的，就是符合 Web 标准的。实际上有些时候，你只是简单地使用 div 代替了表格，仅此而已。你最终得到的还是复杂的、难以读懂的、层层叠叠的标记，就像以前一样，只是 div 代替了以前的 table、tr、td，并且把 CSS 文件增大了几倍而已。
你需要改变的不仅仅是在页面中充当容器的元素，而是整体的结构和理念。符合 Web 标准需要走一条很长的路，好在这条路是充满阳光的，我愿意走下去。
5、Web 标准 = No IE
我知道你很可能和我一样痛恨 IE，但是，Web 标准的观点是实现跨平台、跨浏览器的页面访问，更重要的是，大多数用户都在使用 IE。因此，我们不能抛弃 IE，尽管它不是一个符合标准的浏览器。
所以，不要在开发中忽视 IE 下的调试，因为毫无疑问会有用户在使用 IE，你迟早都必须面对它。骂完 IE 以后，还是好好想想怎么对付它吧。
从总统博客得知，今天（2008年4月9日）是第三届 CSS 裸奔节，这里是中文版介绍。
CSS 裸奔，顾名思义，就是把网页中的 CSS 移除，把页面最原始的表现呈现在访问者面前。这个活动意在推动 Web 标准，倡导使用结构良好、语义明确的 XHTML 构建网页。这样的网页，即便没有 CSS 的支持，层次结构依然清晰明了，只是欠缺美观。
从现在开始，我也开始参与 CSS 裸奔了，除了少数插件的 CSS 不方便移除之外，主体的 CSS 都移除了。网站原形毕露，看起来另有一番滋味吧。活动持续一天，明天即将恢复原状。
这些天又捣鼓了一下 blog，为了使我的首页（www.helloxudan.net）通过 W3C 的 XHTML 验证。我个人还是很注重 Web 标准的，以前验证 blog 首页的时候没有通过，虽然我不能算是一个完美主义者，但是 blog 上一直运行着有错误的代码，我觉得心里很不舒服，于是这两天抽了点时间做了一些修改，基本解决了问题。
其实绝大多数 Wordpress 主题在原始状态都是通过了 XHTML 验证的，但是我们在使用的时候会在 blog 中添加很多新的东西，比如日志、图片、各种插件以及各种 widget 等，或者喜欢 DIY 的朋友会对主题做一些小小的修改来实现自己理想中的效果。这些因素都有可能使原来通过验证的主题出现一些 XHTML 错误，我主要就是解决了这个问题。
一个符合标准的 XHTML 文档有几点需要注意，这也是从 HTML 到 XHTML 主要的改变：
- 所有的 XHTML 标签都必须有一个相应的结束标记，标签必须闭合最容易被忽略的就是那些不成对出现的标签，例如 <img />，<input /> 等，最后一定要加一个“/”来闭合标签。
- 所有标签的元素和属性的名字都必须使用小写
- 所有的XML标记都必须合理嵌套
- 所有的属性必须都用引号”"括起来
- 把所有<和&特殊符号用编码表示
XHTML 验证中的常见错误：
- required attribute X not specified：标签中缺少必须的属性。最常见的就是缺少 <img> 标签中的 alt=”…” 属性和 <script> 标签中的 type=”…” 属性。顺便发个牢骚， 阿里妈妈提供的广告代码中竟然有一行 text/javascript 没有加引号……
- end tag for X omitted, but OMITTAG NO was specified：标签没有关闭，也就是前面的第一条中提到的。
- XML Parsing Error，常见的主要有这两种错误：Opening and ending tag mismatch，标签的不合理嵌套；EntityRef: expecting ‘;’，一般都是由于在链接地址中出现了“&”字符，解决办法是把“&”替换为“&”，前面最后一条提到的。
对于中含有 flash 的页面，由于一般都是用 <embed> 或者 <object> 标签，而这两个标签并不是标准的 XHTML 标签，所以就会无法通过验证，解决的办法就是使用 SWFobject 通过 javascript 操作 flash。不过这个办法比较麻烦，我认为不适合对出现在 blog 日志中的 flash 使用，所以如果我的日志中包含有 flash 的话（主要就是视频了），是通过不了验证的，呵呵。
哦，对了，XHTML 验证的地址是：http://validator.w3.org/ ，感兴趣的朋友也可以去验证一下。如果没有通过，千万不要被那几十个甚至几百个错误给吓住了，因为很多错误都是级联产生的，当你解决了一个前面的一个错误之后，也许后面的错误也会消失很多。
由于甲方在功能与外观上的需要，我们实验室项目中的网站需要重新制作。这次我们决定放弃原来的表格布局的页面表现设计，而使用更加符合 Web 标准的 div+css 来进行设计。现在网站已经基本制作完成，下面是我第一次使用 div+css 的一些感想。
使用 div+css 设计网站最大好处就是实现了页面代码内容与表现的分离。像国内大部分网站一样，我们项目中以前的网站也是基于表格的布局设计。这种方式下的页面代码中充斥着大量的 <tr>、<tb> 标记，一层又一层的表格嵌套使页面显得非常臃肿，页面的内容和表现强耦合在一起，很影响可读性。这里所说的可读性包括两个方面，一个是指开发人员阅读代码，混乱的代码如果没有可视化编辑器的帮助将让人完全摸不着头脑，而使用 div+css 的页面则更容易理解，加强了代码的可重用性，日后的维护也简单多了；另一个是指搜索引擎对页面的读取，由于搜索引擎只读取 html 而不读 css，所以简洁的、层次结构分明的 html 能更好的帮助搜索引擎理解并抓取页面内容，反之，含有大量表格元素的 html 使得搜索引擎难以理解。
另一个好处就是减少冗余代码，提高效率，降低流量成本。使用div+css 布局的页面的代码量将会比使用表格布局的少很多，假设一个页面节省的空间是 100kb，千万不要小看这 100kb，对于一个日 pv 1000万的大型网站来说，节省的流量是非常可观的，同时可以加快页面的加载速度，改善用户体验。在网络带宽资源日益紧张的今天，虽然节省这么一点带宽和 BT、在线视频等相比微不足道，但是节省一点是一点，何乐而不为：） 还没有完呢，请继续阅读……
