HTML5的重要性
- 产生于1990年
- 1997年HTML4出现并且持续了10年时间
- 2008年HTML5出现，2012年趋于稳定（移动互联网的红利期）
语义化标签
- 清晰易读
- 有利于SEO，方便搜索引擎识别页面结构
- 方便设备解析，比如盲人阅读
表单功能增强
<form action="" method="get">
<p>邮箱标签: <input type="email"></p>
<p>数字标签: <input type="number"></p>
<p>滑动条标签: <input type="range"></p>
<p>搜索框标签: <input type="search"></p>
<p>日期框: <input type="date"></p>
<p>星期框: <input type="week"></p>
<p>月份框: <input type="month"></p>
<p>颜色框: <input type="color"></p>
<p>网址框: <input type="url"></p>
<div>
<input type="submit">
<input type="reset">
</div>
</form>
音视频标签
在H5之前，网页中内嵌音视频普遍会采用flash实现
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
</video>
画布-canvas+svg
HTML5的canvas元素使用Javascript在网页上绘制图像。
画布是一个矩形区域，可以控制其每一点像素。
canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
<canvas id="myCanvas" width="200" height="100"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
拖放
拖放是很常见的特性，它指的是您抓取某物并拖入不同的位置。拖放是HTML5标准的组成部分：任何元素都是可拖放的。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#div1 {
width: 120px;
height: 120px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>请把图片拖放到矩形中：</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img
id="drag1"
src="img.png"
draggable="true"
ondragstart="drag(event)"
/>
</body>
</html>
本地存储
通过本地存储（Local Storage）,web应用程序能够在用户浏览器中对数据进行本地的存储。
在HTML5之前，应用程序数据只能存储在cookie中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储与本地。
与cookie不同，存储限制要大的多（至少5MB），并且信息不会被传输到服务器。
本地存储经由起源地（origin）（经由域和协议）。所有页面，从起源地，能够存储和访问相同的数据。
Web Worker
挡在HTML页面中执行监本是，页面是不可响应的，知道脚本已完成。
Web Worker是运行在后台的Javascript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时web worker运行在后台
地理定位
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
</script>
可编辑内容
它被广泛的应用，比如很多网页编辑器。内容切换编辑状态等等，都可以通过这个属性来实现。
<div class="edit" contenteditable='true'></div>
