原生需同时设value和max才显示确定进度；value须为0–max间数字，直接赋值el.value=75而非setAttribute；CSS定制应优先用appearance:none+背景模拟，兼顾可访问性。
HTML原生<progress></progress>怎么写才有效
直接用<progress></progress>标签就能渲染进度条，但多数人写完发现不显示、不动、或者值不对——核心问题在于它默认是“不确定”状态，必须同时设置value和max才能体现具体进度。
-
value必须是数字，且在0到max之间（超出会被截断，但不会报错） -
max默认是100，但建议显式写出，避免依赖默认值导致语义模糊 - 如果只写
<progress></progress>或只设value没设max，浏览器会显示为“不确定进度”（通常是一段流动的灰色动画） - 示例：
<progress value="65" max="100"></progress>—— 这才是可读、可测、有明确含义的写法
为什么JS更新value后进度条没变化
DOM操作本身没问题，但常见错误是把value当字符串赋值，或用setAttribute误改了属性而非属性值。
- 正确做法是直接操作
.value属性：el.value = 75（注意不是el.setAttribute('value', '75')） -
setAttribute会把value变成字符串，而<progress></progress>内部只认数字类型，会导致UI卡在旧值 - 如果进度需要连续更新（比如上传），别用
setTimeout高频设值，浏览器重绘有下限，建议用requestAnimationFrame或节流处理 - 示例：
const bar = document.querySelector('progress');<br>bar.max = 200;<br>bar.value = 137; // 直接赋数字，立刻生效
CSS怎么定制<progress></progress>样式不翻车
各浏览器对<progress></progress>的伪元素支持差异大，别一上来就套复杂样式。
- Chrome/Edge 支持
::-webkit-progress-bar和::-webkit-progress-value；Firefox 支持::progress-bar和::progress-value（但实际兼容性差）；Safari 基本只认appearance: none+ 自定义背景 - 最稳的起步方式：
progress { appearance: none; height: 8px; border: none; }，再用background和background-image模拟填充效果 - 不要试图用
transform缩放::-webkit-progress-value，容易触发渲染bug，尤其在移动端 - 无障碍注意：别删掉默认文字提示（如“65%”），如果隐藏了，请用
aria-valuenow等属性补全
替代方案：什么时候不该用原生<progress></progress>
原生<progress></progress>适合简单、静态、语义明确的场景；一旦要拖拽、双端控制、动画倒计时、或和表单深度绑定，它反而会成为瓶颈。
立即学习“前端免费学习笔记（深入）”；
- 需要用户拖动调整进度？原生不支持，得换
<input type="range">或自研控件 - 要做环形进度、渐变色填充、图标嵌入？CSS限制太多，用SVG或Canvas更可控
- 服务端返回的是时间戳或文件字节数，不是百分比？别硬套
value/max，先算好比例再填，否则语义失真 - 老项目还要兼容IE？它根本不认识
<progress></progress>，得用<div>+JS模拟，顺带补<code>role="progressbar"和ARIA属性真正难的不是画出一根条，而是让它的值始终和业务逻辑对齐、在各种上下文里不掉链子。细节都在
value类型、max设定时机、以及CSS穿透层级里藏着。
