在网页中展示“某个数值在整体中的位置”是一种常见需求——比如你的硬盘还剩多少空间、手机电量是否告急、考试成绩属于哪个等级。HTML5 引入的 <meter> 元素正是为此而生。它不仅能显示数值，还能通过颜色变化自动传递“好、中、差”的状态信息。
本文带你系统掌握 <meter> 的用法，避开常见误区，并写出优雅、可访问的代码。
一、<meter> 是什么？什么时候用它？
<meter> 代表一个已知范围内的标量测量值。它的关键特征是：
典型使用场景
场景类型 | 示例 |
磁盘或内存使用量 | - |
电池剩余电量 | - |
考试得分 | 85/100 |
温度、湿度、速度等传感器读数 | - |
投票支持率 | 72% 赞成 |
产品评分 | 4.2/5 星 |
不要用于
二、属性全面解析
属性 | 含义 | 是否必需 | 默认值 | 约束 |
value | 当前测量值 | 是 | 0 | 必须介于 min 和 max 之间 |
min | 范围最小值 | 否 | 0 | 小于 max |
max | 范围最大值 | 否 | 1 | 大于 min |
low | “低”范围的上限 | 否 | min | 通常 ≥ min 且 ≤ high |
high | “高”范围的下限 | 否 | max | 通常 ≥ low 且 ≤ max |
optimum | 最佳期望值 | 否 | 介于 min 与 max 之间 | 决定颜色逻辑 |
三、视觉逻辑：颜色是如何自动生成的？
3.1 三范围划分
meter 元素通过 low 和 high 将整个区间分成三段：[min, low]、[low, high]、[high, max]。
低范围：min → low。
正常范围：low → high。
高范围：high → max。
[低范围] ——— [正常范围] ——— [高范围]min low high max
3.2 确定「目标区域」
Optimum 的设定用于界定目标区域，颜色显示则依据当前值（value）与目标区域的对应关系进行判定。
3.3 判断颜色
默认状态下，<meter>元素只使用绿、黄、红三种颜色：
理解「相邻范围」和「相对范围」
相邻或相对范围是基于目标区域而言的。
当目标区域是 「正常范围」时，相邻范围是「低范围」和「高范围」，此时，无论 value是在「低范围」还是「高范围」，都显示为黄色。
当目标区域是「低范围」时，相邻范围是「正常范围」，相对范围是「高范围」。
当目标区域是「高范围」时，相邻范围是「正常范围」，相对范围是「低范围」。
min low high max [低范围] -—--— [正常范围] ——--— [高范围] | | | | optimum | | | | 相邻范围 目标区域 相邻范围 | | | 黄色 绿色 黄色--------------------------------------------min low high max [低范围] -—optimum —— [正常范围] ——— [高范围] | | | 目标区域 相邻范围 相对范围 | | | 绿色 黄色 红色--------------------------------------------min low high max [低范围] -—-— [正常范围] —-optimum—— [高范围] | | | 相对范围 相邻范围 目标区域 | | | 红色 黄色 绿色
通俗总结
只要optimum的值在正常范围，只会有黄色和绿色。
只要optimum的值不在正常范围，只会有黄色 、绿色和红色。
value在相邻范围都显示黄色，在相对范围都显示为红色。
一句话快速记忆：optimum 在哪，哪就绿；相邻黄；相对红。
示例：
<meter min="0" max="40" low="18" high="28" optimum="10" value="35"></meter>
<meter min="0" max="40" low="18" high="28" optimum="35" value="10"></meter>
<meter min="0" max="40" low="18" high="28" optimum="24" value="4"></meter>
<meter min="0" max="40" low="18" high="28" optimum="24" value="25"></meter>
四、代码示例
基础用法
<p>磁盘使用率：<meter value="0.6">60%</meter></p><p>投票支持率：<meter min="0" max="100" value="85">85%</meter></p>
带范围与状态的完整示例
<p>电池电量：<meter min="0" max="100" low="20" high="80" optimum="100" value="65">65%</meter></p><p>温度（最佳25°C）：<meter min="0" max="100" low="30" high="70" optimum="25" value="60">60°C</meter></p>
三种状态对比
<p>低状态（值低于low）：<meter min="0" max="100" low="30" high="70" value="25">25%</meter></p><p>正常状态：<meter min="0" max="100" low="30" high="70" value="50">50%</meter></p><p>高状态（值高于high）：<meter min="0" max="100" low="30" high="70" value="85">85%</meter></p>
考试成绩展示
<p>数学成绩：<meter min="0" max="150" low="90" high="120" optimum="135" value="110">110/150</meter> (满分150，优秀≥135)</p>
五、自定义样式：摆脱浏览器默认外观
<meter> 的样式定制需要使用浏览器专属的伪元素。以下是兼容 Chrome / Edge / Safari（WebKit）和 Firefox 的方案。
meter { width: 240px; height: 24px; border-radius: 14px;}
meter::-webkit-meter-bar { background: #e9ecef; border-radius: 14px; border: none; } meter::-webkit-meter-optimum-value { background: linear-gradient(135deg, #2ecc71, #27ae60); border-radius: 14px; } meter::-webkit-meter-suboptimum-value { background: linear-gradient(135deg, #f1c40f, #f39c12); border-radius: 14px; } meter::-webkit-meter-even-less-good-value { background: linear-gradient(135deg, #e74c3c, #c0392b); border-radius: 14px; }
meter::-moz-meter-bar { border-radius: 14px; } meter::-moz-meter-optimum-value { background: #2ecc71; } meter::-moz-meter-suboptimum-value { background: #f1c40f; } meter::-moz-meter-sub-suboptimum-value { background: #e74c3c; }
<p>自定义渐变样式：<meter value="0.68">68%</meter></p>
六、与 <progress> 的本质区别
维度 | <meter> | <progress> |
核心语义 | “测得多少” | “完成了多少” |
范围 | 必须已知（min~max） | 可选，通常为 0～max 或不确定 |
动态性 | 通常静态或随测量更新 | 常用于动态任务进度 |
状态色 | 自动绿/黄/红（基于 low/high/optimum） | 无自动状态色（通常单一颜色） |
关键属性 | value, min, max, low, high, optimum | value, max |
典型场景 | 电量、温度、磁盘、分数 | 上传、下载、安装、问卷完成度 |
一句话总结：需要表达“好坏程度”用 <meter>，需要表达“做了多少”用 <progress>。
七、无障碍与最佳实践
7.1 始终提供文本后备
<meter value="0.6">60%</meter>
不支持 <meter> 的浏览器（如 IE）会显示“60%”。
7.2 补充 ARIA 标签增强可访问性
<meter value="45" min="0" max="100" aria-label="当前电池电量百分比">45%</meter>
或者用 aria-labelledby 引用页面上的文本。
7.3 避免语义误用
不要用 <meter> 做进度条。
不要省略 value 属性。
7.4 合理设置 low 和 high
7.5 使用 CSS 但不破坏颜色含义
八、浏览器兼容性
建议访问 Can I Use 网站，以及时了解 meter 元素在各类浏览器中的最新兼容性支持情况。下图数据截止 2026.04.08。
总结
<meter> 是 HTML5 中一个轻量却精准的语义化工具。它通过 value、min、max、low、high、optimum 六个属性，就能清晰传达“测量值是多少”以及“这个值好不好”。浏览器自动赋予绿/黄/红的视觉提示，用户无需额外说明即可感知状态。与 <progress> 各司其职，不可混用。
掌握 <meter> 的关键点：
当你需要在网页中优雅地展示“数值在区间内的位置和好坏程度”时，<meter> 就是那个最合适的原生 HTML 元素——简单、标准、友好。
阅读原文：原文链接
该文章在 2026/4/23 16:40:13 编辑过
400 186 1886
