HTML5新特性

1. 语义化标签

语义化标签清楚地说明了其内容的信息，增加了代码的可读性。在没有语义化标签前，我们一直是使用div来容纳页面的各个部分，这样不是不可以，只是不能通过代码直观地看出页面各部分的组成。

下面介绍一下HTML5较常用的语义化标签：

标签	意义
header	定义文档的头部
nav	定义文档的导航部分
footer	定义文档的尾部
main	定义文档的主体部分
aside	定义文档的侧边部分
article	定义文章内容
section	定义文章中的片段

2. 媒体元素
   媒体元素有音频<audio src=" ">，视频元素<video src=" ">

3. 表单
   表单类型：

类型	作用
date	日期控件，可选年月日
color	提供一个颜色拾取器
number	只能输入数字，上下自带增加或减少箭头，max属性可设最大值，min属性可设最小值，value可设默认值

表单属性：
placeholder: 提示信息；
autofocus: 自动获取焦点；
required: 拥有该属性的表单为必填项，否则无法提交表单。
multiple: 可以选择多个文件

表单事件：
oninput: 每一次输入内容时都会触发该事件。
oninvalid: 当表单验证不通过时会触发该事件。

4. progress 进度条元素

该元素可以表示任务的完成进度。
该元素的max属性表示任务的总量，value表示当前已完成的任务量。
<progress value="80" max="100">

5. DOM 查询操作
   在HTML5之前，我用JS获取一个元素时使用document.getElementById()或document.getElementByClass()等方法。有了HTML5后，我们可以使用如下方法获取元素：
   1） document.querySelector('#id')，获取与该选择器匹配的第一个元素。
   2）document.querySelectorAll('.class')，获取与该选择器匹配的所有元素。

6. web存储

HTML5提供了两种在客户端存储数据的方法：localStorage和sessionStorage

localStorage存储的数据永久存储在客户端，大小为5M；
localStorage存储的数据在当前会话窗口关闭后会被清除，跨页面刷新依然会存在。

7. 拖放API
   要想使一个元素成为可拖放元素，那么需要给这个元素添加属性draggable="true"，<a>或<img >默认带有draggable="true"属性。

为了描述方便，我们把正在拖动的元素成为拖动对象，拖动对象在拖动过程中经过的元素称为经过对象，拖动对象在一个元素上被释放，这个元素称为放置对象。

不同的对象具有如下事件：

1. 拖动对象

   • dragstart：拖动对象开始拖动时触发该事件。
   • drag: 拖动对象在拖动时会持续触发。
   • dragend：拖动对象结束拖动时被触发。

2. 经过对象

   • dragenter：拖动对象进入经过对象时触发该事件。
   • dragover: 拖动对象在经过对象范围内移动时触发该事件。
   • dragleave：拖动对象离开经过对象时触发该事件。

3. 放置对象

   • drop：拖动对象在放置对象上释放时触发该事件。

dataTransfer对象

该对象是事件对象event的属性，它有两个方法，setData()和getData()。顾名思义，setData()方法是用来在拖动对象中存入要传递到放置对象的数据；getData()方法用来获取数据，注意，只有在drop事件触发时才能用getData()获取传递来的数据。

setData()的第一个参数和getData()的唯一参数都是一个字符串，表示要设置的数据类型。该参数可以为任意MIME类型，但通常被设置为text/plain。

8. 画布canvas
9. SVG矢量图