1、页面结构上的一些宽松改变
<!DOCTYPE html>默认为标准模式
<meta charset="UTF-8">
2、html5中新增的一些语义化标签
<section></section>用于对网站或应用程序中页面上的内容进行分块。通常由内容及其标题组成。
<article></article>代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。当我们描述一件具体的事物的时候，通常使用article来代替section。如一个帖子，一段用户评论等。
<aside></aside>表示当前页面或者文章的附属信息部分。如与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组等。
<nav></nav>用作页面导航的链接组，其中可以包括<ul><li><p>元素等。
<time></time>表示某个时间或者某个日期。其中pubdate属性代表了文档的发布日期，可以用到time标签里。
<header></header>整个页面或者页面内容区块的标题，可以包含其他内容。
<footer></footer>页脚，页面底部或者版块的内容。
<hgroup></hgroup>页面上标题的组合，通常对h1~h6进行分组。
<address></address>文档作者或者文档维护者的联系信息。
<figure></figure>通常用于图片，统计图或代码示例，带有可选标题。将其从网页上移除后不会对网页上其他内容产生影响。
<figcaption></figcaption>表示figure的标题，从属于figure元素。
<mark></mark>页面中需要凸显出或者高亮显示的，对于当前用户具有参考作用的一段文字。
<progress></progress>代表一个任务完成的进度。
<details></details>描述文档或者用户要求得到并且可以得到的细节信息。与summary元素配合使用。
<summary></summary>给details元素提供标题或者图例。标题是可见的，用户点击标题时，会显示细节信息。
<datelist></datelist>选项列表。与input元素配合使用，来定义input可能的值。
<keygen></keygen>给表单添加一个公钥.
<menu></menu>菜单列表。HTML4中不推荐使用。
3、html5中新标签在ie6到ie8下的兼容性解决方法
在html头部加入html5.js来解决。
4、selectors API
新增选择器
querySelector()根据制定的选择规则，返回在页面中找到的第一个匹配元素。
querySelectorAll()根据指定规则返回页面中所有相匹配的元素。
getElementsByClassName()
注意：selectors API不仅仅只是方便，在遍历DOM的时候，Selectors API通常会比以前的子节点搜索API更快。同时浏览器也做了高效的搜索匹配。
5、Form新变化
•新增属性
form给每个表单制定一个ID，然后给该元素制定一个form属性，值为该表单的ID，可以声明该元素属于指定表单。
formaction在所有的提交按钮里设置提交地址，可以相同，也可以不同。
formmethod指定提交方法，post或者get.
placeholder输入框提示信息。
autofocus指定表单获取输入焦点。
List和datelist：为输入框构造一个选择列表，list值为datelist标签的id。
autocomplete:是否保存用户输入值，默认为on，关闭提示选择off。
required:检查元素的内容是否为空白。默认不许为空白，一般是必须填的。
pattern:对input中输入内容的正则验证，不符合时不允许提交。
•新的输入型控件（input）
url：输入网页的地址。
email：电子邮箱文本框，但是要求必须输入正确的的email文字格式。
tel:专门用于电话，在各浏览器外观和text相同。
search:用于搜索，比如站点搜索或者google搜索。
date:用于输入日期。
week:用来数日周号，会对输入的周号进行检查。
month:用来输入月份，会对输入的月份进行检查。
numbe:输入数字，会对输入的数字进行检查。
time:输入时间，会对输入的时间进行有效性检查。
datetime:输入UTC日期和时间，进行有效性检查。
date-local:输入本地日期和时间，进行有效性检查。
range:特定范围内的文本选择框，具有min和max属性，step(步数)。
用JS来显示当前数值。
color:用来选取颜色，它提供了颜色选择器。
•表单验证
隐式验证：max,min,step,pattern,required属性等。
显示验证：
1、checkValidity方法。
调用该方法可以显示地对表单内所有元素或单个内容进行有效性验证。以boolean的形式返回验证结果。
2、validity属性。
该属性返回一个ValidityState对象。该对象具有很多属性，最重要的有valid属性，它表示表单内所有元素是否有效或单个input元素内容是否有效。
•取消验证
1、form元素的novalidate属性——可以关闭表单验证（设置true和false之分）。
2、input或submit元素的formnovalidate属性。
对input使用该属性可以对单个input元素失效。
对submit按钮使用该属性相当于对整个form是用来novalidate属性，整个表单验证都失效了。
6、获取class列表属性
•classList
—length：class的长度
—add()：添加class的方法
—remove()：删除class的方法
—toggle()：切换class的方法
—contains():列表中是否存在给定的值，如果存在就返回”true”，否则返回”false”。
7、date自定义数据
• Dateset
—data-name : dataset.name
—data-name-first : dataset.nameFirst
读取的时候也是通过dataset对象，使用”.”来获取属性，同样需要去掉data-前缀，连字符需要转化为驼峰命名。
data-*的浏览器兼容性情况十分不乐观
8、拖放API
•实现拖放操作的步骤：
①将要拖放的对象元素的draggable属性设为true(draggable="true")。img元素和a元素（必须制定href）默认允许拖放。
②编写与拖放有关的事件代码。
• 拖拽元素事件 : 事件对象为被拖拽元素
—dragstart , 拖拽前触发
—drag ,拖放过程中，连续触发
—dragend , 拖拽结束触发
• 目标元素事件 : 事件对象为目标元素
—dragenter , 进入目标元素触发，相当于mouseover
—dragover ,进入目标、离开目标之间，连续触发
—dragleave , 离开目标元素触发，相当于mouseout
—drop , 在目标元素上释放鼠标触发
• 事件的执行顺序 ：drop不触发的时候
—dragstart > drag > dragenter > dragover > dragleave > dragend
• 事件的执行顺序 ：drop触发的时候(dragover或dragend的时候阻止默认事件)
—dragstart > drag > dragenter > dragover > drop > dragend
不能释放的光标和能释放的光标不一样。
• dataTransfer对象
开始拖动时，要把拖动的数据存入DataTransfer对象。专门用来存放拖放时要存放的数据，它可以被设置为拖动事件对象的dataTransfer属性。
—setData() : 设置存放的数据, key和value(必须是字符串)。其中key代表数据种类：text/plain,text/html,text/xml,text/uri-list。
—getData() : 获取存放的数据，根据key值，获取对应的value。
• effectAllowed属性
—effectAllowed : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)，一般设置在dragstart事件中。
• setDragImage：自定义拖放图标
三个参数：指定的图片元素，坐标X，坐标Y。
9、文件API
•FileList对象
FileList对象表示用户选择的文件列表。
•Blob对象
一个原始数据对象，它提供了slice方法可以访问到字节内部的原始数据块。另外有两个属性：size（数据的大小），type（数据的MIME类型）。
注意：对于图像类型的文件，Blob对象的type属性都是以“image/”开头的，后跟图像类型，利用这个特性我们可以在JS中判断用户选择的文件是否为图像文件。
•file对象
继承自Blob对象指向一个具体的文件，它还有两个属性：name（文件名), lastModifiedDate（最后修改时间)。
•FileReader接口
用来读取文件里面的数据，提供三个常用的读取文件数据的方法。并提供了一个异步API，使用该API可以在浏览器主线程中异步访问文件系统。
三个方法：
——readAsText:将文件以文本方式读取，结果存储在result属性中。
——readAsBinaryString:将文件读取位二进制字符串，，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
——readAsDataURL:将文件读取为一串Data URL字符串，该方法事实上是将小文件以一种特殊格式的URL地址形式直接读入页面。这里的小文件通常是指图像与html 等格式的文件。
10、Canvas API
•canvas元素是专门用来绘制图形的。只是一块无色的透明区域，需要利用JS编写在其中进行绘画的脚本。
•canvas绘制矩形时的步骤：
⑴取得canvas元素。
⑵取得上下文。用canvas对象的getContext方法来获得，该方法中的参数只能设置为2d。
⑶填充和绘制边框。
⑷设定绘图样式（style）。
fillStyle——在该属性中填入填充的颜色值。
strockStyle——在该属性中填入边框的属性值。
⑸指定线宽（图形边框的宽lineWidth属性）
⑹指定颜色值。
⑺绘制矩形。
fillRect(x,y,width,height):默认颜色是黑色。
strokeRect(x,y,width,height):带边框的方块，默认1像素黑色边框。
•canvas绘制其它除了长方形或正方形之外的图形时：需要使用路径。
步骤如下：
⑴开始创建路径。
context.beginPath(),该方法不使用参数，在几次循环创建路径的过程中，每次开始创建时都要调用beginPath()。
⑵绘制圆形路径
context.arc(x,y,圆形半径，开始角度，结束角度，是否顺时针)。
⑶关闭路径
context.closePath(),此时就是路径创建完毕啦，但是还没真正开始绘制任何图。
⑷设置绘制样式，进行图形绘制。
context.fillStyle....
context.fill()。