一、Html(5)梳理
Html(5)定义
HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。MDN解释
HTML5 是 W3C 与 WHATWG 合作制定的下一代 HTML 标准。 现代浏览器都已支持Html5。实际上MDN中对它的定义很是精辟： 它是一个新版本的HTML语言，具有新的元素，属性和行为，它有更大的技术集，允许构建更多样化和更强大的网站和应用程序。
Html5重要常用的知识点介绍。
1. 文档的类型声明
<!DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
HTML5 不是基于 SGML，因此不要求像HTML 4.01及以前版本那样引用 DTD。
2. 语义化标签:
网上都说语义化标签有以下优点：提升可访问性、SEO、结构清晰，利于维护。 我个人觉得，通过语义化标签自动进行各模块划分，有点实际用处， 其次在大部分移动端场景很适用(看小程序或者看一些组件库) 当然实际开发中在比较复杂的PC端这些语义化标签显得没那么重要， 并且SEO在如今基本都被竞价排名......
- HTML5 中的区块和段落元素:
<section>, <article>, <nav>, <header>, <footer>, <aside> 和 <hgroup> - 表单的改进，增加强制校验API
- HTML5 中的音频和视频: 和 元素嵌入和允许操作新的多媒体内容。
- 的改进:(暂未有实际尝试) 使用 sandbox， seamless， 和 srcdoc 属性，可以精确控制 元素的安全级别以及期望的渲染。
- MathML 允许直接嵌入数学公式。
- 新的语义元素
除了节段，媒体和表单元素之外，还有众多的新元素，
例如:
<mark> <figure> <figcaption>， <data>， <time> <output> <progress>， 或者 <meter>和<main>，这增加了有效的 HTML5 元素的数量。 下面这个进度条要不是H5自己写想想都麻烦，哈哈。
3. Canvas绘图
一直觉得画图在实际业务中没啥卵用，后来涉及到数据可视化项目，突然觉得这里是这么的薄弱， 只好借助 Echarts和G2、G6 个人觉得一般的数据可视化业务用G2/G6/Echarts就够了。做二次开发会基于D3,数学功底要求较高，门槛其实不低。
// 还是写个渐变的例子，以备后看。
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #ccc;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
let dom = document.getElementById("myCanvas");
let cxt = dom.getContext("2d");
// 创建线性的渐变对象。参数为坐标（x0,y0,x1,y1）
let grd = cxt.createLinearGradient(0,0,175,50);
// 规定渐变对象中的颜色和位置。一般至少两个，代表起始位置颜色和结束位置颜色
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
// 矩形填充，参数：左上角的 x 坐标，左上角的 y 坐标，矩形的宽度和高度，以像素计
cxt.fillRect(0,0,175,50);
</script>
4. 拖放
拖放是 HTML5 标准的组成部分：任何元素都是可拖放的。其中最主要的就是一拖一放。
把一个元素设置为可拖放，请把 draggable 属性设置为 true：
<img draggable="true">
| 事件 | 事件处理程序(事件句柄) | 说明 |
|---|---|---|
| drag | ondrag | 拖动拖动的项目（元素或文本选择） |
| dragend | ondragend | 拖动操作结束（例如释放鼠标按钮或按Esc键） |
| dragenter | ondragenter | 拖动的项目进入有效的放置目标 |
| dragexit | ondragexit | 元素不再是拖动操作的直接选择目标 |
| dragleave | ondragleave | 拖动的项目会留下有效的放置目标 |
| dragover | ondragover | 拖动的项目每隔几百毫秒就被拖过一个有效的放置目标 |
| dragstart | ondragstart | 用户开始拖动项目 |
| drop | ondrop | 项目被放置在有效的放置目标上 |
常用ondragstart、ondragover、ondragend、ondrop，比如树节点拖拽，排序拖拽
5. 地理定位
getCurrentPosition() 方法来获得用户的位置，若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude（维度）、longitude 以及 accuracy（位置精度） 属性。如果可用，则会另外返回其他属性。
navigator.geolocation.getCurrentPosition(success, error, options);
Geolocation 对象 - 其他有趣的方法 watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。 clearWatch() - 停止 watchPosition() 方法。
navigator.geolocation.watchPosition(success[, error[, options]])
6. 音视频（直接放到语义化标签里讲解了，浅显的说也是新的元素）
7. Web 存储
Web Storage 包含如下两种机制： sessionStorage 为每一个给定的源（given origin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。
localStorage 同样的功能，但是在浏览器关闭，然后重新打开后数据仍然存在。
这两种机制是通过 Window.sessionStorage 和 Window.localStorage 属性使用（更确切的说，在支持的浏览器中 Window 对象实现了 WindowLocalStorage 和 WindowSessionStorage 对象并挂在其 localStorage 和 sessionStorage 属性下）—— 调用其中任一对象会创建 Storage 对象，通过 Storage 对象，可以设置、获取和移除数据项。对于每个源（origin）sessionStorage 和 localStorage 使用不同的 Storage 对象——独立运行和控制。
8. WebSocket及SSE：
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 WebSocket 协议本质上是一个基于 TCP的协议。
为了建立一个WebSocket连接，客户端浏览器首先要向服务器发起一个 HTTP 请求， 这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加 头信息"Upgrade: WebSocket"表明这是一个申请协议升级的HTTP请求， 服务器端解析这些附加的头信息然后产生应答信息返回给客户端， 客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息， 并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。
// WebSocket实例
function WebSocketTest() {
if ("WebSocket" in window) {
alert("您的浏览器支持 WebSocket!");
// 打开一个 web socket
var ws = new WebSocket("ws://localhost:9998/echo");
// 事件处理程序on...
ws.onopen = function() { // 连接建立时触发
// WebSocket 已连接上，使用 send() 方法发送数据
ws.send("发送数据");
console.log("数据发送中...");
};
ws.onmessage = function (evt) { // 客户端接收服务端数据时触发
var received_msg = evt.data;
console.log("数据已接收...");
};
ws.onclose = function() { // 关闭 websocket
console.log("连接已关闭...");
};
ws.onerror = function() {
console.log("通信发生错误时触发...");
};
} else { // 浏览器不支持 WebSocket
console.log("您的浏览器不支持 WebSocket!");
}
}
SSE:
HTML5 服务器发送事件(Server-Sent Events)。 服务器发送事件（Server-sent Events）是基于 WebSocket 协议的一种服务器向客户端发送事件和数据的单向通讯。 HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。
Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新。 以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。 通过服务器发送事件，更新能够自动到达。 例如：Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。
```
// 实例
var source=new EventSource("demo_sse.php");
source.onmessage=function(event) {
document.getElementById("result").innerHTML+=event.data + "<br>";
};
```
9. Web SQL、应用程序缓存、Web Workers
10. WebRTC
这个可能是一个趋势，部分企业已经针对其进行专人招聘。
