标签用于表示已知范围内的标量测量值，必须设置min、max和value属性；low、high、optimum用于语义分段，css伪元素可定制样式，但跨浏览器兼容性差，不可用于进度条或无界数据。
meter 标签的基本用法和必要属性
meter 是 HTML5 原生语义化标签，专为表示「已知范围内的标量测量值」而设计，比如磁盘使用率、投票支持率、加载进度（但注意：不是加载动画，而是当前完成比例）。它不自动动效，也不自带交互，纯靠属性驱动视觉状态。
关键点在于：必须同时提供 min、max 和 value，否则浏览器可能不渲染或降级为普通内联元素。默认 min=0、max=1，但显式声明更安全。
<meter value="65" min="0" max="100">65%</meter>
其中内容文本（如 "65%"）是 fallback 文本，仅在浏览器不支持 meter 或 CSS 禁用时显示。
如何用 low / high / optimum 控制颜色语义
meter 的视觉状态（尤其是背景色）由三个可选属性决定：low、high、optimum。它们不是 CSS 类，而是逻辑分段依据，浏览器据此自动切换颜色（例如 Chrome 中：绿色→黄色→红色）。
-
low和high定义“正常区间”的边界，超出即视为偏低或偏高 -
optimum指“理想值”，可以小于low（如越低越好）、也可以大于high（如越高越好），甚至落在中间
<meter value="22" min="0" max="100" low="30" high="70" optimum="0">22%</meter>
这个例子表示：0 是最佳值，22 属于“偏低但尚可”（因为 value 是 5，且 optimum=0，则倾向绿色；若 optimum=100，同样 5 就会变红。
常见误区：以为 low/high 是 CSS 钩子——其实它们只影响 UA 默认样式，自定义样式需用伪元素。
用 CSS 伪元素覆盖默认颜色（Chrome/Firefox 支持）
浏览器对 meter 的默认样式差异大（Safari 几乎无样式），要统一外观，必须用 ::-webkit-meter-inner-element、::-webkit-meter-bar 等伪类。Firefox 使用 ::-moz-meter-bar，但仅部分支持。
实际建议：
- 只针对 Chrome 做基础定制（因市场占比高且伪类稳定）
- 用
appearance: none清除原生样式，再用background+clip-path或渐变模拟进度条 - 不依赖
optimum触发颜色变化，改用 JS 动态加 class 更可控
meter { -webkit-appearance: none; width: 200px; height: 24px; }
meter::-webkit-meter-bar { background: #e0e0e0; border-radius: 12px; }
meter[value="0"]::-webkit-meter-bar { background: #4caf50; }
meter[value="100"]::-webkit-meter-bar { background: #f44336; }
注意：value 属性值是数字，CSS 选择器中必须写成字符串匹配（如 [value="75"]），不能写 [value>=75]。
什么情况下不该用 meter 标签
meter 有明确语义约束，滥用反而损害可访问性：
- 数据无明确上下界（如“用户活跃度得分”未定义满分或及格线）→ 改用
progress或普通div+ ARIA - 需要点击/拖拽交互 →
meter不响应事件，应换input type="range" - 显示趋势而非瞬时值（如“过去7天 CPU 使用率折线图”）→ 这是图表范畴，用 Canvas 或 SVG
- 多维度对比（如并列显示内存、CPU、磁盘三项）→ 单个
meter只表达一个标量，需多个独立标签，配合aria-label区分
最易被忽略的一点：屏幕阅读器对 meter 的朗读依赖 value 和 min/max 属性，如果 JS 动态修改这些值但没同步更新 DOM 属性（比如只改了 textContent），读屏软件就无法感知变化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
