HTML基礎教程之超鏈接

網站中隨處可見超級連結的身影，打開百度新聞，任意點擊一段話，就會打開新聞詳情頁，這全部都是超級連結：

接下來，我們來介紹超級連結的詳細知識

超級連結

#語法格式：

#註：<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>

新建檔案

<!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>

提交重置程式碼

自動運行

全螢幕