时间:2021-07-01 10:21:17 帮助过:153人阅读
<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" 属性的值,则意味着值越低越好。 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> <p> 默认的:<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> <p class="deal"> 处理后的:<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> </body> </html>
实际显示效果:
以上就是html meter标签的使用与作用详解的详细内容,更多请关注Gxl网其它相关文章!