progress 表示有明确起点、终点和推进感的动态任务过程，value 必须为 ≥0 数字且需动态更新；meter 表示静态标量值在预设范围中的位置，依赖 low/high/optimum 传达业务优劣含义，二者语义不可互换。

progress 用于“任务正在跑”，不是“当前值在哪” 的语义锚点是「动态过程」：必须有明确起点、终点和推进感。比如 WebSocket 连接建立中、批量数据导出、表单提交耗时——value 是随时间递增的完成量，浏览器据此播报“进度 72%”，AT 工具理解为“这事还没完”。

• value 必须是 ≥ 0 的数字，否则退化为 indeterminate 流动条（Lighthouse 报错）
• max 建议显式设为 100，避免小数精度问题导致 Chrome 渲染不满（如 value="99.999999"）
• 动态更新务必用 element.value = 65，而非 setAttribute('value', '65')；后者在旧版 Safari 可能卡住不重绘
• 错误示例：<progress value="42"></progress> 单独展示 API 响应延迟（42ms），无终点，屏幕阅读器误读为“进度 42%”

meter 用于“现在这个值算好还是算差” 的语义锚点是「静态标量」：它不暗示时间或任务，只回答“当前落在预设范围的哪一段”。CPU 使用率、磁盘水位、用户资料完善度——这些值本身没有“完成”概念，只有业务意义上的高低优劣。

• low、high、optimum 不是可选装饰，而是可访问性必需项；省略后 AT 工具只读出数字，比如“85”，丢失“偏高”“远离理想值”的业务含义
• 必须满足约束：min ≤ low ≤ optimum ≤ high ≤ max；违反时 Chrome 静默丢弃越界属性，Firefox 可能报错
• value 必须是纯数字，value="85%" 或 low="30px" 会被浏览器忽略
• 视觉反馈不可靠：Chrome 默认 value > high 时变红，但 Safari 不支持；必须用 CSS 强化，例如 meter[value>high] { background: #e53e3e; }

二者不可互换，否则破坏可访问性与 SEO

混淆 progress 和 meter 不会触发浏览器报错，但会直接污染语义层：

• 把服务器 CPU 使用率写成 <progress value="75" max="100"></progress>，屏幕阅读器读作“进度 75%”，用户以为系统正在执行某项任务
• 把文件上传进度写成 <meter value="65" min="0" max="100"></meter>，AT 工具读作“65”，无法传达“还在进行中”的关键信息
• 搜索引擎依赖语义标签理解页面结构，错误使用会导致相关性下降，尤其在监控类仪表盘页面中影响明显

JavaScript 更新时的关键差异

两者都支持 JS 动态更新，但机制和风险点不同：

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• progress 更新只需改 element.value，安全可靠；若用 setAttribute，旧版 Safari 可能不触发重绘
• meter 的 low/high/optimum 是静态语义信号，JS 修改后不会触发重绘；想切换阈值需替换整个元素或强制重流（如 offsetHeight 触发）
• 检测页面中真正可用的进度条，不能只靠 document.querySelector('progress')；要同时检查是否含有效 value 属性且为数字，否则只是个不确定动画占位符

真正难的不是写对标签，而是每次加进度条前先问一句：这东西有没有“起点→终点→推进感”？如果没有，就别碰 progress。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！