html5中progress/meter元素
一、总结
一句话总结：
progress元素：用来建立一个进度条
meter元素的作用：用来建立一个度量条,用来表示度量衡的评定
<progress value="19" max="100"></progress>
<meter max="100" value="60" high="80" low="30"></meter>
二、html5--3.19 新增的progress/meter元素
学习要点
- progress元素
- 是HTML5中新增的元素，用来建立一个进度条
- 通常与JavaScript 一同使用，来显示任务的进度。
- 使用时注意浏览器的支持情况：Internet Explorer 9 以及更早的版本不支持
- progress元素的属性：
- max属性：规定当前进度的最大值。
- value属性设定进度条当前默认显示值
-
form属性：规定进度条所属的一个或多个表单。
-
meter元素
- 是HTML5中新增的元素，用来建立一个度量条,用来表示度量衡的评定
- 通常与JavaScript 一同使用，来显示任务的进度。
- meter元素的属性：
- value属性设定进度条当前默认显示值
- max属性：规定范围的最大值，默认值为1.
- min属性：规定范围的最小值，默认值为0.
- low属性：规定被视作低的标准。
- high属性：规定被视作高标准。
-
optimum属性：定义度量条的最佳标准值。
- form属性：规定所属的一个或多个表单。
实例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<p style="color:#FF0000">
</p>
<form action="L3_01.html" method="get" >
当前下载progress进度为：<br>
<progress value="19" max="100"></progress><br>
<br>
meter度量条：<br>
<meter max="100" value="20" high="80" low="30"></meter><br>
<meter max="100" value="60" high="80" low="30"></meter><br>
<meter max="100" value="60" high="80" low="30" optimum="60"></meter><br>
<meter max="100" value="90" high="80" low="30"></meter><br>
值分别为不同情况下的显示<br>
<br><input type="submit" value="确定">
</form>
<body>
</body>
</html>