初學者指南：HTML src 標籤中的路徑參數寫法
更新日期： 2024 年 10 月 15 日
當你在 HTML 文件中嵌入圖片、視頻、音頻或其他外部資源時，會經常使用到 src 屬性。
src 屬性用於指定資源的路徑，以便瀏覽器可以找到並顯示這些資源。
理解如何正確地寫 src 的路徑參數，是學會建構網站的重要一步。
本文將幫助初學者了解 src 標籤中路徑參數的寫法，並解釋相對路徑和絕對路徑的區別。
什麼是 src 標籤中的路徑？
src 是 HTML 中用來指定外部資源位置的屬性，例如在 <img>、<script>、<audio> 和 <video> 等標籤中都會用到它。
這個路徑可以是本地文件，也可以是一個外部的網址，以幫助瀏覽器正確加載資源。
範例
<img src="images/example.jpg" alt="描述性文本">在這個例子中，src 指定了圖片的位置，使得瀏覽器可以加載並顯示這個圖片。
路徑的類型
在撰寫 src 的路徑時，通常有兩種類型：相對路徑 和 絕對路徑。
了解這兩種路徑的差別，可以幫助你更靈活地引用資源。
相對路徑
相對路徑 是基於當前 HTML 文件位置的資源路徑。
它適用於引用與 HTML 文件位於同一網站或文件夾中的資源。
相對路徑的優勢在於，如果網站的文件結構有所改變（例如整個網站搬遷到另一個伺服器），資源仍然能夠正常運行。
相對路徑的範例
- 相同目錄：如果資源和 HTML 文件在同一文件夾中，可以這樣寫：
<img src="example.jpg" alt="描述性文本">- 子目錄：如果資源在當前目錄的子文件夾中：
<img src="images/example.jpg" alt="描述性文本">- 返回上一級目錄：如果資源在上一級文件夾中，使用
../：
<img src="../example.jpg" alt="描述性文本">絕對路徑
絕對路徑 是指資源的完整網址或從根目錄開始的路徑。
這些路徑不受 HTML 文件所在位置的影響，通常用於引用外部網站的資源。
絕對路徑的範例
- 完整網址：當引用外部資源時，使用完整的 URL：
<img src="https://www.example.com/images/example.jpg" alt="描述性文本">- 網站根目錄：如果資源在網站根目錄中，可以從
/開始：
<img src="/images/example.jpg" alt="描述性文本">這種寫法表示從網站的根目錄開始查找資源，無論當前 HTML 文件的位置如何。
相對路徑和絕對路徑的選擇
- 相對路徑 更適合引用與當前文件位於同一個網站或文件夾中的資源，這樣在網站搬遷或修改文件結構時，引用不會被打亂。
- 絕對路徑 更適合引用外部的資源，或在需要確保資源在不同位置的 HTML 文件中均能正確顯示時使用。例如，引用外部圖片、視頻或者 JavaScript 庫時，通常會使用絕對路徑。
常見問題
引用的圖片不顯示，該怎麼辦？
這可能是由於路徑寫錯或資源位置不正確引起的。請檢查路徑是否拼寫正確，並確保資源真的存在於指定的位置。此外，檢查文件夾名稱是否大小寫一致，因為有些伺服器是區分大小寫的。
應該使用相對路徑還是絕對路徑？
這取決於你的需求。如果你引用的資源是同一個網站中的，並且希望能靈活管理，使用相對路徑是更好的選擇。如果你需要引用外部資源，例如來自其他網站的圖片或視頻，則應使用絕對路徑。
使用 ../ 有什麼作用？
../ 是用於返回上一級目錄的符號。如果你的資源不在當前文件夾中，而在上一級目錄，可以用這種方式來引用。例如，從 about/index.html 返回到根目錄中的 logo.jpg，可以寫作：
<img src="../logo.jpg" alt="網站標誌">結論
理解 src 標籤中路徑的寫法對於有效引用網站資源非常重要。
學會靈活使用相對路徑和絕對路徑，能讓你的網頁開發更加高效，並且避免常見的資源找不到的錯誤。
希望這篇文章幫助你了解如何正確書寫 src 路徑參數，讓你能夠更自信地在網頁中引用資源。
如果有其他問題，或者想了解更多有關 HTML 的知識，隨時告訴我！