该用 <meter> 而非 <progress> 时：展示固定范围内的当前状态值（如磁盘使用率、温度、评分），不表示任务进行；<progress> 仅用于有明确起止的进行中任务（如上传、加载）。
什么时候该用 <meter> 而不是 <progress>
当你展示的是一个「当前状态值」，且这个值始终落在已知、固定范围内（比如 0–100% 的磁盘使用率、-20°C 到 50°C 的温度、0–5 星的评分），就该用 <meter>。它不暗示任务正在进行，只回答“现在在哪”。<progress> 则必须关联一个明确的「进行中任务」——上传、下载、加载、安装等，它的 value 是随时间推进而变化的过程量。
常见误用：把服务器响应延迟渲染成 <progress>（实际没进度可量）；把用户积分等级写成 <progress>（积分不是任务，是状态）。这类场景用 <meter> 更语义准确，也更利于屏幕阅读器识别。
<meter> 的 low/high/optimum 属性到底起什么作用
这些属性不控制样式，而是提供语义信号，让浏览器和辅助技术能判断当前值的“质量”或“倾向”。例如：<meter value="65" min="0" max="100" low="30" high="80" optimum="90"> 表示 65 在 0–100 区间内属于“中等偏上”，但离最优值（90）还有距离。部分浏览器（如 Chrome）会据此自动切换背景色：低于 low 显红色，介于 low 和 high 之间显黄色，高于 high 且靠近 optimum 显绿色。
注意：low 和 high 必须在 min–max 范围内；optimum 可以等于 min 或 max（比如电池电量“越低越好”时，optimum="0" 是合法的）。
为什么 <progress> 不能设 min 属性
<progress> 的最小值永远是 0，规范强制规定，不可修改。你只能通过 value 和 max 控制显示比例。如果硬要实现“从 20% 开始到 80% 结束”的视觉效果，正确做法是：保持 max="100"，然后把 value 从 20 动态更新到 80；而不是试图用 min="20" —— 浏览器会忽略它，甚至导致可访问性信息错乱（AT 会误报“已完成 0%”）。
另一个关键点：<progress> 支持“不确定”状态——直接写 <progress>（不带 value），浏览器会渲染为循环动画，表示“有事在做，但无法量化”。<meter> 没有这种模式，它的 value 必须存在且为有效数字。
CSS 自定义样式时最容易翻车的三件事
不同浏览器对 <meter> 和 <progress> 的伪元素支持差异大，直接套用一套 CSS 几乎必然失效：
- Chrome / Safari 用
::-webkit-meter-bar、::-webkit-progress-bar等；Firefox 用::-moz-meter-bar、::-moz-progress-bar；Edge（Chromium 内核）跟随 WebKit 规则 -
appearance: none必须加在基础选择器上（如progress），否则伪元素样式不生效 - 设置
background时，<progress>的填充色由::-webkit-progress-value控制，而<meter>的填充色需同时覆盖::-webkit-meter-optimum、::-webkit-meter-suboptimum、::-webkit-meter-even-less-good三种状态
最稳妥的做法：先用 appearance: none 清除默认样式，再为每个浏览器单独写伪元素规则，不要指望单条 CSS 通吃。
