基于Web标准的网页设计

1 引言

Web标准是W3C组织推荐的网页设计与开发的一系列标准的集合。W3C是“World wide Web Consortium”的缩写，即万维组织，它是一个专注于“领导和发展Web技术 ”的国际工业行业协会，由万维网发明者Time Berners-Lee领导，成立于1994年，先后发布了HTML4.0、XML1.0、CSS1.0、CSS2.0、XHTML1.0、DOM1.0等一系列标准。W3C创建标准的初衷是改变二十世纪90年代Web领域中的浏览器生产厂商间存在的混乱的不兼容现象，因为在当时的两大浏览器霸主——微软和网景都在不停地开发各自的私有扩展，为某种浏览器编写的HTML代码极少能够在另一种浏览器中正常显示，因此Web开发者就不得不为同一站点开发多个版本的HTML代码，这就使得网站开发和维护的费用大大增加，也为Web开发人员增加了许多额外的工作量。为此W3C从二十世纪90年代中期发布标准化HTML开始，陆续发布了一系列规范，这一系列规范约束了发送给浏览器的HTML代码，旨在以一种智能、易用并便于实现的方式解决浏览器之间的兼容问题。

2 Web标准

Web标准不是一个标准，而是一系列标准。在Web标准里，网页主要由结构、表现和行为三部分组成，对应的标准也分为三部分，即结构化标准语言主要包括HTML、XHTML和XML，表现标准语言主要包括CSS，行为标准语言主要包括对象模型如W3C、DOM和ECMAScript等，其中ECMAScript是由ECMA（European Computer Manufactures Association，欧洲计算机制造联合会）制定的标准。

2.1 HTML4.0

HyperText Markup Language（HTML，超文本标识语言）广泛用于现在的网页，使用HTML目的是为文档增加结构信息，例如<title>表示标题，<p>表示段落，浏览器可以解析这些文档的结构，并用相应的表现形式表现出来。HTML最初只是用来交流文本信息的，显示出来就是简单的文本，没有多少表示显示格式的标记。但在HTML标准经历了2.0、3.2、4.0等重要版本后它已经变得非常庞大，完全背离了HTML最初设计时主要用来表义的初衷，其中含有大量显示格式的标记和属性。

2.2 XML1.0

XML是Extensible Markup Language（可扩展标识语言）的简写，其设计思想来自古老的SGML（其实HTML的设计思想也是来自于SGML）。SGML是IBM创造的一个用于出版业的文档格式标准，后来被ISO采纳作为国际标准（ISO8879）。SGML把文档内容与文档格式完全分离开，使得内容提供者的内容与排版人员的工作可以相互独立。W3C参考SGML设计了新一代的标记语言XML，它可以建造其它任意种类的标记语言。XML类似HTML也是标识语言，不同之处是HTML有固定的标签，而XML允许你自己定义自己的标签。XML文档目前还不能直接用浏览器显示，页面展现依然采用HTML或者XHTML，XML现在大多用于服务器与服务器（系统与系统）之间的数据交换。

2.3 XHML1.0

XHML实际上就量将HTML根据XML规范重新定义一遍。它的标签与HTML4.0一致，而格式严格遵循XML规范。因此，虽然XHTML与HTML在浏览器中一栏显示，但如果你要其转换成PDF文件，那么XHTML会容易的多。XHTML有三种DTD定义：严格的（strict）、过渡的（Transitional）、框架的（Frameset）。DTD是Document Type Definition 文档类型定义的缩写，它写在XHTML文件的最开始，告诉浏览器这个文档符合什么规范，用什么规范来解析。

2.4 CSS2.0

CSS是Cascading Style Sheets层叠样式表的缩写。通过CSS可以控制HTML或者XML标签的表现形式。1997年W3C颁布HTML4.0标准的同时也发布了有关CSS的第一个标准CSS1.0，这是对HTML3.2以前版本语法中的一次重大革新，使用CSS可以简化HTML中各种繁琐的标记，使得各个标记的属性更具有一般性和能用性，使得HTML文档具有良好的结构，实现内容和表现相分离。目前CSS的最新版本是CSS3.0，但推荐使用的标准是CSS2.0.

2.5 DOM1.0

DOM是Document Object Model 文档对象模型的缩写，它是W3C制定的标准，用于对结构化文档建立对象模型，从而使得用户可以通过程序语言来控制其内容结构，给脚本语言无限发挥的能力，使脚本语言很容易访问到整个文档的结构、内容和表现。

2.6 ECMAscript

ECMAscript是由ECMA发布的标准，它是基于Netscape JavaScript 的一种标准脚本语言，是一种基于对象的语言，通过DOM可以操作网页上的任何对象，可以增加、删除、移动或者改变对象，使得网页的交互性大大提高。目前推荐遵循的是ECMAscript262标准。

3 使用Web标准设计网页的优势

采用Web标准设计网站，对于网站的经营者和使用者是双赢的。对于前者，由于使用了Web标准，页面的代码量大大减少，节省了带宽，也就意味着成本的降低。此外，Web标准的应用使得网站的维护更加容易、网站改版更加方便。对于后者，使用Web标准使得网页的下载速度与网页的显示速度更快，用户还可以订制自己喜欢的表现界面，获得更加良好的用户体验。利用Web标准设计的网站能被更多的设备所访问，如屏幕阅读机、手机等，实现了信息跨平台的可用性，为用户提供了多元化的访问方式。

