HTML5新特性(部分)
1.语义特性
HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的,微数据与微格式等方面的支持,构建对程序、对用户都更有价值的数据驱动的Web。
通俗来讲就是使用合理、正确的标签来展示内容,比如标题用h1~h6标签、一个段落用p标签。
优点:
- 易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。
- 有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。
- 方便其他设备解析,如盲人阅读器根据语义渲染网页
- 有利于开发和维护,语义化更具可读性,代码更好维护,与CSS3关系更和谐。
—新增标签—
—效果图—
2.本地存储
h5提供了sessionStorage、localStorage和indexedDB加强本地存储。
注意:Storage类型只能存储字符串。非字符串的数据在存储之前会被转换成字符串
2.1 本地存储方法
1.Cookie:数据存储到计算机中,通过浏览器控制添加与删除数据
特点:
- 存储限制:域名100个cookie,每组值大小4KB
- 客户端、服务器端,都会请求服务器(头信息)
- 页面间的cookie是共享
2.localStorage和sessionStorage
localStorage 属于永久性存储,离开当前页面再次打开还是会有本地缓存记录;
sessionStorage保存的数据用于浏览器的一次会话,当会话结束(通常是该窗口关闭),数据被清空;
优点:
- localStorage 拓展了 cookie 的 4K 限制
- localStorage 会可以将第一次请求的数据直接存储到本地,这个相当于一个 5M 大小的针对于前端页面的数据库,相比于 cookie 可以节约带宽,但是这个却是只有在高版本的浏览器中才支持的。
局限: - 浏览器的大小不统一,并且在 IE8 以上的 IE 版本才支持 localStorage 这个属性。
- 目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换。
- localStorage在浏览器的隐私模式下面是不可读取的。
- localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡。
- localStorage不能被爬虫抓取到。
- sessionStorage可以大量保存浏览器中数据。
- 同窗口下的sessionStorage,存储相互独立;互不干扰
用法:
-
保存数据:
localStorage.setItem(“key”, “value”);
sessionStorage.setItem(“key”, “value”);
注意:在不同的浏览器当中,存储的storage位置并不一样,不能通用。
------除了使用setItem()和getItem()方法,还可以采用属性操作的形式来操作数据------
-
获取数据:
localStorage.getItem(“key”);
sessionStorage.getItem(“key”);
-
删除数据(清除某个键名对应的数据):
localStorage.removeItem(“key”);
sessionStorage.removeItem(“key”);
注意:清除不存在的键名不会报错,只会静默失败------除了使用removeItem()方法,还可以使用delete操作来清除数据------
注意:IE7-浏览器不支持delete操作符来清除storage数据 -
清空本地缓存(用于清除所有保存的数据):
localStorage.clear();
sessionStorage.clear();
3.离线web应用
离线web应用指的是在没有网络状态可以运行应用
优点:
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
用法:
如要启用应用程序缓存,需在文档的 标签中包含 manifest 属性
manifest文件的组成(demo.cache文件的组成)
4.地理定位
HTML5 Geolocation API 用于获得用户的地理位置。
(鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。)
5.新增video标签
在不同浏览器中,默认的样式不同,支持的视频格式也不同
chrome :三种格式都支持
火狐:三种格式都支持
safari :只支持mp4
欧朋:三种格式都支持
IE8及以下:不支持video标签
IE9+:支持video标签,只支持mp4
部分属性:
autoplay 自动播放
loop 循环
poster 视频封面,只在视频第一次加载时出现
muted 视频静音
注:chrome默认autoplay不会进行自动播放,但如果设置了muted,则可以进行自动播放
6.表单新特性
input的type值:
原有:text、password、radio、checkbox、file、submit、reset、button、image、hidden
新增:
----表单提交时进行验证并提示----
表单元素新的属性:
原有: id、class、title、style、type、name、value、checked、selected、disabled、readonly
新增:
注:使用最大值最小值和步长时需要注明type
----表单提交时进行验证并提示----
7.拖拽属性
是指鼠标点击源对象之后,不松手将其拖拽到目标对象,或半途松手(释放)的过程
Drag:拖拽
源对象: 指定的鼠标点击的一个事物,例如: 一个元素,一个图片等
目标对象: 指定是我们拖动源对象后,预计要进入的区域
功能: 用于在源对象和目标对象之间传递数据
被拖动的源对象可以触发的方法:
- ondragstart: 源对象开始被拖动
- ondrag: 被拖动过程中
- ondragend: 源对象被拖动结束
源对象进入目标对象可以触发的事件:
- ondragenter: 源对象进入目标对象时触发
- ondragover: 源对象悬停在目标对象上方时触发
- ondragleave: 源对象被拖动着离开目标对象时触发
- ondrop: 源对象在目标对象上松手时 触发
效果图
控制台结果
8.设备兼容性
H5提供了前所未有的数据和应用接入开放接口。使外部应用可以直接和浏览器内部的数据直接相连,例如视频影音可以直接和microphones及摄像头相联。
参考网站:
https://www.jianshu.com/p/b3762ca713b1
https://www.jianshu.com/p/9e6d7c31573f
https://blog.csdn.net/qinshensx/article/details/104174347