是替换元素，内部文本被忽略；显示数值需额外文本节点或JS同步更新；value/max应为非负浮点数且value≤max；推荐max="100"并用Math.round()处理小数；无障碍须加aria-valuetext。
标签本身不显示数值，只渲染进度条视觉状态；要显示“xx%”或具体数字，必须手动添加文本节点或用 JS 同步更新。
为什么
HTML5 规范明确： 是**替换元素（replaced element）**，其内容（比如 ）会被浏览器忽略，不参与渲染。你看到的只是浏览器内置样式画的一条条纹，没有文本插槽。
常见错误现象：
- 在标签内写文字，如
→ 页面上完全不显示该文字 - 用 CSS 的
::after伪元素往上加内容 → 大部分浏览器不支持（Chrome/Firefox 均无效）
value 和 max 怎么设才合理？
进度条数值逻辑由两个属性控制：value 表示当前完成值，max 表示总量，默认为 1。两者都必须是**非负浮点数**，且 value 不得大于 max，否则行为未定义（多数浏览器会截断为 max）。
立即学习“前端免费学习笔记（深入）”；
使用建议：
- 做百分比进度时，推荐统一用
max="100"，value直接填整数（如value="65"），语义清晰、调试直观 - 避免用小数如
value="0.65"+max="1"，容易因 JS 浮点误差导致显示卡在 99%（比如0.999999999被截断） - 如果后端返回的是 0–1 区间的小数，JS 中应先乘 100 再取整：
Math.round(progress * 100)
怎么让进度条旁边显示 “65%” 文字？
唯一可靠方式：把 和文本放在同一容器中，用 JS 或服务端同步更新文本内容。
0%
注意点：
- 不要用
innerHTML改内部 —— 无效 - 别依赖 CSS 定位把文字“盖”在 progress 上（如
position: absolute），可访问性差，屏幕阅读器无法关联进度值和文本 - 若需无障碍支持，务必给
加aria-valuetext属性：
最易被忽略的是 aria-valuetext —— 它不改变视觉，但决定了屏幕阅读器读出的内容。没它，视障用户只能听到“进度条”，不知道当前是多少。
