HTML5原生progress标签语义化、可访问且无需div模拟；需设value和max（max默认为1），否则呈不确定状态；支持伪元素定制样式但IE不兼容；复杂需求或需IE支持时才应回退div方案。
progress 标签在 HTML5 中直接可用，无需 div 模拟
HTML5 原生支持 Chrome / Edge / Safari 支持 当项目需支持 IE11 或更低版本、要求进度条带复杂交互动画（如缓动填充、多段色块）、或需精确控制每个像素的绘制逻辑（比如游戏加载器）时， 立即学习“前端免费学习笔记（深入）”； 真正容易被忽略的是：很多开发者以为设了 标签，浏览器会自动渲染为进度条控件。它不是装饰性元素，而是语义化、可访问、可脚本控制的表单控件。HTML4 时代确实只能靠 progress 的基本用法和关键属性
必须设置 value 和 max 才能显示有效进度；只设 value 不设 max 时，max 默认为 1，此时 value="0.7" 表示 70%；若两者都未设置，进度条会呈现“不确定”状态（通常为动画条纹）。
value 必须是数字，且 ≥ 0、≤ max，否则进度条不渲染或行为未定义max 默认为 1，但建议显式声明，避免小数精度误判width 控制长度——需用 width 或 inline-size 设置容器尺寸自定义样式必须用伪元素，且浏览器兼容性有差异
::-webkit-progress-bar 和 ::-webkit-progress-value；Firefox 使用 ::progress-bar 和 ::progress-value（部分版本仍需前缀）；IE 完全不支持 。所以生产环境若需深度定制或兼容 IE，仍得回退到 progress {
width: 200px;
}
progress::-webkit-progress-bar {
background-color: #eee;
}
progress::-webkit-progress-value {
background-color: #4caf50;
}
/* Firefox 需额外加 */
progress::-moz-progress-bar {
background-color: #4caf50;
}
max 值敏感：若 max 不是整数（如 max="100.0"），可能拒绝渲染进度值 自动暴露 ARIA role="progressbar" 和 aria-valuenow，比 div 模拟更省心innerHTML 插入文字——辅助文本需放在标签内（如 ），但该文本默认不可见，需 CSS 显式显示什么时候该放弃 progress，改用 div 模拟
style.width 或 Canvas 更可控。
style.width（如 bar.style.width = (value / max) * 100 + '%'）role="progressbar"、aria-valuenow、aria-valuemin、aria-valuemax，否则对屏幕阅读器不友好 更轻量、更健壮，别自己造轮子value 就万事大吉，结果发现进度没变化——其实是忘了触发重绘（比如在异步回调里更新后没重新赋值，或用了字符串而非数字）。检查 typeof progress.value === 'number' 很有必要。
