资源简介 (共24张PPT)八年级信息技术网页的数据编码第九课学习目标1、了解网页编码的基本概念,知道文本、图像、音频、视频等数据是通过HTML标签编码组织在网页中的2、理解网页的数据请求与响应过程,知道浏览器与服务器之间的请求响应机制3、初步了解网页表单交互的基本原理和实现方式,能简单修改表单代码学习目标目录01.课前导入02.网页的编码03.网页的数据请求与响应04.网页中的交互01课前导入课前导入观察以下这个AI图片:课前导入思考:如果要以网页的形式调查同学们对AI的了解情况,这个网页需要哪些元素?对的,非常的棒:文字图片输入框按钮等02网页的编码“大家看到的这个丰富多彩的网页,在我们的眼中,看到的是图片、文字、内容等,那我们来思考下:它在计算机眼里到底是什么?”代码文本1. 网页的编码1).网页的编码网页的编码含义:网页本质上是一个文本文件,里面写满了特定的“符号”和“规则”,这就是编码。浏览器就像是一个翻译官,能读懂这些编码并把它们变成我们看到的漂亮页面。这些规则就是HTML(超文本标记语言)。它用一对对标签(如 和 )来给文本、图片等内容做“标记”,告诉浏览器“这里是一段文字”、“那里是一张图片”。常见标签展示:文本:这是标题, 这是一个段落。图片: (强调 src 属性指定图片路径,alt 属性提供替代文本)视频: (强调 controls 属性用于显示播放控件)表单: (这是一个文本框)1. 网页的编码【课堂活动】请将左侧的“网页元素”与右侧对应的“HTML标签”连接起来。网页元素:①大标题 ②段落 ③图片 ④输入框 ⑤视频HTML标签:a. b. c. d. e. 1.网页的编码文本、图像、音频、视频等数据是通过HTML标签编码组织在网页中再由浏览器解释并呈现。如文本的段落可以使用标签组织;图像可以使用标签实现将其插入文本中;多媒体的播放可以使用、等标签组织,并能设置播放方式。小结:03网页的数据请求与响应问题思考:“我们知道了网页是用代码写的,那这些代码是从哪里来的呢?它不像我们电脑上的Word文档,打开就有。”(2) 网页的数据请求与响应(2) 网页的数据请求与响应来源:浏览器(客户端)就像一个顾客,它想看看某个网页。存放网页的电脑叫服务器,它就像是餐厅的后厨。浏览器必须向服务器点餐(发送请求),说“我想要第9课的网页”。服务器接到订单后,赶紧做好菜(组织好网页的代码),然后端出来(发送响应) 给浏览器。浏览器收到这碗“代码面条”,才能开始“吃”(解释渲染)给我们看。因此,网页需要通过请求与响应以获取HTML数据,网页中如有多个媒体数据,则需要多次请求与响应,才能在网页上呈现。实操“多次请求”:打开浏览器的“开发者工具”(按F12),切换到“网络(Network)”面板。刷新网页,我们可以看到看到浏览器不仅请求了index.html文件,还随后发起了对ai.jpg、style.css、ai-intro.mp4等无数个请求。核心结论:“一个完整的网页,通常需要浏览器和服务器进行多次的‘请求-响应’对话才能完成。”(2) 网页的数据请求与响应(2) 网页的数据请求与响应【活动:添加视频标签】任务:在老师提供的示例网页代码中,找到指定位置(例如,在标签下方),添加播放视频的代码。提示:强调代码的准确性(拼写、空格)。强调路径的重要性:src="media/ai-video.mp4" 意思是视频文件放在media这个文件夹里,名叫ai-video.mp4。如果路径写错,视频就无法加载(就像走错了路找不到店)。保存文件后,刷新浏览器才能看到效果。04网页中的交互(3) 网页中的交互网页不仅从服务器获取信息,还可以向服务器反馈信息。网页表单是实现用户与网页之间信息交互的方式之一,通过在网页中添加表单可以实现问卷调查、用户登录、提交资料等交互功能。表单的标签是,用户根据网页表单的文字提示,可以在表单中输入相关信息,提交表单后,填写的信息便反馈给服务器。在标签中,可以设置表单的基本属性,包含表单的名称(name)、处理程序(action)、传送方法(method)、编码方式(enctype)等。一般情况下,表单的处理程序action和传送方法method是必不可少的参数。以设计“AI应用小调查”表单为例,如图1和图2所示(下一页ppt展示)。从看到用到交互:(3) 网页中的交互以设计“AI应用小调查”表单为例,如图1和图2所示。从看到用到交互:图1图2(3) 网页中的交互从看到用到交互:“刚才我们学的,是让浏览器‘看’信息。但如果网页只能看,那就和看电视没区别了。我们还需要能‘填’信息,比如登录、搜索、投票,这就是交互。”核心组件:实现交互最重要的组件就是表单()。它就像一个容器,里面装着各种输入框、按钮。解剖表单:在源代码中定位到标签,讲解其两个关键属性:action="submit.php":动作。规定当点击“提交”按钮后,数据被发送到哪里去处理。(“交给谁?”)method="post":方法。规定发送数据的方式。(“怎么送?”是包在信封里邮寄(post)还是写在明信片上(get)?)讲解表单内部的输入元素::文本框。name属性是数据的名字,服务器靠它来识别你提交的是什么。:提交按钮。用网页表单提交数据,所提交的数据需经编码转换发送。表单的请求响应过程是由用户提交表单开始,表单内容编码并格式化成相应的请求内容,通过HTTP协议发送给服务器。服务器接收到请求后作出响应,通过 HTTP协议把响应内容返回给浏览器,浏览器对服务器返回的数据进行解析,并在网页上呈现。网页中的交互小结:单击此处添加标题学习到了网页中的数据是如何通过HTML标签编码组织的掌握了如何通过表单实现简单的网页交互。010203浏览器和服务器之间的数据请求与响应过程课堂小结:课后作业:感谢同学们的观看!同学们辛苦啦! 展开更多...... 收起↑ 资源预览