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

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

作者：张克军 用户体验部

传统的网站前端展现应该说是没有层次的，前端工程师直接将服务器端脚本和HTML近乎毫无规律地混合起来，HTML构建的结构很容易被破坏，直接影 响前端的展现和日后的维护。直到CSS的出现后才略有改观，目前CSS正式推出的有两个版本CSS1和CSS2， CSS1是1996年制定的，CSS2是1998年制定，CSS3正在制订中尚未推出。由于CSS是滞后于HTML出现的，因此早期的浏览器对CSS的支持不足，导致很多网站制作同仁过度依赖HTML控制页面的视觉表现。

实际上，HTML的本意并不是用来控制页面外观的。而随着浏览器的升级换代，现在的浏览器对CSS的支持越来越全面（虽然有的还不是很标准），是时候让HTML干它应该干的事了：那就是描述文档的结构，而不是文档的表现。

在万维网联盟（W3C）的推动下，未来所有的浏览器都将全面支持由W3C制 订的Web标准。顺应这种趋势，微软将在今年正式推出的IE7，目前beta3版已经发布。这将是一款接近Web标准的浏览器。实际上IE5.0对 CSS1的支持不是很好的，但不支持CSS2，到了IE6却变成一款非常糟糕的浏览器，Bug重重，漏洞百出，对CSS的解释含糊不清。这也是近些年 Firefox、Safari这样的标准浏览器崛起的原因。如果说在以前Web标准还不健全或浏览器厂商重视不够的情况下，网站前端开发可以不用严格遵守 什么标准。如果说在以前Web标准还不健全或浏览器厂商重视不够的情况下，网站前端开发可以不用严格遵守什么标准。那么在今天，当Web标准已经成为业界 标准，不遵守标准的Web产品在不同浏览器下的表现将是不可预期的（即便在一向“宽容”的IE下），这样的后果轻则影响产品，重则损害公司品牌形象。

“从HTML到XHTML”不仅仅是所使用的语言的转变，更多的是意味着前端开发模式的转变，向着更层次化，更标准化，更适应现代Web开发的方向转变。雅虎用户体验部的Web开发组正是专门负责这方面工作的，我们在雅虎的产品设计中也在逐步转向符合标准的设计模式。

那么到底有哪些Web标准呢？由W3C和其他一些标准化组织共同制订的Web标准如下图所示：



从图中我们看到，Web标准分为结构化语言、表现类语言、对象模型和脚本语言四个大类。这意味着写页面代码应该按照什么规范去写。在其中的“结构化语言”分类中，可以看到替代HTML的将是XHTML，那么什么是XHTML呢？？
- XHTML (eXtensible HyperText Markup Language)－可扩展的超文本标记语言
- XHTML的目标是替代HTML
- XHTML几乎和HTML 4.01一样
- XHTML是更严格和更干净的HTML
- XHTML是向XML过渡的语言
- XHTML是W3C推荐的（这代表着浏览器发展的方向）

目前雅虎的主要产品都遵照XHTML 1.0 Transitional标准，网页搜索产品是遵照HTML4.01 Strict 标准。雅虎将在近期内逐步放弃旧的HTML标准。

在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上了，所以页面显示的速度就会更快。

在掌握了XHTML的基本知识后，要理解语义化的概念。在流程化的产品前端开发中，模板是传递最频繁的，因此，模板的质量是影响前端开发的重要因素。Web标准是衡量模板质量的指标之一，另一方面语义化的XHTML也是提高效率的有效方法。

语义化的XHTML代码不仅对人是友好的。对搜索引擎也是友好的。使用语义化的XHTML可以很快从代码上了解一个页面的结构，而不是从表现上了解一个页面的结构。

语义化的HTML主要包括语义化的标签和语义化的命名。
标题（Headline）：<h1>…</h1>
段落（paragraph）：用<p>标记段落，而不用<br />来生成段落间的空白
列表（List）：在XHTML中有三种列表：有序列表、无序列表、自定义列表。
引用（quote）：<blockquote>…</blockquote>
强调：<strong>…</strong>
表格（Table）：仅用来表现数据表格，如排行榜。



Table在XHTML中并不是用来布局的，在XHTML中用“盒模型”来进行布局。
如何理解“盒模型”？所谓“盒子”就是具有block属性的元素，如div。当然也可以通过CSS定义让一些元素的具备hasLayout属性。单一的“盒模型”如图所示：



页面是由很多“盒子”组成的。
我们正在开发本地版的Page Grids。这样就可以快速的实现“盒”布局。（Yahoo! UI Library: Grids CSS）

总结一下XHTML带给Web产品的变化：
1、XHTML是单纯的结构描述语言，浏览器解释起来更快。
2、对SEO有利。
3、主要的Web产品都不是一次性的产品，必然伴随着后期反复的修改和内容维护。干净的XHTML代码，让后期的工作变得更加轻松，降低了相当可观的后期维护成本。
所以，高质量的XHTML，是Web产品开发流程中高效的重要基础。
我们一直追求的就是：A Nice And Clean Markup!
一个干净的页面代码，对于其他Web Dev是友好的
一个干净的页面代码，对于编辑是友好的
一个干净的页面代码，对于产品经理是友好的
一个干净的页面代码，对于工程师是友好的
一个干净的页面代码，对于机器是友好的
以一个常用的不间断滚动的幻灯为例：

改善前的代码，冗长而不易维护：



改善后的代码，干净很多了，对内容维护人员是友好的：



4、Web产品随着运营的需求是多变的，高质量的XHTML能够快速的响应这些变化。如果对一个模块进行小小的改动，都会引发出很多问题或是投入大量的时间，这说明是页面代码的粗糙和垃圾代码太多。
雅虎在很多产品中应用的幻灯效果，实际都是基于一个标准的幻灯组件，用CSS控制不同的外观，这样在产品中可以很快速的加入这些效果：





雅虎产品前端是以模块为最小单位，这些模块资源可以灵活的应用在不同场合，这样就可以根据运营要求快速组合出新页面。例如，雅虎图片搜索中的分类列表模 块，其XHTML部分都是一样的，也就是说同样一段代码复制到另一个页面中，在另一个页面的CSS控制下，完全变成另一个样子。



雅虎产品正在逐步的转向Web标准，全面采用Web标准之后，产品开发的各个环节都将能更专注于自己的业务环节，产品人员只需要专注于思考产品，工程师会专注于开发，UED人员会专注于用户体验，专注会给雅虎的产品带来更好的用户体验。

权威网址：
W3C – World Wide Web Consortium 万维网联盟
http://www.w3.org
Web Standard Project(WaSP) Web标准组织。劝说浏览器厂商支持标准。
http://www.webstandards.org
A List Apart 是Jeffrey Zeldman（http://www.zeldman.com）和Brian Platz在1998年创办的电子邮件列表，1999年后是在线志杂的形式。
http://www.alistpart.com
ECMA欧洲计算机制业者协会
http://www.ecma.ch/
CSS(CSS1/CSS2)– Cascading Style Sheet
http://www.w3.org/Style/CSS
http://www.w3.org/TR/REC-CSS1/、http://www.w3.org/TR/REC-CSS2/
W3C DOM规范
DOM – Document Object Model 允许“程序和脚本动态地的访问和更新文档的内容、结构和样式。”
http://www.w3.org/DOM