标签用于表示固定范围内的标量测量值，需设min、max、value属性计算比例，支持low/high/optimum定义阈值区域以影响视觉着色，并应配合aria-label和CSS增强可访问性与样式。
<meter></meter> 标签是 HTML5 中用于表示已知范围内的标量测量值（如磁盘使用率、投票占比等）的语义化元素。它不适用于表示进度（那是 <progress></progress> 的职责），而是强调“当前值在某个固定区间中的相对位置”，特别适合展示投票结果中各选项的得票比例，并可结合 low、high、optimum 属性直观呈现阈值与理想值。
基础结构：定义范围与当前值
每个 <meter></meter> 必须指定 min、max 和 value，三者共同决定比例计算逻辑：
-
min默认为 0，表示最小可能值（如 0 票） -
max表示该选项理论最大得票数（通常设为总票数） -
value是该选项实际得票数（必须在 min–max 范围内）
例如：总票数 200，选项 A 得 85 票 → <meter value="85" min="0" max="200">42.5%</meter>，浏览器会自动按 85/200 = 42.5% 渲染长度。
用 low/high/optimum 划分阈值区域
这些属性不改变数值，但影响浏览器对 meter 的**视觉着色策略**（颜色深浅或色调变化，取决于 UA 样式）：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
low="50"：低于此值视为“偏低”（如得票 ≤ 50，显示偏冷色） -
high="150"：高于此值视为“偏高”（如得票 ≥ 150，显示偏暖色） -
optimum="100"：最理想的值（如 100 票对应 50% 支持率，常居中，浏览器可能用绿色强调）
注意：low/high/optimum 三者需逻辑自洽 —— 例如 optimum 应落在 [low, high] 内才符合语义；若 optimum=100 但 low=120，则语义矛盾，浏览器可能忽略 optimum。
配合 CSS 自定义样式与可访问性
原生 meter 样式较简陋且跨浏览器不一致，建议用 CSS 增强表现力，同时保留语义和可访问性：
- 用
aria-label显式说明含义，如aria-label="选项A得票：85票（占总票数200的42.5%）" - 通过伪元素或包裹容器添加百分比数字（meter 本身不渲染文字，内容文本仅作降级 fallback）
- 利用
::-webkit-meter-bar、::-webkit-meter-optimum-value等 WebKit 专有伪类定制颜色（Firefox 使用::moz-meter-bar等）
示例片段：
多选项并列时的实用技巧
投票结果通常含多个选项，需统一基准才能横向比较：
- 所有
<meter></meter>的max必须相同（即总票数），否则条形长度无法反映真实比例关系 - 避免用百分比直接赋给
value（如value="42.5"），因为 meter 不自动识别 % 单位；应保持整数/小数原始值 + 统一max - 可搭配
<output></output>或普通<span></span>在 meter 旁显示精确百分比，提升可读性
不复杂但容易忽略。