4 使用Web标准设计网页的基本方法

4.1使用CSS实现内容与表现分离

内容是指页面实际要传递的信息，包括数据、文档、图片或者动画等。表现指内容呈现的样式，例如字体、文本颜色、修饰等，所有用以改变内容外观的部分，都称之为“表现”。在网页设计时，应将内容放到各种结构中去，如标题、段落等。这些结构可以是XHTML的标记如<h1>、<p>等。这些结构可以是XHTML的标记如<h1>、<p>等，也可以是XML标记。

传统的HTML代码中，为了实现内容的表现往往通过大量使用标签属性物方法来解决，如用<p><font color=”red” size=”12” face=”宋体”>Web标准</font></p>,将段落中的文本设为红色，12点、宋体，页面内容和表现混杂在一起，代码量大且不利于页面改版，网站开发和维护效率低。为此Web标准推荐使用CSS来弥补传统HTML功能上的不足，通过CSS控制页面内任意对象显示样式。在网页设计时可以单独定义外部CSS文件，网页通过连接该CSS文件获得文件中定义的样式，再对页面元素应用这些样式，实现样式控制。

4.2 正确、合理地使用HTML标签

使用CSS进行网页设计的前提是HTML文档具有良好的结构，也就是说CSS要应用于结构化的HTML文档，所谓结构化的HTML主要体现在对HTML标签的正确、合理的使用，即选择HTML标签时要根据其语义来选择，而不是根据其样式来选择。如对于页面中的一级标题我们就使用<h1>标签来表示它，之所以使用<h1>标签，并不是考虑到它会以什么样式来呈现标题，而是因为<h1>标签的语义就是一级标题。也就是说不能为了得到更大的显示字体而将页面的下方内容放入<h1>标签内，这是对标签的误用。只有真正掌握了每个标签的语义，才能正确地使用标签，写出的HTMl代码才会具有良好的结构。

4.3 采用正确的结构化标记

4.3.1 为页面添加正确的DOCTYPE 添加DOCTYPE主要用来说明XHTML或者HTML是什么版本，浏览器根据你的DOCTYPE定义的DTD（文档类型定义）来解释页面代码。XHTML1.0提供了过渡型（Transition）、严格型（Striet）、框架型（Frameset）三种选择。过渡型在当前环境中更容易被接受，其格式如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">。

4.3.2 设定一个命名空间（Namespace）直接在DOCTYPE声明后面添加如下代码：<html xmlns="http://www.w3.org/1999/xhtml">。

4.3.3 声明编码语言，为了代码被浏览器正确解释和通过标识校验，所有的XHTML文档都必须声明它们所使用的编码语言。代码如下：

这里声明的编码语言是简体中文GB2312。

4.3.4 用小写字母书写所有的标签，XHTML是大小写有区别的，所有的XHTML元素和属性的名字都必须使用小写。

4.3.5 为图片添加alt属性，alt属性指定了当图片不能显示的时候就显示替换文本。只有添加了alt属性，代码才会被W3C正确性校验通过。

4.3.6 给所有属性值加引号，在HTML中，你可以不需要给属性值加引号，但是在XHMTL中，它们必须被加引号。

4.3.7 关闭所有的标签，在XHMTL中，不能有没有关闭的空元素存在于代码中，单标签也必须关闭，<br/>、<img/>。

4.4 采用DIV+CSS的方法进行页面布局

传统的HTML代码中，页面布局是通过表格来实现的。设计时为了实现页面布局效果，往往会使用大量的表格或嵌套表格，由此，一个HTML文档的内部结构将变得非常混乱，大量为了控制页面元素位置而设置的表格充斥着文档，页面字节数直线攀升，同时页面内容和表现也混杂在一起。Web标准的出现将让<table>标签回归其本身的语义而不再将其用于页面布局，页面布局使用DIV+CSS的方法来实现。

5 使用Web标准设计网页的误区

5.1 DIV+CSS就是Web标准

DIV+CSS只是一种技术手段，并不能涵盖Web标准。Web标准不仅仅是HTML向XHTML的转换，更重要的是信息结构清晰、内容与表现相分离，而DIV+CSS技术能较好的实现这种思想。因此我们看到的多数符合标准的页面都是采用DIV+CSS制作。

5.2 Web标准就是不使用表格

Web标准并不是不允许用<table>标签，<table>标签也是XHTML1.0中的标准标签，我们只是提倡用DIV+CSS布局来替代传统的<table>布局。原因是用<table>布局将表现和内容混杂在一起，结构不清晰、内容不完整，不利于内容的重用。而且从语义上讲，W3C制定<table>标签时候只是用它来做表格结构定义的，文档中如果有表格，那么就应该用<table>，而排版、定位这些表现的功能应该由CSS来实现。

5.3 通过验证是设计网页的最终目的

为了推广和规范Web标准的应用，W3C在其官方网站中提供了代码校验，通过校验可以判定页面是否符合Web标准。XHTML代码的校验网址是http://validator.w3.org/ ，CSS代码的校验网址是http://jigsaw.w3.org/css-validator/ 。我们必须认识到，W3C校验仅仅是帮助网页设计者检查XHTML代码的书写是否规范，CSS的属性是否都在CSS2的规范内。代码的标准化仅仅是第一步，不是说通过校验网页就是标准化了。让网页具有良好的结构、更快的浏览速度、更友好的界面及对多种设备的支持才是网页设计的最终目的。