<progress>需同时设置max和value才显示确定进度，仅设其一或值类型错误将导致空白或无效；动态更新须用JavaScript直接赋值elem.value，CSS自定义需兼容各浏览器伪元素，且须保障可访问性。
<progress> 标签本身就能渲染出原生进度条，但直接写 <progress> 不会显示任何进度——它默认 value 未设置，浏览器视为“不确定状态”，多数渲染为空白或动画占位符。
为什么 <progress> 写了却看不到进度？
核心原因是：必须同时指定 max 和 value 才能显示确定进度。只设 value 不设 max，浏览器按默认 max="100" 处理，但部分旧版 Safari 或某些 UA 可能不兼容；只设 max 不设 value 则始终为 0%。
-
<progress value="65" max="100"></progress>→ 正常显示 65% -
<progress value="0.65"></progress>→ 无效：value必须是数字，且与max同量纲（不能混用小数和整数） -
<progress max="200"></progress>→ 无value，显示空白或 indeterminate 动画（取决于浏览器）
如何动态更新 <progress> 的值？
不能靠 HTML 属性绑定，得用 JavaScript 操作 value 属性。注意：修改的是 DOM 属性（elem.value = 72），不是 HTML 特性（setAttribute('value', '72')）——后者在部分浏览器中不会触发视觉更新。
- 正确方式：
document.querySelector('progress').value = 88 - 错误方式：
elem.setAttribute('value', '88')（可能不重绘） - 更新时无需重新设置
max，只要value ≤ max即可；超出时浏览器会截断为max - 若需动画效果，CSS 本身不支持
<progress>的transition，得用 JS +requestAnimationFrame逐帧更新
怎么用 CSS 自定义 <progress> 样式？
各浏览器使用不同伪元素暴露内部结构，必须分别处理。Chrome/Edge 用 ::-webkit-progress-bar 和 ::-webkit-progress-value；Firefox 用 ::progress-bar 和 ::progress-value；Safari 15.4+ 才支持标准伪类，旧版仅部分支持 -webkit- 前缀。
立即学习“前端免费学习笔记（深入）”；
- 基础重置：
progress { appearance: none; }（移除默认样式，但 Firefox 需额外-moz-appearance: none） - Chrome 样式关键：
progress::-webkit-progress-bar { background: #eee; }，progress::-webkit-progress-value { background: #4caf50; border-radius: 4px; } - Firefox 关键：
progress::-moz-progress-bar { background: #4caf50; }（注意它没有独立的 bar 容器，整个条即 bar） - 不要依赖
width控制进度——那是由value/max决定的，CSS 只控制外观
真正容易被忽略的是语义与可访问性：<progress> 自带 ARIA role="progressbar" 和自动计算的 aria-valuenow，但如果你用 JS 动态更新 value，务必同步更新 aria-label 或配合 <span aria-live="polite"> 提供文字反馈，否则屏幕阅读器可能读不出变化。
