<一>
HTML <a> 標籤
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<a href="http://www.php.cn">访问php中文网!</a>
</body>
</html>
##執行實例»
#點擊"運行實例" 按鈕查看線上實例
#
瀏覽器支援
所有主流瀏覽器都支援 <a> 標籤。
標籤定義及使用說明
a標籤是什麼意思？
<a> 標籤定義超鏈接，用於從一個頁面連結到另一個頁面。
<a> 元素最重要的屬性是 href 屬性，它指定連結的目標。
在所有瀏覽器中，連結的預設外觀如下：
未被存取的連結帶有下劃線而且是藍色的
#已被訪問的連結帶有下劃線而且是紫色的
活動連結帶有下劃線而且是紅色的
提示與註解
提示：如果沒有使用href 屬性，則不能使用hreflang、media、rel、target 以及type 屬性。
提示：通常在目前瀏覽器視窗中顯示被連結頁面，除非規定了其他 target。
提示：請使用 CSS 來改變連結的樣式。
HTML 4.01 與 HTML5之間的差異
在 HTML 4.01 中，<a> 標籤既可以是超鏈接，也可以是錨。在 HTML5 中，<a> 標籤是超鏈接，但是假如沒有 href 屬性，它只是超鏈接的一個佔位符。
HTML5 有一些新的屬性，同時不再支援一些 HTML 4.01 的屬性。
屬性
New ：HTML5 中的新屬性。
| 屬性 | 值 | 描述 |
|---|
| #charset | ##char_encoding | HTML5 不支援。 規定目標 URL 的字元編碼。 |
coords | coordinates | #HTML5 不支援。 規定連結的座標。 |
download| New | filename | #指定下載連結 |
href | URL | 規定連結的目標URL。 |
hreflang | language_code | #規定目標 URL 的基準語言。僅在 href 屬性存在時使用。 |
media| New | media_query | 規定目標 URL 的媒介類型。預設值：all。僅在 href 屬性存在時使用。 |
name | section_name | #HTML5 不支援。 規定錨的名稱。 |
rel | alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
| 規定目前文件與目標 URL 之間的關係。僅在 href 屬性存在時使用。 |
rev | text | #HTML5 不支援。 規定目標 URL 與目前文件之間的關係。 |
shape | default#
rect
circle
poly
| HTML5 不支援。 規定連結的形狀。 |
target | _blank
_parent
_self
#
_top
framename | 規定在何處開啟目標 URL。僅在 href 屬性存在時使用。 |
type | New | MIME_type | 規定目標 URL 的 MIME 類型。僅在 href 屬性存在時使用。 附註：MIME = Multipurpose Internet Mail Extensions。
|
全域屬性
<a> 標籤支援 HTML 的全域屬性。
事件屬性
<a> 標籤支援 HTML 的事件屬性。
試試看 - 實例
建立超級連結
本例示範如何在 HTML 文件中建立連結。
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>我使用了外部样式文件来格式化文本 </h1>
<p>我也是!</p>
</body>
</html>
點擊"運行實例" 按鈕查看線上實例
將圖像作為連結
本範例示範如何使用圖像作為連結。
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>
图像作为链接: <a href="http://php.cn">
<img border="0" alt="w3cschool" src="logo.png" width="100" height="100">
</a>
</p>
</body>
</html>
點擊"運行實例" 按鈕查看線上實例
在新的瀏覽器視窗中開啟連結
本例示範如何在新視窗中開啟一個頁面，這樣的話訪客就無需離開您的網站了。
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<a href="http://www.php.cn/" target="_blank">访问php中文网!</a>
<p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p>
</body>
</html>
點擊"運行實例" 按鈕查看線上實例
建立電子郵件連結
本例示範如何連結到一個郵件。 （本例在安裝郵件用戶端程式後才能運作。）
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>
这是一个电子邮件链接：
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
发送邮件</a>
</p>
<p>
<b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.
</p>
</body>
</html>
點擊"執行實例" 按鈕查看線上實例
建立電子郵件連結2
本例示範更複雜的郵件連結。
實例
<!DOCTYPE html>
<html>
<body>
<p>
This is another mailto link:
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">Send mail!</a>
</p>
<p>
<b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.
</p>
</body>
</html>
點擊"運行實例" 按鈕查看線上實例
使用錨跳到同一個頁面的不同位置
本範例示範如何使用錨的id 屬性跳到頁面的不同位置（ HTML5 不支援name 屬性）。
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h2><a id="top">这是标题，底部链接可以链接到这</a></h2>
<p>php中文网 - php中文网<br><br><br><br></p>
<p>php中文网 - php中文网<br><br><br><br></p>
<p>php中文网 - php中文网<br><br><br><br></p>
<p>php中文网 - php中文网<br><br><br><br></p>
<p>php中文网 - php中文网<br><br><br><br></p>
<p>php中文网 - php中文网<br><br><br><br></p>
<p>php中文网 - php中文网<br><br><br><br></p>
<p>php中文网 - php中文网<br><br><br><br></p>
<p>php中文网 - php中文网<br><br><br><br></p>
<p>php中文网 - php中文网<br><br><br><br></p>
<p>php中文网 - php中文网<br><br><br><br></p>
<p>php中文网 - php中文网<br><br><br><br></p>
<p>php中文网 - php中文网<br><br><br><br></p>
<p>php中文网 - php中文网<br><br><br><br></p>
<p>php中文网 - php中文网<br><br><br><br></p>
<p>php中文网 - php中文网<br><br><br><br></p>
<p>php中文网 - php中文网<br><br><br><br></p>
<p>php中文网 - php中文网<br><br><br><br></p>
<p>php中文网 - php中文网<br><br><br><br></p>
<p>php中文网 - php中文网<br><br><br><br></p>
<p>php中文网 - php中文网<br><br><br><br></p>
<p>php中文网 - php中文网<br><br><br><br></p>
<p>php中文网 - php中文网<br><br><br><br></p>
<p>php中文网 - php中文网<br><br><br><br></p>
<p>php中文网 - php中文网<br><br><br><br></p>
<p>php中文网 - php中文网<br><br><br><br></p>
<p>php中文网 - php中文网<br><br><br><br></p>
<p>php中文网 - php中文网<br><br><br><br></p>
<p>php中文网 - php中文网<br><br><br><br></p>
<p>php中文网 - php中文网<br><br><br><br></p>
<p>php中文网 - php中文网<br><br><br><br></p>
<p>php中文网 - php中文网<br><br><br><br></p>
<p>php中文网 - php中文网<br><br><br><br></p>
<p>php中文网 - php中文网<br><br><br><br></p>
<a href="#top">链接到标题</a>
</body>
</html>
點擊"運行實例" 按鈕查看線上實例
相關文章
HTML 教學：HTML 連結
HTML DOM 參考手冊： Anchor 物件
