资源简介 第16课 探秘网页与代码班级_________ 姓名_________1．了解网页与代码之间的对应关系。2．初步认识HTML语言，知道常用标签的作用。3．验证网页内容的保存形式。预习本节课新知识。【学习活动1】验证性实验：实验目的：了解网页与代码之间的关系和常用标签的作用。实验条件：可联网的计算机、科技节3D打印网页。实验步骤：步骤1：打开网页：在浏览器中打开“3D打印.html”网页。步骤2：查看代码：调出浏览器的“开发人员”工具，查看网页的HTML代码。步骤3：初步观察：观察页面代码，特别是成对出现的标签，记录网页上不同区域（如标题、段落、图片等）对应的HTML标签。步骤4：选择标签进行猜测。每组选择一个或多个感兴趣的HTML标签（如，<h1>等），讨论并记录下对该标签作用的初步猜测。<br/>步骤5：修改或删除HTML代码进行验证。修改或删除选定标签之间的内容，观察并记录网页的变化，验证之前的猜测是否正确。<br/>实验记录：<br/>根据操作，验证不同标签的作用，并填写下表。<br/>序号 标签 猜测标签的作用 实际显示效果 猜测是否正确<br/>1 <title> 设置网页标题 修改标签内容后标题有变化 是 □否<br/>2 □是 □否<br/>3 □是 □否<br/>4 □是 □否<br/>...<br/>【学习活动2】<br/>1．用《记事本》软件打开“飞驰的火车.html”网页文件，根据下表的修改要求，尝试通过改代码的方式完成修改网页标题、更换图像、增加图像说明等任务，并记录修改方法。<br/>修改要求 修改记录<br/>修改文档标题<br/>更换图像<br/>增加图像说明<br/>2．参照以下方法进行操作，让“显示笑脸图.html”网页显示一张笑脸图，总结在网页中显示图像的不同方法。<br/>方法一：修改网页，让它显示图像文件001.png。浏览网页，观察显示效果。<br/>提示：<img src='***/001.png'><br/>方法二：运行《图像编码转换器》软件，选择图像文件001.png后进行编码转换，然后用运行结果替换网页中的<img>标签。确保网页所在文件夹中没有图像文件001.png后，浏览网页，观察显示效果。<br/>提示：<img src=''data:image/jpeg;base64,iVBORw0KG......alt=''Image''/><br/>根据操作，总结在网页中显示图像的不同方法，并填写下表。<br/>显示方法 任务记录<br/>方法一：使用文件路径 □需要图像文件 □不需要图像文件<br/>方法二：使用图像数据编码 □需要图像文件 □不需要图像文件<br/>【学习活动3】<br/>HTML代码一定要以网页文件形式保存吗？请参考以下操作步骤体验HTML代码的保存形式。<br/>1．运行《Web 服务器》软件。<br/>2．修改编码、内容等参数。<br/>3．把最下方的地址复制到浏览器的地址栏中，访问这个网站。<br/>4．修改内容后再次访问，看看显示的变化。<br/>通过以上实践结果，我认为，没有网页文件，浏览器 （能/不能）完成相应的浏览任务，HTML代码 （必须/不是必须）要以网页文件形式保存。<br/>网页中包含的图像、音频、视频等必须保存在网页所在的那个网站中吗？请验证你的猜想。<br/>验证思路参考：可设置<img>标签的src属性，让它指向外站的一张图像，浏览网页时，观察外站的图像能否正常显示在网页中。</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/2026/07/c1/c1b0366199b35e07c2aa19f9ac13821d.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-26242910.html" title="第16课 探秘网页与代码 学习任务单-2026-2027学年《信息科技》人教版七年级下册">第16课 探秘网页与代码 学习任务单-2026-2027学年《信息科技》人教版七年级下册</a></li> <li><a href="https://doc.21cnjy.com/p-26242902.html" title="第16课 探秘网页与代码 教学设计-2026-2027学年《信息科技》人教版七年级下册">第16课 探秘网页与代码 教学设计-2026-2027学年《信息科技》人教版七年级下册</a></li> <li><a href="https://doc.21cnjy.com/p-25611206.html" title="3.16探秘网页与代码（课件）-义务教育信息科技七年级全一册同步教学">3.16探秘网页与代码（课件）-义务教育信息科技七年级全一册同步教学</a></li> <li><a href="https://doc.21cnjy.com/p-25611187.html" title="3.16探秘网页与代码（教学设计）-义务教育信息科技七年级全一册同步教学">3.16探秘网页与代码（教学设计）-义务教育信息科技七年级全一册同步教学</a></li> <li><a href="https://doc.21cnjy.com/p-25495584.html" title="第16课 探秘网页与代码 课件（内嵌视频） 2025-2026学年人教版初中信息科技七年级全一册">第16课 探秘网页与代码 课件（内嵌视频） 2025-2026学年人教版初中信息科技七年级全一册</a></li> <li><a href="https://doc.21cnjy.com/p-23697751.html" title="义务教育版（2024）七年级全一册（2024）信息科技 第16课 探秘网页与代码 教学设计（表格式）">义务教育版（2024）七年级全一册（2024）信息科技 第16课 探秘网页与代码 教学设计（表格式）</a></li> <li><a href="https://doc.21cnjy.com/p-23660459.html" title="16探秘网页与代码（课件）-七年级信息科技全一册同步教学（人教版2024）">16探秘网页与代码（课件）-七年级信息科技全一册同步教学（人教版2024）</a></li> <li><a href="https://doc.21cnjy.com/p-23477590.html" title="义务教育版（2024）七年级全一册信息科技 第16课 探秘网页与代码 教案（表格式）">义务教育版（2024）七年级全一册信息科技 第16课 探秘网页与代码 教案（表格式）</a></li> <li><a href="https://doc.21cnjy.com/p-23223251.html" title="义务教育版（2024）七年级全一册信息科技 第16课 探秘网页与代码 课件+教案">义务教育版（2024）七年级全一册信息科技 第16课 探秘网页与代码 课件+教案</a></li> <li><a href="https://doc.21cnjy.com/p-23017377.html" title="第16课 探秘网页与代码 课件 2024—2025学年人教版（2024）初中信息科技七年级全一册">第16课 探秘网页与代码 课件 2024—2025学年人教版（2024）初中信息科技七年级全一册</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>