掌握HTML：深入理解和应用 标签
<meter>是 HTML5 的新增标签用来显示已知访问的标量值，可以理解成进度条
{% note warning %}
<meter> 在不同的浏览器中的显示效果是不同的
{% endnote %}
效果
{% tabs 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="10" low="60" high="90" optimum="95"></meter>
{% endtabs %}
属性
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为危险值范围，默认为红色{% tabs meter-1 %}
<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>{% endtabs %}
-
当
low <= optimum <= high时，low <= value <= high为最佳值范围，默认为绿色；min <= value < low和high < value <= max为警戒值范围，默认为橙色{% tabs meter-2 %}
<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>{% endtabs %}
-
当
high < optimum <= max时，high <= value <= max为最佳值范围，默认为绿色；low <= value < high为警戒值范围，默认为橙色；min <= value < low为危险值范围，默认为红色{% tabs meter-3 %}
<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>{% endtabs %}
伪元素
在现代浏览器下，<meter> 元素提供了许多伪元素
其中，Chrome 浏览器和 Safari 浏览器可以使用的伪元素比较多，Firefox 浏览器相对少一些
伪元素列表：
- ::meter-bar：灰色背景条
- ::meter-even-less-good-value：红色
- ::meter-optimum-value：橙色
- ::meter-suboptimum-value：绿色
{% note warning %}
使用时需要加上浏览器兼容前缀
meter-even-less-good-value、meter-optimum-value 和 meter-suboptimum-value 只会同时出现一个
{% endnote %}
浏览器兼容性
{% note info %}
-
数字表示该浏览器开始支持的版本
-
No 表示不支持
{% endnote %}
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> 的特性，用来做密码强度显示是不错的，实现方案可以参考下面这位大佬的文章
{% link 鑫空间,鑫生活 密码强度效果最佳实现 www.zhangxinxu.com/wordpress/2… %}
参考
-
{% link MDN meter developer.mozilla.org/zh-CN/docs/… %}
-
{% link 鑫空间,鑫生活 密码强度效果最佳实现 www.zhangxinxu.com/wordpress/2… %}
