《30分鐘重學HTML》之基礎-超連接與URI（四）

時間 2020-07-06

原文原文鏈接

⚡️ 預警，前方高能：css

在本文中，若出現如下 emoji 表情包請特別留意:html

白色書籤：🔖，表明一級標題；

橙色大四邊形：🔶，表明二級標題；

藍色小四邊形：🔹，表明三級標題；

黃色閃電：⚡️，表明強調；

🔖 1、超連接

🔶 1.1 什麼是超連接

超連接是互聯網提供的最使人興奮的創新之一，它們從一開始就一直是互聯網的一個特性，使互聯網成爲互聯的網絡。 ⚡️ 超連接使咱們可以將咱們的文檔連接到任何其餘文檔（或其餘資源），也能夠連接到文檔的指定部分，咱們能夠在一個簡單的網址上提供應用程序（與必須先安裝的本地應用程序或其餘東西相比）。幾乎任何網絡內容均可以轉換爲連接，點擊（或激活）超連接將使網絡瀏覽器轉到另外一個網址（URL）。web

注意：URL 能夠指向 HTML 文件、文本文件、圖像、文本文檔、視頻和音頻文件以及能夠在網絡上保存的任何其餘內容。若是瀏覽器不知道如何顯示或處理文件，它會詢問您是否要打開文件（須要選擇合適的本地應用來打開或處理文件）或下載文件（之後處理它）。瀏覽器

舉個 🌰 子：bash

騰訊網首頁，藍色背景導航欄每一個元素即爲超連接，提供了導航功能。服務器

🔶 1.2 超連接分類

🔹 1.2.1 基本連接

使用<a>元素建立基本連接，在 href (Hypertext Reference)屬性中，包含你但願指向的 URL 或 URL 片斷。網絡

舉個 🌰 子：網站

<a href="https://juejin.im/user/5eb4366ee51d4528dd23bfad">個人掘金主頁</a>.
複製代碼

結果以下所示：個人掘金主頁spa

URL 片斷是哈希標記（#）前面的名稱，哈希標記指定當前文檔中的內部目標位置（HTML 元素的 ID）。.net

URL 不限於基於 Web（HTTP）的文檔，也可使用瀏覽器支持的任何協議。例如，在大多數瀏覽器中正常工做的 file:、ftp:和 mailto：。

⚡ 注意: 可使用 href="#top" 或者 href="#" 連接返回到頁面頂部。這種行爲是 HTML5 的特性。

🔹 1.2.2 塊級連接

除了文字，你能夠將一部份內容轉換爲連接，甚至是塊級元素。如你想要將一個圖像轉換爲連接，只需把圖像元素放到<a></a>標籤中間。

舉個 🌰 子：

<a href="https://juejin.im/user/5eb4366ee51d4528dd23bfad">
  <img src="https://cdn.jsdelivr.net/gh/jolin27144/blog@master/images/html/1-intruduction/4-creating-hyperlinks/qq.jpeg" alt="塊級連接">
</a>
複製代碼

🔖 2、URI、URL、URN

⚡️ 統一資源標識符（英語：Uniform Resource Identifier，縮寫：URI）是一個用於標識某一互聯網資源的字符串。

🔶 2.1 URI 和 URL、URN 的關係

先看看它們的發展歷史(不感興趣可略過)：

如文章開頭提到，正是超連接的誕生，提供了互聯網進行「互聯」的一種方式。

與此同時，URL 也做爲一個」超連接的目標資源的短字符串"而被引入。

日後幾年的發展中，爲了區別：⚡️ "提供資源訪問" ⚡️ "資源標記" 這兩種字符串。

兩個專業術語也所以誕生：「統一資源定位符」和「統一資源名稱」。

也就是咱們今天所說的 URL 和 URN。

後來，在人們意識到二者事實上基於同一個基礎的「資源標識」的概念。所以RFC 3986提出: URL 和 URN 是 URI 的子集。

同時提出，將來的規格和相關文件應使用通用術語「 URI」，而不是限制性更強的術語「 URL」和「 URN」。

