html5新增的元素与功能主要有
1、绘图canvas;
2、用于媒介回放的 video 和 audio 元素;
3、本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失 sessionStorage 的数据在浏览器关闭后自动删除;
4、语意化更好的内容元素，比如 article 、 footer 、 header 、 nav 、 section;
5、表单控件， calendar 、 date 、 time 、 email 、 url 、 search;
6、新的技术 webworker , websocket , Geolocation;
接下来就来具体的介绍一下这些新增元素的使用方法：
【1】绘图canvas
HTML5 <canvas> 元素用于图形的绘制，但<canvas> 标签只是图形容器，必须通过脚本 (通常是JavaScript)来完成.
使用的步骤：（画矩形为例子）
~1 : 在html中创建一个画布
<canvas id="myCanvas" width="200" height="100"></canvas>
width与height设置画布的宽高，可以使用css样式对画布的边框样式进行设置。
~2：使用js来绘制图像
//fillRect(0,0,150,75)画矩形调用的方法
var c=document.getElementById("myCanvas");//通过id值获取这个画布
var ctx=c.getContext("2d");//getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。也可以通俗的理解会设置一个画笔
ctx.fillStyle="#123";//设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
ctx.fillRect(0,0,150,75);//fillRect(x,y,width,height),四个参数分别是X：左上角横坐标为0，纵坐标为0，画出的矩形的width为150px，height为75px。
~3：画出其他图像的方法：
画线条：
//moveTo(x,y) 定义线条开始坐标
//lineTo(x,y) 定义线条结束坐标
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.stroke();
画圆型：
//arc(x,y,r,start,stop,counterclockwise)
//参数x，y与上述的一样意义；
//r : 圆的半径；
//start : 起始角（弧度制）弧的圆形的三点钟位置是 0 度；
//stop：结束角，以弧度计；
//counterclockwise : 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
渐变
设置的渐变颜色样式可以用于填充各种图像，比如矩形，圆形，线条等。
//createLinearGradient(x,y,x1,y1) - 创建线条渐变
//createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变（从圆心向圆边渐变）
//addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
// 创建渐变
var grd=ctx.createLinearGradient(0,0,20,0);
grd.addColorStop(0,"red");//线条开头是red
grd.addColorStop(1,"white");//渐变到结尾是white
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,160,80);
设置文本
//font - 定义字体
//fillText(text,x,y) - 在 canvas 上绘制实心的文本
//strokeText(text,x,y) - 在 canvas 上绘制空心的文本
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="28px Arial";//28px是高度
ctx.fillText("你好",10,50);
【2】视频 video
html5新增的video元素可以使得网页不用插件可以播放视频。（但IE9之前的版本不支持该元素）
video支持的视频格式有三种：MP4、WebM、Ogg。
目前主流的五大浏览器都支持MP4格式，IE与safari不支持WebM与Ogg。
使用方法：
<video width="320" height="240" controls>
//在<video>标签中可以多个source，浏览器会选择它支持的格式进行播放
<source src="m1.mp4" type="video/mp4">//MP4的MIME-type是video/mp4
<source src="m1.ogg" type="video/ogg">//Ogg的MIME-type是video/ogg
<source src="m1.webm" type="video/webm">//WebM的MIME-type是video/webm
//如果支持video标签的话，下列文字就不会被显示出来
您的浏览器不支持 video 标签。
</video>
video的可选属性：
autoplay : 就绪后马上播放。
controls :向用户显示控件，比如播放按钮。.
loop : 当媒介文件完成播放后再次开始播放。
muted : 视频的音频输出为静音。
poster : 规定视频正在下载时显示的图像，直到用户点击播放按钮。
preload : 视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
【3】 音频 audio
IE 8 及更早IE版本不支持 元素.
audio元素支持三种音频格式文件: MP3, Wav, 和 Ogg.
目前主流的五大浏览器都支持MP3格式，IE9+不支持Wav与Ogg格式，safari5+不支持Ogg。
audio的使用
<audio controls>
//在<audio>标签中可以多个source，浏览器会选择它支持的格式进行播放
<source src="m1.mp3" type="audio/mpeg">//MP3的MIME-type是audio/mpeg
<source src="m1.ogg" type="audio/ogg">//Ogg的MIME-type是audio/ogg
<source src="m1.wav" type="audio/wav">//WebM的MIME-type是audio/wav
//如果支持audio标签的话，下列文字就不会被显示出来
您的浏览器不支持 audio 元素。
</audio>
control 属性供添加播放、暂停和音量控件。
【4】localStorage
IE8以上的IE版本才支持localStorage这个属性。
localStorage 主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题.localStorage在浏览器的隐私模式下面是不可读取的。
localStorage的缺点：
localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
localStorage不能被爬虫抓取到。
localStorage 的使用：
~1：存储数据setItem
if (!window.localStorage) {
console.log('浏览器版本太低，不支持localStorage')
} else {
let storage = window.localStorage
//以下是三种存储数据的方法
storage.setItem('a', 1) // 存储名为a值为1的变量
storage['c'] = 3 // 存储名为c值为3的变量
storage.b = 2 // 存储名为b值为2的变量
//修改则直接重新赋值
storage.b = 20 // 修改b值为2
}
~2：获取数据getItem
storage.getItem('a') // 1 读取保存在storage对象里名为a的变量值
storage.b // 2 读取保存在storage对象里名为b的变量值
storage['c'] // 3 读取保存在storage对象里名为c的变量值
storage.key(0) // 1 根据key值读取数据,key(0)代表对象的第一条数据
storage.valueOf() // 读取保存在storage对象上的全部数据
~3：删除数据clear()和removeItem()
storage.clear() // 删除所有键值对
storage.removeItem('a') // 删除指定的键值对
【5】sessionStorage
sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
使用方法：
~1：存储数据setItem
const Storage = {};
Storage.get = function(name) {
return sessionStorage.getItem(name);
}
~2：获取数据getItem
const Storage = {};
Storage.get = function(name) {
return sessionStorage.getItem(name);
}
~3：删除数据 removeItem
const Storage = {};
Storage.del = function(name) {
sessionStorage.removeItem(name);
}
【6】语意化更好的内容元素 article 、 footer 、 header 、 nav 、 section
~1 ：article ：
article是另一个具有语义化特性的 HTML5 新标签。article是一个分段标签，用于呈现独立及完整的内容。这个标签适用于博客入口、论坛帖子或者新闻文章。
~2 ：footer :
与header和nav类似，footer也具有语义化特性，可以使辅助设备快速定位到它。它位于页面底部，用于呈现版权信息或者相关文档链接。
~3：header :
header也是一个具有语义化的、提升页面可访问性的 HTML5 标签。它可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。
与main类似，header的语义化特性也可以使辅助技术快速定位到它的内容。
~4 nav :
nav也是一个具有语义化特性的 HTML5 标签，用于呈现页面中的主导航链接。它可以使屏幕阅读器快速识别页面中的导航信息。
~5 section :
section也是一个 HTML5 新标签，与article标签的语义含义略有不同。article用于独立的、完整的内容，而section用于对与主题相关的内容进行分组。它们可以根据需要嵌套着使用。举个例子：如果一本书是一个article的话，那么每个章节就是section。
【7】 表单控件：color、 date 、 time 、 email 、 url 、 search
~1 ：
color 类型用在input字段主要用于选取颜色
~2 ：
date：显示日期{年月日}
~3 ：
time：显示时间，不含时区
~4 ：
email：电子邮箱文本框,跟普通的没什么区别。当输入不是邮箱的时候,验证不通过，移动端的键盘会发生变化
~5 ：
url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。
~6 ：
search 类型用于搜索域，比如站点搜索或 Google 搜索。
[8] 新的技术 webworker , websocket , Geolocation
~1 webworker
js在运行的时候是采用单线程进行执行的，即同一时间只能做一件事，采用同步执行的方式进行运行，如果出现阻塞，那么后面的代码将不会执行，HTML5则提出了web Worker标准，表示JavaScript允许有多个线程，但是子线程完全受主线程的控制，子线程不能操作DOM，只有主线程可以操作DOM，所以以主线程为主的单线程执行原理成了JavaScript这门语言的核心。
web worker是在Javascript单线程执行的基础上，开启一个子线程，进行程序处理，而不影响主线程的执行，当子线程执行完毕之后再回到主线程上，在这个过程中并不影响主线程的执行过程。
使用方法：
1、检查是否支持web worker
if(typeof(Worker)!=="undefined")
{
// Yes! Web worker support!
// Some code.....
}
else
{
// Sorry! No Web Worker support..
}
2、创建web worker
//实例化的Worker传入唯一一个参数，指向一个javascript文件资源的url或者Blob对象（Blob对象就是一个包含有只读原始数据类文件对象），调用这个构造函数之后，一个线程就被创建了。
var worker = new Worker("worker.js");
var worker = new Worker(blob);
（3）传递参数
Web Worker的基本原理就是在当前的主线程中加载一个只读文件来创建一个新的线程，两个线程同时存在，且互不阻塞，并且在子线程与主线程之间提供了数据交换的接口postMessage和onmessage。来进行发送数据和接收数据。
（4）接收信息
worker.onmessage = function (e) {
var message = e.data;
};
（5）结束worker
~2 websocket
WebSocket 是一种网络通信协议，很多高级功能都需要它。可以弥补HTTP协议的通信只能由客户端发起的缺陷。所有浏览器都已经支持了websocket。
详细的可以看阮一峰写的有关websocket教程，比较易懂点
http://www.ruanyifeng.com/blog/2017/05/websocket.html
~3 Geolocation
html5 Geolocation API 使用很简单，请求一个位置信息，如果用户同意，浏览器会返回一个位置信息，该位置是通过用户的底层设备（手机，电脑）提供给浏览器。位置信息一般包括经度和纬度信息.
使用方法：
```javascript
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else
{
x.innerHTML="该浏览器不支持获取地理位置。";
}
}
function showPosition(position)
{
x.innerHTML="纬度: " + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
这些都是根据网上的有关学习资料整理的，希望可以帮助到同样在学习前端的同学
![主流浏览器四大综合性能测试[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)