step 属性在 <input type="range"> 中控制评分步长，配合 min、max 可实现 1~5 星、0.5 分制等精确打分；仅 type="number" 和 type="range" 支持，且 step 必须为数字，值自动对齐到合法步长网格。
step 属性在 <input type="range"> 中控制评分步长
HTML 原生不支持“打分”语义化元素，但 <input type="range"> 是最常用、无障碍支持较好、且能用 step 精确控制间隔的方案。它本质是滑块，但配合 min、max 和 step 就能实现 1~5 星、0.5 分制等常见评分粒度。
关键点：只有 type="number" 和 type="range" 支持 step；type="text" 或自定义组件完全忽略该属性。
-
step必须是数字（如step="0.5"），不能是字符串"0.5"（虽然部分浏览器容错，但规范要求为数字） - 若
min="1"、max="5"、step="0.5"，合法值只有：1, 1.5, 2, 2.5, ..., 5 —— 浏览器会自动对齐到最近有效步长 - 设
step="any"允许任意小数，但失去“打分”意义，且部分屏幕阅读器可能跳过校验
为什么不用 <input type="number"> 直接输分？
虽然 type="number" 也支持 step，但它依赖用户手动输入，容易误填（如输 3.7 当 step="0.5" 时会被清空或重置），缺乏直观反馈。而 range 强制约束在步长网格上，更适合“选择式打分”场景。
- 移动端
range滑块触控友好，number键盘唤起成本高 - 当
step="1"且min="1"max="5"，range天然对应 5 星评分，无需额外逻辑对齐 -
number在 Safari 上对step="0.5"支持不稳定，有时只允许整数输入
如何让 range 滑块显示分数标签（如 “★☆☆☆☆”）？
step 本身不生成标签，需用 JS 绑定 input 事件读取 value 并更新 UI。重点在于：不要监听 change（仅失焦触发），而要用 input 实现实时响应。
立即学习“前端免费学习笔记（深入）”；
<input type="range" id="rating" min="1" max="5" step="0.5">
<span id="label">3.5</span>
<script>
const slider = document.getElementById('rating');
const label = document.getElementById('label');
slider.addEventListener('input', () => {
label.textContent = slider.value; // 自动对齐到 step 网格
});
</script>
-
slider.value始终是符合step规则的值，无需手动四舍五入 - 避免用
parseInt()或Math.round()处理，否则会破坏小数步长（如 4.5 变成 4） - 若需星号图标，可用 CSS 伪元素或 SVG 动态渲染，但核心逻辑仍依赖
value的原始精度
兼容性与无障碍要注意什么？
step 在所有现代浏览器中均被 range 和 number 支持，但 IE10+ 才支持 step 非整数值（IE10/11 不支持 step="0.5"，只认整数）。无障碍方面，range 默认有良好 ARIA 支持，但必须配 aria-label 或关联 <label>。
- 缺失
label会导致屏幕阅读器无法说明用途，例如：“滑块，无标签” - 不要用
title替代label，title不被多数读屏软件读出 - 若后端只接受整数（如 1~5），前端用
step="1"最稳妥，避免服务端再做转换
真正容易被忽略的是：step 的数学对齐逻辑依赖浏览器实现，某些旧安卓 WebView 对 step="0.5" 会截断而非四舍五入，建议在关键业务中用 JS 校验提交值是否落在预期序列里。
