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

您需要了解relative and absolute paths。

这里是我对你的例子的解释，但你真的应该阅读链接以理解这些概念。

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

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

将获得：

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

它只是增加了src网址到基础URL 。

---

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

将获得：

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

Bacuse图像URL植根（有/开始）使用的域，并增加了图片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 spec中的URI，或者通常有关Unix-style paths的URI。

因此，如果你在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