計算機科學中，路徑是指向文件系統中某個位置的字符串。路徑可以是絕對的也可以是相對的。這篇文章將詳細解釋絕對路徑和相對路徑的區別，并通過例子來展示它們的使用。

絕對路徑（Absolute Paths）

絕對路徑是從文件系統的根目錄（在Windows系統中是驅動器的根，如C:\，在UNIX系統中是/）開始的完整路徑。它包含了從根目錄到目標文件或文件夾的所有目錄名，并以文件或文件夾名結束。

特點

• 不依賴于當前工作目錄。
• 通常較長，因為它們包含了完整的路徑信息。
• 在任何時候都指向同一個文件或文件夾，不會因為當前位置的變化而改變。

使用實例

假設我們有一個位于Windows系統D盤的圖片文件，其路徑可能是：

D:\Photos\Holiday\beach.jpg

在UNIX系統中，如果有一個配置文件位于根目錄下的etc文件夾中，其路徑可能是：

/etc/nginx/nginx.conf

無論當前位置在哪里，上述路徑都準確指向了特定的文件。

相對路徑（Relative Paths）

相對路徑是相對于當前工作目錄的路徑。它不是從根目錄開始，而是從當前目錄開始描述如何到達目標文件或文件夾。

特點

• 依賴于當前工作目錄。
• 通常較短，因為它們僅包含從當前目錄到目標位置的路徑信息。
• 可能會因為當前位置的變化而代表不同的文件或文件夾。

使用實例

假設當前工作目錄是D:\Photos，要引用Holiday文件夾中的beach.jpg圖片，相對路徑將是：

Holiday\beach.jpg

如果需要引用同一級別目錄下的另一個文件夾中的文件，例如當前工作目錄是D:\Photos\Holiday，要引用Work文件夾中的report.docx文件，相對路徑將使用..來表示上一級目錄：

..\Work\report.docx

在UNIX系統中，如果當前工作目錄是/etc/nginx，要引用同一級別的apache2目錄下的apache2.conf文件，相對路徑將是：

../apache2/apache2.conf

特殊符號

在相對路徑中，有兩個特殊符號經常使用：

• .（點）：表示當前目錄。
• ..（兩個點）：表示上一級目錄。

使用這些符號，可以在文件系統中向上或向下導航。

在網頁中使用絕對路徑和相對路徑

在創建網頁時，鏈接到CSS文件、JavaScript文件、圖片或其他網頁通常需要使用路徑。使用絕對路徑或相對路徑取決于資源的位置和你的特定需求。

HTML中的例子

假設網站的根目錄結構如下：

/ (根目錄)
|-- index.html
|-- about.html
|-- css
|   |-- styles.css
|-- images
|   |-- logo.png
|-- js
    |-- scripts.js

如果在index.html中引用styles.css，相對路徑將是：

<link rel="stylesheet" type="text/css" href="css/styles.css">

如果在index.html中引用logo.png，相對路徑將是：

<img src="images/logo.png" alt="Logo">

如果網站的URL是http://www.example.com，那么引用logo.png的絕對路徑將是：

<img src="http://www.example.com/images/logo.png" alt="Logo">

結論

絕對路徑和相對路徑都是定位文件系統中文件和文件夾的有效方式。絕對路徑提供了明確的位置，不依賴于當前工作目錄，而相對路徑則更加靈活，可以簡化文件的鏈接，尤其是在網頁設計和軟件開發中。理解這兩種路徑的差異和應用場景，對于任何與文件系統交互的活動都是至關重要的。

為網站編寫代碼之前必須進行規劃和設計工作，包括“網站提供什么信息？”、“想要什么字體和顏色？”、“網站是做什么的？”

開發網站之前需要做什么

第一步：計劃

在做任何事情之前都需要一些想法。網站要達到哪種目的？一個網站基本上可以做任何事情，但對于第一次嘗試，應該保持簡單。我們將從創建一個包含一個標題、一張圖片和幾個段落的簡單網頁開始。

首先，請考慮以下問題：

