文档介绍：
什么是 HTML5?
HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
HTML 的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。
HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。
HTML5 是 W3C 与 WHATWG 合作的结果。
为 HTML5 建立的一些规则:
新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
减少对外部插件的需求(比如 Flash)
更优秀的错误处理
更多取代脚本的标记
HTML5 应该独立于设备
开发进程应对公众透明
新特性
HTML5 中的一些有趣的新特性:
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素,比如 article、footer、header、nav、section
新的表单控件,比如 calendar、date、time、email、url、search
视频格式
当前,video 元素支持三种视频格式:
实例
<video width="320" height="240" controls="controls">
<source src="" type="video/ogg">
<source src="" type="video/mp4">
Your browser does not support the video tag.
</video>
音频格式
当前,audio 元素支持三种音频格式:
实例
<audio controls="controls">
<source src="" type="audio/ogg">
<source src="" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
(Canvas)
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
创建 Canvas 元素
向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度:
<canvas id="myCanvas" width="200" height="100"></canvas>
通过 JavaScript 来绘制
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:
<script type="text/javascript">
var c=("myCanvas");
var cxt=("2d");
="#FF0000";
(0,0,150,75);
</script>
JavaScript 使用 id 来寻找 canvas 元素:
var c=("myCanvas");
然后,创建 context 对象:
var cxt=("2d");
getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形:
="#FF0000";
(0,0,150,75);
fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。
实例- 线条
通过指定从何处开始,在何处结束,来绘制一条线:
JavaScript 代码:
<script type="text/javascript">
var c=("myCanvas");
var cxt=("2d");
(10,10);
(150,50);
(10,50);
();
</script>
canvas 元素:
<canvas id="myCanvas" width="200" height