HTML5 的新特性：
①、用于绘画的 canvas 元素。
②、用于媒介回放的 video 和 audio 元素。
③、对本地离线存储的更好的支持。
④、本地 SQL 数据。
⑤、新的特殊内容元素，比如 article、header、nav、footer、section。
⑥、新的表单控件，比如 calendar、date、time、email、url、search。
HTML5 图形
使用 HTML5 可以简单的绘制图形：
可以使用 <canvas> 元素，内联 SVG。
CSS3 提供了一些新选择器，新属性。
HTML5 使用 CSS3 可以实现 2D/3D 转换，动画，圆角、阴影效果，还可以下载字体。
HTML5 多媒体
使用 HTML5 可以简单的在网页中播放音频和视频：
<audio> 可用于播放音频，<video> 可用于播放视频。
如需播放音频，则使用以下代码：
<audio controls autoplay>
<source src="audio/彼岸.mp3" type="audio/mpeg">
<source src="audio/平凡之路.ogg" type="audio/ogg">
</audio>
如需播放视频，则使用以下代码：
<video width="320px" height="240px" controls autoplay>
<source src="video/预谋.mp4" type="video/mp4">
<source src="video/如果你也听说.webm" type="video/webm">
</video>
controls 属性供添加播放、暂停和音量控件。autoplay 属性则在准备就绪后马上播放。
<audio> 元素定义音频。<video> 元素定义视频。
使用 JavaScript 来绘制图形
首先，JS 通过设置的 ID 属性获取 <canvas> 元素： var c = document.getElementById("myCanvas");
然后，创建 context 对象： var ctx = c.getContext("2d"); getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
最后的两行代码用于绘制一个红色背景的矩形： ctx.fillStyle = "#FF0000"; ctx.fillRect(0,0,150,75);
fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。
设置 fillStyle 属性可以是 CSS 颜色，渐变，或图案。fillStyle 默认设置是 #000000（黑色）。
fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
理解 Canvas 坐标
canvas 是一个二维网格，左上角坐标为 (0,0)。
上面代码中的 fillRect 方法拥有参数 (0,0,150,75)，意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
Canvas 绘制路径
moveTo() 把路径移动到画布中的指定点，不创建线条
lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条
stroke() 绘制已定义的路径
arc() 创建弧/曲线（用于创建圆形或部分圆）
arcTo() 创建两切线之间的弧/曲线
beginPath() 起始一条路径，或重置当前路径
closePath() 创建从当前点回到起始点的路径
fill() 填充当前绘图（路径）
clip() 从原始画布剪切任意形状和尺寸的区域
isPointInPath() 如果指定的点位于当前路径中，则返回 true，否则返回 false
在 Canvas 上画线，我们将使用以下两种方法：
①：moveTo(x,y) 定义线条开始坐标。
②：lineTo(x,y) 定义线条结束坐标。
最后通过 stroke() 方法来绘制当前路径。
Canvas 线条样式：
lineWidth 属性设置或返回当前线条的宽度
lineJoin 属性设置或返回所创建边角的类型
lineCap 属性设置或返回线条末端线帽的样式
miterLimit 属性设置或返回最大斜接长度
Canvas 图像
使用 canvas 可以把一幅图像放置到画布上 drawImage(img,x,y);
在画布上定位图像，并规定图像的宽度和高度： context.drawImage(img,x,y,width,height);
HTML5 新的 input 类型
color 类型用在 input 字段主要用于选取颜色。 选择你喜欢的颜色: <input type="color" name="lovecolor" />
search 类型用于搜索域，比如站点搜索或 Google 搜索。
url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。
email 类型用于应该包含 E-mail 地址的输入域。在提交表单时，会自动验证 email 域的值是否合法有效：
tel 类型定义输入电话号码字段。
number 类型用于应该包含数值的输入域，输入数字的字段，支持设定对所接受的数字的限定。
range 类型用于应该包含一定范围内数字值的输入域，用于精确值不重要的输入数字的控件，该类型显示为滑动条。
time 类型允许你选择一个时间，用于输入时间的控件，不带时区。
month 类型允许你选择一个月份，month 和 year 控件，不带时区。
week 类型允许你选择周和年，week 和 year 控件，不带时区。
date 类型允许你从一个日期选择器选择一个日期，date 控件，包括年、月、日，不包括时间。
HTML 5一些新的标签用法
<article>标签定义外部的内容。 <article></article>
<aside>标签定义 article 以外的内容。 <aside>Aside 的内容是独立的内容，但应与文档内容相关。</aside>
<audio> 标签定义声音，比如音乐或其他音频流。 <audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>
<canvas> 标签定义图形，比如图表和其他图像。 <canvas id="myCanvas" width="200" height="200"></canvas>
<command> 标签定义命令按钮，比如单选按钮、复选框或按钮。 <command onclick=cut()" label="cut">
<datalist> 标签定义可选数据的列表。 <datalist></datalist>
<details> 标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。 <details></details>
<embed> 标签定义嵌入的内容，比如插件。 <embed src="horse.wav" />
<figcaption> 标签定义 figure 元素的标题。 <figure><figcaption>PRC</figcaption></figure>
<figure> 标签用于对元素进行组合。 <figure><figcaption>PRC</figcaption><p>The People's Republic of China was born in 1949...</p></figure>
<footer> 标签定义 section 或 document 的页脚。
<header> 标签定义 section 或 document 的页眉。
<hgroup> 标签用于对网页或区段（section）的标题进行组合。
<keygen> 标签定义生成密钥。
<mark>主要用来在视觉上向用户呈现那些需要突出的文字。
<nav> 标签定义导航链接的部分。
