step属性规定number和range输入元素的数值变化单位，决定合法值范围与滑块刻度点，需与min/max配合使用，避免浮点误差并结合js校验确保精度。
step 属性用于规定 <input type="number"> 和 <input type="range"> 元素中用户可输入或拖动的最小变化单位，它直接影响数值的“精准步进”行为。
step 控制数字输入框的合法值范围
在 number 类型中，step 与 min、max 共同决定哪些值是允许提交的。浏览器会自动校验：用户手动输入或用上下箭头调整时，只接受符合 min + n × step（n 为整数）的值。
- 默认值是
1；设为0.1可支持一位小数，如<input type="number" step="0.1" min="0" max="5"> - 设为
"any"表示不限制小数位数（但不推荐用于需要校验精度的场景） - 若
min是0.5、step是0.2，合法值为0.5, 0.7, 0.9, 1.1...（从 min 开始累加）
step 影响滑块（range）的拖动粒度
<input type="range"> 的 step 决定滑块可停靠的刻度点。即使视觉上滑动平滑，实际取值仍按步进对齐。
- 例如：
<input type="range" min="0" max="100" step="5">，滑块只能取0, 5, 10, ..., 100 - 若未设置
step，默认为1；设为0.5则支持半整数（如1.5, 2.0, 2.5） - 注意：range 输入框本身不显示数值，常配合
<output></output>实时反馈当前值
常见陷阱与注意事项
step 看似简单，但容易因类型不匹配或边界计算出错导致行为异常。
-
避免小数精度问题：用
step="0.1"时，某些浮点运算可能产生0.30000000000000004，建议后端或 JS 做parseFloat(val.toFixed(1))格式化 -
min/max 必须能被 step 整除（逻辑上）：比如
min="0.1"、step="0.2"是合理的；但min="0.15"、step="0.2"会导致第一个合法值是0.15，下一个却是0.35，中间出现空档 -
type="number" 的 step 不影响键盘输入校验强度：用户仍可粘贴非法值（如
2.15在step="0.1"下），需结合input或change事件做 JS 修正
实用小技巧：让 step 更友好
提升用户体验可配合其他属性和简单脚本：
- 添加
list属性 +<datalist></datalist>提供常用选项（仅作提示，不强制限制） - 对 range 输入，用
input事件监听并同步更新旁边<output></output>标签：<output oninput="this.value = rangeInput.value">0</output> - 需要严格控制时，在表单提交前用 JS 检查：
if ((value - min) % step !== 0) {...}（注意浮点误差，建议用Math.abs(((value - min) / step) % 1) ）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
