散文精选网约 1992 字预计阅读 4 分钟
概述
URL 代表着是统一资源定位符（Uniform Resource Locator）。URL 无非就是一个给定的独特资源在 Web 上的地址。理论上说，每个有效的 URL 都指向一个唯一的资源。这个资源可以是一个 HTML 页面，一个 CSS 文档，一幅图像，等等。而在实际中，也有一些例外，最常见的情况就是一个 URL 指向了不存在的或是被移动过的资源。由于通过 URL 呈现的资源和 URL 本身由 Web 服务器处理，因此 Web 服务器的拥有者需要认真地维护资源以及与它关联的URL。
URL 结构
一些常见 URL 实例
|
1 |
http://www.example.com |
一个URL由不同的部分组成，其中一些是必须的，而另一些是可选的。
以下面这个URL为例看看其中最重要的部分：
|
1 |
http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument |
mdn-url-protocol
http是协议。它表明了浏览器必须使用何种协议。它通常都是 HTTP 协议或是 HTTP 协议的安全版，即HTTPS。
mdn-url-domain
www.example.com是域名。它表明正在请求哪个 Web 服务器。或者，可以直接使用 IP 地址, 但是因为它不太方便，所以它不经常在网络上使用。
mdn-url-port
:80是端口。它表示用于访问Web服务器上资源的「技术门」。如果 Web 服务器使用 HTTP 协议的标准端口（HTTP 为 80，HTTPS 为 443）来授予其资源的访问权限，则通常会被忽略。否则是强制性的。
mdn-url-path
/path/to/myfile.html是网络服务器上资源的路径。在 Web 的早期阶段，像这样的路径表示Web服务器上的物理文件位置。如今，它主要是由没有任何物理现实的 Web 服务器处理的抽象。
mdn-url-parameters
?key1=value1&key2=value2是提供给网络服务器的额外参数。这些参数是用&符号分隔的键值对列表。在返回资源之前，Web 服务器可以使用这些参数来执行额外的操作。每个 Web 服务器都有自己关于参数的规则，唯一可靠的方式来知道特定 Web 服务器是否处理参数是通过询问Web服务器所有者。
mdn-url-anchor
#SomewhereInTheDocument是资源本身的另一部分的锚点. 锚点表示资源中的一种「书签」，给浏览器显示位于该「加书签」位置的内容的方向。例如，在 HTML 文档上，浏览器将滚动到定义锚点的位置;在视频或音频文档上，浏览器将尝试转到锚代表的时间。
注意
＃后面的部分（也称为片段标识符）不会通过 URL 发送到请求的服务器。所以在服务器上通常是获取不到这部分数据的。
绝对 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 |
. |
需要获取 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…..” />
技巧
Data URLs是一种特殊的 URL，也可以通过浏览器地址栏直接访问。
