新特性
HTML5 中的一些有趣的新特性：
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search
h5浏览器支持
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
视频标签video
video目前支持三种类型的视频格式
| 格式 | 说明 |
|---|---|
| agg | 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 |
| MPEG4 | 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 |
| WebM | 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 |
video元素事件和方法
常用方法：play , pause,
常用属性
| 属性 | 说明 |
|---|---|
| currentSrc | 返回当前资源的URL |
| currentTime | 当前播放的位置，赋值可改变位置 |
| videoWidth | 播放器宽度 |
| videoHeight | 播放器高度 |
| duration | 当前资源长度 |
| ended | 是否结束 |
| error | null:正常 |
| paused | 是否暂停状态 |
| muted | 静音 |
| seeking | 是否正在seeking |
| volume | 音量 |
| height | 视频高度 |
| width | 视频宽度 |
注意点：
control 属性供添加播放、暂停和音量控件。
<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的
在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。
视频播放器自定义
音频标签audio
大多数浏览器通过flash插件来支持音频播放，但是并不是所有的浏览器都支持该插件（基于安全性的考虑flash一直在安全性诟病）.
audio 元素能够播放声音文件或者音频流。
<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>
ogg格式的音频不支持Safari浏览器，适用于Firefox、Opera 以及 Chrome 浏览器。
要确保适用于 Safari 浏览器，音频文件必须是 MP3 或 Wav 类型。
使用如下代码
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
source标签可以有多个，浏览器会自动选择适合的source进行播放。
darg拖放
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
为了使元素可拖动，把 draggable 属性设置为 true ：
<img draggable="true" />
事例代码
<!DOCTYPE HTML>
<html>
<head>
<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>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />
</body>
</html>
拖动开始的时候触发drag(event)方法
设置拖动的数据：数据类型是 "Text"，值是可拖动元素的 id ("drag1")。
在放下的时候触发allowDrop(event)方法，在该方法中取消了默认对元素的处理方式。调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目标元素）中
canvas绘制图形标签（画布）
canvas元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
<canvas> 标记和 SVG 以及 VML 之间的一个重要的不同是，<canvas> 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：绘制一个长方形
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
SVG
- 什么是SVG？
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准 - 优势
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大 - 例子
<!DOCTYPE html>
<html>
<body>
<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>
</body>
</html>
