HTML不同的链接类型问题

Question

有什么区别？ 谢谢。

<img src="images/file.jpg"></img>

between

<img src="/images/file.jpg"></img>

between

<img src="./images/file.jpg"></img>

between

<img src="../images/file.jpg"></img>

Answer 1

您需要了解相对路径和绝对路径 。

这是我对您的示例的解释，但是您确实应该阅读链接以了解概念。

如果基本URL是“ http://example.com/resources/”，则：

<img src="images/file.jpg"></img>

会得到：

http://example.com/resources/images/file.jpg

它只是将src url添加到基本URL。

---

<img src="/images/file.jpg"></img>

会得到：

http://example.com/images/file.jpg

由于图片网址是根目录（以/开头），因此它使用域，并将图片src添加到域中。

---

<img src="./images/file.jpg"></img>

会得到：

http://example.com/resource/images/file.jpg

在这种情况下，它使用当前目录（ . ）的相对路径，该目录是基本目录（资源）。

---

<img src="../images/file.jpg"></img>

会得到：

http://example.com/images/file.jpg

在这种情况下，它使用父目录（ .. ）的相对路径，这使它进入一个目录，然后添加其余路径。

Answer 2

第一个，第三个和最后一个相对于当前路径。 在最后一个文件夹中， ..是父文件夹，这意味着您实质上在层次结构中升至一个级别，而在第二个文件夹中. 是当前文件夹，使URI等同于第一个。 第二个相对于根，因为它以/开头。 在HTML4规范中阅读有关URI的更多信息，或在一般情况下阅读Unix样式的路径 。

因此，如果您位于website.com/folder/folder/index.html ，则这四个URI等效于此：

website.com/folder/folder/images/file.jpg
website.com/images/file.jpg
website.com/folder/folder/images/file.jpg
website.com/folder/images/file.jpg