有好多小伙伴私聊我问我html5新特性 和用法，下面我给大家具体介绍一下html5都新加了哪些新特性，下面我给大家总结一下。
1)新的语义标签 footer header 等等 2）增强型表单 表单2.0 3）音频和视频 4）canvas 绘图 5） SVG绘图 6）地理定位 7） 拖放API 8）web worker 用来执行耗时任务 9）web Storage 在浏览器端存储大量数据 10）web Socket 一种持续性的连接（非http协议）
（一）新型的语义标签就不说了，
例如<footer></footer>
（二）增强型表单 表单2.0
一、
1）新的input type h4和h5对比！
H4中input type ：text /password /radio /checkbox/ sybmit/ reset / file /hidden / image/
H5中的input type ：email/url/number/tel/search /range /color/month/week /date
2）新的表单元素
H4中表单元素 ：input/textarea/select，option/label
H5中新增的表单元素：datalist /progress/meter/output
二、h5中 新增的表单元素 -- datalist 建议列表
| <datalist id="lunchList"> <option>京酱肉丝</option> <option>锅包肉</option> <option>鱼香肉丝</option> <option>青椒肉丝</option> <option>地三鲜</option> </datalist> |
请输入您需要的午餐：<input type="text" name="lunch" list="lunchList"/>
四、h5中 新增的表单元素 -- progress 进度条
有两种形式：
bootstrap里面有progress插件样式
| <form> 网络连接中<progress></progress> <br/> <!-- 0-1之间 --> 下载进度 <progress id="p3" value="0"></progress> <input type="number" value="1"> </form> <script type="text/javascript"> /*settimeout和setInterval区别在于settimeout执行一次，setInterval每隔一段时间执行一次*/ var t=setInterval(function(){ var v = p3.value; v += 0.1; p3.value = v; if(v>=1){ clearInterval(t); alert("下载完成"); } },500); </script> |
五、h5中 新增的表单元素 -- meter
| <body> 机油含量：<meter id="m1" min="0" max="100" low="30" high="70" optimum="40" value="50"></meter> PM值：<meter id="m2" min="0" max="500" low="100" high="300" optimum="150" value="750"></meter> </body> |
