meter标签不是进度条，只表达数值在预设区间中的位置；必须显式设置min、max、value三个纯数字属性，缺一导致Chrome fallback或Firefox不渲染，low/high/optimum颜色效果跨浏览器极不可靠，且需严格满足数值约束。
meter 标签不是进度条，它不表达“任务完成了多少”，只表达“这个数在预设区间里站哪儿”——用错场景，语义就塌了。
为什么写了 value 却没显示条形？
浏览器不会自动补 min 和 max 来渲染视觉条。漏掉任意一个，Chrome 可能 fallback 成 min="0" max="1"，Firefox 直接不渲染（getBoundingClientRect().height 返回 0）。
-
min和max必须显式写为纯数字：min="0"合法，min="zero"或min="0px"无效 -
value必须是数字：value="75%"、value="0.75"都被忽略，得转成75或75.0 - 后端返回小数（如
0.72）时，JS 建议统一处理：Math.round(parseFloat(value) * 100)，再 clamp 到[min, max]范围内
low / high / optimum 真的能控制颜色吗？
它们只触发浏览器内置的语义着色逻辑，但实际效果极不可靠：Chrome 会按相对位置切绿/黄/红，Firefox 当前完全不支持视觉反馈，Safari 阈值判定逻辑不同（比如 value=85 在 Chrome 显黄，在 Safari 可能偏橙）。
- 只有
min < low < high < max且全部显式存在时，才参与语义判断 -
optimum不是“中间值”，而是业务定义的理想点：可以等于min（如噪音分贝越低越好）、大于max（如电池健康度越高越好） - 别指望靠颜色传达关键状态——屏幕阅读器基本不读
low/high含义，仅报"meter 75"
怎么让 meter 在旧浏览器和读屏软件里真正可用？
meter 在 IE 和 Edge 18 及更早版本中完全不渲染，只显示内部文本；NVDA、VoiceOver 等工具对语义属性支持薄弱，纯靠标签本身撑不住可访问性。
立即学习“前端免费学习笔记（深入）”；
- 必须提供
aria-label或包裹label元素，例如：aria-label="磁盘使用率 45%, 正常范围" - 结构降级更可靠：改用
<div role="meter" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>+ CSS 控制样式 - 内部文本（如
<meter>45%</meter>）仅作降级提示，且必须和value属性一致，否则读屏矛盾
真正难的不是写对三个属性，而是判断这个数据是否属于「静态标量度量」——一旦把它当进度条用，或者让设计师指望靠 low/high 控制业务逻辑颜色，后续维护就卡在语义和样式的夹缝里。
