HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。

 

　　HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。

 

　　HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

 

　　HTML5 是 W3C 与 WHATWG 合作的结果。

 

　　WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

 

　　为 HTML5 建立的一些规则：

 

　　1.新特性应该基于 HTML、CSS、DOM 以及 JavaScript。

 

　　2.减少对外部插件的需求（比如 Flash）

 

　　3.更优秀的错误处理

 

　　4.更多取代脚本的标记

 

　　5.HTML5 应该独立于设备

 

　　6.开发进程应对公众透明

 

　　HTML5 中的一些有趣的新特性：

 

　　1.用于绘画的 canvas 元素

 

　　2.用于媒介回放的 video 和 audio 元素

 

　　3.对本地离线存储的更好的支持

 

　　4.新的特殊内容元素，比如 article、footer、header、nav、section

 

　　5.新的表单控件，比如 calendar、date、time、email、url、search

 

　　最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

 

　　HTML5 <video> 元素同样拥有方法、属性和事件。

 

　　其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。

 

　　下例中简单的方法，向我们演示了如何使用 <video> 元素，读取并设置属性，以及如何调用方法。

 

　　拖放（Drag 和 drop）是 HTML5 标准的组成部分。

 

　　拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

 

　　在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

 

　　下面的例子是一个简单的拖放实例：

 

　　然后，规定当元素被拖动时，会发生什么。

 

　　在上面的例子中，ondragstart 属性调用了一个函数，drag（event），它规定了被拖动的数据。

 

　　dataTransfer.setData（） 方法设置被拖数据的数据类型和值：

 

　　在这个例子中，数据类型是 "Text"，值是可拖动元素的 id （"drag1"）。

 

　　ondragover 事件规定在何处放置被拖动的数据。

 

　　默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

 

　　这要通过调用 ondragover 事件的 event.preventDefault（） 方法：

 

　　当放置被拖数据时，会发生 drop 事件。

 

　　在上面的例子中，ondrop 属性调用了一个函数，drop（event）。

 

　　调用 preventDefault（） 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）

 

　　通过 dataTransfer.getData（"Text"） 方法获得被拖的数据。该方法将返回在 setData（） 方法中设置为相同类型的任何数据。

 

　　被拖数据是被拖元素的 id （"drag1"）

 

　　把被拖元素追加到放置元素（目标元素）中

 

　　HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

 

　　画布是一个矩形区域，您可以控制其每一像素。

 

　　canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

 

　　向 HTML5 页面添加 canvas 元素。

 

　　规定元素的 id、宽度和高度：

 

　　canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

 

　　JavaScript 使用 id 来寻找 canvas 元素：

 

　　然后，创建 context 对象：