<progress>仅适用于已知总值的确定性进度，需设数字型value和max，不支持IE、不能自动动画、不可当加载指示器；自定义样式须用浏览器特定伪元素，fetch无法直接绑定上传进度。
HTML原生<progress>标签怎么用才不翻车
直接说结论：<progress>是语义化进度条，但默认样式丑、兼容性有坑、不能当加载动画用。它只适合表示「已知总值的确定性进度」，比如文件上传完成度、表单填写进度。
常见错误现象：<progress value="0.5">不显示（因为value必须是数字，且max默认为1，但部分浏览器会忽略小数）；设了value="50"却只走一半（忘了设max="100"）。
-
value和max都必须是数字，不能是字符串或百分比（value="50%"无效） - 没写
max时，浏览器按max="1"算，所以value="0.75"才是75%，不是value="75" - IE完全不支持——如果要兼容IE，得降级用
<div>+ CSS模拟，别硬扛 - 它不能自动动起来：没有内置“加载中”状态，value不变，进度条就不变
用CSS自定义<progress>样式时最常漏的三件事
原生<progress>在Chrome/Firefox里能用伪元素定制，但规则特别拧巴，漏一条就白写。
- 必须用
::-webkit-progress-bar和::-webkit-progress-value（Chrome/Safari），Firefox用::progress-bar和::progress-value，二者不通用 -
background写在::-webkit-progress-bar上才管用，写在<progress>标签本身上无效 - 想让进度条圆角？得给
::-webkit-progress-value加border-radius，但它的高度由height决定，而父容器::-webkit-progress-bar的height才是视觉高度——两个height要配好，否则圆角被裁掉
示例（仅Chrome有效）：
progress::-webkit-progress-bar { background: #eee; height: 8px; }</code><br><pre class="brush:php;toolbar:false;">progress::-webkit-progress-value { background: #4a90e2; border-radius: 4px; }
立即学习“前端免费学习笔记（深入）”；
为什么fetch上传文件时别直接绑<code><progress>的value
因为fetch本身不暴露上传进度——它只在请求发完、响应回来时才触发then，中间黑盒。你看到的“进度跳变”，其实是靠XMLHttpRequest的upload.onprogress事件手动算出来的。
- 要用
<progress>显示真实上传进度，必须用XMLHttpRequest，或者用axios等封装库的onUploadProgress钩子 - 自己算进度时，注意
event.loaded和event.total可能为0（比如本地文件读取失败），要加判断，否则value=0/0会导致NaN报错 - 别在每次
onprogress里直接改progress.value——高频触发会卡UI，建议用requestAnimationFrame节流或每100ms更新一次
替代方案：什么时候该放弃<progress>，改用<div>+CSS
当你需要这些功能时，<progress>就该让位了：不确定总耗时的加载（如“正在连接服务器…”）、环形进度条、带文字提示的内嵌进度、IE11兼容。
- 用
<div class="progress-bar"><div class="progress-fill" style="width: 35%;"></div></div>结构最灵活，width可JS实时改，也方便加transition动画 - 环形进度用SVG
<circle>配合stroke-dasharray更稳，<progress>做不到 - 如果只是“加载中…”，用
<div>配旋转动画（animation: spin 1s linear infinite）比硬套<progress value="0">更符合语义
复杂点在于：手写<div>进度条要自己管aria-valuenow、aria-valuemin、aria-valuemax，不然屏幕阅读器读不出来——这点原生<progress>自动做了，别为了图省事丢掉无障碍。
