HTML5新特性介绍

作为HTML标准的下一个版本，HTML5包含了很多新特性，例如内建的视频、音频标记，元素拖放功能。这篇博文将选择其中几个非常吸引人的特性进行仔细介绍，让大家对HTML5能有个"管中窥豹――可见一般"。

写在最前

作为HTML 4.1、XHTML 1.0和DOM Level 2 HTML的后续标准， HTML5包含了非常多的内容和新特性。其宗旨就是要制定一套Web富客户端开发的工业标准，从而让开发人员和用户从目前各个不同的客户端平台（例如Flash，SilverLight）独立出来。HTML5标准组织于2004年成立并在2008年1月发布了第一个标准草案。该标准草案得到了大量公司的支持（其中Google和Apple就是两大最积极的巨头。大家可能都知道Apple最新的产品iPad就不支持Flash。其原因之一就是Apple更认同HTML5会是未来的发展方向）。尽管这个标准草案仍然在不断修改中，但其中的很多新特性已经得到主流浏览器的支持（如FireFox，Safari和Opera。其中Opera对HTML5的支持最好；IE在HTML5上基本没多少支持，但微软也在积极努力中）。比如画布元素在除IE外的其他浏览器的最新版本中都得到了实现。你可以在Wiki中找到HTML5新特性在目前最主流浏览器上的支持情况。在下面的介绍中，我会列出支持该特性的所有浏览器，请下载该浏览器的最新版本运行相应的例子代码。

元素拖放

支持浏览器：FireFox，Safari

根据以前的HTML/XHTML标准，所有的页面元素都是放到页面上的固定位置。开发人员可以通过设置CSS属性来调整元素的页面位置。所以HTML标准本身不支持拖放功能。为了实现和桌面操作系统(如Windows)一样的用户体验，很多公司和开源组织开发了专门的JavaScript库来支持这一点，例如YUI。在HTML5标准中，元素的拖放特性将包括在其中。这就意味所有支持HTML5的浏览器都必须支持这一特性。开发人员也就不必为支持这一功能来包含一个第三方的JavaScript库。下面用一个最简单的实例解释该功能：

STEP1：新建HTML页面，添加一个DIV作为被拖放 (Drag) 的元素，设置它的draggable属性为true（draggable属性是HTML5中定义的新元素属性，其默认值为false）。

<div id='drag' draggable='true'>drag me</div>

STEP2: 添加一个DIV作为拖动的目标区域 (Drop) 元素。

<div id='drop' style='300px; height: 300px; border: solid 1px #0000ff'></div>

STEP3: 添加相应是事件处理函数。HTML5为拖放特性添加了一组事件，如dragstart, dragover, dragenter, drop.

var dragEl = document.getElementById('drag'); dragEl.addEventListener('dragstart', function (e) { e.dataTransfer.setData("arbitrary","draggable"); return true;}, true); var dropEl = document.getElementById('drop'); dropEl.addEventListener('dragover', function (e) { e.preventDefault();}, true); dropEl.addEventListener('dragenter', function(e) {e.preventDefault();}, true); dropEl.addEventListener('drop', function (e) {e.stopPropagation(); this.innerHTML = '<p>' + e.dataTransfer.getData('arbitrary') + '</p>'; }, true);

STEP4: 在FireFox或者Safari中打开本页面，拖动drag元素到drop元素区域。Drop元素内部会显示draggable文本。

视频与音频

支持浏览器：FireFox，Safari

视频和音频是HTML5中非常重要的新特性。现在的互联网内容中，视频内容已经是必不可少的组成部分。而早期的HTML标准对视频和音频都没有提供支持。于是，各种Web客户端私有平台（如Flash, SilverLight）成为了播放视频、音频内容的主角。作为最新的HTML标准，显然需要支持视频和音频。下面用一个实例说明怎样使用HTML5视频功能（音频功能类似）：

STEP1：创建一个HTML页面，添加HTML视频元素到页面中，并指定视频源。

<video> <source src="dizzy.mp4" mce_src="dizzy.mp4" /> <source src="dizzy.ogv" mce_src="dizzy.ogv" /> </video>

如代码所示，可以在一个Video视频元素中可以添加多个视频源，它们会被顺序播放。

