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

----表单提交时进行验证并提示----

在这里插入图片描述