第16课 探秘网页与代码 学习任务单 2025-2026学年人教版初中信息科技七年级全一册

该初中信息科技学习任务单聚焦网页与HTML代码的对应关系及常用标签作用，以观察网页现象为起点，通过实践探究（查看代码对应、修改代码、图像显示方法）、模拟浏览器处理代码到课后思考，构建感知-实践-反思的学习支架，帮助学生初步认识HTML语言及浏览器工作原理。 任务单特色在于多维度实践活动培养数字化学习与创新能力，模拟浏览器处理代码环节渗透计算思维，课后思考提升信息意识。习题设计注重动手操作与问题解决，体现“做中学”学科特色，让学生在修改代码、对比图像显示方法中直观理解代码与网页的关联。

学习任务单 课程基本信息 学科 信息科技 年级 七年级 学期 春季 课题 探秘网页与代码 教科书 无 学习目标 1. 了解网页与代码之间的对应关系，初步认识 HTML 语言。 2. 知道常用标签的作用，以及浏览器会根据网页代码要求显示网页。 课前学习任务 无 课上学习任务 【浏览科技节相关网页，观察网页信息】 使用浏览器、《记事本》软件两种工具打开“科技节”文件夹中的网页文件，观察并记录：网页是通过许多 来描述的。 【实践探究1：查看网页与HTML代码的对应关系】 用浏览器打开并浏览“3D打印.html”网页，调出浏览器的“开发人员”工具，观察页面代码。移动光标至页面代码的不同位置，观察网页中高亮显示部分的变化。 记录： （1）HTML语言中用于标记内容、格式等的代码符号大部分是 出现的，也有的是 出现的。（从“成对”、“单个”中选词填入） （2）完成代码符号与作用之间的连线。 设置网页标题 <head></head> 设置文档主体 <title></title> 设置内容的一级标题 <body></body> 设置新的一行 <h1></h1> 设置图像 <p></p> 设置文档头部 <img src=’’***/***.jpg''> 【实践探究2：根据要求修改网页代码并观察网页效果】 用《记事本》软件打开“3D打印.html”网页文件，尝试修改网页中的代码并保存，然后用浏览器打开修改后的网页文件，观察网页效果。 修改要求 修改记录 （1）修改网页标题为“校园科技节体验项目” （2）在图片的下面增加图像说明“3D打印示意图” 【实践探究3：用不同方法在网页中显示笑脸图】 （1）方法一：修改“显示笑脸图.html”网页，让它显示计算机中的图像文件 001.png。浏览网页，观察显示效果。 提示：<img src='***/001.png'> （2）方法二：运行《图像编码转换器》软件，选择图像文件001.png 后进行编码转换，然后用运行结果替换“显示笑脸图.html”网页中的 <img> 标签。确保网页所在文件夹中没有图像文件 001.png 后，浏览网页，观察显示效果。 提示：<img src="data: image/jpeg;base64,iVBORw0KG…… alt="Image" /> 显示方法 任务记录 使用文件路径 □需要图像文件   □不需要图像文件 使用图像数据编码 □需要图像文件   □不需要图像文件 【游戏：模拟浏览器处理HTML代码的部分过程】 用不同符号圈出其中的标签及内容。 …… <body> <p>热爱</p> <p>祖国</p> </body> …… 【课后思考】 （1）HTML代码是不是必须保存在网页文件中？ （2）网页中包含的图像、音频、视频等必须保存在网页所在的那个网站中吗？ 推荐的学习资源 1.义务教育信息科技教学指南（探秘网页与代码） 2.《图像编码转换器》、《Web 服务器》软件工具 学科网（北京）股份有限公司 $