第16课 探秘网页与代码 课件 2025-2026学年人教版初中信息科技七年级全一册
2026-04-16
|
16页
|
481人阅读
|
2人下载
普通
资源信息
| 学段 | 初中 |
|---|---|
| 学科 | 信息科技 |
| 教材版本 | 初中信息科技人教版七年级全一册 |
| 年级 | 七年级 |
| 章节 | 第16课 探秘网页与代码 |
| 类型 | 课件 |
| 知识点 | - |
| 使用场景 | 同步教学-新授课 |
| 学年 | 2026-2027 |
| 地区（省份） | 全国 |
| 地区（市） | - |
| 地区（区县） | - |
| 文件格式 | PPTX |
| 文件大小 | 8.32 MB |
| 发布时间 | 2026-04-16 |
| 更新时间 | 2026-04-16 |
| 作者 | 杨咩咩咩、 |
| 品牌系列 | - |
| 审核时间 | 2026-04-16 |
| 下载链接 | https://m.zxxk.com/soft/57382286.html |
| 价格 | 0.50储值（1储值=1元） |
| 来源 | 学科网 |
内容正文：
第16课
探秘网页与代码
1
01
02
了解网页与代码之间的对应关系。
初步认识HTML语言，知道常用标签的作用。
学习目标
03
验证网页内容的保存形式。
学习内容
01
02
网页与HTML代码
显示网页的过程
学习内容
01
网页与HTML代码
一、网页与HTML代码
我们上网时会接触风格各异的网页，里面有文字、图像、声音、视频等各种内容，还能通过超链接在不同网页、不同资源之间跳转。这一切到底是怎样完成的呢？
其实，我们看到的图文并茂的网页，背后对应着一堆代码。这堆代码对应着描述网页的语言——HTML（超文本标记语言）。
浏览一个网页，然后调出浏览器的“开发人员”工具，观察页面代码。
1
2
3
4
义务教育信息科技课程资源
标题标签h1~h6，数字越大字体越小
图像标签
src：指出图片路径，是必需属性
义务教育信息科技课程资源
7
✿
HTML语言中用于标记内容、格式或超链接的代码符号叫标签。
成对出现的双标签，如<HTML>和</HTML>。
单标签，如<img>。
标 签 作 用
<html></html> 网页根标签
<head></head> 设置文档头部
<title></title> 设置网页标题
<body></body> 设置文档主体
<h1></h1> 设置内容的一级标题
<p></p> 设置新一行
<img src='***/***.jpg'> 设置图像
<a href='xxxx'></a> 设置超链接
✿
✿
义务教育信息科技课程资源
8
1. 标签成对：绝大多数标签有开头必有结尾（如<html>对应</html>），结尾多/。
2. 顺序不乱：<html>包裹<head>和<body>，<head>必须在<body>前。
3. 内容归位：页面可见内容（文字、图片等）必须写在<body>标签内。
4. 拼写准确：标签为英文，字母写错会导致浏览器无法识别。
5. 分清标签：区分双标签（成对）和单标签（无结尾，如<br>``<img>）。
根标签
文档头部
网页标题
文档主体，页面内容基本都包在其中
HTML代码的基本结构
1. 标签成对：双标签有开头必有结尾，如<html>对应</html>，结尾多/。
2. 顺序不乱：<html>包裹<head>和<body>，<head>必须在<body>前面。
3. 内容归位：页面可见内容（文字、图片等）必须写在<body>标签内。
义务教育信息科技课程资源
9
1. 标签成对：绝大多数标签有开头必有结尾（如<html>对应</html>），结尾多/。
2. 顺序不乱：<html>包裹<head>和<body>，<head>必须在<body>前。
3. 内容归位：页面可见内容（文字、图片等）必须写在<body>标签内。
4. 拼写准确：标签为英文，字母写错会导致浏览器无法识别。
5. 分清标签：区分双标签（成对）和单标签（无结尾，如<br>``<img>）。
根标签
文档头部
网页标题
文档主体，页面内容基本都包在其中
HTML代码的基本结构
4. 拼写准确：标签为英文，字母写错会导致浏览器无法识别。
5. 分清标签：区分双标签（成对）和单标签（无结尾，如<img>）。
6. 规范缩进：内层标签缩进，让代码结构清晰，减少出错。
义务教育信息科技课程资源
10
1. 标签成对：绝大多数标签有开头必有结尾（如<html>对应</html>），结尾多/。
2. 顺序不乱：<html>包裹<head>和<body>，<head>必须在<body>前。
3. 内容归位：页面可见内容（文字、图片等）必须写在<body>标签内。
4. 拼写准确：标签为英文，字母写错会导致浏览器无法识别。
5. 分清标签：区分双标签（成对）和单标签（无结尾，如<br>``<img>）。
1. 双标签有头有尾，单标签不用配对
2. 头在前、身在后，内容都在 body 内
3. 拼写准、缩进美，网页不乱没有错
HTML结构口诀
义务教育信息科技课程资源
学习内容
02
显示网页的过程
HTML代码
<html>
<title>科技节——人工智能绘画</title>
<body>
<h1>飞驰的火车</h1>
<img src='AI-001.png'>
<a href='https://***'>更多AI绘画作品</a>
</body>
</html>
浏览器获得网页代码后，就会按照这些代码的要求，显示相应的文字、图像等，进而呈现出完整的网页效果。
二、显示网页的过程
义务教育信息科技课程资源
13
1．用《记事本》软件打开飞驰的火车网页文件，根据下表的修改要求，尝试修改网页中的代码。
修改要求 修改记录
修改网页标题 人生如逆旅
更换图像 火车(1).jpg
增加图像说明 人生就像一列不停前进的火车，我们无法回头，只能珍惜当下，心怀希望，向着远方坚定前行，不负每一段旅程。
修改<title></title>之间的内容
修改<img>标签的src属性
在<img>标签后面增加<p>标签
任 务 一
义务教育信息科技课程资源
14
2．让网页显示一张笑脸图。
修改显示笑脸图网页，让它显示计算机中的图像文件001.png。浏览网页，观察显示效果。
任 务 二
义务教育信息科技课程资源
15
HTML是一种可用于描述网页的语言。
HTML语言中用于标记内容、格式或超链接的代码符号叫标签。
修改标签及内容，可以改变网页的显示效果。
HTML代码不一定保存在网页文件中。
课堂总结
$
资源预览图
1
2
3
4
5
6
相关资源
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。