HTML基礎教程之超鏈接
網站中隨處可見超級連結的身影,打開百度新聞,任意點擊一段話,就會打開新聞詳情頁,這全部都是超級連結:
接下來,我們來介紹超級連結的詳細知識
超級連結
#語法格式:
<a 屬性= “值”>……</a>
#註:<a>中不能再套用<a>標記
#常用屬性
href:目標檔案的位址URL,此URL可以是相對位址,也可以是絕對位址。
target:目標檔案的顯示視窗。
_blank:在新視窗中開啟目標檔案。
_self:在目前視窗中開啟目標檔案(預設開啟),相當於「替換」操作。
_parent:在父級視窗來開啟目標檔案。
_top:在最頂層視窗來開啟目標檔案。
其中_parent、_top常用框架網頁中,我們之後會有介紹
name:定義錨點連結的名稱。
1、絕對位址URL
(1)遠端的絕對位址
存取遠端的文件,總是以“<a href="http://”網域名稱、主機名稱開頭。">http://”網域名稱、主機名稱開頭。</a>”
實例:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1>欢迎加入php.cn</h1> <a href="http://www.php.cn/" >php.cn</a> <hr> <a href="http://www.taobao.com/" target="_blank">淘宝网</a> <hr> <a href="http://www.baidu.com/" target="_blank">百度</a> </body> </html>
(2)本地的絕對位址(很少使用)
訪問本地的絕對地址,是以<a href="http://file:///開頭的絕對地址。">file:///開頭的絕對地址。 </a>
在上一個實例的基礎上加上:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1>欢迎加入php.cn</h1> <a href="http://www.php.cn/" >php.cn</a> <hr> <a href="http://www.taobao.com/" target="_blank">淘宝网</a> <hr> <a href="http://www.baidu.com/" target="_blank">百度</a> <a href="file:///D:/image.html" target="_blank">点击查看图片</a> </body> </html>
註:請大家在本地進行測試
2、相對位址URL(專案中路徑一般是相對路徑,請大家在本地進行測試)
(1)目前檔案和目標檔案是同級關係,連結位址直接寫目標檔案名稱。
<!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)目前檔案與目標檔案所在的資料夾是同級關係,先找“資料夾名稱”,然後再找“檔案名稱”。
也就是,目標檔案位於下一層。
<!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)目標檔案位於上一層目錄中,往上找對應的目錄,再找目錄中的檔案。
往上找,使用「../」符號表示。
“../”代表上一層目錄
“../../”代表上兩層目錄
<!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)、下載連結
什麼樣的檔案會出現下載提示?
反過來說,哪些文件網頁可以直接執行?如:.jpg、.png、.gif、.html、.htm、.txt等。
大部分的文件,瀏覽器是不能直接執行。如:.doc、.xls、.ppt、.rar、.psd……
不能直接執行的話就會出現下載框
<!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">有问题的话,请给我们发邮件</a> </body> </html>
(3)、普通空連結(#)
步驟執行任何跳躍的連結:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1>欢迎加入php.cn</h1> <a href="#">这是一个空链接</a> </body> </html>