<meter> 用于表示已知范围内的静态标量值（如CPU使用率），而非任务进度；<progress> 才表示动态、单向的完成比例。
HTML <meter> 元素不是“新特性”，它从 HTML5 就已存在，但长期被误用、忽略或用 <progress> 替代——它只适合表示「已知范围内的标量测量值」，比如磁盘使用率、评分、电量，而不是进度。
什么时候该用 <meter> 而不是 <progress>
<progress> 表示任务完成比例（动态、单向、有终点），<meter> 表示某个静态数值在预设区间里的相对位置（可高可低，无方向性）。
- ✅ 正确：
<meter value="85" min="0" max="100"></meter>（CPU 使用率 85%） - ❌ 错误：
<meter value="3" max="5"></meter>表示“第 3 步/共 5 步”——这是<progress>的职责 - ⚠️ 注意：
min/max必须是数字，且value必须落在区间内，否则浏览器会忽略渲染或显示空内容
<meter> 的 low、high、optimum 干什么用
这三个属性不控制样式，而是告诉浏览器“数值的语义倾向”，影响默认配色（如 Chrome 中低于 low 显示红色，高于 high 显示橙色，靠近 optimum 显示绿色）。
-
low和high定义“正常区间”边界（比如 20–80），之外算偏低/偏高 -
optimum是“理想值”，可以等于min或max（比如电池电量 optimum=100，而服务器负载 optimum=0） - 如果没设
low/high，浏览器不会自动推断；设了但optimum超出范围，部分浏览器可能静默忽略配色逻辑
样式受限但能 hack：怎么让 <meter> 看起来不像默认灰条
原生 <meter> 样式极难统一控制，各浏览器渲染差异大（Chrome 支持伪元素，Firefox 基本不响应 CSS），别指望纯 CSS 跨浏览器定制颜色+圆角+动画。
立即学习“前端免费学习笔记（深入）”；
- ✅ 可靠做法：用
role="meter"+<div>模拟，配合 ARIA 属性（aria-valuenow,aria-valuemin,aria-valuemax）保持可访问性 - ⚠️ 风险点：直接覆盖
appearance: none+ 伪元素（如meter::-webkit-meter-bar）在 Safari/Firefox 下无效，且未来可能被移除 - ? 小技巧：若必须用原生
<meter>，至少加title属性（<meter title="当前水位：72%"></meter>），鼠标悬停时提示数值
真正麻烦的不是写法，而是判断——你手上的那个数值，到底是“已完成多少”，还是“处在什么水平”。选错标签，后续所有样式和语义都得返工。
