资源简介

(共16张PPT)
第二单元 互联网数据
第9课
网页的数据编码
教学目标
通过了解网页的数据编码，理解网页的数据请求与响应过程。
通过体验网页表单，了解网页表单数据交互的过程。
导入
你知道网页是如何实现交互的吗 你知道网页数据有哪些编码方式
网页的编码
PART 01
什么是网页编码？
网页编码的作用：网页编码可以将计算机上存储的文本信息转换成用特定符号或者图标表示的视觉信息，方便人们阅读和传输
网页编码类型：网页编码主要包括ASCII、GB2312、GBK、UTF-8等类型
常用的网页编码举例
多媒体的播放可以使用

组织；
图像可以使 用标签实现将其插入文本中；
网页的数据请求与响应
PART 02
什么是网页的数据请求与响应？
01
网页数据请求：客户端向服务器发送请求，要求获取或更新数据。
05
服务器对客户端的请求做出响应，返回相应的数据。：通常包括HTTP状态码、响应头和响应体等部分。
03
常见方式包括GET、POST、PUT、DELETE等。：网页数据响应
02
数据请求与响应的交互过程：客户端发起请求，服务器接收请求并处理，然后返回响应。
04
请求与响应是构成HTTP协议的基本要素。：数据请求与响应的作用
实现网页与服务器之间的数据交互和动态更新。：支持网页提供实时、动态、交互的数据服务。
06
网页的数据请求与响应的方式
活动一：使用标签添加图片文件，再尝试使用其他标签。
网页中的交互
PART 03
什么是网页中的交互？
网页中的交互是指用户与网页之间的互动行为，用户可以通过鼠标、键盘或触摸等输入设备与网页进行交互，而网页则会根据用户的操作做出相应的反馈或执行相应的动作。
网页中的交互的形式
点击链接
表单交互
按钮操作
鼠标悬停
下拉菜单
滚动交互
轮播图
弹出框和模态框
列表排序与过滤
拖放交互
在HTML中，使用标签创建表单元素，它会包裹表单中的各个字段和提交按钮。
创建表单的基本步骤
常见的表单字段包括：
：文本输入框，用于接收用户输入的文本。
：密码输入框，用于接收用户输入的密码，显示为密文。
：复选框，允许用户选择一个或多个选项。
：单选按钮，允许用户从一组选项中选择一个。
和：下拉菜单，允许用户从预定义的选项中选择一个。
：多行文本输入框，用于接收用户输入的多行文本7、轮播图。<br/>课堂活动<br/>制作一张调查家庭使用人工智能设备的网页。<br/>课堂总结<br/>网页的编码<br/>网页数据的请求与响应<br/>网页中的交互</p> <p class="introAll">展开更多......</p> <p class="introAllHide">收起↑ </p> </div> </form> <div class="entry-content clearfix"> <p class="asset-tit"> <img src="/images/asset.png" style="width: 20px;height: 20px;vertical-align: text-bottom;margin-right: 5px;">资源预览 </p> <div class="asset-preview"> <img src="https://preview.21cnjy.com/files/2023/12/a1/a1243d22cc7a1087d9b075a29ee195a1.png" style="max-width:800px;"> <img src="https://preview.21cnjy.com/files/2023/12/af/af202afbeddaf3442de1d08bf6893bc1.png" style="max-width:800px;"> <img src="https://preview.21cnjy.com/files/2023/12/43/43e1e27fcdf32ff57676652c0598a8b0.png" style="max-width:800px;"> <img src="https://preview.21cnjy.com/files/2023/12/7d/7d8d34732f79cbbb60ed50325523185f.png" style="max-width:800px;"> <img src="https://preview.21cnjy.com/files/2023/12/8b/8b1469ad56e221b6f57d55df027f25a0.png" style="max-width:800px;"> <img src="https://preview.21cnjy.com/files/2023/12/3f/3fc8b16fe6f78790464095546e75d902.png" style="max-width:800px;"> <img src="https://preview.21cnjy.com/files/2023/12/fc/fc843ee7ecd59547c3a3a977f61abc40.png" style="max-width:800px;"> </div> </div> <div class="entry-footer"> <div class="entry-bar"> <div class="entry-bar-inner clearfix text-center"> </div> </div> <div class="entry-copyright"> <p>缩略图、资源来源于二一教育资源库</p> </div> </div> </div> </article> </div> <aside class="sidebar"> <div class="widget widget_views"> <h3 class="widget-title">相关资源</h3> <ul> <li><a href="https://doc.21cnjy.com/p-21289940.html" title="【核心素养目标】第9课《网页的数据编码》课件+教案+素材-【浙教版2023】《信息科技》八上">【核心素养目标】第9课《网页的数据编码》课件+教案+素材-【浙教版2023】《信息科技》八上</a></li> <li><a href="https://doc.21cnjy.com/p-21268627.html" title="9《网页的数据编码》教学设计 课件">9《网页的数据编码》教学设计 课件</a></li> <li><a href="https://doc.21cnjy.com/p-19006978.html" title="第9课 网页的数据编码 教案4 八上信息科技浙教版（2023）">第9课 网页的数据编码 教案4 八上信息科技浙教版（2023）</a></li> <li><a href="https://doc.21cnjy.com/p-19006957.html" title="第9课 网页的数据编码 教案3 八上信息科技浙教版（2023）">第9课 网页的数据编码 教案3 八上信息科技浙教版（2023）</a></li> <li><a href="https://doc.21cnjy.com/p-19006895.html" title="第9课 网页的数据编码 教案2 八上信息科技浙教版（2023）">第9课 网页的数据编码 教案2 八上信息科技浙教版（2023）</a></li> <li><a href="https://doc.21cnjy.com/p-19006890.html" title="第9课 网页的数据编码 教案1 八上信息科技浙教版（2023）">第9课 网页的数据编码 教案1 八上信息科技浙教版（2023）</a></li> <li><a href="https://doc.21cnjy.com/p-23227399.html" title="【精品解析】第二单元 第9课 网页的数据编码 课堂练习 浙教版（2023）信息科技 八年级上">【精品解析】第二单元 第9课 网页的数据编码 课堂练习 浙教版（2023）信息科技 八年级上</a></li> <li><a href="https://doc.21cnjy.com/p-18336830.html" title="浙教版（2023）八年级上册 信息科技 第9课 网页的数据编码 课堂练习（word版，含答案）">浙教版（2023）八年级上册 信息科技 第9课 网页的数据编码 课堂练习（word版，含答案）</a></li> <li><a href="https://doc.21cnjy.com/p-18179716.html" title="第9课 网页的数据编码 课件(共16张PPT) 2023—2024学年浙教版（2023）初中信息技术八年级上册">第9课 网页的数据编码 课件(共16张PPT) 2023—2024学年浙教版（2023）初中信息技术八年级上册</a></li> <li><a href="https://doc.21cnjy.com/p-17762132.html" title="八上第9课 网页的数据编码 教案（表格式） 浙教版（2023）信息科技">八上第9课 网页的数据编码 教案（表格式） 浙教版（2023）信息科技</a></li> </ul> </div> </aside> </div> </div> </main> <script src="//static.21cnjy.com/js/underscore-1.8.3.min.js"></script> <script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swanInvoke.js"></script> <script> function jumpbaiduboxapp(el){ if (navigator.userAgent.toLowerCase().indexOf('baiduboxapp/') >-1){ window.swanInvoke({ appKey: 'LYaggHHMnhIO7GgfWsVcMKQKoRjCXLqq', path: 'pages/zydown/zydown', query: { id: el.attributes['ownattr'].nodeValue } }); return false; }else{ return true; } }; ;(function(){ var ua = navigator.userAgent.toLowerCase() var isWXWork = ua.match(/wxwork/i) == 'wxwork'; var isWeixin = !isWXWork && ua.match(/MicroMessenger/i) == 'micromessenger'; var isMobile = isDesktop = false; if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) { isMobile = true; } else { isDesktop = true; } var isAndroid = ua.indexOf('android') > -1 || ua.indexOf('Adr') > -1; var isOS = ua.indexOf('iPhone') > -1 || ua.indexOf('iPad') > -1 || ua.indexOf('Mac') > -1; if (isWeixin) { } if (isAndroid) { } // 标题固定fixed var $fixedTit = $('#J_FixedShowDetailTit'); var fixed_tit = function () { var titIsShow = $(window).scrollTop() > 179; if (titIsShow) { $fixedTit.animate({ top: 0 }, 300); } else { $fixedTit.animate({ top: '-200px' }, 300); } }; $(window).on('scroll', _.debounce(fixed_tit, 50)); fixed_tit(); // 简介固定高度 var $height= $('.assets-intro').height(); if($height == 480) $('.introAll').show(); // 收缩 function toMore(el){ var flag = el == '.introAll' ? 1 : 0; var overflow = flag ? "auto" : "hidden"; var maxHeight = flag ? "inherit" : "480px" ; var className = flag ? ".introAllHide" : ".introAll"; $(el).on('click',function(){ $('.assets-intro').css({ "overflow":overflow, "maxHeight": maxHeight }); $(el).hide(); $(className).show(); }); } toMore('.introAll'); toMore('.introAllHide'); })(); </script> <!--footer开始--> <!-- 底部 --> <footer class="footer"> <div class="container"> <div class="clearfix"> <div class="footer-col footer-col-logo"> <!-- <mip-img src="/just/images/logo-footer.png" width="60" height="60"></mip-img> --> </div> <div class="footer-col footer-col-copy "> <ul class="footer-nav hidden-xs "> <li><a href="https://www.21cnjy.com/help/">帮助中心</a> </li> <li><a href="https://www.21cnjy.com/about/about_contact-us.php">联系我们</a> </li> <li><a href="https://www.21cnjy.com/about/about_opinion.php">意见反馈</a> </li> </ul> <div class="copyright "> 2023 版权所有© 二一教育 <a href="https://beian.miit.gov.cn" target="_blank " rel="nofollow noopener noreferrer">粤ICP备11039084</a> </div> </div> <div class="footer-col footer-col-sns "> <div class="footer-sns "> <ul class="footer-nav hidden-xs "> <li>友情链接：</li> <li> <a href="https://yj.21cnjy.com/" title="阅卷软件系统">阅卷系统</a> <a href="https://edu.21cnjy.com/" title="美文范文">优秀范文</a> <a href="https://paike.21cnjy.com/" title="新高考走班">走班排课</a> <a href="https://tiku.zujuan.com/" title="组卷网题库">组卷题库</a> <a href="https://www.chujuan.cn/" title="组题出卷网">出卷网</a> </li> </ul> </div> </div> </div> </div> </footer> <mip-fixed type="gototop"><mip-gototop></mip-gototop></mip-fixed> <mip-stats-baidu token="0280ecaa2722243b1de4829d59602c72"></mip-stats-baidu> <script src="https://c.mipcdn.com/static/v2/mip.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-stats-baidu/mip-stats-baidu.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-gototop/mip-gototop.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-history/mip-history.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-fixed/mip-fixed.js"></script> <script src="https://c.mipcdn.com/extensions/platform/v1/mip-cambrian/mip-cambrian.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-share/mip-share.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-form/mip-form.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-sidebar/mip-sidebar.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-vd-tabs/mip-vd-tabs.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-lightbox/mip-lightbox.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-ad/mip-ad.js"></script> <script src="/assets/26c9d710/jquery.js"></script> <script src="/assets/a0893c15/yii.js"></script> <script src="/assets/a0893c15/yii.activeForm.js"></script> <script type="text/javascript">jQuery(document).ready(function () { jQuery('#w0').yiiActiveForm([], []); jQuery('#w1').yiiActiveForm([], []); });</script> </body> </html>