PHP小码农

Appearance

meter 度量元素 ​

<meter> 是 HTML5 引入的语义化元素，用于表示已知范围内的标量度量值。与 <progress> 表示任务进度不同，<meter> 表示的是一个静态的度量值（如磁盘使用率、考试成绩、温度等），并可通过 low、high、optimum 属性定义区间和最优值，浏览器据此自动选择颜色。

前置知识

阅读本节前，建议先了解：progress 进度条

基础概念 ​

什么是 meter 元素 ​

<meter> 元素表示标量度量值（scalar measurement）。主要特点：

  • 语义化：明确表示"度量"，屏幕阅读器能识别
  • 区间着色：浏览器根据值在区间中的位置自动着色
  • 多区间定义：支持 min/max/low/high/optimum 五级区间
  • 不用于进度：<meter> 表示度量，不是进度/任务完成度

与 progress 的区别 ​

特性<progress><meter>
语义任务进度标量度量值
典型场景上传进度、加载磁盘使用率、成绩、温度
不确定模式支持（无 value）不支持
区间着色不支持支持（low/high/optimum）
属性value, maxvalue, min, max, low, high, optimum

语法 ​

基本用法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>meter 基本示例</title>
</head>
<body>
    <h2>磁盘使用率</h2>
    <meter value="0.7" min="0" max="1">70%</meter>
    <p>已使用 70%</p>
</body>
</html>

完整属性示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>meter 完整属性</title>
</head>
<body>
    <h2>考试成绩</h2>
    <label for="score">分数：</label>
    <meter id="score" value="85" min="0" max="100" low="60" high="90" optimum="80">
        85 / 100
    </meter>
    <p>得分：85 分（满分 100 分）</p>
</body>
</html>

属性说明 ​

属性说明默认值
value当前值无（必需）
min最小值0
max最大值1
low"低"区间的上限等于 min
high"高"区间的下限等于 max
optimum最优值等于 min 和 max 的中间值

详细说明 ​

三区间模型 ​

<meter> 将度量范围分为三个区间：

  1. 低区间：min 到 low
  2. 中区间：low 到 high
  3. 高区间：high 到 max

浏览器根据 optimum 的位置和当前 value 所在区间，自动决定颜色：

  • 值在 optimum 附近 → 绿色（正常）
  • 值远离 optimum → 黄色/橙色（警告）
  • 值最远离 optimum → 红色（危险）
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>meter 区间着色</title>
</head>
<body>
    <h2>成绩区间示意</h2>
    <p>optimum = 80，low = 60，high = 90</p>

    <!-- 值在中区间，接近 optimum → 绿色 -->
    <p>85 分（正常）：</p>
    <meter value="85" min="0" max="100" low="60" high="90" optimum="80"></meter>

    <!-- 值在低区间 → 黄色/红色 -->
    <p>45 分（警告）：</p>
    <meter value="45" min="0" max="100" low="60" high="90" optimum="80"></meter>

    <!-- 值在高区间，远离 optimum → 黄色/红色 -->
    <p>95 分（过高）：</p>
    <meter value="95" min="0" max="100" low="60" high="90" optimum="80"></meter>
</body>
</html>

磁盘使用率示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>meter 磁盘使用率</title>
    <style>
        body { font-family: sans-serif; max-width: 600px; margin: 40px auto; }
        .disk {
            margin-bottom: 16px;
            padding: 12px;
            border: 1px solid #eee;
            border-radius: 8px;
        }
        .disk-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }
        meter { width: 100%; height: 20px; }
    </style>
</head>
<body>
    <h2>磁盘使用情况</h2>
    <p>optimum=0, low=0.6, high=0.8（值越低越好）</p>

    <div class="disk">
        <div class="disk-header">
            <span>C 盘（系统盘）</span>
            <span>72 GB / 100 GB</span>
        </div>
        <!-- 使用率 72%，在低区间内 → 绿色 -->
        <meter value="0.72" min="0" max="1" low="0.6" high="0.8" optimum="0"></meter>
    </div>

    <div class="disk">
        <div class="disk-header">
            <span>D 盘（数据盘）</span>
            <span>178 GB / 200 GB</span>
        </div>
        <!-- 使用率 89%，超过 high → 黄色/红色 -->
        <meter value="0.89" min="0" max="1" low="0.6" high="0.8" optimum="0"></meter>
    </div>

    <div class="disk">
        <div class="disk-header">
            <span>E 盘（备份盘）</span>
            <span>1900 GB / 2000 GB</span>
        </div>
        <!-- 使用率 95%，严重超标 → 红色 -->
        <meter value="0.95" min="0" max="1" low="0.6" high="0.8" optimum="0"></meter>
    </div>
</body>
</html>

