第 4 章 超連結和路徑

標籤：

學習要點：

1.超連結的屬性

2.相對與絕對路徑

3.錨點設定

 

主講教師：李炎恢

 

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

一．超連結的屬性

<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 等語言配合，架構用的就很少了。

 

二．相對與絕對路徑

所謂相對路徑，就是相對於連結頁面而言的另一個頁面的路徑。而絕對路徑，就是直接從 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 實現錨點定位。

//連結

<a href="#1">第一章</a><a href="#2">第二章</a><a href="#3">第三章</a> 
//錨點<a name="1"></a><a id="3"></a>

 

第 4 章 超連結和路徑