AI生成式探究学习教学辅助设计单-2.4个人主页制作.docx

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

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

子任务名称

提示词

AI的回应

对AI回应的评价

我的收获

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

2.4个人主页制作

设计一个静态的html个人主页，页面包含文字、图片，要求使用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

listrong姓名：/strong张三/li

listrong职业：/strong前端开发工程师/li

listrong地点：/strong北京/li

listrong邮箱：/strongzhangsan@/li

/ul

/section

section

h2我的照片/h2

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

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

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

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

/section

section

h2我的项目/h2

p以下是我参与的一些项目：/p

ul

liahref=/project1target=_blank项目1：公司官网改版/a/li

liahref=/project2target=_blank项目2：在线教育平台/a/li

liahref=/project3target=_blank项目3：个人博客系统/a/li

/ul

/section

footer

p感谢访问我的个人主页！更多信息请访问我的ahref=target=_blank个人博客/a。/p

/footer

/body

/html

代码说明：

结构清晰：

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

每个模块（如“关于我”、“我的照片”、“我的项目”）通过section标签独立展示。

文字内容：

使用h1、h2、p、ul、li等标签展示标题、段落和列表内容。

在“关于我”模块中，使用无序列表展示个人信息。

图片展示：

使用img标签插入图片，并通过width属性控制图片宽度。

图片的alt属性提供了替代文本，便于图片无法显示时提供描述。

超链接：

在“我的项目”模块中，使用a标签创建超链接，指向项目详情页。

在页脚部分添加了一个超链接，指向个人博客。

无CSS样式：

完全依赖HTML标签的默认样式，页面简洁但功能完整。

使用方法：

将上述代码保存为一个.html文件（如index.html）。

准备图片文件（如photo1.jpg、photo2.jpg等），并确保图片文件与HTML文件在同一目录下。

用浏览器打开HTML文件即可查看效果。

示例效果：

页面顶部显示标题和简介。

关于我：展示个人信息。

我的照片：展示多张生活照片。

我的项目：列出参与的项目，并提供超链接。

页脚提供个人博客的超链接。

扩展建议：

如果需要进一步优化，可以：

引入CSS样式，美化页面布局和图片展示效果。

使用JavaScript实现动态加载或交互功能（如图片轮播、折叠内容）。

添加更多模块（如“我的技能”、“联系方式”等）。

总结

这段代码是一个简单的静态个人主页示例，适合初学者学习和快速实现基本的个人展示需求。它结构清晰、功能