从HTML到XHTML--使用Web标准建设网站(二)

作者：张克军 用户体验部

在Web标准的理念下，雅虎前端开发模式将会发生改变。通过下图可以看到前端将被分为四个层次：

这个层次模型对应着前端工程师将数据逻辑整合到页面模板中的步骤：服务器端行为（获取数据）、提取内容（纯粹的内容）、添加标记（原始风格）、添加表现控制（设计后风格）。
其中“添加标记”部分就是用XHTML构建文档的结构，“添加表现控制”就是在结构的基础上用CSS将表现效果添加进来。这样产品的内容、结构、表现就相互脱离了，编辑维护静态内容，前端工程师提供动态内容，网站开发工程师实现结构和表现，同步开发，相互配合，互不干扰。

从HTML到XHTML，网站前端开发模式发生了很大的变化，也有一定的学习曲线，从事网站制作的朋友们普遍对Web标准和XHTML存在这样一些误解，下面做一些澄清：
1．不同的浏览器很难保证一致的效果
实际上用CSS完全控制页面的表现，加上合理利用XHTML构建页面结构，完全可以保证在不同的浏览器下的表现接近一致。虽然不同内核的浏览器对CSS解释不尽相同，但是仍然可以用一些Hack的手段弥补这些不同。

2．太难了！不容易维护
之所以认为“难”，是因为它打破了传统的网页制作习惯和思路，需要从头学习。其实当从观念上改变了对前端展现的理解后，包括表现和结构分离、语义化的HTML，就会认识到实际并没有想象的那么难，反而是简化了文档的结构，提高了维护的效率和变化的灵活性。

3．没有“所见即所得”方便
“所见即所得”是一直以来使用可视化的网页制作软件养成的一种习惯。当我们在“视图”上拖来拖去、删删减减的时候，文档上冗余的代码就会越来越多，结构越来越复杂，页面越来越臃肿，当这样反复的修改增多后，有一天会发现“所见不是所得”，页面的维护也会慢慢变成一种负担。

4．制作期长，故意复杂化
在表现和结构分离的思想下，CSS扮演的角色就不是以前控制链接颜色或是字体颜色了。这确实对页面制作人员提出了更高的专业化要求。但是当清楚这样做的意义，也就是本文最终想探讨的XHTML的价值后，前期的适量投入是完全有必要的。

5．别人看不懂，改起来太麻烦
对前端展现的认识如果还是停留在传统的观念上，就很难理解表现和结构分离的目的。Web Developer是专业的页面制作人员，深入理解XHTML和CSS是自己的专业。而对于页面的使用者（产品经理、工程师、编辑等）来说则大可不必知道为什么会这样，只要知道怎么去维护和调用就可以了。

6．Table是用来布局的
我记得我上学的时候，在上网页制作课的时候，老师专门用一节课讲Table布局，那已经是7、8年前的事了，看来对Table的错误理解由来已久。在现在前端展现的应用上，Table仅仅是用来表现表格数据用的，如积分表。

要撑握XHTML，要先掌握它和HTML之间的几点不同：
1．XHTML元素必须是完全嵌套的，HTML则并不严格，不嵌套的元素也能被“容错”，但是问题不暴露并不一定是好事，会为以后埋下隐患
2．XHTML文档必须是良好格式化(well-formed)
3．标签名必须是小写的
4．所有的XHTML元素必须是闭合的：
以下是几个标签的举例：
<img src="..." />
<input name="p" type="text" />
<link rel="stylesheet" type="text/css" href="URL" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<br />

以下是几个属性的举例：
compact="compact"
checked="checked"
multiple="multiple"
noresize="noresize"

5．XHTML不使用表现类的元素
表现类标签<font>、<b>、<i>、<big>、<small>、<hr>、<center>
表现类属性Width、Height、align、valign、bgColor、background、border

6．DOCTYPE声明是不可缺少的。
声明DOCTYPE必须放在文档的第一行，当浏览器检测到DOCTYPE后就会转换到标准模式，对HTML和CSS按照标准的方式解释，不必再把时间用在弥补、解释不规范的HTML上了，所以页面显示的速度就会更快。