meter标签仅表达已知上下限内的标量值位置；必须显式设置min、max、value三者且均为数字，min<max，value∈[min,max]，否则可能不渲染或语义失效。
meter 标签不是“标尺”或“仪表盘”，它只表达一个**已知上下限内的标量值位置**；漏设 min、max 或 value 中任意一个，浏览器可能不渲染、显示为空白，或回退为纯文本。
必须显式写全 min/max/value，不能靠默认值
Chrome 和 Firefox 对默认值（min="0"、max="1"）的处理不一致：Chrome 可能归一化解析，Firefox 直接跳过语义逻辑。实际项目中，value="85" 单独存在等于无效。
-
min和max必须是数字，且min < max；字符串如min="0%"会导致解析失败 -
value必须落在[min, max]闭区间内；超出时 Chrome 可能截断，Firefox 常渲染为空 - 后端返回小数（如
0.73）时，前端需转为整数比例：Math.round(val * 100)，再填入value
low/high/optimum 不是 CSS 开关，而是语义分段依据
这三个属性本身不控制颜色，只提供浏览器内部状态判断依据；它们只有在数值关系合法时才生效——否则整个语义逻辑被忽略。
-
low必须 >min（low="0"在min="0"下无效） -
high必须 max（high="100"在max="100"下不触发“过高”状态） -
optimum必须 ∈ [min,max]，可等于边界（如电池健康度最优值 =min="0"） - 若
low > high（如low="80" high="30"），部分浏览器仍解析但语义混乱，应避免
样式定制只能靠伪元素，且浏览器支持差异极大
WebKit（Chrome/Safari）支持完整伪元素链，Firefox 仅支持极简样式（如 background），Safari 近期版本对 ::-webkit-meter-* 的支持也趋于保守。
- 可用的通用样式点：
height、border-radius、width（作用于整个meter元素） - WebKit 专属伪元素：
meter::-webkit-meter-bar（空槽）、meter::-webkit-meter-optimum-value（最优填充）、meter::-webkit-meter-suboptimum-value（次优）、meter::-webkit-meter-even-less-good-value（差） - Firefox 不识别
low/high/optimum，所有伪元素均无效；meter { background: #eee; }是它唯一可靠的颜色控制方式 - 无法用伪元素添加文字、刻度线、指针；这些必须用额外 DOM 元素叠加实现
别把它当进度条或仪表盘用
meter 和 progress 语义不同：progress 表示任务进行中（有起点、终点、动态过程），meter 表示静态快照（比如“当前 CPU 使用率是 82%”，不是“正在加载到 82%”）。
- 需要环形/弧形/指针式可视化？必须用
<svg>或 Canvas，meter原生只渲染横向条状 - 需要实时动画效果？
meter不自带动效，靠 JS 改value属性可触发动画，但动画本身由 CSStransition驱动，且仅限 WebKit - 对无障碍要求高？屏幕阅读器依赖
value属性和 fallback 文本；改textContent而不改value，辅助技术将感知不到变化
真正难的不是写对属性，而是让 low/high/optimum 的数值关系在所有目标浏览器里都保持语义有效——这往往需要 JS 校验 + CSS 降级双保险，而不是只靠 HTML 属性堆砌。
