1. 什么是 <meter> 元素
<meter> 是 HTML5 新增的语义化标签，用于展示已知范围内的标量测量值，例如磁盘使用量、CPU 占用率、投票结果、评分等。它以一个可视化的进度条/仪表形式呈现，让用户能直观地感知当前数值在整体范围中的位置。
需要特别注意的是，<meter> 只适合表示「已知最大值和最小值」的度量值。如果只是展示一个不确定的进度（比如文件上传进度），应该使用 <progress> 元素，两者不要混淆。
2. 基本语法与属性
<meter> 是一个空元素（不需要闭合标签），核心属性如下：
| 属性 | 说明 | 是否必填 |
|---|---|---|
value |
当前测量值 | 必填 |
min |
范围最小值，默认 0 | 可选 |
max |
范围最大值，默认 1 | 可选 |
low |
低阈值，低于此值显示绿色 | 可选 |
high |
高阈值，高于此值显示黄色/红色 | 可选 |
optimum |
最优值，用于决定颜色倾向 | 可选 |
一个最简单的示例：
html
<p>磁盘使用率：<meter value="0.6">60%</meter></p>上面的写法中，value="0.6" 表示当前值，由于未指定 min 和 max，默认范围是 0 到 1，因此 0.6 即代表 60%。
3. 完整示例：磁盘使用率仪表
下面是一个更完整的例子，展示了如何结合 low、high 和 optimum 控制颜色：
html
<p>磁盘使用率：<meter value="0.6" min="0" max="1" low="0.3" high="0.8" optimum="0.2">60%</meter></p>在这个例子中：
low="0.3"：低于 30% 视为「低」；high="0.8"：高于 80% 视为「高」；optimum="0.2"：最优值在 20% 附近。
浏览器会根据 value 与 low、high、optimum 的关系自动着色，无需额外 CSS。
4. 浏览器默认样式与自定义美化
不同浏览器对 <meter> 的默认外观略有差异。若希望统一样式，可以通过 CSS 的 ::-webkit-meter-bar 和 ::-webkit-meter-optimum-value 等伪元素进行定制：
css
meter {
width: 200px;
height: 20px;
}
meter::-webkit-meter-bar {
background: #eee;
border-radius: 10px;
}
meter::-webkit-meter-optimum-value {
background: linear-gradient(90deg, #4caf50, #8bc34a);
border-radius: 10px;
}需要注意的是，这些伪元素目前主要被 WebKit/Blink 内核浏览器（Chrome、Edge、Safari）支持，Firefox 的样式定制能力相对有限。
5. 无障碍与降级处理
<meter> 本身具有良好的语义，屏幕阅读器可以读取其 value、min、max 等属性。但为了兼容不支持该元素的旧浏览器，建议在标签内部写入一段文本作为降级内容：
html
<meter value="0.6" min="0" max="1">60%</meter>当浏览器不支持 <meter> 时，用户仍能看到「60%」这段文字，保证信息不丢失。
6. 与 <progress> 的区别
| 对比项 | <meter> |
<progress> |
|---|---|---|
| 适用场景 | 已知范围的测量值 | 不确定的进度 |
| 典型例子 | 磁盘用量、评分 | 文件上传、任务加载 |
是否必须有 max |
否，默认 1 | 是，建议明确指定 |
| 语义 | 度量（gauge） | 进度（progress） |
简单记忆：有确定上限的用 <meter>，不知道什么时候结束的用 <progress>。
7. 总结
<meter> 是一个轻量且语义化的 HTML5 元素，适合在仪表盘、统计页面中展示各类标量指标。使用时注意：
- 必须提供
value； - 明确
min/max范围； - 善用
low、high、optimum让浏览器自动着色； - 内部写入降级文本，兼顾可访问性与兼容性。
掌握它，你就能用最少的代码实现直观的数据可视化。