最新的Web開發教程

HTML鏈接

❮上一頁 下一頁章❯

鏈接是在幾乎所有的網頁中找到。 鏈接允許用戶從頁面點擊自己的方式來頁。

HTML鏈接說明

的超鏈接，或只是一個鏈路，是對數據的引用，讀者可以直接遵循通過單擊，攻絲或懸停。

的超鏈接指向一個整個文檔或文檔內的特定元素。 超文本是文本超鏈接。 是從鏈接的文本被稱為錨文本。

該用於查看和建立超文本軟件系統是一個超文本系統，並建立一個超鏈接是超鏈接（或簡單地鏈接）。 用戶以下鏈接據說導航或瀏覽的超文本。

HTML鏈接 - 超鏈接

HTML鏈接是超鏈接。

超鏈接是文本，或者您可以點擊圖片，並跳轉到另一個文檔。

HTML鏈接 - 語法

在HTML中，鏈接與定義<a>標籤：

<a href=" url "> link text </a>

例

<a href="http://www.w3ii.com/html/default.html">Visit our HTML tutorial</a>
試一試»

的href屬性指定的目的地址(http://www.w3ii.com/html/default.html)

鏈接文本是可見部分(Visit our HTML tutorial) 。

點擊該鏈接的文字，會送你到指定的地址。

鏈接文本不必是文本。 它可以是一個HTML圖像或任何其他HTML元素。

如果沒有在子文件夾地址的斜線，你可能會產生兩個請求到服務器。 許多服務器將一個斜線會自動添加到地址，然後創建一個新的請求。

本地鏈接

上面的實施例中使用的絕對URL (A full web address) 。

本地鏈接(link to the same web site)與相對URL指定的(without http://www.... )

例

<a href="html_images.asp">HTML Images</a>
試一試»

HTML鏈接 - 顏色

當你在一條鏈路上移動鼠標時，有兩件事情一般發生：

  • 鼠標箭頭會變成一個小手
  • 鏈接元素的顏色會發生變化

默認情況下，鏈接會出現這樣(in all browsers) ：

  • 未訪問過的鏈接下劃線的藍色
  • 訪問鏈接是下劃線和紫色
  • 活動鏈接是下劃線和紅色

您可以更改默認的顏色，使用樣式：

例

<style>
a:link    {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover   {color:red; background-color:transparent; text-decoration:underline}
a:active  {color:yellow; background-color:transparent; text-decoration:underline}
</style>
試一試»

HTML鏈接-將target屬性

該target屬性指定在哪裡打開鏈接的文檔。

這個例子將在新的瀏覽器窗口或新選項卡中打開鏈接的文檔：

例

<a href="http://www.w3ii.com/" target="_blank">Visit w3ii!</a>
試一試»
目標價值 描述
_blank 打開鏈接的文檔在新窗口或標籤
_self 打開在同一幀中所鏈接的文檔，因為它被點擊(this is default)
_parent 打開鏈接的文檔在父幀
_top 打開鏈接的文檔窗口的全身
framename 打開鏈接的文檔在一個名為框架

如果你的網頁被鎖定在一個框架，你可以使用target="_top"打出來的框架：

例

<a href="http://www.w3ii.com/html/default.html" target="_top">HTML5 tutorial!</a>
試一試»

HTML鏈接 - 圖片為鏈接

這是常見的使用圖像作為鏈接：

例

<a href="default.html">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
試一試»

邊界：0被添加到防止IE9 (and earlier)從圖像顯示周圍的邊界。

HTML鏈接 - 創建書籤

HTML書籤是用來讓讀者跳轉到網頁中的特定部分。

書籤是實際的，如果你的網站有很長的頁面。

建立書籤，您必須首先創建書籤，然後添加一個鏈接到它。

當用戶點擊該鏈接時，頁面將滾動到以書籤的位置。

例

首先，創建了一個書籤id屬性：

<h2 id="tips">Useful Tips Section</h2>

然後，將鏈接添加到書籤("Useful Tips Section")在同一頁面內：

<a href="#tips">Visit the Useful Tips Section</a>

或者，將鏈接添加到書籤("Useful Tips Section")從另一頁：

例

<a href="html_tips.html#tips">Visit the Useful Tips Section</a>
試一試»

章節總結

  • 使用HTML <a>元素定義鏈接
  • 使用HTML href屬性來定義鏈接地址
  • 使用HTML target屬性來定義在哪裡打開鏈接的文檔
  • 使用HTML <img>元件(inside <a> )使用圖像作為一個鏈接
  • 使用HTML id屬性( id=" value ")在頁面中定義書籤
  • 使用HTML href屬性( href="# value ")鏈接到書籤

測試自己與練習！

練習1» 練習2» 練習3» 練習4» 練習5»

HTML鏈接標記

標籤 描述
<a> 定義一個超鏈接

❮上一頁 下一頁章❯