1.1 了解Web标准

Web标准由一系列的规范组成，由于Web设计越来越趋向于整体与结构化，对于网页设计制作来说，理解Web标准首先要理解结构和表现分离的意义。刚开始的时候理解结构和表现的不同之处可能很困难，特别是不习惯思考文档的语义结构。但是理解这一点是很重要的，因为当结构和表现分离后，使用CSS样式来控制网页表现就是一件很容易的事了。

1.1.1 W3C组织

W3C是万维网联盟（World Wide Web Consortium）的英文简写，这是一个非营利组织。万维网联盟创建于1994年，是国际上最著名的标准化组织之一，主要致力于实现Web技术的标准化。

为了解决Web应用中由于平台、技术和开发者不同所带来的不兼容问题，保障Web信息的顺利和完整流通，W3C制定了一系列标准，并负责督促Web应用开发者和内容提供者遵循这些标准。标准的内容包括使用语言的规范、开发中使用的导则和解释引擎的行为等。W3C也制定了包括HTML5和CSS3等众多影响深远的标准规范，有效促进了Web技术的互相兼容，对互联网技术的发展和应用起到了基础性和根本性的支撑作用。

1.1.2 Web标准的组成

Web标准并不是强制性的，它只是W3C提出的一个建议性的文档。Web标准不是某一个标准，而是一系列标准的集合。这些标准大部分是由W3C起草和发布，也有一些是由其他标准组织制定的标准，例如ECMA （European Computer Manufacturers Association，欧洲计算机制造联合会）的ECMAScript标准。

网页主要由3个部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。与之对应的标准分为以下3个方面。

● 结构化标准语言，主要包括HTML（HyperText Markup Language，超文本标记语言）和XML（Extensible Markup Language，可扩展标置语言）；

● 表现标准语言，主要包括CSS（Cascading Style Sheets，层叠样式表）；

● 行为标准，主要包括对象模型（如W3C DOM、ECMAScript等）。

1.1.3 什么是HTML

HTML是为了显示网页浏览器中的信息而设计的一种标记语言。HTML文档最常用的扩展名为.html，但是有些旧操作系统限制扩展名最多为3个字符，所以.htm扩展名也被允许使用。

HTML本质上与Word是一样的，都是用于编辑文档，它采用不同的标签来表达不同的意义，如下面的代码。

<h1>标签表示大标题，<h2>标签表示二级标题，<p>标签表示段落内容。多数完整的HTML标签由开头的起始标签和结尾的闭合标签组成，闭合标签需要在内部加上“/”符号，如上面代码中的<p>…</p>。

提示

虽然大部分的标签是成对出现的，但也有一些标签是单独存在的，这些单独存在的标签称为空标签，这类标签只有起始标签而没有闭合标签，如<img>标签、<br>标签等。

1.1.4 什么是CSS样式

在HTML中，虽然<b>、<u>、<i>和<p>等标签可以控制文本或图像等内容的显示效果，但这些标签的功能非常有限，而且对有些特定的网站需求，用这些标签是不能完成的，所以需要引入CSS样式。

CSS是一种用于为HTML等结构化文档添加样式的标记语言。通俗来讲，CSS完成的工作与在Word里为文档修改样式是一样的，如在Word中可以指定大标题的字号、字体、上下间距、对齐方式，对应到CSS样式就是修改HTML中<h1>标签的样式。

1.1.5 HTML+CSS之最佳拍档

在HTML页面中引用CSS样式，其目的是将“网页结构代码”和“网页格式风格代码”分离开，从而使设计者可以对网页的布局进行更多控制。利用CSS样式可以让站点上的所有网页都指向某个CSS文件，设计者只需要修改CSS样式中的代码，整个网页上对应的样式都会随之发生改变。

CSS样式是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面，可以将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则存放在另一个文件中。将内容与表现形式分离，不仅可以使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。

1.1.6 Web标准的发展趋势

在相当长的一段时间内，Web前端开发的三大技术HTML、CSS、JavaScript仍然会是主要的技术基础。虽然整体基础保持稳定并向上兼容，但Web技术仍然在不断发展以适应人们的需要，以下根据个人的经验总结了几条Web标准的发展趋势。

1.去Adobe化

从过去到现在，Web前端开发除了三大基础技术外，图片和Flash动画也是构造精美页面和内嵌视频所必备的，Adobe公司开发了一系列强大的图片和Flash动画制作软件，来帮助设计师完成这些工作。但是在网页中使用大量图片和动画，一方面会增大带宽压力，降低网站的访问速度；另一方面Flash动画等的运行必须依赖浏览插件，这会消耗大量系统资源。

上述两个方面极大影响网站的用户体验，故让Web技术本身取代过去使用Adobe软件才能完成的工作就成为Web发展的趋势之一。例如，可以使用CSS3来实现渐变背景颜色、按钮的圆角效果、元素的阴影，甚至可以制作出简单的动画效果。

2.基础功能集成

更多的基础功能被集成到HTML5和CSS3中，开发者无须不断地重复实现一些基础功能，如HTML5新增了<video>、<audio>等多媒体标签，可以直接在网页中嵌入视频或音频等多媒体元素，而无需任何插件；对邮件、日期选择表单的支持，无须再像过去一样编写JavaScript脚本代码来实现它们。

3.客户端执行更多的逻辑和渲染任务

相对于浏览器来说，服务器有更加强大的计算能力，因此往往将所有的逻辑放在服务器端执行，每次执行都需要网络I/O并重新刷新页面。但是随着个人电脑性能的不断提升和浏览器引擎的不断发展，在客户端执行更多的逻辑计算和画面渲染成为可能，这有两方面好处，一方面降低服务器和带宽的压力，另一方面极大提高了用户体验。

4.适应移动设备的发展

过去台式电脑几乎是唯一的Web浏览终端，随着智能移动设备（手机、平板电脑等）的发展，Web开发也必须顺应这一潮流。目前最新的HTML5和CSS3在智能移动设备的浏览器中都能够获得很好的支持。