<meter> 的核心价值是语义化表达静态测量值在预设范围中的位置，必须显式设置 min、max、value 三属性，配合 low/high/optimum 提供状态语义，用于磁盘占用、电量等“状态快照”，而非加载进度等“过程进展”。

标签的核心价值在于**语义准确表达静态测量值在预设范围中的位置**，不是装饰性进度条，而是有明确数据含义的 HTML 原生元素。

它专用于“状态快照”，而非“过程进展”

当你想告诉用户或辅助技术：“当前 CPU 使用率是 76%，而安全范围是 0–100%”， 就是最恰当的选择。它传递的是一个客观、可比、有上下界的标量事实。

• ✅ 正确场景：磁盘占用率（42/100 GB）、电池剩余电量（23%）、用户信用分（682/950）、投票支持率（57.3%）
• ❌ 错误场景：页面加载中、文件上传进度、表单填写完成度——这些应使用 <progress>
• ⚠️ 关键区别：value 可回退（如电量从 80% 降到 75%），说明它是状态；而 progress 的 value 只增不减，说明它是单向任务

语义依赖属性组合，缺一不可

浏览器和屏幕阅读器仅靠属性判断含义，不是靠视觉样式。必须显式写出 min、max 和 value，三者共同构成语义基础。

• 省略 min 或 max 时，浏览器默认 min="0"、max="1"，导致 value="85" 实际被解释为 8500%，渲染异常或空白
• value 必须是数字且落在 [min, max] 区间内，超出则行为未定义（Chrome 截断，Firefox 可能不渲染）
• 内部文本（如 76%）是可访问性必需内容，供不支持 meter 的浏览器或读屏软件读取

low/high/optimum 提供状态语义，影响自动着色逻辑

这些属性不控制样式本身，但为浏览器提供判断“偏低/偏高/理想”的依据，从而触发内置颜色反馈（如绿色→黄色→红色）。

• low 和 high 定义“正常区间”边界（如温度 low="18" high="26"）
• optimum 表示最理想值，位置灵活：可在区间内（如湿度 optimum="50"），也可在左侧（噪音 optimum="0"）或右侧（评分 optimum="100"）
• 若未设置 low/high，浏览器仅按 value 相对位置粗略着色；设了才可能激活更精细的状态识别

语义正确才能提升可访问性与 SEO

屏幕阅读器会根据 meter 属性读出不同提示，例如：

• 读 12% → “12 percent, suboptimal”
• 读 → “12 percent complete”
• 语义错位会让视障用户误解数据性质，搜索引擎也可能降低内容可信度