Web 創(chuàng)建超鏈接

超鏈接真的很重要 - 它們使Web成為一個(gè)Web。本文介紹了創(chuàng)建鏈接所需的語法，并討論了鏈接最佳做法。

什么是超鏈接?

---

例如，BBC主頁包含大量的鏈接，不僅指向多個(gè)新聞故事，而且指向網(wǎng)站的不同區(qū)域（導(dǎo)航功能），登錄/注冊(cè)頁面（用戶工具）等等。

鏈接的解剖

---

通過將文本（或其他內(nèi)容，見塊級(jí)鏈接）轉(zhuǎn)換為<a>元素內(nèi)的鏈接來創(chuàng)建基本鏈接， 給它一個(gè)href屬性（也稱為目標(biāo)），它將包含你希望鏈接指向的網(wǎng)址。

<p>I'm creating a link to
<a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.
</p>

以上代碼結(jié)果如下：

I'm creating a link to the Mozilla homepage.

使用<title>添加支持信息

你可能想要給你的鏈接添加的另一個(gè)屬性是<title>（標(biāo)題）；這旨在包含關(guān)于鏈接的補(bǔ)充的有用信息，例如頁面包含什么樣的信息或需要注意的事情。例如：

<p>I'm creating a link to
<a href="https://www.mozilla.org/en-US/"
   title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepage</a>.
</p>

以上代碼結(jié)果如下（當(dāng)懸停在鏈接上時(shí)，標(biāo)題將作為提示文本出現(xiàn)）：

I'm creating a link to the Mozilla homepage.

主動(dòng)學(xué)習(xí)：創(chuàng)建你自己的示例鏈接

主動(dòng)學(xué)習(xí)時(shí)間：我們希望你使用本地代碼編輯器創(chuàng)建一個(gè)HTML文檔（我們的 getting started template就做的很好）。

• 在HTML正文部分，嘗試添加一個(gè)或者多個(gè)段落或其他類型的內(nèi)容。
• 將某些內(nèi)容轉(zhuǎn)換為鏈接。
• 包含標(biāo)題屬性。

塊級(jí)鏈接

如上所述，你可以將一些內(nèi)容轉(zhuǎn)換為鏈接，甚至是 塊級(jí)元素。如果你想要將一個(gè)圖像轉(zhuǎn)換為鏈接 ，你只需把圖像放到<a></a>標(biāo)簽中間。

<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage">
</a>

URLs與路徑(path)快速入門

---

要快速地了解鏈接目標(biāo)，你需要了解URLs和文件路徑。在這一部分為你提供了你所需的信息。

一個(gè)URL，或統(tǒng)一資源定位器只是定義在網(wǎng)絡(luò)上的位置的一個(gè)文本字符串。例如Mozilla的英文主頁定位在https://www.mozilla.org/en-US/。

URLs使用路徑查找文件。路徑指定文件系統(tǒng)中你感興趣的文件所在的位置?？匆幌乱粋€(gè)簡(jiǎn)單的目錄結(jié)構(gòu)的例子（參見 creating-hyperlinks 目錄）。

此目錄結(jié)構(gòu)的根目錄稱為creation-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è)文件 — 一個(gè) PDF (project-brief.pdf) 和一個(gè)index.html文件。請(qǐng)注意你可以有兩個(gè)index.html文件在一個(gè)項(xiàng)目下的不同的系統(tǒng)文件位置。許多網(wǎng)站就是如此。第二個(gè)index.html或許是項(xiàng)目相關(guān)信息的主登錄界面。

• 相同目錄：如果index.html（頂層的index.html）想要包含一個(gè)超鏈接(hyperlink)指向contacts.html，你只需要指定到想要鏈接的文件名，因?yàn)樗c當(dāng)前文件是在同一個(gè)目錄的。所以你應(yīng)該使用的URL是contacts.html：

  <p>Want to contact a specific staff member?
  Find details on our <a href="contacts.html">contacts page</a>.</p>

