这些天又捣鼓了一下 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=”…” 属性。
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/ ，感兴趣的朋友也可以去验证一下。如果没有通过，千万不要被那几十个甚至几百个错误给吓住了，因为很多错误都是级联产生的，当你解决了一个前面的一个错误之后，也许后面的错误也会消失很多。

一位同学今天找我帮他做一个页面，静态的 HTML 页面，要求在页面中放入多个 Flash 小游戏的链接和一个游戏区域，通过 JavaScript 操作 flash，点击小游戏的链接之后在游戏区域中显示所选的 flash，无需刷新页面实现 flash 的更换。

熟悉 JavaScript 的朋友都知道，用这种方法操作图片是非常简单的，只需要通过 DOM 修改 img 标签的 src 属性即可实现图片的更换。而我们常见的页面中的 flash 都是使用 object、embed 等标签，这些标签并不是标准的 XHTML 标签，所以不能通过 DOM 来操作。

这个问题把我难住了，于是马上到 Google 寻找答案，结果一不小心来到了 aw 的这篇文章：SWFObject：基于Javascript的Flash媒体版本检测与嵌入模块。文章中详细的介绍了 SWFObject，使用它可以方便地在 HTML 中使用 JavaScript 插入 flash（.swf文件），方法如下：

1、在 HTML 中包含 swfobject.js 文件，并为 swf 文件预留一个 HTML 结点（这个 HTML 结点内的所有内容都会在客户端被 flash 资源替换，当客户端没有安装 flash播放器的时候，这些内容会显示出来。这一特色在 SEO 以及对用户体验方面非常有必要）。

2、在 JavaScript 中创建一个新的 SWFObject 实例，设置参数，写入 HTML 中预留的节点中。

这6个参数的意义：

• swf - SWF 文件路径
• id - 您为这个 SWF 文件分配的 id 值，它将用于给 embed 与 object 标签设定 name 属性，以便于可以支持 swliveconnect 的功能，如动态传入变量
• width - 宽度
• height - 高度
• version - FlashPlayer 需要的版本号，它可以详细到 ‘主版本号.小版本号.细节’，例如：”6.0.65″。一般地，我们只需传入主版本即可，例如：”6″。
• background-color - Flash 资源的背景色，16进制格式

（以上代码和说明均摘自 aw 的原文，swfobject.js 的下载地址也请参看原文。原文中还有很多细节的东西，由于我基本不懂 flash，而且前面的这些对我已经够用了，所以就不再引用。感兴趣的朋友可以查看原文，感谢 aw 的文章。）

这样就好了，我只需要在链接中把 flash 的文件路径传递给 JavaScript 即可，这样就可以在一个页面中切换多个 flash 的显示，具体的代码很简单，就不再写了。

鼠标悬停下拉菜单在网页中很常见，一般的下拉菜单都是通过 JavaScript 对菜单的显示和隐藏进行控制，其实用纯粹的 CSS 也可以实现。用 CSS 的几点好处是，不需要考虑客户端浏览器是否禁用了 JS，而且用 CSS 实现下拉菜单效率比 JS 要高，还可以方便地制定样式和定位。我查阅了一些资料，用纯粹的 CSS 实现了下拉菜单，并且支持 IE6，分享给需要的朋友。

CSS 下拉菜单演示地址

首先写出 HTML 代码如下：

还没有完呢，请继续阅读……

由于甲方在功能与外观上的需要，我们实验室项目中的网站需要重新制作。这次我们决定放弃原来的表格布局的页面表现设计，而使用更加符合 Web 标准的 div+css 来进行设计。现在网站已经基本制作完成，下面是我第一次使用 div+css 的一些感想。

使用 div+css 设计网站最大好处就是实现了页面代码内容与表现的分离。像国内大部分网站一样，我们项目中以前的网站也是基于表格的布局设计。这种方式下的页面代码中充斥着大量的 <tr>、<tb> 标记，一层又一层的表格嵌套使页面显得非常臃肿，页面的内容和表现强耦合在一起，很影响可读性。这里所说的可读性包括两个方面，一个是指开发人员阅读代码，混乱的代码如果没有可视化编辑器的帮助将让人完全摸不着头脑，而使用 div+css 的页面则更容易理解，加强了代码的可重用性，日后的维护也简单多了；另一个是指搜索引擎对页面的读取，由于搜索引擎只读取 html 而不读 css，所以简洁的、层次结构分明的 html 能更好的帮助搜索引擎理解并抓取页面内容，反之，含有大量表格元素的 html 使得搜索引擎难以理解。

另一个好处就是减少冗余代码，提高效率，降低流量成本。使用div+css 布局的页面的代码量将会比使用表格布局的少很多，假设一个页面节省的空间是 100kb，千万不要小看这 100kb，对于一个日 pv 1000万的大型网站来说，节省的流量是非常可观的，同时可以加快页面的加载速度，改善用户体验。在网络带宽资源日益紧张的今天，虽然节省这么一点带宽和 BT、在线视频等相比微不足道，但是节省一点是一点，何乐而不为：） 还没有完呢，请继续阅读……