用语义化HTML结构（article/header/section/footer）实现评价列表，星级用带aria-label的ul/li支持半星可访问性，上传预览用createObjectURL，展开收起需JS测高并管理键盘焦点与内存释放。
怎么用 HTML + CSS 实现基础评价列表结构
纯静态评价页的核心是语义化结构，不是堆 div。用 <article></article> 包每条评价，<header></header> 放用户信息和评分，<section></section> 放文字内容，<footer></footer> 放时间/操作按钮——这样既利于 SEO，也方便后续加 JS 交互。
常见错误是把星级全用图片或 span 拼，结果无法被屏幕阅读器识别。正确做法是用 <ul class="rating"></ul> + <li>，配合 aria-label="4.5 星，共 5 星"。
示例片段：
<article>
<header>
<h3>张三</h3>
<ul class="rating" aria-label="4.5 星，共 5 星">
<li><span aria-hidden="true">★</span></li>
<li><span aria-hidden="true">★</span></li>
<li><span aria-hidden="true">★</span></li>
<li><span aria-hidden="true">★</span></li>
<li><span aria-hidden="true">☆</span></li>
</ul>
</header>
<section>物流很快，包装完好，颜色和图片一致。</section>
<footer>2024-03-12</footer>
</article>
怎么让星级支持半星且可读可操作
纯 CSS 实现半星的关键是两层覆盖：底层用完整五星（灰色），上层用 clip-path 或 width 截取对应比例的黄色部分。但要注意 Safari 对 clip-path 的兼容性差，更稳妥的是用两个 <span></span> 叠加，一个显示整星，一个用 overflow: hidden 控制宽度。
立即学习“前端免费学习笔记（深入）”；
如果评价页要支持用户打分（比如晒单后评分），必须用 <input type="radio"> 而非 div 模拟，否则无法提交、无障碍失效、移动端点选不灵敏。
- 半星值如 4.5，对应上层宽度为 90%（5 星 × 2 = 10 半星单位）
- 每个
input必须有唯一id和配套label[for] - 禁用
pointer-events: none在评分容器上，否则 iOS Safari 会忽略点击
图片上传预览与“晒单图”布局怎么做才不卡顿
用户上传晒单图时，不要等表单提交后再渲染缩略图。用 URL.createObjectURL(file) 立即生成本地预览地址，绑定到 <img src alt="HTML怎么做评价页面_HTML商品评价晒单页面实现【推荐】" > 即可。注意每次选新图前调用 URL.revokeObjectURL()，否则内存泄漏。
晒单图网格建议用 CSS Grid 而非 float 或 inline-block：响应式更稳，图片宽高不一致时不会错行。设 grid-template-columns: repeat(auto-fill, minmax(80px, 1fr))，再给 <img alt="HTML怎么做评价页面_HTML商品评价晒单页面实现【推荐】" > 加 object-fit: cover 和固定宽高比。
容易踩的坑：
- 直接把
file.files[0]赋给img.src—— 这不行，必须过createObjectURL - 用
img.onload做尺寸校验，但没处理加载失败（如损坏文件），导致预览空白无提示 - Grid 容器未设
gap，小图挤在一起，移动端点选困难
为什么评价页的“展开全部”不能只靠 CSS height + overflow
用 max-height 配合 transition 做展开收起，看似简单，但实际会出问题：文字行数不确定时，max-height 设 100px 可能截断，设 1000px 又导致动画慢且不精准。真正可靠的方案是用 JS 测量真实高度，再设内联 style="height: XXpx"。
更关键的是，这个交互必须支持键盘操作：Enter 或 Space 触发展开，且焦点要落到展开后的内容末尾（用 element.focus()），否则视障用户无法感知变化。
补充要点：
- 初始状态用
aria-expanded="false"，切换时同步更新 - 避免在
transitionend里重置 height 为 auto —— Safari 有竞态 bug，应改用requestAnimationFrame延迟一帧 - 服务端返回的评价文本若含 XSS 风险字符（如
<script></script>），必须在前端渲染前做 HTML 转义，不能只靠textContent—— 因为图片链接、用户名等字段可能需保留有限 HTML
