什麼是 URL?

本文將討論統一資源定位符 (URL),解釋它們是什麼以及它們的結構。

預備知識 您需要先了解 網際網路是如何工作的Web 伺服器是什麼 以及 Web 上鍊接背後的概念
目標 您將瞭解 URL 是什麼以及它在 Web 上是如何工作的。

總結

URL (Uniform Resource Locator,統一資源定位符) 是網際網路上唯一資源的地址。它是 瀏覽器 用於檢索已釋出資源(如 HTML 頁面、CSS 文件、影像等)的關鍵機制之一。

理論上,每個有效的 URL 都指向一個唯一的資源。實際上,有一些例外,最常見的是 URL 指向一個已不存在或已移動的資源。由於 URL 所代表的資源和 URL 本身由 Web 伺服器處理,因此由 Web 伺服器所有者負責仔細管理該資源及其關聯的 URL。

基礎:URL 的組成部分

以下是一些 URL 示例

https://mdn.club.tw
https://mdn.club.tw/en-US/docs/Learn_web_development/
https://mdn.club.tw/en-US/search?q=URL

您可以在瀏覽器的位址列中輸入以上任意一個 URL,以告訴瀏覽器載入相應的資源,這三個示例都是 Web 頁面。

URL 由不同的部分組成,有些是必需的,有些是可選的。最重要的部分已在下面的 URL 中高亮顯示(詳細資訊將在後續章節中提供)

full URL

注意:您可以將 URL 想象成一個普通的郵政地址:協議 代表您要使用的郵政服務,域名 是城市或鄉鎮, 類似於郵政編碼;路徑 代表您的郵件應送達的建築物;引數 代表額外資訊,例如建築物內的公寓號;最後,錨點 代表您要郵寄的實際收件人。

注意:URL 有一些額外的部分和一些額外的規則,但它們對於普通使用者或 Web 開發者來說並不重要。不用擔心,您無需瞭解它們即可構建和使用功能完整的 URL。

協議

Scheme

URL 的第一部分是協議,它指示瀏覽器必須使用哪個協議來請求資源(協議是圍繞計算機網路交換或傳輸資料的規定方法)。通常對於網站,協議是 HTTPS 或 HTTP(其不安全版本)。定址網頁需要這兩個協議之一,但瀏覽器也知道如何處理其他協議,例如 mailto:(用於開啟郵件客戶端),因此如果您看到其他協議也不足為奇。

許可權

Authority

接下來是許可權,它由 :// 字元模式與協議分隔。如果存在,許可權將同時包含(例如,www.example.com)和80),並用冒號分隔

  • 域指示正在請求哪個 Web 伺服器。通常這是一個 域名,但也可以使用 IP 地址(但這很少見,因為不方便得多)。
  • 埠指示用於訪問 Web 伺服器上資源的“技術門”。如果 Web 伺服器使用 HTTP 協議的標準埠(HTTP 為 80,HTTPS 為 443)來授予對其資源的訪問許可權,則通常會省略它。否則,它是強制性的。

注意:協議和許可權之間的分隔符是 ://。冒號將協議與 URL 的下一部分分隔開,而 // 表示 URL 的下一部分是許可權。

一個不使用許可權的 URL 示例是郵件客戶端(mailto:foobar)。它包含協議但未使用許可權元件。因此,冒號後面沒有兩個斜槓,僅作為協議和郵件地址之間的分隔符。

資源路徑

Path to the file

/path/to/myfile.html 是 Web 伺服器上資源的路徑。在 Web 的早期,這樣的路徑表示 Web 伺服器上的物理檔案位置。如今,它主要是 Web 伺服器處理的一種抽象,沒有實際的物理實體。

引數

Parameters

?key1=value1&key2=value2 是提供給 Web 伺服器的額外引數。這些引數是由 & 符號分隔的鍵/值對列表。Web 伺服器可以使用這些引數在返回資源之前執行額外的操作。每個 Web 伺服器對引數都有自己的規則,要了解特定 Web 伺服器是否處理引數的唯一可靠方法是詢問 Web 伺服器所有者。

錨點

Anchor

#SomewhereInTheDocument 是指向資源本身另一部分的錨點。錨點代表資源內的某種“書籤”,為瀏覽器提供了顯示位於該“書籤”位置的內容的指示。例如,在 HTML 文件中,瀏覽器將滾動到定義錨點的位置;在影片或音訊文件中,瀏覽器將嘗試轉到錨點表示的時間。值得注意的是,# 之後的這部分,也稱為片段識別符號,在請求中永遠不會發送到伺服器。

如何使用 URL

任何 URL 都可以直接在瀏覽器的位址列中鍵入以訪問其背後的資源。但這只是冰山一角!

HTML 語言(請參閱 HTML 結構化內容)廣泛使用 URL

  • 透過 <a> 元素建立到其他文件的連結;
  • 透過 <link><script> 等各種元素將文件與其相關資源連結起來;
  • 顯示媒體,例如影像(使用 <img> 元素)、影片(使用 <video> 元素)、聲音和音樂(使用 <audio> 元素)等;
  • 透過 <iframe> 元素顯示其他 HTML 文件。

