HTML5超鏈接的創(chuàng)建方法
我要評(píng)論超鏈接是網(wǎng)頁(yè)中最常用的元素，每個(gè)網(wǎng)頁(yè)通過(guò)超鏈接關(guān)聯(lián)在一起，構(gòu)成一個(gè)完整的網(wǎng)站。超鏈接可以是網(wǎng)頁(yè)中的任何元素，只有通過(guò)超鏈接定義的對(duì)象，才能再單擊后進(jìn)行跳轉(zhuǎn)。
一、創(chuàng)建超鏈接
1、用<a></a>標(biāo)簽環(huán)繞需要被鏈接的對(duì)象。
1>、基本語(yǔ)法格式：<a href="跳轉(zhuǎn)目標(biāo)" target="目標(biāo)窗口彈出方式">文本或圖像</a>
i、href：用于指定鏈接目標(biāo)的url（網(wǎng)址）地址，當(dāng)<a>標(biāo)簽應(yīng)用href屬性時(shí)，他就具有了超鏈接功能。
ii、target：用于指定鏈接打開(kāi)方式，_self為原窗口打開(kāi)，_blank為新窗口打開(kāi)。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>超鏈接</title> </head> <body> <a target="_self">站酷</a> target="_self"原窗口打開(kāi)<br/> <a target="_blank">百度</a> target="_blank"新窗口打開(kāi)<br/> </body> </html>
ps:1、超鏈接標(biāo)簽本身帶有默認(rèn)顯示樣式。
2、暫時(shí)沒(méi)有鏈接目標(biāo)時(shí)，href的屬性值可定義為“#”，意為空鏈接。
2>、圖像超鏈接出現(xiàn)邊框解決辦法：
創(chuàng)建圖像超鏈接時(shí)，在某些瀏覽中，圖像會(huì)自動(dòng)添加邊框效果，影響頁(yè)面美觀。去掉邊框最直接的方法是將邊框設(shè)置為0，具體代碼如下：
<a href="#"><img src="圖像url" border="0"/></a>
二、錨點(diǎn)鏈接
通過(guò)創(chuàng)建錨點(diǎn)鏈接，用戶能夠直接跳到指定位置的內(nèi)容，提高信息檢索速度。
1、基本語(yǔ)法格式：<a href="#id名">內(nèi)容</a>
2、href="#id名"，只要單擊創(chuàng)建了超鏈接的對(duì)象就會(huì)跳到指定位置。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>錨點(diǎn)鏈接</title> </head> <body> <ul> <li><a href="#one">李四光</a></li> <li><a href="#two">袁隆平</a></li> <li><a href="#three">屠呦呦</a></li> <li><a href="#four">南仁東</a></li> <li><a href="#five">孫家棟</a></li> </ul> <h3 id="one">李四光</h3> <p>李四光1889年出生于湖北黃岡，是中國(guó)地質(zhì)力學(xué)的創(chuàng)立者、現(xiàn)代地球科學(xué)和地質(zhì)工作的奠基人。</p> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <h3 id="two">袁隆平</h3> <p>袁隆平1930年出生于北京，被譽(yù)為“世界雜交水稻之父”。發(fā)明了“三系法”秈型雜交水稻，“兩系法”雜交水稻。</p> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <h3 id="three">屠呦呦</h3> <p>屠呦呦1930年出生于浙江寧波，是中國(guó)第一位獲得諾貝爾科學(xué)獎(jiǎng)的本土科學(xué)家，也是第一位獲得諾貝爾醫(yī)學(xué)獎(jiǎng)的華人科學(xué)家。</p> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <h3 id="four">南仁東</h3> <p>南仁東1945年出生于吉林遼源，被譽(yù)為中國(guó)“天眼之父”。擔(dān)任FAST工程首席科學(xué)家兼總工程師。</p> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <h3 id="five">孫家棟</h3> <p>孫家棟1929年出生于遼寧瓦房店，被譽(yù)為中國(guó)航天的“大總師”，“中國(guó)衛(wèi)星之父”。</p> </body> </html>
三、鏈接偽類控制超鏈接
1、超鏈接的四種不同狀態(tài)：
| 超鏈接標(biāo)簽<a>的偽類 | 描述 |
| a:link{CSS樣式規(guī)則；} | 超鏈接默認(rèn)樣式 |
| a:visited{CSS樣式規(guī)則；} | 超鏈接被訪問(wèn)之后的樣式 |
| a:hover{CSS樣式規(guī)則；} | 鼠標(biāo)指針經(jīng)過(guò)、懸停時(shí)超鏈接的樣式 |
| a:active{CSS樣式規(guī)則；} | 鼠標(biāo)單擊不放時(shí)超鏈接的樣式 |
ps：4種偽類順序也需按上表排列，否則定義樣式可能不起作用。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鏈接偽類選擇器</title>
<style type="text/css">
a{margin-right: :20px;}/*設(shè)置右邊距為20px*/
a:link,a:visited{
color:#000; /*設(shè)置默認(rèn)和被訪問(wèn)之后的顏色為黑色*/
text-decoration:none; /*設(shè)置<a>自帶下劃線效果為無(wú)*/
}
a:hover{
color:#093; /*默認(rèn)樣式顏色為綠色*/
text-decoration: underline; /*設(shè)置鼠標(biāo)指針懸停時(shí)顯示下劃線*/
}
a:active{color:#FC0;} /*設(shè)置鼠標(biāo)單擊不放時(shí)顏色為黃色*/
</style>
</head>
<body>
<a href="#">公司首頁(yè)</a>
<a href="#">公司簡(jiǎn)介</a>
<a href="#">產(chǎn)品介紹</a>
<a href="#">聯(lián)系我們</a>
</body>
</html>到此這篇關(guān)于HTML5超鏈接的創(chuàng)建的文章就介紹到這了,更多相關(guān)HTML5超鏈接的創(chuàng)建內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
使用HTML5的鏈接預(yù)取功能(link prefetching)給網(wǎng)站提速
HTML5的鏈接預(yù)取功能(link prefetching)是一個(gè)埋在沙里的寶石,至今還很少人知道它的價(jià)值,需要的朋友可以了解下2012-12-13