第9课《网页的数据编码》-教学设计2026—2027学年浙教版初中信息科技八年级上册

《网页的数据编码》教学设计

浙教版（2023）信息科技　八年级上册　第二单元 互联网数据　第9课

一、文本解读

本课为第二单元互联网数据板块的第四课，承接网页数据组织与呈现，回答网页数据如何被机器识别、传输与反馈。教材以HTML标签、字符编码、请求响应、表单交互为线索，把抽象编码观念落到源码与提交动作上，为后续网页编辑与发布铺好认知路基。

二、核心素养

信息意识：能举例说明网页数据须经编码方可被机器处理。

计算思维：能把一次网页访问拆解为请求、应答与解析的链条。

数字化学习与创新：能查看源码与charset声明，改写表单参数。

信息社会责任：认同统一编码对交流的价值，自觉声明字符集。

三、教学重难点

重点：网页数据以HTML标签与字符编码组织的方式；浏览器与服务器之间请求、应答往复的运行过程及其先后关系。

难点：把字符、编码、标签、传输连成一条链，解释页面由空白到完整的呈现，并说清表单内容经编码转换后送达服务器并被读回的环节。

四、自学探究

课前打开班级网页，用开发者工具查看源码，找出标题、段落、图像标签各一处并记下属性；改换charset声明再刷新，观察中文显示变化；提交一次调查表单，在网络记录中查看提交内容，把自己发现的一处疑点写成一句提问，带着问题进入课堂。

五、任务式教学过程

以“为班级制作一份AI应用调查页”为总情境，串起读编码、追请求、试表单三个任务群，学生在源码、码表与网络记录中寻找证据，逐层建立数据编码观念，并在小结处把三段合成一条主线。

情境导入

并置展示两份班级网页，一份中文正常，一份显示为方框。提问：同一份代码为何在两台机器上呈现不同？打开源码，让学生看到满屏尖括号与英文，指出页面在机器眼中只是一段按规则写就的文本编码；再切到网络面板，展示一次访问引发的多条记录，提出本课三问：代码怎样组织数据、数据怎样往返、

观察两份页面差异，说出自己的猜测；在源码中圈出认识的标签；记录网络面板中出现的条目与名称。

并置展示，指向charset声明与保存格式两处差异，暂不下结论；板书三个问题作为全课线索。

能提出至少一种关于乱码成因的猜想，说出源码与页面的对应关系。

填写的内容怎样回到服务器。

图1　网页数据的编码、传输与交互示意

任务群一　读懂网页的编码

以还原文稿为路径，学生在源码中辨认标题、段落、图像、音视频标签，说清标签与页面元素的对应；再对照码表理解字符先取编号、编号再存为字节，解释字符集声明缺失为何导致中文异常，形成数据须编码的观念，为追踪传输打底。

任务一　源码寻宝

下发班级网页源码与页面截图，要求找出标题、段落、图像、音视频、超链接五类标签各一处，写出标签名与所在行；再追问图像标签里src与alt各自承担什么，音视频标签的controls起什么作用，把标签、属性与页面上的可见效果一一对上，形成“标签即说明书”的认识；再让各组派一人上台，把一个标签贴到页面截图的对应位置，其他组补充纠正。

两人一组对照源码与页面，用不同颜色标出五类标签；把src、alt、controls的含义写在任务单对应位置，组内互查一遍。

示范一处图像标签的定位，提示从尖括号读到属性值的路径；巡视中收集把属性写反的例子，当堂共同纠正。

能独立指出五类标签并说明三个常见属性的作用，标注位置准确。

任务二　字符的编号

给出英文字母码表片段与一段含中文的源码，让学生查出自己姓名首字母的编号，再思考汉字为何查不到；引入Unicode与UTF-8，说明字符先取唯一编号、编号再存为字节；随后打开head区块，找到charset声明，把GBK改为UTF-8并保存，刷新页面观察中文显示，归纳乱码的两条成因：声明与实际保存格式不符。最后请一名学生上

查表得到字母编号，尝试为汉字找编号并说明困难；修改charset后刷新，记录修改前后的显示差异；用一句话写出乱码成因。

提供码表卡片与在线转换页面，演示一次保存格式与声明不一致的对照，帮助学生把两条成因说清。

能说明字符到编号再到字节的转换，正确写出含charset的声明语句，并解释乱码来源。