<meter>标签仅静态渲染数值在预设区间内的相对位置，不校验、无响应式、不支持动画或自定义样式；必须显式设置min/max/value，low/high/optimum仅影响部分浏览器内置颜色且不可靠。
<meter> 标签不是用来做“范围测量”的，它只是**按固定比例渲染一个已知数值在预设区间内的相对位置**——没有计算、不校验、不响应变化，纯展示。
为什么<meter>值一变就失效？
常见错误是把 <meter> 当成实时仪表盘组件用，比如绑定 JS 变量后直接改 value 属性却不触发重绘（尤其在 Vue/React 中）。
-
<meter>是原生 HTML 元素，本身无响应式机制，value改了 DOM 就更新，但框架可能劫持了属性赋值或未触发 re-render - 必须确保写入的是合法数字，且落在
min～max范围内；超出时浏览器会显示空条或 fallback 行为（Chrome 显示灰色，Firefox 可能截断） - 不要省略
min和max：默认值虽为 0 和 1，但显式声明可避免语义歧义和 SSR 渲染不一致
<meter> 的 low/high/optimum 怎么起作用？
这三个属性只影响内置样式（如背景色），不改变数值逻辑，且依赖浏览器实现——不是所有 UA 都渲染差异色块。
-
low和high定义“正常区间”边界，optimum指“理想值点”（可小于low，比如电池电量 optimum=100，low=20） - 颜色表现不可控：Chrome 用绿色/黄色/红色分段，Safari 仅对
optimum附近加粗，Firefox 基本忽略 - 若需稳定视觉反馈，别依赖这些属性，用 CSS 类 + JS 判断更可靠
替代方案：什么时候该放弃<meter>？
当需要以下任一能力时，<meter> 就不合适：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 支持动画过渡（原生不支持
transition到value） - 自定义刻度、标签或单位（如 “42%”、“满载” 文字）
- 鼠标悬停显示详情、点击交互、键盘导航
- 适配深色模式（
<meter>的颜色由 UA 控制，无法用color-scheme或CSS @media (prefers-color-scheme)干预）
此时建议用 <div role="progressbar"> + ARIA 属性 + 自定义样式，或封装轻量 SVG 进度条。
真正容易被忽略的点：很多开发者以为 <meter> 天然可访问，但它只提供基础语义（meter role），屏幕阅读器读出的是“XX out of YY”，不会自动拼接单位或上下文。如果值代表“CPU 使用率”，得靠 aria-label 或 <label for> 显式补充，否则信息残缺。
