Web 創(chuàng)建超鏈接

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

什么是超鏈接?

---

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

鏈接的解剖

---

通過將文本（或其他內(nèi)容，見塊級鏈接）轉(zhuǎn)換為<a>元素內(nèi)的鏈接來創(chuàng)建基本鏈接， 給它一個href屬性（也稱為目標），它將包含你希望鏈接指向的網(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>添加支持信息

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

<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é)果如下（當懸停在鏈接上時，標題將作為提示文本出現(xiàn)）：

I'm creating a link to the Mozilla homepage.

主動學習：創(chuàng)建你自己的示例鏈接

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

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

塊級鏈接

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

<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)快速入門

---

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

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

URLs使用路徑查找文件。路徑指定文件系統(tǒng)中你感興趣的文件所在的位置。看一下一個簡單的目錄結(jié)構(gòu)的例子（參見 creating-hyperlinks 目錄）。

此目錄結(jié)構(gòu)的根目錄稱為creation-hyperlinks。當在網(wǎng)站上工作時，你會有一個包含整個網(wǎng)站的目錄。在根目錄，我們有一個index.html和一個contacts.html文件。在真實的網(wǎng)站上，index.html將會成為我們的主頁或登錄頁面。

我們的根目錄還有兩個目錄：pdfs和projects。它們分別包含單個文件 — 一個 PDF (project-brief.pdf) 和一個index.html文件。請注意你可以有兩個index.html文件在一個項目下的不同的系統(tǒng)文件位置。許多網(wǎng)站就是如此。第二個index.html或許是項目相關信息的主登錄界面。

• 相同目錄：如果index.html（頂層的index.html）想要包含一個超鏈接(hyperlink)指向contacts.html，你只需要指定到想要鏈接的文件名，因為它與當前文件是在同一個目錄的。所以你應該使用的URL是contacts.html：

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

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

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

• 回到上級目錄：如果你想在projects/index.html中包含一個指向pdfs/project-brief.pdf的超鏈接，你必須返回上一個目錄級，然后再回到pdf目錄。“返回上一個目錄級”使用兩個點表示：..，所以你應該使用的URL是../pdfs/project-brief.pdf：

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

文檔碎片

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

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

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

<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>

絕對URL和相對URL

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

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

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

相對URL：指向與你鏈接的文件相關的位置，更像我們在前面一節(jié)中所看到的位置。例如，如果我們想從示例文件鏈接http://www.example.com/projects/index.html轉(zhuǎn)到相同目錄下的一個PDF文件，那么URL就是文件名。例如：project-brief.pdf——不需要額外的信息。如果PDF文件能夠在projects的子目錄pdfs中訪問到，相對路徑就是pdfs/project-brief.pdf（對應的絕對URL就是 http://www.example.com/projects/pdfs/project-brief.pdf）。

一個相對URL將指向不同的位置，具體取決于內(nèi)部使用的文件所在的位置——例如，如果我們把index.html文件從projects目錄移出來并進入Web站點的根目錄（最高層級，而不是任何目錄中），pdfs/project-brief.pdf的相對URL將會指向http://www.example.com/pdfs/project-brief.pdf，而不是http://www.example.com/projects/pdfs/project-brief.pdf。

鏈接最佳做法

---

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

用清晰的鏈接措辭

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

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

讓我們來看一個具體的例子：

好鏈接文字: 下載Firefox

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

不好鏈接文字: 點擊此處下載Firefox

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

其他提示：

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

盡可能使用相對鏈接

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

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

鏈接到非HTML資源 - 留下明確的路標

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

• 如果你處在低帶寬連接，點擊一個鏈接，然后突然啟動了多兆字節(jié)的下載。
• 如果你沒有安裝Flash播放器，點擊一個鏈接，然后突然被帶到一個需要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>

鏈接到下載時使用download屬性

當鏈接到要下載的資源而不是在瀏覽器中打開時，可以使用 download 屬性來提供一個默認的保存文件名。下面是一個下載鏈接到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>

主動學習：創(chuàng)建一個導航菜單

---

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

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

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

你應該：

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

最終的例子應該是這樣的：

電子郵件鏈接

---

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

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

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

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

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

指定詳細信息

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

下面是一個包含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é)

---

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