——— 七年级 第四单元 校园活动线上展
本课将关注以下问题：
1. 网页与HTML代码有什么关系？
2. 浏览器是如何显示网页的？
3. HTML 代码是不是必须保存在网页文件中？
学习目标：
1. 了解网页与代码之间的对应关系。
2. 初步认识HTML语言，知道常用标签的作用。
3. 验证网页内容的保存形式。
---------------------------------------------------------------------------
很多同学对网页为何能够展现图文声像，为何能够实现跳转，如何制作网页等问题心存好奇。本课将带领大家学习网页与网页代码的相关知识。
16.1 网页与HTML代码
上网浏览时会接触风格各异的网页，里面有文字、图像、音频、视频等多种资源。通过网页中的超链接，可以方便地在网页和资源之间跳转。这一切到底是怎样完成的呢？
学习活动1
浏览网页，调出浏览器的“开发人员”工具，观察页面代码（图 16.1）。
图16.1 网页与代码
【学习指引】：
对于学有余力的学生，教师可引导他们通过“猜测验证”环节来进一步了解网页及其对应的HTML代码。例如，先让学生猜测标签的作用，然后修改或删除标签之间的内容，最后通过观察浏览效果验证猜想。
通过前面的活动不难发现，图文并茂的网页，背后对应着一堆代码。这堆代码对应着描述网页的语言—HTML（hypertext markup language，超文本标记语言）。HTML语言中用于标记内容、格式或超链接的代码符号叫标签。
16.2 显示网页的过程
浏览器获得网页代码后，就会按照这些代码的要求，显示相应的文字、图像等，进而呈现出完整的网页效果（图16.2）。
图16.2 代码与网页内容对应关系示意图
【学习指引】：
引导学生形成初步认识：图文声像并茂的网页背后，对应着一串串字符代码，浏览器根据这些代码进行相应的处理，才能呈现出人们看到的网页效果；大部分标签是成对出现的，但也存在不成对的情况。教学时，可以引导学生参照表 16.1 熟悉常用的网页标签。
表 16.1 常用标签
学习活动2
用《记事本》软件打开网页文件，尝试通过改代码的方式完成修改网页标题、更换图像、增加图像说明等任务。
参照以下方法进行操作，在网页中显示一张笑脸图（图16.3）。
方法一：修改网页，让它显示计算机中的图像文件001.png。浏览网页，观察显示效果。
方法二：运行《图像编码转换器》软件，选择图像文件001.png后进行编码转换，然后用运行结果替换网页中的标签。确保网页所在文件夹中没有图像文件001.png后，浏览网页，观察显示效果。
图 16.3 笑脸图
提示：<img src=“data: image/jpeg;base64,iVBORw0KG…… alt=”Image” />
【学习指引】：
1.提示：修改 <title></title> 之间的内容；修改 <img>标签的src属性；在<img>标签后面增加<p>标签。
2.方法一最常用，指向了一个图像文件。方法二是把图像文件中的数据按 base64 编码方案进行了编码（图16.5）。编码后，二进制的图像数据就可以用字符串的形式表示出来。浏览器可以识别base64编码，并显示图像。此时，图像数据保存在字符串中，因而不再需要图像文件。
图16.5 结果展示
16.3 HTML代码与网页文件
一般情况下，HTML代码保存在以“.htm”“.html”等为扩展名的网页文件中。但实际浏览过程中，浏览器只要能得到相应的HTML代码就可以了，并不要求这些代码必须以网页文件形式保存。
【学习指引】：
选学内容。网页可以保存在网页文件中，可以保存在数据库中，也可以由软件实时生成。
学习活动3
1. 运行《Web服务器》软件（图16.4）。
图16.4 软件窗口
2. 修改编码、内容等参数。
3. 根据提示访问这个网站。
4. 修改内容后再次访问，看看显示的变化。
【学习指引】：
此活动旨在通过实践，了解浏览器需要的是 HTML代码，至于代码是否以网页文件形式保存在服务器中并不重要。
可以看到，即使没有网页文件，也能完成相应的浏览任务。但考虑到管理、维护、修改等因素，很多网站选择把网页存放在网页文件中。
---------------------------------------------------------------------------
拓展与提升
网页中包含的图像、音频、视频等必须保存在网页所在的那个网站中吗？请验证你的猜想。
【学习指引】：
验证思路：可设置 标签的 src属性，让它指向外站的一张图像，然后浏览网页时可以看到，外站的图像正常显示在网页中。由此可知，网页中的图像、音频、视频等可以保存在其他网站中。
——— 选自人教版（2026.3）
10个月宝宝每天需要喝多少奶粉？
