12.1 Web开发——Web基本概念¶
内容梗概¶
本课是 Web 开发章节的开篇，讲解 Web 服务的基本工作模型：浏览器（Browser）、HTTP 协议、Web 服务器（Server）三个核心角色。老师以访问学校官网为例说明"发一个 HTTP 请求、收到一个响应"的最简逻辑，并进一步解释：打开一个网页时，浏览器拿到首个 HTML 后会自动解析其中包含的 CSS、JS、图片、视频等链接，逐个发起新的 HTTP 请求下载资源，最后组装成完整页面。课上还用 Chrome 的 F12 开发者工具现场演示了这一过程。
知识点详解¶
Web 服务的三个核心角色（约 00:00–02:00）¶
- 浏览器（Browser）：负责发送请求，并在接收到响应后，把 HTML 格式的文本通过浏览器窗口渲染成用户看到的精美页面（要达到精美效果还需要 CSS、JS 等额外内容）。
- HTTP 协议：规定浏览器和服务器之间如何通信——按照什么格式发消息、会得到什么格式的返回。老师打比方说像"地下党交换口令"，必须符合特定格式才会被理睬。（以学校官网为例，浏览器发送的是
GET类型的 HTTP Request。） - Web 服务器（Server）：本质上是运行在某台机器上的一个软件（Software），它接收 HTTP 请求，按照一定的逻辑进行处理后，返回相应的响应。"按什么逻辑处理"正是本章后续内容要讲的。
一个页面 = 多次 HTTP 请求（约 02:00–05:50）¶
- 疑问：一个网页除了 HTML 文字，还有图片、视频、广告，这跟"发一个请求、返回一个 HTML"对不上？
- 解答：浏览器拿到服务器返回的 HTML 后，发现 HTML 里包含很多新的链接（URL），会**自动**逐一访问这些 URL 并把相应资源下载下来：
- 包含 CSS 文件地址 → 获取 CSS 文件
- 包含图片 → 获取图片
- 包含内嵌 HTML、JS、视频、广告图片 → 逐个获取
- 这些资源甚至可能不在同一台机器上。打开一个页面时，实际可能向多个不同地址发送了多个不同的 HTTP 请求、接收了很多响应，整个过程由浏览器自动完成。
用 Chrome F12 观察真实过程（约 07:00–10:30）¶
- 在 Chrome 中按
F12打开开发者工具，切到 Network 标签，刷新网页即可看到回车后发生的完整过程。 - 观察要点：
- 只输入了一个网址，但浏览器先发第一个 HTTP 请求，随后按时间顺序不断发送许多新请求；只有这些新请求陆续得到响应，页面才能完整加载出来。
- 演示时老师的课程网站因字体链接加载缓慢而卡住——如果去掉这几个字体链接就不会这么慢（老师备课时顺手发现的问题）。
- 点击某个请求，右侧可以看到 HTTP 请求头部的具体内容（属于计算机网络的内容，了解即可），以及服务器返回的超长 HTML 字符串。
- 浏览器会分析这个 HTML 字符串，找到其中写好的新链接（JS 文件、内嵌 HTML、CSS、图片等），逐一下载。
示例与演示¶
- 演示：Chrome F12 + Network 面板观察网页加载。访问老师的课程网站，观察首请求之后浏览器自动发起的一系列资源请求；观察某次加载卡顿是字体资源加载慢导致的；点开单个请求查看请求头和返回的 HTML 文本。
重点与难点¶
- 最简模型："发一个请求、拿一个响应"非常容易理解，但真实网页加载是"一个首请求 + 浏览器自动发起的 N 个后续请求"，这是初学者最容易忽略的点。
- 浏览器是自动完成资源聚合的——用户只回车了一次，其余请求都由浏览器代为发出。
- 请求头、协议细节属于计算机网络课程范畴，本课只要求知道这个过程存在，不深入展开。
关联内容¶
- 是后续 12.2《Web开发演变》、12.3《静态与动态示例对比》的直接铺垫：理解了"浏览器—HTTP—服务器"模型，才能讨论静态网页与动态网页的区别。
- HTTP 请求/响应、URL 等概念与计算机网络课程相关，老师明确不展开。
- 页面渲染涉及 HTML/CSS/JS，与学生此前学过的网页设计课程衔接。