<progress> 标签需配合 JavaScript 动态更新 value 且 max 不可省略，否则不显示或异常；它是静态展示控件，无自动变化能力；上传进度必须用 xhr.upload.onprogress，Fetch 不支持；多步表单中需校验 value 边界并注意 Safari 样式限制和可访问性。
直接用 <progress> 标签，但必须配 JavaScript 动态更新 value，且 max 不能省略——否则进度条不显示或行为异常。
为什么 <progress> 写在 HTML 里却不动
<progress> 是纯展示控件，没有内置计时器或事件驱动逻辑。只写 <progress value="30"> 不会自动变化，浏览器只渲染初始快照。
- 常见错误：漏设
max，导致浏览器按默认max="1"解析，value="30"超出范围，进度条空白或归零 - 正确写法必须同时存在：
<progress id="p" value="0" max="100"> - 若任务总量是动态的（如文件总字节数），
max可设为具体数值（如max="1258742"），浏览器会自动换算百分比
表单上传进度必须用 xhr.upload.onprogress，不是 onprogress
文件上传场景下，监听错事件会导致完全收不到进度数据。
-
xhr.onprogress监听的是「下载响应体」进度，对上传无效 - 必须用
xhr.upload.onprogress，它在发送阶段触发，提供event.loaded和event.total - 示例关键片段：
const xhr = new XMLHttpRequest(); xhr.upload.onprogress = e => { if (e.lengthComputable) { const percent = Math.round((e.loaded / e.total) * 100); document.getElementById('p').value = percent; } }; - 注意：Fetch API 不支持上传进度监听，仍需 XMLHttpRequest
多步表单进度条别用 <meter>，max 和 value 边界要手动校验
多步填写类表单（如注册向导）适合用 <progress> 表达“已完成步骤数”，但容易因 JS 计算越界导致视觉异常。
立即学习“前端免费学习笔记（深入）”；
-
<meter>描述的是「当前值在某个范围内的占比」，语义不符；<progress>才表示「任务完成进度」 - 切换步骤时，
value可能变成负数或超max（如从 step 3 点「上一步」却没限制value = Math.max(0, Math.min(stepCount, value))） - Safari 对
<progress>样式自定义支持弱，若需文字标签叠加或特殊配色，得退回到<div>+aria-valuenow方案
最容易被忽略的是可访问性：仅靠 <progress> 不会自动播报进度，需配合 aria-live="polite" 和实时更新的辅助文本（如 <span aria-live="polite">已上传 63%</span>），否则屏幕阅读器用户完全感知不到变化。
