網站開發入門：路徑

前言

在網站開發裡面，路徑（Path）扮演著非常重要的角色，前面在介紹 HTML 的元素時，講了一些屬性，像是 href 和 src 等，這些基本上脫離不了路徑的使用，所以這一篇要講一講「路徑」這個概念。

站內資源是指存放在本網站伺服器上的資料。引用站內資源時，路徑可以是絕對路徑或相對路徑。

站外資源指的是存放在其他網站伺服器上的資料。通常透過完整的 URL 進行引用，也就是使用絕對路徑。引用站外資源常見於加載公共庫、字型或其他共享資源。

假設我們的網站目錄結構長這樣：

[schema]://[host]:[port]/[path]

其實說白了就是一個 URL。

先說說站外資源的引用，例如說要嵌入鼎鼎大名的 jQuery 的話，會像下方程式這樣引入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

那麼如果是引入站內資源呢？首先我們要知道，既然是站內資源，代表著協議、主機名稱、埠號會是一樣的，那麼我們就能非常瀟灑的摒棄它，只要保留路徑即可。

那麼假設我們要在根目錄下的 index.html 嵌入 main.css，就可以怎麼做：

<link rel="stylesheet" href="/assets/css/main.css" />

相對路徑的話以 ./ 開頭（可以省略），表示當前資源所在的目錄，並以 ../ 表示往上一層目錄。

以上面那個目錄結構為例，假設我們要在 index.html 嵌入 main.css，就可以怎麼做：

<!-- 方法一 -->
<link rel="stylesheet" href="./assets/css/main.css" />
<!-- 方法二 -->
<link rel="stylesheet" href="assets/css/main.css" />

而要在 about 資料夾下的 index.html 嵌入 main.js，可以這麼做：

<!-- 方法一 -->
<script src="./../assets/js/main.js"></script>
<!-- 方法二 -->
<script src="../assets/js/main.js"></script>

網站開發會遇到的路徑千百種，不過基本上理解了這些基礎就沒有什麼太大的問題了。