一、设计理念与依据
本教学设计严格遵循《义务教育信息科技课程标准（2022年版）》的课程理念与目标，深度融合《中小学人工智能通识教育指南（2025年版）》与《中小学生成式人工智能使用指南（2025年版）》的核心精神。设计旨在超越传统网页代码教学的“操作-模仿”模式，将生成式人工智能作为赋能工具与探究对象，构建一个以核心素养发展为目标、以真实问题解决为主线、以人机协同探究为路径的创新课堂。课程聚焦于引导学生从“网页使用者”转变为“网页解构者”与“智能工具驾驭者”。学生不仅学习HTML基础代码，更将体验如何利用生成式人工智能辅助理解代码原理、生成代码片段、调试代码错误，并在此过程中培养对技术输出内容的批判性思维与甄别能力，完成一次从技术认知、工具实践到伦理思辨的完整数字化学习与创新旅程。二、教学背景与学情分析
课程定位：本课属于《义务教育信息科技课程标准（2022年版）》第四学段（7-9年级）“互联网应用与创新”模块的内容延伸，同时紧密关联“人工智能与智慧社会”模块的要求。它旨在深化学生对网络信息呈现方式背后原理的理解，并为利用智能工具进行创新性信息表达奠定基础。核心素养衔接：本课直接对标信息科技课程四大核心素养：信息意识（感知信息结构）、计算思维（抽象与分解网页元素）、数字化学习与创新（利用AI工具解决问题）、信息社会责任（认识技术双面性并规范使用）。学情分析：初中学生已具备基本的网络使用经验，对网页内容熟悉但对底层结构陌生。他们处于《中小学人工智能通识教育指南（2025年版）》所界定的“初中阶段”，应侧重理解技术逻辑、发展工程思维，并能够通过项目式学习解决实际问题。同时，根据《中小学生成式人工智能使用指南（2025年版）》，此阶段应指导学生适度探索生成内容的逻辑性分析，交叉验证其合理性，防范过度依赖。三、教学目标
（一）核心素养目标
信息意识：能感知网页是由结构化代码（HTML）构建的信息载体，理解代码是数字世界组织信息的基础语言之一。计算思维：能够将复杂的网页界面抽象、分解为标题、段落、图片、超链接等基本元素，并理解其对应的代码模型（标签）。数字化学习与创新：能主动选用生成式人工智能作为学习协作者与代码生成工具，辅助理解代码含义、生成简单代码片段，并合作完成一个创新性的“个人简介卡片”网页项目。信息社会责任：在利用AI生成代码的过程中，能认识到其可能存在的错误或局限性，养成交叉验证、审慎采纳的习惯；理解自主可控技术的重要性，初步形成规范、安全、有伦理地使用智能工具的意识。（二）具体学习目标
知识与技能：了解HTML的基本概念与作用；认识常见HTML标签（如, , ,）及其功能；能使用生成式人工智能工具辅助生成、解释简单HTML代码；能使用浏览器开发者工具初步查看网页源代码。过程与方法：经历“观察网页-抽象元素-询问AI-理解代码-实践验证-优化创新”的完整探究过程，体验人机协同解决问题的基本方法。情感态度与价值观：激发探索网络世界底层逻辑的兴趣；树立技术工具应为创意表达服务的观念；培养对智能生成内容不盲从、敢质疑、会验证的科学态度。四、教学重难点
教学重点：HTML基础标签的认知与理解；运用生成式人工智能作为“代码学习伙伴”进行探究的方法。教学难点：将可视化的网页元素与抽象的代码标签建立准确关联；辩证、批判地评估和利用AI生成的代码建议。五、教学准备
教师准备：多媒体课件；经过审核、符合教育数据安全规范的生成式人工智能工具“白名单”平台访问权限（如国内合规的教育大模型界面）；示例网页及源代码；在线代码编辑器链接。六、教学过程（时长：45分钟）
阶段一：创设情境，问题导入（5分钟）
情境展示：教师展示一个精美的“校园科技节”宣传网页，与学生日常浏览的网页建立联系。“这个网页上的文字、图片、按钮是如何被浏览器‘读懂’并展示出来的？”“如果我们想自己创建一个简单的个人网页，有没有更智能的方法来帮助我们，而不是从零开始记忆所有代码？”揭示课题：引出本课主题——《探秘网页与代码：当AI成为我们的编程伙伴》。明确本节课将使用一种新的伙伴——生成式人工智能，来共同揭开网页背后的代码秘密。阶段二：初探源码，感知结构（8分钟）
动手探查：指导学生右键点击示例网页，选择“查看页面源代码”或使用开发者工具（F12），直观感受HTML代码的文本形态。引导观察：引导学生关注代码中重复出现的尖括号（< >）及成对出现的标签。教师指出，这就是网页的“骨架”和“语法”。建立联系（计算思维启蒙）：教师演示如何将网页中的一个标题（视觉元素）与源代码中的标题文字（代码元素）对应起来。引导学生理解，这就是对视觉界面的一种“抽象”和“建模”。阶段三：人机协同，探究新知（15分钟）——核心环节
任务发布：各小组领取一个核心网页元素探究任务卡，如“探究如何用代码实现一个段落”、“探究如何插入一张图片并设置大小”、“探究如何创建一个可以点击的链接”。AI工具引入：教师演示如何向生成式人工智能工具提问。例如：“请用简单的语言向我解释HTML中标签是做什么的，并写一个示例。” “我想在网页中插入一张图片，图片文件名为‘photo.jpg’，请写出对应的HTML代码。”学生小组根据任务卡，合作设计向AI提问的语句，旨在获取相关标签的说明和代码示例。将AI生成的答案复制到在线代码编辑器中运行预览，验证其是否正确。关键思辨环节（落实《使用指南》精神）：教师引导提问：“AI生成的代码一次就完全正确吗？如果运行效果不对，我们该怎么办？” 鼓励学生尝试修改提问方式（如增加更多描述细节），或对AI生成的代码进行小幅调整，再次验证。此过程旨在培养学生对技术输出内容的交叉验证能力和不盲从的态度。成果梳理与分享：各小组分享探究成果（标签名称、功能、AI生成的示例代码及验证过程）。教师板书，共同梳理出至、、、等基本标签体系。阶段四：创新应用，项目实践（12分钟）
项目挑战：运用所学标签和AI工具的帮助，每个小组在在线代码编辑器中，合作创建一个包含标题、一段自我介绍、一张虚拟头像图片、一个链接到学校官网的“个性化学科之星”简介卡片。对于不确定的代码（如调整图片大小），主动寻求AI帮助生成代码片段。强调原创与辅助边界：提醒学生，AI是辅助工具，整体的创意、内容和结构应由小组决定，禁止直接复制AI生成的整体作品作为提交成果，杜绝“代劳式”使用。调试与优化：在编写和预览过程中，鼓励学生利用AI进行“代码调试”。例如，将出错的代码或未达到预期效果的代码段提问给AI：“为什么我的图片没有显示？以下是我的代码：...”。作品展示与互评：各组展示最终网页卡片，并简要介绍在创作过程中AI提供了哪些关键帮助，以及小组是如何思考和验证的。阶段五：总结升华，伦理思辨（5分钟）
技术总结：师生共同总结HTML的基础作用以及“提问-AI生成-验证调试”的人机协同代码学习流程。引导学生讨论：“既然AI能生成代码，未来我们还需要学习编程吗？” 结合探究体验，让学生理解AI是强大的“工具”和“协作者”，但人类的创意、问题定义能力、以及对结果的批判性审查是不可替代的。简要强调在使用AI工具时，不应输入个人真实姓名、学校、身份证号等敏感信息，树立数据安全意识。点明理解代码原理、掌握与AI协作的能力，是适应智能社会、成为数字化创新者的重要素养，呼应《教育强国建设规划纲要》中“促进人工智能助力教育变革”的战略要求。拓展延伸：鼓励感兴趣的学生课后尝试用AI探索更多HTML标签或简单CSS样式，让个人卡片更加美观。七、教学评价设计
过程性评价：观察学生在小组探究中利用AI提问的质量、验证AI生成结果的严谨性、以及合作解决问题的参与度。作品评价：依据“个性化学科之星”卡片作品的完整性、代码的正确性以及创意性进行评价。素养评价：通过课堂讨论和反思环节，评估学生是否初步形成对智能工具“会用、善用但不滥用”的辩证认识。八、教学反思与特色
本设计最大的特色在于将生成式人工智能从“被学习的对象”转化为“贯穿始终的学习工具与思辨载体”，完美契合了《义务教育信息科技课程标准（2022年版）》倡导的“做中学”“用中学”“创中学”的理念，并具体落实了《中小学人工智能通识教育指南（2025年版）》中初中阶段“强化实际问题解决”和“发展工程思维”的要求，同时将《中小学生成式人工智能使用指南（2025年版）》中“防范过度依赖”、“培养甄别能力”的防范机制有机融入教学全过程。课堂不仅是代码知识的传授，更是一场关于人机关系、技术伦理与创新思维的生动启蒙。如果您还有疑问，就请点击下方卡片，让「爱拼之家教学小助手」为您实时答疑：支持24小时在线问答哦，并提供个性化建议 ⬇️
