本文全面对比 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（规范允许，但不推荐）。
三、语义与适用场景
<progress> 典型场景
文件上传 / 下载进度。
多步骤表单的完成度。
视频 / 音频缓冲或播放进度。
页面资源加载进度。
任何有明确终点的任务过程。
<meter>典型场景
磁盘 / 内存使用率。
电池电量。
考试分数（0~100 分）。
健康指标（血压、心率范围）。
网络信号强度（0~100%）。
投票支持率（范围 0~1）。
四、视觉表现与默认样式差异
<meter> 的颜色逻辑
有关 <meter> 元素的颜色逻辑，详情请参阅另一篇博文《
HTML <meter> 元素完全指南：属性、视觉语义、样式定制与无障碍实践
》中「视觉逻辑：颜色是如何自动生成的？」章节。
<meter min="0" max="40" low="18" high="28" optimum="10" value="35"></meter>
<meter min="0" max="40" low="18" high="28" optimum="35" value="10"></meter>
<meter min="0" max="40" low="18" high="28" optimum="24" value="4"></meter>
<meter min="0" max="40" low="18" high="28" optimum="24" value="25"></meter>
五、<progress> 的不确定状态
当 <progress> 没有 value 属性（或 value 缺失）时，进入不确定状态：
<progress>加载任务中...</progress>
六、可访问性（A11Y）注意事项
始终提供文字后备：两个元素内部的内容（如 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 自定义图表）
九、代码示例
基础示例
<p>文件上传进度：</p><progress value="45" max="100">45%</progress>
<p>正在连接服务器...</p><progress>请稍候</progress>
<p>电量：</p><meter value="0.68">68%</meter>
<p>磁盘使用率：</p><meter value="85" min="0" max="100" low="30" high="70" optimum="20"> 85% （高使用率）</meter>
高级样式定制（跨浏览器）
自定义 progress 样式
progress { width: 300px; height: 24px; border-radius: 14px; overflow: hidden;}progress::-webkit-progress-bar { background-color: #e0e0e0; border-radius: 14px;}progress::-webkit-progress-value { background-color: #2196f3; border-radius: 14px; transition: width 0.2s ease;}progress::-moz-progress-bar { background-color: #2196f3; border-radius: 14px;}
自定义 meter 样式
meter { width: 300px; height: 24px; border-radius: 14px;}meter::-webkit-meter-bar { background-color: #e0e0e0; border-radius: 14px;}meter::-webkit-meter-optimum-value { background-color: #4caf50;}meter::-webkit-meter-suboptimum-value { background-color: #ff9800;}meter::-webkit-meter-low-value { background-color: #f44336;}meter::-moz-meter-bar { border-radius: 14px;}
总结
特性 | <progress> | <meter> |
核心语义 | 任务进度（动态） | 测量范围（静态） |
是否支持不确定状态 | ✅ 支持（缺省 value 属性时） | ❌ 不支持 |
额外范围属性 | 仅 max | min，low，high，optimum |
颜色含义 | 完成百分比（通常单色） | 相对于最优值的高/中/低区域（多色） |
典型场景 | 上传、加载、播放 | 磁盘、电量、分数 |
可访问性角色 | progressbar | meter |
最终选择原则
正确使用这两个语义元素，不仅让界面更直观，也让代码更具可维护性和无障碍兼容性。从今天开始，告别“进度条选择困难症”！
阅读原文：原文链接
该文章在 2026/4/23 16:41:53 编辑过
400 186 1886
