首頁 > 部落格目錄 > 瞭解HTML檔案路徑以及如何使用它們

瞭解HTML檔案路徑以及如何使用它們

Written by Zephyrene on 25 December 2024

<本文譯自https://blog.hubspot.com/website/html-file-path>

建立網站時，您需要一種訪問檔案和資源的方法。這些檔案可以是本地的（在網站資料夾結構內）或外部的（來自網際網路上的地址）。

對於本地檔案，最好將它們放在單獨的資料夾中，以確保關注點的分離和程式碼的模組化。對於位於其他地方的檔案，您需要一種同樣有效的方法來引用它們。而使用檔案路徑確保您可以訪問這些資源。

在本文中，我們將探索不同的HTML檔案路徑，包括比較相對檔案路徑和絕對檔案路徑，以及在HTML中使用檔案路徑的最佳實踐。最後，我們將看看一些用例和示例，以瞭解它們的語法。"

什麼是HTML檔案路徑？

HTML檔案路徑是特定檔案資源的位置或地址。如果您希望這些檔案相互通訊或連結，您需要提供檔案路徑，以便瀏覽器知道並瞭解如何訪問它們。

HTML檔案路徑很有用，因為沒有它們，就沒有辦法引入或引用功能齊全的網站所需的依賴項。這些依賴項包括位於單獨檔案中的JavaScript程式碼——單擊HTML檔案中的按鈕時，結帳功能需要——甚至只是引用來自外部網站的影片資源。

相對與絕對檔案路徑

要使用HTML檔案路徑，這兩個選項一個是對檔案路徑，另一個就是絕對檔案路徑。當您打算引用的檔案位於網站資料夾結構的同一資料夾中，建議使用相對檔案路徑；另一方面，若是位於網路上其他地方的外部資源，則使用絕對檔案路徑。

使用絕對檔案路徑，我們可以訪問具有完整URL路徑的檔案內容或資源，這意味著您也可以直接從網路引用內容。例如，您可以從URL中引用影象，例如：

<img src="https://www.hubspot.com/images/hub.jpg" alt="hub">

src也被稱為源屬性，它告訴我們檔案路徑。

使用相對檔案路徑，我們引用相對於當前工作位置或資料夾結構中的檔案。假設您在影象資料夾中有一個hub.jpg檔案，在資料夾層次結構中上升一級。您可以像這樣的寫法：<img src="../images/hub.jpg">。第一個週期代表當前目錄，下一個週期將目錄結構提升一級。

相對檔案路徑中，要連結到同一資料夾中的特定檔案，您將單獨使用檔名，例如hub.jpg。要引用巢狀影象資料夾中的檔案，您只需在路徑前面寫下資料夾名稱和正斜槓：images/hug.jpg。

最佳做法是使用相對檔案路徑，因為它們是專案資料夾中，層次結構的本地路徑，並且始終保持不變。相比之下，絕對檔案路徑可能位於網際網路上的任何地方，並且可以隨時更改，可能導致連結損壞。

絕對檔案路徑，必須注意您如何引用這些檔案、檔名的拼寫、它們的位置、副檔名等。這是為了確保您能夠正確載入資源。同時URL必須有效，並包含網頁適當載入所需的資源。

此外，使用絕對路徑時，影像必須透過網際網路載入。在某些情況下，大影像可能需要一些時間來載入，這可能會導致網站變慢。因此，如果您不再需要依賴外部URL，建議儘可能使用相對檔案路徑。

HTML檔案路徑示

例如前所述，HTML檔案路徑可以是相對路徑或絕對路徑的形式。在本節中，我們將探索使用這兩種檔案路徑的一些示例，以便您可以瞭解它們的語法以及如何在現實生活中使用它們。

首先，讓我們演示一下如何使用其相對路徑在HTML文件中引用影象檔案或資源。繼續啟動程式碼編輯器，建立一個新檔案，並呼叫它index.html。在您剛剛建立的檔案中新增以下程式碼：

<!DOCTYPE html>
<html>
  <head>
  	<title>HTML File Path Example</title>
  </head>
  <body>
  	<h2>HTML File Path Example</h2>
  	<img src="sample-image.jpeg" alt="Image File path example">
  </body>
</html>

接下來，下載示例影象（sample-image.jpeg），並將其新增到與當前HTML檔案目錄相同的位置。

在上面的HTML檔案中，在正文標籤中，我們指的是具有源（src）屬性的影象檔案，該屬性告訴我們影象的位置。當您開啟HTML檔案時，輸出應該如下：

展望未來，讓我們來探索絕對檔案路徑在HTML文件中是如何工作的。

在下面的示例中，您將將託管的CSS和JavaScript程式碼匯入到HTML檔案中。首先，建立一個新的index.html檔案，並新增以下程式碼：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Button Example with Relative Path</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
  <div class="m-4">
    <button type="button" class="btn btn-primary">Primary</button>
  </div>
</body>
</html>

當您開啟HTML檔案時，輸出應該如下：

您現在已成功使用託管在網際網路某處的Bootstrap CSS和JavaScrip連結到HTML檔案並顯示自定義主按鈕。

最後，讓我們演示一下如何使用帶有thesrc屬性的指令碼標籤來包含與HTML檔案相同的資料夾層次結構中的JavaScript檔案。

首先，在名為tut的資料夾中建立一個新的index.html檔案，並新增以下程式碼：

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="js/sample.js"></script>
</head>

<body>
  <h1>HTML File Path Example with JS</h1>
  <form>
    <input type="button" value="click" onclick="sayHello()" />
  </form>
</body>
</html>

接下來，建立一個js資料夾。在此資料夾中，建立一個檔案：sample.js。在sample.js中，在下面新增此程式碼，當單擊頁面上的按鈕時，該程式碼將“Hello world”列印到瀏覽器。

function sayHello() {
  alert("Hello World!");
}

如果您在瀏覽器上開啟HTML程式碼並單擊按鈕，輸出應該如下：

從上面的例子中可以看到，src屬性的值是JavaScript檔案在當前工作目錄的系統路徑中的位置的相對路徑。在我們的案例中，它位於JS資料夾內。請參閱下面的資料夾結構：

使用HTML檔案路徑

在本文中，您探索了HTML檔案路徑及其工作原理。 HTML檔案路徑確保您可以根據其位置訪問資源或檔案，無論它是本地的網站資料夾結構還是來自網際網路上的其他位置。

對於絕對路徑和相對路徑，在引用這些檔案位置時必須小心，以便瀏覽器瞭解如何訪問它們。通常，相對於HTML文件放置的檔案提供了最佳方法，因為它們的位置是靜態的。

此外，始終確保使用備用屬性，如果資源位置更改或檔案引用不當，該屬性提供了一個回退機制。

既然您瞭解了HTML檔案路徑的工作原理，您可以利用這些知識對何時使用相對或絕對檔案路徑做出明智的選擇。

返回部落格目錄

瞭解HTML檔案路徑以及如何使用它們