应使用 表示静态标量值（如CPU使用率），而 用于有明确完成目标的任务； 必须设置 min、max 和 value 属性，且跨浏览器样式支持极差。
<meter></meter> 是 HTML5 中用于表示已知范围内的标量测量值的语义化标签，比如磁盘使用率、投票占比、加载进度（但注意：它不适用于实时进度，<progress></progress> 更合适）。
什么时候该用 <meter></meter> 而不是 <progress></progress>
关键区别在于语义和行为：<meter></meter> 描述一个「静态的、当前所处位置」的值（如“CPU 使用率 68%”），而 <progress></progress> 表示一个「正在进行中的任务」（如“文件上传中：已完成 68%”）。
- 如果值会随时间变化但没有明确“完成目标”，比如温度、电量、信用分——用
<meter></meter> - 如果存在明确的起始与结束（0 → 100% 完成），且用户关心的是“还剩多少没做完”——用
<progress></progress> - 浏览器不会为
<meter></meter>自动播放动画或提供内置交互；它只是展示，不暗示状态流转
<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></meter> 的样式支持极不统一：Chrome/Edge 支持完整的伪元素（::-webkit-meter-inner-element、::-webkit-meter-bar、::-webkit-meter-optimum-value 等），Firefox 完全不支持自定义，Safari 仅部分支持。这意味着你写的 CSS 很可能只在一种浏览器里起作用。
- 不要试图用通用选择器（如
meter { width: 200px; }）控制内部条状结构——它只影响外层容器，条形图本身由伪元素控制 - Firefox 下所有伪元素规则会被静默忽略，且无降级提示
- 若需跨浏览器一致外观，实际项目中更推荐用
<div> + ARIA 属性（<code>role="meter"、aria-valuenow等）自行实现真正用好
<meter></meter>的难点不在写法，而在判断它是否真的比一个带 ARIA 的<div> 更值得投入——尤其当设计要求精确配色、响应式缩放或辅助技术兼容时，原生标签的限制往往比收益更明显。</div>
