给出绝对url地址

Question

我正在尝试理解绝对和相对 URL 地址；但是，当我尝试练习时，我无法解决它。这是练习：

给定以下 URL 地址 http://www.unsite.org/a/b/index.html ，文档 index.html 包含 3 个亲戚 URL 地址：

<img src="../logo.png" alt="Logo de l’entreprise"/> //Line 1 <img src="/images/logo.png" alt="Logo de l’entreprise"/> //Line 2 <img src="images/logo.png" alt="Logo de l’entreprise"/> //Line 3

给出它们各自对应的绝对 URL。 -__-。
有人能解释一下Line 2 和Line 3 之间的区别吗？

我了解（对于第 2 行和第 3 行）logo.png 位于文件夹 images 中，该文件夹与 index.html 位于同一目录中。对于Line 1，logo.png 位于index.html 的父文件夹中，我明白了，但我仍然不知道如何解决这个问题。

Answer 1

第 2 行<img src="/images/logo.png" alt="Logo de l’entreprise"/> 将尝试从相对于您的 Web 根目录定义的路径加载图像。

示例：如果您的域名是 www.yourwebsite.com，当前网页是 www.yourwebsite.com/folder/page.html，那么它将尝试从 http://www.yourwebsite.com/images/logo.png

第 3 行<img src="images/logo.png" alt="Logo de l’entreprise"/> 将尝试加载相对于网页的当前目录的图像。

示例：如果您的域名是 www.yourwebsite.com，当前网页是 www.yourwebsite.com/folder/page.html，那么它将尝试从 http://www.yourwebsite.com/folder/images/logo.png

Answer 2

给定http://www.unsite.org/a/b/index.html：

<img src="../logo.png" alt="Logo de l’entreprise"/> //Line 1

http://www.unsite.org/a/logo.png


<img src="/images/logo.png" alt="Logo de l’entreprise"/>  //Line 2

http://www.unsite.org/images/logo.png


<img src="images/logo.png" alt="Logo de l’entreprise"/> //Line 3

http://www.unsite.org/a/b/images/logo.png

Answer 3

如果您有机会，请在 Windows 资源管理器或查找程序中打开您面前的部署文件夹时查看这些行。

我认为这是您的文件夹结构。

ROOT
|----images/logo.png (line2)
|----a
|    |-----b
|    |     |----index.html
|    |     |----images/logo.png (line3)
|    |
|    |---logo.png (line 1)

index.html 位于 root/a/b/ 文件夹中。

如您所见，在 index.html 所在的同一位置有一个 images 文件夹，并且该 images 文件夹包含 logo.png 文件（第 3 行）

b 的父文件夹是文件夹 a。这是另一个 logo.png 文件所在的位置。 （第 1 行）

最后在根目录下还有另一个 images 文件夹。那里还有另一个 logo.png。 （第 2 行）

到处都是相同的名字，这让我们的想法比实际上更复杂。重命名每个文件并修复 HTML 文件可能会帮助您更好地理解它。干杯。

Answer 4

第 2 行前面有 /，这意味着“从网络主机的根目录开始”的绝对 URL 将是 http://www.unsite.org/images/logo.png

第 3 行前面没有/，所以它应该从当前 url 开始查找完整路径，绝对 URL 将是 http://www.unsite.org/a/b/images/logo.png