HTML URL 编码

HTML URL 编码

URL (Uniform Resource Locator，统一资源定位符) 是 Web 上资源的唯一地址，例如网页或图像。

URL 可以使用人类可读的名称（如 example.com）或 IP 地址（如 192.168.1.1）。大多数人使用名称，因为它们更容易记住。

理解 URL 结构

Web 浏览器使用 URL 从 Web 服务器请求资源。当你点击链接时，浏览器使用 <a> 标签的 href 属性中指定的 URL。

典型的 URL，如 https://www.example.com/path/to/resource.html，遵循标准结构：

scheme://host.domain:port/path/filename

解释：

• scheme：定义协议类型（例如，http、https）。https 是安全标准。
• host：通常是 www，但也可能不同。
• domain：域名（例如，example.com）。
• port：网络端口（http 的默认端口是 80，https 的默认端口是 443）。通常省略。
• path：服务器上资源的路径。
• filename：特定资源的名称（例如，resource.html）。

常用 URL scheme

以下是一些常用的 URL scheme：

Scheme	代表含义	主要用途
http	超文本传输协议	标准网页（未加密 - 避免用于敏感数据）。
https	安全超文本传输协议	安全（加密）网页。现代网站的标准。
ftp	文件传输协议	用于传输文件（目前在浏览器中较少使用）。
file	本地文件	引用本地计算机上的文件。

URL 编码（百分号编码）

URL 只能包含 ASCII 字符集中的有限字符。

标准集之外的字符（如空格、带重音的字母或符号）在通过互联网发送之前必须进行编码。此过程称为 URL 编码或百分号编码（Percent-Encoding）。

URL 编码将不安全或非 ASCII 字符替换为后跟其两位十六进制表示（基于其 UTF-8 字节值）的 ”%”。

例如，空格字符通常编码为 %20（尽管旧系统有时使用 +，但 %20 是路径和查询字符串的标准）。字符 €（欧元符号）在 UTF-8 编码中变为 %E2%82%AC。

大多数现代 Web 浏览器和开发框架在你导航或提交表单时会自动处理 URL 编码。然而，理解编码对于调试 URL 相关问题或通过编程方式构建 URL（例如，在 JavaScript 中使用 encodeURIComponent()）至关重要。

表单中的 URL 编码示例

考虑一个简单的 HTML 表单：

<form action="/search" method="get">
  <input type="text" name="query" value="HTML tips & tricks">
  <button type="submit">Search</button>
</form>

当你点击“Submit”时，浏览器在将输入值发送到服务器之前对其进行编码。空格变为 %20，& 符号 & 变为 %26。最终的 URL 可能看起来像：

`/search?query=HTML%20tips%20%26%20tricks`

字符编码很重要

百分号编码中使用的特定十六进制代码取决于 HTML 文档的字符编码。网页的通用标准和强烈建议是 UTF-8。

使用 UTF-8 确保了各种国际字符得到一致处理。

使用 UTF-8 对常用字符进行编码的示例：

字符	UTF-8 百分号编码
€	%E2%82%AC
£	%C2%A3
©	%C2%A9
®	%C2%AE
ü	%C3%BC
ñ	%C3%B1
	%20
&	%26
?	%3F

有关 URL 编码和相关函数的全面指南，请参阅 MDN Web 文档。