标签不能画带刻度的进度条，它仅渲染无刻度的横向条形图；必须显式设置min、max、value，low/high/optimum仅影响颜色语义且跨浏览器支持差，需CSS伪元素定制外观，但无法添加刻度线、文字标签或指针。

怎样用 标签画一个带刻度的数值进度条

不是装饰性组件，它专为「已知范围内的标量测量值」设计，比如磁盘使用率、电量、完成度。它和 的关键区别在于： 必须有明确的 min 和 max，且值可落在“低”“高”“最优”等语义区间内。

最简可用写法就是：

<meter value="65" min="0" max="100"></meter>

浏览器会自动渲染成带背景刻度的条形图，无需 CSS 也能显示基本样式。

• value 是必填项，必须在 min 和 max 之间（否则会被截断或忽略）
• 不设 min 默认为 0，不设 max 默认为 1 —— 这很容易导致数值被压缩成几乎看不见的一条线，务必显式声明
• 如果只关心相对比例（如“已完成 3/5”），更适合用 ， 更适合“当前温度 23°C，正常范围 18–28°C”这类带参考区间的场景

怎样用 low、high、optimum 控制颜色语义

原生 在 Chrome/Firefox 中会根据这三个属性自动切换背景色：低于 low 显示红色，高于 high 显示橙色，靠近 optimum 显示绿色。但注意：这些属性只有在 value 落入对应区间时才生效，且必须满足 min ≤ low ≤ optimum ≤ high ≤ max，否则整个语义逻辑失效。

例如表示服务器负载（0–100%，理想值 40，警戒线 70）：

文智Doc

文智Doc是一款AI办公效率工具，AI 文档生成工具，一键生成初稿智能排版。

下载

<meter value="68" min="0" max="100" low="40" high="70" optimum="40"></meter>

• optimum 不代表“目标值”，而是“最希望 value 靠近的那个点”，它决定绿色区域中心，不是阈值
• low 和 high 定义的是两个边界，中间默认为“正常”区间（灰色或蓝色，取决于 UA 样式）
• Safari 目前完全忽略这三个属性，仅渲染基础条形 —— 如需跨浏览器一致配色，必须用 CSS 覆盖 meter::-webkit-meter-inner-element 等伪元素

为什么 常常看起来没反应？常见渲染失效原因

不是代码写错，而是浏览器对 的渲染策略非常保守：它不会主动撑开高度，也不继承父容器字体大小，更不会响应 width/height 的百分比设置（除非显式设 display: block）。

• 默认是 inline 元素，若父容器行高小或有垂直对齐限制，可能被裁剪或压扁 —— 加 display: block 或 vertical-align: middle 通常就能露出来
• CSS 设置 width 有效，但 height 对原生外观影响极小；真正控制粗细得靠 appearance: none + 自定义伪元素，否则只能接受 UA 默认高度（约 1em）
• 如果 value 是字符串（如 "65"）或非数字类型（如 null），部分浏览器会静默失败，不报错也不渲染 —— 务必用 Number() 或 parseFloat() 预处理
• 服务端渲染时若 value 为空或未传，HTML 里留下 ，Chrome 会当 0 渲染，Firefox 则可能留白 —— 建议后端兜底写 value="0"

要不要用 CSS 自定义 ？什么时候值得动手

纯语义展示、兼容性要求不高（只跑 Chrome/Edge）、数值区间固定时，原生 足够轻量。但一旦需要统一设计语言、适配深色模式、或支持动画过渡，就必须 CSS 注入。

关键伪元素只有三个：meter::-webkit-meter-bar（背景轨道）、meter::-webkit-meter-optimum-value（最优区间填充）、meter::-webkit-meter-suboptimum-value（非最优填充）。Firefox 使用 meter::bar 等不同伪类，无法统一。

• 动画只能作用于 value 属性变更（通过 JS 修改），不能用 transition 直接过渡宽度 —— 需监听属性变化或用 requestAnimationFrame 模拟
• 自定义后会丢失屏幕阅读器对 low/high/optimum 的语义播报，需手动加 aria-valuetext 补充说明（如 aria-valuetext="负载偏高，68%，建议检查"）
• 如果项目已用 Tailwind 或其他原子 CSS 库，直接覆盖 样式成本高，不如用
  手写结构 + ARIA 属性，可控性更强

  原生 的价值不在视觉，而在语义粒度 —— 它告诉辅助技术“这不是普通进度条，而是一个有健康区间判断的测量值”。这点容易被忽略，但恰恰是它不可替代的地方。