progress标签默认不渲染内部文本，需用绝对定位span覆盖并同步更新内容，同时必须设置aria-valuenow等属性确保无障碍支持。
progress 标签默认不渲染文字，value 和 max 不会自动变成可见文本
浏览器原生 <progress></progress> 只负责视觉进度轨道和填充条，内部文本（比如“50%”）完全不会被渲染——哪怕你写成 <progress value="50">50%</progress>，里面的文字也会被忽略。这是规范行为，不是 bug。想显示文字，必须用额外元素配合定位或 JS 动态更新。
用 span 覆盖在 progress 上需手动控制位置与对齐
常见做法是把 <progress></progress> 和 <span></span> 包进一个相对定位容器，再让 span 绝对定位居中。但要注意：不同浏览器对 progress 的内部盒模型处理不一致（比如 Chrome 有 -webkit-progress-value 伪元素，Firefox 没有），所以不能依赖其内部尺寸计算 span 偏移。稳妥方式是固定容器宽高，再用 transform: translate(-50%, -50%) 居中：
<div style="position: relative; width: 200px; height: 24px;"> <progress value="65" max="100" style="width: 100%; height: 100%;"></progress><span style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 12px;">65%</span> </div>
- 容器必须设
position: relative，否则span会相对于 body 定位 -
progress的height要显式设置，否则可能塌陷（尤其在 Flex/Grid 容器中） - 避免用
margin或top/left百分比硬调位置——不同缩放、字体下容易偏移
动态更新文字需同步改 progress.value 和 span.textContent
如果进度由 JS 控制，只改 progress.value 不会触发 span 更新。必须手动同步：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
const prog = document.querySelector('progress');
const label = document.querySelector('span');
function updateProgress(val) {
prog.value = val;
label.textContent = `${Math.round(val)}%`;
}
updateProgress(73); // 进度条和文字同时更新
- 别用
innerHTML写数字，防止 XSS；纯文本用textContent - 百分比建议四舍五入（
Math.round()），避免显示66.66666666666667% - 如果支持小数精度（如带单位的 “3.2 MB / 5.0 MB”），需单独维护格式逻辑，不能只靠
value/max
无障碍（a11y）不能只靠视觉文字，要补 aria-valuenow 和 aria-label
仅靠 span 显示数字对屏幕阅读器不可见。必须把数值信息透出给辅助技术：
<progress value="65" max="100" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" aria-label="上传进度：65%"></progress>
-
aria-valuenow必须和value保持一致，且为数字类型（不能是字符串"65"） -
aria-label推荐包含单位或上下文（如“下载完成 82%”），比单纯“82%”更友好 - 如果文字内容复杂（如含图标、多语言），优先用
aria-labelledby关联外部id，而非塞进aria-label
最易被忽略的是：很多人加了 span 就以为可访问性到位了，其实没声明 aria-valuenow 的 progress 在 VoiceOver/NVDA 下仍会被读作“进度条”，不报具体值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
