HTML5 <a> 標(biāo)簽

2022-05-23 14:30 更新

實(shí)例

HTML5 <a> 標(biāo)簽的主要作用是用于超鏈接,可以鏈接到其他頁(yè)面也可以鏈接到本地的其他文件,你可以通過(guò)下面的這個(gè)示例來(lái)認(rèn)識(shí) <a> 標(biāo)簽。

鏈接到W3Cschool教程 :

<a href="http://hgci.cn">訪問(wèn)W3Cschool教程!</a>

嘗試一下 ?
(更多實(shí)例見(jiàn)頁(yè)面底部)

瀏覽器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主流瀏覽器都支持 <a> 標(biāo)簽。


標(biāo)簽定義及使用說(shuō)明

<a> 標(biāo)簽定義超鏈接,用于從一個(gè)頁(yè)面鏈接到另一個(gè)頁(yè)面。

<a> 元素最重要的屬性是 href 屬性,它指定鏈接的目標(biāo)。

在所有瀏覽器中,鏈接的默認(rèn)外觀如下:

  • 未被訪問(wèn)的鏈接帶有下劃線而且是藍(lán)色的
  • 已被訪問(wèn)的鏈接帶有下劃線而且是紫色的
  • 活動(dòng)鏈接帶有下劃線而且是紅色的

提示和注釋

提示:如果沒(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 的事件屬性。


Examples

嘗試一下 - 實(shí)例

創(chuàng)建超級(jí)鏈接
本例演示如何在 HTML 文檔中創(chuàng)建鏈接。

將圖像作為鏈接
本例演示如何使用圖像作為鏈接。

在新的瀏覽器窗口打開(kāi)鏈接
本例演示如何在新窗口打開(kāi)一個(gè)頁(yè)面,這樣的話訪問(wèn)者就無(wú)需離開(kāi)您的站點(diǎn)了。

創(chuàng)建電子郵件鏈接
本例演示如何鏈接到一個(gè)郵件。(本例在安裝郵件客戶(hù)端程序后才能工作。)

創(chuàng)建電子郵件鏈接 2
本例演示更加復(fù)雜的郵件鏈接。

使用錨跳轉(zhuǎn)到同一個(gè)頁(yè)面的不同位置
本例演示如何使用錨的 id 屬性跳轉(zhuǎn)到頁(yè)面的不同位置( HTML5 不支持 name 屬性)。


相關(guān)文章

HTML 教程:HTML 鏈接

HTML DOM 參考手冊(cè): Anchor 對(duì)象

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)