是替换元素，内部文本被忽略；显示数值需额外文本节点或js同步更新；value/max应为非负浮点数且value≤max；推荐max="100"并用math.round()处理小数；无障碍须加aria-valuetext。
<progress></progress> 标签本身不显示数值，只渲染进度条视觉状态；要显示“xx%”或具体数字，必须手动添加文本节点或用 JS 同步更新。
为什么 <progress></progress> 里写数字没用？
HTML5 规范明确：<progress></progress> 是**替换元素（replaced element）**，其内容（比如 <progress>50%</progress>）会被浏览器忽略，不参与渲染。你看到的只是浏览器内置样式画的一条条纹，没有文本插槽。
常见错误现象：
- 在标签内写文字，如
<progress>已完成 3/10</progress>→ 页面上完全不显示该文字 - 用 CSS 的
::after伪元素往<progress></progress>上加内容 → 大部分浏览器不支持（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%” 文字？
唯一可靠方式：把 <progress></progress> 和文本放在同一容器中，用 JS 或服务端同步更新文本内容。
<div class="progress-wrapper">
<progress id="myProgress" max="100" value="0"></progress>
<span id="progressText">0%</span>
</div>
<p><script>
const bar = document.getElementById('myProgress');
const text = document.getElementById('progressText');</p><p>function updateProgress(val) {
bar.value = val; // val 是 0–100 的整数
text.textContent = val + '%';
}</p><p>// 示例：模拟加载
let i = 0;
const timer = setInterval(() => {
i += 5;
if (i > 100) {
clearInterval(timer);
i = 100;
}
updateProgress(i);
}, 200);
</script>注意点：
- 不要用
innerHTML改<progress></progress>内部 —— 无效 - 别依赖 CSS 定位把文字“盖”在 progress 上（如
position: absolute），可访问性差，屏幕阅读器无法关联进度值和文本 - 若需无障碍支持，务必给
<progress></progress>加aria-valuetext属性：<progress aria-valuetext="已完成 65%"></progress>
最易被忽略的是 aria-valuetext —— 它不改变视觉，但决定了屏幕阅读器读出的内容。没它，视障用户只能听到“进度条”，不知道当前是多少。