⚡️ 歸納：

URL 和 URN 是 URI 的子集。
URL 除了識別資源外，還提供了一種經過描述資源的主要訪問機制來定位資源。
URN 則用一個獨一無可、不可改變的名稱標識資源，不管資源是否不存在或不可用

上圖表示 URI 和 URL、URN 的關係。

🔶 2.2 URI 的格式

scheme：表示資源應該使用哪一種協議來訪問。如 HTTP、HTTPS 協議。此外還有其餘不是很常見的 scheme，例如 ftp、ldap、file、news 等。
scheme 和 authority 之間，必須是三個特定的字符 ⚡️ 「://」 ，它把 scheme 和後面的部分分離開。注意: URN 則只有":"。
authority：表示資源所在的主機名，一般的形式是「host:port」，即主機名加端口號。主機名能夠是 IP 地址或者域名的形式，必需要有，不然瀏覽器就會找不到服務器。但端口號有時能夠省略
path：以"/"開頭。採用了相似文件系統「目錄」「路徑」的表示方式，由於早期互聯網上的計算機可能是 UNIX 系統，因此採用了 UNIX 的「/」風格。其實也比較好理解，它與 scheme 後面的「://」是一致的。
query：附加一些額外的修飾參數。
fragment：它是 URI 所定位的資源內部的一個「錨點」或者說是「標籤」，瀏覽器能夠在獲取資源後直接跳轉到它指示的位置。但片斷標識符僅能由瀏覽器這樣的客戶端使用，服務器是看不到的。也就是說，瀏覽器永遠不會把帶「#fragment」的 URI 發送給服務器，服務器也永遠不會用這種方式去處理資源的片斷。

🔶 2.3 絕對 URL 和相對 URL

⚡️ 絕對 URL ：指向由其在 Web 上的絕對位置定義的位置。包括協議+域名。

舉個 🌰 子：

若是 index.html 頁面在 projects 這一目錄。
projects 目錄位於 web 服務站點的根目錄。
web 站點的域名爲http://www.example.com。
那麼這個頁面就能夠經過http://www.example.com/projects/index.html訪問。

( 或者經過http://www.example.com/projects/來訪問, 由於在沒有指定特定的 URL 的狀況下，大多數 web 服務會默認訪問加載 index.html 這類頁面)

http://www.example.com/projects/index.html即爲絕對 URL。

⚡️ 相對 URL：指向與您連接的文件相關的位置。

舉個 🌰 子：

若是咱們訪問了http://www.example.com/projects/index.html這個文件。
想轉到和index.html相同目錄下的一個 PDF 文件, 那個能夠直接將該文件名做爲 URL。例如 project-brief.pdf。
若是 PDF 文件在 projects 的子目錄 pdfs 中。那麼相對路徑就是 pdfs/project-brief.pdf。 (對應的絕對 URL 就是 www.example.com/projects/pd…

pdfs/project-brief.pdf即爲相對 URL。

🔖 3、路徑

⚡️ URL 使用路徑查找文件。

🔶 3.1 URL 中使用的路徑

此目錄結構的根目錄稱爲 resume。當在網站上工做時，你會有一個包含整個網站的目錄。

在根目錄，咱們有一個 resume.html，做爲主頁

咱們的根目錄還有兩個目錄—— dist 和 images，它們分別包含一個 index.html 文件和一個 img.png 文件。

⚡️ 指向當前目錄 ：若是 resume.html 想要包含 style.css。由於它與當前文件是在同一個目錄的。能夠用"./"表示當前目錄，或者直接省略。

URL 爲：style.css或./style.css
⚡️ 指向子目錄 ：若是 resume.html 想要包含 images 目錄下的 img.png。

URL 爲：images/img.png
⚡️ 指向上級目錄 ：若是想在 dist/index.html 中包含一個指向 images/img.png 的超連接，你必須先返回上級目錄，而後再回到 images 目錄。返回上一個目錄級使用兩個英文點號表示 ".."。

URL 爲: ../imgaes/img.png