progress标签需同时设置value和max且0≤value≤max才显示确定进度；样式须用accent-color或伪元素；JS须直接赋值value并同步更新aria文本。
progress 标签必须同时设置 value 和 max 才能显示确定进度，缺一不可；仅靠 CSS 修改 color 或 background 无效，必须用伪元素或 accent-color。
为什么 progress 标签不显示进度或显示为动画条
浏览器只在 value 和 max 同时存在、且 value ≥ 0 且 ≤ max 时，才渲染确定性进度。常见失效场景：
-
：没设value→ 不确定状态（动画条），不是“0%” -
：Chrome 显示但截断为 100%，Firefox 可能空白 -
：max缺省为 1，实际是 65%，但语义模糊，建议显式写max="100"
如何跨浏览器统一修改 progress 样式
原生 progress 是替换元素，常规 CSS 属性（如 color、border）对其内部轨道/填充无效。需分引擎覆盖：
- WebKit/Blink（Chrome、Edge、Safari）：
progress::-webkit-progress-bar控制轨道，progress::-webkit-progress-value控制填充条（background生效，width无效） - Firefox：
progress::-moz-progress-bar控制填充（支持background，但不支持border-radius） - 现代浏览器（Chrome 93+ / Firefox 97+ / Safari 15.4+）：
progress { accent-color: #4a90e2; }可一键改主色，比伪元素更简洁 - 所有浏览器都需先加
progress { appearance: none; }，否则部分旧版 WebKit 下伪元素不生效
动态更新时 JS 怎么写才可靠
JS 更新必须直接赋值 element.value，不能用 setAttribute('value', ...)，否则不触发重绘：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 正确：
const p = document.querySelector('progress'); p.value = Math.min(loaded / total * 100, 100); - 错误：
p.setAttribute('value', 65)→ DOM 属性变了，但视觉不动 - 必须校验分母：
if (total > 0) { p.value = (loaded / total) * 100; }，否则除零得NaN导致空白 - 若需平滑动画，用
requestAnimationFrame逐步逼近目标值，而非依赖 CSStransition（自定义样式后易卡顿）
怎么显示“65%”文字并保证可访问性
progress 是 void 元素，不接受子节点，::after 也无法在其上生效。百分比文字必须外置并同步更新：
- HTML 结构：已上传 65%
- JS 更新时，**必须同时改
progress.value和span.textContent**，否则屏幕阅读器读不到变化 - 避免仅用颜色表达状态（如红色=失败），要加文字说明或图标 +
aria-label - IE10–11 不支持
progress，fallback 方案要用配合 CSS 模拟
真正难的不是让进度动起来，而是让每个数字变化都被用户（包括键盘和读屏用户）准确感知——value 改了，文本没同步，就等于没改。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
