progress 标签是 HTML5 语义化进度元素，需设 value 和 max（默认100），value 必在 0–max 间；应配 label 或 aria-label 提升可访问性，不确定进度用无 value 的 indeterminate 状态；支持 CSS 伪元素定制，注意浏览器兼容性；JS 更新须直接操作 value 属性。
progress 标签是 HTML5 中专为表示任务完成进度而设计的语义化元素，它比用 div + CSS 模拟的进度条更清晰、更可访问、更易被浏览器和辅助技术理解。
正确使用 progress 标签的基本结构
标准写法需同时设置 value 和 max 属性（max 默认为 100）：
-
<progress value="65" max="100"></progress>表示已完成 65/100 - 若省略
max，默认按 100 计算；value必须在 0 到max之间，否则无效 - 不建议仅靠视觉样式判断进度，应确保
value动态反映真实状态
提升可访问性的关键细节
屏幕阅读器会读出“X% 已完成”或“X of Y”，但前提是语义完整：
- 添加
aria-label或配合label[for]明确任务含义，例如：
<label for="upload-progress">文件上传进度</label><br> <progress id="upload-progress" value="72" max="100"></progress> - 避免用
progress表示不确定进度（如“加载中”），此时应改用indeterminate状态：只写<progress></progress>（无 value），浏览器会显示动画效果
样式定制与兼容性注意点
原生 progress 支持 CSS 伪元素定制外观，但各浏览器前缀不同：
- WebKit 内核（Chrome/Safari）用
::-webkit-progress-bar和::-webkit-progress-value - Firefox 用
::-moz-progress-bar - 推荐用现代 CSS 方式统一控制，例如通过
accent-color设置主色（部分浏览器支持） - 旧版 IE 不支持
progress，需降级方案（如 fallback 文字提示或 JS 插件）
动态更新的最佳实践
JavaScript 更新时，直接修改 value 属性即可触发渲染和语义播报：
- 不要用
innerHTML或 class 控制进度，应操作 DOM 属性：document.querySelector('progress').value = 85; - 配合
requestAnimationFrame或节流避免频繁更新影响性能 - 服务端返回进度数据后，确保前端同步更新
value，并校验是否超出max
