文章介绍:介绍了HTML5 中较HTML新增的特性
1，HTML5的新标签
即使是组织良好的HTML页面，对其代码的阅读与解释都会比想象中困难得多，主要原因是标签本身包含的语义信息很少。像边栏，标题和页脚，导航元素这些页面组成部分都被包含在<div>这样的通用元素里，只能根据开发人员设置的id和类名进行区分。
HTML5添加的新元素更容易识别，也更容易明确其中的内容。下面是一些HTML5中的新标签。
<section>：定义页面的区域 <header>：页面标题 <footer>：页面页脚 <nav>：页面导航元素
<article>：页面的文章或主要内容 <aside>：页面的附加内容，比如边栏 <figure>：文章的配图
<figcaption>：<figure>元素的标题 <summary>：<details>元素的可视标题
2，一些重要的新元素
（1）使用<video>回放视频
视频在Web上是很流行的，然而，实现视频的方法是多种多样的，视频的回放是通过使用插件来实现的，比如Flash,Windows Media或者苹果的QuickTime等插件。能够在一个浏览器中嵌入这些元素的标签在另一个浏览器中不一定能够正常使用。
HTML提供了一个崭新的<video>元素，其目标是嵌入任何一种视频格式。
使用新的<video>标签，可以像下面这样实现QuickTime视频:
<video src="video.mov" />
到目前为止，<video>元素应该支持什么视频格式还处于讨论之中，还在寻找不需要专门许可的解码器。目前，解决这个问题的方式是引用多个格式，还不必使用浏览器所需要的功能嗅探。当前获得广泛支持的视频格式有3种:MP4,WebM和Ogg。
<video id="vid1" width="400" height="500" controls="controls" > <source src="1.mp4" type="video/mp4" /> <source src="1.mp4" type="video/ogg" /> <source src="1.mp4" type="video/webm" /> <p>这里本来是有段视频的，但你的浏览器不支持</p> </video>
给<video>元素指定宽度和高度是一个很好的习惯，否则浏览器不知道应该保留多大面积的区域，会导致视频加载时改变布局。还建议在<video>和</video>之间设置一些文本，用于在不支持<video>标签的浏览器里显示
<video>标签有一些重要的属性，如:
loop:循环播放 autoplay:视频加载后自动播放 controls：显示回放控件（其外观取决于浏览器）
ended：回放结束时，值为true(只读) paused：暂停时，值为true(只读)
poster：设置影片加载时显示的图像 volume：音量，值是从0（静音）到1（最大）
（2）利用canPlayType()测试可用的格式
利用javascript的media.canPlayType（type）方法可以检查对特定编解码器的支持，其中type是表示媒体类型的字符串，比如"video/webm"。如果浏览器确定支持指定格式，方法会返回"probably",其他情况就返回"maybe"。
（3）控制回放
利用pause()和play()命令也可以控制视频回放，像下面这样：
var myVideo = document.getElementById("vid1").play();
var myVideo = document.getElementById("vid1").pause();
（4）用<audio>标签播放声音
<audio>元素与<video>很相似，只不过它专门用于处理音频文件。使用<audio>元素最简单的方法是:
<audio src="song.mp3"></audio>
还可以对回放进行更多的控制，比如loop和autoplay:
<audio src="song.mp3" autoplay loop></audio>
像前面处理视频文件一样，我们可以包含多个不同的格式，以确保浏览器可以找到自己能播放的格式，比如下面的代码:
<audio controls = "controls"> <source src="song.ogg" type="audio/ogg"> <source src="song.mp4" type="audio/mpeg"> <p>这里本来是有一段音频的，但是你的浏览器不支持</p> </audio>
<audio>元素支持最常见文件格式是MP3，WAV和Ogg。在javascript里控制音频的方式与针对<video>使用的方法差不多。
利用javascript添加和播发音频文件时，只需要把它当作其中javascript或DOM对象即可:
var soundElement = document.createElement('audio')
soundElement.setAttribute('src','sound.ogg');
soundElement.play();
soundElement.pause();
<audio>和<video>标签有很多可用的属性可用通过javascript进行控制。下面列出了常用的一些，它们作用的效果是立即呈现的:
mediaElement.duration mediaElement.currentTime mediaElement.playbackRate mediaElement.muted
（5）利用<canvas>在页面上绘图
<anvas>标签能够提供的是页面上的一个矩形区域，我们可用利用JavaScript在其中绘制图形与图像，也可用加载和展现图像文件并控制其显示方式，这个元素有很多实用领域，比如动态图表，javascript/HTML游戏和受控动画。
<canvas>元素只是通过它的width和height参数定义一个区域，其他与创建图形内容相关的事情都是通过javascript实现的。canvas 2D API就是绘画方法的一个大集合。
使用<canvas>实现一个移动的圆球的实例:
现在利用<canvas>实现一个简单的动画，就是一个红色圆盘(表示一个球）在页面上以圆形轨迹运动。
页面body部分只需要一个<canvas>即可:
<canvas id ="canvas1" width="400" height="300"> <p>你的浏览器不支持canvas绘图</p> </canvas>
所有的绘图和动画工作都是有javascript完成的。
首先需要指定"渲染环境"。
context = canvas1.getContext('2d');
<canvas>唯一支持的形状是简单的矩形:
fillRect(x,y,width,height); //绘制一个填充的矩形
strokeRect(x,y,width,height); //绘制一个矩形框
clearRect(x,y,width,height); //清除矩形
其他的形状就需要使用一个或多个路径绘制函数才能实现。本例需要绘制一彩色圆盘，现在就来绘制。
<canvas>提供了很多不同路径绘制函数:
moveTo(x,y)
会移动到指定位置，不绘制任何东西
lineTo(x,y)
会从当前位置到指定位置绘制一条直线
arc(x,y,r,startAngle,endAngle,anti)
绘制弧线，圆心位置是x,y, 半径是r，起始角度是startAngle,结束角度是endAngle。默认是顺时针方向绘制，当anti指定为True时，就会一逆时针方向绘制。
为了使用这些基本命令来绘制形状，还需要其他一些方法:
object.beginPath();
object.closePath(); //完成剩余形状部分
object.stroke(); //绘制轮廓部分
object.fill(); //绘制填充形状
#如果使用了.fill()方法，一个打开的形状会自动变为闭合的，就不必在用closePath()方法了。
为了得到范例需要的球体，我们要绘制一个填充的圆形，颜色是红色，半径是15，圆心是50，50:
function paint(){
context.beginPath();
context.fillStyle = "#ff0000";
context.arc(x,y,6,0,Math.PI*2,false);
context.closePath();
context.fill();
}
为了实现动画效果，需要用一个定时器修改圆心的x,y坐标。
function animate(){
context.clearRect(0,0,400,300);
counter++
x += 40*Math.sin(counter);
y += 40*Math.cos(counter);
paint();
}
setInterval()方法会重复调用这个animate()函数。这个函数每次被调用时，首先用clearRect()方法清除绘制区域，然后遍历counter的值会增加，以此作为圆形的新的圆心坐标。
完整的代码如程序清单所示:
<!Doctype HTML>
<html>
<head>
<title>使用canvas实现一个圆球在左面运动</title>
<script>
var context;
var x = 50;
var y = 50;
var counter = 0;
function paint(){
context.beginPath();
context.fillStyle = "#ff0000";
context.arc(x,y,6,0,Math.PI*2,false);
context.closePath();
context.fill();
}
function animate(){
context.clearRect(0,0,400,300);
counter++
x += 40*Math.sin(counter);
y += 40*Math.cos(counter);
paint();
}
window.onload = function(){
context = canvas1.getContext('2d');
setInterval(animate,10);
}
</script>
</head>
<body>
<canvas id ="canvas1" width="400" height="300">
<p>你的浏览器不支持canvas绘图</p>
</canvas>
</body>
</html>
3，拖放
拖放操作是HTML5标准的组成部分，几乎页面上所有元素都是可拖放的。
想让元素是可用拖动的，只需要把它的draggable属性设置为true:
<img draggable = "true" />
但是拖动操作本身并没有太大的实际意义，被拖动的元素需要能够被放下才有实际意义。
为了定义元素能够被放到什么地方，并且控制拖动和放下的过程，我们需要编写事件监听器来检测和控制拖放过程的各个部分。
能够用于控制拖放操作的事件有:
dragstart drag dragenter dragleave dragover drop dragend
为了控制拖放操作，我们需要定义源元素(拖放开始的地方)，数据(拖动的对象)和放置位置(捕获拖动元素的区域)。
#不是任何任何元素都能作为放置区域的，比如<img>就不能接受放置操作。
dataTransfer属性包含的数据会在拖放操作中进行传递，它通常在dragstart事件处理器里进行设置，有drop事件处理器进行读取和处理。
setDate(format.data)和getData((format,data)分别用于这个属性的设置和读取
HTML5里的拖放操作
现在来体会一下HTML5拖放界面，代码如程序清单所示
<!Doctype HTML>
<html>
<head>
<title>HTML3 拖放操作示例 </title>
<style>
body{background-color:#ddd;font-family:arial,verdana,sans-serif;}
#drop1{width:200px;height:200px;border:1px solid black;background-color:white}
#drag1{width:50px; height:50px;}
</style>
<script>
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev){
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
window.onload = function(){
var dragged = document.getElementById("drag1");
var drophere = document.getElementById("drop1");
dragged.ondragstart = drag;
drophere.ondragover = allowDrop;
drophere.ondrop = drop;
}
</script>
</head>
<body>
<div id="drop1"></div>
<p>把图片拖动到矩形区域内</p>
<img id="drag1" src="1.png" draggable="true" />
</body>
</html>
为了达到示范的目的，代码里先定义了一些HTML元素，id为drop1的<div>元素是捕获拖放操作的放置区域，而id为drag1的图像元素是要拖动的元素。
代码里定义了3个重要的函数，它们都会接收到当前处理的事件。ev.target在后台会基于拖放操作的状态而自动修改为相应的事件类型。
函数drag(ev)在拖放开始时执行，它把dataTransfer属性设置为拖放元素的id:
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
函数allowDrop(ev)在拖放元素经过放置区域时执行，它的作用就是阻止放置区域执行默认操作(因为默认的行为就是不允许拖动):
function allowDrop(ev){
ev.preventDefault();
}
函数drop(ev)会在拖动元素被放下时执行，它会读取dataTransfer属性的值来获得拖动元素的id，把这个元素设置为放置区域的子元素。这时仍然需要阻止放置区域执行默认操作:
function drop(ev){
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
文件加载在浏览器后的效果如图所示，可用把图像拖动到放置区域
4，本地存储
HTML5能够在用户的浏览器里保存大量数据，同时不会对站点的性能造成任何影响。与使用cookies相比，web存储更加安全和快速。与cookie相同的是，数据也是以"关键字/值"对的方式存储的，而且web页面只能访问自己存储的数据。
在浏览器里实现本地数据存储的两个新对象如下:
- localStorage：存储数据，没有过期时间
- sessionStorage：只在当前会话中存储数据。
如果不你那个确定浏览器是否支持本地存储，解决的方法仍然是使用功能检测:
if(typeof(Storage)!="undefined"){
...使用两个新对象进行操作...
}
保存数据的方式有两种。一种是调用setItem方法，向它传递一个关键字和一个值:
localStorage.setItem("key","value");
另一种方式是像操作关联数组一样使用localStorage对象:
localStorage["key"] = "value";
获取数据时也可用使用以下两种方式之一:
alert(localStorage.getItem("key"));
或
alert(localStorage["key"])
5，操作本地文件
HTML5的文件API规范让我们终于有一种标准方式来访问用户的本地文件了，具体途径有很多种。
- File：提供的信息包括名称，大小和MIME类型，以及对文件句柄的引用
- FileList：类似数组的File对象列表
- FileReader：使用File和FileList异步读取文件的接口。我们可用查看读取进程，捕获错误，判断文件何时加载完成。
利用检测功能查看浏览器是否支持文件API：
if(window.file && window.FileReader && window.FileList){
//进行操作
}
与本地文件系统交互
我们将修改前一个拖放操作的范例，实现多个本地文件拖放到Web页面的操作。要做到这一点，方法是使用FileList数据结构。
修改后的drop(ev)函数是这样的：
function frop(ev){
var files = ev.dataTransfer.files;
for(var i = 0;i<files.length;i++){
var f = files[i];
var pnode = document.createElement("p")
var tnode = document.createTextNode(f.name + "("+ f.type +")" + f.size + "bytes");
pnode.appendChild(tnode);
ev.target.appendChild(pnode);
}
ev.preventDefault();
}
在这里，程序从dataTransfer对象提取了FileList，它包含了拖放文件的信息：
var files = ev.dataTransfer.files;
然后依次处理每个文件:
for(var i = 0;i<files.length;i++){
var f = files[i];
var pnode = document.createElement("p")
var tnode = document.createTextNode(f.name + "("+ f.type +")" + f.size + "bytes");
pnode.appendChild(tnode);
ev.target.appendChild(pnode);
}
程序清单:与本地文件系统进行交互
<!Doctype HTML>
<html>
<head>
<title>HTML5 拖放操作示例 </title>
<style>
body{
background-color:#ddd;
font-family:arial,verdana,sans-serif;}
#drop1{
width:200px;
height:200px;
border:1px solid black;
background-color:white padding:10px;}
</style>
<script>
function allowDrop(ev){
ev.preventDefault();
}
function drop(ev){
var files = ev.dataTransfer.files;
for(var i = 0;i<files.length;i++){
var f = files[i];
var pnode = document.createElement("p")
var tnode = document.createTextNode(f.name + "("+ f.type +")" + f.size + "bytes");
pnode.appendChild(tnode);
ev.target.appendChild(pnode);
}
ev.preventDefault();
}
window.onload = function(){
var dragged = document.getElementById("drag1");
drophere.ondragover = allowDrop;
drophere.ondrop = drop;
}
</script>
</head>
<body>
<div id="drop1"></div>
</body>
</html>