标签必须同时设置value和max属性才能正常显示，仅设value会导致溢出或截断；省略value则进入不确定状态；用于表示区间内的测量值，语义与进度无关；自定义样式需用带前缀的伪元素并设appearance:none；实际项目多用div模拟以获得更高可控性。
progress 标签必须同时设 value 和 max 才能正常显示
只写 <progress value="75"></progress> 会出问题：浏览器默认把 max 当作 1，value="75" 直接溢出，进度条可能空白、卡死，或静默截断为 100%。正确写法是显式声明两者：<progress value="75" max="100"></progress>。省略 value 则进入“不确定状态”，显示流动动画，适合加载中但无具体进度的场景。
- value 超过 max 时，多数浏览器会截断为 max 值，不报错但逻辑已失真
- max 可为任意正数（比如上传文件用字节数：
max="2097152"），不必非得是 100 - 内部文本（如
<progress value="40" max="100">40%</progress>）仅作降级提示，现代浏览器不显示它，但对屏幕阅读器有用
meter 标签不是进度条，别和 progress 混用
<meter></meter> 表示「已有范围内的测量值」，比如电量、温度、评分——它不表达“任务完成多少”，而是“当前值落在哪个区间”。常见错误是拿它当进度条用：<meter value="65" max="100"></meter> 看起来像进度条，但语义错误，无障碍工具会读成“65 分之 100”，而非“已完成 65%”。
- 真正要用
<meter></meter>，得带上min、low、high、max四个属性来定义区间含义，例如：<meter min="0" max="100" low="30" high="80" value="85"></meter>表示“偏高” - 浏览器会根据 value 相对于 low/high 的位置自动切换颜色（绿/黄/红），但样式不可控，且各浏览器渲染差异大
- 如果只是想显示“已完成 65%”，必须用
<progress></progress>；如果想表达“CPU 使用率 65%，属于偏高区间”，才该用<meter></meter>
自定义样式必须用伪元素，且浏览器前缀不能省
直接写 progress { background: blue; } 不生效——<progress></progress> 内部结构由浏览器私有实现，只能通过伪元素穿透。Chrome/Safari 用 ::-webkit-progress-bar 和 ::-webkit-progress-value，Firefox 用 ::-moz-progress-bar，Edge（旧版）还要加 ::-ms-fill。漏掉任一前缀，对应浏览器就回退到丑陋默认样式。
- 必须先加
appearance: none，否则伪元素无效 - WebKit 下
::-webkit-progress-value只控制填充部分，背景轨道要单独设::-webkit-progress-bar - Firefox 不支持
border-radius在::-moz-progress-bar上生效，圆角得靠外层容器模拟
真实项目里更常用 div 模拟进度条
因为 <progress></progress> 的样式定制成本高、行为不可控（比如无法加文字标签、无法响应 hover、无法做环形或渐变效果），多数团队直接用 <div class="progress-bar"><div class="progress"></div></div> 结构，靠 JS 控制 width 或 transform: scaleX() 更新视觉进度。
- 好处是完全自由：可加百分比文字、图标、暂停/重试按钮、多段色块（如已完成绿色 + 进行中黄色 + 未开始灰色）
- 关键点是用
requestAnimationFrame替代setInterval更新，避免卡顿；边界检查必须做，防止 width 超过 100% - 若需语义化，可在 div 上加
role="progressbar"、aria-valuenow、aria-valuemin、aria-valuemax手动补全无障碍支持
<progress></progress> 适合快速原型或内部工具；一旦设计要求明确、兼容性要求高、或需要复杂交互，div 方案反而更稳、更可控。别被“原生标签更标准”带偏——语义正确只是起点，落地时得看能不能扛住需求迭代。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
