<meter>: 度量标签
最后更新：2026-10-13
<meter>度量标签
显示已知数值在指定范围（min~max）内的度量结果，如磁盘用量、评分、温度计。不适合表示不固定范围的任务进度（那用 <progress>）。
| 分类 | 表单 |
|---|---|
| 内容模型 | 流式内容 |
| 允许的父元素 | 接受流式内容的元素 |
| 闭合标签 | 需要 </meter> 标签 |
| 状态 | 标准 |
📝 语法
<meter value="0.6" min="0" max="1">60%</meter>⚙️ 属性
该元素支持全局属性及以下专有属性：
| 属性 | 值 | 描述 |
|---|---|---|
value | 当前度量值（必填）。 | |
min | 取值范围下界，默认 0。 | |
max | 取值范围上界，默认 1。 | |
low | “低”阈值，低于它视为偏低。 | |
high | “高”阈值，高于它视为偏高。 | |
optimum | 最优值所在位置，影响颜色提示。 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <meter> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： meter 表示固定范围的度量；若进度未知（如加载中），用 <progress> 更合适。
❓ 常见问题
Qmeter 和 progress 有什么区别？
A
<meter> 表示「静态量度值」在已知区间内的位置（磁盘占用 65%、评分 4.2/5），有 min/max/low/high/optimum 语义区间；<progress> 表示「任务进行进度」，只有完成与否的概念。评分、占比用 meter，加载、上传用 progress。Qmeter 的 low、high、optimum 属性怎么用？
A在 min-max 区间内再划分质量段：
low/high 定义「过低/过高」警戒区，optimum 指出最优值所在区间。浏览器据此给标尺着色（绿/黄/红），如体温 36-37 为 optimum、偏离为警示。Qmeter 里可以写内容吗？
A可以，标签间内容是不支持 meter 渲染时的回退文本，如
<meter value='0.65'>65%</meter>。同时建议用 aria-valuenow 等属性补充无障碍信息，因为屏幕阅读器对 meter 的支持参差不齐。🏷️ 相关标签
💡 相关案例
更多案例即将上线，敬请期待。
📚 相关教程
