第一章Web标准不是神话.docVIP

Web标准设计 STYLEREF 标题 1 第一章 Web标准不是神话 PAGE PAGE 18 PAGE PAGE 19 第一章 Web标准不是神话 一扇经常开启的门的铰链不需要润滑油。 一条湍急的河流不会变得污浊。 无论是声音还是想法都不可能在真空中传播。 Web标准如果不用就会腐朽。 这世界真奇妙！ 1.1 理解Web标准 Web标准应该是2005～2008年流行的IT话题之一，各大门户网站、大型商业网站的重构，让人看到了Web标准的好处，网页开发人员纷纷开始学习她。 每当一个新事物为人所接受前总会有些误解，也有人会误解Web标准： DIV + CSS代替了XHTML + CSS，成为Web标准的代言人； 因为以前滥用表格，所以现在什么都不用表格； 不知道怎样正确使用JavaScript，便有了Web标准不能使用JavaScript的谎言； AJAX技术被炒热，让网站开发人员忘记了网页最基本的需要； Web 2.0的风暴，带着Web标准的面具，吞噬着不了解真相的人们。 Web标准到底是什么呢？让我们一步一步来了解吧！ 1.1.1 Web标准是什么 Web标准，英文为Web Standards。Standards是复数的，它是一些规范的集合，是由W3C和其他的标准化组织共同制定的，用它来创建和解释网页的基本内容，其中主要成员有（图1.1）： 图1.1 结构化和语义化的语言 超文本标记语言（HTML）4.01 可扩展超文本标记语言（XHTML）1.0 可扩展标记语言（XML）1.0 表现层语言 层叠式样式表（CSS）level 1 CSS level 2 revision 1 CSS level 3（候选推荐标准或更理想的） 对象模型 文档对象模型（DOM）level 1 DOM Level 2（HTML，Core，Events，Traversal） DOM Level 3（Core） 脚本语言 ECMAScript 262（JavaScript 的标准化版本） 除了上面的主要部分还应考虑这些： 对 HTML 4 和 XHTML 1.0 的扩展与更新 微格式（Microformats） Web 应用（Web Applications）1.0（即“HTML 5”） XHTML 1.1 XHTML 2.0 其他的标记语言 数学标记语言（MathML）1.01 MathML 2.0 其他新兴的标准，例如为电视设备、手持设备上的浏览器而设立的标准 除去教条般的标准还有： 关于网站亲和力 网站无障碍访问 网站内容可用性指南 WCAG 1.0 WCAG 2.0 你可以随便打开一个网页或者回想一下你访问过的网页，传统的网站前端展现方式把结构和表现混合在一起，而应用Web标准进行设计的方式把结构和表现分离开，但是不管使用什么方式，它们表面看上去都差不多。 单单的理论并不适合理解，我特别挑选了一个例子（图1.2）： 它看起来似乎比你平时看到的网页简单，或者说更像一篇文章，你可以想象一下你应该怎样去制作它。在顺便阅读完这一小段历史后，我们开始来分析它的构成。 图1.2 语义的结构 我把刚才的例子删除掉CSS部分，如果它没有了表现类语言（CSS）时，它是由浏览器的默认表现来渲染的，就像图1.3这样显示： 图1.3 HTML本身就是结构化的语言，就像在例子中看到的表示标题的h1、表示特定信息（如地址、签名、作者）的address、表示内容的p等等，外观并不是最重要的，网页的表现可以不用仅仅只依赖HTML来完成，我们不用再像以前一样，把装饰的图片、字体的大小、页面的颜色甚至布局的代码都堆在HTML里面，对于HTML，我们更多的是要考虑结构和语义。 或者你正在思考着，为什么要这样做呢？ 每当讨论Web标准时，结构和表现分离的重要性总是被提及，刚开始理解结构和表现的分离可能有点困难，特别是在你还不习惯于思考文档的语义和结构的时候，然而，理解这点是很重要的，因为，当结构和表现分离后，用CSS文档来控制表现就是一件很容易的事了。例如有一天你发现你的网站的字体太小，你只要简单地修改样式表中的一个定义就可以改变整个网站字体的大小。 华丽的表现 这个例子所用的CSS并不复杂，可能它远远达不到你想要的效果，选择它做例子只是想让你明白，表现不应该依赖结构。 不知道你有没听说过CSS Zen Garden（CSS禅意花园），它可以让你认识到CSS的强大力量，可以让你看到各式各样的设计，然而，它们使用着相同的HTML，图1.4是最初的设计跟最近的一份优秀的设计： 图1.4 如果你还在怀疑事实的真实性时，你应该打开网站（/）去验证它。如果你不了解CSS是什么，你可以在第3章 CSS：网页美容师中找到详细的答案。 交互的行为 你