Web知识篇
什么是网页背后的秘密
你看到的网页，只是冰山一角
当你打开一个网页，看到的是精美的图片、流畅的动画、丰富的内容。但在这背后，有一整套复杂的系统在协同工作。
💡 类比：网页就像一出舞台剧。观众（你）看到的是演员表演（页面展示），但幕后有导演（服务器）、剧本（代码）、道具组（数据库）、灯光师（CSS）在默默配合。
加载图表中...
从输入网址到看到页面
当你在浏览器地址栏输入 www.example.com 并按下回车，背后发生了这些事：
加载图表中...
详细步骤
| 步骤 | 发生了什么 | 耗时 |
|---|---|---|
| ① DNS 解析 | 把域名翻译成 IP 地址 | ~20ms |
| ② 建立连接 | 浏览器和服务器建立 TCP 连接 | ~30ms |
| ③ 发送请求 | 浏览器发出 HTTP 请求 | ~5ms |
| ④ 服务器处理 | 服务器找到资源并返回 | ~50ms |
| ⑤ 下载资源 | 浏览器下载 HTML/CSS/JS/图片 | ~100ms |
| ⑥ 渲染页面 | 浏览器解析并绘制页面 | ~50ms |
整个过程通常在 1秒以内 完成。
网页的三大组成部分
每个网页都由三种技术构成，各司其职：
加载图表中...
一个简单的例子
<!-- HTML：定义结构 -->
<button id="likeBtn" class="like-button">
❤️ 点赞 (0)
</button>
/* CSS：定义样式 */
.like-button {
background-color: #F97316;
color: white;
padding: 8px 16px;
border-radius: 20px;
border: none;
cursor: pointer;
}
.like-button:hover {
background-color: #ea580c;
}
// JavaScript：定义行为
let count = 0;
document.getElementById("likeBtn").addEventListener("click", () => {
count++;
document.getElementById("likeBtn").textContent = `❤️ 点赞 (${count})`;
});
三者配合的结果：一个橙色圆角按钮，鼠标悬停会变深，点击后数字会增加。
前端与后端
网页开发分为两个阵营：
加载图表中...
| 对比 | 前端 | 后端 |
|---|---|---|
| 运行在哪 | 用户的浏览器 | 远程服务器 |
| 负责什么 | 页面展示、用户交互 | 数据处理、业务逻辑 |
| 语言 | HTML/CSS/JavaScript | Node.js/Python/Java/Go |
| 用户能看到 | ✅ 能看到源代码 | ❌ 看不到 |
浏览器是怎么渲染页面的？
浏览器收到 HTML 后，会经过一系列步骤把它变成你看到的页面：
加载图表中...
| 步骤 | 说明 |
|---|---|
| 解析 HTML | 构建 DOM 树（页面的结构） |
| 解析 CSS | 构建 CSSOM 树（样式规则） |
| 合并 | DOM + CSSOM = 渲染树 |
| 布局 | 计算每个元素的位置和大小 |
| 绘制 | 把最终结果画到屏幕上 |
现代网页的数据流
现代网页（特别是 Next.js 这样的框架）不只是静态页面，还涉及动态数据：
加载图表中...
客户端渲染 vs 服务端渲染
现代 Web 框架有两种主要的渲染方式：
加载图表中...
| 特性 | 客户端渲染 (CSR) | 服务端渲染 (SSR) |
|---|---|---|
| 首屏速度 | 较慢（需等 JS 下载执行） | 较快（直接返回完整页面） |
| SEO | 不友好（搜索引擎看到空页面） | 友好（页面内容完整） |
| 服务器压力 | 小（渲染在浏览器完成） | 大（每次请求都要渲染） |
| 代表框架 | React (create-react-app) | Next.js、Nuxt.js |
Next.js 同时支持两种方式，并且可以按页面选择最合适的渲染策略。
查看网页的"源代码"
你可以在任何网页上右键 → 查看页面源代码，看到浏览器收到的原始 HTML：
<!DOCTYPE html>
<html>
<head>
<title>示例网站</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个段落</p>
<script src="/app.js"></script>
</body>
</html>
你也可以按 F12 打开开发者工具，在 Elements 面板中实时查看和修改页面结构。
🎯 AI编程小贴士：想了解任何网页是怎么做的？按 F12 打开开发者工具，把你看到的 HTML 结构或 CSS 样式发给 AI，它能帮你分析实现方式，甚至帮你复刻类似的效果。
小结
- 从输入网址到看到页面，经历了 DNS解析 → 建立连接 → 请求资源 → 渲染页面 的过程
- 网页由 HTML（结构）、CSS（样式）、JavaScript（行为） 三部分组成
- 前端运行在浏览器，后端运行在服务器，通过 API 交换数据
- 浏览器通过构建 DOM树 和 CSSOM树 来渲染页面
- Next.js 支持服务端渲染，首屏更快、SEO更好