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