在HTML中創(chuàng)建超鏈接非常簡單,只需用標(biāo)簽環(huán)繞需要被鏈接的對象即可,其基本語法格式如下:
<a href="跳轉(zhuǎn)目標(biāo)" target="目標(biāo)窗口的彈出方式">文本或圖像</a>
href屬性:鏈接的地址,鏈接的地址可以是一個(gè)網(wǎng)頁,也可以是一個(gè)視頻、圖片、音樂等等。
target屬性:
可以打開別人的網(wǎng)頁:
<a href="https://www.baidu.com">在當(dāng)前窗口打開百度</a><a href="https://www.baidu.com" target="_self">在當(dāng)前窗口打開百度</a><a href="https://www.baidu.com" target="_blank">在新的窗口打開百度</a>
直接鏈接內(nèi)部頁面名稱即可:
<a href="1.外部鏈接.html">打開內(nèi)部鏈接</a>
如果當(dāng)時(shí)沒有確定鏈接目標(biāo)時(shí),通常將鏈接標(biāo)簽的href屬性值定義為“#”(即href="#"),表示該鏈接暫時(shí)為一個(gè)空鏈接:
<a href="#">空鏈接</a>
通過創(chuàng)建錨點(diǎn)鏈接,用戶能夠快速定位到目標(biāo)內(nèi)容。創(chuàng)建錨點(diǎn)鏈接分為兩步:
<h1 id="top">頂部</h1>...<a href="#top">回到頂部</a>
跳轉(zhuǎn)到其他頁面:
<a href="5.錨點(diǎn)鏈接2.html#top">回到另一個(gè)頁面頂部</a>
5.錨點(diǎn)鏈接2.html
<h1 id="top">頂部</h1>
base 可以設(shè)置整體鏈接的打開狀態(tài)
base 寫到 head 之間
<head> <meta charset="utf-8"> <title>文檔標(biāo)題</title> <base target="_blank"></head><body> <a href="http://www.baidu.com">在新窗口打開百度</a> <a href="http://www.baidu.com" target="_self">在當(dāng)前窗口打開百度</a></body>
<body link="red" alink="yellow" vlink="green"> <a href="https://taobao.com">淘寶</a> <a href="https://jingdong.com">京東</a></body>
覽器支持
所有主流瀏覽器都支持 <a> 標(biāo)簽。
標(biāo)簽定義及使用說明
<a> 標(biāo)簽定義超鏈接,用于從一個(gè)頁面鏈接到另一個(gè)頁面。
<a> 元素最重要的屬性是 href 屬性,它指定鏈接的目標(biāo)。
在所有瀏覽器中,鏈接的默認(rèn)外觀如下:
未被訪問的鏈接帶有下劃線而且是藍(lán)色的
已被訪問的鏈接帶有下劃線而且是紫色的
活動(dòng)鏈接帶有下劃線而且是紅色的
提示和注釋
提示:如果沒有使用 href 屬性,則不能使用 hreflang、media、rel、target 以及 type 屬性。
提示:通常在當(dāng)前瀏覽器窗口中顯示被鏈接頁面,除非規(guī)定了其他 target。
提示:請使用 CSS 來改變鏈接的樣式。
HTML 4.01 與 HTML5之間的差異
在 HTML 4.01 中,<a> 標(biāo)簽既可以是超鏈接,也可以是錨。在 HTML5 中,<a> 標(biāo)簽是超鏈接,但是假如沒有 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)語言。僅在 href 屬性存在時(shí)使用。 |
mediaNew | media_query | 規(guī)定目標(biāo) URL 的媒介類型。默認(rèn)值:all。僅在 href 屬性存在時(shí)使用。 |
name | section_name | HTML5 不支持。規(guī)定錨的名稱。 |
rel | alternateauthorbookmarkhelplicensenextnofollownoreferrerprefetchprevsearchtag | 規(guī)定當(dāng)前文檔與目標(biāo) URL 之間的關(guān)系。僅在 href 屬性存在時(shí)使用。 |
rev | text | HTML5 不支持。規(guī)定目標(biāo) URL 與當(dāng)前文檔之間的關(guān)系。 |
shape | defaultrectcirclepoly | HTML5 不支持。規(guī)定鏈接的形狀。 |
target | _blank_parent_self_topframename | 規(guī)定在何處打開目標(biāo) URL。僅在 href 屬性存在時(shí)使用。 |
typeNew | MIME_type | 規(guī)定目標(biāo) URL 的 MIME 類型。僅在 href 屬性存在時(shí)使用。注:MIME = Multipurpose Internet Mail Extensions。 |
全局屬性
<a> 標(biāo)簽支持 HTML 的全局屬性。
事件屬性
<a> 標(biāo)簽支持 HTML 的事件屬性。
創(chuàng)建超級鏈接
本例演示如何在 HTML 文檔中創(chuàng)建鏈接。
將圖像作為鏈接
本例演示如何使用圖像作為鏈接。
在新的瀏覽器窗口打開鏈接
本例演示如何在新窗口打開一個(gè)頁面,這樣的話訪問者就無需離開您的站點(diǎn)了。
創(chuàng)建電子郵件鏈接
本例演示如何鏈接到一個(gè)郵件。(本例在安裝郵件客戶端程序后才能工作。)
創(chuàng)建電子郵件鏈接 2
本例演示更加復(fù)雜的郵件鏈接。
使用錨跳轉(zhuǎn)到同一個(gè)頁面的不同位置
本例演示如何使用錨的 id 屬性跳轉(zhuǎn)到頁面的不同位置( HTML5 不支持 name 屬性)
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
例
帶有項(xiàng)目和描述的描述列表:
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
瀏覽器支持
所有主流瀏覽器都支持 <dd> 標(biāo)簽。
標(biāo)簽定義及使用說明
<dd> 標(biāo)簽被用來對一個(gè)描述列表中的項(xiàng)目/名字進(jìn)行描述。
<dd> 標(biāo)簽與 <dl> (定義一個(gè)描述列表)和 <dt> (定義項(xiàng)目/名字)一起使用。
在 <dd> 標(biāo)簽內(nèi),您能放置段落、換行、圖片、鏈接、列表等等。
HTML 4.01 與 HTML5之間的差異
在 HTML 4.01 中,<dd> 標(biāo)簽被用來描述一個(gè)定義列表中的條目。
在 HTML5 中,<dd> 標(biāo)簽被用來描述一個(gè)描述列表的項(xiàng)目/名字。
全局屬性
<dd> 標(biāo)簽支持 HTML 的全局屬性。
事件屬性
<dd> 標(biāo)簽支持 HTML 的事件屬性。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
*請認(rèn)真填寫需求信息,我們會在24小時(shí)內(nèi)與您取得聯(lián)系。