用HTML和AI
为班级网站“安家”
探秘网页与代码
如何让初一学生在一节课内既读懂HTML代码、又学会用AI辅助创作？本课例以“讲好深圳故事，展示班级风采”为项目背景，通过“标签破译—图像诊断—代码共创”三个探究活动，带领学生完成从“看懂代码”到“修改代码”再到“AI生成代码”的能力进阶。
关键词：HTML、标签、网页制作、AI辅助创作
基本信息
学科：信息科技
年级：七年级
课时：1课时（40分钟）
授课类型：新授课
课例背景与设计思路
本课围绕“网页是万维网最重要的信息载体”展开，既是上一单元万维网内容的延伸，也是后续美化编辑网页、发布网站的重要铺垫。学生在第16课认识标签的过程中会直接接触HTML代码，因此设计者将教材内容重构，将第17课“写代码做网页”的操作实践前置融合，帮助学生理解代码与网页之间的关联，提高课堂效率。
学情与挑战
学生已了解互联网基础知识和万维网的“请求—响应”模式，也熟悉主流AI大模型工具（如豆包、元宝、千问等），人智协同意愿较高。
教学面临两大现实问题：
①键盘生疏：打字速度慢，不适应输入长文本或英文代码；
②提示词鸿沟：描述模糊、需求碎片化、不懂结构化表达、不会迭代提问。
教学目标
知识与技能：了解网页与HTML代码的对应关系；掌握常用标签及其作用，能用“记事本”制作简单网页；体验AI生成网页代码。
过程与方法：通过“猜测—验证”自主探究标签功能；通过对比图片引用方式理解数据呈现原理；通过结构化、多轮对话体验“人机协同”学习。
情感态度与价值观：在“讲好深圳故事，展示班级风采”项目中增强集体荣誉感；经历“看懂—修改—生成”的进阶过程培养计算思维；认识AI技术潜力并主动弥合“提示词鸿沟”。
教学重难点
1.教学重点：
①理解网页与HTML代码的对应关系。
②了解常用标签及其作用。
③体验AI生成代码的过程。
2.教学难点：理解<img>标签src属性指向文件路径或base64编码的两种方式；克服“提示词鸿沟”，能清晰、结构化地向AI表达需求。
教学过程
01
环节一：情境导入，揭示课题
教师以“数据已到达‘家门口’，浏览器这位‘管家’如何把它变成图文并茂的网页”设问，引出HTML语言。
02
环节二：直观演示，建立关联
教师打开深圳文明网已发布的网页，按下F12调出“开发者工具”，鼠标悬停在代码行，网页对应区域自动高亮，引导学生观察网页内容与代码的对应关系。
图注：教师使用开发者工具，左侧为网页界面，右侧为对应HTML代码，悬停时高亮联动
教师说明：网页精美的外表背后，是一行行我们人类和浏览器都能‘看懂’的特殊语言，这个语言就是HTML（超文本标记语言），其本质就是一段段文本。它们不是单一、线性的文字，而是可以互相链接、包含多媒体、网状关联的文本。我们了解了何谓“超文本”以及语言的性质。那“标记”又是什么呢？带着这个问题，我们就来探秘网页与代码的关系，开始探究活动。
03
环节三：探究活动1——标签破译，解码网页标记语言
教师讲解用于标记内容、格式或超链接的代码符号叫标签。
学生用“记事本”打开这个文件，找到老师框出的区域，尝试使用提供的素材修改、删除或添加区域中的内容，然后保存文件，并用浏览器重新打开，像侦探一样观察并记录每个标签的“样子”和“作用”。具体是用“记事本”打开 test_1.html，完成五项修改任务：
1.将①中的内容改为“七X班的网站——首页”。
2.将②中的内容改为“班级快讯”。
3.将③中的内容换成002.png。
4.将④中的URL内容换成http://gdsz.wenming.cn/，将⑤中的内容换成“深圳文明网”。
5.增加图像说明。在⑥处增加一行文字“书籍是了解世界的窗口。”
学生通过“猜测—验证”探究标签功能，教师引导关注书写格式（尖括号、闭合标签斜杠）。
图注：修改前的 test_1.html与网页显示效果
图注：修改后的 test_1.html与网页显示效果，标题、图片、链接均已更新
师生小结——“标签家族”
04
环节四：探究活动2——图像诊断，解析网页图像原理
教师打开test_2.html，发现图片无法显示，引导学生排错。
图注：图片无法正常显示时的网页效果，出现“破图”图标
方式一（文件路径）：将 001.png 拷贝到网页所在文件夹，src='001.png' 直接指向文件，刷新即显示。
提示：<img src='001.png'>
方式二（Base64编码）：删除图片文件，打开“图像编码转换工具.html”，上传 001.png 转为Base64字符串，复制替换 src 内容，刷新后图片恢复正常。
提示：<img src='data:image/png;base64……uQmCC'>
图注：图像编码转换工具界面，学生一键复制Base64编码文本
教师讲解：图片可以是文件，也可以是一段描述自身的字符串。方法二将图像数据保存在字符串中，不再需要图像文件本身，浏览器读懂数据就能呈现画面。
05
环节五：探究活动3——代码共创，AI辅助生成网页
教师先演示“低效提问”：“帮我做个网页”——AI生成的代码复杂且不符合需求。
展示“好提示词”所具备的要素： 角色、任务、细节、要求等，并提供结构化提示词模板：
【角色】你是一个HTML代码专家。
【任务】请帮我用HTML语言制作一个介绍“班级读书角”的简单网页。
【细节】网页标题：[班级读书角]；一级标题：[推荐书目]；插入一张书本封面图片；正文展示[推荐理由]；链接相关书评网站。
【要求】只使用 <h1>、<p>、<img> 等学过的简单标签。
学生向AI提问、预览代码，并可以从以下表格中选择迭代方向，进行多轮优化。
06
环节六：课堂总结与拓展
1.知识回顾：HTML是网页的“幕后英雄”；标签是具有标记作用的特殊代码符号、不同的标签有不同的作用；简单文本编辑工具可以直接修改网页代码；AI能快速生成代码，但需要我们会如何“提问”。
2.德育升华：以“2026年APEC‘中国年’，向世界讲好深圳故事”为引领，从讲好班级故事开始。
3.分层作业：
①基础：完善AI网页，至少包含一张图片、一个标题、一段文字介绍。
②拓展：向AI提问“如何让图像保持大小一致”或者让AI解读你感兴趣的网页代码。
END
研究，让教学更有深度；
分享，让孤单的行走变为温暖的共舞；
成长，是作为教师，我们能给予学生最好的礼物。
纪丹名师工作室
共研 | 共享 | 共成长
期待与你，携手同行，共赴教育的星辰大海。
点击以下名片关注公众号，期待您的关注与支持！
课例：谢颖琛
编辑：张梦姣
审核：纪丹工作室全体成员