• 向下移動(dòng)到子目錄：如果你想在index.html（頂層index.html）中包含一個(gè)指向projects/index.html的超鏈接，你需要進(jìn)入project目錄，然后指明要鏈接到的文件。通過指定目錄的名稱，然后是正斜杠，然后是文件的名稱來完成。因此你要使用的URL是projects/index.html：

  <p>Visit my <a href="projects/index.html">project homepage</a>.</p>

• 回到上級(jí)目錄：如果你想在projects/index.html中包含一個(gè)指向pdfs/project-brief.pdf的超鏈接，你必須返回上一個(gè)目錄級(jí)，然后再回到pdf目錄?！胺祷厣弦粋€(gè)目錄級(jí)”使用兩個(gè)點(diǎn)表示：..，所以你應(yīng)該使用的URL是../pdfs/project-brief.pdf：

  <p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p>

文檔碎片

可以鏈接到HTML文檔的特定部分（稱為文檔碎片），而不僅僅是文檔頂部。為此，你首先必須為要鏈接的元素分配一個(gè) id 屬性。通常鏈接到特定標(biāo)題是有意義的，因此它看起來像下面這樣：

<h2 id="Mailing_address">Mailing address</h2>

然后鏈接到該特定的 id ，你可以將它包含在URL的末尾，前面加上哈希/井號(hào)符號(hào)，例如：

<p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p>

你甚至可以使用文檔碎片引用鏈接到同一文檔的另一部分：

<p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p>

絕對(duì)URL和相對(duì)URL

你在網(wǎng)絡(luò)上遇到的兩個(gè)術(shù)語是絕對(duì)URT和相對(duì)URL：

絕對(duì)URL：指向由其在Web上的絕對(duì)位置定義的位置，包括協(xié)議和域名。像下面的例子，如果將index.html頁面上傳到projects這一個(gè)目錄，project位于web服務(wù)器的根目錄，web站點(diǎn)的域名為http://www.example.com，那么這個(gè)頁面可以通過http://www.example.com/projects/index.html訪問（或者僅僅通過http://www.example.com/projects/來訪問，因?yàn)榇蠖鄶?shù)web服務(wù)器是通過查找像index.html這樣的頁面來加載，如果沒有特定的URL的話）。

絕對(duì)URL總是指向相同的位置，不管它在哪里使用。

相對(duì)URL：指向與你鏈接的文件相關(guān)的位置，更像我們?cè)谇懊嬉还?jié)中所看到的位置。例如，如果我們想從示例文件鏈接http://www.example.com/projects/index.html轉(zhuǎn)到相同目錄下的一個(gè)PDF文件，那么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將指向不同的位置，具體取決于內(nèi)部使用的文件所在的位置——例如，如果我們把index.html文件從projects目錄移出來并進(jìn)入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。

鏈接最佳做法

---

在編寫鏈接時(shí)，有一些最佳做法。讓我們來看看這些。

用清晰的鏈接措辭

在你的網(wǎng)頁上放置鏈接很容易。但這還不夠，我們需要讓所有讀者都可以訪問我們的鏈接，無論他們當(dāng)前所處的上下文以及他們喜歡用哪種工具。例如：

• 屏幕閱讀器用戶喜歡在頁面上從鏈接跳轉(zhuǎn)到鏈接，并從上下文中讀取鏈接。
  
• 搜索引擎使用鏈接文本來索引目標(biāo)文件，因此最好在鏈接文本中包含關(guān)鍵詞，以有效地描述與之相關(guān)的信息。
• 視覺讀者瀏覽頁面，而不是閱讀每一個(gè)字，他們的眼睛會(huì)被頁面突出的特征所吸引，比如鏈接。他們會(huì)發(fā)現(xiàn)描述性的鏈接文本很有用。
  

讓我們來看一個(gè)具體的例子：

好鏈接文字: 下載Firefox

<p><a href="https://firefox.com/">
  Download Firefox
</a></p>

不好鏈接文字: 點(diǎn)擊此處下載Firefox

<p><a href="https://firefox.com/">
  Click here
</a>
to download Firefox</p>

其他提示：

• 不要復(fù)用URL作為鏈接文本的一部分——URL看起來很丑，當(dāng)屏幕閱讀器逐字讀出時(shí)，聲音甚至更難聽。
  