注意:在指定 URL 以載入頁面的一部分資源時(例如使用 <script><audio><img><video> 等),您通常應只使用 HTTP 和 HTTPS URL,有極少數例外(一個值得注意的例外是 data:;請參閱 Data URLs)。例如,使用 FTP 不安全,並且不再受現代瀏覽器支援。

其他技術,例如 CSSJavaScript,也廣泛使用 URL,而這些確實是 Web 的核心。

絕對 URL 與相對 URL

我們上面看到的稱為絕對 URL,但還有一個稱為相對 URL 的概念。 URL 標準定義了兩者 — 儘管它使用術語 絕對 URL 字串相對 URL 字串,以區別於 URL 物件(它們是 URL 的記憶體表示)。

讓我們在 URL 的上下文中檢查一下絕對相對之間的區別意味著什麼。

URL 的必需部分在很大程度上取決於 URL 使用的上下文。在瀏覽器的位址列中,URL 沒有上下文,因此您必須提供一個完整(或絕對)的 URL,就像我們上面看到的那些。您不需要包含協議(瀏覽器預設使用 HTTP)或埠(只有在目標 Web 伺服器使用非標準埠時才需要),但 URL 的所有其他部分都是必需的。

當 URL 在文件中使用時(例如在 HTML 頁面中),情況略有不同。由於瀏覽器已經擁有文件本身的 URL,它可以利用此資訊來填充該文件中任何 URL 的缺失部分。我們可以透過只檢視 URL 的路徑部分來區分絕對 URL相對 URL。如果 URL 的路徑部分以 / 字元開頭,瀏覽器將從伺服器的頂層根目錄獲取該資源,而無需參考當前文件提供的上下文。

讓我們看一些例子來進一步說明。假設 URL 是從以下 URL 定位的文件中定義的:https://mdn.club.tw/en-US/docs/Learn_web_development

https://mdn.club.tw/en-US/docs/Learn_web_development 本身是一個絕對 URL。它具有定位其指向資源所需的所有必要部分。

以下所有 URL 都是相對 URL

  • 協議相對 URL://mdn.club.tw/en-US/docs/Learn_web_development — 只缺少協議。瀏覽器將使用與載入託管該 URL 的文件相同的協議。
  • 域名相對 URL:/en-US/docs/Learn_web_development — 協議和域名都已丟失。瀏覽器將使用與載入託管該 URL 的文件相同的協議和相同的域名。
  • 子資源:Howto/Web_mechanics/What_is_a_URL — 協議和域名丟失,路徑不以 / 開頭。瀏覽器將嘗試在當前資源所在的子目錄中查詢文件。在這種情況下,我們真正想訪問的 URL 是:https://mdn.club.tw/en-US/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_URL
  • 返回目錄樹:../CSS/display — 協議和域名丟失,路徑以 .. 開頭。這繼承自 UNIX 檔案系統 — 告訴瀏覽器我們想向上移動一級。在這裡,我們想訪問的 URL 是:https://mdn.club.tw/en-US/docs/Learn_web_development/../Web/CSS/display,可以簡化為:https://mdn.club.tw/en-US/docs/Web/CSS/display
  • 僅錨點:#semantic_urls - 除錨點外,所有部分都已丟失。瀏覽器將使用當前文件的 URL 並替換或新增錨點部分。當您想連結到當前文件的特定部分時,這很有用。

URL 使用者名稱和密碼

上面討論的 URL 部分不如下面描述的常見,您可能會在 URL 中看到包含使用者名稱和密碼。

例如

https://username:password@www.example.com:80/

如果包含,使用者名稱和密碼會放在 :// 字元和許可權之間,兩個之間用冒號分隔,末尾用 at 符號 (@)。

當訪問使用 HTTP 身份驗證安全機制的網站時,可以在 URL 中包含使用者名稱和密碼,以立即登入網站並繞過否則會出現的使用者名稱/密碼對話方塊以輸入您的憑據。

儘管您可能仍會看到此機制在實際中使用,但由於安全問題,它已被棄用,並且現代網站傾向於使用其他身份驗證機制。有關更多詳細資訊,請參閱 透過 URL 中的憑據訪問

語義化 URL

儘管 URL 具有非常技術性的味道,但它們代表了網站的可讀入口點。它們可以被記住,任何人都可以將它們輸入到瀏覽器的位址列中。人是 Web 的核心,因此構建所謂的 語義化 URL 被認為是最佳實踐。語義化 URL 使用具有固有含義的單詞,這些單詞可以被任何人理解,無論其技術知識如何。

語言語義對計算機來說當然是無關緊要的。您可能經常看到看起來像隨機字元組合的 URL。但是,建立人類可讀的 URL 有許多優點

  • 對您來說更容易操作它們。
  • 它向用戶清楚地說明了他們在 Web 上的位置、正在做什麼、正在閱讀或與之互動的內容。
  • 一些搜尋引擎可以利用這些語義來改進相關頁面的分類。

另見

Data URLs:以 data: 協議為字首的 URL,允許內容建立者將小檔案嵌入到文件中。