简单介绍一下，HTML5新特性，语义化？
1.标签语义化，比如
header、footer、aside、section、article、nav、hgroup、
figure、detail、summary、canvas、video、audio、datalist、mark、meter、output、progress、keygen、command
2.媒体标签，比如
video、audio/source
方法
| load() | 重新加载音频/视频元素 |
| play() | 开始播放音频/视频 |
| pause() | 暂停当前播放的音频/视频 |
属性
| autoplay | 设置或返回是否在加载完成后随即播放音频/视频 |
controls 如果出现该属性，则向用户显示控件，比如播放按钮。
height pixels 设置视频播放器的高度。
loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。
3.拖拽特性，使用例子比如
- DataTransfer 对象：退拽对象用来传递的媒介，使用一般Event.dataTransfer。
- draggable 属性：就是标签元素要设置draggable=true，否则不会有效果，例如：
<div title="拖拽我" draggable="true">列表1</div>- ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
- ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
- ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
- ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
- ondragend 事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上
- Event.preventDefault() 方法：阻止默认的些事件方法等执行。在-
ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。- Event.effectAllowed 属性：就是拖拽的效果。
具体使用可以参考HTML5 drag & drop 拖拽与拖放简介
4.canvas
- 在<canvas>标签中提供了替换内容
- 当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素
- canvas元素默认被网格所覆盖,网格中的一个单元相当于canvas元素中的一像素,栅格的起点为左上角（坐标为（0,0））
- canvas提供了三种方法绘制矩形：
fillRect(x, y, width, height)
绘制一个填充的矩形
strokeRect(x, y, width, height)
绘制一个矩形的边框
clearRect(x, y, width, height)
清除指定矩形区域，让清除部分完全透明。
- 绘制路径
- 首先，你需要创建路径起始点。
- 然后你使用画图命令去画出路径。
- 之后你把路径封闭。
- 一旦路径生成，你就能通过描边或填充路径区域来渲染图形。
- 用到的函数
- beginPath()
新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。- closePath()
闭合路径之后图形绘制命令又重新指向到上下文中。- stroke()
通过线条来绘制图形轮廓。- fill()
通过填充路径的内容区域生成实心的图形。- moveTo();
移动笔触- 直线
lineTo()
绘制一条从当前位置到指定x以及y位置的直线- 圆弧
arc(x, y, radius, startAngle, endAngle, anticlockwise)
画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成
arcTo(x1, y1, x2, y2, radius)
根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点- 矩形
rect(x, y, width, height)
绘制一个左上角坐标为（x,y），宽高为width以及height的矩形。
当该方法执行的时候，moveTo()方法自动设置坐标参数（0,0）。- Path2D 对象
Path2D对象已可以在较新版本的浏览器中使用，用来缓存或记录绘画命令，这样你将能快速地回顾路径。
Path2D()会返回一个新初始化的Path2D对象（可能将某一个路径作为变量——创建一个它的副本，或者将一个包含SVG path数据的字符串作为变量）。
new Path2D(); // 空的Path对象
new Path2D(path); // 克隆Path对象
new Path2D(d); // 从SVG建立Path对象
5.SVG
- SVG文件的基本属性
最值得注意的一点是元素的渲染顺序。SVG文件全局有效的规则是“后来居上”，越后面的元素越可见
属性version和属性baseProfile属性是必不可少的，供其它类型的验证方式确定SVG版本
作为XML的一种方言，SVG必须正确的绑定命名空间 （在xmlns属性中绑定
- 服务器配置错误是SVG加载失败的常见原因，所以一定要确保你的服-器配置正确
- 坐标定位
默认的用户坐标系统1用户像素等于设备上的1像素
用户单位和屏幕单位的映射关系被称为用户坐标系统
100 * 100的区域，会放到200*200的画布上显示,就会形成了放大两倍的效果
- 基本形状
- 矩形rect
x
矩形左上角的x位置
y
矩形左上角的y位置
width
矩形的宽度
height
矩形的高度
rx
圆角的x方位的半径
ry
圆角的y方位的半径- 圆形circle
r
圆的半径
cx
圆心的x位置
cy
圆心的y位置- 椭圆Ellipse
rx
椭圆的x半径
ry
椭圆的y半径
cx
椭圆中心的x位置
cy
椭圆中心的y位置- 线条Line
x1
起点的x位置
y1
起点的y位置
x2
终点的x位置
y2
终点的y位置- 折线Polyline
points
点集数列。每个数字用空白、逗号、终止命令符或者换行符分隔开。每个点必须包含2个数字，一个是x坐标，一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。- 多边形polygon
polygon和折线很像，它们都是由连接一组点集的直线构成。不同的是，polygon的路径在最后一个点处自动回到第一个点- 路径path
d
一个点集数列以及其它关于如何绘制路径的信息。
属性d的值是一个“命令+参数”的序列
每一个命令都用一个关键字母来表示
每一个命令都有两种表示方式，一种是用大写字母，表示采用绝对定位。另一种是用小写字母，表示采用相对定位
- “Move to”命令，M，前面已经提到过，它需要两个参数，分别是需要移动到的点的x轴和y轴的坐标
- L x y (or l dx dy)
L需要两个参数，分别是一个点的x轴和y轴坐标，L命令将会在当前位置和新位置- H x (or h dx)
- V y (or v dy)
用来绘制平行线和垂直线。H，绘制平行线。V，绘制垂直线- Z (or z)
Z命令会从当前点画一条直线到路径的起点，尽管我们不总是需要闭合路径，但是它还是经常被放到路径的最后。另外，Z命令不用区分大小写
- Geolocation
- Geolocation API存在于navigator对象中，只包含3个方法：
- getCurrentPosition
navigator.geolocation.getCurrentPosition(success_callback, error_callback, {geolocation选项});
第一个参数都是success_callback中
成功后回调获取用户位置数据position，它包含两个属性：coords、timestamp。
coords属性有7个值，包含上面用到的纬度、经度。
1、accuracy 准确角
2、altitude 海拔高度
3、altitudeAcuracy 海拔高度的精确度
4、heading 行进方向
5、speed 地面的速度
6、latitude 纬度
7、longitude 经度第二个参数是用获取地理位置信息失败的处理方法，传入错误对象，包含code、message两个属性
第三个参数都是geolocation选项，所有的geolocation选项都是可选的，它包含的属性如下：
enableHighAccuracy(Boolean型，默认为false，是否尝试更精确地读取纬度和经度，移动设备上，这可能要使用手机上的GPS，这会消耗移动设备更多的电量)
timeout(单位为毫秒，默认值为0，在放弃并触发处理程序之前，可以等待的时间----用户选择期间是不计时的)
maximumAge(单位为毫秒，默认值为0。用来告诉浏览器是否使用最近缓存的位置数据，如果在maximumAge内有一个请求，将会返回它，而不请求新位置。maximumAge如果为Infinity，则总是使用一个缓存的位置，如果为0则必须在每次请求时查找一个新位置)
- watchPosition
- clearWatch
7.localStorage
数据存储在 localStorage 是无期限的
8.sessionStorage
数据存储在 浏览器对话窗口，随着窗口关闭消除
9.应用程序缓存（Application Cache）
允许浏览器在本地存储页面所需要的资源，使得页面离线也可以访问
未来将为被废弃
10.Web Worker
- Worker基本使用
- 创建新的Worker
var worker = new Worker("worker.js")
传递参数
worker.postMessage("text");- 接收消息
worker.onmessage = function (e) {
var message = e.data;
};- 异常处理
worker.onerror = function(e){
console.log("error at "+e.filename ":" + e.lineno + e.message)
}- 结束worker
worker.terminate();- 载入工具类函数
importScripts("./utils/base64.js","./utils/map.js"...)
需要注意的是importScripts是同步方法，一旦importScripts方法返回就可以开始使用载入的脚本，而不需要回调函数。- 建议参考：JavaScript 运行机制详解：再谈Event Loop(阮一峰)
- 我们所开启的新的worker也就是子线程，并不支持操作页面的DOM。
- 共享线程 SharedWorker
- 共享线程是为了避免线程的重复创建和销毁过程，降低了系统性能的消耗，共享线程SharedWorker可以同时有多个页面的线程链接
- 共享线程也使用了message事件监听线程消息，但使用SharedWorker对象的port属性与线程通信如下。
- worker.port.onmessage = function(e){}
- 同时我们也可以使用SharedWorker对象的port属性向共享线程发送消息如下。
- worker.port.postMessage("message");
11.服务器发送事件（server-sent event）
- SSE 的本质
- HTTP 协议无法做到服务器主动推送信息。
- 但是，有一种变通方法，就是服务器向客户端声明，接下来要发送的是流信息（streaming）。
- 发送的不是一次性的数据包，而是一个数据流，会连续不断地发送过来。
- SSE 是单向通道，只能服务器向浏览器发送，因为流信息本质上就是下载。WebSocket 更强大和灵活。因为它是全双工通道，可以双向通信。
- 优点
- SSE 使用 HTTP 协议，现有的服务器软件都支持。WebSocket 是一个独立协议。
- SSE 属于轻量级，使用简单；WebSocket 协议相对复杂。
- SSE 默认支持断线重连，WebSocket 需要自己实现。
- SSE 一般只用来传送文本，二进制数据需要编码后传送，WebSocket 默认支持传送二进制数据。
- SSE 支持自定义发送的消息类型。
- 客户端 API
- EventSource 对象
- 使用 SSE 时，浏览器首先生成一个EventSource实例，向服务器发起连接。
var source = new EventSource(url);
上面的url可以与当前网址同域，也可以跨域。- 跨域时，可以指定第二个参数，打开withCredentials属性，表示是否一起发送 Cookie。
var source = new EventSource(url, { withCredentials: true });- EventSource实例的readyState属性，表明连接的当前状态。该属性只读，可以取以下值。
0：相当于常量EventSource.CONNECTING，表示连接还未建立，或者断线正在重连。
1：相当于常量EventSource.OPEN，表示连接已经建立，可以接受数据。
2：相当于常量EventSource.CLOSED，表示连接已断，且不会重连。
- 基本用法
- 连接一旦建立，就会触发open事件，可以在onopen属性定义回调函数。
source.onopen = function (event) {};- 客户端收到服务器发来的数据，就会触发message事件，可以在onmessage属性的回调函数。
source.onmessage = function (event) {
var data = event.data;
// handle message
};
上面代码中，事件对象的data属性就是服务器端传回的数据（文本格式）。- 如果发生通信错误（比如连接中断），就会触发error事件，可以在onerror属性定义回调函数。
source.onerror = function (event) {};- close方法用于关闭 SSE 连接。
source.close();
- 自定义事件
默认情况下，服务器发来的数据，总是触发浏览器EventSource实例的message事件。开发者还可以自定义 SSE 事件，这种情况下，发送回来的数据不会触发message事件。
source.addEventListener('foo', function (event) {
var data = event.data;
// handle message
}, false);
- 新的表单元素
- datalist
包含了一组<option>元素,这些元素表示其它表单控件可选值.
- H5动画requestAnimationFrame的兼容性写法
var lastTime = 0;
var vendors = ['webkit', 'moz'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || // Webkit中此取消方法的名字变了
window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
var id = window.setTimeout(function() {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
}());
