progress标签是表示任务完成度的唯一语义化选择，必须同时设置value和max属性，meter仅适用于静态测量值，动态更新需用el.value=Number(val)赋值并校验边界。
progress 标签才是进度条的唯一语义化选择
别用 meter，也别用 div + CSS 模拟来凑数——如果目标是「任务完成度」，progress 是 HTML5 中唯一正确、无障碍友好、浏览器原生支持的语义化标签。
常见错误是把 <meter value="80" max="100"> 当进度条用。它确实能显示 80%，但语义上表示的是“当前值在区间中的位置”，比如电量 80%（偏高）、评分 80 分（良好），不是“上传已完成 80%”。屏幕阅读器会读成“80 分之 100”，而非“已完成百分之八十”，用户认知错位。
正确写法必须同时带 value 和 max：<progress value="80" max="100">。漏掉 max 时，浏览器按默认 max="1" 解析，value="80" 就变成 8000%，多数渲染为空白或卡死；只写 max 不写 value 则进入不确定状态（流动动画），适合加载中但无具体数值的场景。
meter 标签只适用于有明确定义区间的测量值
meter 的语义核心是「静态测量」，不是「动态进展」。它需要至少四个属性协同表达含义：min、max、low、high，否则只是个没意义的数字容器。
立即学习“前端免费学习笔记（深入）”；
例如：<meter min="0" max="100" low="30" high="80" value="85"> 表示“85 属于偏高区间”，浏览器可能自动染红；而 <meter value="85" max="100"> 没有上下文，low/high 缺失，语义断裂，样式不可控，各浏览器渲染差异大。
如果你要展示的是：CPU 使用率、电池电量、考试得分、温度读数——这些不随时间线性推进、本身就有预设健康/危险阈值的量，才该用 meter。
progress 动态更新必须手动赋值，不能靠属性监听
progress 是“哑控件”：它不监听 fetch、不响应定时器、不解析字符串。写 el.setAttribute('value', '65') 在 Safari 下常失效；传字符串 "65" 或浮点数 0.65 在旧版 Firefox 可能静默失败。
实操要点：
- 用
el.value = Number(val)或el.value = +val赋值，确保是数字类型 - 始终做边界校验：
bar.value = Math.min(Math.max(0, computed), bar.max) - 初始化时显式设
bar.value = 0，结束时补足bar.value = bar.max，防卡在 99% - 高频更新（如每毫秒）反而导致跳变，建议加阈值（≥1% 才更新）或用
requestAnimationFrame
自定义样式只能靠伪元素，且前缀不能省
直接写 progress { background: #eee; } 完全无效——内部结构由浏览器私有实现，必须穿透伪元素。
关键三步缺一不可：
- 先重置默认外观：
progress { -webkit-appearance: none; -moz-appearance: none; appearance: none; } - 改背景轨道：
progress::-webkit-progress-bar { background: #f0f0f0; }、progress::-moz-progress-bar { background: #f0f0f0; } - 改进度条本体：
progress::-webkit-progress-value { background: #4a90e2; border-radius: 4px; }
注意：Chrome/Safari 用 ::-webkit- 前缀，Firefox 用 ::-moz-，Edge 已统一到 WebKit，但伪元素名和行为仍有细微差异。对视觉一致性要求高的项目，仍建议用 div + aria-valuenow 自建，换可控性。
