HTML5的新增功能有哪些？

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

新的功能：

一、用于绘画的 canvas 元素

二、用于媒介回放的 video 和 audio 元素

三、对本地离线存储的更好的支持

四、语意化更好的内容元素，好比 article、footer、header、nav、section

五、新的表单控件，好比 calendar、date、time、email、url、search

1、绘画canvas元素

　　<canvas>定义图形,绘制路径，矩形，圆形，字符以及添加图像的方法 。

　　首先建立canvas元素，并规定元素的id、宽度和高度撒的：

　　　　　　<canvas id="myCanvas" width="200" height="100"></canvas>

　而后经过javas来绘制。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>

　　JavaScript 使用 id 来寻找 canvas 元素：

　　　　　　var c=document.getElementById("myCanvas");

　　而后，建立 context 对象：

　　　　　　var cxt=c.getContext("2d"); 

　　getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

　　下面的两行代码绘制一个红色的矩形：

　　　　　　cxt.fillStyle="#FF0000";
　　　　　　cxt.fillRect(0,0,150,75); 

　　fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。

　　下面的两行代码绘制一条直线：

　　　　　　cxt.moveTo(100,100);

　　　　　　cxt.lineTo(200,200);

　　下面的一行代码是画一个圆：

　　　　　　cxt.arc(70,18,15,0,Math.PI*2,false);

　　这些属性值分别对应的是什么，70,18分别是X轴和Y轴，15是这个圆的半径，0是角度,Math.PI*2是圆周率，false表明顺时针而true是逆时针。

　　颜色的渐变效果也是能够实现的：

　　　　<script type="text/javascript">

　　　　　　　　var c=document.getElementById("myCanvas");

　　　　　　　　var cxt=c.getContext("2d");

　　　　　　　　var grd=cxt.createLinearGradient(0,0,175,50);

　　　　　　　　grd.addColorStop(0,"#FF0000");

　　　　　　　　grd.addColorStop(1,"#00FF00");

　　　　　　　　cxt.fillStyle=grd;

　　　　　　　　cxt.fillRect(0,0,175,50);

　　　　 </script>

　　还有一些其余效果:

　　　　 曲线quadraticCurreTo

　　　　字体fillText

2、音频audio和视频video

　　Video也支持多个source元素，连接到不一样的视频文件，浏览器将使用第一个可识别的格式
　　属性值：
　　　　autoplay=”autoplay”就绪后立刻播放
　　　　loop=“loop”播放完再次播放

　　　　preload="预加载"

　　　　muted="静音"

　　　　volume-=0.1音量减

　　　　volume+=0.1音量加

　　　　currentTime+=10 快进10秒

　　　　currentTime-=10 快退10秒

　　　　playbackRate=1  加速播放 （默认的播放速度）

　　audio的属性值和video的同样

3、存储

　　HTML5 提供了两种在客户端存储数据的新方法：

　　　　localStorage - 没有时间限制的数据存储

　　　　localStorage 方法存储的数据没有时间限制。次日、第二周或下一年以后，数据依然可用。

　　　　sessionStorage - 针对一个 session 的数据存储

　　　　sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

4、语意化标签

　　<article>标签订义外部的内容（结构元素）
　　<aside>定义页面内容以外的内容。 aside的内容与article的内容相关。（结构元素）
　　<figure>定义一组媒介内容的分组，以及它们的标题。（结构元素）
　　<section>标签订义文档中的节（section，区段）。好比章节，页眉，页脚或文档中的其余部分（结构元素）

5、新的表单类型

　　一、email　　　

　　　　email 类型用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。

　　　　E-mail: <input type="email" name="user_email" />

　　二、url

　　　　url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。

　　　　Homepage: <input type="url" name="user_url" />

　　三、number

　　　　number 类型用于应该包含数值的输入域。还可以设定对所接受的数字的限定：

　　　　Points: <input type="number" name="points" min="1" max="10" />

　　四、range

　　　　range 类型用于应该包含必定范围内数字值的输入域。

　　　　range 类型显示为滑动条。还可以设定对所接受的数字的限定：

　　　　<input  name="points" min="1" max="10" />type="range"

　　五、Date pickers (date, month, week, time, datetime, datetime-local)

　　　　HTML5 拥有多个可供选取日期和时间的新输入类型

　　　　Date: <input type="date" name="user_date" />

　　六、search

　　　　search 类型用于搜索域，好比站点搜索或 Google 搜索。search 域显示为常规的文本域。

　　七、color颜色的选择