HTML无法实现可点击星级输入，需CSS+JS配合；radio组方案最轻量且无障碍友好，但须同name、数字value、完整点击区域、显式checked；应监听change而非click事件；SVG画星优于★字符，因渲染一致、可独立着色、缩放无损；还需确保屏幕阅读器正确播报评分。
HTML 本身不能实现可点击的星级输入，必须配合 CSS 和 JavaScript —— 单靠 <input type="range"> 或纯 HTML 标签只能展示，无法完成“点某颗星就选中前几颗”这种交互。
为什么 <input type="radio"> 星级组最常用又容易翻车
用 5 个 <input type="radio"> 配合隐藏 + CSS 伪元素（如 ::before）画星，是最轻量、语义清晰、无障碍友好的方案。但实际写时容易漏掉关键点：
- 所有 radio 必须有相同的
name属性，否则无法互斥选择 - 每个 radio 的
value应为数字（如1～5），别用中文或字符串，否则 JS 取值或后端解析易出错 - CSS 中若用
label包裹 input + 星号图标，必须确保点击区域覆盖完整；否则在移动端点不中 - 默认选中逻辑要显式设置：
checked放在对应 input 上，而不是靠 JS 初始化 —— 否则页面加载闪动或 SSR 场景下失效
click 事件监听 vs change 事件监听的区别在哪
给星级 radio 绑定事件时，用 change 而非 click 是更稳妥的选择：
-
change只在用户真正改变选中值后触发（比如从 3 星切到 4 星），不会因重复点击同一颗星而误触发 -
click会每次点击都触发，包括点已选中的星 —— 容易导致重复提交、状态混乱 - 如果需要支持键盘操作（Tab + 空格），
change依然能捕获，click则完全失效 - 示例绑定方式：
document.querySelectorAll('input[name="rating"]').forEach(radio => { radio.addEventListener('change', e => console.log('当前评分：', e.target.value)); });
用 svg 画星比 ★ 字符靠谱在哪
直接用 Unicode 字符 ★ 或 ☆ 虽简单，但实际项目里很快会遇到问题：
立即学习“前端免费学习笔记（深入）”；
- 字体渲染差异大：Windows/macOS/Android 显示粗细、大小、对齐不一致，尤其嵌套在 flex 容器中容易错位
- 无法单独控制单颗星颜色（字符整体着色，不能只填满前 3 颗）
- 缩放失真：放大后边缘锯齿明显，且无法用 CSS
filter做悬停高亮 - 用 inline
svg就没这些问题 —— 每颗星是独立<svg>，可加class控制填充色，hover 时改fill即可，兼容性也覆盖到 IE11+ - 注意：不要把 svg 写成外部文件引用（
<img src="star.svg">），那样无法用 CSS 控制内部样式
真正难的不是画出五颗星，而是让它们在屏幕阅读器里正确播报“当前评分 4 星，共 5 星”，且禁用状态下视觉+行为同步。这些细节一旦忽略，PC 端看着正常，一上手机或交到 QA 手里就暴露了。
