Web 基础

这一课你将能做到

1. 拆解任意 URL 的协议、主机、端口、路径、查询参数和片段，并写出合法的相对路径
2. 解释 GET 和 POST 的区别，理解 MIME 类型如何决定浏览器处理资源的方式
3. 理解 URL 编码与解码规则，知道文件上传时 multipart/form-data 的编码原理

为什么要学

HTML 是「写给浏览器的信」，但浏览器怎么送信、送到哪、信里装什么，这些是 HTTP 和 URL 的职责。写 action="/submit" 时不知道路径是相对还是绝对，部署到子目录就 404；写 <a href="page.html"> 时不知道 GET 请求会把参数暴露在 URL，提交密码等于公开广播。理解 Web 基础，HTML 写出去才不会变成「漂流瓶」。

人话：HTML 是信的内容，URL 是收信地址，HTTP 是邮递方式，MIME 是信封上的标签。只学写信不学制式信封，信送不到。

先建立图像

一个 URL 的解剖图：

  https://   www.example.com   :8080   /path/to/page    ?id=123&name=张三   #section2
  │ 协议 │   │   主机域名   │   │端口│  │    路径    │   │      查询参数     │   │ 片段 │
  └──────┘   └──────────────┘   └────┘  └────────────┘   └───────────────────┘   └──────┘

相对路径的四种基准：

./page.html       → 当前目录（与 page.html 等价）
../page.html      → 上级目录
/page.html        → 域名根目录（不受当前路径影响）
page.html         → 当前目录（无 ./ 前缀的简写）

跟着做

步骤 1：URL 拆解

新建 web.html（只用于概念理解，无需打开）：

<!-- 同源 vs 跨域示例 -->
<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML">MDN HTML</a>
<a href="/about.html">站内关于页</a>
<a href="../contact.html">上级目录联系页</a>
<a href="./detail.html?id=100">当前目录详情页带参数</a>

逐层拆解 https://www.example.com:8080/app/users?id=42#profile：

组件	值	说明
协议	https	HTTP over TLS，加密传输
主机	www.example.com	域名，经 DNS 解析为 IP
端口	:8080	HTTP 默认 80，HTTPS 默认 443，非默认需显式写
路径	/app/users	服务器上的资源路径
查询	?id=42	键值对参数，用 & 分隔多个
片段	#profile	锚点，不发给服务器，纯客户端定位

步骤 2：相对路径实战

假设当前页面是 https://example.com/blog/2026/post.html：

<!-- 相对当前目录 → https://example.com/blog/2026/about.html -->
<a href="about.html">关于</a>

<!-- 相对上级目录 → https://example.com/blog/archive.html -->
<a href="../archive.html">归档</a>

<!-- 相对根目录 → https://example.com/images/logo.png -->
<img src="/images/logo.png" alt="Logo">

<!-- 协议相对 URL → 继承当前协议（http 或 https） -->
<script src="//cdn.example.com/lib.js"></script>