标签用于语义化表示标量测量值，如磁盘使用率、评分等级等，需设置 min/max/value 及 low/high/optimum 属性；支持 css 定制与无障碍访问，但不可替代 ，旧版 ie 需降级处理。
<meter></meter> 标签是 HTML5 中专用于表示**标量测量值**（即在已知范围内有明确最小值、最大值和当前值的数值）的语义化元素。它天然适合展示磁盘使用率、评分等级、进度占比等场景，既清晰传达语义，又可通过 CSS 精准控制视觉效果。
磁盘容量：用 meter 表示使用率（带语义范围）
磁盘空间本质是一个「当前已用 / 总容量」的比率，完全符合 <meter></meter> 的设计意图。关键在于合理设置 min、max 和 value，并利用 low、high、optimum 属性表达状态含义：
-
基础结构：
<meter value="85" min="0" max="100">85% used</meter> -
添加语义阈值：设
low="80"（低于 80% 为正常），high="95"（高于 95% 为危险），optimum="50"（理想使用率约 50%） -
辅助说明：标签内文字（如
85% used）是面向屏幕阅读器和无样式的回退内容，必须保留
评分等级：用 meter 表达离散或连续评分（需注意适用性）
对 5 星评分、0–10 分测试成绩等，<meter></meter> 可用，但需注意其本质是「连续标量」，不适用于纯分类（如“优秀/良好/及格”三档）。推荐方式：
-
连续评分（如 0–100 分考试）：
<meter value="87" min="0" max="100" low="60" high="90" optimum="100">87/100</meter> -
星级换算（如 4.2/5）：将分数映射到 0–100 范围（4.2 × 20 = 84），再渲染：
<meter value="84" min="0" max="100" optimum="100">4.2/5</meter> -
避免误用：若只有 “A/B/C/D” 四个离散等级，应优先用
<progress></progress>（仅进度）或普通文本+CSS图标，而非<meter></meter>
视觉定制：用 CSS 控制颜色与样式（兼容主流浏览器）
<meter></meter> 默认外观简陋，但可通过伪元素精准控制。不同浏览器前缀略有差异，以下写法覆盖 Chrome/Firefox/Safari：
-
整体容器：
meter { width: 200px; height: 24px; } -
已填充区域（value bar）：
meter::-webkit-meter-bar, meter::-moz-meter-bar { background: #e0e0e0; } -
根据状态变色（Chrome）：
meter::-webkit-meter-optimum-value { background: #4caf50; }<br>meter::-webkit-meter-suboptimum-value { background: #ff9800; }<br>meter::-webkit-meter-even-less-good-value { background: #f44336; } -
Firefox 兼容：
meter::-moz-meter-bar { background: #e0e0e0; }<br>meter[value="100"]::-moz-meter-bar { background: #4caf50; } /* 手动指定值区间 */
可访问性与替代方案提醒
<meter></meter> 原生支持无障碍（AT 会读出 value/max/low/high 等属性），但仍有两点必须注意：
-
永远提供文本内容：标签内文字（如
<meter ...>85%</meter>）不可省略，它是语音朗读和无 CSS 环境下的唯一信息源 -
不替代 progress：
<progress></progress>表示任务完成度（无固定上限，如“上传中…”），<meter></meter>表示静态测量值（如“已用 85GB/100GB”），二者语义不同，不可混用 -
旧浏览器降级：IE 不支持
<meter></meter>，可用<div role="meter"> + ARIA 属性模拟，或直接显示文本+条形图</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
