首页技术文章正文

Web开发者怎样兼顾多个版本的浏览器?

更新时间:2020-10-22 来源:黑马程序员 浏览量:

 通常在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搭建,四张图片按照从上到下的次序罗列,没有任何布局样式。

1603362002772_1.jpg

图1焦点图结构

  2. 表现

  表现是指网页展示给访问者的外在样式,一般包括网页的版式、颜色、字体大小等。在网页制作中,通常使用CSS来设置网页的样式。

  CSS(是Cascading Style Sheet的缩写)中文译为层叠样式表。CSS标准建立的目的是以CSS为基础进行网页布局,控制网页的样式。如图2所示,是焦点图模块加入CSS后的效果,只显示第一张图片,将剩余的图片隐藏。
1603362013157_2.jpg

图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后的效果。每隔一段时间,焦点图就会自动切换,并且当用户的鼠标移上选择按钮时,会显示对应的图片,鼠标移开后又会按照默认的设置自动轮播,这就是网页的一种行为。

1603362021093_3.jpg

图3焦点图行为



猜你喜欢:

什么是变量?JavaScript变量命名规范介绍

6天玩转电子商务ECharts数据可视化项目【黑马程序员】

传智播客web前端培训课程 

黑马程序员web前端培训课程 

分享到:
在线咨询 我要报名
和我们在线交谈!