众所周知，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:
<h2>h5新表单元素---datalist</h2>
<form>
<datalist id="list3">
<option>腾讯</option>
<option>联想</option>
<option>东大街的狗场</option>
</datalist>
请选择你想去那家公司做CEO
<input type="text" name="lunch" list="list3"/>
</form>
它的意义可能主要就在于，能够给你（增大你强迫症的犯病率）很多种不同的选择。值得我们注意的是："datalist"中定义的Id值名称要与“input”表单中“list”定义的值相同，并且“input”中的值仍然可以自行输入。
2.叮铃铃---progress：
它主要是显示一个进度条，有两种形式：
①左右晃动的进度条：<progress></progress> ；② 具有指定进度值：<progress value="（0.1-1）之间的值" />
基于progress，可以做如下一个小练习：
练习：使用定时器+进度条实现一个可以动态，前进的进度条,到100%停止（或者重复开始和结束）。
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h2>h5新增元素--progress--动态前进的进度条</h2>
<progress value="0" id="p3"></progress>
<script>
//1:获取进度条元素
var p3 = document.getElementById("p3");
//2:创建变量保存初始值 0~1
var v = 0;
//3:创建定时器间隔1s执行次
var t = setInterval(function(){
//3.1:修改变量增 += 0.1
v += 0.1;
//3.2:将新值保存进度条value
p3.value = v;
//3.3:判断如果变量值大于 0.9 停止定时器
if(v>0.9){clearInterval(t)}
},200);
</script>
</body>
</html>3.叮铃铃---meter刻度尺
作用：用于识别一个值所处的范围，穷（红色），小康（黄色），暴富（绿色），大体上就是表示随着进度条的不同进度，其颜色也会不同，可以改变其宽、高属性。
基本用法：<meter min="可取的最小值" max="可取最大值" low="下限" high="上限" optimum="最佳值" value="当前值"></meter>
练习:使用定时器+meter实现可以动态变化刻度尺, 观察颜色变化。
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h2>h5新增元素--progress--刻度尺</h2>
<!--薪水(月)-->
<meter min="0" max="100000"
low="20000" high="90000"
optimum="99999"
value="0" id="p3"></meter>
<script>
//1:获取刻度尺
var p3 = document.getElementById("p3");
console.log(1);
console.log(p3);
//2:创建变量保存初始值
var v = 0;
// 3:创建定时器
var timer = setInterval(function(){
//3.1:修改变量的值 += 500
v += 500;
//3.2:将新值保存刻度尺
p3.value = v;
//3.3:大于100000停止
if(v>100000){clearInterval(timer)}
},100);
</script>
</body>
</html>4.叮铃铃---output
作用：输出,语义标签,没有任何外观样式,样式上等同于span（最简单的标签）。
例子如下（感觉上没有卵用，应为小计不能随着“value”值的变化而增加或者减少）：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h2>h5新增元素--output--输出</h2>
商品单价:￥3.5 <br/>
购买数量: <input type="number" value="1"/> <br/>
小计: <output>￥3.5</output>
</body>
</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}"/>。
388
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
