<meter> 是只读语义化展示组件，非表单控件；实现可交互标尺须用 <input type="range"> 配合 <output> 或 <meter> 同步展示，复杂场景应选用 SVG/Canvas + hidden input。
<meter> 标签不是表单控件，也不属于 HTML 表单元素（如 <input>、<select>、<textarea>），它只是语义化标量值的**只读展示组件**。想在表单里“设置度量衡标尺”，实际只有两种可行路径：用 <meter> 做视觉辅助（但不能提交数据），或用 <input type="range"> 实现可交互的标尺输入。
为什么 <meter> 不能直接当表单标尺用
它没有 name 属性，不参与表单序列化；不能获得焦点，无法键盘操作；value 只是渲染依据，改 textContent 不会同步更新语义值。常见错误包括：
- 把
<meter value="75" max="100">直接塞进<form>期待它提交数据 → 实际提交时完全被忽略 - 只写
<meter value="75">，漏掉min和max→ Firefox 渲染为空白，Chrome 显示灰色空条 - 用 JS 改
element.innerText = "75%"却没同步设element.value = 75→ 辅助技术读不到新值，颜色状态也不更新
<input type="range"> 才是真正的表单“标尺”
它原生支持拖动、键盘方向键、无障碍（ARIA-ready），且能随表单提交。关键点在于：它的视觉表现可模拟标尺，但语义仍是输入控件。
- 必须显式设置
min、max、step，否则默认为 0–100，步长 1 —— 这和<meter>的约束逻辑一致，但意义不同：这里是用户可选范围 - 若需显示当前值（如“75%”），得用额外 DOM 元素（如
<output>）绑定oninput事件手动更新，<input>自身不渲染数字 - CSS 自定义滑块轨道/拇指（thumb）在各浏览器中差异极大：WebKit 支持
::-webkit-slider-runnable-track和::-webkit-slider-thumb；Firefox 需用appearance: none+ 手动重绘，且不支持轨道分段着色
想让标尺带语义颜色（如“偏低/正常/偏高”）怎么办
纯 HTML 无法实现。因为 <input type="range"> 没有 low/high/optimum 属性，<meter> 又不可交互。折中方案是：用 <input type="range"> 输入 + <meter> 同步展示，靠 JS 绑定两者 value。
- 监听
input事件，把 range 的value赋给 meter 的value属性（不是 textContent） - 动态计算并设置 meter 的
low、high、optimum（例如体温场景：low="36",high="37.2",optimum="36.5"） - 注意：meter 的颜色反馈仅由浏览器内置逻辑触发，Safari 和 Firefox 对这些属性的支持极弱，别依赖它做关键提示
真正需要专业标尺 UI 时该选什么
放弃 <meter> 和原生 range。它们的设计目标从来不是“仪表盘”或“工程标尺”。复杂需求请直接上 SVG 或 Canvas：
立即学习“前端免费学习笔记（深入）”；
- SVG 可精确控制刻度线、指针旋转角度、环形背景、多段渐变填充，且能绑定 ARIA 属性（
aria-valuenow、aria-valuetext） - Canvas 更适合动画响应（如指针平滑转动）、实时数据流渲染，但需自行处理焦点管理和键盘导航
- 所有自定义方案都必须手动同步 value 状态到隐藏的
<input type="hidden">，确保表单仍能提交有效数值
