标签不能画带刻度的进度条，它仅渲染无刻度的横向条形图；必须显式设置min、max、value，low/high/optimum仅影响颜色语义且跨浏览器支持差，需CSS伪元素定制外观，但无法添加刻度线、文字标签或指针。
怎样用 <meter></meter> 标签画一个带刻度的数值进度条
<meter></meter> 不是装饰性组件，它专为「已知范围内的标量测量值」设计，比如磁盘使用率、电量、完成度。它和 <progress></progress> 的关键区别在于：<meter></meter> 必须有明确的 min 和 max，且值可落在“低”“高”“最优”等语义区间内。
最简可用写法就是：
<meter value="65" min="0" max="100"></meter>浏览器会自动渲染成带背景刻度的条形图，无需 CSS 也能显示基本样式。
-
value是必填项，必须在min和max之间（否则会被截断或忽略） - 不设
min默认为 0，不设max默认为 1 —— 这很容易导致数值被压缩成几乎看不见的一条线，务必显式声明 - 如果只关心相对比例（如“已完成 3/5”），更适合用
<progress value="3" max="5"></progress>，<meter></meter>更适合“当前温度 23°C，正常范围 18–28°C”这类带参考区间的场景
怎样用 low、high、optimum 控制颜色语义
原生 <meter></meter> 在 Chrome/Firefox 中会根据这三个属性自动切换背景色：低于 low 显示红色，高于 high 显示橙色，靠近 optimum 显示绿色。但注意：这些属性只有在 value 落入对应区间时才生效，且必须满足 min ≤ low ≤ optimum ≤ high ≤ max，否则整个语义逻辑失效。
例如表示服务器负载（0–100%，理想值 40，警戒线 70）：
<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等伪元素
为什么 <meter></meter> 常常看起来没反应？常见渲染失效原因
不是代码写错，而是浏览器对 <meter></meter> 的渲染策略非常保守：它不会主动撑开高度，也不继承父容器字体大小，更不会响应 width/height 的百分比设置（除非显式设 display: block）。
- 默认是 inline 元素，若父容器行高小或有垂直对齐限制，可能被裁剪或压扁 —— 加
display: block或vertical-align: middle通常就能露出来 - CSS 设置
width有效，但height对原生外观影响极小；真正控制粗细得靠appearance: none+ 自定义伪元素，否则只能接受 UA 默认高度（约 1em） - 如果
value是字符串（如"65"）或非数字类型（如null），部分浏览器会静默失败，不报错也不渲染 —— 务必用Number()或parseFloat()预处理 - 服务端渲染时若
value为空或未传，HTML 里留下<meter value=""></meter>，Chrome 会当 0 渲染，Firefox 则可能留白 —— 建议后端兜底写value="0"
要不要用 CSS 自定义 <meter></meter>？什么时候值得动手
纯语义展示、兼容性要求不高（只跑 Chrome/Edge）、数值区间固定时，原生 <meter></meter> 足够轻量。但一旦需要统一设计语言、适配深色模式、或支持动画过渡，就必须 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 库，直接覆盖
<meter></meter>样式成本高，不如用<div role="meter"> 手写结构 + ARIA 属性，可控性更强 <p>原生 <code><meter></meter>的价值不在视觉，而在语义粒度 —— 它告诉辅助技术“这不是普通进度条，而是一个有健康区间判断的测量值”。这点容易被忽略，但恰恰是它不可替代的地方。
