第16课 探秘网页与代码 班级_____ 姓名_____ 1．了解网页与代码之间的对应关系。 2．初步认识HTML语言，知道常用标签的作用。 3．验证网页内容的保存形式。 预习本节课新知识。 【学习活动1】 验证性实验： 实验目的：了解网页与代码之间的关系和常用标签的作用。 实验条件：可联网的计算机、科技节3D打印网页。 实验步骤： 步骤1：打开网页：在浏览器中打开“3D打印.html”网页。 步骤2：查看代码：调出浏览器的“开发人员”工具，查看网页的HTML代码。 步骤3：初步观察：观察页面代码，特别是成对出现的标签，记录网页上不同区域（如标题、段落、图片等）对应的HTML标签。 步骤4：选择标签进行猜测。每组选择一个或多个感兴趣的HTML标签（如
，<h1>等），讨论并记录下对该标签作用的初步猜测。 步骤5：修改或删除HTML代码进行验证。修改或删除选定标签之间的内容，观察并记录网页的变化，验证之前的猜测是否正确。 实验记录： 根据操作，验证不同标签的作用，并填写下表。 序号 标签 猜测标签的作用 实际显示效果 猜测是否正确 1 <title> 设置网页标题 修改标签内容后标题有变化 是 □否 2 □是 □否 3 □是 □否 4 □是 □否 ... 【学习活动2】 1．用《记事本》软件打开“飞驰的火车.html”网页文件，根据下表的修改要求，尝试通过改代码的方式完成修改网页标题、更换图像、增加图像说明等任务，并记录修改方法。 修改要求 修改记录 修改文档标题 更换图像 增加图像说明 2．参照以下方法进行操作，让“显示笑脸图.html”网页显示一张笑脸图，总结在网页中显示图像的不同方法。 方法一：修改网页，让它显示图像文件001.png。浏览网页，观察显示效果。 提示：<img src='***/001.png'> 方法二：运行《图像编码转换器》软件，选择图像文件001.png后进行编码转换，然后用运行结果替换网页中的<img>标签。确保网页所在文件夹中没有图像文件001.png后，浏览网页，观察显示效果。 提示：<img src=''data:image/jpeg;base64,iVBORw0KG......Image''/> 根据操作，总结在网页中显示图像的不同方法，并填写下表。 显示方法 任务记录 方法一：使用文件路径 □需要图像文件 □不需要图像文件 方法二：使用图像数据编码 □需要图像文件 □不需要图像文件 【学习活动3】 HTML代码一定要以网页文件形式保存吗？请参考以下操作步骤体验HTML代码的保存形式。 1．运行《Web 服务器》软件。 2．修改编码、内容等参数。 3．把最下方的地址复制到浏览器的地址栏中，访问这个网站。 4．修改内容后再次访问，看看显示的变化。 通过以上实践结果，我认为，没有网页文件，浏览器 （能/不能）完成相应的浏览任务，HTML代码 （必须/不是必须）要以网页文件形式保存。 网页中包含的图像、音频、视频等必须保存在网页所在的那个网站中吗？请验证你的猜想。 验证思路参考：可设置<img>标签的src属性，让它指向外站的一张图像，浏览网页时，观察外站的图像能否正常显示在网页中。 ... ... </a></b></n></i></span></p></div><div class="item-bz"> ~~ 已预览到文档结尾了 ~~</div></div></div></div></div><div class="pre_over view-mn" style=" background-color: #fff; margin-top: 0"> <div class="zy-btns clearfix"> <a href="#" class="btn-download btn fl" name="jumpurl"> <span>进入下载学案</span> </a> <div class="xwt-down-btn fr" style="cursor: pointer"> <a href="#" onclick="alert('您没有登录')" class="btn-download-a btn fr" style="line-height: 34px" > 免费下载 <span class="btn-tag">（校网通专属）</span> </a></div></div></div></div><div class="view-sd"> <div class="author-view"> <div class="author-head"> <a class="join down-btn" name="jumpurl"> 进入下载页面 </a></div></div><div class="sd-assets-box sd-assets-box--fixed"> <div class="sd-assets"> <h3> 相关推荐</h3> <ul id="ul-2" style="display: block;"><li><span class="icon"> <i class=" v521_doc1"></i></span><a href="https://edu.21cnjy.com/p-26242902.html" class="t-name">第16课 探秘网页与代码 教学设计-2026-2027学年《信息科技》人教版七年级下册（2026-07-23）</a></li><li><span class="icon"> <i class=" v521_doc1"></i></span><a href="https://edu.21cnjy.com/p-26253200.html" class="t-name">第六单元 第18课 高级功能的实现 教学设计(表格式)2027学年河大版初中信息科技八年级全一册（2026-07-24）</a></li><li><span class="icon"> <i class=" v521_doc1"></i></span><a href="https://edu.21cnjy.com/p-26242881.html" class="t-name">互联网发展靠创新 学习任务单-2026-2027学年《信息科技》人教版七年级上册（2026-07-23）</a></li><li><span class="icon"> <i class=" v521_doc1"></i></span><a href="https://edu.21cnjy.com/p-26242888.html" class="t-name">第16课 模块功能先划分 教学设计-2026-2027学年《信息科技》人教版八年级下册（2026-07-23）</a></li><li><span class="icon"> <i class=" v521_doc1"></i></span><a href="https://edu.21cnjy.com/p-26254905.html" class="t-name">第一单元 第1课 开启物联网之门 教学设计 义务教育版(2024)信息科技八年级全一册（2026-07-25）</a></li><li><span class="icon"> <i class=" v521_doc1"></i></span><a href="https://edu.21cnjy.com/p-26232788.html" class="t-name">初中信息技术八年级全一册第五单元《 物联网应用探索》-跨学科作业设计（2026-07-22）</a></li><li><span class="icon"> <i class=" v521_doc1"></i></span><a href="https://edu.21cnjy.com/p-26242850.html" class="t-name">开启物联网之门 教学设计-2026-2027学年《信息科技》人教版八年级上册（2026-07-23）</a></li><li><span class="icon"> <i class=" v521_doc1"></i></span><a href="https://edu.21cnjy.com/p-26242910.html" class="t-name">第16课 探秘网页与代码 学习任务单-2026-2027学年《信息科技》人教版七年级下册（2026-07-23）</a></li><li><span class="icon"> <i class=" v521_doc1"></i></span><a href="https://edu.21cnjy.com/p-26239237.html" class="t-name">《搭建智能鱼缸系统》说课课件--2025-2026学年《信息科技》(安徽版)八年级下册（2026-07-23）</a></li><li><span class="icon"> <i class=" v521_doc1"></i></span><a href="https://edu.21cnjy.com/p-26242891.html" class="t-name">第16课 模块功能先划分 学习任务单-2026-2027学年《信息科技》人教版八年级下册（2026-07-23）</a></li></ul></div></div><div class="author-view"> <div class="author-head"> <a href="https://www.21cnjy.com/recruitment/home/ordinary" title="兼职赚钱" class="join"> 上传课件兼职赚钱 </a></div></div></div></div></div><div class="site-footer"> <div class="footer-address g-cw"> <ul class="links clearfix"><li><a href="https://news.21cnjy.com/" title="教育新闻">教育新闻</a></li><li><a href="https://www.21cnjy.com/" title="课件下载">课件下载</a></li><li><a href="https://book.21cnjy.com" title="电子教辅">电子教辅</a></li><li><a href="https://www.zujuan.com/" title="组卷网">在线组卷网</a></li><li><a href="https://help.21cnjy.com/paike">排课教程</a></li><li><a href="https://help.21cnjy.com/yuejuan">阅卷教程</a></li><li><a href="https://www.chujuan.cn/" title="出卷网">出卷网</a></li><li><a href="https://tp.kt5u.com/" title="拼写宝">课堂投屏工具</a></li><li><a href="https://tools.yunzitie.cn/" title="田字格">田字格生成器</a></li><li><a href="https://www.zujuan.com/" title="组卷网">组卷网</a></li><li><a href="https://www.linkconn.cn/" title="汽车连接器">汽车连接器</a></li><li><a href="https://www.kuketang.cn/" title="酷课堂官网">酷课堂工具</a></li><li><a href="https://www.stirling-pdf.com/?lang=zh_CN" title="Stirling-pdf官网">PDF转Word</a></li></ul><p> 二一教育-课件站 21世纪教育网 <a href="https://beian.miit.gov.cn" rel="nofollow noreferrer"> 粤ICP备11039084号 </a> </p></div></div><script>
(function(){const tagsa = document.getElementsByName("jumpurl");for (let i = 0;i < tagsa.length;i++){tagsa[i].href = "https://www.21cnjy.com/H/14/270274/26242910.shtml?from=edu";}})();</script> </body> </html> 