不能。<meter>和<progress>仅表进度/度量，无交互、不渲染星星、不支持5星逻辑；纯CSS静态方案限只读场景；range滑块改造存在触摸、步进、无障碍缺陷；radio组方案语义清晰、键盘友好、兼容性强。
HTML 里直接用 <meter> 或 <progress> 能不能当评分/星星组件用？
不能。这两个语义化标签只表达“进度”或“度量范围”，不支持交互、不渲染星星、无法绑定 5 星制评分逻辑，浏览器也不会自动把 value="4" 变成四颗实心星。强行套用会导致可访问性缺失（role="rating" 不被原生支持）、键盘操作失效、屏幕阅读器读不出“4星（满分5星）”这类语义。
纯 HTML + CSS 实现静态星星评分（无 JS）的可行边界
仅适合只读场景，比如商品详情页展示“已评 4.2 分（97 条评价）”。核心是用 Unicode 星星字符 + CSS 控制截断：
-
★（实心星）和☆（空心星）必须用font-family: sans-serif保底，避免某些系统 fallback 成方块 - 用
background-clip: text+-webkit-text-fill-color: transparent实现渐变色星星（但 IE/旧 Safari 不支持） - 小数评分（如 4.2）只能靠伪元素遮罩宽度模拟，
width: 84%对应 0.2 颗星，但高 DPI 屏幕下边缘模糊明显 - 别用
content: "★★★★☆"硬写——无法适配 RTL 文本流，且 aria-label 没法动态注入
input[type="range"] 改造成星星评分的坑在哪？
常见做法是隐藏原生滑块，用星星图标覆盖，监听 input 事件更新选中数量。问题集中在三处：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 触摸设备上，
touch-action: manipulation必须加在包裹容器上，否则 iOS Safari 会触发页面滚动而非拖动滑块 -
step="1"是必须的，否则用户可能拖出 3.7 这种值，后续转整数星星时逻辑错乱 - 键盘操作（Tab 进入后按 ←→）默认步进是
step值，但用户直觉是“每次切一颗星”，需用onkeydown拦截并手动setRangeText或修改valueAsNumber - 无障碍必须补全：
aria-valuetext="4颗星（满分5颗）"，且随 value 动态更新，否则 VoiceOver 只读数字“4”
为什么推荐用 role="radiogroup" + input[type="radio"] 做交互式星星？
这是目前兼顾语义、键盘导航、屏幕阅读器和开发可控性的最稳方案。每个星星是独立 input[type="radio"]，name 相同，value 为 1–5：
立即学习“前端免费学习笔记（深入）”；
- 天然支持 Tab 键顺序聚焦、空格键选中、Shift+Tab 退回——不用自己实现焦点管理
- 屏幕阅读器自动读出“5个选项，当前选中第4项”，配合
aria-label="给本商品打分：4颗星"就很清晰 - CSS 用
input[type="radio"]:checked + label::before控制星星样式，兼容所有现代浏览器（包括 Firefox 的 checkbox/radio 自定义限制） - 服务端接收时直接拿到
score=4字符串，无需解析小数或坐标——避免前端算错后端校验失败
唯一要注意的是：5 个 radio 必须包裹在同一个 div role="radiogroup" 里，并设 aria-labelledby 指向标题，否则部分 NVDA 版本会把它们识别成孤立单选按钮。
