meter标签适用于磁盘使用率、信用分、投票支持率、响应时间、剩余天数等有明确上下界和静态快照的标量场景，不适用于进度类动态过程；value/min/max缺一不可，low/high/optimum仅提供脆弱语义线索且跨浏览器支持差，需严格校验范围并配合aria保障可访问性。
meter 标签适合哪些真实数据场景
它只适用于「有明确上下界、静态快照式」的标量值——不是进度，不是输入，更不是动画载体。一旦数据带“过程感”或边界不固定，meter 就语义失准。
- 磁盘使用率：
min="0"max="100"value="87"（当前占 87%，范围恒定） - 用户信用分：
min="300"max="850"value="724"（非归一化，原始分段有效） - 投票支持率：
min="0"max="100"low="40"high="80"optimum="95"（强调“越高越好”，且 95 是业务定义最优） - 服务器响应时间（毫秒）：
min="0"max="500"value="412"optimum="0"（越小越好，optimum设为min） - 活动剩余天数：
min="0"max="30"value="3"（是“还剩 3 天”，不是倒计时过程）
别用在文件上传、页面加载、表单提交这些有起点→终点的任务流里——那该用 progress。
为什么 value/min/max 缺一不可
浏览器不会帮你猜范围。meter 没有默认的视觉比例逻辑，漏掉任意一个，多数浏览器直接降级为无样式内联元素——看着像没写，其实写了但不渲染。
-
min默认是0，但若业务允许负值（如温度 -20°C），必须显式写min="-20" -
max默认是1，写<meter value="65"></meter>实际被解析为value="65"/max="1"→ 视觉长度 ≈ 6500%，溢出或截断 -
value必须是数字，value="65%"或value="65px"会导致整个标签失效，渲染为空白 - 服务端模板中常见错误：
<meter value="{{item.percent}}%"></meter>→ 应改为<meter value="{{item.percent}}"></meter>
low/high/optimum 的实际作用和坑点
它们不控制样式本身，只提供语义线索，由浏览器决定如何着色。但这个“决定”非常脆弱，且跨浏览器不一致。
-
low和high必须落在[min, max]内，且low ，否则 Chrome/Firefox 会忽略颜色逻辑 -
optimum可以等于min或max（比如噪音分贝越低越好，就设optimum="min"），但不能超出范围，否则静默失效 - Firefox 目前完全不响应
low/high，只按基础条形渲染；Safari 对optimum着色支持有限 - 别指望靠它们驱动业务逻辑——颜色变化不可监听，也没对应事件，状态判断必须靠 JS 手动计算
兼容性和可访问性绕不开的现实
meter 在 IE 和 Edge 18 及更早版本中完全不渲染，仅显示内部文本；即使现代浏览器，原生样式也极难统一，且无障碍依赖严格属性组合。
- 必须配
label或aria-label，否则屏幕阅读器可能只读 “65”，而非 “磁盘使用率 65%” - 内部文本（如
<meter>65%</meter>）只是降级 fallback，不能替代aria-valuetext或明确单位 - 动态更新时，仅改
meter.value不够——要同步更新aria-valuenow，否则辅助技术感知不到变化 - 真需要动画、响应式缩放、或兼容旧环境？用
div+role="meter"+aria-valuemin/aria-valuemax/aria-valuenow更稳妥
真正容易被忽略的是：它不是“视觉组件”，而是“语义信标”。写对属性比调对颜色更重要，而判断“这数据到底算不算静态标量测量”，往往比写代码更花时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
