前言
什么是HTML5:HTML5 是下一代的HTML,将成为 HTML、XHTML 以及 HTML DOM 的新标准。今天来谈谈前端面试中基本上每次一面的时候都会被问到的一个问题，那就是html5的新特性。这个是学习前端必须掌握的基础知识。
新增的元素
html5新增了一些语义化更好的标签元素。
结构元素
article元素，表示页面中的一块与上下文不相关的独立内容，比如博客中的一篇文章。
aside元素，表示article内容之外的内容，辅助信息。
header元素，表示页面中一个内容区块或整个页面的页眉。
hgroup元素，用于对页面中一个区块或整个页面的标题进行组合。
footer元素，表示页面中一个内容区块或整个页面的页脚。
figure元素，表示媒介内容的分组，以及它们的标题。
section元素，表示页面中一个内容区块，比如章节。
nav元素，表示页面中的导航链接。
其他元素
video元素，用来定义视频。
audio元素，用来定义音频。
canvas元素，用来展示图形，该元素本身没有行为，仅提供一块画布。
embed元素，用来插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3等。
mark元素，用来展示高亮的文字。
progress元素，用来展示任何类型的任务的进度。
meter元素，表示度量衡，定义预定义范围内的度量。
time元素，用来展示日期或者时间。
command元素，表示命令按钮。
details元素，用来展示用户要求得到并且可以得到的细节信息。
summary元素，用来为details元素定义可见的标题。
datalist元素，用来展示可选的数据列表，与input元素配合使用，可以制作出输入值的下拉列表。
datagrid元素，也用来展示可选的数据列表，以树形列表的形式来显示。
keygen元素，表示生成密匙。
output元素，表示不同类型的输出。
source元素，为媒介元素定义媒介资源。
menu元素，表示菜单列表。
ruby元素，表示ruby注释， rt元素表示字符的解释或发音。 rp元素在ruby注释中使用，以定义不支持ruby元素的浏览器所显示的内容。
wbr元素，表示软换行。与br元素的区别是：br元素表示此处必须换行，而wbr元素的意思是浏览器窗口或父级元素的宽度够宽时。不进行换行，而当宽度不够时，主动在此处进行换行。
bdi元素，定义文本的文本方向，使其脱离其周围文本的方向设置。
dialog元素，表示对话框或窗口。
废除的元素
html5中废除了一些纯表现的元素，只有部分浏览器支持的元素还有一些会对可用性产生负面影响的元素。
纯表现元素
纯表现的元素就是那些可以用css替代的元素。basefont、big、center、font、s、strike、tt、u这些元素，他们的功能都是纯粹为页面展示服务的，html5提倡把页面展示性功能放在css样式表中统一处理，所以将这些元素废除，用css样式进行替代。
对可用性产生负面影响的元素
对于frameset元素、frame元素与noframes元素，由于frame框架对网页可用性存在负面影响，在html5中已不支持frame框架，只支持iframe框架，html5中同时将frameset、frame和noframes这三个元素废除。
只有部分浏览器支持的元素
对于applet、bgsound、blink、marquee等元素，由于只有部分浏览器支持，特别是bgsound元素以及marquee元素，只被IE支持，所以在html5中被废除。其中applet元素可由embed元素或object元素替代，bgsound元素可由audio元素替代，marquee可以由javascript编程的方式替代。
新增的API
Canvas API
上文提到的canvas元素可以为页面提供一块画布来展示图形。结合Canvas API，就可以在这块画布上动态生成和展示各种图形、图表、图像以及动画了。Canvas本质上是位图画布，不可缩放，绘制出来的对象不属于页面DOM结构或者任何命名空间。不需要将每个图元当做对象存储，执行性能非常好。
利用Canvas API进行绘图，首先要获取canvas元素的上下文，然后用该上下文中封装的各种绘图功能进行绘图。
<canvas id="canvas">替代内容</canvas>
<script>
var canvas = document.getElementById('canvas');
var context =canvas.getContext("2d"); // 获取上下文
//设置纯色
context.fillStyle = "red";
context.strokeStyle = "blue";
// 实践表明在不设置fillStyle下的默认fillStyle为black
context.fillRect(0, 0, 100, 100);
// 实践表明在不设置strokeStyle下的默认strokeStyle为black
context.strokeRect(120, 0, 100, 100);
</script>SVG
SVG是html5的另一项图形功能，它是一种标准的矢量图形，是一种文件格式，有自己的API。html5引入了内联SVG，使得SVG元素可以直接出现在html标记中。
<svg height=100 width=100><circle cx=50 cy=50 r=50 /></svg>
音频和视频
audio和video元素的出现让html5的媒体应用多了新选择，开发人员不必使用插件就能播放音频和视频。对于这两个元素，html5规范提供了通用、完整、可脚本化控制的API。
html5规范出来之前，在页面中播放视频的典型方式是使用Flash、QuickTime或者Windows Media插件往html中嵌入音频视频，相对这种方式，使用html5的媒体标签有两大好处。
作为浏览器原生支持的功能，新的audio和video元素无需安装。
媒体元素想Web页面提供了通用、集成和可脚本化控制的API。
<video src="video.webm" controls>
<object data="videoplayer.swf" type="application/x-shockwave-flash">
<param name="movie" value="video.swf" />
</object>
Your browser does not support HTML5 video.
</video>浏览器支持性检测
浏览器检测是否支持audio元素或者video元素最简单的方式是用脚本动态创建它，然后检测特定函数是否存在。
var hasVideo = !!(document.createElement('video').canPlayType);Geolocation API
html5的Geolocation API（地理定位API），可以请求用户共享他们的位置。使用方法非常简单，如果用户同意，浏览器就会返回位置信息，该位置信息是通过支持html5地理定位功能的底层设备（如笔记本电脑或手机）提供给浏览器的。位置信息由纬度、经度坐标和一些其他元数据组成。
位置信息从何而来
Geolocation API不指定设备使用哪种底层技术来定位应用程序的用户。相反，它只是用于检索位置信息的API，而且通过该API检索到的数据只具有某种程度的准确性，并不能保证设备返回的位置是精确的。设备可以使用下列数据源：
IP地址
三维坐标
GPS
从RFID、WiFi和蓝牙到WiFi的MAC地址GSM或CDMA手机的ID
用户自定义数据
使用方法
// 一次更新
navigator.geolocation.getCurrentPosition(updateLocation, handleLocationEror);
function updateLocation(position) {
var latitude = position.coords.latitude; // 纬度
var longitude = position.coords.longitude; // 经度
var accuracy = position.coords.accuracy; // 准确度
var timestamp = position.coords.timestamp; // 时间戳
}
// 错误处理函数
function handleLocationEror(error) {
....
}
// 重复更新
navigator.geolocation.watchPosition(updateLocation, handleLocationEror);
// 不再接受位置更新
navigator.geolocation.clearWatch(watchId);