第六十一節，html超連接和路徑

html超連接和路徑

 

學習要點：

    1.超連接的屬性

    2.相對與絕對路徑

    3.錨點設置                         

    本章主要探討HTML5中文本元素最重要的一個超連接，探討它自身的屬性以及路徑問

題。

 

一．超連接的屬性

    <a></a>元素屬於文本超連接元素，有一些私有屬性或者叫局部屬性。那麼，相對應的還有通用屬

性或叫作全局屬性。這方面的知識，後面會詳細探討。

 

        屬性名稱                                 說明

 

          href        指定<a>元素所指資源的URL

 

        hreflang      指向的連接資源所使用的語言

 

          media       說明所連接資源用於哪一種設備

 

           rel        說明文檔與所連接資源的關係類型

 

         target       指定用以打開所連接資源的瀏覽環境

 

          type        說明所連接資源的MIME類型（好比text/html）

 

    在這幾個屬性當中，只有href和target通常比較經常使用，而href是必需要用的。其

他幾個屬性，在<a>元素使用較少，將在CSS章節再探討。

 

    1.href屬性

    <a href="http://www.baidu.com">百度</a>

    解釋：href是必須屬性，不然<a>元素就變成空元素了。若是屬性值是http://開頭

的URL，意味着點擊跳轉到指定的外部網站。

 

    2.target屬性

    <a href="http://www.baidu.com target="_blank">百度</a>

    解釋：target屬性告訴瀏覽器但願將所連接的資源顯示在哪裏。

 

        屬性名稱                                 說明

 

         _blank       在新窗口或標籤頁中打開文檔

 

        _parent       在父窗框組（frameset）中打開文檔

 

         _self        在當前窗口打開文檔（默認）

 

          _top        在頂層窗口打開文檔

 

    這四種最經常使用的是_blank，新建一個窗口。而_self是默認，當前窗口打開。_parent

和_top是基於框架頁面的，分別表示在父窗口打開和在整個窗口打開。而HTML5中，框架

基本被廢棄，只能使用<iframe>元素，且之後大量結合JavaScript和PHP等語言配合，

框架用的就不多了。

　　3.rel 
　　　　rel="nofollow"告訴搜索引擎沒必要跟蹤

 

二．相對與絕對路徑

    所謂相對路徑，就是相對於連接頁面而言的另外一個頁面的路徑。而絕對路徑，就是直接

從file:///磁盤符開始的完整路徑。咱們在同一個目錄下作上兩個頁面，其中一個頁面鏈

接到另外一個頁面。

 

    1.絕對路徑

    <a href="file:///D:/備 /HTML5第一季/code/index2.html">index2</a>

    解釋：首先是file:///開頭，而後是磁盤符，而後是一個個的目錄層次，找到相應文

件。這種方式最致命的問題是，當整個目錄轉移到另外的盤符或其餘電腦時，目錄結構一旦

出現任何變化，連接立即失效。

 

    2.相對路徑

    <a href="index2.html">index2</a>

 

    解釋：相對路徑的條件是必須文件都在一個磁盤或目錄下，若是是在同一個目錄下，直

接屬性值就是被連接的文件名.後綴名。若是在同一個主目錄下，有多個子目錄層次，那就

須要使用目錄結構語法。

 

    3.目錄語法

    同一個目錄：index2.html或./index2.html；

    在子目錄：xxx/index2.html；

    在孫子目錄：xxx/xxx/index2.html；

    在父目錄：../index2.html；

    在爺爺目錄：../../index2.html；

 

三．錨點設置

    超連接也可用來將同一個文檔中的另外一個元素移入視野。經過屬性id或name實現錨

點定位。

    //連接

    <ahref="#1">第一章</a><ahref="#2">第二章</a><ahref="#3">第三章</a>

    //錨點

    <a name="1"></a> <a id="3"></a>