单元一 · Web 基础知识
先搞懂「网址敲下去之后发生了什么」，再动手。本单元对应教材单元一（4 学时）：认识 Web 与 Internet、理解 Web 工作原理与网页类型、初识 HTML5，搭好开发环境，写出你的第一个能打开的 HTML5 页面。
按课程标准「边敲边讲」四段式推进：回顾引子 → 理解 → 演示（含故意写错一次）→ 练习验收。
本单元目标：能说出 Web/Internet 区别、网页三种类型；装好 VS Code + 浏览器；写出第一个 <!DOCTYPE html> 页面并能在浏览器打开。
一、知识准备：Web 是怎么工作的
为什么 / 理解
生活类比：餐厅点餐
你（浏览器）= 顾客；餐厅（服务器）= 后厨；菜单请求（HTTP 请求）= 你点的菜；端上来的菜（HTTP 响应）= 网页。你不用知道后厨怎么炒，只管点、等、吃——这就是 Web 的本质：请求 → 响应。
Internet：全球互联的「物理网络」（光缆、路由器），是路。
Web：跑在 Internet 之上、用 HTTP 协议传网页的「应用服务」，是路上跑的车。
网页三种类型：静态页（写死内容）、动态页（服务器现生成）、单页应用 SPA（JS 局部刷新，本项目侧重前两种）。
易混：Internet ≠ Web。Internet 是基础设施，Web 只是它承载的众多服务之一（还有邮件、即时通讯等）。考试常考这俩的区别。
二、实战演练：第一个 HTML5 页面
演示（含故意写错一次）
文件： u1/hello.html —— 每节课都留下一个能打开的文件，复习靠作品而非笔记。
hello.html · 正确写法
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
<h1>你好，Web！</h1>
<p>这是我用 VS Code 写的第一个页面。</p>
</body>
</html>
效果预览运行结果
浏览器显示：
大标题「你好，Web！」
正文「这是我用 VS Code 写的第一个页面。」
故意写错一次：把 </html> 漏掉，或把 <h1> 写成 <h1 不闭合。浏览器不会报错崩溃，但结构会变乱——这正是「会读页面、会查结构」比背语法更先要练的能力。
三、强化训练（课堂练习）
1在浏览器地址栏输入网址后，背后发生的「请求—响应」分别对应餐厅类比里的什么？
2把下面这段补全：<!____ html>、<____ charset="UTF-8">、<title>…</____>。
3Internet 和 Web 是一回事吗？用一句话说明区别。
提示：请求=点菜，响应=上菜；DOCTYPE；meta；title。Internet 是路，Web 是路上跑的网页服务。
四、课后实训
作业：用 VS Code 新建 about-me.html，包含标题、一段自我介绍、一个指向百度（https://www.baidu.com）的链接。保存后在浏览器打开截图，作为单元一作品提交。
本单元小结
- Web 工作原理：浏览器发 HTTP 请求 → 服务器回 HTTP 响应 → 浏览器渲染成页面。
- 三件套：HTML（结构）、CSS（样式）、JavaScript（行为）——后面七个单元逐一展开。
- 开发环境：VS Code + 浏览器 + 一个能打开的 .html 文件，就够起步。
📝 本节自测
做完点「检查本节」看解析与得分；做错可重做。