浏览器与H5的一二三

2024-04-28 20:56:23

1、H5是什么？为什么？

HTML5指的是HTML + CSS +JS的一套技术组合。因为H4陈旧不能满足现在互联网的需要，尤其是移动互联网。HTML5的出现可以减少浏览器对插件的依赖，提高了用户体验以及有利于开发者开发。

2、浏览器的三层架构

上面提到了，H5是HTML+CSS+JS的一套组合拳，这套拳法就是针对浏览器设计的，它们代表了浏览器的三层架构，结构层，表示层，行为层：

结构层： HTML 或 XHTML之类的标记语言负责创建。我们构建页面的时候需要在< body >< /body >中对整个页面进行构思、布局，为了将整个页面模块美观的、有结构的展现出来，因此叫它结构层。

表示层：由 CSS 负责创建。表示就是展示，当我们利用HTML构件好整个页面后，利用CSS就可以不同模块呈现出不同风格。

行为层:这是Javascript语言和 DOM 主宰的领域。纯静态页面当然是很下头的，这时JS就站了出来，可以给用户提供类似：表单提交、按钮点击、搜索信息等功能，这就像页面在做动作一般将信息进行交互，负责回答“内容应该如何对事件做出反应”这一问题，因此叫做行为层。

3、H5的优缺点

H5的优点主要是：网络标准统一，有多媒体元素，代替了Flash以及Silverlight，对SEO友好，有利于移动互联网开发。

H5的缺点主要是：浏览器的兼容性。现在的市场上有很多种类的浏览器，不同种类的浏览器的内核也不尽相同，所以不同浏览器对代码的解析会存在差异，这就导致对页面渲染效果不统一的问题。

4、为什么Flash以及Silvelight会没落

Silvelight是微软当初为了对付Flash创建的一个插件，或许你会想这些插件为什么不能应用到今天?有些地方或许会用到，但原因就在于假设你现在打开一网页，进入前让你装这插件那插件才能打开，大部分人估计直接会关了网页。所以H5直接冲出来拿下双杀。

5、浏览器的兼容性

上面说到了对于不同的浏览器，因为内核的不同导致了对代码解析的不同。

举个栗子：

div{
width:50px;
height:50px;
border:1px solid red;
}

当你单独为这个div设置样式的时候，你会发现在不同的浏览器中margin以及padding不同。这时我们就要设置

*{
margin:0;
padding:0;
}

来对兼容性进行设置。

浏览器与H5的一二三相关推荐

ios系统微信浏览器、safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法
ios系统微信浏览器.safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法参考文章: (1)ios系统微信浏览器.safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法 (2) ...
thinkphp开发的小程序、公众号H5、浏览器端H5、前端vue框架开发
需要程序代码的可以找我提供用户端包含:小程序.公众号H5.浏览器端H5 序号功能模块简介 1 商品商品分类支持两级分类,分类可添加分类图标,可设置排序和是否显示,支持分类搜索. 2 商品管理 ...
微信公众号H5开发，在微信浏览器打开H5，无法一键下载图片
微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片背景解决方案文章参考背景微信公众号H5开发,在普通浏览器,可以直接通过以下代码下载图片: let a = document.crea ...
微信浏览器跳转小程序php,微信浏览器里面h5跳转小程序
微信浏览器里面h5跳转小程序注意事项,以vue框架为例一.获取jssdk配置,在wx.ready回调函数里面展示按钮wx.config({ debug: false, appId: data.ap ...
mac的safari浏览器调试h5
在h5开发移动端时,兢兢业业的开发的完成后,本地电脑测试,无bug,完美.在自己的新手机上测试,也没有bug,ok,交付. 然而,在测试阶段,bug来了,这个按钮怎么点击无反应?这个样式怎么不对?.. ...
微信html5 下拉刷新,【报Bug】Iphone6s微信浏览器打开H5页面，出现下拉刷新bug
详细问题描述 (DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题) [内容] 重现步骤 [1.运 ...
使用顽灯浏览器执行H5游戏辅助挂机
前一篇<使用Fidder从安卓模拟器获取APP内H5游戏网址>我们获取到了APP内H5游戏的网址,那么接下来我们使用辅助工具做一些日常任务,如:每天晚上20点做副本,定时喊话,自动清理包裹 ...
去除/屏蔽安卓/Android手机的 qq浏览器微信H5使用video标签播放视频，结束后的视频广告
今天是个好日子老干妈炖大鹅的好日子 X5内核是腾讯基于优秀开源Webkit深度"优化并加工"的浏览器渲染引擎微信和手机qq都是还有一些就不细说了 x5内核会监管vid ...
解决vue低版本ios，安卓手机浏览器打开H5页面空白的问题
低版ios手机ios8,ios9,安卓6以后的自带浏览器打开VUE开发的H5页面有时候会出现白屏的问题,这是因为vue 项目中es6的方法和语法在这些低版本的手机上不支持,解决办法 es6转es5 一 ...

最新文章

热门文章