表示任务完成比例，需有明确起点终点和 value 值； 表示静态度量值在范围内的位置，需用 low/high/optimum 传达语义状态，二者不可互换，否则损害可访问性和 seo。
怎么区分 <progress></progress> 和 <meter></meter> 的语义用途
二者都显示数值范围内的状态，但语义完全不同：<progress></progress> 表示「任务进行中」的完成比例（比如文件上传、加载动画），必须有明确的起点和终点；<meter></meter> 表示「某个静态度量值」在预设范围内的位置（比如磁盘使用率、体温、分数），不暗示进度或时间性。
浏览器不会报错，但用错会破坏可访问性（AT 工具读出的信息不同）和 SEO 语义。例如把服务器 CPU 使用率写成 <progress value="75" max="100"></progress>，屏幕阅读器会读作“进度 75%”，造成误导。
<progress></progress> 必须带 value 才能被识别为有效进度条
如果只写 <progress max="100"></progress> 而没设 value，它会呈现为「不确定状态」（通常是一段流动动画），此时不能算作“可识别的进度条”——很多自动化测试工具（如 axe、Lighthouse）会直接忽略或报“缺失 value 属性”。
-
value必须是数字，且在0到max之间（默认max=100） - 设
value="-1"或value="abc"会导致该属性被浏览器忽略，退化为不确定态 - 动态更新时，直接修改
element.value = 65比操作setAttribute('value', '65')更可靠（后者可能触发重绘异常）
<meter></meter> 的 low/high/optimum 影响可访问性识别
仅靠 value 和 min/max 不足以让辅助技术理解“这个值好不好”。浏览器和读屏软件会结合 low、high、optimum 来判断状态等级（如“偏低”“理想”“过高”）。
立即学习“前端免费学习笔记（深入）”；
常见错误是只写 <meter value="85" min="0" max="100"></meter>，结果 AT 只读出“85”，完全丢失业务含义。正确做法：
- 设
low="30"、high="70"、optimum="50"，表示 50 是最佳值，低于 30 偏低，高于 70 偏高 - 若省略
low/high，浏览器按min–max中间点自动划分区间，但不可控、不明确 - 所有属性值必须是数字，且满足
min ≤ low ≤ optimum ≤ high ≤ max，否则部分属性会被静默丢弃
用 JavaScript 检测页面中真正的进度条元素
不能只靠标签名判断是否为“进度条”，要结合属性和上下文。下面这段代码能过滤出可识别、有实际进度意义的 <progress></progress> 元素：
const validProgresses = Array.from(
document.querySelectorAll('progress')
).filter(el => {
const value = parseFloat(el.value);
const max = parseFloat(el.max || '100');
return !isNaN(value) && value >= 0 && value <= max;
});
注意：<meter></meter> 即使有 value 也不应混入进度统计逻辑；而 aria-valuenow 等 ARIA 属性不能替代原生属性——某些旧版读屏器对原生 <progress></progress> 的支持远好于 ARIA 模拟。
最易被忽略的是：服务端渲染时若 value 未同步输出（比如留空或写成 value="{{progress}}" 但模板未解析），前端 JS 也无法补救——浏览器在 DOM 构建阶段就已确定其可访问性角色。
