单元四 · 校园活动线上展
第16课 探秘网页与代码
一、学习目标
- 了解网页与代码之间的对应关系。
- 初步认识HTML语言，知道常用标签的作用。
- 验证网页内容的保存形式。
二、情境导入
科技节网站包含多个网页文件，文件里是一堆代码。
我们看到的网页与这些代码有什么关系？怎样改代码改变显示效果？
三、核心讲解
本课学习路径：
1网页与HTML代码
2显示网页的过程
3HTML代码与网页文件
1．网页与HTML代码
图文并茂的网页背后对应着代码。描述网页的语言是 HTML（超文本标记语言）。网页中可有文字、图像、音视频等，并通过超链接跳转。
标签：HTML 中用于标记内容、格式或超链接的代码符号；修改标签及内容可改变显示效果。
- 可用浏览器开发者工具观察页面代码。
- 常见标签用于标题、段落、图像、链接等。
- 标签通常成对出现，结构要正确嵌套。
想一想：同一段文字放在不同标签里，显示效果会有什么差别？
2．显示网页的过程
浏览器读取 HTML 等资源，解析后渲染出我们看到的页面。代码是「说明书」，浏览器是「施工队」。
3．HTML代码与网页文件
HTML 代码常常保存在网页文件中，但不一定只存在于单个本地文件——也可能由服务器动态生成。图像、音视频等资源也不一定都存放在同一站点。
想一想：网页里的图像是否必须保存在本网站中？如何验证？
弄清以上要点后，再进入下方动手体验，用实际操作验证。
四、动手体验 · MixNT 网络仿真
点「打开仿真」载入拓扑，对照本课概念观察现象。
打开拓扑，对照本课概念观察现象。
正在打开仿真
正在载入网络拓扑…
五、课堂总结
- HTML是一种可用于描述网页的语言。
- HTML语言中用于标记内容、格式或超链接的代码符号叫标签。
- 修改标签及内容，可以改变网页的显示效果。
- HTML代码不一定保存在网页文件中。
六、拓展提升
- 尝试在网页中设置指向其他网站的图像地址，观察显示效果，验证资源是否必须同站保存。
测评
对照本课学习目标作答（客观题练习）；选出后点「检查」。答错会显示简短说明。
HTML 的主要用途是？
修改标签及其中内容，通常会？
判断：标签是 HTML 中用于标记内容、格式或超链接的代码符号。
本节小结
回顾本课要点，完成动手体验与测评。记住：探秘网页与代码。