meter元素的min、max和value必须同时设置才有效，单独设min或max不改变视觉范围；默认min=0、max=1、value=0，不设value时进度条为空；value须在[min,max]内，超出则被忽略。
meter 元素的 min、max 和 value 必须同时设才有效
单独设 min 或 max 不会改变视觉范围，浏览器只认三者共存时的相对比例。默认值是 min=0、max=1、value=0，所以不设 value 时进度条永远显示空。
-
min和max可以是任意数字（支持小数），比如min="-10"、max="3.14"都合法 -
value必须在[min, max]闭区间内，超出会导致浏览器忽略该值（表现为灰色空条或 fallback 样式） - 若
value小于min，部分浏览器显示为 0%；大于max则显示为 100%，但这是降级行为，不可依赖
用 low、high、optimum 控制颜色分段时要注意数值顺序
这三个属性不改变范围本身，只影响背景色（如红色/黄色/绿色），但它们的语义依赖于 min/max 的上下文。如果 low > high，浏览器仍会按数值大小判断区间，不会报错但逻辑反直觉。
-
low和high必须落在[min, max]内，否则无效（Chrome 会静默忽略） -
optimum可以等于min或max，表示“最优值在边界”，此时对应端点区域变绿 - 常见错误：设
min=0、max=100，却写low=80、high=20——结果是 low/high 被交换处理，实际等效于low=20、high=80
响应式场景下避免用百分比设 min/max
min、max、value 只接受数字，不支持 50% 或 calc()。想实现动态范围（比如根据数据自动缩放），必须用 JS 重写属性值。
- 服务端渲染时，若数据范围未知，宁可先设占位值（如
min="0" max="100" value="50"），再用 JS 替换 - CSS 无法修改
min/max，伪类如:has()也抓不到这些属性变化，样式适配只能靠 JS 监听或重新渲染 - 无障碍方面：
aria-valuemin、aria-valuemax、aria-valuenow必须和 HTML 属性严格同步，否则屏幕阅读器读错
兼容性差的点：IE 完全不支持，旧版 Safari 对 optimum 渲染异常
Firefox 和 Chrome 渲染一致，但 Safari 15.4 之前把 optimum 在 min 左侧时仍渲染为绿色区域，而非规范要求的“远离 optimum 的一侧变红”。
立即学习“前端免费学习笔记（深入）”；
- 生产环境建议加一层 CSS fallback：用
progress模拟基础进度条，再用@supports (appearance: meter)覆盖原生样式 - 测试时重点验证
value接近min或max的边缘情况，Safari 常在此处截断小数精度（如value="0.001"显示为空） - 不要依赖
meter做关键业务状态展示——它的语义化优势明显，但控制粒度和容错性不如自定义 canvas 或 SVG 方案
