语义化是关键：用section替代div定义评价区，ul/li结构列表，每条评价用article包裹，评分用span+aria-label，时间用time标签，按钮加type="button"和aria-controls，长评用details/summary折叠。
评价区域结构用 section 而不是 div
语义化是关键。用户和屏幕阅读器需要知道这是“评价内容区”，section 比 div 更准确，搜索引擎也更易识别。别图省事写成 <div class="reviews">，否则后续加 ARIA 或 SEO 优化会多绕两步。<p>实际写法示例：</p>
<pre class="brush:php;toolbar:false;"><section aria-label="用户评价"><h2>用户评价（127条）</h2>
<!-- 评价列表 -->
</section></pre>
<h3>
<code>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"，点一下可能意外触发表单提交，导致页面刷新或跳转。
正确写法只有这一种：
<button type="button" aria-controls="review-list">最新评价</button> <button type="button" aria-controls="review-list">高分优先</button>
同时记得加 aria-controls 关联到评价列表容器 ID，方便辅助技术理解操作目标。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
移动端折叠长评要用 details + summary
用户写的长评价直接展开会撑爆小屏，但全收起来又影响信息获取。用原生 details 最轻量，不用 JS 也能展开收起，还自带可访问性支持。
注意两个坑：
- 别把整个
li包进details—— 会破坏列表语义；只包评价正文部分 -
summary里别写“点击展开”，读屏软件会自动读作“展开/收起”，重复描述反而干扰 - 示例结构：
东西不错，就是包装有点简陋...
第二次买了，这次物流快了不少。不过外箱没有防震，收到时一角有点压痕。建议加层气泡膜。
真正难的是让设计师接受这种“朴素交互”，而不是坚持要自己手写 JS 实现带动画的折叠——原生控件在低端机上更稳，也少一个待修复的 bug 点。
