本文已参与掘金创作者训练营第三期「高产更文」赛道，详情查看：掘力计划｜创作者训练营第三期正在进行，「写」出个人影响力。
HTML5 标记方式
HTML5 的文档类型声明
<!DOCTYPE html>
HTML5 文档编码格式的指定
<meta charset="utf–8">
HTML5 文档结构
<header> 标签：用于定义页眉信息。
<nav> 标签：定义导航栏。
<article> 标签：用于页面中可以独自被外部引用的内容，可以是一篇文章、一个评论等。
<aside> 标签：专门用于定义当前页面或文章的附属信息，包括相关引用、侧边栏、广告、导航等。
<footer> 标签：用于定义脚注部分，比如版权。
......
三. Canvas 绘图
基本步骤：
- Canvas 标签的定义：
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000">
</canvas>
- 使用 JS 获取该 Canvas 对象：
var canvas = document.getElementById("myCanvas");
- 获取 2D 图形上下文对象：
var context = canvas.getContext("2d");
- 使用 Context 对象的属性方法进行绘制：
context.fillStyle = "#FF0000";
context.fillRect(30, 30, 100, 100);
video/audio 标签
基本使用方法：
<video src="video.mp4" width="100%" height="100%" autoplay controls></video>
<audio src="xxxx.mp3" autoplay controls></audio>
拖放 API
通过拖放 API 可以使页面中任意元素变成可拖动的，这样有利于设计出更友好的交互界面。
要使一个元素能够被拖动，需要为这个元素设置属性 draggable="true"，但这样仅仅是表示该元素允许被拖放，但在拖放时并不携带数据，用户看不到拖放的效果。这时还需要为该元素绑定事件监听器 ondragstart="drag(event)"，并在事件处理函数中设置所需携带的数据。
注意: <img> 标签和带有 href 属性的 <a> 标签默认是可以拖动的。
基本语法：
HTML：
<div id="mydiv" draggable="true" ondragstart="drag(event)"
style="width: 100px; height: 50px; background-color: #eee;">测试</div>
JS：
var mydiv = document.getElementById("mydiv");
function drag(e) {
// text 为 IE 兼容写法；dataTransfer 对象提供属性和方法
e.dataTransfer.setData("text", "要携带的数据");
}
Web 存储
在 HTML4 中存储数据使用 Cookie 来实现，但是 Cookie 的大小被限制在 4KB 以下，并且 Cookie 可能会随着 HTTP 请求一起向服务器发送，可能会造成带宽的浪费。
所以 HTML5 提供了 Web Storage。
Web Storage 有两种存储形式：Session Storage 和 Local Storage。
Session Storage：用于保存用户浏览网站这段时间内所需要保存的数据，当网站被关闭时，保存的数据也随之丢失。
Local Storage：将数据保存在客户端的硬件设备中，当浏览器关闭后，数据任然存在。
重点介绍 Local Storage：
存数据：
localStorage.setItem(键 , 值);
取数据：
var data = localStorage.getItem(键);
其他常用属性和方法：
localStorage.length; // 返回键值对的数量
localStorage.key(index); // 返回第index个数据的key(键)
localStorage.removeItem(key); // 删除对应的数据
localStorage.clear(); // 清空所有
本地数据库
HTML4 中数据库存放在服务器端，只能通过服务器来访问数据库，而在 HTML5 中内置了两种本地数据库：SQLite 和 IndexedDB（轻量级 NOSQL 数据库）。
现在 W3C 已暂停对 SQLite 规范进行更新，继而把重点放在 Web Storage 和 IndexedDB。
Web Worker
创建 Worker 对象（后台进程）多用于这些场合：抓取数据缓存本地、后台I/O处理、大数据分析或计算处理、Canvas绘图中的图形数据运算及生成处理、本地数据库中的数据存取及计算处理、计算量非常大（例如循环求1~100亿的和）。
