HTML5的meter标签详解

QQ截图20160610000110.jpg

定义和用法
<meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge(尺度)。
例子:磁盘用量、查询结果的相关性,等等。
注释:<meter> 标签不应用于指示进度(在进度条中)。如果标记进度条,请使用 <progress> 标签。

1、max min value

<meter max="100" min="1" value="70"></meter> //绿色

11.jpg

2、high low optimum

如果optimum的值高于 "high" 属性,则意味着值越高越好。
如果optimum的值低于 "low" 属性的值,则意味着值越低越好。

<meter max="100" min="1" value="70"></meter> //绿色

12.jpg

<meter max="100" min="1" value="70" high="80" low="50" optimum="81"></meter> //黄色
optimun的值高于high,value的值在low到high的范围内

13.jpg

<meter max="100" min="1" value="70" high="80" low="50" optimum="49"></meter> //黄色
optimun的值低于low,value的值在low到high的范围内

14.jpg

<meter max="100" min="1" value="48" high="80" low="50" optimum="49"></meter> //绿色
optimun的值低于low,value的值低于low到high的范围

15.jpg

<meter max="100" min="1" value="81" high="80" low="50" optimum="49"></meter> //红色
optimum的值低于low,value的值高于low到high的范围

16.jpg

<meter max="100" min="1" value="82" high="80" low="50" optimum="81"></meter> //绿色
optimum的值高于high,value的值高于low到high的范围

17.jpg

<meter max="100" min="1" value="49" high="80" low="50" optimum="81"></meter> //红色
optimum的值高于high,value的值低于low到high的范围

18.jpg

已有 10 条评论
  1. HTML5 实用meter标签,学习了

    1. cobol cobol

      同样学习了

  2. 干互联网这行就得不断学习新东西,要不就被淘汰了。

  3. 不明觉厉~

  4. H5好强大

  5. 分享的不错,谢谢

  6. 很厉害、赞一个

  7. 谢谢这么详细的讲解啦

  8. 挺好的,感谢博主的分享。

  9. 挺好的,感谢博主的分享。

添加新评论