用 fieldset+legend 实现语义化评分，radio 按 1–5 分值设置，禁用 disabled/pointer-events；评论用 ol reversed 倒序渲染；提交校验后保留输入状态；平均分用 toFixed(1) 并 aria-live 同步更新。
用 fieldset + legend 组织评分结构，别用纯 div 堆砌
浏览器原生表单语义能帮屏幕阅读器正确识别评分区域，也方便后续用 JS 控制。直接写 <div class="rating"> 会导致辅助技术读不出“这是评分”，且无法聚焦或键盘操作。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
<fieldset>包裹整个评分块，<legend>写明“用户评分”或“商品评分” - 5 颗星用
<input type="radio">实现（支持键盘 Tab + 空格选中），name 统一（如name="product-rating"） - 每颗星的
value设为对应分值（1–5），label 关联 input，文字写成“1 星：很差”这类可读描述 - 禁用
pointer-events: none或disabled属性——否则键盘无法操作，也破坏语义
评论列表用 <ol reversed> 倒序展示最新评论在最前
电商场景下用户最关心最新反馈，但数据库默认按时间正序查出，前端若用 JS 翻转再渲染，会拖慢首屏、增加 DOM 操作负担。HTML 原生 reversed 属性就能解决。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 评论用
<ol reversed>，每条评论是<li>，语义清晰且天然支持有序编号（即使不显示数字） - 后端返回评论数据时，按
created_at DESC排序，直接顺序渲染到<ol>中，无需前端翻转 - 避免用
<div>+ CSSflex-direction: column-reverse—— 会导致阅读顺序错乱，影响无障碍和 SEO - 每条评论包含作者名、时间、内容，时间用
<time datetime="2024-06-15">6月15日</time>标记，便于机器解析
提交评论时校验必填项并保留未提交内容，别刷新页面
用户填完长评论点提交，结果因邮箱格式错或没选评分被清空，这种体验极差。必须在客户端做即时校验，并在报错后保持所有输入状态。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 监听
submit事件，调用event.preventDefault()阻止默认跳转或刷新 - 检查
document.querySelector('input[name="product-rating"]:checked')是否存在，没选则聚焦到第一颗星并提示 - 评论内容用
textarea.checkValidity()+required属性触发原生提示，或手动判断.value.trim().length === 0 - 校验失败后，不要清空
textarea或重置 radio，让用户能直接修改 - 提交成功后，用
fetch()插入新<li>到<ol>开头（不是末尾），并滚动到新评论位置（scrollIntoView({block: 'start'})）
评分平均值显示要同步更新，且避免小数点后位数过多
后端返回的平均分可能是 4.666666666666667，直接显示 “4.6667 分” 不符合用户认知；更糟的是，JS 更新 DOM 后没同步更新 aria-label，导致读屏器仍读旧值。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 平均分统一用
Number(avg).toFixed(1)保留一位小数（4.7而非4.67），符合电商通用习惯 - 把平均分数字放进
<span aria-live="polite">容器中，JS 更新时只改这个 span 的textContent，读屏器会自动播报 - 别用
innerHTML拼接 HTML 字符串更新，容易 XSS；也不要用innerText，它会触发重排 - 如果页面有多个评分组件（如总评 + 各维度分），确保每个
<fieldset>的id唯一，并让<legend>引用对应 id（aria-labelledby）
div 模拟星星却没加 tabindex 和 role="radio"，或者提交失败后 textarea 失焦又没自动聚焦回错误字段。这些细节不处理，对普通用户可能只是“有点卡”，对视障用户就是完全不可用。 
