<a>
HTML <a> 標(biāo)簽定義超鏈接，用于從一個(gè)頁(yè)面鏈接到另一個(gè)頁(yè)面。<a> 元素最重要的屬性是 href 屬性，它指定鏈接的目標(biāo)。
HTML <a> 標(biāo)簽
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <a href="http://ipnx.cn">訪(fǎng)問(wèn)php中文網(wǎng)!</a> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線(xiàn)實(shí)例
瀏覽器支持
所有主流瀏覽器都支持 <a> 標(biāo)簽。
標(biāo)簽定義及使用說(shuō)明
a標(biāo)簽是什么意思？
<a> 標(biāo)簽定義超鏈接，用于從一個(gè)頁(yè)面鏈接到另一個(gè)頁(yè)面。
<a> 元素最重要的屬性是 href 屬性，它指定鏈接的目標(biāo)。
在所有瀏覽器中，鏈接的默認(rèn)外觀(guān)如下：
未被訪(fǎng)問(wèn)的鏈接帶有下劃線(xiàn)而且是藍(lán)色的
已被訪(fǎng)問(wèn)的鏈接帶有下劃線(xiàn)而且是紫色的
活動(dòng)鏈接帶有下劃線(xiàn)而且是紅色的
提示和注釋
提示：如果沒(méi)有使用 href 屬性，則不能使用 hreflang、media、rel、target 以及 type 屬性。
提示：通常在當(dāng)前瀏覽器窗口中顯示被鏈接頁(yè)面，除非規(guī)定了其他 target。
提示：請(qǐng)使用 CSS 來(lái)改變鏈接的樣式。
HTML 4.01 與 HTML5之間的差異
在 HTML 4.01 中，<a> 標(biāo)簽既可以是超鏈接，也可以是錨。在 HTML5 中，<a> 標(biāo)簽是超鏈接，但是假如沒(méi)有 href 屬性，它僅僅是超鏈接的一個(gè)占位符。
HTML5 有一些新的屬性，同時(shí)不再支持一些 HTML 4.01 的屬性。
屬性
New ：HTML5 中的新屬性。
| 屬性 | 值 | 描述 |
|---|---|---|
| charset | char_encoding | HTML5 不支持。規(guī)定目標(biāo) URL 的字符編碼。 |
| coords | coordinates | HTML5 不支持。規(guī)定鏈接的坐標(biāo)。 |
| downloadNew | filename | 指定下載鏈接 |
| href | URL | 規(guī)定鏈接的目標(biāo) URL。 |
| hreflang | language_code | 規(guī)定目標(biāo) URL 的基準(zhǔn)語(yǔ)言。僅在 href 屬性存在時(shí)使用。 |
| mediaNew | media_query | 規(guī)定目標(biāo) URL 的媒介類(lèi)型。默認(rèn)值：all。僅在 href 屬性存在時(shí)使用。 |
| name | section_name | HTML5 不支持。規(guī)定錨的名稱(chēng)。 |
| rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag | 規(guī)定當(dāng)前文檔與目標(biāo) URL 之間的關(guān)系。僅在 href 屬性存在時(shí)使用。 |
| rev | text | HTML5 不支持。規(guī)定目標(biāo) URL 與當(dāng)前文檔之間的關(guān)系。 |
| shape | default rect circle poly | HTML5 不支持。規(guī)定鏈接的形狀。 |
| target | _blank _parent _self _top framename | 規(guī)定在何處打開(kāi)目標(biāo) URL。僅在 href 屬性存在時(shí)使用。 |
| type New | MIME_type | 規(guī)定目標(biāo) URL 的 MIME 類(lèi)型。僅在 href 屬性存在時(shí)使用。 注：MIME = Multipurpose Internet Mail Extensions。 |
全局屬性
<a> 標(biāo)簽支持 HTML 的全局屬性。
事件屬性
<a> 標(biāo)簽支持 HTML 的事件屬性。
嘗試一下 - 實(shí)例
創(chuàng)建超級(jí)鏈接
本例演示如何在 HTML 文檔中創(chuàng)建鏈接。
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>我使用了外部樣式文件來(lái)格式化文本 </h1> <p>我也是!</p> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線(xiàn)實(shí)例
將圖像作為鏈接
本例演示如何使用圖像作為鏈接。
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線(xiàn)實(shí)例
在新的瀏覽器窗口打開(kāi)鏈接
本例演示如何在新窗口打開(kāi)一個(gè)頁(yè)面，這樣的話(huà)訪(fǎng)問(wèn)者就無(wú)需離開(kāi)您的站點(diǎn)了。
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <a href="http://ipnx.cn/" target="_blank">訪(fǎng)問(wèn)php中文網(wǎng)!</a> <p>如果你將 target 屬性設(shè)置為 "_blank", 鏈接將在新窗口打開(kāi)。</p> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線(xiàn)實(shí)例
創(chuàng)建電子郵件鏈接
本例演示如何鏈接到一個(gè)郵件。（本例在安裝郵件客戶(hù)端程序后才能工作。）
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <p> 這是一個(gè)電子郵件鏈接： <a href="mailto:someone@example.com?Subject=Hello%20again" target="_top"> 發(fā)送郵件</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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線(xiàn)實(shí)例
創(chuàng)建電子郵件鏈接 2
本例演示更加復(fù)雜的郵件鏈接。
實(shí)例
<!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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線(xiàn)實(shí)例
使用錨跳轉(zhuǎn)到同一個(gè)頁(yè)面的不同位置
本例演示如何使用錨的 id 屬性跳轉(zhuǎn)到頁(yè)面的不同位置（ HTML5 不支持 name 屬性）。
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h2><a id="top">這是標(biāo)題，底部鏈接可以鏈接到這</a></h2> <p>php中文網(wǎng) - php中文網(wǎng)<br><br><br><br></p> <p>php中文網(wǎng) - php中文網(wǎng)<br><br><br><br></p> <p>php中文網(wǎng) - php中文網(wǎng)<br><br><br><br></p> <p>php中文網(wǎng) - php中文網(wǎng)<br><br><br><br></p> <p>php中文網(wǎng) - php中文網(wǎng)<br><br><br><br></p> <p>php中文網(wǎng) - php中文網(wǎng)<br><br><br><br></p> <p>php中文網(wǎng) - php中文網(wǎng)<br><br><br><br></p> <p>php中文網(wǎng) - php中文網(wǎng)<br><br><br><br></p> <p>php中文網(wǎng) - php中文網(wǎng)<br><br><br><br></p> <p>php中文網(wǎng) - php中文網(wǎng)<br><br><br><br></p> <p>php中文網(wǎng) - php中文網(wǎng)<br><br><br><br></p> <p>php中文網(wǎng) - php中文網(wǎng)<br><br><br><br></p> <p>php中文網(wǎng) - php中文網(wǎng)<br><br><br><br></p> <p>php中文網(wǎng) - php中文網(wǎng)<br><br><br><br></p> <p>php中文網(wǎng) - php中文網(wǎng)<br><br><br><br></p> <p>php中文網(wǎng) - php中文網(wǎng)<br><br><br><br></p> <p>php中文網(wǎng) - php中文網(wǎng)<br><br><br><br></p> <p>php中文網(wǎng) - php中文網(wǎng)<br><br><br><br></p> <p>php中文網(wǎng) - php中文網(wǎng)<br><br><br><br></p> <p>php中文網(wǎng) - php中文網(wǎng)<br><br><br><br></p> <p>php中文網(wǎng) - php中文網(wǎng)<br><br><br><br></p> <p>php中文網(wǎng) - php中文網(wǎng)<br><br><br><br></p> <p>php中文網(wǎng) - php中文網(wǎng)<br><br><br><br></p> <p>php中文網(wǎng) - php中文網(wǎng)<br><br><br><br></p> <p>php中文網(wǎng) - php中文網(wǎng)<br><br><br><br></p> <p>php中文網(wǎng) - php中文網(wǎng)<br><br><br><br></p> <p>php中文網(wǎng) - php中文網(wǎng)<br><br><br><br></p> <p>php中文網(wǎng) - php中文網(wǎng)<br><br><br><br></p> <p>php中文網(wǎng) - php中文網(wǎng)<br><br><br><br></p> <p>php中文網(wǎng) - php中文網(wǎng)<br><br><br><br></p> <p>php中文網(wǎng) - php中文網(wǎng)<br><br><br><br></p> <p>php中文網(wǎng) - php中文網(wǎng)<br><br><br><br></p> <p>php中文網(wǎng) - php中文網(wǎng)<br><br><br><br></p> <p>php中文網(wǎng) - php中文網(wǎng)<br><br><br><br></p> <a href="#top">鏈接到標(biāo)題</a> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線(xiàn)實(shí)例
相關(guān)文章
HTML 教程：HTML 鏈接
HTML DOM 參考手冊(cè)： Anchor 對(duì)象