1. 網站的主題是什么？ 你喜歡狗、上海、還是吃豆人？
2. 基于所選主題要展示哪些信息？ 寫下標題和幾段文字，構思一個用于展示的圖像。
3. 網站采用什么樣的外觀？ 用高階術語來說，背景顏色是什么？使用哪種字體比較合適：正式的、卡通的、粗體、瘦體？

備注： 復雜項目需要更詳細的指引，深入到顏色、字體、頁面上項目之間的間距、適當的書寫風格等所有細節。這有時被稱為設計指南、設計系統或品牌手冊。參見：Firefox Photon Design System。

繪制草圖

接下來，拿起筆和紙，大致勾勒出你所希望的網站的樣子。雖然第一個簡單的網頁沒有太多的草圖，但你現在應該養成這樣做的習慣。畫草圖很有用——并且不需要梵高的手法！

備注： 即使在實際的復雜網站中，設計團隊通常也是從粗略的草圖開始設計的，再使用圖形編輯器或 Web 技術建立數字模擬圖。

Web 團隊通常包括一個平面設計師和一個用戶體驗(UX) 設計師。平面設計師把網站的視覺效果放在一起。用戶體驗設計師則以一種更抽象的模式來解決用戶如何體驗以及與網站交互方面的問題。

選定內容

此時可以開始組織網頁上的內容了。

文本

準備好剛才撰寫的標題和文字。

主題顏色

使用色彩選擇器挑選心儀的顏色。當選中某種顏色時，會顯示一個六位神秘代碼，類似于#660066。它是一個十六進制數，用于表示顏色。將其復制并暫存。

圖像

訪問 Google 圖像搜索 來搜索合適的圖片。

1. 當找到你想要的圖像時，點擊該圖像以獲得其放大的視圖。
2. 右鍵單擊圖像（Mac上為 Ctrl + 單擊），選擇將圖像另存為...，并選擇一個安全的地方來保存你的圖像。或者，從瀏覽器地址欄中復制圖片的網址，以便以后使用。

請注意，網絡上的大多數圖片，包括谷歌圖片中的圖片，都是有版權的。為了減少侵權的可能性，可以使用谷歌的許可證過濾器。點擊工具按鈕，然后點擊下面出現的使用權限選項。你應該選擇知識共享許可這個選項。

字體

要選擇一種字體：

1. 訪問 Google Fonts 選擇一種自己喜歡的字體。
2. 將谷歌給你的代碼復制至文本編輯器中，以保存備用。

如何創建文件

一個網站包含許多文件：文本內容、代碼、樣式表、媒體內容，等等。當你建立一個網站時，你需要在計算機上將這些文件以合理的結構組織起來，確保文件之間交互暢通，并在你最終將它們上傳到服務器之前使你的所有內容看起來正確。處理文件討論了一些你應該注意的問題，以便你能為你的網站建立一個合理的文件結構。

網站應該保存在何處？

對于本地網站，應將所有相關文件放在一個單獨文件夾中，可以映射出服務器端站點文件結構。這個文件夾可以放在任何你喜歡的地方，但你應該把它放在你能輕易找到的地方，也許是在你的桌面上，在你的主頁文件夾里，或者在你的硬盤根目錄下。

1、選擇一個地方來存儲你的網站項目。在你選擇的地方，創建一個名為 web-projects（或類似）的新文件夾。這是你所有的網站項目的存放地。

2、在這個文件夾中，創建另一個文件夾來存放你的第一個網站。稱之為 test-site（或更有想象力的東西）。

關于大小寫和空格的提示

你會注意到，在這篇文章中，我們要求你完全用小寫字母命名文件夾和文件，沒有空格. 這是因為：

1. 許多計算機，特別是網絡服務器，是區分大小寫的。因此，假如你把一張圖片放在你的網站上 test-site/MyImage.jpg，然后在一個不同的文件中，你試圖以 test-site/myimage.jpg 來調用該圖片，它可能無法工作。
2. 瀏覽器、網絡服務器和編程語言對空格的處理并不一致。例如，如果你在文件名中使用空格，一些系統可能會將其視為兩個文件名。一些服務器會用“%20”（URL 中空格的字符代碼）替換文件名中的區域，導致所有鏈接被破壞。最好用連字符而不是下劃線來分隔單詞。對比 my-file.html 與 my_file.html。

