progress标签需同时具备合法value和max属性才显示确定进度；缺一、越界或类型错误均退化为不确定状态；DOM更新必须用bar.value=数字，禁用setAttribute或innerHTML。
progress 标签不是“写完就动”的进度条，它只在同时具备合法 value 和 max 时才显示确定进度；漏掉任一属性、值越界或类型错误，都会退化为不可靠的“不确定状态”。
为什么progress不显示数字进度？
根本原因不是 CSS 没写对，而是 HTML 属性缺失或非法：
- 只写
<progress max="100"></progress>→ 缺value，进入不确定态（浏览器画动画横条，非“正在加载”语义） -
value="-5"或value="105" max="100"→ 超出范围，浏览器静默丢弃该值，进度条可能空白或卡在 0%/100% -
value="50%"或value="fifty"→ 非数字字符串，Firefox 更敏感，可能完全不渲染 - 省略
max时默认为1，此时value="72"等价于 7200%，被截断为满格，逻辑错乱
progress.value 必须用 DOM 属性赋值，不能靠 setAttribute
JS 更新必须走原生 DOM 属性，否则 UI 不响应：
- ✅ 正确：
bar.value = 65（数字类型）、bar.value = Math.round(loaded / total * 100) - ❌ 错误：
bar.setAttribute('value', '65')（只改 HTML 属性，不触发重绘） - ❌ 错误：
bar.innerHTML = '<progress value="65"></progress>'（销毁节点，丢失引用） - 更新前建议校验：
if (val >= 0 && val
自定义样式必须用伪元素 + appearance: none
直接写 progress { background: red } 只影响外框，填色部分完全无效：
立即学习“前端免费学习笔记（深入）”；
- 先统一禁用默认外观：
progress { -webkit-appearance: none; -moz-appearance: none; appearance: none; } - Chrome/Safari：
progress::-webkit-progress-bar控轨道，progress::-webkit-progress-value控填充 - Firefox：
progress::-moz-progress-bar控填充（不区分轨道/填充，整体着色） - 别设
font-size或color——progress不渲染任何文本内容
无障碍支持不能只靠默认行为
原生 progress 自带 role="progressbar"，但屏幕阅读器是否读出当前值，取决于你是否同步了 ARIA 属性：
- 必须配
aria-label或aria-labelledby明确任务类型，例如：<progress value="65" max="100" aria-label="文件上传进度"></progress> - JS 更新
value后，手动同步：bar.setAttribute('aria-valuenow', bar.value)、bar.setAttribute('aria-valuemax', bar.max) - 旁边放一个实时更新的文本节点，并加
aria-live="polite"，确保变化被播报 - 不要把提示文字塞进标签体：
<progress>65%</progress>中的 “65%” 是 fallback 内容，仅当浏览器完全不支持时才显示，且不可访问
真正容易被忽略的是：value 值一旦超出合法区间，progress 就会静默退化成不确定态——没有报错，没有警告，UI 上只是一条不动的空白条或动画横条。这种失效是静默的，排查时得先查属性值，而不是翻 CSS。
