什麼是 URL?

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

先決條件 您需要首先了解網際網路是如何工作的什麼是 Web 伺服器以及網頁連結背後的概念
目標 您將學習什麼是 URL 以及它在網路上如何工作。

摘要

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

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

基礎知識:URL 的結構

以下是一些 URL 示例

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

任何這些 URL 都可以鍵入到瀏覽器的位址列中,以告知它載入關聯的資源,在這三種情況下,都是一個網頁。

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 語言——稍後將討論——廣泛使用 URL

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

注意:在指定 URL 以載入頁面的一部分資源時(例如,使用<script><audio><img><video>等),通常應該只使用 HTTP 和 HTTPS URL,少數例外情況(一個值得注意的例外是data:;請參閱資料 URL)。例如,使用 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

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

以下所有 URL 都是相對 URL

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

語義 URL

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

當然,語言語義與計算機無關。您可能經常看到看起來像是隨機字元的混合體的 URL。但是,建立人類可讀的 URL 有很多優勢

  • 您更容易操作它們。
  • 它使使用者能夠清楚地瞭解他們在哪裡,他們在做什麼,以及他們在 Web 上閱讀或互動的內容。
  • 一些搜尋引擎可以使用這些語義來改進關聯頁面的分類。

另請參閱

資料 URL:以 data: 方案為字首的 URL 允許內容建立者在文件中內聯嵌入小型檔案。