HTML基礎(chǔ)教程之超級(jí)鏈接
網(wǎng)站中隨處可見超級(jí)鏈接的身影,打開百度新聞,任意點(diǎn)擊一段話,就會(huì)打開新聞詳情頁,這全部都是超級(jí)鏈接:
接下來,我們來介紹超級(jí)鏈接的詳細(xì)知識(shí)
超級(jí)鏈接
語法格式:
<a ?屬性 = “值”>……</a>
注:<a>中不能再套<a>標(biāo)記
常用屬性
?href:目標(biāo)文件的地址URL,該URL可以是相對(duì)地址,也可以是絕對(duì)地址。
target:目標(biāo)文件的顯示窗口。
?_blank:在新窗口中打開目標(biāo)文件。
_self:在當(dāng)前窗口中打開目標(biāo)文件(默認(rèn)打開),相當(dāng)于“替換”操作。
?_parent:在父級(jí)窗口來打開目標(biāo)文件。
?_top:在最頂級(jí)窗口來打開目標(biāo)文件。
?其中_parent、_top常用框架網(wǎng)頁中,我們?cè)谥髸?huì)有介紹
?name:定義錨點(diǎn)鏈接的名稱。
1、絕對(duì)地址URL
(1)遠(yuǎn)程的絕對(duì)地址
訪問遠(yuǎn)程的文件,總是以“<a href="http://”域名、主機(jī)名開頭。">http://”域名、主機(jī)名開頭。</a>”
實(shí)例:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1>歡迎加入php.cn</h1> <a href="http://ipnx.cn/" >php.cn</a> <hr> <a href="http://www.taobao.com/" target="_blank">淘寶網(wǎng)</a> <hr> <a href="http://www.baidu.com/" target="_blank">百度</a> </body> </html>
(2)本地的絕對(duì)地址(很少使用)
訪問本地的絕對(duì)地址,是以<a href="http://file:///開頭的絕對(duì)地址。">file:///開頭的絕對(duì)地址。</a>
在上一個(gè)實(shí)例的基礎(chǔ)上添加:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1>歡迎加入php.cn</h1> <a href="http://ipnx.cn/" >php.cn</a> <hr> <a href="http://www.taobao.com/" target="_blank">淘寶網(wǎng)</a> <hr> <a href="http://www.baidu.com/" target="_blank">百度</a> <a href="file:///D:/image.html" target="_blank">點(diǎn)擊查看圖片</a> </body> </html>
注:請(qǐng)大家在本地進(jìn)行測(cè)試
2、相對(duì)地址URL(項(xiàng)目中路徑一般是相對(duì)路徑,請(qǐng)大家在本地進(jìn)行測(cè)試)
(1)當(dāng)前文件和目標(biāo)文件是同級(jí)關(guān)系,鏈接地址直接寫目標(biāo)文件名。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1>歡迎加入php.cn</h1> <a href="1.jpg">圖片</a> </body> </html>
(2)當(dāng)前文件與目標(biāo)文件所在的文件夾是同級(jí)關(guān)系,先找“文件夾名”,然后再找“文件名”。
也就是,目標(biāo)文件位于下一級(jí)。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1>歡迎加入php.cn</h1> <a href="image/1.jpg">圖片</a> </body> </html>
(3)目標(biāo)文件位于上一層目錄中,往上找對(duì)應(yīng)的目錄,再找目錄中的文件。
往上找,使用“../”符號(hào)表示。
“../”代表上一級(jí)目錄
“../../”代表上兩級(jí)目錄
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1>歡迎加入php.cn</h1> <a href="../image/1.jpg">圖片</a> </body> </html>
3、特殊的鏈接
(1)、下載鏈接
什么樣的文件會(huì)出現(xiàn)下載提示?
反過來說,哪些文件網(wǎng)頁可以直接執(zhí)行?如:.jpg、.png、.gif、.html、.htm、.txt等。
大部分文件,瀏覽器是不能直接執(zhí)行的。如:.doc、.xls、.ppt、.rar、.psd……
不能直接執(zhí)行的話就會(huì)出現(xiàn)下載框
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1>歡迎加入php.cn</h1> <a href="image/1.rar">下載</a> </body> </html>
(2)、郵箱鏈接
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1>歡迎加入php.cn</h1> <a href="mailto:php@php.cn">有問題的話,請(qǐng)給我們發(fā)郵件</a> </body> </html>
(3)、普通空鏈接(#)
步執(zhí)行任何跳轉(zhuǎn)的鏈接:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1>歡迎加入php.cn</h1> <a href="#">這是一個(gè)空鏈接</a> </body> </html>