URL 簡介 · HTML 教程

# URL 簡介 ## 概述 URL 是“統一資源定位符”（Uniform Resource Locator）的首字母縮寫，中文譯為“網址”，表示各種資源的互聯網地址。下面就是一個典型的 URL。 ```html https://www.example.com/path/index.html ``` 所謂資源，可以簡單理解成各種可以通過互聯網訪問的文件，比如網頁、圖像、音頻、視頻、JavaScript 腳本等等。只有知道了它們的 URL，才能在互聯網上獲取它們。只要資源可以通過互聯網訪問，它就必然有對應的 URL。一個 URL 對應一個資源，但是同一個資源可能對應多個 URL。 URL 是互聯網的基礎。互聯網之所以“互聯”，就是因為網頁可以通過“鏈接”（link），包含其他 URL。用戶只要點擊，就可以從一個 URL 跳轉到另一個 URL，前往不同的網站。 ## 網址的組成部分 URL 由多個部分組成。下面是一個比較復雜的 URL，實際的 URL 通常不會有這么多部分。 ```html https://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#anchor ``` 我們看看，這個 URL 的各個部分。 ### 協議協議（scheme）是瀏覽器請求服務器資源的方法，上例是`https://`的部分，表示使用 HTTPS 協議。互聯網支持多種協議，必須指明網址使用哪一種協議，默認是 HTTP 協議。也就是說，如果省略協議，直接在瀏覽器地址欄輸入`www.example.com`，那么瀏覽器默認會訪問`http://www.example.com`。HTTPS 是 HTTP 的加密版本，出于安全考慮，越來越多的網站使用這個協議。 HTTP 和 HTTPS 的協議名稱后面，緊跟著一個冒號和兩個斜杠（`://`）。其他協議不一定如此，郵件地址協議`mailto:`的協議名后面只有一個冒號，比如`mailto:foo@example.com`。 ### 主機主機（host）是資源所在的網站名或服務器的名字，又稱為域名。上例的主機是`www.example.com`。有些主機沒有域名，只有 IP 地址，比如`192.168.2.15`。這種情況常常出現在局域網。 ### 端口同一個域名下面可能同時包含多個網站，它們之間通過端口（port）區分。“端口”就是一個整數，可以簡單理解成，訪問者告訴服務器，想要訪問哪一個網站。默認端口是80，如果省略了這個參數，服務器就會返回80端口的網站。端口緊跟在域名后面，兩者之間使用冒號分隔，比如`www.example.com:80`。 ### 路徑路徑（path）是資源在網站的位置。比如，`/path/index.html`這個路徑，指向網站的`/path`子目錄下面的網頁文件`index.html`。互聯網的早期，路徑是真實存在的物理位置。現在由于服務器可以模擬這些位置，所以路徑只是虛擬位置。路徑可能只包含目錄，不包含文件名，比如`/foo/`，甚至結尾的斜杠都可以省略。這時，服務器通常會默認跳轉到該目錄里面的`index.html`文件（即等同于請求`/foo/index.html`），但也可能有其他的處理（比如列出目錄里面的所有文件），這取決于服務器的設置。一般來說，訪問`www.example.com`這個網址，很可能返回的是網頁文件`www.example.com/index.html`。 ### 查詢參數查詢參數（parameter）是提供給服務器的額外信息。參數的位置是在路徑后面，兩者之間使用`?`分隔，上例是`?key1=value1&key2=value2`。查詢參數可以有一組或多組。每組參數都是鍵值對（key-value pair）的形式，同時具有鍵名(key)和鍵值(value)，它們之間使用等號（`=`）連接。比如，`key1=value`就是一個鍵值對，`key1`是鍵名，`value1`是鍵值。多組參數之間使用`&`連接，比如`key1=value1&key2=value2`。 ### 錨點錨點（anchor）是網頁內部的定位點，使用`#`加上錨點名稱，放在網址的最后，比如`#anchor`。瀏覽器加載頁面以后，會自動滾動到錨點所在的位置。錨點名稱通過網頁元素的`id`屬性命名，詳見《元素的屬性》一章。 ## URL 字符 URL 的各個組成部分，只能使用以下這些字符。 - 26個英語字母（包括大寫和小寫） - 10個阿拉伯數字 - 連詞號（`-`） - 句點（`.`） - 下劃線（`_`）此外，還有18個字符屬于 URL 的保留字符，只能在給定的位置出現。比如，查詢參數的開頭是問號（`?`），也就是說，問號只能出現查詢參數的開頭，出現在其他位置就是非法的，會導致網址解析錯誤。網址的其他部分如果要使用這些保留字符，必須使用它們的轉義形式。 URL 字符轉義的方法是，在這些字符的十六進制 ASCII 碼前面加上百分號（`%`）。下面是這18個字符及其轉義形式。 - `!`：%21 - `#`：%23 - `$`：%24 - `&`：%26 - `'`：%27 - `(`：%28 - `)`：%29 - `*`：%2A - `+`：%2B - `,`：%2C - `/`：%2F - `:`：%3A - `;`：%3B - `=`：%3D - `?`：%3F - `@`：%40 - `[`：%5B - `]`：%5D 舉例來說，有一個網頁的 URL 是`foo?bar.html`，即文件里面包含一個問號，那么需要寫成`foo%3Fbar.html`。 URL 的合法字符，其實也可以采用這種轉義方法，但是不建議使用。比如，字母`a`的十六進制 ASCII 碼是`61`，轉義形式后就是`%61`。因此，`www.apple.com`又可以寫成`www.%61pple.com`，瀏覽器一樣識別。值得注意的是，空格的轉義形式是`%20`。對于那些包含空格的文件名，這個轉義是必須的。既不屬于合法字符、也不屬于保留字符的其他字符（比如漢字），理論上不需要手動轉義，可以直接寫在 URL 里面，比如`www.example.com/中國.html`，瀏覽器會自動將它們轉義，發給服務器。轉義方法是使用這些字符的十六進制 UTF-8 編碼，每兩位算作一組，然后每組頭部添加百分號（`%`）。舉例來說，漢字`中`的 UTF-8 十六進制編碼是`e4b8ad`，每兩個字符一組，URL 轉義后就為`%e4%b8%ad`。也就是說，URL 里面凡是有漢字`中`的地方，都要寫成`%e4%b8%ad`。因此，訪問`www.example.com/中國.html`這個網址，需要寫成下面的樣子。 ```html www.example.com/%e4%b8%ad%e5%9b%bd.html ``` 上面代碼中，`中`的轉義形式是`%e4%b8%ad`，`國`是`%e5%9b%bd`。 ## 絕對 URL 和相對 URL URL 分成兩種：絕對 URL 和相對 URL。絕對 URL 指的是，只靠 URL 本身就能確定資源的位置。這意味著，URL 必須帶有資源的完整信息，包含協議、主機、路徑等部分。前面的例子都是絕對 URL。相對 URL 指的是，URL 不包含資源位置的全部信息，必須結合當前網頁的位置，才能定位資源。比如，當前網頁的 URL 是`https://www.example.com/path/index.html`，該網頁上面有一個資源，URL 指向`a.html`，這個就是相對 URL。因為只知道`a.html`，并不能定位資源。瀏覽器假定，`a.html`與當前網址在同一個子目錄下面，從而得到絕對 URL `https://www.example.com/path/a.html`。相對 URL 如果以斜杠（`/`）開頭，就表示網站的根目錄。否則，必須以當前目錄為起點，推算資源的位置。比如，相對 URL `/foo/bar.html`表示網站根目錄的子目錄`foo`，`foo/bar.html`表示在當前目錄的`foo`子目錄。 URL 還可以使用兩個特殊簡寫，表示特定位置。 - `.`：表示當前目錄，比如`./a.html`（當前目錄下的`a.html`文件） - `..`：表示上級目錄，比如`../a.html`（上級目錄下的`a.html`文件）這兩種簡寫可以多個連用，比如`../../`表示上兩級目錄。絕對 URL 也可以使用這兩個簡寫，比如`www.example.com/./index.html`等同于`www.example.com/index.html`，這時`.`相當于根目錄的當前目錄，即根目錄本身。 ## `<base>` `<base>`標簽指定網頁內部的所有相對 URL 的計算基準。整張網頁只能有一個`<base>`標簽，而且只能放在`<head>`里面。它是單獨使用的標簽，沒有閉合標簽，下面是一個例子。 ```html <head> <base href="https://www.example.com/files/" target="_blank"> </head> ``` `<base>`標簽的`href`屬性給出計算的基準網址，`target`屬性給出如何打開鏈接的說明（參見《鏈接》一章）。已知計算基準是`https://www.example.com/files/`，那么相對 URL `foo.html`，就可以轉成絕對 URL `https://www.example.com/files/foo.html`。注意，`<base>`標簽必須至少具有`href`屬性或`target`屬性之一。 ```html <base href="http://foo.com/app/"> <base target="_blank"> ``` 一旦設置了`<base>`，就對整個網頁都有效。如果要改變某個鏈接的行為，只能用絕對鏈接替代相對鏈接。尤其需要注意錨點，這時錨點也是針對`<base>`計算的，而不是針對當前網頁的 URL。