该用时：表达任务动态进展，如文件上传；该用时：展示已知范围内的静态度量值，如磁盘使用率。二者语义不可互换，强调“完成多少”，回答“现在在哪”。
什么时候该用 <progress></progress> 而不是 <meter></meter>
当你在表达「一个任务正在发生、且有明确起点和终点」时，才该用 <progress></progress>。比如文件上传、页面资源加载、表单提交等待——这些场景中，value 是随时间推进而变化的过程量，浏览器会据此触发可访问性播报（如“上传进度 72%”）。
常见误用：<progress value="85"></progress> 单独展示用户积分等级、API 响应延迟、服务器 CPU 使用率。这些都不是“任务”，而是当前状态，<progress></progress> 语义错误，屏幕阅读器可能误读为“某任务已完成 85%”，造成歧义。
- 必须设置
value，否则显示为不确定状态（流动动画），Lighthouse 和 axe 会报“缺失 value 属性” -
max默认是 1，但建议显式写max="100"，避免小数精度引发的渲染异常 - 动态更新优先用
element.value = 65，而非setAttribute('value', '65')，后者在某些旧版 Safari 中可能不触发重绘
什么时候该用 <meter></meter> 而不是 <progress></progress>
<meter></meter> 只适用于「已知范围内的静态度量值」：磁盘使用率、投票赞成占比、体温、评分、库存水位。它回答的是“现在在哪”，不暗示“还在进行中”。
关键约束：必须满足 min ≤ value ≤ max，否则行为未定义——Chrome 静默忽略，Firefox 可能报错；low、high、optimum 不是可选装饰，而是语义必需项，否则辅助技术只读出数字，丢失业务含义（比如“85”到底是高还是危险？）。
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
立即学习“前端免费学习笔记（深入）”；
- 写全属性更安全：
<meter value="85" min="0" max="100" low="30" high="70" optimum="50"></meter> -
optimum必须落在[low, high]内，且整体满足min ≤ low ≤ optimum ≤ high ≤ max，否则部分属性被丢弃 - 不能用
<meter></meter>表示“正在计票中”或“数据加载中”——那属于过程，不是状态
<meter></meter> 的 low/high/optimum 到底怎么设
这三个属性不是样式开关，而是向辅助技术传递语义判断的信号。例如磁盘使用率：低于 30% 是偏低（low="30"），高于 70% 是偏高（high="70"），50% 是最理想（optimum="50"）。浏览器默认样式会据此改变颜色（如 Chrome 中 value 超过 high 时条形变红），但视觉反馈不可靠，必须配合 CSS 伪元素强化。
-
low和high定义的是阈值区间，不是边界——value=25属于“偏低”，value=75属于“偏高”，value=55属于“正常”但未必“理想” - 如果业务中没有明确“最佳值”，
optimum可设为min或max（比如电量越低越差，就设optimum="100"） - 所有属性值必须是数字，字符串如
"70%"会被解析失败，导致整个语义链断裂
样式定制和兼容性要注意什么
<meter></meter> 和 <progress></progress> 的默认外观浏览器差异极大，且无法用普通 CSS 选择器控制内部条形。必须依赖伪元素，但各引擎前缀不同：WebKit 用 ::-webkit-meter-inner-element，Firefox 用 ::-moz-progress-bar，IE/Edge 已不支持。
- 不要只改外层容器样式，内部条形必须单独处理，否则在 Chrome 中看不到颜色响应
-
<meter></meter>的low/high/optimum状态不会自动触发 class 切换，无法用 CSS 类做条件样式，只能靠伪元素 + 属性匹配 - 若需统一视觉或增强可访问性，建议用
<div role="progressbar"> 手动实现，并通过 <code>aria-valuenow、aria-valuemin、aria-valuemax和aria-valuetext补全语义 实际项目里最容易被跳过的，是optimum的校验逻辑和伪元素的跨浏览器覆盖。很多人写了<meter></meter>就以为完事，结果在 Firefox 下没颜色、在 VoiceOver 下只读数字——问题不在标签本身，而在那几个看似可选、实则关键的属性是否真正对齐了业务语义。
