深入理解和应用 <meter> 标签
掌握 HTML:深入理解和应用 <meter>
标签
<meter>
是 HTML5 的新增标签用来显示已知访问的标量值,可以理解成进度条
注意
<meter>
在不同的浏览器中的显示效果是不同的
效果
<meter min="0" max="100" value="90" low="60" high="90" optimum="95"></meter>
<meter min="0" max="100" value="60" low="60" high="90" optimum="95"></meter>
<meter min="0" max="100" value="30" low="60" high="90" optimum="95"></meter>
属性
min
值域的最小边界,也就是最小值;它必须要比 最大值(max) 小;默认为 0
max
值域的最大边界,也就是最大值;它必须要比 最小值(min) 大;默认为 1
value
当前数值;如果设置了 max 和 min,它就必须介于 max 和 min 之间(min <= value <= max
)
如果 value 设置的值不在 [min, max] 区间内,那么它的值就等于它最接近的一端的值,也就是说 value 的值会 等于 min 或 max
low
低值区间的上限值;它必须比 min 属性大,并且不能超过 high 和 max;默认 low = min
当 value >= min && value < low
时,<meter>
就会显示低值的效果
high
高值区间的上限值;它必须比 max 属性小,并且不能低于 low 和 min;默认 high = max
当 value >= low && value < high
时,<meter>
就会显示高值的效果
optimum
用来表最佳取值,也就是指明哪一个取值范围是更好的;它必须介于 max 和 min 之间(min <= optimum <= max
)
当
min <= optimum < low
时,min <= value <= low
为最佳值范围,默认为绿色;low < value <= high
为警戒值范围,默认为橙色;high < value < max
为危险值范围,默认为红色<meter min="0" max="100" value="30" low="60" high="90" optimum="50"></meter> <meter min="0" max="100" value="70" low="60" high="90" optimum="50"></meter> <meter min="0" max="100" value="95" low="60" high="90" optimum="50"></meter>
当
low <= optimum <= high
时,low <= value <= high
为最佳值范围,默认为绿色;min <= value < low
和high < value <= max
为警戒值范围,默认为橙色<meter min="0" max="100" value="30" low="60" high="90" optimum="70"></meter> <meter min="0" max="100" value="70" low="60" high="90" optimum="70"></meter> <meter min="0" max="100" value="95" low="60" high="90" optimum="70"></meter>
当
high < optimum <= max
时,high <= value <= max
为最佳值范围,默认为绿色;low <= value < high
为警戒值范围,默认为橙色;min <= value < low
为危险值范围,默认为红色<meter min="0" max="100" value="30" low="60" high="90" optimum="95"></meter> <meter min="0" max="100" value="60" low="60" high="90" optimum="95"></meter> <meter min="0" max="100" value="90" low="60" high="90" optimum="95"></meter>
伪元素
在现代浏览器下,<meter>
元素提供了许多伪元素
其中,Chrome 浏览器和 Safari 浏览器可以使用的伪元素比较多,Firefox 浏览器相对少一些
伪元素列表:
- ::meter-bar:灰色背景条
- ::meter-even-less-good-value:红色
- ::meter-optimum-value:橙色
- ::meter-suboptimum-value:绿色
注意
使用时需要加上浏览器兼容前缀
meter-even-less-good-value
、meter-optimum-value
和 meter-suboptimum-value
只会同时出现一个
浏览器兼容性
相关信息
数字表示该浏览器开始支持的版本
No 表示不支持
PC 端
PC 端 | Chrome | Edge | Firefox | Opera | Safari |
---|---|---|---|---|---|
meter | 6 | 18 | 16 | 11 | 6 |
min | 6 | 18 | 16 | 11 | 6 |
max | 6 | 18 | 16 | 11 | 6 |
value | 6 | 18 | 16 | 11 | 6 |
low | 6 | 18 | 16 | 11 | 6 |
high | 6 | 18 | 16 | 11 | 6 |
optimum | 6 | 18 | 16 | 11 | 6 |
移动端
移动端 | Chrome Android | Firefox Android | Opera Android | Safari IOS | WebView Android |
---|---|---|---|---|---|
meter | 18 | 16 | 11 | 10.3 | No |
min | 18 | 16 | 11 | 10.3 | No |
max | 18 | 16 | 11 | 10.3 | No |
value | 18 | 16 | 11 | 10.3 | No |
low | 18 | 16 | 11 | 10.3 | No |
high | 18 | 16 | 11 | 10.3 | No |
optimum | 18 | 16 | 11 | 10.3 | No |
使用
根据 <meter>
的特性,用来做密码强度显示是不错的,实现方案可以参考下面这位大佬的文章