1.将 HTML5 元素定义为块元素
HTML5 定了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是 块级 元素。
为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:
header, section, footer, aside, nav, main, article, figure {
display: block;
}
2.为 HTML 添加新元素(自定义元素，这个牛)
你可以为 HTML 添加新的元素。
该实例向 HTML 添加的新的元素，并为该元素定义样式，元素名为 <myHero> ：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>为 HTML 添加新元素</title>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
<myHero>我的第一个新元素</myHero>
</body>
</html>
3.什么是 Canvas?
HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。
一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制.
注意: 默认情况下 <canvas> 元素没有边框和内容。
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成.
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=document.getElementById("myCanvas");//得到元素
var ctx=c.getContext("2d");//得到画笔
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
4.SVG优势
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
实际例子
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
SVG 与 Canvas两者间的区别
SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
Canvas 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG不适合游戏应用
5.HTML5 MathML显示数学公式，估计实际用处不大，除非学校和科研机构
HTML5 可以在文档中使用 MathML 元素，对应的标签是 <math>...</math> 。
MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。
可惜，chrome和ie不支持，要使用别的库来支持了，下面是兼容的：
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<msup><mi>a</mi><mn>2</mn></msup>
<mo>+</mo>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>=</mo>
<msup><mi>c</mi><mn>2</mn></msup>
</mrow>
</math>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
6.拖放
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
//在默认情况下，
// 一个元素是不能放置到另一个元素里的，
// 如果要实现拖放的功能，则需要在ondragover事件中需要加上event.preventDefault()
//阻止默认行为，否则ondrop就不会执行了
}
function drag(ev)
{
//将元素的数据暂存于"Hello"字典中
ev.dataTransfer.setData("Hello",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
//调用 preventDefault() 来避免浏览器对数据的默认处理
//（drop 事件的默认行为是以链接形式打开）
var data=ev.dataTransfer.getData("Hello");//获取数据
ev.target.appendChild(document.getElementById(data));//添加一个子元素
}
</script>
<p draggable="true" id="test" ondragstart="drag(event)">拖动 RUNOOB.COM 图片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="./voice_rcd_btn_nor.9.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
被拖动的元素:
需要三个条件draggable="true" ---允许被拖动
id="test"--设置一个ID号 ondragstart="drag(event)"--开始拖动的时候，把数据暂存
7.HTML5 - 使用地理定位也要借用javascript的
请使用 getCurrentPosition() 方法来获得用户的位置。
实际的例子：
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<script>
window.onload=function()//是window而不是document
{
window.x=document.getElementById("demo");
//如果使用var x的话，在外面函数无法访问x的
}
function getLocation()
{
if (navigator.geolocation)
{
//注意，是异步的调用的
navigator.geolocation.getCurrentPosition(showPosition);
}
else
{
x.innerHTML="该浏览器不支持获取地理位置。";
}
}
function showPosition(position)
{
x.innerHTML="纬度: " + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
}
</script>
扩展是在百度地图google地图显示具体位置，这个需要去看它们的接口文档了。
8.视频播放，太简单了吧
<video width="320" height="240" controls>//这里写了controls才会有控制按键，不写没有按键的
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
HTML5 <video> - 使用 DOM 进行控制
HTML5 <video> 和 <audio> 元素同样拥有方法、属性和事件。
<video> 和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制.
其中的方法有用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。
9.HTML5 新的表单属性
HTML5 的 <form> 和 <input>标签添加了几个新属性.
<form>新属性：
autocomplete//自动完成
novalidate//不验证正确性
<input>新属性：
autocomplete//自动完成
autofocus//自动获取焦点
form//form 属性规定输入域所属的一个或多个表单，但是多个好像并不支持
formaction//属性用于描述表单提交的URL地址,属性会覆盖<form> 元素中的action属性.
formenctype//属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)
formmethod//属性覆盖了 <form> 元素的的method 属性
formnovalidate//属性是一个 boolean 属性,属性描述了 <input> 元素在表单提交时无需被验证
formtarget
height 与 width
list
min 与 max
multiple//属性是一个 boolean 属性,属性适用于以下类型的 <input> 标签：email 和 file,属性规定<input> 元素中可选择多个值
pattern (regexp)//属性描述了一个正则表达式用于验证 <input> 元素的值
placeholder//属性提供一种提示（hint），描述输入域所期待的值
required//属性规定必须在提交之前填写输入域（不能为空）
step
//step 属性为输入域规定合法的数字间隔。
//如果 step="3"，则合法的数是 -3,0,3,6 等
//提示： step 属性可以与 max 和 min 属性创建一个区域值.
10.HTML5中新的语义元素
许多现有网站都包含以下HTML代码： <div id="nav">, <div class="header">, 或者 <div id="footer">, 来指明导航链接, 头部, 以及尾部.
HTML5提供了新的语义元素来明确一个Web页面的不同部分:
- <header>
- <nav>
- <section>
- <article>
- <aside>
- <figcaption>//图片的标题而已
- <figure>//代替image而已
-
<footer>
img_sem_elements.gif
<figure>
<figcaption>黄浦江上的的卢浦大桥</figcaption>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
11.什么是 HTML5 Web 存储?
使用HTML5可以在本地存储用户的浏览数据。
早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.
数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
客户端存储数据的两个对象为：
localStorage - 没有时间限制的数据存储,第二天、第二周或下一年之后，数据依然可用
sessionStorage - 针对一个 session 的数据存储
不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
{
if (localStorage.clickwwcount)
{
//无需使用set也行，直接赋值
localStorage.clickwwcount=Number(localStorage.clickwwcount)+1;
}
else
{
localStorage.clickwwcount=1;
}
document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickwwcount + " 次 ";
}
else
{
document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">点我！</button></p>
<div id="result"></div>
<p>点击</p>
<p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将继续计数(不是重置)。</p>
12.什么是 Web Worker？
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
例子
