什么是 URL？

概述

URL 代表着是统一资源定位符（Uniform Resource Locator）。URL 无非就是一个给定的独特资源在 Web 上的地址。理论上说，每个有效的 URL 都指向一个唯一的资源。这个资源可以是一个 HTML 页面，一个 CSS 文档，一幅图像，等等。而在实际中，也有一些例外，最常见的情况就是一个 URL 指向了不存在的或是被移动过的资源。由于通过 URL 呈现的资源和 URL 本身由 Web 服务器处理，因此 Web 服务器的拥有者需要认真地维护资源以及与它关联的URL。

URL 结构

一些常见 URL 实例

1
2
3

http://www.example.com
http://www.example.com/path/to/myfile.html
http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2

一个URL由不同的部分组成，其中一些是必须的，而另一些是可选的。

以下面这个URL为例看看其中最重要的部分：

1

http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument

http 是协议。它表明了浏览器必须使用何种协议。它通常都是 HTTP 协议或是 HTTP 协议的安全版，即HTTPS。

www.example.com 是域名。 它表明正在请求哪个 Web 服务器。或者，可以直接使用 IP 地址, 但是因为它不太方便，所以它不经常在网络上使用。

:80 是端口。 它表示用于访问Web服务器上资源的「技术门」。如果 Web 服务器使用 HTTP 协议的标准端口（HTTP 为 80，HTTPS 为 443）来授予其资源的访问权限，则通常会被忽略。否则是强制性的。

/path/to/myfile.html 是网络服务器上资源的路径。在 Web 的早期阶段，像这样的路径表示Web服务器上的物理文件位置。如今，它主要是由没有任何物理现实的 Web 服务器处理的抽象。

?key1=value1&key2=value2 是提供给网络服务器的额外参数。 这些参数是用 & 符号分隔的键值对列表。在返回资源之前，Web 服务器可以使用这些参数来执行额外的操作。每个 Web 服务器都有自己关于参数的规则，唯一可靠的方式来知道特定 Web 服务器是否处理参数是通过询问Web服务器所有者。

#SomewhereInTheDocument 是资源本身的另一部分的锚点. 锚点表示资源中的一种「书签」，给浏览器显示位于该「加书签」位置的内容的方向。例如，在 HTML 文档上，浏览器将滚动到定义锚点的位置;在视频或音频文档上，浏览器将尝试转到锚代表的时间。

绝对 URL 和相对 URL

上面看到的链接都是绝对 URL，但也有一个叫做相对 URL 的东西。

URL 的必需部分在很大程度上取决于使用 URL 的上下文。在浏览器的地址栏中，网址没有任何上下文，因此您必须提供一个完整的（或绝对的）URL，就像上面看到的一样。您不需要包括协议（浏览器默认使用 HTTP ）或端口（仅当目标 Web 服务器使用某些特别端口时才需要），但 URL 的所有其他部分都是必需的。

当文档中使用 URL 时，例如 HTML 页面中的内容有所不同。因为浏览器已经有文档自己的 URL，它可以使用这些信息来填写该文档中可用的任何 URL 的缺失部分。我们可以通过仅查看 URL 的路径部分来区分绝对 URL 和相对 URL 。如果 URL 的路径部分以/字符开头，则浏览器将从服务器的顶部根目录获取该资源，而不引用当前文档给出的上下文。

下面给出一些示例：

绝对 URL 示例

完整网址

1

https://zzz.run/posts/what-is-a-url

隐去协议

在这种情况下，浏览器将使用与用于加载该URL的文档相同的协议来调用该URL。

1

//zzz.run/posts/what-is-a-url

隐去域名

1

/posts/what-is-a-url

这是 HTML 文档中绝对 URL 最常见的用例。浏览器将使用与用于加载托管该 URL 的文档相同的协议和相同的域名。注意：不可能省略该域名而不省略协议。

相对 URL 示例

为了更好地了解以下示例，我们假设从位于以下 URL 的文档中调用 URL：

https://zzz.run/posts/post/html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

.
└── posts
    └── post
        ├── css
        |   └── style.css
        ├── js
        |   └── jQuery.js
        ├── html
        |   └── index.html
        └── index.md 

需要获取 CSS 的子资源

1

css/style.css

因为该 URL 不以 / 开头，浏览器将尝试在包含当前资源的子目录中查找文档。

则浏览器补全的实际 URL 为https://zzz.run/posts/post/html/css/style.css

这样显然是获取不到我们想要的资源。

所以需要先回到上级目录树中再获取

1

../css/style.css

在这种情况下，我们使用从 UNIX 文件系统继承的 ../ 写入约定来告诉浏览器，我们需要往上一个级的目录获取资源。在这个例子里，浏览器会自动补全成 URL：https://zzz.run/posts/post/html/../css/style.css，实际等效于：https://zzz.run/posts/post/css/style.css

Data URLs

Data URLs，即前缀为 data: 协议的 URL，其允许内容创建者向文档中嵌入小文件。

Data URLs 由四个部分组成：前缀data:、指示数据类型的 MIME 类型、数据编码方式US-ASCII（默认）和base64、数据本身：

1

data:[<mediatype>][;base64],<data>

mediatype 是个 MIME 类型的字符串，例如 “image/jpeg” 表示 JPEG 图像文件。

如果被省略，则默认值为 text/plain;charset=US-ASCII

如果数据是文本类型，你可以直接将文本嵌入 (根据文档类型，使用合适的实体字符或转义字符)。如果是二进制数据，你可以将数据进行 base64 编码之后再进行嵌入。

下面是一些示例：

• data:,Hello%2C%20World!

  简单的 text/plain 类型数据

• data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D

  上一条示例的 base64 编码版本

• data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E

  一个HTML文档源代码 <h1>Hello, World</h1>

• data:text/html,<script>alert('hi');</script>

  一个会执行 JavaScript alert 的 HTML 文档。注意 script 标签必须封闭。

• data:image/png;base64,aHR0cDovL3p6ei5ydW4vcG9zdHMvd2hhdC1p.....

  一个图片资源，可直接在 HTML 标签中使用

  <img src="data:image/png;base64,aHR0cDovL3p6ei5ydW4vcG9zdHMvd2hhdC1p....." />

参考地址

• What is a URL?