标签的 value 属性只接受数字，不支持百分比字符串；需显式设置 min 和 max 才能使 low/high/optimum 生效；跨浏览器样式需 CSS 伪元素或降级方案；无障碍必须用 aria-label 或隐藏文本补充语义。
meter 标签不支持百分比字符串值，必须用 number 类型
直接写 <meter value="85%"></meter> 会失效——value 属性只接受数字，浏览器会忽略带 % 的字符串，回退到 0 或默认值。电池电量这种场景，后端或 JS 传来的数据常是字符串（如 "85" 或 "0.85"），得先转成 number 再塞进去。
实操建议：
- JS 中统一用
parseFloat()或一元加号+value转换，避免parseInt("85%")返回 85 却掩盖了单位污染风险 - 如果后端返回的是小数（如
0.82），别直接赋给value，要乘以 100 并确保在min/max范围内（默认是 0–100） - 服务端渲染时，模板里也得做数值清洗，比如 Nunjucks 中写
<meter value="{{ battery | float * 100 }}"></meter>
low/optimum/high 属性必须配合 min/max 才有意义
只设 low="20" high="80" 不生效，因为 meter 默认 min="0" max="100"，但浏览器不会自动推断——你得显式写出 min 和 max，否则 low/high 被忽略，所有值都显示为“正常”色（通常是绿色）。
电池场景典型配置：
立即学习“前端免费学习笔记（深入）”；
<meter value="72" min="0" max="100" low="20" high="80" optimum="60"></meter>
注意：optimum 是“最理想值”，不是“中间值”；设成 60 表示 60% 是电池健康使用区间，低于 20% 显红色、20–80% 显绿色、高于 80% 显黄色（各浏览器默认样式略有差异）。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
Chrome/Firefox 对 meter 样式支持不一致，别依赖默认颜色
Firefox 目前完全不支持 low/high/optimum 的视觉反馈，所有值都显示同一色块；Chrome 支持但颜色策略不同（比如高电量在 Chrome 是黄，在 Safari 可能偏橙）。纯靠 HTML 属性无法跨浏览器统一电池状态视觉表现。
稳妥做法：
- 用 CSS 自定义
meter::-webkit-meter-bar、meter::-webkit-meter-optimum-value等伪元素（仅 WebKit） - 对 Firefox 和旧 Edge，降级为用
data-status属性 + class 控制背景色，例如：<meter value="15" data-status="critical"></meter>，再配 CSSmeter[data-status="critical"] { background: #f00; } - 若需精确控制，干脆不用
meter，改用progress+ 额外 span 显示文字提示，更可控
屏幕阅读器对 meter 的支持有限，电量场景必须补充文本说明
meter 的 ARIA 支持很弱：NVDA 和 VoiceOver 多数只读出 “meter” 和当前值，不读 low/high 含义，更不会主动说“电量低”。用户听不到“危险”“充足”这类语义，只听到“72”，毫无上下文。
补救方式只有两个有效选项：
- 加
aria-label，如<meter value="12" aria-label="电池电量 12%，严重不足"></meter>—— 值变动时需 JS 同步更新该属性 - 在
meter旁放一个实时同步的<span class="visually-hidden">电量剩余 12%，请尽快充电</span>，用 CSS 隐藏但保留给读屏器读取
别指望 title 属性，它只在悬停时触发，对键盘和读屏用户无效。
