AI生成式探究学习教学辅助设计单-2.2个人相册制作.docx

AI生成式探究学习教学辅助设计单

使用AI名称：DeepSeek班级：学生姓名：

子任务名称

提示词

AI的回应

对AI回应的评价

我的收获

第二模块网站页面搭建（HTML）

2.1个人相册制作

设计一个静态的个人相册网页，页面只包含图片、文字、超链接即可，要求使用html相关标签及属性，不使用css样式，给出案例代码。

以下是一个静态个人相册网页的HTML代码示例，仅使用HTML标签和属性，不包含CSS样式：

!DOCTYPEhtml

htmllang=zh-CN

head

metacharset=UTF-8

metaname=viewportcontent=width=device-width,initial-scale=1.0

title个人相册/title

/head

body

header

h1我的个人相册/h1

p欢迎来到我的相册，这里记录了我的生活点滴。/p

/header

section

h2旅行照片/h2

p以下是我在旅行中拍摄的一些照片：/p

ul

li

ahref=photo1.jpgtarget=_blank

imgsrc=photo1.jpgalt=旅行照片1width=300

/a

p拍摄于2022年，地点：西藏。/p

/li

li

ahref=photo2.jpgtarget=_blank

imgsrc=photo2.jpgalt=旅行照片2width=300

/a

p拍摄于2021年，地点：云南。/p

/li

li

ahref=photo3.jpgtarget=_blank

imgsrc=photo3.jpgalt=旅行照片3width=300

/a

p拍摄于2020年，地点：青海。/p

/li

/ul

/section

section

h2生活照片/h2

p以下是我日常生活中的一些照片：/p

ul

li

ahref=photo4.jpgtarget=_blank

imgsrc=photo4.jpgalt=生活照片1width=300

/a

p拍摄于2023年，地点：家中。/p

/li

li

ahref=photo5.jpgtarget=_blank

imgsrc=photo5.jpgalt=生活照片2width=300

/a

p拍摄于2023年，地点：公园。/p

/li

li

ahref=photo6.jpgtarget=_blank

imgsrc=photo6.jpgalt=生活照片3width=300

/a

p拍摄于2023年，地点：咖啡馆。/p

/li

/ul

/section

footer

p更多照片请访问我的ahref=target=_blank个人主页/a。/p

p联系我：ahref=mailto:me@me@/a/p

/footer

/body

/html

代码说明：

结构清晰：

使用header、section、footer等语义化标签划分页面结构。

每个相册