网页的数据组织
网页是数据的“容器”，也是数据的“组织方式”。
这一课，我们要弄清两件事：网页里有哪些数据，以及这些数据是怎样被有条理地组织、传输和呈现的。
1 课时（45 分钟）
知识讲解 20′ + 实践 20′ + 小结 5′
主题网站制作 · 第 7 课
承上：网页的基本元素；启下：网站创作实践
筹划“人工智能”主题网站
小组合作，制订方案并整理素材
学习目标
知识与技能
① 能说出网页由哪些类型的数据构成，知道标签在组织网页数据中的作用；
② 能按“分类—命名—路径”三要素规范地组织网站素材。
过程与方法
③ 能借助浏览器开发者工具，观察一次 HTTP 请求与响应的过程；
④ 能以小组合作方式，完成主题网站制作方案的制订。
信息意识
⑤ 体会“规范的组织”对信息传播效率的影响，形成良好的信息习惯。
重点 / 难点
重点：网页数据的类型与素材的组织方式。
难点：HTTP 协议中的请求与响应过程、相对路径的理解。
情境导入：一次“满屏裂图”的尴尬
小林做了一个“人工智能”主题网站，在自己电脑上打开一切正常。他把整个文件夹打包发给同学，同学打开后却发现：
思考：小林的网页“内容”本身没坏，为什么会这样？
——这就是本课要解决的：网页的数据，必须被“组织”起来。
一、网页里到底有哪些数据
1. 网页文件本身只是“纯文本”
用记事本打开任意一个网页文件（.html），你看到的是纯文本——没有图片、没有声音。它靠的是标签来“约定”数据放在哪里、以什么形式呈现。
2. 数据类型与对应标签
| 数据类型 | 常用标签 | 说明 |
|---|---|---|
| 标题 / 段落 | <h1>…<h6> <p> | 组织文字层级，是网页最主要的内容 |
| 列表 | <ul> <ol> <li> | 无序 / 有序列表，适合栏目导航 |
| 图像 | <img src="…"> | 单标签，靠 src 指定图片地址 |
| 音频 / 视频 | <audio> <video> | 多媒体数据，通常体积最大 |
| 超链接 | <a href="…"> | 把一个个网页“连”成网站 |
| 表格 | <table> <tr> <td> | 组织结构化数据 |
3. 看懂一段完整的网页代码
点击左侧任意一项，右侧对应代码会高亮。
- 文档声明告诉浏览器这是 HTML5
- html 根标签整份文档的容器
- meta charset声明字符编码，防乱码
- title浏览器标签页上的标题
- h1 标题页面的主标题
- p 段落正文文字
- img 图像用 src 指向图片文件
- a 超链接用 href 指向另一个网页
- video 视频多媒体数据
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>人工智能主题网站</title> 6 </head> 7 <body> 8 <h1>什么是人工智能</h1> 9 <p>人工智能是研究、开发用于模拟和扩展人的智能的技术科学。</p> 10 <img src="images/robot.jpg" alt="智能机器人"> 11 <a href="pages/history.html">了解更多</a> 12 <video src="media/intro.mp4" controls></video> 13</body> 14</html>
4. 标签的“三件套”
开始标签
<p>告诉浏览器：这里开始一段内容
内容
真正显示给读者的文字或资源
结束标签
</p>成对出现；img 等单标签除外
属性名="属性值"。比如 src 说明“资源在哪”，href 说明“链接到哪”，alt 说明“图片加载失败时显示什么”。注意：属性值里的地址，正是下一节的“路径”问题——地址错了，就是满屏裂图。
二、把素材“组织”起来：分类 · 命名 · 路径
一个主题网站，通常有几十个文件：网页、图片、音频、视频、样式表。如果全部堆在一个文件夹里，会出现三个问题：找不到、不敢改、传不动。
1. 分类：用文件夹分而治之
原则只有一条：同一个文件夹里，只放同类的、同一主题的东西。
2. 命名：让文件名自己“说话”
| ❌ 常见坏习惯 | ✅ 推荐做法 |
|---|---|
| 新建文件夹 (2) | images / pages / media |
| 微信图片_20261020123456.jpg | robot-arm_01.jpg |
| 未命名-1.html | history.html |
| 首页 最终版 真的最终版.html | index.html |
| IMG_0001.JPG（大小写混用） | img_0001.jpg（统一小写） |
只用小写英文 / 数字 / _ / -
不用中文、空格、# & 等符号——它们在地址里需要转义，一传就出错。
见名知义
看名字就知道内容：robot-arm_01.jpg 好过 a1.jpg。
统一编号
同类文件用两位数编号 _01 _02，排序不乱。
3. 路径：告诉浏览器“去哪里找”
这是本课最容易出错的地方。三种写法必须分清：
| 写法 | 示例 | 含义 |
|---|---|---|
| 相对路径（同目录） | images/robot.jpg | 从当前网页所在文件夹往下找 |
| 相对路径（上一级） | ../images/robot.jpg | .. 表示“退回上一级文件夹” |
| 绝对路径（网址） | https://www.school.edu.cn/images/robot.jpg | 从服务器根开始，完整地址 |
ai-site/pages/history.html，要引用 ai-site/images/robot.jpg：① 先退回上一级：
.. → 回到 ai-site/② 再进入 images：
../images/robot.jpg ✅只写
images/robot.jpg 是错的——它会在 pages/ 下面找 images，找不到 → 裂图。
D:\网站\images\a.jpg），本地能打开；一旦打包发给别人或上传服务器，这个盘符路径根本不存在 → 全部失效。做网站，一律用相对路径。
三、数据是怎么“跑”到我们眼前的：HTTP 请求与响应
网页不是“存在你的电脑里”，而是每次打开时向服务器要来的。这套“要—给”的规则，就是 HTTP 协议。
请求报文（浏览器 → 服务器）
第一行是“请求行”：方法 + 资源路径 + 协议版本。常用方法 GET（获取）、POST（提交）。
响应报文（服务器 → 浏览器）
第一行是“状态行”：协议版本 + 状态码 + 状态描述。后面跟响应头和正文。
状态码：服务器的“一句话回复”
| 状态码 | 含义 | 典型场景 |
|---|---|---|
| 200 OK | 请求成功 | 网页正常打开 |
| 301 / 302 | 重定向 | 网址换了新地址，自动跳转 |
| 403 Forbidden | 禁止访问 | 没有权限、目录不允许浏览 |
| 404 Not Found | 找不到资源 | 路径写错、文件被改名或删除 → 裂图/打不开 |
| 500 | 服务器内部错误 | 服务器程序出故障，不是你的问题 |
你会看到：一个网页往往发出几十个请求——HTML、CSS、JS、每一张图片、每一个字体文件，各算一次。
点任意一条，就能看到它的请求头、响应头、状态码、耗时。这就是“网页的数据组织”最真实的现场。
默认端口：HTTP 80，HTTPS 443（加密传输，防止内容被窃听篡改）。
四、知识链接：流媒体技术
音频、视频文件动辄几十上百 MB。如果必须“全部下载完才能看”，那在线视频就没法用了——流媒体技术解决的就是这个问题。
传统下载方式
先把整个文件下载到本地，再播放。
缺点：等待时间长，占本地存储，看完还得删。
流媒体方式
边下载、边播放，只保留一小段“缓冲”。
优点：即点即看，不占大量存储，支持直播。
对比演示
缓冲（Buffer）
先预存几秒数据，网络抖动时用缓冲顶住，避免卡顿。
码率（Bitrate）
每秒传输的数据量。码率越高越清晰，也越吃带宽。
自适应
网络变差时自动降码率，保证不断流——你看视频“糊一下又清楚”就是这个机制。
实践任务：筹划“人工智能”主题网站
② 完成《“人工智能”主题网站制作方案》表格（可打印填写）；
③ 起一个网站名称，规划 3–4 个栏目，列出每栏需要的素材；
④ 按“分类 + 命名规范”设计素材文件夹结构草图；
⑤ 组内自评 + 组间互评（各 1 分钟陈述）。
方案表（可直接在网页上填写后打印）
| 网站名称 | |
|---|---|
| 主题定位 | |
| 栏目结构 | |
| 素材清单 | |
| 文件组织 | |
| 小组分工 |
分工建议
组长
统筹进度、汇总方案、组间陈述
内容组
撰写各栏目文字稿，核实信息准确性
素材组
收集图片音视频，分类并规范命名
技术 / 美工
搭建结构、排版美化、测试链接
评价量规
| 维度 | 评价要点 | 分值 |
|---|---|---|
| 主题明确 | 栏目围绕“人工智能”，有清晰的读者定位 | 25 |
| 素材规范 | 分类合理、命名统一、来源合法（尊重版权） | 25 |
| 结构完整 | 首页 + 二级页面，链接关系清晰，路径正确 | 30 |
| 分工协作 | 人人有任务，组内自评、组间互评有内容 | 20 |
随堂练习
ai-site/，当前文件是 ai-site/pages/history.html，要引用 ai-site/images/robot.jpg，正确写法是：
课堂小结
一条主线
数据是什么（文字 / 图像 / 音视频 / 超链接）
→ 数据放哪里（分类文件夹 + 规范命名 + 正确路径）
→ 数据怎么来（HTTP 请求与响应）
→ 大数据怎么高效传（流媒体技术）
三句话记住它
① 网页文件里存的是地址，不是图片本身。
② 素材组织靠三招：分好类、起好名、写对路径。
③ 打开网页的过程，就是一次请求—响应。
② 用 F12 打开 Network 面板，记录你常访问的一个网页发起了多少个请求，写下其中 3 个请求的类型和状态码；
③ 为自己的素材库建立分类文件夹，按规范重命名至少 10 个文件。
教学建议（教师用）
1. “亲身体验”活动的组织方式
建议采用小组合作方式，引导学生在探究各类主题网站的过程中，讨论并规划主题网站的制作方案。评价时采用小组分工 + 组内自评 + 组间互评，确保作品符合基本的网站制作元素。
素材收集环节要特别提醒学生注重素材的分类和命名规范，以养成良好的信息习惯——这正是本课“数据组织”素养的落点。
2. 网络数据传输过程怎么讲
为了帮助学生理解网络数据的传输过程，建议采用微课或图示方式讲解。由于大多数网页通过 HTTP 协议通信，建议利用浏览器的开发者工具，查看某一次请求与响应的数据情况来讲授；还可以结合七年级已学的 TCP/IP 通信协议等相关内容辅助讲解。
3. “知识链接”流媒体技术
流媒体技术主要用于处理音频和视频大数据的传输，它使客户端能够即时观看。建议结合实际生活中的真实体验（看视频“缓冲转圈”、直播延迟）进行讲解。
4. 随堂练习的组织
本课的随堂练习是筹划“人工智能”主题网站的制作方案。建议引导学生采用小组合作方式实践，制订计划并整理资源，也为本单元的任务积累素材，并在后续创作中应用。