如何使用HTML5的Meter标签展示已知范围的数据度量？

本文共计851个文字，预计阅读时间需要4分钟。

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] 范围内，否则行为未定义，部分浏览器可能不渲染或报错。