網址（URL）是什麼？｜最完整的相關名詞解析
更新日期： 2022 年 4 月 17 日
前言
本文為網路系列第六篇文章。
由於內容牽涉到一些進階的概念，建議先從第一集開始閱讀，才能循序漸進的理解。
正文
Web（全球資源網）主要由三大概念組成：
- 超連結文字
- HTTP 協議
- 網址
這次，我們要探討的主題就是網址。
網址是一種網路機制，用來使瀏覽器能透過「網址」，搜尋並找到網路上發布的任何資源。
網址的英文簡稱為 URL ，它是 Uniform Resource Locator （統一資源定位符）的簡稱。
我知道「資源定位符」看起來很難懂，因此以下我們會以「網址」一詞繼續討論。
簡單來說，網址就像一個網路資源（網頁、影片等）的網路地址。
理論上，每個有效的網址，都會與一個網路資源聯繫在一起。
那些資源包含 HTML 頁面、CSS 檔案、圖片等等。
實務上，在這些網址中會有一些例外，最常見的案例就是網址連接的資源，早已不付存在或已被移除。
此外，由於網路資源是透過 URL 傳遞，URL 又是由網路伺服器所管理。
因此伺服器管理員的責任，就是仔細管理那些網路資源，以及它背後連接的網址。
URL 基本架構
網址的型態很多變，以下我們舉三個網址為例：
- http://developer.website.com
- http://developer.website.com/ch-TW/Learn/
- http://developer.website.com/ch-TW/search?q=URL
作為使用者，我們可以將網址輸入瀏覽器上方的搜尋欄，請它載入網址背後連接的網頁或資源。
一個網址是由許多不同元素組成。有些是固定要求，有些則屬於自由配置。
我們可以先看看到下圖，讓自己有個大概念的認識。
我們可以將網址想像成「郵政地址」去理解。
- 方案：代表你想使用的郵政服務
- 網域：目的地的城市
- 埠：可以想成郵遞區號
- 資源路徑：代表目的地的大樓
- 參數：額外的資訊，例如 A 大樓還是 B 大樓
- 錨點：信件寄送的當事人
方案（Scheme）
網址最前面的元素是「方案」。
方案大多是是指瀏覽器對伺服器，發出資源請求的一種通訊協議。
你問：「什麼是通訊協議？」
關於這個問題，我們在先前的系列文中，都有進行解釋，如果想了解更多，可以先去查看相關文章。
簡單來說，協議就是一個網際網路世界中，用來交換數據、資料的方法。
對於網站而言，通常會使用 HTTP 或者 HTTPS（HTTP 的安全加強版）。
但你可能會好奇：「為何要稱網址開頭處為「方案」，而不直接取名為「協議」就好？」
因為在現在的網際網路，除了「協議」以外，還有更多的資源請求方式。
因此，我們才會稱開頭處為「方案」而非「協議」，因為「協議」只是瀏覽器請求資源的眾多方法之一。
當瀏覽器找尋網址時，原則上會需要使用以上兩者其中一項協議。
但除此之外，瀏覽器同樣知道，如何處理其他類型的方案。
例如瀏覽器打開「mailto:」開頭的網址，就會跳轉到電子郵件的撰寫頁面，讓使用者直接撰寫電子信。
所以下次當你看到「http」與「https」以外開頭的網址時，切忌不用太過擔心害怕。
權限（Authority）
接在「方案」區塊後面的部分是「權限」，它由文字符號「://」與前者區隔開來。
「權限」是由「網域」與「埠」兩者，一般常見的網址都只會出現「網域」部分，較少會有「埠」 此數值。
若網址同時出現網域與埠，需要以「:」間隔開來。
以下，我們分別針對兩者進行簡單解釋。
「網域」是什麼？
當瀏覽器想向伺服器提取網頁檔案時，網域是用來告訴瀏覽器，資源的位置要去哪一部伺服器提出申請。
除了網址外，瀏覽器也可透過「 IP 」位置得知伺服器所在地，但因為它相較網址不易閱讀，因此比較少見。
「埠」是什麼？
一台擁有 IP 位置的伺服器（硬體），根據內建的軟體不同，可以提供很多服務。
常見的「伺服器軟體」包含：
- 網頁伺服器（Web server）：提供 Web 服務
- 郵件伺服器（mail server）：提供郵件服務
- FTP伺服器（FTP server）：提供上傳、下載檔案服務
埠的用途，就是藉由「IP位置+埠值」此方法，用來區分不同的服務。
我們可以將伺服器內建的各種服務，想像成數個房間，埠則是進入那些房間的「門」。
當瀏覽器想使用伺服器的 Web 服務時，就要從對的門進去，才能使用到房間裡的功能。
一般來說，若伺服器 Web 服務採 HTTP 協議，埠為： 80；若採 HTTPS 協議，埠則為：443。
現今的網址，會將預設的數值 80 或 433 省略，所以我們才看不見。
「://」是什麼？
將「方案」與「權限」兩部分區隔開的符號是「://」。
「：」主要的目的，是將網址中的方案，與下一個部分區分開來。
「//」則表示網址下一部分的內容是「權限」。
我們舉一個簡單的例子，來說明不是所有的網址，都會含有「://」此符號。
例如郵件類型的網址，它的開頭為「mail:foobar」。
上述例子包含了「方案」元素，但並沒有使用到「權限」元素，因此「:」後方並沒有緊跟著「//」符號。
資源路徑 （Path to resource）
資源路徑是指檔案在伺服器的位置。
在早期的 Web 世界，這種檔案位置的標示方式，代表一份真實存在的硬體檔案，存放在伺服器內部。
現今，這種資源路徑的標示方式，變成一個由伺服器儲存的虛擬文件。
參數 （Parameters）
參數是伺服器提供的額外訊息，它是接在「?」後方的區塊。
這些參數一系列數值、連接符號組成，若有多個以上的參數，他們中間會以「&」分隔。
例如：「?key1=value1&key2=value2」
每個網路伺服器，都有它們各自的參數撰寫規則。
若想知道特定的網路伺服器參數，最直接的方法就是詢問伺服器擁有者。
網址會添加參數的原因有數個，以下是常見的幾項理由：
1. 排序與篩選
電商網站是最常使用參數的地方，它能讓使用者透過排序與篩選，動態產生一個對應的網頁。
- /dresses?sort=a-z
- /womens-shoes?color=red
- /hotels/seattle-wa?rating=5-star
2. 分頁
參數可以用來標示多個網頁。
例如：/blog/all-articles?page=3
3. 站內搜尋
當使用者在網站內搜尋時，參數可用傳遞搜尋結果。
例如：/search?q=christmas
4. 翻譯
網站轉換成另一種語言時，可以用參數表達。
例如：/home?lang=fr
5. 說明
當使用者想查看產品的細部資料，可以使用參數表示。
例如：/product?sku=12345
6. 追蹤
參數可以用來追蹤特定宣傳活動成效，或按網站按鈕的點擊來源。
例如：/landingpage?utm_campaign=fbid_holidaypromo
錨點 （Anchor）
錨點是一種超連結，它會讓使用者導向該資源（例如網頁）的另一的部分。
我們可以將錨點想成一種資源的書籤，讓瀏覽器能知道特定片段的位置。
例如在一個 HTML 檔案，使用者點擊錨點後，瀏覽器會自動跳至該錨點定義的位置。
以影音等檔案來說，錨點則會跳至該錨點設置的「時間點」。
值得注意的是，網址「#」字號後方的字串，又稱為「片段識別符號」。
它是一種不需傳遞給伺服器的網頁請求。
如何使用網址
我們可以透過在瀏覽器的網址欄，輸入任何一個網址，用來取得該網址連接的資源。
但上述做法，還只是網址使用方法的冰山一角。
我們能藉由 HTML 語言，讓網址的使用方法更加延伸。
- 使用 <a> 元素，用來建立其他檔案的超連結
- 使用<link>、<script>元素，使檔案套用外部關聯的資源。
- 使用<img>元素呈現網路圖片的內容，或用<video>、<audio>元素展現影片語音檔。
- 使用<iframe>呈現另一個 HTML 檔案內容
當我們使用特定 HTML 屬性，使網頁載入網址背後的資源，以此構成網頁的一部分片段。
我們應該盡量使用 HTTP 或 HTTPS 開頭的網址，而非較少見的開頭（例如 data:）。
我們以 FTP 開頭的網址為例，由於現今瀏覽器已不支援此種網址，它會讓套用該連結的網頁有安全疑慮。
除了 HTML 語言外，還有 CSS、JavaScript 等網站核心語法，也廣泛使用到網址。
絕對網址 vs 相對網址
前文我們所見到的網址，稱為「絕對網址」。此外，還有一種網址稱為「相對網址」。
現在，就讓我們一起來查看兩者的意涵與細節。
網址所包含的元素，很大一部分取決於該網址使用的情境。
在你的瀏覽器的搜尋欄裡，由於沒有任何特定情境，因此我們需要提供完整（或「絕對」）的網址。
我們可能不需要撰寫通訊協議，因為瀏覽器預設使用 https。
又或是埠值，因為通常只有對特定伺服器有需求，才會使用其他埠值。
但除此之外，其他所有的內容都是必要的組成元素。
若當網址與一份檔案類型的資源連接（例如 HTML 頁面），則有些事情會產生些微改變。
由於該檔案儲存於自己的電腦內，瀏覽器早已擁有該檔案的網址。
瀏覽器就可以在此條件下，自動填補該檔案網址內，任何可能遺漏的元素。
我們可以藉由觀察「檔案路徑」區塊，判斷該網址屬於「絕對網址」或「相對網址」。
如果檔案路徑使用「/」符號，瀏覽器將會從伺服器的「根目錄」取得資源，而非判斷當前檔案的相關情境。
我們舉一些例子 ，讓上述說明更容易理解。
絕對網址範例
- 完整網址（如前文所述）
http://example.com/en-US/docs/Learn
- 隱藏通訊協議
//example.com/en-US/docs/Learn
此範例，瀏覽器將會使用先前加載該檔案的協議，用來呼叫該檔案的資源。
- 隱藏網域名稱
/en-US/docs/Learn
此範例，是絕對網址中最常見的案例，用來表示一個 HTML 檔案的網址。
瀏覽器會使用先前加載過檔案中，相同的協議、相同的網址。
筆記：一般我們省略網址時，也一定會省略通訊協議。
相對網址範例
在開始介紹相對網址前，我們必須先對「檔案系統」有基本的認識。
在電腦中，一個目錄或資料夾就是一個虛擬容器。我們可以在容器內儲存其他目錄與檔案。
一個典型的檔案系統會包含上千萬個目錄。
多個檔案可以儲存在一個「子目錄」中，多個子目錄又可以被儲存在一個「根目錄」中。
因此，這些不同層級的目錄就會形成「層次」，變形一種「樹狀結構」的檔案系統（又稱「目錄樹」）。
接下來為，更了解下列的範例，我們先假設下方展示的網址，是從此網址的檔案內調用：
「http://example.com/en-US/docs/Learn 」
- 子資源
Skills/Infrastructure/Understanding_URLs
因為該網址並非以「/」開頭，瀏覽器就會試圖在包含該資源的子目錄中，往更前一層的根目錄，找到原始的檔案。
因此，在此範例中我們真正想到達的網址，是：
http://example.com/en-US/docs/Learn/ Skills/Infrastructure/Understanding_URLs
- 回到跟目錄樹中
…/CSS/display
在此範例中，我們使用了一種源自於「Unix檔案系統」的寫作習慣 — 「../」此符號。
藉此方法，告訴瀏覽器我們想回到最原始的目錄。
在這個例子，我們真正想抵達的網址為：
http://example.com/en-US/docs/Learn/../CSS/display
它可被簡寫為：
http://example.com/en-US/docs/CSS/display
具有語意的網址
儘管網址具備非常多技術門檻，它同時讓使用者以人類可閱讀的方式進入網站。
網址可以被記憶，並且被任何人輸入進瀏覽器的搜尋欄。
Web（全球資訊網）的核心是「人」，因此建構具備語意的「語意網址」就是最佳的實踐方式。
「語意網址」使用人類的語言構成，這樣不論使用者的技術背景如何，都能被輕易理解。
語言上的語意，當然與電腦無任何關聯。
你或許常看到由隨意單字組成的網址，但若能建立一個人類可閱讀的網址，它將有許多優點：
- 我們更容易使用它們。
- 它讓使用者釐清自己的所在地、正在執行的動作、正在閱讀、互動的網站內容。
- 有些搜尋引擎可以使用這些語意，去改善相關網頁的分類。
常見問題統整
前面說了這麼多網址的內容，最後我們整理了重點統整，幫助各位讀者再次複習。
網址是一種網路機制，用來使瀏覽器能透過「網址」，搜尋並找到網路上發布的任何資源。
一個網址是由許多不同元素組成。有些是固定要求，有些則屬於自由配置。
「網域」是組成「網址」的其中一的片段。
當瀏覽器想向伺服器提取網頁檔案時，網域是用來告訴瀏覽器，資源的位置要去哪一部伺服器提出申請。
錨點是一種超連結，它會讓使用者導向該資源（例如網頁）的另一的部分。
我們可以將錨點想成一種資源的書籤，讓瀏覽器能知道特定片段的位置。
例如在一個 HTML 檔案，使用者點擊錨點後，瀏覽器會自動跳至該錨點定義的位置。
網址所包含的元素，很大一部分取決於該網址使用的情境。
在你的瀏覽器的搜尋欄裡，若沒有任何特定情境，因此我們需要提供絕對網址（或稱「完整網址」）。
以上就是網址的大致重點，我們下次見！
