元素需同时设置 value 和 max 属性才有效，value 必须在 0 到 max 之间（含端点），否则退化为不确定状态；它仅表示任务进度，不自动标识“完成”，需 JS 或 CSS 配合实现完成态样式。
HTML <progress></progress> 元素怎么写才有效
直接写 <progress></progress> 浏览器会显示一个空进度条，但值为 0，且无语义、不可访问、不被屏幕阅读器识别。必须提供 value 和 max 才算“有效”。value 必须在 0 到 max 之间（含端点），否则进度条不渲染数值，只显示不确定状态（类似 loading 动画）。
常见错误现象：<progress value="80"></progress> 没设 max → 浏览器按默认 max="1" 解析，80 超出范围，实际显示为空白或 fallback 文本；value 为负数或非数字字符串（如 "80%"）→ 值被忽略，进度条退化为不确定态。
-
max默认是1，不是100，别凭直觉写value="75"就以为显示 75% - 想用百分比逻辑？统一用
max="100"，再设value="75" - 动态更新时，直接改
element.value = 82即可，无需重新渲染 DOM
为什么 <progress></progress> 不能用 value 控制“完成”状态
<progress></progress> 是“任务进度”，不是“开关状态”。它没有内置的“已完成”视觉标记 —— 即使 value 等于 max，它还是个进度条，不会自动变绿、加勾、隐藏。是否完成，得靠 CSS 或 JS 配合判断。
使用场景：上传文件、表单多步填写、API 请求进度反馈。不适合替代 <meter></meter>（测量值）或纯 UI 状态图标（如✅）。
- 别指望
value=max触发自动样式切换，浏览器不干这事 - 需要“完成态”？监听
value变化，用 JS 检查el.value === el.max，然后加 class 或替换内容 - CSS 中可用
progress[value="100"]选中（前提是max="100"），但注意 Safari 对属性选择器支持有限，稳妥起见用 JS 控制 class
Chrome/Firefox/Safari 渲染差异和兼容性坑
三端对 <progress></progress> 的默认样式、动画节奏、不确定态表现都不一致。比如 Safari 的不确定进度条是左右滑动的灰色块，Chrome 是从左到右流动的蓝色波纹，Firefox 更接近原生系统风格。更麻烦的是：Safari 15.4 之前不支持 appearance: none 彻底重置样式，强行用 -webkit-appearance: none 也容易崩布局。
立即学习“前端免费学习笔记（深入）”；
性能影响小，但样式定制成本高。直接用原生外观最稳；若要高度定制，不如用 <div role="progressbar"> + ARIA 属性（<code>aria-valuenow、aria-valuemin、aria-valuemax）自己实现，可控性更强。
- 不要依赖
::-webkit-progress-bar等伪元素在所有浏览器生效 - 设置
height时，Firefox 可能忽略，需配合vertical-align或 flex 容器修正基线 - 无障碍方面，原生
<progress></progress>自带语义，比手写 div + ARIA 更省心，除非你真需要特殊交互
表单里嵌入 <progress></progress> 为什么总被提交
<progress></progress> 不是表单控件，它没有 name 属性，也不会随表单提交发送任何数据。如果你发现它“被提交”了，大概率是误把 <input type="range"> 或某个 JS 绑定的隐藏 <input> 当成了 <progress></progress>。
真实使用场景中，<progress></progress> 往往只是展示层，背后一定有另一个字段（如 hidden input 或 JS state）存实际数值。别试图给它加 name —— 浏览器会忽略，而且 W3C 明确不支持。
- 需要提交进度值？用
<input type="hidden" name="upload_progress" value="65">，再用 JS 同步更新它和<progress></progress> - 别给
<progress></progress>加form属性，它不参与表单关联 - 如果用了 Web Components 封装进度条，确保内部没偷偷透传 submit 行为
