初中部 晋江市伟冠双语实验学校 2025年12月30日 09:03 福建
“老师，抖音的视频在代码里长什么样？”“删除<img>标签的src属性，图片真的会消失吗？”近日，我校七年级信息科技公开课《探秘网页与代码》精彩开讲！初中部信息科技蔡绍楚老师以“校园活动线上展”为核心场景，将AI工具与实操实验深度结合，带领学生揭开网页背后的代码奥秘，
让抽象的编程知识变得可触可感，全程干货满满～
“每天刷的百度、B站、微博，这些网页到底是怎么‘造’出来的？”课堂一开始，教师就抛出学生熟悉的生活话题，瞬间点燃全场热情。同学们讨论自己常逛的网站，从学习工具到娱乐平台，热烈讨论着“网页的构成”。当教师追问“这些酷炫网页背后藏着什么秘密”时，有同学大胆猜测“是代码”，也有同学满脸好奇“我们能自己写代码做网页吗？”
带着这份好奇心，教师顺势引出课题：“今天我们就来解锁代码的魔力——不仅能看懂网页背后的‘语言’，还能亲手修改网页、创作属于自己的小页面！”简单的互动，既衔接了学生的生活经验，又精准锚定课程目标，让学习动机自然生发。
02.课堂高潮：
AI+实操，让代码“看得见、摸得着”
在“显示网页的过程”教学中，AI工具成为“得力助手”：教师引导学生用记事本打开网页文件，修改标签内容，刷新后看到浏览器标题瞬间变化；借助AI生成“飞驰火车”图片，替换原网页中的图片代码，对比两种图片呈现效果；更有趣的是，通过AI编程软件制作的《图像编码转换器》，将图片转为Base64编码，替换src属性后，即便没有本地图片文件，网页依然能正常显示图片！“原来图片还能变成一串代码！”学生们直呼神奇，在实操中悄悄掌握了“浏览器解析代码”的核心逻辑。
03.巩固提升：
自主探究，验证 “跨站引用” 的奥秘
“网页里的图片、音频，必须和网页文件存在同一个网站吗？” 课堂尾声的探究题，再次点燃学生的好奇心。在教师的引导下，同学们尝试将<img>标签的 src 属性改为外站图片链接，刷新网页后发现图片依然能正常显示！“原来资源可以跨站引用！” 但也有同学发现，个别外站图片无法显示，教师顺势补充：“跨站引用要注意链接稳定性，还要尊重他人知识产权哦～” 既深化了知识，又渗透了信息社会责任教育。
这堂公开课，是我校践行“核心素养导向”信息科技教学的生动缩影。立足七年级学生的认知特点，采用“讲授+演示+实践”的多元教学方法，既兼顾了信息技术水平不同的学生，又通过AI工具降低了抽象知识的理解门槛，让“计算思维”“数字化学习与创新”等核心素养在实操中落地生根。
- E N D -
图片｜初中综合组
编辑｜蔡绍楚
一审｜王 俭
二审｜柯芳芸
三审｜强晟斌
闽公网安备35058202001598号
