step属性仅对input type="number"、"range"、"date"及部分时间类型生效，type="text"等无效；它控制交互增减单位而非强制校验，需配合min/max和JS校验确保合法性。
step属性只对特定表单控件生效
step 属性不是所有 HTML 元素都支持，它仅在 <input type="number">、<input type="range"> 和 <input type="date">（及部分时间类型）中起作用。试图给 <input type="text"> 或 <div> 加 <code>step 完全无效，浏览器会忽略该属性。
number类型中step控制的是键盘/按钮增减的最小单位
当用户点击 type="number" 输入框右侧的上下箭头，或用键盘按 ↑/↓ 键时，值的变化量由 step 决定。默认是 1，设为 0.5 就每次加减 0.5：
<input type="number" step="0.5" min="0" max="10" value="2">
注意三点：
-
step值必须与min的小数位兼容，比如min="0.1"配step="0.2"是合法的；但min="0.1"配step="0.3"可能导致某些值无法通过按钮到达（如 0.1 → 0.4 → 0.7 → 1.0… 跳过了 0.5） - 用户仍可手动输入任意值（比如粘贴
"3.1415"），step不构成校验约束，只影响交互增量 - 若未设
min/max，step仍生效，但起始点是当前值，可能超出合理范围
range类型中step影响滑块移动的“刻度粒度”
<input type="range"> 的 step 决定拖动时能停驻的离散位置数量。例如：
立即学习“前端免费学习笔记（深入）”；
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
<input type="range" min="0" max="100" step="10">
滑块只能停在 0、10、20…100 这些整十数上。常见误区：
- 设
step="any"表示无粒度限制（允许任意浮点值），但需确保min/max支持小数，否则可能被截断 - 视觉上滑轨没有自动标注刻度，
step不会生成 tick marks，需要 CSS 或 JS 配合实现 - 移动端 touch 拖动行为不受
step影响——手指松开时，浏览器会自动“吸附”到最近的有效值点
验证加价逻辑不能只靠step，必须配合JS和后端检查
step 是纯前端交互辅助，既不阻止非法输入，也不保证提交值合规。真实业务中（如电商加价竞拍），务必做三层防护：
- 前端用
input事件监听值变化，实时校验是否符合步进规则：value % step === 0（注意浮点精度问题，建议用Math.abs(value % step) ） - 提交前再次校验，避免绕过 JS 的直接 POST
- 后端收到数据后，必须独立重算合法性——攻击者可禁用 JS、篡改请求体，
step在服务端毫无意义
最容易被忽略的是浮点误差：比如 step="0.1" 时，0.3 + 0.1 在 JS 中可能得 0.30000000000000004，直接取余会失败，得用 Number.EPSILON 或四舍五入对齐。
