<progress> 标签需 JavaScript 控制 value 才能动态更新，须设置 max 属性（默认为1），value 必须 ≤ max；样式依赖伪元素，无障碍需添加 role="progressbar" 及 aria-* 属性。
<progress> 标签本身不触发进度变化，它只是个视觉容器——你得用 JavaScript 控制 value 属性才能动起来。
怎么让 <progress> 显示真实进度
浏览器不会自动更新 <progress> 的值，必须手动设置 value 属性。常见场景是配合文件上传、定时任务或 fetch 请求的进度事件。
- 初始状态建议设
value="0"，否则可能显示默认中间值（各浏览器行为不一致） - 必须同时设置
max属性（默认是 1），否则value超过 1 就失效或渲染异常 - 直接改 DOM 属性比用
setAttribute()更可靠：el.value = 35比el.setAttribute('value', 35)更快生效
max 和 value 的取值逻辑容易错在哪
很多人以为 max 是“总步数”，其实它是“进度标尺的上限值”，value 必须 ≤ max 才有效；超出后进度条会卡在 100% 或停止响应。
- 上传 100MB 文件时，别设
max="100"然后按 MB 更新——应该用event.loaded / event.total算出 0–1 区间值，再乘以max - 如果用整数计数（比如“已完成 7/12 步”），就设
max="12"，然后value="7" -
value支持小数（如3.14），但显示精度取决于 CSS 宽度和浏览器渲染，别指望像素级对齐
样式自定义必须用伪元素，普通 CSS 不起作用
<progress> 内部结构由浏览器控制，直接写 progress { background: red } 只能改外层容器，填色部分要靠 ::-webkit-progress-bar 和 ::-webkit-progress-value（Chrome/Safari）或 ::progress-value（Firefox）。
立即学习“前端免费学习笔记（深入）”；
- Firefox 目前只支持
accent-color控制主色，其他样式几乎无效 - 想兼容所有浏览器？老实用
<div>+aria-valuenow手写一个，或者引入轻量库如nprogress - 无障碍必须加
role="progressbar"和aria-valuenow/aria-valuemin/aria-valuemax，否则屏幕阅读器读不出进度
最常被忽略的是：没有 JS 驱动时，<progress value="0" max="100"> 就是个静止的空条，连“0%”都不会显示文字——它天生没文本内容，所有提示都得自己加 DOM 或用 title 属性临时补救。
