meter 标签表示当前值在固定范围中的位置，而非任务进度；必须设置 min、max、value 三属性，且需包含内部文本以保障可访问性。
meter 标签不是进度条，它不表示任务完成过程，只表达「当前值在固定范围中的位置」——比如磁盘用了 68%，但不是“正在写入中”的那个 68%。
什么时候必须用 meter 而不是 progress
关键看数据有没有明确的「起始→结束」任务语义：
- 用
meter：CPU 占用率、电池剩余电量、用户信用分、满意度评分（4.2 / 5）、配额使用率（32GB / 50GB）——这些值本身没有“完成目标”，只是状态快照 - 用
progress：文件上传、表单提交、动画加载——有明确起点（0%）和终点（100%），且用户关心“还剩多少没做完” - 混用会破坏可访问性：屏幕阅读器读
meter时会说“68 percent, suboptimal”，读progress则说“68 percent complete”，语义错位会导致辅助技术误判
meter 必须设置的三个属性
缺任意一个，meter 在多数浏览器里会渲染异常或完全不可见：
-
min：最小合法值（默认 0），不能是字符串或空值 -
max：最大合法值（默认 1），注意不要写成max="100%"—— 必须是纯数字 -
value：当前值，必须落在min和max之间；超出范围时，Chrome/Firefox 会静默忽略该值，显示空白或默认色块
示例：<meter min="0" max="100" value="72">72%</meter> 合法；<meter value="72">72%</meter> 在 Safari 中可能不渲染进度条。
立即学习“前端免费学习笔记（深入）”；
low/high/optimum 怎么影响视觉和语义
这三个属性不控制长度，只触发浏览器内置的状态着色逻辑（如 Chrome 中绿色→黄色→红色），同时被屏幕阅读器解析：
-
low和high定义“正常区间”边界：value ≤ low → “偏低”；value ≥ high → “偏高”；中间为“正常” -
optimum决定“最优方向”：若optimum小于low，表示“越小越好”；若大于high，表示“越大越好”；居中则表示“接近中间最理想” - 错误写法：
<meter min="0" max="100" value="95" low="80" high="90" optimum="100"></meter>—— 此时 95 已超high，但optimum=100暗示“越高越好”，浏览器可能仍渲染为红色（因偏离optimum不够近），造成语义矛盾
动态更新 meter 值的注意事项
JS 直接改 meter.value 是安全的，但别指望它自动动画或重绘伪元素：
- 修改后浏览器不会触发动画，需手动加 CSS transition（仅对部分伪元素生效，且跨浏览器支持极差）
- Firefox 不支持
meter::-moz-meter-bar的 background 渐变，Chrome 的::-webkit-meter-inner-element又不响应 JS 更新后的 class 变化 - 更稳妥的做法：用
meter保语义，外层套<div class="meter-wrapper">控制尺寸/边框/文字，样式逻辑全走容器，避免死磕伪元素 - 别监听
change事件——meter不支持该事件；如需响应变化，得自己封装 setter 或用 MutationObserver 观察value属性变更
真正容易被忽略的是：哪怕你写了完整的 min/max/value，只要内容文本为空（比如 <meter value="72"></meter>），屏幕阅读器就只读数值，不读单位或上下文，语义直接打折。务必保留内部文本，哪怕只是 <meter ...>72%</meter>。
