许许如生

这些天又捣鼓了一下 blog，为了使我的首页（www.helloxudan.net）通过 W3C 的 XHTML 验证。我个人还是很注重 Web 标准的，以前验证 blog 首页的时候没有通过，虽然我不能算是一个完美主义者，但是 blog 上一直运行着有错误的代码，我觉得心里很不舒服，于是这两天抽了点时间做了一些修改，基本解决了问题。

其实绝大多数 Wordpress 主题在原始状态都是通过了 XHTML 验证的，但是我们在使用的时候会在 blog 中添加很多新的东西，比如日志、图片、各种插件以及各种 widget 等，或者喜欢 DIY 的朋友会对主题做一些小小的修改来实现自己理想中的效果。这些因素都有可能使原来通过验证的主题出现一些 XHTML 错误，我主要就是解决了这个问题。

一个符合标准的 XHTML 文档有几点需要注意，这也是从 HTML 到 XHTML 主要的改变：

1. 所有的 XHTML 标签都必须有一个相应的结束标记，标签必须闭合最容易被忽略的就是那些不成对出现的标签，例如 <img />，<input /> 等，最后一定要加一个“/”来闭合标签。
2. 所有标签的元素和属性的名字都必须使用小写
3. 所有的XML标记都必须合理嵌套
4. 所有的属性必须都用引号”"括起来
5. 把所有<和&特殊符号用编码表示

XHTML 验证中的常见错误：

1. required attribute X not specified：标签中缺少必须的属性。最常见的就是缺少 <img> 标签中的 alt=”…” 属性和 <script> 标签中的 type=”…” 属性。顺便发个牢骚， 阿里妈妈提供的广告代码中竟然有一行 text/javascript 没有加引号……
2. end tag for X omitted, but OMITTAG NO was specified：标签没有关闭，也就是前面的第一条中提到的。
3. XML Parsing Error，常见的主要有这两种错误：Opening and ending tag mismatch，标签的不合理嵌套；EntityRef: expecting ‘;’，一般都是由于在链接地址中出现了“&”字符，解决办法是把“&”替换为“&amp;”，前面最后一条提到的。

对于中含有 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、在线视频等相比微不足道，但是节省一点是一点，何乐而不为：） 还没有完呢，请继续阅读……