progress 元素的 value 属性必须为数字类型，字符串值（如 value="50"）会导致进度条不更新或显示为 0；需确保数值在 min 和 max 范围内，并同步更新 dom property 与 html attribute。
progress 元素的 value 属性必须是数字，不能是字符串
直接写 value="50" 看似合理，但浏览器会把它当字符串处理，导致进度条不更新或显示为 0。HTML 规范要求 value 是有效浮点数，且必须在 min 和 max 范围内（默认 min=0、max=100）。
常见错误：
- 写成 <progress value="75"></progress>（字符串值，可能失效）
- 忘记设置 max，却用 value="0.75"（超出默认范围 0–100，被截断为 max）
- 正确做法：用纯数字字面量或 JS 赋值时确保类型是 number，比如
el.value = 75，不是el.value = "75" - 若需小数精度（如 33.33%），设
max="1000"，再用value="333"避免浮点误差影响渲染 - 服务端模板渲染时注意：Jinja2、EJS 等可能自动转义或加引号，要显式输出无引号数字
用 JavaScript 动态修改 value 时，别漏掉 setAttribute
el.value = 42 能更新视觉和 DOM 属性，但 el.getAttribute('value') 仍返回旧值——因为 value 是 HTML 属性（attribute）和 DOM 属性（property）双轨制。多数场景下 property 赋值够用，但 SSR 渲染、测试断言或某些库（如 Puppeteer 检查属性）会依赖 attribute。
- 只改 property：
progressEl.value = 60→ 视觉更新，getAttribute('value')不变 - 同步更新 attribute：
progressEl.setAttribute('value', '60')→ 属性和视觉都更新 - 推荐组合写法：
progressEl.value = 60; progressEl.setAttribute('value', 60);，尤其在需要可复现 HTML 快照时
value 超出 min/max 范围时会被静默修正
如果设 value="120" 且 max="100"，浏览器不会报错，也不会显示 120%，而是把进度条撑满到 100% —— 这个行为不可逆，且 progressEl.value 读出来就是 100（不是 120）。
- 调试技巧：打印
progressEl.value和progressEl.getAttribute('value')对比，能快速发现是否被截断 - 动画过渡中频繁设置 value 时，避免用
+= 0.5类型累加，浮点误差可能导致某次超出 max；建议用整数计数器 + 映射计算 - 若需“不确定”状态（如加载中），不要设
value，直接省略该属性，浏览器会渲染为 indeterminate 样式
CSS 里无法用 attr() 读取 value 值做样式计算
CSS 的 attr(value) 无法获取 <progress></progress> 的当前数值，因为 value 是 reflect 属性（反映 DOM property），不是普通 HTML attribute。即使你用 setAttribute 写入，CSS 也读不到它。
- 想根据进度动态变色？只能靠 JS 监听或手动加 class，例如：
progressEl.classList.toggle('high', progressEl.value > 80) - 伪元素内容显示数值？得用 JS 更新
data-value属性，再在 CSS 里用content: attr(data-value) - Web Components 封装时，别试图用 :host([value="50"]) 做样式分支——无效
实际项目里最常被忽略的是 value 的类型和 attribute 同步问题，尤其是从 API 接口拿到字符串数字后直接赋值，进度条就卡住不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
