理解 URL、路径、端口、index.html 这些基础概念，是搞懂网站工作原理的第一步。
URL 的组成
一个完整的 URL（网址）长这样：
https://rgarden.pages.dev/学习/freertos-kernel/02-任务管理与调度
│ │ │
│ │ └── 路径（Path）：要访问服务器上的哪个资源
│ └───────────────── 域名：服务器在互联网上的地址
└──────────────────────── 协议：用什么规则通信
| 部分 | 作用 | 例子 |
|---|---|---|
| 协议 | 浏览器和服务器之间的通信规则 | http://、https:// |
| 域名/IP | 找到互联网上的服务器 | rgarden.pages.dev、47.104.189.4 |
| 端口 | 找到服务器上的具体服务 | 默认省略（见下文） |
| 路径 | 访问哪个资源 | /学习/freertos-kernel/ |
| 查询参数 | 传给服务器的额外数据 | ?file=xxx&page=2（?后面） |
| 锚点 | 页面内定位 | #章节3（#后面，不发给服务器） |
端口为什么不显示
浏览器和服务器有个约定：使用协议默认端口时可以省略不写。
| 协议 | 默认端口 | 说明 |
|---|---|---|
| HTTP | 80 | 服务器监听80 → 地址栏不显示端口 |
| HTTPS | 443 | 服务器监听443 → 地址栏不显示端口 |
https://rgarden.pages.dev/ ← 实际访问 rgarden.pages.dev:443
http://47.104.189.4/playlist/ ← 实际访问 47.104.189.4:80
http://localhost:8080/ ← 非默认端口，必须写明
端口可以理解为”分机号”：
- IP/域名 = 公司总机号码
- 端口 = 分机号
- 80/443 = 总机默认前台，不用拨分机号
- 其他端口 = 需要拨分机号才能找到具体服务
知名端口（0~1023）是IANA规定的，需要管理员权限才能监听。自己开发时一般用 8080、3000、5173 这些高端口。
路径和文件夹的关系
URL 里的 / 就是分隔符，和电脑文件夹的层级是一个道理：
http://47.104.189.4/playlist/others/
│ │ │
│ │ └── 第二层子目录
│ └── 第一层子目录
└── 服务器根目录
服务器收到请求后，把路径映射到自己硬盘上的文件：
服务器网站根目录（如 /var/www/）
├── index.html ← 访问 http://47.104.189.4/
├── playlist/ ← 访问 /playlist/
│ ├── index.html ← playlist 的首页
│ └── others/ ← 访问 /playlist/others/
│ └── index.html ← others 页面
└── css/
└── style.css
index.html 是什么
访问一个目录（URL 以 / 结尾）时，服务器会自动在该目录下找 index.html 并返回——这是 Web 服务器的约定。
不是浏览器做的，是服务器做的。 浏览器只是发请求”给我这个路径的内容”，服务器发现这是个目录，就找 index.html 返回。
访问 /学习/freertos-kernel/ → 服务器返回 /学习/freertos-kernel/index.html
访问 /学习/ → 服务器返回 /学习/index.html
访问 / → 服务器返回 /index.html（网站首页）
你的数字花园里每个文件夹都有 index.md，构建后变成 index.html，作为该文件夹的目录页/首页。
如果没有 index.html 会怎样
| 情况 | 结果 |
|---|---|
| 传统服务器默认配置 | 返回 403 Forbidden 或 404（不暴露目录内容） |
| 开了目录浏览（autoindex） | 显示文件列表（像FTP，下载站才用） |
| Quartz（你的数字花园） | 自动生成一个文件列表页（能用但简陋，建议自己写 index.md） |
| 动态网站 | 执行后端程序，动态生成页面返回 |
静态 vs 动态路径
路径不一定对应真实文件：
- 静态站（你的数字花园、Hexo博客）：路径 = 文件路径，服务器直接返回对应文件
- 动态站（WordPress、Memos、各类App）：路径只是一个标识，后端程序决定返回什么
- SPA单页应用：所有路径都返回同一个
index.html，JavaScript 在浏览器里根据路径渲染
每次点击都在发请求
你访问网页、点击链接、提交表单，每一个操作背后浏览器都在自动发送 HTTP 请求，只是你感觉不到。
打开一个网页的过程
输入网址按回车，背后发生了一连串事情：
1. 浏览器向 DNS 服务器发请求：rgarden.pages.dev 的IP是多少？
2. DNS 返回 IP 地址
3. 浏览器向那个 IP 的 443 端口发 HTTP 请求："GET / HTTP/1.1"
4. 服务器返回 index.html 的内容
5. 浏览器解析 HTML，发现里面引用了 CSS、JS、图片
6. 浏览器自动再发多个请求：GET /index.css、GET /prescript.js、GET /icon.png ...
7. 所有资源都拿到了，渲染成你看到的页面
打开一个网页，背后可能发了几十个请求。你看到页面”刷”一下出来了，是因为浏览器在几百毫秒内完成了所有这些事情。
HTTP 请求长什么样
你点链接时，浏览器发出的实际上是一段文本：
GET /学习/freertos-kernel/ HTTP/1.1
Host: rgarden.pages.dev
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)...
Accept: text/html
Cookie: ...（如果你登录过，这里会带Cookie）
Referer: https://rgarden.pages.dev/
服务器返回：
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
<!DOCTYPE html>
<html>...页面内容...</html>
浏览器拿到HTML，渲染成你看到的页面。
常见操作对应的请求
| 你做的操作 | 浏览器背后做的 |
|---|---|
| 输入网址按回车 | GET 请求首页HTML |
点链接 <a href="xxx"> | GET 请求那个页面 |
页面加载图片 <img src="xxx.jpg"> | GET 请求图片文件 |
| 页面加载CSS/JS | GET 请求CSS/JS文件 |
| 搜索框按回车 | GET 请求 /search?q=你输入的内容 |
| 提交登录表单 | POST 请求，把用户名密码放在请求体里发给服务器 |
| 点”点赞”按钮 | POST/PUT 请求告诉服务器”这个用户点了赞” |
| 无限滚动加载更多 | 浏览器自动发 GET 请求加载更多内容（AJAX） |
为什么攻击者可以”构造请求”
因为HTTP是纯文本协议，任何人都可以不用浏览器，自己写一段HTTP报文发给服务器。常见工具：
- curl：命令行工具，直接发HTTP请求
- Postman：图形化工具，可视化构造请求
- 浏览器F12开发者工具：可以修改请求、重放请求
# 这相当于你在浏览器访问了这个网址
curl https://rgarden.pages.dev/学习/freertos-kernel/
# 这相当于提交登录表单，但密码可以随便填长度
curl -X POST https://example.com/api/login -d '{"password":"123"}'
# 这就是路径遍历攻击的请求
curl "https://example.com/download?file=../../../etc/passwd"
这就是为什么说”不能信任用户输入”——URL、参数、请求头、Cookie 全都可以伪造。详见 06-Web安全入门。
常见问题
Q: 路径末尾的 / 要不要写？
- 写
/：表示这是目录，服务器找 index.html - 不写
/：表示这是文件，服务器找对应文件。但大多数服务器会自动 301 重定向到带/的版本 - Quartz 生成的链接都不带
.html后缀，Nginx/Caddy/Cloudflare 会自动处理
Q: 中文路径会不会有问题？
- URL 里的中文会被自动编码（如
学习变成%E5%AD%A6%E4%B9%A0），现代浏览器和服务器都支持 - 你的数字花园就是中文路径，Cloudflare Pages 能正常处理
Q: 锚点（#后面的内容）会发给服务器吗？
- 不会。
#xxx只在浏览器本地使用，用来滚动到页面指定位置，不会随HTTP请求发给服务器。
下一步：05-前端与后端
相关：01-域名与DNS ｜ 02-反向代理 ｜ 03-端口与HTTPS ｜ 返回目录