初学者理解 Web 工作原理（完全教程）
目录
-
引言
-
Web 是什么
- 2.1 从用户角度看 Web
- 2.2 从技术角度看 Web
- 2.3 Web 与互联网的区别
-
Web 的核心组件
- 3.1 客户端（Client）
- 3.2 服务器（Server）
- 3.3 网络（Network）
- 3.4 协议（Protocol）
-
当你访问一个网站时发生了什么
- 4.1 输入网址
- 4.2 DNS 解析
- 4.3 建立连接
- 4.4 发送请求
- 4.5 服务器处理
- 4.6 返回响应
- 4.7 浏览器渲染
- 4.8 流程完整图示
-
Web 的核心协议
- 5.1 HTTP/HTTPS 协议
- 5.2 HTTP 请求方法
- 5.3 HTTP 状态码
- 5.4 HTTP 请求与响应结构
- 5.5 Cookie 与 Session
-
前端与后端
- 6.1 什么是前端
- 6.2 什么是后端
- 6.3 前端与后端的交互
- 6.4 全栈
-
数据如何存储
- 7.1 数据库的作用
- 7.2 常见数据库类型
- 7.3 数据从输入到存储的流程
-
Web 安全基础
- 8.1 HTTPS 为何重要
- 8.2 常见安全威胁
- 8.3 基本防护措施
-
从零搭建一个简单 Web 应用
- 9.1 准备环境
- 9.2 创建 HTML 页面
- 9.3 用 Flask 搭建后端
- 9.4 运行并访问
- 9.5 理解每个部分的作用
-
常用术语表
-
下一步学习路径
-
总结
1. 引言
当你在浏览器中输入 www.google.com 并按下回车，到页面出现在屏幕上，这短短几秒钟背后发生了什么？如果你是一个 Web 开发的初学者，理解这个过程是掌握 Web 开发的第一步。
本教程将从零开始，用通俗易懂的语言和大量图示，为你完整解析 Web 的工作原理。无论你是想成为前端工程师、后端工程师，还是仅仅想了解互联网如何运作，本教程都适合你。
阅读前提： 无需任何编程或计算机基础，所有概念都会从零解释。
2. Web 是什么
2.1 从用户角度看 Web
你每天用手机或电脑做的事情：
- 刷抖音、看 B 站
- 逛淘宝、京东
- 看新闻、查资料
- 发微信、刷朋友圈
- 用 ChatGPT 问问题
所有这些，本质上都是在 访问 Web 上的资源。
2.2 从技术角度看 Web
Web（万维网） 是一个通过互联网访问的、由超链接相互连接的文档和资源的系统。
更直白地说，Web 就是 你访问网站时看到的所有内容。它由三个核心部分组成：
┌─────────────────────────────────────────────────────────────────┐
│ Web 的三大核心技术 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ HTML │ │ HTTP │ │ URL │ │
│ │ (内容) │ │ (传输) │ │ (地址) │ │
│ │ 网页内容 │ │ 通信协议 │ │ 资源位置 │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘2.3 Web 与互联网的区别
很多人把"Web"和"互联网"混为一谈，但它们其实是不同的概念：
| 互联网 | Web | |
|---|---|---|
| 本质 | 基础设施 | 建在基础设施上的服务 |
| 比喻 | 公路网 | 公路上的店铺和住宅 |
| 包括 | 所有网络连接（邮件、FTP、Web等） | 网站、网页 |
| 协议 | TCP/IP | HTTP/HTTPS |
简单说：互联网是"路"，Web 是"路上跑的车"。
3. Web 的核心组件
理解 Web 工作原理，首先要认识 Web 的四大组件：
3.1 客户端（Client）
客户端是用户使用的设备，用于请求和接收 Web 资源。
最常见的客户端就是浏览器，除此之外，手机 App、智能电视、语音助手也都是客户端。
┌─────────────────────────────────────────────────────────────────┐
│ 常见客户端 │
├─────────────────────────────────────────────────────────────────┤
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ Chrome │ │ Safari │ │ Firefox │ │
│ │ 浏览器 │ │ 浏览器 │ │ 浏览器 │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ 微信 App │ │ 淘宝 App │ │ 抖音 App │ │
│ │ 手机应用 │ │ 手机应用 │ │ 手机应用 │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
└─────────────────────────────────────────────────────────────────┘3.2 服务器（Server）
服务器是存放网站资源的计算机，当客户端请求时，服务器会返回相应的数据。
服务器比普通电脑更强大、更稳定，通常 24 小时不间断运行，被放置在专门的数据中心里。
┌─────────────────────────────────────────────────────────────────┐
│ 服务器类型 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ Web 服务器 │ │
│ │ 存放网页文件，处理 HTTP 请求 │ │
│ │ 例如：Nginx、Apache │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 应用服务器 │ │
│ │ 运行程序代码，处理业务逻辑 │ │
│ │ 例如：Node.js、Flask、Spring Boot │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 数据库服务器 │ │
│ │ 存储和查询数据 │ │
│ │ 例如：MySQL、PostgreSQL、MongoDB │ │
│ └─────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘3.3 网络（Network）
网络是连接客户端和服务器的"通道" 。没有网络，客户端和服务器就无法通信。
简单理解就是数据在互联网上传输的路径：
- 用户的 WiFi/蜂窝网络
- 路由器、交换机等网络设备
- 光纤、海底电缆等物理线路
3.4 协议（Protocol）
协议是通信的"语言"和"规则" 。如果客户端和服务器不说同一种语言，它们就无法理解对方。
Web 中使用的主要协议是 HTTP（超文本传输协议） 和 HTTPS（HTTP Secure） 。
┌─────────────────────────────────────────────────────────────────┐
│ 协议的作用 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 客户端用 HTTP "说" → 服务器听懂 HTTP "回答" │
│ "我要一个页面" "好，这是页面" │
│ │
│ 就像两个人说话必须使用相同的语言才能沟通 │
│ │
└─────────────────────────────────────────────────────────────────┘4. 当你访问一个网站时发生了什么
这是本教程最核心的部分。理解了这一节，你就掌握了 Web 工作原理的 80%。
4.1 输入网址
假设你在浏览器地址栏输入：
https://www.example.com这是一个 URL（统一资源定位符） ，也就是"网址"。它告诉浏览器去互联网的哪个位置找资源。
URL 的结构：
https://www.example.com/path/page.html
│ │ │ │ │ │
│ │ │ │ │ └── 资源路径
│ │ │ │ └────────── 端口（省略）
│ │ │ └─────────────── 顶级域名（TLD）.com
│ │ └─────────────────────── 二级域名（SLD）example
│ └─────────────────────────── 三级域名（子域名）www
└────────────────────────────────── 协议 scheme4.2 DNS 解析
浏览器知道你要访问 www.example.com，但不知道这个域名对应的 IP 地址是什么。
IP 地址 是网络上的"门牌号"，所有设备在网络中的唯一标识，格式如 192.168.1.1 或 2001:db8::1。
┌─────────────────────────────────────────────────────────────────┐
│ DNS 解析过程 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 浏览器问："www.example.com 的 IP 地址是多少？" │
│ │
│ │ │
│ ▼ │
│ ┌─────────────┐ │
│ │ DNS 服务器 │ ← 查询域名对应的 IP │
│ └─────────────┘ │
│ │ │
│ ▼ │
│ 回答："www.example.com 的 IP 地址是 192.0.2.1" │
│ │
└─────────────────────────────────────────────────────────────────┘这就好比你要找一个人，先查通讯录找到他的地址，DNS 就是互联网的"通讯录"。
4.3 建立连接
拿到 IP 地址后，浏览器通过网络与服务器建立连接。这个连接建立在 TCP 协议 基础上，大致过程是：
客户端 → "你好，我想和你建立连接"
服务器 → "好的，收到了，你准备好了吗？"
客户端 → "准备好了，我们开始吧！"这个过程称为 三次握手，确保客户端和服务器之间建立了可靠的通信通道。
4.4 发送请求
连接建立后，浏览器向服务器发送一个 HTTP 请求。这个请求包含了：
GET /path/page.html HTTP/1.1
Host: www.example.com
User-Agent: Chrome/120.0.0.0
Accept: text/html,application/xhtml+xml这相当于在说：
- "我要获取
/path/page.html这个资源" - "我用的是 HTTP/1.1 协议"
- "请发送给 Chrome 浏览器"
- "我能接受 HTML 格式的响应"
一个 HTTP 请求的主要部分：
┌─────────────────────────────────────────────────────────────────┐
│ HTTP 请求结构 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 请求行 │ │
│ │ GET /page.html HTTP/1.1 │ │
│ │ (方法 路径 协议版本) │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 请求头 │ │
│ │ Host: www.example.com │ │
│ │ User-Agent: Chrome │ │
│ │ Accept: text/html │ │
│ │ Cookie: session_id=1234 │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 请求体（通常是 POST 请求才有） │ │
│ │ username=alice&password=123456 │ │
│ └─────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘4.5 服务器处理
服务器收到请求后，开始处理：
┌─────────────────────────────────────────────────────────────────┐
│ 服务器处理流程 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 1. Web 服务器（如 Nginx）接收请求 │
│ │ │
│ ▼ │
│ 2. 判断请求的是静态文件还是动态内容 │
│ │ │
│ ├── 静态文件（图片、CSS、JS）→ 直接返回文件 │
│ │ │
│ └── 动态内容 → 交给应用服务器（如 Python/Node.js） │
│ │ │
│ ▼ │
│ 3. 应用服务器执行业务逻辑 │
│ - 查询数据库 │
│ - 处理数据 │
│ - 生成 HTML 页面 │
│ │ │
│ ▼ │
│ 4. 返回生成的响应 │
│ │
└─────────────────────────────────────────────────────────────────┘静态文件 vs 动态内容：
| 静态文件 | 动态内容 | |
|---|---|---|
| 例子 | logo.png、style.css | 用户主页、搜索结果 |
| 特点 | 所有人看到的一样 | 不同用户看到不同内容 |
| 生成 | 直接返回文件 | 服务器即时生成 |
| 速度 | 快 | 较慢 |
4.6 返回响应
服务器处理完成后，返回一个 HTTP 响应：
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 2345
<!DOCTYPE html>
<html>
<head>
<title>Example Page</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>响应的主要部分：
┌─────────────────────────────────────────────────────────────────┐
│ HTTP 响应结构 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 状态行 │ │
│ │ HTTP/1.1 200 OK │ │
│ │ (协议版本 状态码 状态描述) │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 响应头 │ │
│ │ Content-Type: text/html │ │
│ │ Content-Length: 2345 │ │
│ │ Set-Cookie: session_id=1234 │ │
│ │ Cache-Control: max-age=3600 │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 响应体（网页内容） │ │
│ │ <!DOCTYPE html> │ │
│ │ <html>... │ │
│ └─────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘状态码 是响应的"数字摘要"，告诉客户端请求的结果：
| 状态码 | 含义 | 例子 |
|---|---|---|
| 200 | 成功 | 正常访问页面 |
| 301 | 永久重定向 | 网站迁移了 |
| 404 | 未找到 | 页面不存在 |
| 500 | 服务器错误 | 程序出错了 |
4.7 浏览器渲染
浏览器收到 HTML 内容后，开始 渲染页面：
┌─────────────────────────────────────────────────────────────────┐
│ 浏览器渲染流程 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 1. 解析 HTML → 构建 DOM 树 │
│ (将 HTML 标签转换为可操作的对象) │
│ │
│ 2. 解析 CSS → 构建 CSSOM 树 │
│ (将样式转换为可应用的对象) │
│ │
│ 3. 合并 DOM + CSSOM → 渲染树 │
│ (确定哪些元素要显示，如何显示) │
│ │
│ 4. 布局 (Layout) │
│ (计算每个元素在页面上的精确位置) │
│ │
│ 5. 绘制 (Paint) │
│ (将内容绘制到屏幕上) │
│ │
└─────────────────────────────────────────────────────────────────┘关键概念：
- DOM（文档对象模型） ：浏览器将 HTML 解析成的一种树形结构，JavaScript 可以通过 DOM 来修改页面内容。
- CSSOM：浏览器将 CSS 解析成的对象模型，用于确定元素的样式。
在这个过程中，如果页面引用了额外的资源（图片、CSS 文件、JavaScript 文件），浏览器会再次发起请求去获取这些资源。
4.8 流程完整图示
┌─────────────────────────────────────────────────────────────────────────────────────────────────────┐
│ 一次网页访问的完整流程 │
├─────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ │
│ 用户端 网络 服务器 │
│ │
│ 浏览器输入网址 ──────────────────────────────────────────────────────────▶ DNS 服务器 │
│ https://example.com (查询 IP 地址) │
│ │
│ 浏览器 ▶ TCP 连接 ◀ Web 服务器 (Nginx/Apache) │
│ ────────────────── 发送 HTTP 请求 ──────────────────────▶ (接收请求) │
│ │
│ │ │
│ ▼ │
│ 应用服务器 (Python/Node) │
│ │ │
│ ▼ │
│ 数据库 (MySQL/PostgreSQL) │
│ │ │
│ ◀───────────────── 返回 HTTP 响应 ────────────────────── (返回页面) │
│ │
│ 浏览器解析和渲染 │
│ (HTML → DOM → 布局 → 绘制) │
│ │
│ 用户看到页面 │
│ │
└─────────────────────────────────────────────────────────────────────────────────────────────────────┘5. Web 的核心协议
5.1 HTTP/HTTPS 协议
HTTP（超文本传输协议） 是 Web 上所有通信的基础。
-
HTTP：明文传输，不安全
-
HTTPS：加密传输，安全
┌─────────────────────────────────────────────────────────────────┐
│ HTTP vs HTTPS │
├─────────────────────────────────────────────────────────────────┤
│ │
│ HTTP HTTPS │
│ ┌─────────┐ ┌─────────────────┐ │
│ │ 明文 │ 不安全，易被窃听 │ 加密 │ │
│ │ 数据 │ │ 数据 │ │
│ └─────────┘ └─────────────────┘ │
│ │
│ 就像寄明信片 就像寄挂号信 │
│ 任何人都能看到内容 只有收件人能拆开 │
│ │
└─────────────────────────────────────────────────────────────────┘
5.2 HTTP 请求方法
HTTP 定义了多种"动词"来表示不同的操作：
| 方法 | 用途 | 示例 |
|---|---|---|
| GET | 获取资源 | 访问一个页面、查看图片 |
| POST | 提交数据 | 登录、发表文章 |
| PUT | 替换资源 | 修改数据 |
| DELETE | 删除资源 | 删除一条记录 |
| PATCH | 部分更新 | 修改用户信息 |
用生活中的类比来理解：
餐厅点餐比喻：
GET → 看菜单（获取信息）
POST → 点菜（提交订单）
PUT → 换一道菜（替换整个订单）
DELETE → 退菜（删除订单）
PATCH → 备注"不要香菜"（部分修改）5.3 HTTP 状态码
状态码帮助客户端快速了解请求的结果：
┌─────────────────────────────────────────────────────────────────┐
│ HTTP 状态码分类 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 1xx 信息回应：请求已收到，继续处理 │
│ ├── 100 Continue │
│ └── 101 Switching Protocols │
│ │
│ 2xx 成功：请求成功处理 │
│ ├── 200 OK (成功) │
│ ├── 201 Created (创建成功) │
│ └── 204 No Content (无内容返回) │
│ │
│ 3xx 重定向：需要进一步操作 │
│ ├── 301 Moved Permanently (永久迁移) │
│ ├── 302 Found (临时迁移) │
│ └── 304 Not Modified (未修改，使用缓存) │
│ │
│ 4xx 客户端错误：请求有误 │
│ ├── 400 Bad Request (请求无效) │
│ ├── 401 Unauthorized (未授权) │
│ ├── 403 Forbidden (禁止访问) │
│ └── 404 Not Found (找不到资源) │
│ │
│ 5xx 服务器错误：服务器处理失败 │
│ ├── 500 Internal Server Error (服务器内部错误) │
│ ├── 502 Bad Gateway (网关错误) │
│ └── 503 Service Unavailable (服务不可用) │
│ │
└─────────────────────────────────────────────────────────────────┘5.4 HTTP 请求与响应结构
一个典型的 HTTP 请求：
POST /api/login HTTP/1.1 ← 请求行
Host: www.example.com ← 请求头开始
User-Agent: Chrome/120.0
Content-Type: application/json
Content-Length: 35
{"username": "alice", "password": "123"} ← 请求体一个典型的 HTTP 响应：
HTTP/1.1 200 OK ← 状态行
Content-Type: application/json ← 响应头开始
Content-Length: 42
Set-Cookie: session=abc123
Cache-Control: no-cache
{"status": "success", "user_id": 42} ← 响应体5.5 Cookie 与 Session
HTTP 是 无状态 的协议，也就是说服务器不会自动记住你每次访问的情况。那为什么你登录淘宝后，浏览不同页面时不会"掉线"呢？
这是通过 Cookie 和 Session 机制实现的。
┌─────────────────────────────────────────────────────────────────┐
│ Cookie 与 Session 如何工作 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 1. 用户登录：提交用户名和密码 │
│ │
│ 2. 服务器验证身份 │
│ │ │
│ ▼ │
│ 3. 服务器创建 Session（存储在服务器端） │
│ ┌─────────────────────────────────────────────┐ │
│ │ Session 数据：{user_id: 123, role: 'admin'}│ │
│ └─────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ 4. 服务器返回 Cookie │
│ Set-Cookie: session_id=xyz1234 │
│ │
│ 5. 浏览器保存 Cookie │
│ │
│ 6. 后续请求都携带 Cookie │
│ Cookie: session_id=xyz1234 │
│ │
│ 7. 服务器用 Cookie 找到对应的 Session │
│ → 识别用户身份 │
│ │
└─────────────────────────────────────────────────────────────────┘| Cookie | Session | |
|---|---|---|
| 存储位置 | 客户端（浏览器） | 服务器端 |
| 容量限制 | 通常 4KB | 较大，取决于服务器 |
| 安全性 | 低，可被修改 | 高，存储在服务器 |
| 用途 | 存储会话标识、偏好设置 | 存储用户状态 |
6. 前端与后端
6.1 什么是前端
前端是用户直接看到和交互的部分，即"脸面"。
前端技术栈：
┌─────────────────────────────────────────────────────────────────┐
│ 前端技术栈 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ HTML - 内容结构 │ │
│ │ 定义页面有哪些内容（标题、段落、图片、按钮） │ │
│ │ 就像房子的骨架 │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ CSS - 样式与布局 │ │
│ │ 定义内容如何显示（颜色、大小、位置） │ │
│ │ 就像房子的装修 │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ JavaScript - 交互行为 │ │
│ │ 定义页面的动态行为（点击响应、数据更新、动画） │ │
│ │ 就像房子的水电和智能系统 │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘前端框架（帮助你更高效地开发前端）：
| 框架 | 说明 |
|---|---|
| React | Facebook 开发，目前最流行 |
| Vue | 轻量、易上手，国内使用广泛 |
| Angular | Google 开发，功能全面 |
6.2 什么是后端
后端是用户看不到的部分，负责处理数据、业务逻辑和服务器运算。
后端技术栈：
┌─────────────────────────────────────────────────────────────────┐
│ 后端技术栈 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 编程语言 │ │
│ │ Python (Flask/Django)、Node.js (Express)、 │ │
│ │ Java (Spring Boot)、Go、Rust │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ Web 框架 │ │
│ │ Flask/Django (Python) │ │
│ │ Express (Node.js) │ │
│ │ Spring Boot (Java) │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 数据库 │ │
│ │ MySQL、PostgreSQL、MongoDB、Redis │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 服务器 │ │
│ │ Nginx、Apache │ │
│ └─────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘6.3 前端与后端的交互
┌─────────────────────────────────────────────────────────────────┐
│ 前后端交互流程 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ │ HTTP 请求 │ │ │
│ │ 前端 │ ──────────────▶ │ 后端 │ │
│ │ (浏览器) │ │ (服务器) │ │
│ │ │ HTTP 响应 │ │ │
│ │ │ ◀────────────── │ │ │
│ └──────────────┘ └──────────────┘ │
│ │ │ │
│ │ │ │
│ │ ▼ │
│ │ ┌──────────────┐ │
│ │ │ 数据库 │ │
│ │ └──────────────┘ │
│ │ │
│ ▼ │
│ 用户看到页面 │
│ │
└─────────────────────────────────────────────────────────────────┘API（应用程序编程接口） 是前后端通信的"契约"。前端通过 API 告诉后端"我要什么"，后端通过 API 返回"结果是什么"。
6.4 全栈
全栈开发者 既懂前端也懂后端，可以独立完成整个 Web 应用。
┌─────────────────────────────────────────────────────────────────┐
│ 全栈开发者技能树 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ 前端技能 │ │ 后端技能 │ │ 运维技能 │ │
│ ├─────────────┤ ├─────────────┤ ├─────────────┤ │
│ │ HTML/CSS │ │ 编程语言 │ │ 服务器部署 │ │
│ │ JavaScript │ │ Web 框架 │ │ 数据库管理 │ │
│ │ React/Vue │ │ 数据库 │ │ 监控/日志 │ │
│ │ 性能优化 │ │ API 设计 │ │ Docker/云 │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘7. 数据如何存储
7.1 数据库的作用
网站需要存储大量的数据：
- 用户信息
- 文章内容
- 商品信息
- 订单记录
- 评论
数据库 就是存储这些数据的仓库，并允许程序高效地读写和查询。
7.2 常见数据库类型
┌─────────────────────────────────────────────────────────────────┐
│ 数据库类型 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 关系型数据库 (SQL) │ │
│ │ 数据以表格形式存储，有明确的结构 │ │
│ │ 优点：一致性高、适合复杂查询 │ │
│ │ 缺点：扩展性有限 │ │
│ │ 例子：MySQL、PostgreSQL、SQLite │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 非关系型数据库 (NoSQL) │ │
│ │ 数据以文档、键值对等形式存储，结构灵活 │ │
│ │ 优点：扩展性好、读写快 │ │
│ │ 缺点：数据一致性较弱 │ │
│ │ 例子：MongoDB、Redis、Cassandra │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘7.3 数据从输入到存储的流程
以用户注册为例：
┌─────────────────────────────────────────────────────────────────┐
│ 注册流程 - 数据流向 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 1. 用户在浏览器输入用户名、密码 │
│ │
│ 2. 点击"注册"按钮 │
│ │
│ 3. 前端收集数据，发送 POST 请求到 API │
│ POST /api/register │
│ Body: {"username": "alice", "password": "123"} │
│ │
│ 4. 后端接收请求 │
│ │ │
│ ▼ │
│ 5. 后端验证数据 │
│ - 用户名是否已被占用？ │
│ - 密码是否太短？ │
│ │
│ 6. 后端对密码进行加密（不能明文存储！） │
│ │
│ 7. 后端将数据存入数据库 │
│ INSERT INTO users (username, password_hash) │
│ VALUES ('alice', 'encrypted_password') │
│ │
│ 8. 数据库确认存储成功 │
│ │
│ 9. 后端返回成功响应 │
│ {"status": "success", "message": "User created"} │
│ │
│ 10. 前端显示"注册成功"提示 │
│ │
└─────────────────────────────────────────────────────────────────┘8. Web 安全基础
8.1 HTTPS 为何重要
HTTP 的所有数据都是明文传输的，任何人都可以截获和查看。
HTTP (不安全) HTTPS (安全)
┌──────────────────┐ ┌──────────────────┐
│ 用户名: alice │ 明文传输 │ *********** │ 加密传输
│ 密码: 123456 │ │ *********** │
│ 信用卡: 4111 │ │ *********** │
└──────────────────┘ └──────────────────┘HTTPS 通过 SSL/TLS 加密 保护数据，即使被截获也无法读取。
8.2 常见安全威胁
| 威胁 | 说明 | 比喻 |
|---|---|---|
| SQL注入 | 恶意 SQL 代码被插入查询 | 有人冒充你给银行打电话取钱 |
| XSS (跨站脚本) | 恶意脚本被注入页面 | 有人在你的店铺墙上贴了假广告 |
| CSRF (跨站请求伪造) | 诱导用户执行非预期的操作 | 有人冒充你签了一份合同 |
| 中间人攻击 | 截获并篡改通信 | 邮递员拆了你的信并改了内容 |
8.3 基本防护措施
┌─────────────────────────────────────────────────────────────────┐
│ Web 安全最佳实践 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 1. 使用 HTTPS │
│ → 所有敏感数据都应通过 HTTPS 传输 │
│ │
│ 2. 输入验证和清理 │
│ → 永远不要信任用户输入，验证所有数据 │
│ │
│ 3. 使用参数化查询 │
│ → 防止 SQL 注入 │
│ │
│ 4. 密码加密存储 │
│ → 永远不要明文存储密码，使用 bcrypt 等算法 │
│ │
│ 5. 使用 CSRF Token │
│ → 防止跨站请求伪造 │
│ │
│ 6. 设置 CORS 策略 │
│ → 限制哪些来源可以访问你的 API │
│ │
│ 7. 定期更新依赖 │
│ → 修复已知的安全漏洞 │
│ │
└─────────────────────────────────────────────────────────────────┘9. 从零搭建一个简单 Web 应用
让我们通过一个实际例子，亲自体验 Web 的各个组件如何协同工作。
9.1 准备环境
确保你的电脑上安装了 Python 3.x：
bash
python --version
# Python 3.12.09.2 创建 HTML 页面
创建一个 templates/index.html 文件：
html
<!DOCTYPE html>
<html>
<head>
<title>我的第一个 Web 应用</title>
<style>
body { font-family: Arial, sans-serif; max-width: 500px; margin: 50px auto; padding: 20px; }
input, button { padding: 10px; margin: 5px 0; }
button { background: #007bff; color: white; border: none; cursor: pointer; }
#result { margin-top: 20px; padding: 10px; background: #f8f9fa; border-radius: 5px; }
</style>
</head>
<body>
<h1>👋 欢迎来到我的 Web 应用</h1>
<p>输入你的名字，点击提交：</p>
<input type="text" id="nameInput" placeholder="输入名字">
<button onclick="sayHello()">提交</button>
<div id="result"></div>
<script>
function sayHello() {
const name = document.getElementById('nameInput').value;
fetch('/api/hello', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: name })
})
.then(response => response.json())
.then(data => {
document.getElementById('result').textContent = data.message;
});
}
</script>
</body>
</html>9.3 用 Flask 搭建后端
创建一个 app.py 文件：
python
from flask import Flask, request, jsonify, render_template
app = Flask(__name__)
# 主页路由
@app.route('/')
def index():
return render_template('index.html')
# API 路由
@app.route('/api/hello', methods=['POST'])
def hello():
data = request.get_json()
name = data.get('name', '游客')
return jsonify({'message': f'你好, {name}! 欢迎来到 Web 世界！'})
if __name__ == '__main__':
app.run(debug=True, host='0.0.0.0', port=5000)安装依赖：
bash
pip install flask9.4 运行并访问
bash
python app.py在浏览器中打开 http://localhost:5000
尝试输入名字并点击提交，观察页面的变化。
9.5 理解每个部分的作用
┌─────────────────────────────────────────────────────────────────┐
│ 这个应用中的每个组件对应 Web 的什么？ │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 📁 index.html │
│ → HTML 定义页面结构 │
│ → CSS 定义样式 │
│ → JavaScript 处理用户交互和发送请求 │
│ │
│ 📁 app.py (Flask) │
│ → 后端服务器 │
│ → 处理 /api/hello 请求 │
│ → 执行业务逻辑（拼接问候语） │
│ → 返回 JSON 响应 │
│ │
│ 🔗 交互过程 │
│ 用户点击按钮 → JavaScript 发送请求 → Flask 处理 → 返回 │
│ 结果 → JavaScript 更新页面 │
│ │
└─────────────────────────────────────────────────────────────────┘10. 常用术语表
| 术语 | 英文 | 通俗解释 |
|---|---|---|
| URL | Uniform Resource Locator | 网址，如 https://www.example.com |
| 域名 | Domain Name | 网站的名字，如 google.com |
| IP 地址 | Internet Protocol Address | 设备的网络门牌号，如 192.168.1.1 |
| HTTP | HyperText Transfer Protocol | 网络通信的语言规则 |
| HTTPS | HTTP Secure | 加密版本的 HTTP |
| HTML | HyperText Markup Language | 网页的结构语言 |
| CSS | Cascading Style Sheets | 网页的样式语言 |
| JavaScript | - | 网页的交互语言 |
| API | Application Programming Interface | 程序间通信的接口 |
| JSON | JavaScript Object Notation | 数据传输的常用格式 |
| Cookie | - | 浏览器存储的小数据 |
| Session | - | 服务器存储的用户状态 |
| 前端 | Frontend | 用户看到的部分 |
| 后端 | Backend | 处理数据和逻辑的部分 |
| 服务器 | Server | 存放网站资源的计算机 |
| 客户端 | Client | 用户使用的设备（如浏览器） |
| 数据库 | Database | 存储数据的地方 |
| DNS | Domain Name System | 域名→IP 地址的翻译器 |
| 防火墙 | Firewall | 网络安全的门卫 |
11. 下一步学习路径
如果你已经理解了 Web 的基本工作原理，接下来可以根据你的兴趣选择学习方向：
┌─────────────────────────────────────────────────────────────────┐
│ Web 开发学习路径 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 阶段 1：打好基础 (1-2 个月) │
│ ├── HTML 基础 │
│ ├── CSS 基础 │
│ └── JavaScript 基础 │
│ │
│ 阶段 2：选择方向 │
│ ├── 前端深入 │
│ │ ├── React / Vue / Angular │
│ │ ├── 状态管理 (Redux / Pinia) │
│ │ └── 性能优化 │
│ │ │
│ ├── 后端深入 │
│ │ ├── Python (Flask/Django) / Node.js │
│ │ ├── 数据库设计 (SQL/NoSQL) │
│ │ └── API 设计与 RESTful 架构 │
│ │ │
│ └── 全栈 │
│ ├── 前后端结合的项目 │
│ └── 部署与运维 │
│ │
│ 阶段 3：深入学习 (持续) │
│ ├── 安全 (HTTPS、认证、OAuth) │
│ ├── 性能 (缓存、CDN、负载均衡) │
│ ├── 架构 (微服务、分布式系统) │
│ └── DevOps (Docker、CI/CD、云服务) │
│ │
└─────────────────────────────────────────────────────────────────┘免费学习资源推荐：
| 资源 | 地址 |
|---|---|
| MDN Web Docs | developer.mozilla.org |
| W3Schools | w3schools.com |
| FreeCodeCamp | freecodecamp.org |
| The Odin Project | theodinproject.com |
| 菜鸟教程 | runoob.com |
12. 总结
回顾一下我们学到的重要内容：
Web 工作原理的核心流程：
- 用户输入网址
- DNS 解析找到 IP 地址
- 浏览器与服务器建立连接
- 浏览器发送 HTTP 请求
- 服务器处理请求（查数据库、生成页面）
- 服务器返回 HTTP 响应（包含 HTML）
- 浏览器解析和渲染页面
- 用户看到页面
三个关键角色：
- 客户端（你）
- 服务器（网站）
- 网络（连接）
三个核心技术：
- HTML：内容
- CSS：样式
- JavaScript：交互
两个阶段：
- 前端：用户看到的
- 后端：用户看不到的
记住一句话：
Web 本质上是客户端通过 HTTP 协议向服务器请求资源，服务器返回资源，然后客户端展示和交互的过程。