H5新特性总结
H5 总结 特性
2023-09-14 08:58:55 时间
Web前端最新的官方标准无疑就是es6和H5了,es6之前已经说过了(多是一些语法糖),现在来总结一下H5给我们来了哪些新“朋友”吧~
1.video/radio 视频/音频
2.canvas 绘画
3.geolocation 定位
4.WebSocket 前后端双向通讯
5.localStorage/sessionStorage代替cookie本地存储
6.文件拖拽(drag事件+dataTransfer+FileReader)
7.WebWorker js多线程,提高性能
8.WebSQL 前端数据库(已被官方弃用)
9.manifest 离线缓存
同时也新增了一些标签,常用的有:header、nav、section、aside、footer
为了使得IE6-8兼容H5的新标签:
我们会引入如下代码:
<!--[if lt IE 9]> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.js"></script> <![endif]-->
说明一下:
html5shiv.js是用来使得IE6-8能够识别H5标签,其原理很简单,就是用创建自定义标签的方法来使得IE可以识别H5标签。
自定义标签在一般的高级浏览器可以直接写入HTML中,例如:
<myLabel> 内容内容内容~~~~ </myLabel>
但是IE6~8只能通过js的createElement:
document.createElement('myLabel'); //实际上htmlshiv.js的核心就是这个,随便列几个H5标签 var e = "article, aside, audio, canvas, footer, nav, section, video".split(', '); for(var i=0;i=e.length,i++){ document.createElement(e[i]); }
response.js是用来兼容css3的media的:
原理其实很简单:发ajax请求css代码,然后分析所有media query的min-width和max-width的语法,当window.resize时候引入对应的css块
原理代码都是一些正则匹配,就不恶心大家了~~
相关文章
- H5移动端开发学习总结
- 基于H5+js开发一款音乐播放器
- 开源在线客服系统源码h5|thinkphp在线客服完整源码|网页在线客服源码
- 《羊了个羊》H5源码分享
- h5实现长按复制文本_ios13如何复制链接
- H5漂流瓶交友源码/附教程
- 解决微信H5获取SDK授权报错提示errMsg: “config:fail,Error: 系统错误,错误码:63002,invalid signature [20200908 22:17:17][]“
- 【解决】保存h5或用Pipeline时报错Feature names are only supported if all input features have string names
- 你知道吗?小游戏≠H5小游戏
- 小游戏与H5游戏的前世今生
- 如何在H5页面或者移动端Uniapp/vue中接入在线客服系统,h5客服系统的接入方法
- 【前端探索】移动端H5生成截图海报的探索
- 实现H5的拖放详解手机开发