<meter>-标量测量

<meter>标签的基本概念

<meter>是HTML5新增的一个语义化标签，用于表示已知范围内的标量测量值或分数值。它通常用于展示磁盘使用量、投票结果、测试分数等需要可视化表示比例的场景。与<progress>标签不同，<meter>表示的是静态值而非动态进度。

<meter value="0.6">60%</meter>

基本属性解析

<meter>标签支持多个属性来精确控制测量值的显示：

• value：当前测量值（必须属性）
• min：范围最小值（默认为0）
• max：范围最大值（默认为1）
• low：定义"低"阈值
• high：定义"高"阈值
• optimum：定义最优值

<meter min="0" max="100" value="75">75/100</meter>

阈值范围的应用

通过low、high和optimum属性可以创建分段的测量显示效果。浏览器会根据这些值自动改变颜色指示状态：

<meter min="0" max="100" low="30" high="80" optimum="90" value="65">
  65/100 (中等)
</meter>

实际应用场景

磁盘空间使用情况

<label>系统盘使用情况：</label>
<meter min="0" max="500" value="375" low="100" high="450">375GB</meter>

调查问卷结果

<h3>用户满意度调查</h3>
<p>产品易用性评分：</p>
<meter min="1" max="5" value="4.2">4.2/5</meter>

温度计效果

<label>当前室温：</label>
<meter min="-10" max="40" low="10" high="30" value="22">22°C</meter>

样式自定义技巧

虽然浏览器提供了默认样式，但可以通过CSS深度定制：

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

meter::-webkit-meter-bar {
  background: #eee;
  border-radius: 10px;
}

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

与<progress>的区别

<!-- 进度条示例 -->
<progress value="70" max="100">70%</progress>

<!-- 测量计示例 -->
<meter value="0.7">70%</meter>

浏览器兼容性处理

虽然现代浏览器普遍支持<meter>，但需要为旧版浏览器提供回退方案：

<meter value="0.6">
  <div class="meter-fallback">
    <div style="width:60%"></div>
  </div>
  <span>60%</span>
</meter>

<style>
  .meter-fallback {
    display: inline-block;
    width: 100px;
    border: 1px solid #ccc;
  }
  .meter-fallback div {
    height: 20px;
    background: #4CAF50;
  }
</style>

动态更新测量值

通过JavaScript可以实时更新<meter>的值：

<meter id="cpuMeter" min="0" max="100" value="30"></meter>

<script>
  setInterval(() => {
    const cpuUsage = Math.random() * 100;
    document.getElementById('cpuMeter').value = cpuUsage;
  }, 1000);
</script>

表单集成示例

<meter>可以与表单元素结合使用，创建交互式测量显示：

<form>
  <label for="volume">音量控制：</label>
  <input type="range" id="volume" min="0" max="100" oninput="updateMeter()">
  <meter id="volumeMeter" min="0" max="100" low="30" high="80"></meter>
</form>

<script>
  function updateMeter() {
    const volume = document.getElementById('volume').value;
    document.getElementById('volumeMeter').value = volume;
  }
</script>

多语言支持考虑

为<meter>提供多语言回退内容：

<meter value="0.75" min="0" max="1">
  <span lang="en">75% full</span>
  <span lang="zh">已用75%</span>
  <span lang="ja">75％使用中</span>
</meter>

性能监控面板

构建一个完整的系统监控界面示例：

<div class="monitor-panel">
  <h3>系统资源监控</h3>
  <div class="meter-group">
    <label>CPU使用率：</label>
    <meter id="cpu" high="90" optimum="60" value="45"></meter>
    <span id="cpuValue">45%</span>
  </div>
  <div class="meter-group">
    <label>内存占用：</label>
    <meter id="memory" high="85" optimum="50" value="70"></meter>
    <span id="memoryValue">70%</span>
  </div>
</div>

<script>
  // 模拟实时数据更新
  setInterval(() => {
    const cpu = Math.min(100, Math.random() * 100);
    const memory = Math.min(100, 30 + Math.random() * 60);
    
    const cpuMeter = document.getElementById('cpu');
    cpuMeter.value = cpu;
    document.getElementById('cpuValue').textContent = `${cpu.toFixed(1)}%`;
    
    const memoryMeter = document.getElementById('memory');
    memoryMeter.value = memory;
    document.getElementById('memoryValue').textContent = `${memory.toFixed(1)}%`;
  }, 1500);
</script>

游戏开发中的应用

在游戏HUD中显示角色状态：

<div class="game-hud">
  <div class="status-bar">
    <label>生命值：</label>
    <meter class="health" min="0" max="100" low="25" high="90" value="65"></meter>
  </div>
  <div class="status-bar">
    <label>魔法值：</label>
    <meter class="mana" min="0" max="100" low="10" high="80" value="40"></meter>
  </div>
</div>

<style>
  .game-hud {
    font-family: 'Arial', sans-serif;
    color: white;
    background: rgba(0,0,0,0.7);
    padding: 10px;
    border-radius: 5px;
  }
  .health::-webkit-meter-optimum-value {
    background: #FF5252;
  }
  .mana::-webkit-meter-optimum-value {
    background: #536DFE;
  }
</style>

教育领域案例

创建学生成绩可视化组件：

<div class="score-card">
  <h3>期末考试成绩</h3>
  <div class="subject">
    <label>数学：</label>
    <meter min="0" max="100" value="88" low="60" high="90"></meter>
    <span>88分</span>
  </div>
  <div class="subject">
    <label>语文：</label>
    <meter min="0" max="100" value="76" low="60" high="90"></meter>
    <span>76分</span>
  </div>
</div>