progress标签必须同时设置value和max属性才能显示确定进度；仅写或只设max会进入不确定状态，渲染为动画条纹；value缺失、为负数或超max将导致静默退化，正确示例为。
progress 标签必须同时设 value 和 max 才显示确定进度
只写 或只设 max，浏览器会进入“不确定状态”（indeterminate），渲染成动画条纹——这不是 bug，是规范行为，但它不表示“正在加载”，只表示“进度未知”。value 缺失、为负数（如 -1）、或大于 max（如 value="105" max="100"）都会导致静默退化，进度条卡住或空白。
正确结构示例：。注意：max 默认是 1，但显式声明更安全，尤其当后端返回小数时（比如 value="0.72"）；若用整数百分比，统一设 max="100" 最直观。
progress 不能嵌套内容，文字提示得靠外部元素
中的 65% 是 fallback 内容，仅在浏览器完全不支持 progress 时才显示，且默认不可见、不被屏幕阅读器识别。它不是子节点，HTML 规范禁止在 progress 标签内写任何内容。
要显示实时文本，必须用相邻 DOM 元素配合：已上传 65%
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
关键点：
- 文字和 progress 必须同步更新
- aria-live="polite" 让屏幕阅读器播报变化
- 不要用 color 或位置表达状态，色觉障碍用户无法识别
JS 更新必须直接赋值 number 类型的 value 属性
progress.value = 42 是唯一可靠方式；progress.setAttribute('value', '42') 或 progress.innerHTML = '...' 都不会触发 UI 更新，甚至可能销毁引用。
常见错误：
- 从 读值后没转数字：bar.value = input.value → 字符串失效，应写 bar.value = Number(input.value) 或 bar.value = +input.value
- 用 fetch 上传时，没按 event.loaded / event.total 算比例，而是硬写 value++，导致进度跳变或超限
- 高频更新（如每 10ms）造成掉帧，建议加阈值：if (Math.abs(newVal - bar.value) >= 1) bar.value = newVal
样式定制必须用伪元素 + appearance: none
直接写 progress { background: red } 只改外框，填色部分完全无效。所有浏览器都要求先重置外观：
progress {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
再分引擎控制：
- Chrome/Safari：progress::-webkit-progress-bar（轨道）、progress::-webkit-progress-value（填充）
- Firefox：progress::-moz-progress-bar（整体填充，不区分轨道/填充）
- IE10+：不支持伪元素自定义，只能靠包裹容器降级
注意：
- 不要给 progress 设 font-size 或 color，它不渲染文本
- height 在 Firefox 下可能失效，建议用 min-height + 伪元素 height 控制
- 平滑过渡只能在 WebKit 下对 ::-webkit-progress-value 加 transition: width 0.3s ease，Firefox 不支持
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
