标签用于展示标量值在已知范围内的相对位置（如评分、电量），而非动态进度； 才表示有明确终点的进行中任务。
<meter></meter> 标签不是用来展示“进度”的，它展示的是**某个标量值在已知范围内的相对位置**，比如磁盘使用率、电量百分比、评分（0–5星）等静态度量值。如果你要表达“任务正在加载中”，该用 <progress></progress>，不是 <meter></meter> —— 混用会导致语义错误、屏幕阅读器误读、CSS 逻辑混乱。
什么时候该用 <meter></meter> 而不是 <progress></progress>
核心区别在于：是否有明确的“完成态”或“动态过程”。
-
<meter></meter>：值是**当前快照**，不暗示变化，也不承诺会走到max。例如：<meter value="3.7" min="0" max="5">3.7/5</meter>（用户评分） -
<progress></progress>：必须有目标终点，隐含“正在进行”。浏览器可能为其添加动画效果，且 aria 属性默认按进度处理 - 常见误用场景：把上传剩余时间、下载进度条写成
<meter></meter>—— 这会让辅助技术认为“这是一个固定值”，而非“还在动”
<meter></meter> 的必需属性和取值边界
value 必须落在 min 和 max 之间（含端点），否则浏览器会忽略样式高亮（如 low/optimum/high 状态）并回退为中性渲染。
-
min默认是0，max默认是1；但你不能只设value="85"却不设max="100"，否则实际解析为value="85" max="1"→ 超出范围 → 状态失效 -
low、high、optimum是可选语义标记，仅当它们在[min, max]内才生效。例如：<meter value="20" min="0" max="100" low="20" high="80" optimum="60"></meter>中，low="20"刚好等于value，此时会触发 “low” 状态样式（如果 CSS 定义了） - 没设
low/high时，浏览器不会自动划分“偏低/偏高”，所有值都视为中性
让 <meter></meter> 在不同浏览器里看起来一致
原生 <meter></meter> 的默认样式差异极大：Chrome 渲染为带色块的横条，Firefox 是灰底+蓝块，Safari 甚至不显示颜色状态。靠纯 HTML 无法统一观感。
- 不要依赖
::-webkit-meter-bar等私有伪元素做跨浏览器定制 —— Firefox 不支持，Safari 支持有限，且未来可能废弃 - 真正可控的做法：用
role="meter"+aria-valuenow/aria-valuemin/aria-valuemax模拟语义，再用 div + CSS 实现视觉层。这样既保无障碍，又完全可控 - 如果坚持用原生
<meter></meter>，至少加一层包裹容器并设置display: block和固定高度，避免 Safari 下高度塌陷
最常被忽略的一点：即使你写了 optimum="50"，浏览器也不会自动给“最优区间”上色 —— 必须配合 CSS 的 meter::-webkit-meter-optimum-value（仅 WebKit）或 JS 检测值区间后手动加 class。语义和样式从来不是自动绑定的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
