HTML5中新增实用的标签

1：progress  进度条

 <h3>progress</h3>

 <progress value="75" max="100"></progress>

 Google运行结果：
　

 2：datalist 下拉框（可输入）

<input type="text" list="countries" />

    <datalist id="countries">

         <option value="成都"></option>

         <option value="四川"></option>

         <option value="印度"></option>

   </datalist>

*并且具有自动补全功能

3：canvas（画布）元素

<canvas id="canvas1" width="800" height="400"></canvas>

var canvas=document.getElementById("canvas1");//获取当前的画布元素
var str=canvas.getContext("2d");//表示这是一张2d的画布
str.lineWidth=5;//设置线的厚度
str.strokeStyle="#fff";//设置颜色
str.moveTo(0,0);//设置下笔位置
str.lineTo(800,0);//设置下笔的方向位置
str.arc(50,200,20,4.75,Math.PI*0.5,false);//第一个和第二个都表示圆心（下笔的位置），第三个表示圆的半径，第四个表示结束的位置，最后一个是否逆时针

........

效果图：（作者画的有点丑，大家可以自由发挥=。=）



4：video（播放器）

<video id="vid" width="800px" height="500px" controls="controls"poster="img/bao_1.jpg">//可以设置该播放器的长宽，
    <source src="img/mda-kdf961ixzjjz5n9w.mp4"  type="video/mp4" />//播放器的视频资源
    <object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
        <param name="movie" value="myvideo.swf" />
        <param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
    </object>
</video>

HTML5中新增实用的标签的相关教程结束。