中的meter标签指什么？

作者：袖梨 2026-07-21

应使用 <meter> 表示静态标量值（如CPU使用率），而 <progress> 用于有明确完成目标的任务；<meter> 必须设置 min、max 和 value 属性，且跨浏览器样式支持极差。

<meter> 是 HTML5 中用于表示已知范围内的标量测量值的语义化标签，比如磁盘使用率、投票占比、加载进度（但注意：它不适用于实时进度，<progress> 更合适）。

什么时候该用 `<meter>` 而不是 `<progress>`

关键区别在于语义和行为：<meter> 描述一个「静态的、当前所处位置」的值（如“CPU 使用率 68%”），而 <progress> 表示一个「正在进行中的任务」（如“文件上传中：已完成 68%”）。

如果值会随时间变化但没有明确“完成目标”，比如温度、电量、信用分——用 <meter>
如果存在明确的起始与结束（0 → 100% 完成），且用户关心的是“还剩多少没做完”——用 <progress>
浏览器不会为 <meter> 自动播放动画或提供内置交互；它只是展示，不暗示状态流转

`<meter>` 必须设置的属性有哪些

它至少需要 min、max 和 value 三者才能正确渲染。缺任意一个，浏览器可能显示为空白、默认值（如 0–1 范围），或完全忽略样式逻辑。

min：最小可取值（默认 0）
max：最大可取值（默认 1）
value：当前值（必须在 min–max 范围内，否则无效）
可选：low、high、optimum 用于划分状态区间（影响 meter::-webkit-meter-bar 等伪元素颜色）

示例：<meter value="72" min="0" max="100" low="30" high="80" optimum="50">72%</meter> —— 浏览器会据此判断“72”属于 high 区间，且偏离 optimum，可能渲染为橙色而非绿色。

立即学习“前端免费学习笔记（深入）”；

样式控制难在哪？为什么看起来总像没生效

<meter> 的样式支持极不统一：Chrome/Edge 支持完整的伪元素（::-webkit-meter-inner-element、::-webkit-meter-bar、::-webkit-meter-optimum-value 等），Firefox 完全不支持自定义，Safari 仅部分支持。这意味着你写的 CSS 很可能只在一种浏览器里起作用。