meter 标签用于展示已知范围内的标量值，需设置 min、max 和 value 属性；可借助 low、high、optimum 实现语义化颜色反馈；内容文本作可访问性回退；样式兼容性差，需降级处理。
meter 标签用于在 HTML5 中直观展示某个已知范围内的标量值，比如磁盘使用率、投票占比、任务完成进度等。它不是进度条（progress），不表示任务的实时加载状态，而是强调“当前值在预设范围内所处的位置”。
基本语法与必要属性
一个有效的 meter 至少需指定 min、max 和 value 三个属性：
-
min：范围最小值（默认为 0） -
max：范围最大值（默认为 1） -
value：当前实际值（必须在 min 和 max 之间）
例如：<meter min="0" max="100" value="65">65%</meter> 会渲染为一个刻度条，65% 处有填充指示。
用 low、high、optimum 实现语义化颜色反馈
浏览器可根据这些属性自动为 meter 添加视觉状态（如绿色/黄色/红色背景），增强可读性：
-
low：低于此值视为“偏低”，触发黄色或橙色样式（如low="30"） -
high：高于此值视为“偏高”，也常为黄色/橙色（如high="80"） -
optimum：理想值（通常居中），对应绿色；若optimum在low左侧或high右侧，则“最佳”反而是两端（如节能模式下 20℃ 是 optimum，而 30℃ 就是 high）
示例：<meter min="0" max="100" low="20" high="80" optimum="50" value="15">偏低</meter> —— 浏览器可能将 15 显示为红色区域。
内容回退与可访问性处理
meter 的开始标签和结束标签之间的文本内容，是当浏览器不支持该标签或屏幕阅读器需要时的备用说明：
- 应简洁描述数值含义，如“已完成 72/100 项”、“CPU 使用率：68%”
- 避免仅写数字，也不宜冗长；可结合
aria-label进一步补充，如aria-label="内存使用率：4.2 GB / 8 GB"
注意：不要依赖 CSS 隐藏内部文本，否则会损害无障碍体验。
样式定制与兼容性提醒
各浏览器对 meter 的默认样式差异较大（Chrome 支持较好，Firefox 较简陋，Safari 早期版本不支持）。如需统一外观：
- 可用伪元素定制，如
meter::-webkit-meter-bar、meter::-webkit-meter-optimum-value（仅 WebKit） - 对非 WebKit 浏览器，建议配合 CSS 类 + JS 检测，降级为带 aria 属性的 div + background 渐变模拟
- 务必测试低版本 Edge 或旧版 Safari，必要时用
progress替代（但语义不同）
不复杂但容易忽略：始终确保 value 在 [min, max] 范围内，否则行为未定义，部分浏览器可能不渲染或报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
