语义化是关键：用section替代div定义评价区，ul/li结构列表，每条评价用article包裹，评分用span+aria-label，时间用time标签，按钮加type="button"和aria-controls，长评用details/summary折叠。
评价区域结构用 section 而不是 div
语义化是关键。用户和屏幕阅读器需要知道这是“评价内容区”，section 比 div 更准确，搜索引擎也更易识别。别图省事写成 <div class="reviews">，否则后续加 ARIA 或 SEO 优化会多绕两步。
实际写法示例：
<section aria-label="用户评价"> <h2>用户评价（127条）</h2> <!-- 评价列表 --> </section>
ul 套 li 是最稳妥的评价列表写法
别用 div 堆评价项——它没语义、没法键盘导航、CSS 重置成本高。每个评价是独立条目，天然符合无序列表语义。
- 每条评价用
li包裹，内部用article明确子内容边界 - 评分用
span+aria-label，例如<span aria-label="5星">★★★★★</span> - 避免用图片显示星星：加载失败就只剩空白，且无法被读屏软件识别
- 时间字段用
time标签，datetime属性写 ISO 格式，如<time datetime="2024-03-15">3天前</time>
评分交互按钮必须带 type="button"
如果页面里有“按评分筛选”或“排序”按钮，常见错误是写成 <button>好评优先</button>。在表单上下文中，这种按钮默认是 type="submit"，点一下可能意外触发表单提交，导致页面刷新或跳转。
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
正确写法只有这一种：
<button type="button" aria-controls="review-list">最新评价</button> <button type="button" aria-controls="review-list">高分优先</button>
同时记得加 aria-controls 关联到评价列表容器 ID，方便辅助技术理解操作目标。
移动端折叠长评要用 details + summary
用户写的长评价直接展开会撑爆小屏，但全收起来又影响信息获取。用原生 details 最轻量，不用 JS 也能展开收起，还自带可访问性支持。
注意两个坑：
- 别把整个
li包进details—— 会破坏列表语义；只包评价正文部分 -
summary里别写“点击展开”，读屏软件会自动读作“展开/收起”，重复描述反而干扰 - 示例结构：
<li>
<article>
<header><strong>张三</strong> • <time datetime="2024-03-10">2024-03-10</time></header>
<div class="rating"><span aria-label="4星">★★★★☆</span></div>
<details>
<summary>东西不错，就是包装有点简陋...</summary>
<p>第二次买了，这次物流快了不少。不过外箱没有防震，收到时一角有点压痕。建议加层气泡膜。</p>
</details>
</article>
</li>真正难的是让设计师接受这种“朴素交互”，而不是坚持要自己手写 JS 实现带动画的折叠——原生控件在低端机上更稳，也少一个待修复的 bug 点。
