Web前端技术实验

实验05　响应式图片与图片链接

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

一、学习目标

  • 掌握img、figure、figcaption、a及alt、width、height、loading等属性。
  • 能区分信息图、装饰图和链接图的替代文本策略。
  • 能避免图片变形、布局抖动和无意义“点击图片”链接。

二、核心任务

  1. 制作商品图片展示区，至少包含主图、3张缩略图和一个图片链接。
  2. 为每张信息图编写准确alt，为装饰图使用空alt；为图片链接补充可理解名称。
  3. 使用max-width、aspect-ratio、object-fit等完成响应式显示，并声明合理尺寸。
  4. 使用浏览器网络面板观察图片加载，给非首屏图像设置lazy loading。

三、验收标准

序号可观察条件记录
1关闭图片显示后仍能理解页面信息和链接目的。□通过　□需修改
2图片不拉伸，容器变化时比例稳定。□通过　□需修改
3资源全部本地可用，不依赖临时外链。□通过　□需修改

四、提交物

  • 图片展示页面
  • 本地assets目录
  • alt策略说明
  • 实验报告

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

五、90分钟流程

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

六、评分量规（100分）

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

七、拓展与思考

选做：使用picture元素按屏幕宽度切换两种裁剪版本。

思考：什么情况下alt应为空，什么情况下必须描述内容？

八、AI辅助记录

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