html meter标签的使用与作用详解

2020-03-24 19:11:49

字体：大中小

来源：转载

供稿：网友

定义和用法：
meter 标签定义度量（单位）。仅用于已知最大和最小值的度量。

提示和注释：
注释：必须定义度量的范围，既可以在 text 中，也可以在 min/max 属性中定义。
例子：

 meter min= 0 max= 20 5 /meter  meter 2 out of 10 /meter  meter 30% /meter

meter 标签是HTML5新增的标签，定义度量衡。仅用于已知最大和最小值的度量。也就是必须定义度量的范围，既可以在元素的文本中，也可以在 min/max 属性中定义。

 meter min= 0 max= 20 5 /meter  meter 2 out of 10 /meter  meter 30% /meter

high number 定义度量的值位于哪个点，被界定为高的值。 low number 定义度量的值位于哪个点，被界定为低的值。 max number 定义最大值。默认值是 1。 min number 定义最小值。默认值是 0。 optimum number 定义什么样的度量值是最佳的值。如果该值高于 high 属性，则意味着值越高越好。如果该值低于 low 属性的值，则意味着值越低越好。 html' target='_blank'>value number 定义度量的值。

可以用CSS的伪元素对默认的显示方式处理下（因为很可能各个浏览器的显示方式不一）：

 !doctype html  html lang= en  head  meta charset= UTF-8  title Coolwp.net Demo /title  style  .deal meter { -webkit-appearance: none; }.deal ::-webkit-meter-bar { height: 1em; background: white; border: 1px solid black;.deal ::-webkit-meter-optimum-value { background: green; } /* 好 */.deal ::-webkit-meter-suboptimum-value { background: orange; } /* 凑合 */.deal ::-webkit-meter-even-less-good-value { background: blue; } /* 糟糕 */.deal ::-moz-meter-bar { background: rgba(0,96,0,.6);} /style  /head  body  默认的： meter low= 69 high= 80 max= 100 optimum= 100 value= 92 A /meter  meter low= 69 high= 80 max= 100 optimum= 100 value= 72 C /meter  meter low= 69 high= 80 max= 100 optimum= 100 value= 52 E /meter  p >实际显示效果：
以上就是html meter标签的使用与作用详解的详细内容，html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。