用于显示静态数值比例，如磁盘占用率，需显式设置 min、max、value 及 low/high/optimum 语义区间，并配合 aria-label 保障可访问性； 才适用于动态任务进度。
meter 标签不是进度条，别用错场景
想展示磁盘空间「当前占用比例」，<meter></meter> 是语义正确的选择；但若页面里写着「正在扫描磁盘…」或需要动画填充效果，那就该换 <progress></progress> —— 后者专为任务推进设计，<meter></meter> 只反映静态快照。浏览器和屏幕阅读器会据此区分「这是状态值」还是「这是进行中动作」，混用会导致可访问性信息错乱。
必须显式写 min、max、value，否则不渲染
常见错误是只写 <meter value="82">82%</meter>，结果在 Firefox 里空白、Chrome 里极短——因为浏览器按默认 min="0" max="1" 解析，82 被当作 82 × 1 = 82，远超范围而被静默丢弃。正确写法必须带边界：
<meter value="82" min="0" max="100">82%</meter>
-
min和max不必是整数，支持小数（如电量用min="0" max="1"） -
value必须满足min ≤ value ≤ max，否则行为未定义 - 文本内容（如
82%）仅作 CSS 禁用或旧浏览器降级显示，不影响语义
用 low/high/optimum 定义颜色语义区间
浏览器原生会根据这三个属性自动切换背景色（Chrome：绿→黄→红），但前提是它们落在 [min, max] 内，且逻辑自洽：
<meter value="78" min="0" max="100" low="30" high="80" optimum="20">78%</meter>
-
low="30"表示 ≤30% 为“低占用”，倾向绿色 -
high="80"表示 ≥80% 为“高占用”，倾向红色 -
optimum="20"表示最理想是 20%，越靠近越健康；78 远离 optimum，所以显示为偏红的“亚健康”色 - 若
optimum设为 0（如“剩余空间越多越好”），则 78 会直接触发“过高”逻辑
CSS 着色必须分浏览器写，伪元素不通用
原生 <meter></meter> 的视觉样式无法跨浏览器统一，::-webkit-meter-bar 在 Chrome/Edge 有效，::-moz-meter-bar 在 Firefox 有效，二者互不兼容：
立即学习“前端免费学习笔记（深入）”；
meter::-webkit-meter-bar { background: transparent; }<br>meter::-webkit-meter-optimum-value { background: linear-gradient(90deg, #4caf50 0%, #4caf50 30%, #ff9800 30%, #ff9800 80%, #f44336 80%, #f44336 100%); }<br>meter::-moz-meter-bar { background: #e0e0e0; }<br>meter::-moz-meter-optimum { background: #4caf50; }<br>meter::-moz-meter-suboptimum { background: #ff9800; }<br>meter::-moz-meter-even-less-good { background: #f44336; }
- 不要依赖浏览器默认着色，它在深色模式、高对比度系统下常失效
- 所有伪元素必须单独声明，不能合并写成
meter::(-webkit|-moz)-xxx - 无障碍要求：必须配
aria-label="磁盘使用率 78%"或包裹<label></label>，否则屏幕阅读器只读数字
真正麻烦的不是写法，而是当页面有多个 meter（比如 C/D/E 盘同时展示）时，每个都要同步更新 value、同步维护 aria 属性、同步处理浏览器兼容样式——稍有遗漏，用户看到的就是语义断裂或视觉错位的“半成品仪表”。
