progress表示任务动态进展（如上传、加载），强调“完成多少”；meter展示静态度量值在已知范围内的位置（如磁盘使用率、评分），回答“现在在哪”，并支持low/high/optimum语义分段。
progress 用来表示任务进度，不是“当前值在范围里的位置”
progress 的核心语义是「某件事正在发生，且我们能估算它离完成还有多远」。比如文件上传、表单提交、视频播放时长——这些都有明确的起点和（至少可预估的）终点。value 表示已完成量，max 表示总量，浏览器据此算出百分比并渲染填充条。
常见错误是拿它显示“当前温度 23°C（范围 0–40）”，这属于度量场景，progress 语义错位，且无法表达“正常/偏高/偏低”的状态分段。
注意：progress 不自动更新，也不感知异步；value 未设置或为负时，会进入 indeterminate 状态（动画条纹），这不是 bug，是设计行为。
meter 专为度量设计，支持 low/high/min/max 多级阈值
meter 描述的是「某个静态值在预设范围内的相对位置」，典型如电量、评分、CPU 使用率、湿度等级。它不暗示“过程”或“进行中”，只回答“这个值落在哪一段”。
立即学习“前端免费学习笔记（深入）”；
关键参数差异：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
min和max定义数值边界（默认min="0" max="100"） -
low和high划分“正常区间”，浏览器可据此切换伪类样式（如meter:indeterminate不存在，但meter[value="75"]:not(:out-of-range)可用） -
optimum指定“最理想值”，部分浏览器会用颜色强化（如绿色最优、红色偏离）
例如：<meter value="85" min="0" max="100" low="30" high="70" optimum="50"></meter> —— 表示 85 超出 high 阈值，属“偏高”状态，且远离 optimum。
样式控制都靠伪元素，但 meter 的状态类更丰富
两者都支持 ::-webkit-progress-bar、::-moz-progress-bar 等前缀伪类，但 meter 还额外暴露语义状态：
-
meter[value="0"]或meter:out-of-range可捕获超限情况 -
meter:not(:out-of-range)区分是否在合法范围内 -
meter[value<low]、meter[value>high]等 CSS 属性选择器（需注意兼容性，Firefox 支持有限）
而 progress 几乎只有 ::-webkit-progress-value 这类渲染钩子，没有基于 value 区间的状态类——它本就不负责“判断好坏”，只负责“画满多少”。
IE 兼容和 polyfill 不是重点，但语义误用才是真坑
现代浏览器对 progress 和 meter 支持良好（Chrome 6+、Firefox 16+、Safari 6.1+），IE11 仅部分支持，但真正的问题不在兼容性。
容易被忽略的是：用 progress 显示实时传感器数据（如心率），或用 meter 表示下载进度，都会导致语义混乱、无障碍阅读器误读、CSS 扩展困难。它们的 DOM 角色不同：progress 是 role="progressbar"，meter 是 role="meter"，辅助技术依赖这个区分。
如果需要动态响应、复杂动画或跨浏览器一致外观，直接用 div + ARIA 更可控；原生标签的价值，恰恰在于语义准确、轻量、无需 JS 即可表达意图——前提是选对那个。
