Web前端技术实验

实验02　语义化呈现买家评论信息

课程代码 ZY070018｜适用：2024级、2025级｜第2次
2026—2027学年第一学期
字段内容字段内容
大纲锚点实验项目二：实现网页中的买家评论信息学时拆分完整项目（2学时）
项目属性基础验证型 / 必做 / 1人一组课程目标LO1、LO2
本次实验按任务书完成并现场验收；单次成绩按100分记录，课程总评按本年级教学大纲执行。

一、学习目标

  • 掌握标题、段落、强调、列表、引用和时间等常用语义元素。
  • 能根据内容层级选择标签，而不是只为视觉效果选择标签。
  • 用CSS建立可读的评论卡片，并保留键盘和小屏幕可读性。

二、核心任务

  1. 根据给定评论数据设计一个商品评论区，至少包含商品信息、评分摘要和3条评论。
  2. 每条评论使用 article 组织，作者、日期、正文和标签均有独立语义。
  3. 使用有序或无序列表呈现优点与待改进点，使用 blockquote 或 q 表示引用。
  4. 用CSS完成层级、间距和状态标识，并在375px宽度下检查换行。

三、验收标准

序号可观察条件记录
1页面信息层级清楚，不使用 font、center、align 等过时写法。□通过　□需修改
23条评论的数据结构一致，日期使用 time 元素。□通过　□需修改
3缩窄窗口后无横向滚动，文字对比度和字号可读。□通过　□需修改

四、提交物

  • 评论页面源码
  • 桌面与移动宽度截图各1张
  • 标签选择说明
  • 实验报告

统一命名：学号_姓名_实验02

五、90分钟流程

时间活动
0—10说明与安全检查
10—25预测、演示、最小验证
25—65独立完成核心任务
65—80测试与同伴复核
80—90抽查与退出记录

六、评分量规（100分）

维度分值判定要点
功能与任务完成45必做功能可运行，数据和交互正确
测试与问题修复20有边界或错误测试，并保留复测记录
代码与页面质量15结构、命名规范，控制台无未解释错误
报告与证据15报告、截图与源码相互对应
现场解释5能解释关键实现和至少一项修改

七、拓展与思考

选做：增加“只看有图评价”筛选控件的静态界面。

思考：语义化标签对维护、无障碍和搜索理解分别有什么价值？

八、AI辅助记录

如使用AI，记录问题、采用或拒绝的建议、本人修改及验证方法；未使用则注明“未使用”。