meter 不是进度条，它只表示当前值在预设范围中的相对位置，不表达任务完成度；必须显式声明 min、max、value，缺一不可，且 low/high/optimum 仅提供有限语义线索，不可依赖其触发样式或逻辑。
meter 标签不是进度条，别和 progress 混用
直接说结论：meter 不是进度条，它不表达“任务完成多少”，只表达“当前值在预设范围中的位置”。拿它显示文件上传、页面加载、表单提交的进度，语义错误，屏幕阅读器会读成“65 out of 100”，而不是“65% complete”，辅助技术用户会误判状态。
常见误用场景包括：
- 把
<meter value="42" max="100"></meter>当作上传进度——该用<progress></progress> - 在倒计时动画里反复改
meter.value——这不是它的设计用途，频繁更新触发 layout thrashing，尤其在同页多个 meter 时 - 给“用户等级 Lv.12”套
meter——等级无上下界，也非标量测量，语义崩坏
meter 必须写全 min、max、value，缺一不可
浏览器不会帮你猜范围。min 默认是 0，max 默认是 1，漏掉任意一个，多数浏览器直接降级为无样式内联元素——看着像没写，实际写了但不渲染。
典型错误写法与后果：
-
<meter value="85"></meter>→ Chrome 解析为value="85"/max="1"，视觉长度 ≈ 8500%，溢出或截断 -
<meter value="65%"></meter>→value必须是数字，带单位或百分号会导致整个标签失效，渲染为空白 - 服务端模板中写
<meter value="{{item.percent}}%"></meter>→ 应改为<meter value="{{item.percent}}"></meter>
low/high/optimum 的作用很有限，别指望靠它们驱动逻辑
这三个属性不控制长度，也不触发事件，只提供脆弱的语义线索：Chrome 可能据此着色（绿/黄/红），Firefox 目前完全忽略 low/high，Safari 对 optimum 着色支持有限。颜色变化不可监听，也没对应 DOM 事件。
关键约束条件：
-
low和high必须落在[min, max]内，且low ，否则 Chrome/Firefox 静默忽略着色逻辑 -
optimum可以等于min或max（如噪音分贝越低越好，就设optimum="min"），但不能超出范围，否则静默失效 - 状态判断必须靠 JS 手动计算，例如：
if (meter.value ，不能依赖伪类或颜色变化
可访问性与兼容性现实：别只靠 HTML 属性
meter 在 IE 和 Edge 18 及更早版本中完全不渲染，仅显示内部文本；现代浏览器虽支持，但原生样式极难统一，且无障碍依赖严格——只写 value 不写 min/max，NVDA 或 VoiceOver 可能读成 “0.45 out of 1”，而非 “45 out of 100”。
必须做的几件事：
- 显式包裹
<label></label>或加aria-label，否则视障用户无法理解度量对象（是“磁盘空间”还是“内存使用”？） - 内部文本不可省，例如
<meter min="0" max="100" value="73">73%</meter>，这是降级提示，也是读屏器主要依据 - 避免仅靠颜色传达状态，
low/high的语义必须配合文本提示（如“偏高”“偏低”） - 真要可靠控制样式，得用 CSS 伪元素 + 浏览器前缀，且先加
appearance: none，否则无效
真正难的不是写对标签，而是想清楚这个值有没有公认的上下界、是否需要传达“偏低/偏高/理想”的隐含判断——没想清这点，加再多 CSS 也救不回语义混乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
