标签专用于表示已知范围内的静态标量测量值，如磁盘使用率、投票支持率、电池电量；不可用于任务进度（应使用），且必须显式设置min、max、value三属性，value须在[min,max]内。

meter 标签适合什么场景meter 专用于表示已知范围内的标量值，比如磁盘使用率、投票支持率、加载进度（前提是知道最大值）、电池电量等。它不是进度条（progress 表示任务完成度），也不适合动态变化但无明确上下界的数值（如实时温度）。浏览器会根据 min、max、low、high、optimum 自动渲染不同颜色区间，但样式可覆盖。

必须设置的属性和常见错误meter 至少需要 min、max 和 value 才能正常渲染，否则可能不显示或退化为纯文本。常见错误包括：

• 忘记写 min 或 max，导致浏览器用默认值（0 和 1），使 value="85" 被当作 85/1 → 溢出显示为红色
• value 超出 [min, max] 范围，此时浏览器仍渲染，但语义失效，且 low/high 判断失效
• 把 optimum 设在 low 和 high 外（比如 min="0" max="100" low="20" high="80" optimum="5"），会导致“最优值”落在“低区”，视觉提示矛盾

如何控制颜色区间（low/high/optimum） 浏览器对 meter 的颜色策略是：

• 值 ≤ low：通常呈黄色（偏低）
• 值 ≥ high：通常呈红色（偏高）
• 值靠近 optimum：通常呈绿色（理想）
• low 和 high 必须在 min–max 内，且 low ≤ high
• optimum 可以等于 min 或 max，但若设为中间值（如 50），而 low=10、high=90，则绿色区域会集中在 50 附近

示例（磁盘使用率）：

<meter min="0" max="100" value="73" low="30" high="85" optimum="50">73%</meter>

样式定制和兼容性注意点meter 默认样式不可靠，各浏览器差异大（Chrome 渲染为带色块的横条，Firefox 更简朴）。要用 CSS 定制，需通过伪元素：

• Chrome/Edge：meter::-webkit-meter-inner-element、meter::-webkit-meter-bar、meter::-webkit-meter-optimum-value 等
• Firefox：meter::-moz-meter-bar（仅部分版本支持）

更稳妥的做法是用 appearance: none 重置后完全自定义背景+渐变，但需注意：一旦隐藏原生控件，就失去了无障碍语义优势，必须补上 role="progressbar" 和 aria-valuenow 等属性。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

真正容易被忽略的是：当值动态更新时，直接改 value 属性即可触发重绘，无需 DOM 替换——但很多人误以为要重新插入整个 meter 元素。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！