XHTML中的超鏈接標(biāo)簽使用教程

超鏈接,也叫“鏈接”。超鏈接在我們?yōu)g覽的網(wǎng)頁(yè)上可以說(shuō)是無(wú)處不在,我們點(diǎn)擊網(wǎng)頁(yè)上某個(gè)鏈接地址,即鏈接到另一個(gè)網(wǎng)頁(yè),這就是超鏈接在起作用。
使用 <a></a> 標(biāo)簽來(lái)定義超鏈接,語(yǔ)法:
<a href="url">顯示的文字或圖片</a>
例子:
- <a href="http://www.baidu.com/">鏈接至百度</a>
瀏覽器顯示效果:
鏈接至百度
當(dāng)我們點(diǎn)擊上面 “鏈接至百度” 字樣時(shí),瀏覽器便會(huì)轉(zhuǎn)向百度首頁(yè)。
超鏈接屬性
超鏈接屬性:
href 鏈接地址??梢允墙^對(duì)網(wǎng)頁(yè)地址或者相對(duì)地址。
target 鏈接目標(biāo)。取值為 _blank 會(huì)在新窗口中打開鏈接地址,缺省則使用當(dāng)前窗口打開鏈接地址。
name 錨鏈接,這個(gè)我們下面會(huì)單獨(dú)講到。
相對(duì)網(wǎng)頁(yè)鏈接地址:
- <a href="/css" target="_blank">DIV+CSS教程</a>
這個(gè)例子使用了相對(duì)地址,而在上面鏈接至百度的例子,則使用了絕對(duì)地址。
增加了 target 屬性的例子:
- <a href="http://www.baidu.com/" target="_blank">鏈接至百度</a>
再次點(diǎn)擊該鏈接時(shí),瀏覽器會(huì)啟用新頁(yè)面打開鏈接地址,而原頁(yè)面窗口得以保留。
提示
當(dāng)一個(gè)鏈接地址與當(dāng)前主題或流程并不十分緊密時(shí),通常會(huì)啟用 target="_blank" 屬性,否則盡量不要啟用新窗口,以便給瀏覽者以友好的瀏覽體驗(yàn)。
如果頁(yè)面是由幾個(gè)頁(yè)面框架幀組成,那么 target 屬性還可以有其他取值
郵件超鏈接
郵件鏈接例子:
- <a href="mailto:admin@xyz.com">聯(lián)系xyz站的站長(zhǎng)</a>
點(diǎn)擊此鏈接,將啟用默認(rèn)的郵件客戶端撰寫郵件。
錨鏈接
錨鏈接是指頁(yè)面內(nèi)的鏈接,但現(xiàn)在很多人也把文字超鏈接叫做錨鏈接。
我們舉個(gè)例子解釋一下錨的作用:
例如我們有一篇文章寫得很好,有很多人都在文章后面作了評(píng)論,而發(fā)表評(píng)論的窗口一般都在評(píng)論結(jié)束最底下的位置。網(wǎng)站會(huì)在發(fā)表評(píng)論的地方設(shè)置一個(gè)錨鏈接,而在顯示評(píng)論的位置設(shè)計(jì)一個(gè)鏈接到錨鏈接,如:“發(fā)表評(píng)論”。如果有人不想查看別人留下的評(píng)論而想立刻跳轉(zhuǎn)到評(píng)論輸入窗口,那么點(diǎn)擊“發(fā)表評(píng)論”即可在本業(yè)內(nèi)快速跳轉(zhuǎn)到評(píng)論輸入窗口。這種設(shè)計(jì)無(wú)疑提高了瀏覽者的用戶體驗(yàn)。
使用錨鏈接的例子
創(chuàng)建錨:
- <p><a name="comment"></a></p>
創(chuàng)建鏈接至錨的超鏈接地址:
- <p><a href="#comment">鏈接至comment錨</a></p>
從例子可以看出,訪問一個(gè)錨,就是在鏈接地址后面加上“#”號(hào)和錨的名字。上面這個(gè)例子由于是鏈接到本頁(yè)的錨,因此前面的鏈接地址被忽略(注:實(shí)際是相對(duì)地址被忽略,在此不做展開討論)。
提示
如果你要實(shí)驗(yàn)這個(gè)錨標(biāo)記的用法,那么注意一點(diǎn),將鏈接至錨的超鏈接和錨標(biāo)記之間保持足夠的網(wǎng)頁(yè)空間,才能看出效果??梢杂梦覀兩厦鎸W(xué)到的換行標(biāo)簽來(lái)創(chuàng)建足夠多的上下空白空間來(lái)進(jìn)行測(cè)試。
你也可以創(chuàng)建一個(gè)鏈接至其他頁(yè)面的錨標(biāo)記,例如:
- <p><a href="http://www.abc.com/#test">鏈接至錨</a></p>
當(dāng)然需要在 www.abc.com 這個(gè)頁(yè)面有這個(gè) test 錨標(biāo)記才行,否則只會(huì)鏈接至 www.abc.com 頁(yè)面而忽略這個(gè)錨標(biāo)記。
相關(guān)文章
HTML基礎(chǔ)知識(shí)——設(shè)置超鏈接的樣式簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇HTML基礎(chǔ)知識(shí)——設(shè)置超鏈接的樣式簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-11- 這篇文章主要介紹了HTML中的超鏈接標(biāo)簽使用教程,包括郵件鏈接的使用方法,需要的朋友可以參考下2016-07-08
- 這篇文章主要介紹了html如何用超鏈接打開新窗口其可控制窗口屬性,主要使用到j(luò)s的window.open方法,感興趣的朋友可以看看哦2014-09-06
html超鏈接a標(biāo)簽的href跳轉(zhuǎn)跟onclick之間執(zhí)行順序示例介紹
html超鏈接a標(biāo)簽的href跳轉(zhuǎn)跟onclick之間執(zhí)行關(guān)系:如果onclick返回false,則a不進(jìn)行跳轉(zhuǎn),如果onclick返回true,則a跳轉(zhuǎn),感興趣的朋友可以了解下本文2014-01-07解決html 圖片img加超鏈接后產(chǎn)生難看的藍(lán)色邊框問題
html 圖片img加了超鏈接之后產(chǎn)生難看的藍(lán)色邊框該怎么解決呢?在接下來(lái)的文章中將為大家介紹下詳細(xì)的解決方法,感興趣的朋友可以參考下2013-10-14html超鏈接樣式(四種不同狀態(tài))設(shè)置示例
html超鏈接樣式包括:正在連接、訪問過(guò)、鼠標(biāo)盤旋,各個(gè)文本字體樣式設(shè)置如下,感興趣的朋友可以學(xué)習(xí)下哦。希望對(duì)大家有所幫助2013-08-09html 中文亂碼 HTML超鏈接中文亂碼問題分析及解決方法
Vm中一個(gè)超鏈接URL需要拼接中文作為Get請(qǐng)求的參數(shù)如果直接拼接,傳到后臺(tái)Action的參數(shù)對(duì)象中后取出會(huì)是亂碼,需要編碼后再拼接到URL上,接下來(lái)將和大家分享一下解決方法2012-12-30- 今天我們來(lái)談?wù)凥TML利用超鏈接打開鏈接文件的方法介紹2012-07-02
HTML設(shè)置超鏈接字體顏色和點(diǎn)擊后的字體顏色
CSS為一些特殊效果準(zhǔn)備了特定的工具,我們稱之為“偽類”。其中有幾項(xiàng)是我們經(jīng)常用到的,下面我們就詳細(xì)介紹一下經(jīng)常用于定義鏈接樣式的四個(gè)偽類2012-12-02網(wǎng)頁(yè)制作初學(xué)者:學(xué)用HTML的超鏈接A標(biāo)記
超級(jí)鏈接a標(biāo)記代表一個(gè)鏈接點(diǎn),是英文anchor(錨點(diǎn))的簡(jiǎn)寫。它的作用是把當(dāng)前位置的文本或圖片連接到其他的頁(yè)面、文本或圖像,這已是眾所周知了,但關(guān)于它的語(yǔ)法結(jié)構(gòu)可能2009-04-02