html - 連結詳解

超文本的基本特征就是可以超連結文檔；你可以指向其他位置，該位置可以在目前的文檔中、區域網路中的其他文檔，也可以在網際網路上的任何位置的文檔中。這些文檔組成了一個雜亂的資訊網。目标文檔通常與其來源有某些關聯，并且豐富了來源；來源中的連結元素則将這種關系傳遞給浏覽者

**

HTML 使用超級連結與網絡上的另一個文檔相連。

幾乎可以在所有的網頁中找到連結。點選連結可以從一張頁面跳轉到另一張頁面。

**

一、HTML 超連結（連結）

• 超連結可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點選這些内容來跳轉到新的文檔或者目前文檔中的某個部分。
• 當您把滑鼠指針移動到網頁中的某個連結上時，箭頭會變為一隻小手。
• 我們通過使用

  <a>

  标簽在 HTML 中建立連結。
• 有兩種使用

  <a>

  标簽的方式：
  1. 通過使用

     href

     屬性 - 建立指向另一個文檔的連結
  2. 通過使用

     name

     屬性 - 建立文檔内的書簽

二、将文字作為超連結

示例代碼：

示例效果：

這是一個有下劃線的連結

可見在

<a>

标簽中的

href

屬性中指明所指向的位址，以及可在一對

<a>

标簽中嵌入其他的标簽，都會成為連結的元素

三、将圖檔或其他元素作為超連結

示例代碼：

示例效果：

可見當點選圖檔時也會轉向我設定的頁面，以及可在

<a>

标簽中嵌入其他的元素，比如塊、按鈕等等

四、沒有下劃線的超連結

由二可知當滑鼠移動到連結文字上時會在文字下面顯示一條下劃線，則可通過設定樣式變成沒有下劃線

示例代碼：

示例效果：

這是一個沒下劃線的連結！

五、target 屬性：連結在新視窗打開

當不設定時預設當點選超連結時在該視窗覆寫打開，如果把連結的

target

屬性設定為

"_blank"

，該連結會在新視窗中打開,即在浏覽器中再打開一個視窗來顯示連結網頁，且不會關閉目前的視窗

示例代碼：

`<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>`
           

示例效果：

Visit W3School!

四、name 屬性：設定網頁導航（書簽）

4.1、指向本頁面的導航

• name 屬性規定錨（anchor）的名稱。
• 您可以使用 name 屬性建立 HTML 頁面中的書簽。
• 書簽不會以任何特殊方式顯示，它對讀者是不可見的。
• 當使用命名錨（named anchors）時，我們可以建立直接跳至該命名錨（比如頁面中某個小節）的連結，這樣使用者就無需不停地滾動頁面來尋找他們需要的資訊了。
• 也即建立一個網頁的書簽，當點選這個書簽時即可轉到一個網頁的相應位置，比如回到頁面頂部，比如設定一個頁面的導航資訊

示例代碼：

<a name="top"></a> <!-- 放置于該文章開頭，未設定文本和連結，隻是一個标記 -->  

<a href="#top">傳回開頭</a><!--放置于該文章任何位置，設定了文本内容，當點選時即傳回到了文章開頭 --> 
           

示例效果：

- 當點選以下連結時則會傳回到文章開頭：

傳回開頭

可見通過設定name屬性名（屬性名為自定義的），以及通過在herf屬性中使用“ #+屬性名 ”指明指向的屬性名則可以生成可轉向對于name所在的位置，形成頁面導航（書簽）

4.2、指向其他頁面的導航

上面例子是在一個頁面的導航，當然也可以設定指向其他頁面的導航：

示例代碼：

示例效果：

有用的提示

當點選該連結時則會指向

http://www.w3school.com.cn/html/html_links.asp

頁面的name值tips的連結位置，也即通過在herf值中加入所指向其他網站的位址再加上 “ #+屬性名 ”完成指向其他頁面的導航

4.3、提示

請始終将正斜杠添加到子檔案夾：

假如這樣書寫連結：

href="http://www.w3school.com.cn/html" target="_blank" rel="external nofollow"

(在後面缺少一個正斜杠)

就會向伺服器産生兩次 HTTP 請求。這是因為伺服器會添加正斜杠到這個位址，然後建立一個新的請求，就像這樣：

href="http://www.w3school.com.cn/html/" target="_blank" rel="external nofollow"

- 提示：命名錨經常用于在大型文檔開始位置上建立目錄。可以為每個章節賦予一個命名錨，然後把連結到這些錨的連結放到文檔的上部。如果您經常通路百度百科，您會發現其中幾乎每個詞條都采用這樣的導航方式。

- 提示：假如浏覽器找不到已定義的命名錨，那麼就會定位到文檔的頂端。不會有錯誤發生。