<meter> 是 HTML5 新增的标签元素，用于显示已知范围内的标量值（标量值指有明确上下限的数值）。它可以直观地展示一个值在特定区间内的相对位置，类似于进度条，但更适合显示诸如磁盘使用率、投票结果、考试分数等具有明确范围的度量值。
注意
<meter> 元素在不同浏览器中的默认样式表现可能有所差异，但功能上保持一致。
效果展示
下面展示了不同属性组合下 <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>属性详解
<meter> 元素支持以下关键属性来定义其显示行为：
min
设置值域的最小边界值。该值必须小于 max 属性值，默认值为 0。
max
设置值域的最大边界值。该值必须大于 min 属性值，默认值为 1。
value
设置当前显示的数值。如果同时设置了 min 和 max 属性，value 必须介于这两个值之间（min <= value <= max）。
如果设置的值超出了 [min, max] 区间，浏览器会自动将其调整为最接近的边界值（即 min 或 max）。
low
设置低值区间的上限。该值必须大于 min 属性，且不能超过 high 和 max 属性值，默认值为 min。
当 value >= min && value < low 时，<meter> 元素会显示低值状态的视觉效果。
high
设置高值区间的下限。该值必须小于 max 属性，且不能低于 low 和 min 属性值，默认值为 max。
当 value >= low && value < high 时，<meter> 元素会显示正常值状态的视觉效果。
optimum
指定最佳取值范围。该值必须介于 min 和 max 之间（min <= optimum <= max）。
浏览器会根据 optimum 与 low 和 high 的相对位置，通过不同颜色来区分当前值是处于最佳、警告还是危险状态。
optimum 属性的影响机制
根据 optimum 与 low 和 high 的相对位置，浏览器会用不同颜色显示当前值的状态：
情况一：最佳值在低值区间内（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：表示警戒状态（通常显示为橙色）的部分
使用注意事项
注意
- 使用这些伪元素时，通常需要添加浏览器兼容前缀（如
-webkit-或-moz-） ::meter-even-less-good-value、::meter-optimum-value和::meter-suboptimum-value只会同时出现一个，具体显示哪一个取决于value和optimum的相对关系- 不同浏览器对这些伪元素的支持程度和表现形式可能存在差异
浏览器兼容性
相关信息
- 表格中的数字表示该浏览器开始支持的最低版本
- "No" 表示该浏览器不支持此功能
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 |
注意事项
- WebView Android 不支持
<meter>元素，如果你的项目需要兼容 Android WebView，建议使用替代方案 - 虽然主流浏览器都支持
<meter>元素，但其默认样式在不同浏览器间存在差异 - 对于需要高度一致视觉效果的场景，建议使用 CSS 自定义样式来统一外观
实用示例
密码强度指示器
根据 <meter> 的特性，它非常适合用来做密码强度显示。以下是一个简单的实现示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>密码强度指示器</title>
<style>
.password-container {
margin: 20px;
width: 300px;
}
input {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
meter {
width: 100%;
margin-top: 10px;
}
.strength-text {
margin-top: 5px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="password-container">
<label for="password">输入密码：</label>
<input type="password" id="password" placeholder="请输入密码">
<meter id="password-strength" min="0" max="4" value="0"></meter>
<div class="strength-text" id="strength-text">密码强度：未输入</div>
</div>
<script>
const passwordInput = document.getElementById('password');
const passwordStrength = document.getElementById('password-strength');
const strengthText = document.getElementById('strength-text');
passwordInput.addEventListener('input', function() {
const password = this.value;
let strength = 0;
// 简单的密码强度判断逻辑
if (password.length > 0) strength += 1;
if (password.length >= 8) strength += 1;
if (/[A-Z]/.test(password)) strength += 1;
if (/[0-9]/.test(password)) strength += 1;
passwordStrength.value = strength;
// 设置 optimum 值，使强度为 3-4 时显示绿色
passwordStrength.setAttribute('optimum', '3');
passwordStrength.setAttribute('low', '2');
passwordStrength.setAttribute('high', '3');
// 更新强度文本
const strengthTexts = ['未输入', '弱', '中', '强', '非常强'];
strengthText.textContent = `密码强度：${strengthTexts[strength]}`;
});
</script>
</body>
</html>更详细的实现方案可以参考这篇文章：鑫空间,鑫生活 密码强度效果最佳实现
参考资料
更新日志
38e56-于8b50d-于