html5新特性

新特性：

• 用于绘画的canvas元素
• 用于媒介回放的video和audio元素
• 对本地离线储存的更好的支持
• 新的特殊内容元素，比如article、footer、header、nav、section
• 新的表单控件，比如calender、date、time、email、url、search

video元素

属性	值	描述
src	URL	允许多个source元素，链接不同URL, 默认选第一个可以播放的url
height/width	pixels	设置播放器宽高
control	control	向用户显示控件，比如播放按钮
autoplay	autoplay	自动播放
loop	loop	重复播放

<video width="320" height="240" controls="controls">
  <source src="/i/movie.ogg" type="video/ogg">
  <source src="/i/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

canvas元素

使用Javascript在网页上绘制图像；

1. 创建Canvs元素

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
    Your browser does not support the canvas element.
</canvas>

2. 使用js绘制线条

    var c=document.getElementById("myCanvas"); //通过id寻找canvas元素
    var cxt=c.getContext("2d");	//创建context对象
    cxt.moveTo(10,10);
    cxt.lineTo(150,50);
    cxt.lineTo(10,50);
    cxt.stroke();

3. 使用js绘制渐变

	var c=document.getElementById("myCanvas"); //通过id寻找canvas元素
    var cxt=c.getContext("2d");	//创建context对象
    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);

4. 图像

	var c=document.getElementById("myCanvas"); //通过id寻找canvas元素
    var cxt=c.getContext("2d");	//创建context对象
    ar img = new Image();
    img.src = "img/1.jpg";
    cxt.drawImage(img, 0, 0);

表单

元素	描述	举例	结果
datalist	规定输入域的选项列表 列表时通过datalist内的option元素创建	<form action="/example/html5/demo_form.asp" method=“get”> Webpage: <input type=“url” list=“url_list” name=“link” /> <datalist id=“url_list”> <option label="W3School"value=“http://www.w3school.com.cn” /> <option label=“Google” value=“http://www.google.com” /> </datalist> <input type=“submit” />
keygen	密钥对生成器	<form action="demo_form.asp" method="get" Username: <input type="text" name="usr_name" /> Encryption: <keygen name="security" /> <input type="submit" /> </form>
output	用于不同类型的输出	<output id="result" onforminput="resCalc()"></output>