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