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是一样的,都是用于编辑文档,它采用不同的标签来表达不同的意义,如下面的代码。
<html>
<body>
<h1>CSS属性与浏览器兼容性</h1>
<p>CSS是Cascading Style Sheets的缩写,中文称为层叠样式表,是一种用于为HTML等结构化文档添加样式的标记语言。</p>
</body>
</html>
<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在智能移动设备的浏览器中都能够获得很好的支持。