资源简介 (共19张PPT)信息科技八年级上网页数据编码第9课通过了解网页的数据编码，理解网页的数据请求与响应过程；通过体验网页表单，了解网页表单数据交互的过程。学习目标1、你知道网页是如何实现交互的吗 2、你知道网页数据有哪些编码方式 本课探究1网页的编码网页编码你知道什么是网页编码？网页编码是指用于表示和处理网页文本内容的字符编码方法。文本、图像、音频、视频等数据是通过HTML标签编码组织在网页中，再由浏览器解释并呈现。网页编码常用的网页编码举例：文本的段落可以使用标签组织图像可以使用标签实现将其插入文本中多媒体的播放可以使用、等标签组织，并能设置播放方式你还知道哪些呢？网页编码活动一：使用标签添加图片文件，再尝试使用其他标签。2网页的数据请求与响应网页的数据请求与响应你知道什么是网页的数据请求与响应？网页需要通过请求与响应以获取HTML数据，网页中如有多个媒体数据，则需要多次请求与响应，才能在网页上呈现。网页的数据请求与响应网页的数据请求与响应：3网页中的交互网页中的交互什么是网页中的交互？网页中的交互是指用户与网页之间的互动行为，用户可以通过鼠标、键盘或触摸等输入设备与网页进行交互，而网页则会根据用户的操作做出相应的反馈或执行相应的动作。网页中的交互网页中的交互的形式：1、点击链接2、表单交互3、按钮操作4、鼠标悬停5、下拉菜单6、滚动交互7、轮播图8、弹出框和模态框9、列表排序与过滤10、拖放交互网页中的交互创建表单的基本步骤：1、使用标签创建表单2、添加表单字段3、定义表单提交操作4、处理表单数据网页中的交互在HTML中，使用标签创建表单元素，它会包裹表单中的各个字段和提交按钮。网页中的交互常见的表单字段包括：1、：文本输入框，用于接收用户输入的文本。2、：密码输入框，用于接收用户输入的密码，显示为密文。3、：复选框，允许用户选择一个或多个选项。4、：单选按钮，允许用户从一组选项中选择一个。5、和：下拉菜单，允许用户从预定义的选项中选择一个。6、：多行文本输入框，用于接收用户输入的多行文本7、轮播图。<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/f2/2024/03/eb/ebd650fe8810be2fd6ddb07f94516b0e.png" style="max-width:800px;"> <img src="https://preview.21cnjy.com/f2/2024/03/0d/0daf22818d43fd1957d94dc2f44e3e5f.png" style="max-width:800px;"> <img src="https://preview.21cnjy.com/f2/2024/03/f2/f294e381c49c2db8ba1c35f6eada4c80.png" style="max-width:800px;"> <img src="https://preview.21cnjy.com/f2/2024/03/be/be3409cf56ff2f60b28c2a672b6a8f29.png" style="max-width:800px;"> <img src="https://preview.21cnjy.com/f2/2024/03/59/59b24138a551fcf4d182bc902894fadf.png" style="max-width:800px;"> <img src="https://preview.21cnjy.com/f2/2024/03/50/504d89df383b8dd8b01b63cd1e9d460e.png" style="max-width:800px;"> <img src="https://preview.21cnjy.com/f2/2024/03/9e/9e95fd47ee2f05d52b872c72ee11b7e9.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>