• 不要在鏈接文本中說“l(fā)ink”或“l(fā)inks to”——它只是噪音。屏幕閱讀器告訴人們有一個(gè)鏈接。視覺用戶也會(huì)知道有一個(gè)鏈接，因?yàn)殒溄油ǔＪ怯貌煌念伾O(shè)計(jì)的，并帶有下劃線（這個(gè)慣例一般不應(yīng)該被打破，因?yàn)橛脩粢呀?jīng)習(xí)慣了它。）
  
• 保持你的鏈接標(biāo)簽盡可能短——長鏈接會(huì)特別煩擾屏幕閱讀器用戶，他們必須聽到整件事讀出來。
  
• 最小化同一文本的多個(gè)副本鏈接到不同位置的實(shí)例。這可能會(huì)導(dǎo)致屏幕閱讀器用戶遇到問題，他們經(jīng)常會(huì)脫離上下文提出鏈接列表——那些所有標(biāo)記為“點(diǎn)擊這里”，“點(diǎn)擊這里”，“點(diǎn)擊這里”的鏈接會(huì)令人產(chǎn)生困惑。
  

盡可能使用相對(duì)鏈接

從上面的描述，你可能會(huì)認(rèn)為始終使用絕對(duì)鏈接是一個(gè)好主意；畢竟，當(dāng)頁面像相對(duì)鏈接一樣移動(dòng)時(shí)，它們不會(huì)中斷。但是，在鏈接到同一網(wǎng)站中的其他位置時(shí)，你應(yīng)該盡可能使用相對(duì)鏈接（當(dāng)鏈接到另一個(gè)網(wǎng)站時(shí)，你將需要使用絕對(duì)鏈接）：

• 首先，掃描代碼要容易得多——相對(duì)URL通常比絕對(duì)URL短得多，這使得閱讀代碼更容易。
  
• 其次，盡可能使用相對(duì)URL更有效。當(dāng)使用絕對(duì)URL時(shí)，瀏覽器首先在域名服務(wù)器（使用“DNS”，查看網(wǎng)絡(luò)是怎么工作的了解更多）上查找服務(wù)器的真實(shí)位置，然后再轉(zhuǎn)到該服務(wù)器并查找所請(qǐng)求的文件。另一方面，使用相對(duì)URL，瀏覽器只在同一服務(wù)器上查找被請(qǐng)求的文件。因此，如果你使用絕對(duì)URL替代相對(duì)URL，則會(huì)不斷地讓你的瀏覽器做額外的工作，這意味著它的效率會(huì)降低。
  

鏈接到非HTML資源 - 留下明確的路標(biāo)

當(dāng)鏈接到一個(gè)要下載的資源（如PDF或Word文檔）或流式傳輸（如視頻或音頻）或有另一種潛在的意外效果（打開一個(gè)彈出窗口或加載Flash電影）的資源時(shí)，你應(yīng)該添加清晰的措辭，減少任何混亂。下面就是一些很惱人的例子：

• 如果你處在低帶寬連接，點(diǎn)擊一個(gè)鏈接，然后突然啟動(dòng)了多兆字節(jié)的下載。
• 如果你沒有安裝Flash播放器，點(diǎn)擊一個(gè)鏈接，然后突然被帶到一個(gè)需要Flash的頁面。

讓我們來看一些例子，看看這里可以使用什么樣的文本：

<p><a href="http://www.example.com/large-report.pdf">
  Download the sales report (PDF, 10MB)
</a></p>

<p><a href="http://www.example.com/video-stream/">
  Watch the video (stream opens in separate tab, HD quality)
</a></p>

<p><a href="http://www.example.com/car-game">
  Play the car game (requires Flash)
</a></p>

鏈接到下載時(shí)使用download屬性

當(dāng)鏈接到要下載的資源而不是在瀏覽器中打開時(shí)，可以使用 download 屬性來提供一個(gè)默認(rèn)的保存文件名。下面是一個(gè)下載鏈接到Firefox 39 Windows版本的示例：

