meter标签用于显示静态标量值在预设范围中的相对位置，需指定value、min、max属性，可选low/high/optimum控制语义着色，不可替代progress表示动态进度。
meter 标签专为显示已知范围内的标量值（如磁盘使用率、投票占比、温度区间等）而设计，它不表示进度，而是反映某个静态度量在预设范围中的相对位置。
基础用法：必须指定范围和当前值
要让 meter 正常渲染，至少需提供 value、min 和 max 属性。浏览器会自动计算百分比并用颜色示意（通常绿色→黄色→红色）：
-
75% —— 显示 75/100 的填充条 - 若省略 min 默认为 0；省略 max 默认为 1，但建议显式写出，避免歧义
- 内容文本（如“75%”）是备用文案，当样式失效或屏幕阅读器访问时可见
用 low / high / optimum 精准控制视觉反馈
仅靠 value/min/max 只能显示位置，无法表达“是否偏高/偏低/理想”。添加这三个属性后，浏览器会按语义着色：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- low：低于此值视为“偏低”，条形偏绿色
- high：高于此值视为“偏高”，条形偏橙色或红色
- optimum：最理想的数值（可等于 low 或 high），靠近它时颜色更绿
- 例如：
22°C —— 22 接近 optimum=20，显示为较鲜亮的绿色
配合 CSS 微调外观（现代浏览器支持）
原生 meter 样式有限，但可通过伪元素定制：
- meter::-webkit-meter-bar：控制背景轨道
- meter::-webkit-meter-optimum-value：最优区（绿色）填充
- meter::-webkit-meter-suboptimum-value：次优区（黄）填充
- meter::-webkit-meter-even-less-good-value：不良区（红）填充
- 注意：Firefox 使用 meter::-moz-meter-bar 等，需分别适配或依赖 CSS 自定义属性降级
重要提醒：别和 progress 混用
meter 表示「当前状态在范围中的位置」，progress 表示「任务完成进度」。两者语义不同：
- ✅ 适合 meter：CPU 使用率（当前 68%，范围 0–100）、电池电量（当前 42%，满电 100%）
- ❌ 不适合 meter：文件上传中（这是动态过程，该用 progress）
- 辅助技术会据此播报不同含义，错误使用会影响可访问性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