STEP2：添加播放按钮和播放进度显示面板

<p id="controls"> <input type="button" id="play" value="play"> <span id="position">00:00</span> / <span id="duration">loading...</span> </p>

STEP3：添加视频播放控制代码（JavaScript代码）

//获取相应的DOM对象 
var video = document.getElementById('video');
var togglePlay = document.getElementById('play');
var position = document.getElementById('position');
var ready = false;
//注册视频对象事件
video.addEventListener('timeupdate', function () {position.innerHTML = asTime(this.currentTime);}, true);

video.addEventListener('ended', function (){togglePlay.value = "play";}, true);

video.addEventListener('canplay', function () {
  ready = true;
  var durTime = asTime(this.duration);
  document.getElementById('duration').innerHTML = durTime;
}, true);
      
function asTime(t) {
        t = Math.round(t);
        var s = t % 60;
        var m = Math.round(t / 60);
        return two(m) + ':' + two(s);
}
function two(s) {
        s += "";
        if (s.length < 2) s = "0" + s;
        return s;
      }
//注册播放按钮事件
togglePlay.addEventListener('click', function () {
  if (ready) {
    video.playbackRate = 0.5;
    if (video.paused) {
      if (video.ended) 
        video.currentTime = 0;
      video.play();
      this.value = "pause";
    } else {
      video.pause();
      this.value = "play";
    }
 }  
}, true);


 

对应视频对象(Video)中有一组常用的事件，如canplay事件表示视频已经加载完毕，可以开始播放。另外，Video对象最常见的方法就是play和pause。

其他

除掉上面介绍的两个新的特性，HTML5还包含很多非常酷的新功能，它将给Web客户端开放带来很多便利。下面列举其中的一些进行简单介绍。如果感兴趣，可以在网络上找到更多细节。

• 画布元素(canvas)：传统的HTML元素主要用于文本、图像的显示，无法进行绘图操作。比如我们无法在Web页面中绘制股票价格走势图。现在的网站基本上都是嵌入相应的插件（如Javalet）来实现类似功能。Canvas元素就是针对这一需求而设计的。客户端程序（如JavaScript）可以在该元素定义的区域进行任意的2D或3D绘制。最新的WebGL标准就是基于Canvas 元素进行3D绘制。

• 浏览器历史记录管理(Browser History Management)：传统的浏览器只在你加载/刷新页面的时候才会添加历史记录。随着Ajax和富客户端的流行，用户可以在一个页面进行很多操作、并通过Ajax和服务器端通讯。但是所有的这些操作都不需要加载/刷新页面。于是这些操作都无法被传统的浏览器作为历史记录保存下来。用户也就redo/undo这些操作。现在很多Web客户端开发库（如YUI）都已经提供了自己的历史记录管理模块。HTML5也把这个非常常见的功能定义在自己标准中。它通过提供一组API接口可以让用户在任何需要的时候触发浏览器去添加历史记录

• 离线存取数据库(offline storage database)：顾名思义，该功能可以让我们的Web 客户端应用程序在离线状态下工作并在本地存取数据。它可以自动检测当前的网络状态来确定是从本地数据库存取内容、还是和服务器同步数据。现在的Google Gear就是提供类似的功能。这个功能非常有用，比如要在CSDN上面写博客，我们可以直接在页面上编辑而不需要担心数据会丢失。因为浏览器会智能选择把数据实时保存到服务器上还是在本地存取。即使当前没有网络，我们同样可以编写博客（只需要我们以前曾经缓存过相应的页面）并自动保存到本地。当重新连上网络后，所有本地保存的数据又能自动同步到服务器上去。

HTML5还有很多其他新特性，你可以在下面的链接中找到更多信息。随着越来越多大公司的加入，HTML5的发展速度肯定会越来越快。或许很快它就会进入我们的日常开发生活中，它将能够帮助我们解决现在Web富客户端开发的很多问题。HTML5的前景应该会很不错。

更多资源

要想学习HTML5标准的新特性，你可以参考下面几个链接

·         HTML5标准草案：http://dev.w3.org/html5/spec/spec.html

·         HTML5 示例网站：http://html5demos.com/

Del.icio.us : HTML5，视频，音频，元素拖放