首页技术文章正文

Web开发兼顾多个版本浏览器的通用方法？

更新时间:2020年10月22日18时16分来源:传智播客浏览次数:

通常在web开发中，由于不同的浏览器对同一个网页文件解析出来的效果可能不一致，为了让用户能够看到正常显示的网页，web开发者常常需要为兼容多个版本的浏览器而苦恼，当使用新的硬件(如移动电话)和软件(如微浏览器)开始浏览网页时，这种情况会变得更加严重。为了web更好地发展，在开发新的应用程序时，浏览器开发商和站点开发商共同遵守标准，就显得很重要，为此W3C与其他标准化组织共同制定了一系列的Web标准。Web标准并不是某一个标准，而是一系列标准的集合，主要包括结构、表现和行为三个方面，具体解释如下。
　　1. 结构
　　结构用于对网页中用到的信息进行分类与整理。在结构中用到的技术主要包括HTML、XML和XHTML。
　　l HTML 是超文本标记语言(关于该语言会在1.2小节介绍)，设计HTML的目的是创建结构化的文档以及提供文档的语义。目前最新版本的超文本标记语言是HTML5。
　　l XML是一种可扩展标签语言。XML最初的目的是为了弥补HTML的不足，具有强大的扩展性(例如定义标签)，可用于数据的转换和描述。
　　l XHTML是可扩展超文本标记语言。XHTML是基于XML的标记语言，是在HTML4.0的基础上，用XML的规则对其进行扩展建立起来的，用以实现HTML向XML的过渡，目前已逐渐被HTML5所取代。
　　如图1所示，是网页焦点轮播图的结构，该结构使用HTML5搭建，四张图片按照从上到下的次序罗列，没有任何布局样式。

图1焦点图结构

　　2. 表现
　　表现是指网页展示给访问者的外在样式，一般包括网页的版式、颜色、字体大小等。在网页制作中，通常使用CSS来设置网页的样式。
　　CSS(是Cascading Style Sheet的缩写)中文译为层叠样式表。CSS标准建立的目的是以CSS为基础进行网页布局，控制网页的样式。如图2所示，是焦点图模块加入CSS后的效果，只显示第一张图片，将剩余的图片隐藏。

图2 焦点图样式

　　在网页中可以使用CSS对文字和图片以及模块的背景和布局进行相应的设置。后期如果需要更改样式只需要调整CSS代码即可。
　　3. 行为
　　行为是指网页模型的定义及交互的编写，主要包括DOM(对象模型)和ECMAScript两个部分，具体解释如下。
　　l DOM(英文Document Object Model的缩写)指的是W3C中的文档对象模型。W3C文档对象模型(DOM)是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
　　l ECMAScript是ECMA(英文European Computer Manufacturers Association的缩写)国际以JavaScript为基础制定的标准脚本语言。JavaScript是一种基于对象和事件驱动，并具有相对安全性的客户端脚本语言，广泛用于Web开发，常用来给HTML网页添加动态功能，例如响应用户的各种操作。
　　如图3所示，是焦点图模块加入Javascript后的效果。每隔一段时间，焦点图就会自动切换，并且当用户的鼠标移上选择按钮时，会显示对应的图片，鼠标移开后又会按照默认的设置自动轮播，这就是网页的一种行为。