html的step属性不支持百分比单位，必须将百分比换算为绝对数值，如0–100范围对应10%一档则step="10"；需统一min/max/step的小数位以避免解析错误，并配合output实时反馈防止浮点误差。
step 属性不支持百分比单位
HTML 的 step 属性**没有百分比（%）单位**，也不能写成 step="10%" 或 step="0.1%"。浏览器会直接忽略非法值，退回到默认行为（step="1"），或触发解析失败导致步进完全失效。
想实现“10% 一档”的效果，得用数值换算
所谓“10% 间隔”，本质是数值范围内的相对步长。但 step 只认绝对数值，必须配合 min 和 max 换算成具体数字：
- 若范围是 0–100（代表 0%–100%），要每 10% 一档 → 合法值为 0, 10, 20, …, 100 →
step="10" - 若范围是 0–1（代表 0%–100%，小数制），要每 10% 一档 → 合法值为 0.0, 0.1, 0.2, …, 1.0 →
step="0.1" - 若范围是 0–50（代表 0%–50%），仍要 10% 一档 → 10% 对应数值是 5 →
step="5"
关键点：先确定你的“100%”对应多少数值，再乘以目标百分比，得出 step 的绝对值。
常见翻车现场：min/max/step 小数位不一致
比如想做 0%–100%、1% 一档，却写了：<input type="number" min="0" max="100" step="0.01"> —— 这在部分旧版 Chrome 中会被四舍五入成 step="1"，因为整数 min 和小数 step 类型不匹配。
安全写法是统一小数位：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
min="0.00",max="100.00",step="1.00"（对应 1%） -
min="0.00",max="1.00",step="0.01"（也对应 1%，更易避免浮点误差）
注意：step="0.01" 仍有二进制精度风险，金额类场景强烈建议改用整数单位（如 100 表示 100%，step="1"）。
type="range" 滑块的视觉误导要特别小心
滑块本身不显示刻度，step 只控制取值对齐，不代表轨道上有 10% 标记。用户拖动时可能误以为停在“中间”，实际值却是 49.99999999999999 这类浮点残差。
务必搭配 <output></output> 实时反馈，并在 input 事件中做格式化：
<input type="range" id="pct" min="0.00" max="100.00" step="1.00"><output oninput="this.value = parseFloat(pct.value).toFixed(0) + '%'">0%</output>
否则用户看到的和提交的值可能不一致——这是最容易被忽略的交互断层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
