<progress>标签不显示或始终满格的根本原因是未同时设置value和max属性；max默认为1，value必须为数字且在0到max之间，仅设value会导致溢出截断为100%或退化为不确定态。
为什么<progress>标签不显示或始终满格
根本原因就一个：没同时设 value 和 max。只写 <progress></progress> 或只写 <progress value="75"></progress>，浏览器会按默认 max="1" 解释，导致 value="75" 溢出、静默截断为 100%，或直接退化成不确定状态（空白/动画条纹）。
-
max默认是1，不是100；显式写max="100"更直观、更可控 -
value必须是数字，且 ≥ 0、≤max；传字符串如"65"可能被转但不保险，建议统一用数字 - 省略
value就是不确定态，适合“正在加载但无总长”场景，比如初始请求阶段 - IE11 及更早版本完全不支持
<progress>，需降级方案（如<div>+ CSS）
如何用 JavaScript 正确更新 <progress> 的值
别用 setAttribute('value', ...)，也别替换整个 HTML；必须走 DOM 属性赋值，浏览器才会触发重绘。
- 正确写法：
progressEl.value = 82（progressEl是通过querySelector拿到的元素） - 高频更新（如每帧）会卡顿，建议加阈值：仅当新值与当前
value相差 ≥ 1 时才赋值 - 上传/下载务必用原生事件驱动：
xhr.upload.onprogress或ReadableStream分块计算，避免靠setInterval猜进度 - 终值要兜底：任务完成时强制设
progressEl.value = progressEl.max，防止因浮点误差卡在 99%
<progress> 和 <meter> 别混用
<progress> 表示「任务进行中」，<meter> 表示「当前值在某个区间内的位置」，语义不同，屏幕阅读器读法也不同。
- 文件上传完成度、表单填写步骤 → 用
<progress value="45" max="100"> - CPU 使用率 65%、电量剩余 20%、评分 4.2/5 → 用
<meter min="0" max="100" low="30" high="80" value="65"> - 把
<meter value="65" max="100">当进度条用，无障碍工具会读成“65 分之 100”，而非“已完成 65%” -
<meter>需配min/low/high/max才有意义，单独写没效果
自定义样式必须用伪元素，且前缀不能省
直接写 progress { background: blue; } 不生效——内部结构由浏览器私有实现，只能穿透控制。
立即学习“前端免费学习笔记（深入）”；
- 先写
progress { appearance: none; -webkit-appearance: none; -moz-appearance: none; } - WebKit（Chrome/Safari）：用
progress::-webkit-progress-bar控轨道，progress::-webkit-progress-value控填充 - Firefox：用
progress::-moz-progress-bar控填充（不支持transform动画） - 不要对
<progress>直接设height，而是控制伪元素的height，否则 Firefox 下可能失效 - 想加平滑动画，给伪元素加
transition: width 0.2s ease，但注意 Firefox 实际靠重绘帧模拟
aria-valuetext 告知用户真实状态。 
