参照W3Cschool网站上的内容，将HTML5的知识点进行了大致梳理，详情请移步：
https://www.w3cschool.cn/html5/
HTML5知识点总结
|
|
标签 |
描述 |
| <canvas>新元素 |
<canvas> |
标签定义图形，比如图表和其他图像，该标签基于JS的绘画API |
| 新多媒体元素 |
<audio> |
定义音频内容 |
| <video> |
定义视频(video或者movie) |
|
| <source> |
定义多媒体资源<video>和<audio> |
|
| <embed> |
定义嵌入的内容，比如插件 |
|
| <track> |
为诸如<video>和<audio>元素之类的媒介规定外部文本轨道 |
|
| 新表单元素 |
<datalist> |
定义选项列表。与input元素配合使用，来定义input可能的值。 |
| <keygen> |
规定用于表单的密钥对生成字段。 |
|
| <output> |
定义不同类型的输出，比如脚本的输出。 |
|
| 新的语义和结构元素 |
<article> |
定义页面独立的内容区域 |
| <aside> |
定义页面的侧边栏内容 |
|
| <bdi> |
允许设置一段文本，使其脱离其父元素的文本方向设置 |
|
| <command> |
定义命令按钮，比如单选按钮、复选框或按钮 |
|
| <details> |
用于描述文档或文档某个部分的细节 |
|
| <dialog> |
定义对话框，比如提示框 |
|
| <summary> |
标签包含details 元素的标题 |
|
| <figure> |
规定独立的流内容（图像图表照片代码等） |
|
| <figcaption> |
定义<figure>元素的标题 |
|
| <footer> |
定义section或decument的页脚 |
|
| <header> |
定义文档的头部区域 |
|
| <mark> |
定义带有记号的文本 |
|
| <meter> |
定义度量衡，仅用于一直最大和最小的度量 |
|
| <nav> |
定义运行中的进度 |
|
| <progress> |
定义任何类型的任务的进度 |
|
| <ruby> |
定义ruby注释 |
|
| <rt> |
|
|
| <rp> |
|
|
| <section> |
定义文档中的节 |
|
| <time> |
定义日期或时间 |
|
| <wbr> |
规定在文本中的何处适合添加换行符 |
画布。该元素用于图形的绘制，标签只是图形容器，必须使用脚本来绘制图形，脚本通常是JavaScript。
默认情况下该元素没有边框和内容。
绘制画布：<canvas id=”myCanvas” width=”200” height=”200”></canvas>
Canvas元素本身是没有绘图能力的，所有的绘制工作必须在JavaScript内部完成。
<script>
var c = document.getElementById(“myCanvas”);//找到<canvas>元素
var ctx = c.getContent(“2d”);//该对象是内建的HTML5对象，拥有多种绘制路径 、矩形、图形、字符以及方法
ctx.fillStyle = “#FF0000”;//可以设置CSS颜色渐变或者图案
ctx.fillRect(0,0,150,75);//该方法定义了矩形当前的填充方式，绘制坐标，在画布上绘制150*75的矩形，从左上角（0,0）开始
</script>
Canvas路径：
两种方法：moveTo(x,y):定义线条开始坐标；lineTo(x,y):定义线条结束坐标。
在绘制线条时，使用storke()方法。例子：定义开始坐标和结束坐标，然后使用storke()方法来绘制线条：
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
绘制圆形：arc(x,y,start,stop)
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
Canvas文本：
属性和方法：
font:定义字体
fillText(text,x,y):在canvas上绘制实心的文本
strokeText(text,x,y):在canvas上绘制空心的文本
Canvas渐变：
两种方法：
createLinearGradient(x,y,x1,y1):创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1):创建一个径向/圆渐变，参数解释：x表示渐变的开始圆的x坐标，r表示开始圆的半径，x1表示渐变的结束圆的x坐标，r1表示结束圆的半径
当我们使用渐变对象时，必须使用两种或者两种以上的颜色。addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
Canvas图像：
drawImage(image,x,y);//把一幅图像放置在画布上
SVG是可缩放矢量图形，是基于可扩展标记语言，用于描述二维矢量图形的一种图形格式。
使用XML格式定义图形
SVG图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG是万维网联盟的标准
SVG与DOM和XSL之类的W3C标准是一个整体。
拖放的目的是可以让你将某个对象放置到你想要放置的位置。
拖放（Drag和drop）是HTML5标准的组成部分，任何元素都能够拖放。
设置元素为可拖放，要把draggable属性设置为true：
<img draggable = “true”>
拖动什么：ondragstart()和setData()
规定元素当被拖动时，会发生什么。
HTML5 Geolocation用于定位用户的位置。
通过请求一个位置信息，用户同意后，浏览器会返回一个包含经度和纬度的位置信息。
如果支持地理定位，则运行getCurrentPosition()方法，以下是返回的数据：
大多数视频是通过插件的方式。
HTML5视频工作例子：
<video width=”320" height=”240” controls>
<source src=”movie.mp4” tupe=”video/mp4”>
</video>
<video>元素通过controls属性来提供播放、暂停和音量控制来控制视频。同时提供了视频显示的尺寸。
同视频内容。
HTML5拥有多个新的表单输入类型：
color：用于选取颜色
<input type=”color” name=”myColor”>
date：允许从一个日期选择器中选择一个日期
datetime：允许选择一个日期（UTC时间）
datetime-local：允许选择一个日期和时间（无时区）
email：用于包含e-mail地址的输入域，在提交表单时，会自动验证e-mail的值是否合法有效
month：允许选择一个月份
number：用于应该包含数值的输入域，可以通过max min step：规定合法的数字间隔 value来对数字进行限定
range：包含一定范围内数字值的输入域，显示为滑动条，属性值同上
search：用于定义搜索域
tel：定义输入电话号码字段
time：允许选择一个时间
url：用于应该包含url地址的输入域
week：允许选择周和年
<datalist>属性规定form或input域应该拥有自动完成功能，当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项
使用<input>元素的列表属性与<datalist>元素绑定。
<form>新属性
autocomplete：规定form或input域应该拥有自动完成的功能，用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。
novalidate：规定表单在提交时不验证form或input域。
<input>新属性
autocomplete
autofocus：规定在页面加载时，域自动获得焦点
form：规定输入域所属的一个或多个表单
formaction：用于描述表单提交的URL地址。
formenctype：描述表单提交到服务器的数据编码，只对form表单中method=post的表单
formnovalidate：会覆盖<form>元素的novalidate属性
formmethod：定义了表单的提交方式：post
height and width
list
min and max：用来限制包含数字或日期的input类型规定约束
step
multiple：设定可以选择多个值：Select images: <input type="file" name="img" multiple>
pattern
placeholder
required
一个语义元素能够清楚的描述其意义给浏览器和开发者。
无语义元素：<div>和<span>
语义元素：<form><table><img>
<section>：定义文档中的节，比如章节、页眉、页脚或文档中的其他部分
<nav>：定义导航链接的部分，但不是所有的链接都包含在其中
<aside>：定义页面主区域内容之外的内容，比如侧边栏
以上的元素都是块级元素（除了<figcaption>）。我们在使用时，需要在CSS文件中设置：
header, section, footer, aside, nav, article, figure { display: block; }
IE8无法使用这些语义标签
一个比cookie更好的本地存储方式。
可以在本地存储用户的浏览数据。数据以键值对存在，web网页的数据只允许该网页访问使用。
客户端存储数据的两个对象：
localStorage：没有时间限制的数据存储，不管时间过去多久数据依然可用。
//存储
localStorage.sitename = “W3Cschool在线教程”；
//查找
Document.getElementById(“result”).innerHTML = localStorage.sitename;
可供使用的API（session也适用）：
保存数据：localStorage.steItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
sessionStorage：针对一个session的数据存储，当用户关闭浏览器窗口后，数据会被删除。
使用HTML5，通过创建cache manifest文件，可以轻松的创建web应用的离线版本，可以让我们在没网的情况下进行访问。
应用程序缓存的优势：
离线存储——用户可在应用离线时使用它们
速度——已缓存资源加载的更快
减少服务器负载——浏览器将只从服务器下载更新过时或更改过的资源
如需启用应用程序缓存，在文档的<htnl>标签中包含manifest属性：
<!DOCTYPE HTML>
<html manifest = “demo.appcache”>
...
</html>
manifest文件新的建议文件扩展名是：”.appcache”。
Manifest文件是最简单的文本文件，告知浏览器被缓存的内容以及不缓存的内容
分为三个部分：
CACHE MANIFEST——在此标题下列出的文件将在首次下载后进行缓存
NETWORK——在此标题下列出的文件需要与服务器连接，且不会被缓存
FALLBACK——在此标题下列出的文件规定当页面无法访问时回退页面
更新缓存：
一旦应用被缓存，它就会保持缓存直到发生下列情况：
用户清空浏览器缓存
Manifest文件被修改
由程序来更新应用缓存
Web worker是运行在后台的JavaScript，不会影响页面的性能，更好的解释是，可以使用web worker提供的一种简单的方法来为web内容在后台线程中运行脚本，这些线程在执行任务的过程中并不会干扰用户界面。
服务器发送时间（Server-sent Events）是基于WebSocket协议的一种服务器向客户端发送时间和数据的单向通讯。允许网页获得来自服务器的更新。