CSS 自定义样式 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>meter CSS</title>
    <style>
        body { font-family: sans-serif; max-width: 600px; margin: 40px auto; }

        /* 基础样式 */
        meter { width: 100%; height: 24px; margin-bottom: 12px; }

        /* WebKit (Chrome/Safari/Edge) */
        meter::-webkit-meter-bar {
            background: #eee;
            border-radius: 12px;
            border: none;
        }
        meter::-webkit-meter-optimum-value {
            background: linear-gradient(90deg, #27ae60, #2ecc71);
            border-radius: 12px;
        }
        meter::-webkit-meter-suboptimum-value {
            background: linear-gradient(90deg, #f39c12, #e67e22);
            border-radius: 12px;
        }
        meter::-webkit-meter-even-less-good-value {
            background: linear-gradient(90deg, #e74c3c, #c0392b);
            border-radius: 12px;
        }

        /* Firefox */
        meter::-moz-meter-bar {
            border-radius: 12px;
        }
    </style>
</head>
<body>
    <h2>自定义 meter 样式</h2>

    <p>正常值（绿色）：</p>
    <meter value="0.3" min="0" max="1" low="0.6" high="0.8" optimum="0"></meter>

    <p>次优值（黄色）：</p>
    <meter value="0.7" min="0" max="1" low="0.6" high="0.8" optimum="0"></meter>

    <p>差值（红色）：</p>
    <meter value="0.9" min="0" max="1" low="0.6" high="0.8" optimum="0"></meter>
</body>
</html>

JavaScript 操作 meter ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>meter JavaScript</title>
</head>
<body>
    <h2>动态度量</h2>
    <label for="score-input">输入分数：</label>
    <input type="number" id="score-input" min="0" max="100" value="75"
           oninput="updateMeter(this.value)">

    <meter id="score-meter" value="75" min="0" max="100" low="60" high="90" optimum="80"
           style="width: 300px; height: 24px;"></meter>

    <p id="status"></p>

    <script>
        function updateMeter(val) {
            const meter = document.getElementById('score-meter');
            const status = document.getElementById('status');
            meter.value = val;

            // 判断区间
            if (val < 60) {
                status.textContent = '不及格';
                status.style.color = '#e74c3c';
            } else if (val < 90) {
                status.textContent = '正常范围';
                status.style.color = '#27ae60';
            } else {
                status.textContent = '优秀';
                status.style.color = '#f39c12';
            }
        }
        updateMeter(75);
    </script>
</body>
</html>

实战示例 ​

系统监控面板 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>系统监控</title>
    <style>
        body { font-family: sans-serif; max-width: 600px; margin: 40px auto; }
        .monitor-card {
            padding: 16px;
            border: 1px solid #eee;
            border-radius: 8px;
            margin-bottom: 12px;
        }
        .monitor-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-weight: 600;
        }
        meter { width: 100%; height: 18px; }
        .refresh-btn {
            padding: 8px 20px;
            background: #4a90d9;
            color: #fff;
            border: none;
            border-radius: 6px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h2>系统资源监控</h2>
    <button class="refresh-btn" type="button" id="refresh-btn">刷新数据</button>

    <div class="monitor-card">
        <div class="monitor-header">
            <span>CPU 使用率</span>
            <span id="cpu-val">45%</span>
        </div>
        <meter id="cpu" value="0.45" min="0" max="1" low="0.6" high="0.8" optimum="0"></meter>
    </div>

    <div class="monitor-card">
        <div class="monitor-header">
            <span>内存使用率</span>
            <span id="mem-val">68%</span>
        </div>
        <meter id="mem" value="0.68" min="0" max="1" low="0.6" high="0.85" optimum="0"></meter>
    </div>

    <div class="monitor-card">
        <div class="monitor-header">
            <span>磁盘 I/O</span>
            <span id="disk-val">25%</span>
        </div>
        <meter id="disk-io" value="0.25" min="0" max="1" low="0.6" high="0.8" optimum="0"></meter>
    </div>

    <script>
        document.getElementById('refresh-btn').addEventListener('click', function () {
            const metrics = ['cpu', 'mem', 'disk-io'];
            metrics.forEach(id => {
                const val = Math.random();
                const meter = document.getElementById(id);
                meter.value = val;
                document.getElementById(id.replace('disk-io', 'disk') + '-val').textContent =
                    Math.round(val * 100) + '%';
            });
        });
    </script>
</body>
</html>

注意事项 ​

不用于任务进度 ​

<meter> 不表示任务完成度或加载进度。如果需要表示进度，使用 <progress>。

不用于通用量度 ​

对于没有明确最优值的度量（如身高、体重），<meter> 可能不是最佳选择，直接使用数字文本可能更合适。

属性值约束 ​

属性值必须满足以下关系：

min <= low <= high <= max
min <= value <= max
min <= optimum <= max

如果不满足，浏览器会自动修正。

内容为降级文本 ​

标签之间的内容在不支持 <meter> 的浏览器中显示：

html
<meter value="0.7">70%</meter>

最佳实践 ​

  1. 合理设置 optimum：根据业务场景设置最优值（使用率类 optimum=0，成绩类 optimum=满分附近）
  2. 配合文字说明：始终提供数值文字说明，便于精确阅读
  3. 自定义颜色：通过 CSS 统一颜色方案
  4. 区间合理划分：low 和 high 应根据业务阈值设置
  5. 与 progress 区分：进度用 <progress>，度量用 <meter>

下一节

继续学习：fieldset 与 legend

参考链接 ​