HTML <meter> 元素完全指南：属性、视觉语义、样式定制与无障碍实践

在网页中展示“某个数值在整体中的位置”是一种常见需求——比如你的硬盘还剩多少空间、手机电量是否告急、考试成绩属于哪个等级。HTML5 引入的＜meter＞元素正是为此而生。它不仅能显示数值，还能通过颜色变化自动传递“好、中、差”的状态信息。

本文带你系统掌握＜meter＞的用法，避开常见误区，并写出优雅、可访问的代码。

一、＜meter＞是什么？什么时候用它？

＜meter＞代表一个已知范围内的标量测量值。它的关键特征是：

范围已知（例如 0～100%、0～150 分、0～1 等）。
数值是测量结果，不是“完成进度”。
可以附带“好/差”的评价标准（通过 low、high、optimum）。

典型使用场景

场景类型	示例
磁盘或内存使用量	-
电池剩余电量	-
考试得分	85/100
温度、湿度、速度等传感器读数	-
投票支持率	72% 赞成
产品评分	4.2/5 星

不要用于

任务加载、上传、安装进度 → 请用＜progress＞。
未知总量或不确定范围的数值 → 请用普通文本或图表。

二、属性全面解析

属性	含义	是否必需	默认值	约束
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）与目标区域的对应关系进行判定。

如果 optimum 的值在「低范围」内，那目标区域就是「低范围」。optimun的值在 「正常范围」内，则目标区域就是 「正常范围」，依次类推。

3.3 判断颜色

默认状态下，＜meter＞元素只使用绿、黄、红三种颜色：

当value的值在目标区域内，显示颜色为绿色。
当value的值在目标区域的相邻范围，颜色为黄色。
当value的值在目标区域的相对范围，颜色为红色。

理解「相邻范围」和「相对范围」

相邻或相对范围是基于目标区域而言的。
当目标区域是 「正常范围」时，相邻范围是「低范围」和「高范围」，此时，无论 value是在「低范围」还是「高范围」，都显示为黄色。
当目标区域是「低范围」时，相邻范围是「正常范围」，相对范围是「高范围」。
当目标区域是「高范围」时，相邻范围是「正常范围」，相对范围是「低范围」。

min           low  high       max  [低范围] -—--— [正常范围] ——--— [高范围]         |        |          |         |     optimum       |         |        |          |       相邻范围  目标区域    相邻范围         |        |          |        黄色      绿色        黄色--------------------------------------------min                  low  high     max  [低范围] -—optimum —— [正常范围] ——— [高范围]             |           |           |           目标区域     相邻范围     相对范围             |           |           |            绿色         黄色         红色--------------------------------------------min          low  high             max  [低范围] -—-— [正常范围] —-optimum—— [高范围]         |       |          |                     相对范围  相邻范围    目标区域            |       |          |        红色     黄色        绿色

通俗总结

只要optimum的值在正常范围，只会有黄色和绿色。
只要optimum的值不在正常范围，只会有黄色、绿色和红色。
value在相邻范围都显示黄色，在相对范围都显示为红色。

一句话快速记忆：optimum 在哪，哪就绿；相邻黄；相对红。

示例：

＜!-- optimum 在低范围（10），高范围（28-40）显示红色 --＞＜meter min="0" max="40" low="18" high="28" optimum="10" value="35"＞＜/meter＞
＜!-- optimum 在高范围（35），低范围（0-18）显示红色 --＞＜meter min="0" max="40" low="18" high="28" optimum="35" value="10"＞＜/meter＞
＜!-- optimum 在正常范围（24），无红色 --＞＜meter min="0" max="40" low="18" high="28" optimum="24" value="4"＞＜/meter＞
＜!-- optimum 在正常范围（24），无红色 值在目标区域，显示绿色--＞＜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: ;}

/* WebKit/Blink 内核（Chrome, Edge, Safari） */  meter::-webkit-meter-bar {    background: #e9ecef;    border-radius: ;    border: none;  }  meter::-webkit-meter-optimum-value {    background: linear-gradient(135deg, #2ecc71, #27ae60);    border-radius: ;  }  meter::-webkit-meter-suboptimum-value {    background: linear-gradient(135deg, #f1c40f, #f39c12);    border-radius: ;  }  meter::-webkit-meter-even-less-good-value {    background: linear-gradient(135deg, #e74c3c, #c0392b);    border-radius: ;  }

  /* Firefox */  meter::-moz-meter-bar {    border-radius: ;  }  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

让它们符合真实业务阈值。例如健康温度范围 18–28，就设 low=18, high=28。

7.5 使用 CSS 但不破坏颜色含义

尽量保持“绿=优，黄=中，红=差”的通用认知。

八、浏览器兼容性

建议访问 Can I Use 网站，以及时了解 meter 元素在各类浏览器中的最新兼容性支持情况。下图数据截止 2026.04.08。

总结

＜meter＞是 HTML5 中一个轻量却精准的语义化工具。它通过 value、min、max、low、high、optimum 六个属性，就能清晰传达“测量值是多少”以及“这个值好不好”。浏览器自动赋予绿/黄/红的视觉提示，用户无需额外说明即可感知状态。与＜progress＞各司其职，不可混用。

掌握＜meter＞的关键点：

语义正确：只用于已知范围的测量结果。
阈值合理：根据真实业务设置 low / high / optimum。
后备兼容：标签内写文本。
样式可选：用 CSS 伪元素定制，保留颜色语义。
无障碍：配合 aria-label 让屏幕阅读器读出精确信息。

当你需要在网页中优雅地展示“数值在区间内的位置和好坏程度”时，＜meter＞就是那个最合适的原生 HTML 元素——简单、标准、友好。

阅读原文：原文链接

一、＜meter＞ 是什么？什么时候用它？