H5新特性（常见）

H5新特性

1. 语义化标签

   section：可以认为div是section元素,一个普通的分块元素，可用来定义网站中的特定的可区别的区域；

   header：包括标题，logo，导航和其他页眉的内容，可以在网站上加多个header，就像给内容加多个标题；
   　
   hgroup：即将标题进行分组的元素；

   footer：版权声明和作者信息,包涵一些链接；

   nav：主要用于主导航菜单；

   article：独立成文且以其他格式重用的内容应该置于一个article元素中；

   aside：用途包涵内容周围的相关内容；

   figure：一个典型用途是包含图像,代码和其他内容对主要内容进行说明，删除不会影响主内容；

   figcaption：主要用于figure的标题；

   mark：突出显示以表示引用的内容，或者突出显示与用户当前活动相关的内容，他不同于en或strong元素；

   time：当需要在内容中显示时间或者日期时，则建议使用time元素；（time元素可以包涵两个属性，一个datetime表示在元素中指定的确切日期和时间，pubdate表示文章或者整个文档发布时time元素所指定的日期和时间）

   meter：用于定义度量衡，规定最大最小宽高，通常要结合css一起作用；

   progress：用于定义一个进度条，有max（完成值）和value（进度条当前值）两个属性。

2. 新增表单控件

   email：电子邮箱文本框（当输入不是邮箱的时候，验证不通过；移动端的键盘会有变化）；

   tel：电话号码；

   url：网页的URL需要加上http；

   search：搜索引擎（chrome下输入文字后，会多出一个关闭的X
   ）；

   range：特定范围内的数值选择器（min、max、step( 步数 )
   ）；

   number : 只能包含数字的输入框；

   color : 颜色选择器；

3. 新的选择器

   querySelector：类似jq里的$()方法，但是只能取到第一个元素；

   querySelectorAll：同上，但是只能取到一个集合，即使只有一个元素；

   getElementsByClassName：通过class的方式取到一个元素集合。

4. 获取class列表属性

   classList：获取一个元素的class集合，类数组的对象。

   基于classList的方法：
   length : class的长度；
   add() : 添加class方法；
   remove() : 删除class方法；
   toggle() : 切换class方法；

5. JSON的新方法

   JSON.parse() : 把字符串转成json（字符串中的属性要严格的加上引号）；
   JSON.stringify() : 把json转化成字符串（会自动的把双引号加上）；
   新方法与eval的区别：新方法用于深度克隆新对象（构造器指针引起的问题）。

6. 强大的绘图功能和多媒体功能

   canvas 可以动态地绘制各种效果精美的图形，结合js就能让网页图形动起来；

   SVG 绘制可伸缩的矢量图形；

   audio 和 video 可以不依赖任何插件播放音频和视频；

7. web存储机制（Web Storage）

   Web Storage的两个主要目标：

   • 提供一种在cookie之外存储会话数据的途径；

   • 提供一种存储大量可以跨会话存在的数据机制。

   最初的Web Storage规范包含了两种对象的定义：sessionStorage和globalStorage。这两个对象在支持的浏览器中都是以windows对象属性的形式存在的。localStorage对象在修订过的HTML5规范中作为持久保存客户端数据的方案取代了globalStorage。

   sessionStorage对象存储特定于某个会话的数据，也就是该数据只保持到浏览器关闭。存储在sessionStorage中的数据可以跨越页面刷新而存在，同时如果浏览器支持，浏览器崩溃并重启之后依然可用（FireFox和WebKit都支持，IE不支持） 。
   sessionStorage对象可以使用setItem()或者直接设置新的属性来存储数据。
   sessionStorage中有数据时，可以使用getItem()或者通过直接访问属性名来获取数据。
   还可以通过结合length属性和key()方法来迭代sessionStorage的值。
   要从sessionStorage中删除数据可以使用delete操作符删除对象属性，也可以调用removeItem()方法。

   想要关闭浏览器后还能保存，就要使用localStorage。要访问同一个localStorage对象，页面必须来自同一个域名，使用同一种协议，在同一个端口上。由于localStorage是Storage的实例，所以可以像使用sessionStorage一样来使用它。

8. 获取地理位置信息

   Geolocation API：可以通过浏览器获取用户的地理位置，不再需要借助第三方地址数据库或专业的开发包，提供很大的方便。

9. 支持多线程

   新增Web Worker对象，可以在后台运行js脚本，也就是支持多线程，从而提高了页面加载效率。

10. File API

    File API在表单中的文件输入字段的基础上，又添加了一些直接访问文件信息的接口。H5在DOM中为文件输入元素添加了一个files集合，在通过文本输入字段选择了一或多个文件时，files集合中将包含一组File对象，每个File对象对应着一个文件。每个File对象都有下列只读属性:

    name: 本地文件系统的文件名
    size： 文件的字节大小
    type：字符串，文件的MIME类型。
    lastModifiedDate：字符串，文件上一次被修改的事件（只有chrome实现了这个属性）

11. history对象

    history对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。
    使用go()方法可以在用户的历史记录中任意跳转，可以向后也可以向前。这个方法接受一个参数，表示向后或向前跳转的页面数的一个整数值。负数表示向后跳转（类似于单击浏览器的‘后退’按钮），正数表示向前跳转（类似于单击浏览器的“前进”按钮）。
    h5中的history对象新增了两个新方法：history.pushState() 和history.replaeState()；
    两种方法都允许我们添加和更新历史记录，它们的工作原理相同并且可以添加数量相同的参数。但是pushState()是在history栈中添加一个新的条目，replaceState()是替换当前的记录值。除了方法之外，还有popstate 事件 pushState(data，title[,url])和replaceState(data，title[,url])参数一样，参数说明如下：

    data:一个表示状态的对象，json格式数据；
    title：一个string格式的标题（大多数浏览器不支持或忽略这个参数，最好用 null代替）；
    url：一个url（用于替换当前URL）；

---

H5移除的元素

纯表现的元素： basefont、big、center、font等；
对可用性产生负面影响的元素： frame、frameset、noframes等。