提供绝对的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"/>将尝试从相对于根网站目录定义的路径加载图像。

示例：如果您的域名是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行）

最后根部还有另一个图像文件夹。那里还有另一个logo.png。 （第2行）

到处都有相同的名字使得思考比实际上更复杂。重命名每个文件并修复HTML文件可能有助于您更好地理解它。干杯。

Answer 4

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

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