<meter>-标量测量

<meter> 是 HTML5 中用于表示标量测量值的标签，通常用于展示已知范围内的数值，如磁盘使用量、投票结果或任务进度。它通过视觉化方式直观呈现数据，同时支持语义化标注，便于浏览器和辅助技术理解。

<meter> 的基本语法

<meter> 标签的语法结构如下：

<meter value="当前值" min="最小值" max="最大值" low="低阈值" high="高阈值" optimum="最佳值">
  后备文本（当浏览器不支持时显示）
</meter>

• value：必需属性，表示当前测量值。
• min/max：定义测量范围，默认为 0 和 1。
• low/high：划分数值的“低”“高”区间。
• optimum：标记最佳值，影响颜色渲染（如绿色表示理想状态）。

属性详解与示例

基础用法：展示静态数值

<meter value="0.6" min="0" max="1">60%</meter>

渲染效果为一条水平条，填充比例为 60%。若浏览器不支持，则显示“60%”。

动态范围控制

通过 JavaScript 动态更新数值：

<meter id="diskMeter" value="30" min="0" max="100" low="20" high="80"></meter>
<button onclick="updateMeter()">增加 10%</button>

<script>
  function updateMeter() {
    const meter = document.getElementById('diskMeter');
    meter.value += 10;
  }
</script>

点击按钮时，测量条的值会增加 10%，超出 high 阈值时会变色（通常为黄色）。

分段颜色提示

利用 low、high 和 optimum 实现多状态反馈：

<meter value="15" min="0" max="100" low="25" high="75" optimum="50"></meter>

• 值低于 25 时显示红色（警告）。
• 值在 25~75 之间为黄色（正常）。
• 值高于 75 或接近 optimum 时为绿色（理想）。

实际应用场景

磁盘空间监控

<p>剩余存储空间：</p>
<meter value="65" min="0" max="100" high="90">65GB / 100GB</meter>

投票结果可视化

<div>
  <label>选项A：</label>
  <meter value="45" min="0" max="100"></meter> 45%
</div>
<div>
  <label>选项B：</label>
  <meter value="55" min="0" max="100"></meter> 55%
</div>

任务进度条

<meter value="0.8" min="0" max="1" high="0.9">80% 完成</meter>

与 <progress> 的区别

<!-- meter：展示磁盘使用量（已知上限） -->
<meter value="70" min="0" max="100"></meter>

<!-- progress：上传文件（总大小可能未知） -->
<progress value="50" max="100"></progress>

样式自定义技巧

默认样式较简单，可通过 CSS 增强视觉效果：

meter {
  width: 300px;
  height: 20px;
}

/* WebKit 浏览器样式 */
meter::-webkit-meter-bar {
  background: #eee;
  border-radius: 10px;
}

meter::-webkit-meter-optimum-value {
  background: linear-gradient(to right, #4CAF50, #8BC34A);
}

meter::-webkit-meter-suboptimum-value {
  background: linear-gradient(to right, #FFC107, #FF9800);
}

meter::-webkit-meter-even-less-good-value {
  background: linear-gradient(to right, #F44336, #E91E63);
}

无障碍适配

为屏幕阅读器提供更清晰的描述：

<meter 
  value="75" 
  min="0" 
  max="100" 
  aria-label="当前磁盘使用量为 75%，接近警戒线"
>
  75%
</meter>

浏览器兼容性注意事项

• 现代浏览器（Chrome、Firefox、Edge）均支持。
• IE11 及以下版本不兼容，需提供后备文本。
• 移动端 Safari 可能需要测试颜色渲染。