[toc] # 簡述 超鏈接非常重要 ——它們使互聯(lián)網(wǎng)成為一個(gè)互聯(lián)的網(wǎng)絡(luò)。本文介紹了創(chuàng)建鏈接所需的語法，并且討論了鏈接的最佳實(shí)現(xiàn)方法。 # 什么是超鏈接? 超鏈接是互聯(lián)網(wǎng)提供的最令人興奮的創(chuàng)新之一，它們從一開始就一直是互聯(lián)網(wǎng)的一個(gè)特性，使互聯(lián)網(wǎng)成為互聯(lián)的網(wǎng)絡(luò)。超鏈接使我們能夠?qū)⑽覀兊奈臋n鏈接到任何其他文檔（或其他資源），也可以鏈接到文檔的指定部分，我們可以在一個(gè)簡單的網(wǎng)址上提供應(yīng)用程序（與必須先安裝的本地應(yīng)用程序或其他東西相比）。幾乎任何網(wǎng)絡(luò)內(nèi)容都可以轉(zhuǎn)換為鏈接，點(diǎn)擊（或激活）超鏈接將使網(wǎng)絡(luò)瀏覽器轉(zhuǎn)到另一個(gè)網(wǎng)址（URL）。 **注意：** ``` URL可以指向HTML文件、文本文件、圖像、文本文檔、視頻和音頻文件以及可以在網(wǎng)絡(luò)上保存的任何其他內(nèi)容。 如果瀏覽器不知道如何顯示或處理文件，它會(huì)詢問您是否要打開文件（需要選擇合適的本地應(yīng)用來打開或處理文件）或下載文件（以后處理它）。 ``` 例如，bilibili 主頁包含大量的鏈接，有些鏈接指向多個(gè)up主上傳的視頻，有些鏈接指向網(wǎng)站的不同區(qū)域（導(dǎo)航功能），還有些鏈接指向登錄/注冊頁面（用戶工具）等等。  # 鏈接的解析 通過將文本（或其他內(nèi)容，見塊級(jí)鏈接)轉(zhuǎn)換為<a>元素內(nèi)的鏈接來創(chuàng)建基本鏈接， 給它一個(gè)href屬性（也稱為目標(biāo)），它將包含您希望鏈接指向的網(wǎng)址。 ``` <p>我創(chuàng)建了一個(gè)指向 <a href="https://www.mozilla.org/zh-CN/">Mozilla 主頁</a> 的超鏈接。 </p> ``` 結(jié)果如下所示： 我創(chuàng)建了一個(gè)指向 [Mozilla](https://www.mozilla.org/zh-CN/)主頁 的超鏈接。 ## 使用title屬性添加支持信息 您可能要添加到您的鏈接的另一個(gè)屬性是標(biāo)題；這旨在包含關(guān)于鏈接的補(bǔ)充有用信息，例如頁面包含什么樣的信息或需要注意的事情。 例如： ``` <p>我創(chuàng)建了一個(gè)指向 <a href="https://www.mozilla.org/zh-CN/" title="了解 Mozilla 使命以及如何參與貢獻(xiàn)的最佳站點(diǎn)。">Mozilla 主頁</a> 的超鏈接。 </p> ``` 結(jié)果如下（當(dāng)鼠標(biāo)指針懸停在鏈接上時(shí)，標(biāo)題將作為提示信息出現(xiàn)）： 我創(chuàng)建了一個(gè)指向 [Mozilla](https://www.mozilla.org/zh-CN/) 主頁 的超鏈接。 **注意：** ``` 鏈接的標(biāo)題僅當(dāng)鼠標(biāo)懸停在其上時(shí)才會(huì)顯示，這意味著使用鍵盤來導(dǎo)航網(wǎng)頁的人很難獲取到標(biāo)題信息。如果標(biāo)題信息對(duì)于頁面非常重要，你應(yīng)該使用所有用戶能都方便獲取的方式來呈現(xiàn)，例如放在常規(guī)文本中。 ``` ## 塊級(jí)鏈接 如上所述，你可以將一些內(nèi)容轉(zhuǎn)換為鏈接，甚至是塊級(jí)元素。例如你想要將一個(gè)圖像轉(zhuǎn)換為鏈接，你只需把圖像元素放到<a></a>標(biāo)簽中間。 ``` <a href="https://www.mozilla.org/zh-CN/"> <img src="mozilla-image.png" alt="鏈接至 Mozilla 主頁的 Mozilla 標(biāo)志"> </a> ``` # 統(tǒng)一資源定位符(URL)與路徑(path)快速入門 要全面地了解鏈接目標(biāo)，你需要了解統(tǒng)一資源定位符和文件路徑。本小節(jié)將介紹相關(guān)的信息。 統(tǒng)一資源定位符（英文：Uniform Resource Locator，簡寫：URL）是一個(gè)定義了在網(wǎng)絡(luò)上的位置的一個(gè)文本字符串。例如 Mozilla 的中文主頁定位在 https://www.mozilla.org/zh-CN/. URL使用路徑查找文件。路徑指定文件系統(tǒng)中您感興趣的文件所在的位置?？匆幌乱粋€(gè)簡單的目錄結(jié)構(gòu)的例子（源碼可查看 創(chuàng)建超鏈接（[creating-hyperlinks](https://github.com/roy-tian/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks)。）  此目錄結(jié)構(gòu)的根目錄稱為creating-hyperlinks。當(dāng)在網(wǎng)站上工作時(shí)， 你會(huì)有一個(gè)包含整個(gè)網(wǎng)站的目錄。在根目錄，我們有一個(gè)index.html和一個(gè)contacts.html文件。在真實(shí)的網(wǎng)站上，index.html 將會(huì)成為我們的主頁或登錄頁面。 我們的根目錄還有兩個(gè)目錄—— pdfs 和projects，它們分別包含一個(gè) PDF (project-brief.pdf) 文件和一個(gè)index.html 文件。請注意你可以有兩個(gè)index.html文件，前提是他們在不同的目錄下，許多網(wǎng)站就是如此。第二個(gè)index.html或許是項(xiàng)目相關(guān)信息的主登錄界面。 * 指向當(dāng)前目錄：如果index.html（目錄頂層的index.html）想要包含一個(gè)超鏈接指向contacts.html，你只需要指定想要鏈接的文件名，因?yàn)樗c當(dāng)前文件是在同一個(gè)目錄的. 所以你應(yīng)該使用的URL是contacts.html: ``` <p>要聯(lián)系某位工作人員，請?jiān)L問我們的 <a href="contacts.html"> 聯(lián)系人頁面</a>。</p> ``` * 指向子目錄：如果index.html （目錄頂層index.html）想要包含一個(gè)超鏈接指向 projects/index.html，您需要先進(jìn)入projects/項(xiàng)目目錄，然后指明要鏈接到的文件index.html。 通過指定目錄的名稱，然后是正斜杠，然后是文件的名稱。因此您要使用的URL是projects/index.html： ``` <p>請?jiān)L問 <a href="projects/index.html">項(xiàng)目頁面</a>。</p> ``` * 指向上級(jí)目錄： 如果你想在projects/index.html中包含一個(gè)指向pdfs/project-brief.pdf的超鏈接，你必須先返回上級(jí)目錄，然后再回到pdf目錄。“返回上一個(gè)目錄級(jí)”使用兩個(gè)英文點(diǎn)號(hào)表示 — .. — 所以你應(yīng)該使用的URL是 ../pdfs/project-brief.pdf： ``` <p>點(diǎn)擊打開 <a href="../pdfs/project-brief.pdf">項(xiàng)目簡介</a>。</p> ``` **注意：** ``` 如果需要的話，你可以將這些功能的多個(gè)例子和復(fù)雜的url結(jié)合起來。例如：../../../complex/path/to/my/file.html. ``` ## 文檔片段 超鏈接除了可以鏈接到文檔外，也可以鏈接到HTML文檔的特定部分（被稱為文檔片段）。要做到這一點(diǎn)，你必須首先給要鏈接到的元素分配一個(gè)id屬性。例如，如果你想鏈接到一個(gè)特定的標(biāo)題，可以這樣做： ``` <h2 id="Mailing_address">郵寄地址</h2> ``` 然后鏈接到那個(gè)特定的id，您可以在URL的結(jié)尾使用一個(gè)井號(hào)指向它，例如： ``` <p>要提供意見和建議，請將信件郵寄至 <a href="contacts.html#Mailing_address">我們的地址</a>。</p> ``` 你甚至可以在同一份文檔下，通過鏈接文檔片段，來鏈接到同一份文檔的另一部分： ``` <p>本頁面底部可以找到 <a href="#Mailing_address">公司郵寄地址</a>。</p> ``` ## 絕對(duì)URL和相對(duì)URL 你可能會(huì)在網(wǎng)絡(luò)上遇到兩個(gè)術(shù)語，絕對(duì)URL和相對(duì)URL（或者稱為，絕對(duì)鏈接和相對(duì)鏈接）： **絕對(duì)URL：** 指向由其在Web上的絕對(duì)位置定義的位置，包括 protocol（協(xié)議） 和 domain name（域名）。像下面的例子，如果index.html頁面上傳到projects這一個(gè)目錄。并且projects目錄位于web服務(wù)站點(diǎn)的根目錄，web站點(diǎn)的域名為http://www.example.com，那么這個(gè)頁面就可以通過http://www.example.com/projects/index.html訪問（或者通過http://www.example.com/projects/來訪問，因?yàn)樵跊]有指定特定的URL的情況下，大多數(shù)web服務(wù)會(huì)默認(rèn)訪問加載index.html這類頁面） 不管絕對(duì)URL在哪里使用，它總是指向確定的相同位置。 **相對(duì)URL：** 指向與您鏈接的文件相關(guān)的位置，更像我們在前面一節(jié)中所看到的位置。例如，如果我們想從示例文件鏈接http://www.example.com/projects/index.html轉(zhuǎn)到相同目錄下的一個(gè)PDF文件，URL就是文件名URL——例如project-brief.pdf——沒有其他的信息要求。如果PDF文件能夠在projects的子目錄pdfs中訪問到，相對(duì)路徑就是pdfs/project-brief.pdf（對(duì)應(yīng)的絕對(duì)URL是http://www.example.com/projects/pdfs/project-brief.pdf） 一個(gè)相對(duì)URL將指向不同的位置，這取決于它所在的文件所在的位置——例如，如果我們把index.html文件從projects目錄移動(dòng)到Web站點(diǎn)的根目錄（最高級(jí)別，而不是任何目錄中），里面的pdfs/project-brief.pdf相對(duì)URL將會(huì)指向http://www.example.com/pdfs/project-brief.pdf，而不是http://www.example.com/projects/pdfs/project-brief.pdf 當(dāng)然，project-brief.pdf文件和pdfs文件夾的位置不會(huì)因?yàn)槟苿?dòng)了index.html文件而突然發(fā)生變化——這將使您的鏈接指向錯(cuò)誤的位置，因此如果單擊它，它將無法工作。你得小心點(diǎn)! # 鏈接最佳實(shí)踐 下面是一些在編寫鏈接元素時(shí)可以遵循的最佳實(shí)踐。 使用清晰的鏈接措辭 把鏈接放在你的頁面上很容易。這還不夠。我們需要讓所有的讀者都可以使用鏈接，不管他們當(dāng)前的環(huán)境和哪些工具。 **例如：** * 使用屏幕閱讀器的用戶喜歡從頁面上的一個(gè)鏈接跳到另一個(gè)鏈接，并且脫離上下文來閱讀鏈接。 * 搜索引擎使用鏈接文本來索引目標(biāo)文件，所以在鏈接文本中包含關(guān)鍵詞是一個(gè)很好的主意，以有效地描述與之相關(guān)的信息。 * 讀者往往會(huì)瀏覽頁面而不是閱讀每一個(gè)字，他們的眼睛會(huì)被頁面的特征所吸引，比如鏈接。他們會(huì)找到描述性的鏈接。 **下面是一個(gè)具體的例子：** 好的鏈接文本: [下載Firefox](https://firefox.com/) ``` <p><a href="https://firefox.com/"> 下載Firefox </a></p> ``` 不好的鏈接文本: 點(diǎn)擊這里下載Firefox ``` <p><a href="https://firefox.com/"> 點(diǎn)擊這里 </a> 下載Firefox</p> ``` **其他提示：** * 不要重復(fù)URL作為鏈接文本的一部分 ——URL看起來很丑，當(dāng)屏幕朗讀器一個(gè)字母一個(gè)字母的讀出來的時(shí)候聽起來就更丑了。 * 不要在鏈接文本中說“鏈接”或“鏈接到”——它只是噪音。屏幕閱讀器告訴人們有一個(gè)鏈接。可視化用戶也會(huì)知道有一個(gè)鏈接，因?yàn)殒溄油ǔＪ怯貌煌念伾O(shè)計(jì)的，并且存在下劃線（這個(gè)慣例一般不應(yīng)該被打破，因?yàn)橛脩袅?xí)慣了它。） * 保持你的鏈接標(biāo)簽盡可能短——長鏈接尤其惹惱屏幕閱讀器用戶，他們必須聽到整件事讀出來。 ## 盡可能使用相對(duì)鏈接 從上面的描述中，您可能認(rèn)為始終使用絕對(duì)鏈接是一個(gè)好主意；畢竟，當(dāng)頁面像相對(duì)鏈接那樣移動(dòng)時(shí)，它們不會(huì)中斷。但是，當(dāng)鏈接到同一網(wǎng)站的其他位置時(shí)，你應(yīng)該使用相對(duì)鏈接（當(dāng)鏈接到另一個(gè)網(wǎng)站時(shí)，你需要使用絕對(duì)鏈接）： * 首先，檢查代碼要容易得多——相對(duì)URL通常比絕對(duì)URL短得多，這使得閱讀代碼更容易。 * 其次，在可能的情況下使用相對(duì)URL更有效。當(dāng)使用絕對(duì)URL時(shí)，瀏覽器首先通過[DNS](https://developer.mozilla.org/zh-CN/docs/Glossary/DNS)（見[萬維網(wǎng)是如何工作的](https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/How_the_Web_works)）查找服務(wù)器的真實(shí)位置，然后再轉(zhuǎn)到該服務(wù)器并查找所請求的文件。另一方面，相對(duì)URL，瀏覽器只在同一服務(wù)器上查找被請求的文件。因此，如果你使用絕對(duì)URL而不是相對(duì)URL，你就會(huì)不斷地讓你的瀏覽器做額外的工作，這意味著它的效率會(huì)降低。 ## 鏈接到非HTML資源 ——留下清晰的指示 當(dāng)鏈接到一個(gè)需要下載的資源（如PDF或Word文檔）或流媒體（如視頻或音頻）或有另一個(gè)潛在的意想不到的效果（打開一個(gè)彈出窗口，或加載Flash電影），你應(yīng)該添加明確的措辭，以減少任何混亂。如下的例子會(huì)讓人反感： * 如果你是在低帶寬連接，點(diǎn)擊一個(gè)鏈接，然后就開始下載大文件。 * 如果你沒有安裝Flash播放器，點(diǎn)擊一個(gè)鏈接，然后突然被帶到一個(gè)需要Flash的頁面。 讓我們看看一些例子，看看在這里可以使用什么樣的文本： ``` <p><a href="http://www.example.com/large-report.pdf"> 下載銷售報(bào)告（PDF, 10MB） </a></p> <p><a href="http://www.example.com/video-stream/"> 觀看視頻（將在新標(biāo)簽頁中播放, HD畫質(zhì)） </a></p> <p><a href="http://www.example.com/car-game"> 進(jìn)入汽車游戲（需要Flash插件） </a></p> ``` ## 在下載鏈接時(shí)使用 download 屬性 當(dāng)您鏈接到要下載的資源而不是在瀏覽器中打開時(shí)，您可以使用 download 屬性來提供一個(gè)默認(rèn)的保存文件名（譯注：此屬性僅適用于同源URL）。下面是一個(gè)下載鏈接到Firefox 的 Windows最新版本的示例： ``` <a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=zh-CN" download="firefox-latest-64bit-installer.exe"> 下載最新的 Firefox 中文版 - Windows（64位） </a> ``` # 電子郵件鏈接 當(dāng)點(diǎn)擊一個(gè)鏈接或按鈕時(shí)，打開一個(gè)新的電子郵件發(fā)送信息而不是連接到一個(gè)資源或頁面，這種情況是可能做到的。這樣做是使用<a>元素和mailto：URL的方案。 其最基本和最常用的使用形式為一個(gè)mailto:link （鏈接），鏈接簡單說明收件人的電子郵件地址。例如: ``` <a href="mailto:nowhere@mozilla.org">向 nowhere 發(fā)郵件</a> ``` 這會(huì)創(chuàng)建一個(gè)鏈接，看起來像這樣： 向 nowhere 發(fā)郵件。 實(shí)際上，郵件地址甚至是可選的。如果你忘記了（也就是說，你的href僅僅只是簡單的"mailto:"），一個(gè)新的發(fā)送電子郵件的窗口也會(huì)被用戶的郵件客戶端打開，只是沒有收件人的地址信息，這通常在“分享”鏈接是很有用的，用戶可以發(fā)送給他們選擇的地址郵件 ## 具體細(xì)節(jié) 除了電子郵件地址，您還可以提供其他信息。事實(shí)上，任何標(biāo)準(zhǔn)的郵件頭字段可以被添加到你提供的郵件URL。 其中最常用的是主題(subject)、抄送(cc)和主體(body) (這不是一個(gè)真正的頭字段，但允許您為新郵件指定一個(gè)短內(nèi)容消息)。 每個(gè)字段及其值被指定為查詢項(xiàng)。 **下面是一個(gè)包含cc、bcc、主題和主體的示例：** ``` <a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email"> Send mail with cc, bcc, subject and body </a> ``` **注意: ** ``` 每個(gè)字段的值必須是URL編碼的。 也就是說，不能有非打印字符（不可見字符比如制表符、換行符、分頁符）和空格 percent-escaped. 同時(shí)注意使用問號(hào)（?）來分隔主URL與參數(shù)值，以及使用&符來分隔mailto:中的各個(gè)參數(shù)。 這是標(biāo)準(zhǔn)的URL查詢標(biāo)記方法。閱讀 GET 方法 以了解哪種URL查詢標(biāo)記方法是更常用的。 ``` # 參考資料 * 《建立超鏈接 - 學(xué)習(xí) Web 開發(fā) | MDN》