progress标签不显示进度是因为未同时设置合法的value和max属性；必须二者俱全、value为数字且0≤value≤max，否则浏览器进入不确定状态渲染为空白或动画条纹。
progress 标签不显示进度？先检查 value 和 max 是否同时存在且合法
只写 或仅设 value="75"，浏览器会进入“不确定状态”，多数渲染为空白或动画条纹——这不是样式问题，而是语义缺失。必须同时提供 value 和 max，且满足以下条件：
-
value必须是数字（不能是字符串"75"），且 ≥ 0、≤max -
max默认为1，但显式写成max="100"更可控、更易读 -
value="0.75" max="1"合法；value="75" max="100"同样合法；但混用（如value="0.75" max="100"）会导致计算错误，进度显示异常 - IE11 及更早版本完全不支持
，页面上直接消失，需降级方案
JavaScript 动态更新 progress.value 的正确写法
更新进度不能靠 setAttribute('value', '88') 或替换 innerHTML，这些操作不会触发 UI 重绘。必须直接赋值 DOM 属性：
- ✅ 正确：
bar.value = 88（数字类型）、bar.value = Math.round(loaded / total * 100) - ❌ 错误：
bar.setAttribute('value', '88')—— 属性更新了，视觉不动 - ❌ 错误：
bar.innerHTML = ''—— 替换节点，丢失引用和事件绑定 - 高频更新（如每 10ms）建议加阈值：
if (Math.abs(newVal - bar.value) >= 1) bar.value = newVal，避免掉帧 - 超出
max的值会被浏览器静默截断为满格，但真实值仍保留，调试时注意区分“UI 显示”和“DOM 值”
CSS 自定义 progress 样式为什么没生效？伪元素必须分引擎写
给 直接写 background 或 width 对填充部分完全无效。内部结构由浏览器私有伪元素控制，且互不兼容：
- Chrome/Edge/Safari（WebKit/Blink）：用
progress::-webkit-progress-bar控轨道，progress::-webkit-progress-value控填充 - Firefox（Gecko）：只认
progress::-moz-progress-bar，它代表整个“已填充区域”，没有独立轨道伪元素 - 必须先重置默认外观：
progress { -webkit-appearance: none; -moz-appearance: none; appearance: none; } -
transition: width 0.3s ease在 WebKit 中可加在::-webkit-progress-value上，Firefox 不支持该动画 - 别试图用
::after或content添加文字——不渲染子内容，屏幕阅读器靠aria-label读出百分比
无障碍与语义陷阱：什么时候不该用 progress 标签？
天然带 role="progressbar"，但前提是它表示「已知范围的确定进度」。一旦脱离这个前提，就会误导辅助技术用户：
- 后端未返回文件总大小（
total未知）时，用是错误的——应改用并手动管理状态 - 模拟加载动画（“假进度”）违反语义，应使用
正在处理…配合 CSS 动画 - 磁盘空间、电量等静态度量值，必须用
- 即使样式完全重写，也必须配
aria-label（如aria-label="图片上传进度"），否则屏幕阅读器无法明确上下文
真正容易被忽略的是：progress 的 value 更新不是“响应式”的，它不监听数据变化，只忠实地反映你最后一次赋的值。如果你的 JS 逻辑里有竞态、回调嵌套或异步延迟，UI 进度就可能和真实任务脱节——这种错位在无障碍场景下尤为危险。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
