微信扫一扫打赏支持

html5--3.19 新增的progress/meter元素

html5--3.19 新增的progress/meter元素

学习要点

  • 了解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属性：规定所属的一个或多个表单。

 

实例

 

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 </head>
 7     <p style="color:#FF0000">
 8     
 9     </p>
10     <form action="L3_01.html" method="get" >
11         当前下载progress进度为：<br>
12         <progress value="19" max="100"></progress><br>
13         <br>
14         meter度量条：<br>
15         <meter max="100" value="20" high="80" low="30"></meter><br>
16         <meter max="100" value="60" high="80" low="30"></meter><br>
17         <meter max="100" value="60" high="80" low="30" optimum="60"></meter><br>
18         <meter max="100" value="90" high="80" low="30"></meter><br>
19         值分别为不同情况下的显示<br>
20         <br><input type="submit" value="确定">
21     </form>
22 <body>
23 </body>
24 </html>
View Code

 

posted @ 2017-12-04 01:11  范仁义  阅读(535)  评论(0)  编辑  收藏  举报