众所周知，HTML5增加了一些新特性，作为一名小白，我也紧跟步伐，接下来几天将会学习HTML5的以下的一些新特性（可能会有多或少，会不定时更新和编辑）：
(1)增强型表单；(2)视频和音频--(重点)；(3)Canvas绘图技术；(4)SVG 绘图技术；(5)拖放API；(6)地理定位-(重点)-熟练掌握； (7)Web Worker；(8)Web Storage ；(9)Web Socket。
1、增强型表单：
（1） 一些表单元素<input type=?>的值：
在H4中原有：text/password/checkbox/radio/submit reset/button/number/file；
H5中新增的一些值：email/url;number/search/color/date/ month/week/tel；
（2）新增的表单元素：
H4中原有：input/（select/option）/label。
H5中新增的一些表单元素：datalist/progress/meter/output。
分别介绍一下新增表单元素的功能：
1.叮铃铃----- datalist:
1<h2>h5新表单元素---datalist</h2> 2 <form> 3 <datalist id="list3"> 4 <option>腾讯</option> 5 <option>联想</option> 6 <option>东大街的狗场</option> 7 </datalist> 8 请选择你想去那家公司做CEO 9 <input type="text" name="lunch" list="list3"/> 10 </form>
它的意义可能主要就在于，能够给你（增大你强迫症的犯病率）很多种不同的选择。值得我们注意的是："datalist"中定义的Id值名称要与“input”表单中“list”定义的值相同，并且“input”中的值仍然可以自行输入。
2.叮铃铃---progress：
它主要是显示一个进度条，有两种形式：
①左右晃动的进度条：<progress></progress> ；② 具有指定进度值：<progress value="（0.1-1）之间的值" />
基于progress，可以做如下一个小练习：
练习：使用定时器+进度条实现一个可以动态，前进的进度条,到100%停止（或者重复开始和结束）。
代码如下：
1<!DOCTYPE html> 2<html> 3<head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6</head> 7<body> 8 <h2>h5新增元素--progress--动态前进的进度条</h2> 9 <progress value="0" id="p3"></progress> 10 <script> 11 //1:获取进度条元素 12 var p3 = document.getElementById("p3"); 13 //2:创建变量保存初始值 0~1 14 var v = 0; 15 //3:创建定时器间隔1s执行次 16 var t = setInterval(function(){ 17 //3.1:修改变量增 += 0.1 18 v += 0.1; 19 //3.2:将新值保存进度条value 20 p3.value = v; 21 //3.3:判断如果变量值大于 0.9 停止定时器 22 if(v>0.9){clearInterval(t)} 23 },200); 24 25 </script> 26 27</body> 28</html>
3.叮铃铃---meter刻度尺
作用：用于识别一个值所处的范围，穷（红色），小康（黄色），暴富（绿色），大体上就是表示随着进度条的不同进度，其颜色也会不同，可以改变其宽、高属性。
基本用法：<meter min="可取的最小值" max="可取最大值" low="下限" high="上限" optimum="最佳值" value="当前值"></meter>
练习:使用定时器+meter实现可以动态变化刻度尺, 观察颜色变化。
代码如下：
1<!DOCTYPE html> 2<html> 3<head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6</head> 7<body> 8 <h2>h5新增元素--progress--刻度尺</h2> 9 <!--薪水(月)--> 10 <meter min="0" max="100000" 11 low="20000" high="90000" 12 optimum="99999" 13 value="0" id="p3"></meter> 14 <script> 15 //1:获取刻度尺 16 var p3 = document.getElementById("p3"); 17 console.log(1); 18 console.log(p3); 19 //2:创建变量保存初始值 20 var v = 0; 21 // 3:创建定时器 22 var timer = setInterval(function(){ 23 //3.1:修改变量的值 += 500 24 v += 500; 25 //3.2:将新值保存刻度尺 26 p3.value = v; 27 //3.3:大于100000停止 28 if(v>100000){clearInterval(timer)} 29 },100); 30 </script> 31</body> 32</html>
4.叮铃铃---output
作用：输出,语义标签,没有任何外观样式,样式上等同于span（最简单的标签）。
例子如下（感觉上没有卵用，应为小计不能随着“value”值的变化而增加或者减少）：
1<!DOCTYPE html> 2<html> 3<head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6</head> 7<body> 8 <h2>h5新增元素--output--输出</h2> 9 商品单价:￥3.5 <br/> 10 购买数量: <input type="number" value="1"/> <br/> 11 小计: <output>￥3.5</output> 12</body> 13</html>
总结一下h5中新增的表单属性：
① placehodler 占位符；例：<input type="text" placehodler="请输入用户名"/>；
② autofocus 自动获取焦点；例： <input autofocus />；
③ multiple 允许输入框中出现多个值(用逗号分隔)；例:<input type="email" multiple />
④ form 用于把输入域放置到form外部；例：<form id="f5">....表单内容....</form>
<input type="text" form="f5" /> 注意：两个“form”中的id值是相同的。
以下为输入验证相关的新属性：
⑤ required 必填项,内容不能空
⑥minlength 指定字符串最小长度
⑦ maxlength 指定字符串最大长度
例：<input type="text" placeholder="请输入用户名"autofocus name="uname" required minlength="3" maxlength="12"/>
⑧max 指定数字的最大值
⑨min 指定数字的最小值
⑩ pattern 正则表达式 例：<input type="tel" pattern="1\[35789\]\\d{9}"/>。