<a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US"
   download="firefox-39-installer.exe">
  Download Firefox 39 for Windows
</a>

主動(dòng)學(xué)習(xí)：創(chuàng)建一個(gè)導(dǎo)航菜單

---

對(duì)于此練習(xí)，我們希望你把一些頁面和導(dǎo)航菜單鏈接起來，創(chuàng)建一個(gè)多頁面的網(wǎng)站。這是創(chuàng)建網(wǎng)站的一種常見方式——在每個(gè)頁面上使用相同的網(wǎng)頁結(jié)構(gòu)，包括相同的導(dǎo)航菜單，因此當(dāng)點(diǎn)擊鏈接時(shí)，它給人的印象是你停留在同一個(gè)地方，而不同的內(nèi)容正在被提出來。

你需要在同一目錄中創(chuàng)建以下四個(gè)頁面的本地副本（請(qǐng)參閱navigation-menu-start目錄獲取完整的文件列表）：

• index.html
• projects.html
• pictures.html
• social.html

你應(yīng)該：

1. 在一個(gè)頁面上的指定位置添加一個(gè)無序列表，其中包含要鏈接到的頁面的名稱。導(dǎo)航菜單通常只是一個(gè)鏈接列表，因此這在語義上是可以的。
   
2. 將每個(gè)頁面名稱轉(zhuǎn)換為該頁面的鏈接
3. 將導(dǎo)航菜單復(fù)制到每個(gè)頁面。
4. 在每個(gè)頁面上，只刪除同一頁面的鏈接——頁面包含一個(gè)鏈接到自己的鏈接是令人困惑和毫無意義的，而缺少這個(gè)鏈接會(huì)對(duì)你當(dāng)前的頁面起到很好的視覺提示作用。

最終的例子應(yīng)該是這樣的：

電子郵件鏈接

---

當(dāng)點(diǎn)擊一個(gè)鏈接或按鈕時(shí)，打開一個(gè)新的電子郵件發(fā)送信息而不是連接到一個(gè)資源或頁面，這種情況是可以做到的。這樣做是使用<a>元素和mailto：URL的方案。

在其最基本和最常用的形式中， mailto:link僅表示預(yù)期收件人的電子郵件地址。 例如：

<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

這會(huì)創(chuàng)建一個(gè)鏈接，看起來像這樣：Send email to nowhere。

實(shí)際上，電子郵件地址甚至是可選的。如果你把它遺漏了（也就是說，你的 href只是簡(jiǎn)單的“mailto:”），一個(gè)新的發(fā)送電子郵件的窗口也會(huì)被用戶的郵件客戶端打開，只是沒有收件人的地址信息。這通常用作“共享”鏈接，用戶可以單擊該鏈接將電子郵件發(fā)送到他們選擇的地址。

指定詳細(xì)信息

除了電子郵件地址，你還可以提供其他信息。事實(shí)上，任何標(biāo)準(zhǔn)郵件標(biāo)題字段都可以添加到你提供的mailto URL。其中最常用的是“subject”（主題），“cc”和“body”（正文）（這不是真正的標(biāo)題字段，但允許你為新電子郵件指定一個(gè)短內(nèi)容消息）。每個(gè)字段及其值都被指定為查詢項(xiàng)。

下面是一個(gè)包含cc，bcc，主題和正文的示例：

<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email">
  Send mail with cc, bcc, subject and body
</a>

以下是其他一些mailto：url示例：

• mailto:
• mailto:nowhere@mozilla.org
• mailto:nowhere@mozilla.org,nobody@mozilla.org
• mailto:nowhere@mozilla.org?cc=nobody@mozilla.org
• mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject

總結(jié)

---

就目前來說，以上是關(guān)于鏈接的介紹！當(dāng)你在后面的課程中開始學(xué)習(xí)設(shè)置樣式時(shí)，你將會(huì)需要回顧鏈接這一章節(jié)。接下來的HTML，我們將返回到文本語義，并看看一些你會(huì)覺得有用的更高級(jí)/不尋常的功能——你的下一站是“高級(jí)文本格式”。