簡言之，文件名中應使用連字符。谷歌搜索引擎把連字符當作單詞的分隔符，但不會識別下劃線。基于此，最好在一開始就養成習慣，文件夾和文件名使用小寫，用短橫線來分隔。這可以避免許多問題。

網站應該使用什么結構？

接下來，讓我們看看我們的測試網站應該是什么結構。在我們創建的任何網站項目中，最常見的是一個主頁 HTML 文件和包含圖像、樣式文件和腳本文件的文件夾。現在讓我們來創建這些：

1、index.html： 這個文件一般會包含主頁內容，也就是人們第一次進入網站時看到的文字和圖片。使用文本編輯器，創建一個名為index.html的新文件，并將其保存在test-site文件夾內。

2、images 文件夾： 這個文件夾包含網站上使用的所有圖片。在 test-site 文件夾內創建一個名為 images 的文件夾。

3、styles 文件夾： 這個文件夾包含用于設置內容樣式的 CSS 代碼（例如，設置文本和背景顏色）。在你的 test-site 文件夾內創建一個名為 styles 的文件夾。

4、scripts 文件夾： 這個文件夾包含所有用于向網站添加交互功能的 JavaScript 代碼（例如，點擊時加載數據的按鈕）。在 test-site 文件夾內創建一個名為 scripts 的文件夾。

備注： 在 Windows 上你可能看不到文件擴展名，因為 Windows 有一個默認開啟的隱藏已知文件類型的擴展名的選項。一般來說，你可以通過 Windows 資源管理器，選擇文件夾選項選項，取消勾選隱藏已知文件類型的擴展名復選框，然后點擊確認將其關閉。對于涉及你的 Windows 版本的更多具體信息，你可以在網上搜索。

文件路徑

為使文件間正常交互，應為每個文件提供訪問路徑，所以一個文件知道另一個文件的位置。為作為演示，我們將在 index.html 中插入一小段 HTML，并使其顯示你在“你的網站會是什么樣？“一文中選擇的圖片。或者，你可以在你的電腦上或從網上選擇一個現有的圖片，并在下面的步驟中使用它：

1、將你之前選擇的圖片復制到你的 images 文件夾。打開你的

brindex.html

2、文件，并準確地將以下代碼插入該文件中。當下不要對其感到困惑——我們將在本系列的后面更詳細地研究這些結構。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="" alt="My test image">
  </body>
</html>

3、該行代碼 <img src="" alt="My test image"> 用于向頁面中插入圖片。我們需要告知 HTML 圖片的位置。這張圖片位于 images 目錄下，與 index.html 處于同一目錄。 為了從 index.html 訪問到我們的圖像，我們需要的文件路徑是 images/your-image-filename。 例如，這里的圖像叫做 firefox-icon.png， 那么文件路徑就是 images/firefox-icon.png。

4、在 HTML 代碼 src="" 的雙引號之間插入文件路徑。

5、保存 HTML 文件，然后使用瀏覽器打開（雙擊該文件）。你應該看到新網頁顯示了新的圖像！

文件路徑的一些通用規則：

• 若引用的目標文件與 HTML 文件同級，只需直接使用文件名，例如：my-image.jpg。
• 要引用子目錄中的文件，請在路徑前面寫上目錄名，再加上一個正斜杠。例如：subdirectory/my-image.jpg。
• 若引用的目標文件位于 HTML 文件的上級，需要加上兩個點。 舉個例子，如果 index.html 在 test-site 的一個子文件夾內，而 my-image.jpg 在 test-site 內，你可以使用../my-image.jpg 從 index.html 引用 my-image.jpg。
• 以上方法可以隨意組合，比如：../subdirectory/another-subdirectory/my-image.jpg。

這是你目前需要知道的全部內容。

備注： Windows 的文件系統使用反斜杠而不是正斜杠，例如：C:\Windows。這在 HTML 中并不重要——即使你在 Windows 系統上進行開發，你也應該在代碼中使用正斜杠。

還應該做些什么？

現在你的文件夾結構應該看起來像這樣：

下一章帶著大家重新全面認識下html、CSS、JavaScript；大家學到了嗎，記得點贊評論支持哦！