progress标签需同时设置value和max才显示确定进度条；value超出范围会被自动截断；JavaScript更新value必须用数字而非字符串；样式需通过伪元素定制；默认具备无障碍支持。
progress标签的value和max必须同时设置才有效
单独写 <progress> 或只设 max 不设 value，浏览器会显示一个“不确定进度”的动画（类似 loading），而不是具体数值进度条。只有 value 和 max 都存在，且 value 在 0 到 max 范围内，进度条才会按比例渲染。
value超出max或为负数时会被自动截断
浏览器对 <progress> 的值有强制校验逻辑：
-
value < 0→ 按 0 渲染 -
value > max→ 按max渲染 -
max ≤ 0→ 整个元素行为未定义（多数浏览器退化为 indeterminate）
所以不用手动做边界判断，但要注意：若后端返回的 value=120、max=100，前端直接填进去，用户看到的就是满格——这不是 bug，是规范行为。
用JavaScript动态更新value要避免字符串赋值
DOM 属性操作时，progress.value = "50" 是无效的，因为 value 是 number 类型属性，字符串不会触发重绘。正确做法是：
立即学习“前端免费学习笔记（深入）”；
const bar = document.querySelector('progress');
bar.value = 50; // ✅ 数字
bar.max = 100;
常见错误场景：
- 从表单 input 读取后没转数字：
bar.value = input.value→ 得到字符串，进度不动 - 用
setAttribute写字符串：bar.setAttribute('value', '50')→ 无效（它只影响 HTML 属性，不触发 DOM value 更新）
样式自定义必须用伪元素，不能直接改progress本身
<progress> 是替换元素，自身只能控制宽高、字体等基础样式，填充色、轨道色必须通过伪类：
progress {
width: 200px;
height: 20px;
}
progress::-webkit-progress-bar {
background-color: #eee;
}
progress::-webkit-progress-value {
background-color: #4CAF50;
}
progress::-moz-progress-bar {
background-color: #4CAF50;
}
注意点：
- Firefox 只支持
::-moz-progress-bar，不支持单独设轨道色 - Chrome/Safari 中
::-webkit-progress-value宽度由value/max自动计算，不可设 width - 无障碍方面，
<progress>默认有 role="progressbar" 和 aria-valuenow/aria-valuemax，无需额外加 ARIA 属性
max ——尤其在封装组件时，容易只暴露 value，忘了传 max，结果页面上永远转圈。 
