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

作者：张克军 用户体验部

在掌握了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