90%的人分不清 HTML5 的<meter> 和 <progress>？看这篇就够了
本文全面对比 HTML5 的 ＜progress＞ 与 ＜meter＞ 元素，涵盖核心定义、属性差异（包括 low、high、optimum 的颜色逻辑）、语义适用场景、浏览器默认样式、CSS 定制、可访问性实践及降级方案。通过大量代码示例、动态交互和决策流程图，帮助你在实际项目中精准选择并优雅实现进度指示或测量显示。
在 HTML5 中，＜progress＞ 和 ＜meter＞ 是两个容易混淆的进度指示元素。它们都以条形图的形式展示某种“量”，但背后的语义、用途和可用属性却截然不同。选错元素不仅会误导用户，还会影响页面的无障碍体验。本文将带你彻底理解这两个元素的异同，并通过丰富的示例和实用建议，帮助你在合适的场景做出正确的选择。
元素 | 定义 | 本质 |
＜progress＞ | 表示 任务完成进度，强调“正在进行的过程” | 动态、临时、面向未来完成度 |
＜meter＞ | 表示 已知范围内的标量测量值，强调“静态的测量结果” | 相对固定、持续显示、面向当前状态 |
简单来说：如果任务会做完，用 ＜progress＞；如果数值永远在一个范围内展示状态，用 ＜meter＞。
属性 | ＜progress＞ | ＜meter＞ | 说明 |
value | 已完成量（缺省时进入不确定状态） | 当前测量值（可选，默认 0） | 两者都支持浮点数 |
max | 最大值，默认1 | 最大值，默认1 | 值必须大于 0 |
min | ❌ 不支持 | ✅ 最小值，默认 0 | 可定义测量起点 |
low | ❌ 不支持 | ✅ 低值范围的上限 | 小于 low 值为 低值范围 |
high | ❌ 不支持 | ✅ 高值范围的下限 | 大于 high 值为 高值范围 |
optimum | ❌ 不支持 | ✅ 最佳值 | 影响颜色分区逻辑 |
注意：＜progress＞ 没有 min，因为进度天然从 0 开始；＜meter＞ 的所有属性均为可选，且 min 可以大于 max（规范允许，但不推荐）。
文件上传 / 下载进度。
多步骤表单的完成度。
视频 / 音频缓冲或播放进度。
页面资源加载进度。
任何有明确终点的任务过程。
磁盘 / 内存使用率。
电池电量。
考试分数（0~100 分）。
健康指标（血压、心率范围）。
网络信号强度（0~100%）。
投票支持率（范围 0~1）。
＜progress＞：绿色填充条（不同浏览器略有差异）。不确定状态下显示为连续的左右移动光斑或反复循环的条纹动画。
＜meter＞：根据数值与 low、high、optimum 的关系，自动显示 红、黄、绿三段颜色：
绿色：最优区间（optimum所在的值范围区间）。
黄色：相邻区间（与optimum相邻的值范围区间）。
红色：相对区部（与optimum相对的值范围区间）。
有关 ＜meter＞ 元素的颜色逻辑，详情请参阅另一篇博文《
HTML ＜meter＞ 元素完全指南：属性、视觉语义、样式定制与无障碍实践
Sharing Pi，公众号：Sharing PiHTML ＜meter＞ 元素完全指南：属性、视觉语义、样式定制与无障碍实践
》中「视觉逻辑：颜色是如何自动生成的？」章节。
＜!-- optimum 在低范围（10），高范围（28-40）显示红色 --＞＜meter min="0" max="40" low="18" high="28" optimum="10" value="35"＞＜/meter＞＜!-- optimum 在高范围（35），低范围（0-18）显示红色 --＞ ＜meter min="0" max="40" low="18" high="28" optimum="35" value="10"＞＜/meter＞＜!-- optimum 在正常范围（24），无红色 --＞＜meter min="0" max="40" low="18" high="28" optimum="24" value="4"＞＜/meter＞＜!-- optimum 在正常范围（24），无红色 值在目标区域，显示绿色--＞＜meter min="0" max="40" low="18" high="28" optimum="24" value="25"＞＜/meter＞
当 ＜progress＞ 没有 value 属性（或 value 缺失）时，进入不确定状态：
＜progress＞加载任务中...＜/progress＞
外观：连续动画条，不显示具体百分比。
适用场景：等待服务器响应、执行时间未知的批量操作、没有进度反馈的任务。
始终提供文字后备：两个元素内部的内容（如 70%）会在不支持它们的浏览器中显示，同时也辅助屏幕阅读器。
使用 aria-label 或关联 ＜label＞：
＜label for="disk-meter"＞系统磁盘使用率＜/label＞＜meter id="disk-meter" value="0.75"＞75%＜/meter＞
＜progress＞ 可搭配 aria-valuetext：当进度不是简单百分比时（如“步骤 3/5”）。
避免用 ＜meter＞ 表示任务进度：屏幕阅读器会将其识别为“测量条”，而非“进度条”，语义错误。
元素 | Chrome | Firefox | Safari | Edge | 移动端 |
＜progress＞ | ✅ | ✅ | ✅ | ✅ | ✅ |
＜meter＞ | ✅ | ✅ | ✅ | ✅ | ✅ |
降级：在不支持的老旧浏览器（如 IE ＜ 10）中，元素会退化为内联文本，显示内部文字。因此务必在两个元素中写入描述性内容。
是否需要表示一个会完成的任务？│├─ 是 → 使用 ＜progress＞│ ├─ 已知进度 → 设置 value / max│ └─ 未知进度 → 不设置 value（不确定状态）│└─ 否 → 数值是否在一个固定范围内，且代表测量状态？ │ ├─ 是 → 使用 ＜meter＞ │ ├─ 需要警告区域 → 设置 low / high │ └─ 需要最优值倾向 → 设置 optimum │ └─ 否 → 考虑其他元素（如 div + CSS 自定义图表）
＜!-- progress：确定进度 --＞＜p＞文件上传进度：＜/p＞＜progress value="45" max="100"＞45%＜/progress＞＜!-- progress：不确定进度 --＞＜p＞正在连接服务器...＜/p＞＜progress＞请稍候＜/progress＞＜!-- meter：基本用法 --＞＜p＞电量：＜/p＞＜meter value="0.68"＞68%＜/meter＞＜!-- meter：完整范围 + 阈值 --＞＜p＞磁盘使用率：＜/p＞＜meter value="85" min="0" max="100" low="30" high="70" optimum="20"＞ 85% （高使用率）＜/meter＞
自定义 progress 样式
/* 自定义 progress 样式 */progress { width: 300px; height: 24px; border-radius: ; overflow: hidden;}progress::-webkit-progress-bar { background-color: #e0e0e0; border-radius: ;}progress::-webkit-progress-value { background-color: #2196f3; border-radius: ; transition: width 0.2s ease;}progress::-moz-progress-bar { background-color: #2196f3; border-radius: ;}
自定义 meter 样式
meter { width: 300px; height: 24px; border-radius: ;}meter::-webkit-meter-bar { background-color: #e0e0e0; border-radius: ;}meter::-webkit-meter-optimum-value { background-color: #4caf50;}meter::-webkit-meter-suboptimum-value { background-color: #ff9800;}meter::-webkit-meter-low-value { background-color: #f44336;}/* Firefox 支持 */meter::-moz-meter-bar { border-radius: ;}
特性 | ＜progress＞ | ＜meter＞ |
核心语义 | 任务进度（动态） | 测量范围（静态） |
是否支持不确定状态 | ✅ 支持（缺省 value 属性时） | ❌ 不支持 |
额外范围属性 | 仅 max | min，low，high，optimum |
颜色含义 | 完成百分比（通常单色） | 相对于最优值的高/中/低区域（多色） |
典型场景 | 上传、加载、播放 | 磁盘、电量、分数 |
可访问性角色 | progressbar | meter |
如果 任务会结束，用 ＜progress＞。
如果 展示某个指标在区间内的状态，用 ＜meter＞。
永远不要用 ＜meter＞ 表示任务进度，也不要用 ＜progress＞ 展示静态测量值。
正确使用这两个语义元素，不仅让界面更直观，也让代码更具可维护性和无障碍兼容性。从今天开始，告别“进度条选择困难症”！
阅读原文：原文链接
