中的meter标签指什么？

应使用 <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 很可能只在一种浏览器里起作用。

• 不要试图用通用选择器（如 meter { width: 200px; }）控制内部条状结构——它只影响外层容器，条形图本身由伪元素控制
• Firefox 下所有伪元素规则会被静默忽略，且无降级提示
• 若需跨浏览器一致外观，实际项目中更推荐用 <div> + ARIA 属性（role="meter"、aria-valuenow 等）自行实现

真正用好 <meter> 的难点不在写法，而在判断它是否真的比一个带 ARIA 的 <div> 更值得投入——尤其当设计要求精确配色、响应式缩放或辅助技术兼容时，原生标签的限制往往比收益更明显。