浙教版（2023）八年级上信息科技 第九课：网页的数据编码 课件.pptxVIP

八年级信息技术网页的数据编码第九课

学习目标1、了解网页编码的基本概念，知道文本、图像、音频、视频等数据是通过HTML标签编码组织在网页中的2、理解网页的数据请求与响应过程，知道浏览器与服务器之间的请求响应机制3、初步了解网页表单交互的基本原理和实现方式，能简单修改表单代码学习目标

目录01.课前导入02.网页的编码03.网页的数据请求与响应04.网页中的交互

01课前导入

课前导入 观察以下这个AI图片：

课前导入 思考：如果要以网页的形式调查同学们对AI的了解情况，这个网页需要哪些元素？对的，非常的棒：文字图片输入框按钮等

02网页的编码

“大家看到的这个丰富多彩的网页，在我们的眼中，看到的是图片、文字、内容等，那我们来思考下：它在计算机眼里到底是什么？”代码文本1.网页的编码

1).网页的编码网页的编码含义：网页本质上是一个文本文件，里面写满了特定的“符号”和“规则”，这就是编码。浏览器就像是一个翻译官，能读懂这些编码并把它们变成我们看到的漂亮页面。这些规则就是HTML（超文本标记语言）。它用一对对标签（如p和/p）来给文本、图片等内容做“标记”，告诉浏览器“这里是一段文字”、“那里是一张图片”。常见标签展示：文本：h1这是标题/h1，p这是一个段落。/p图片：imgsrc=images/ai.jpgalt=AI图片（强调src属性指定图片路径，alt属性提供替代文本）视频：videosrc=videos/ai-intro.mp4controls/video（强调controls属性用于显示播放控件）表单：inputtype=text（这是一个文本框）

1.网页的编码【课堂活动】请将左侧的“网页元素”与右侧对应的“HTML标签”连接起来。网页元素：①大标题②段落③图片④输入框⑤视频HTML标签：a.pb.inputc.h1d.imge.video

1.网页的编码文本、图像、音频、视频等数据是通过HTML标签编码组织在网页中再由浏览器解释并呈现。如文本的段落可以使用标签p组织;图像可以使用标签img/实现将其插入文本中;多媒体的播放可以使用audio、video等标签组织，并能设置播放方式。小结：

03网页的数据请求与响应

问题思考：“我们知道了网页是用代码写的，那这些代码是从哪里来的呢？它不像我们电脑上的Word文档，打开就有。”(2)网页的数据请求与响应

(2)网页的数据请求与响应来源：浏览器（客户端）就像一个顾客，它想看看某个网页。存放网页的电脑叫服务器，它就像是餐厅的后厨。浏览器必须向服务器点餐（发送请求），说“我想要第9课的网页”。服务器接到订单后，赶紧做好菜（组织好网页的代码），然后端出来（发送响应）给浏览器。浏览器收到这碗“代码面条”，才能开始“吃”（解释渲染）给我们看。因此，网页需要通过请求与响应以获取HTML数据，网页中如有多个媒体数据，则需要多次请求与响应，才能在网页上呈现。

实操“多次请求”：打开浏览器的“开发者工具”（按F12），切换到“网络(Network)”面板。刷新网页，我们可以看到看到浏览器不仅请求了index.html文件，还随后发起了对ai.jpg、style.css、ai-intro.mp4等无数个请求。核心结论：“一个完整的网页，通常需要浏览器和服务器进行多次的‘请求-响应’对话才能完成。”(2)网页的数据请求与响应

(2)网页的数据请求与响应【活动：添加视频标签】任务：在老师提供的示例网页代码中，找到指定位置（例如，在img标签下方），添加播放视频的代码。提示：强调代码的准确性（拼写、空格）。强调路径的重要性：src=media/ai-video.mp4意思是视频文件放在media这个文件夹里，名叫ai-video.mp4。如果路径写错，视频就无法加载（就像走错了路找不到店）。保存文件后，刷新浏览器才能看到效果。

04网页中的交互

(3)网页中的交互网页不仅从服务器获取信息，还可以向服务器反馈信息。网页表单是实现用户与网页之间信息交互的方式之一，通过在网页中添加表单可以实现问卷调查、用户登录、提交资料等交互功能。表单的标签是form/form，用户根据网页表单的文字提示，可以在表单中输入相关信息，提交表单后，填写的信息便反馈给服务器。在form标签中，可以设置表单的基本属性，包含表单的名称(name)、处理程序(action)、传送方法(method)、编码方式(enctype)等。一般情况下，表单的处理程序action和传送方法method是必不可少的参数。以设计“AI应用小调查”表单为例，如图1和图2所示（下一页ppt展示）。从看到用到交互：

(3)网