4、超連結和路徑

<a>元素術國文本元素，有一些私有屬性或者叫做局部屬性。那麼，相對應的還有通用屬性，或者叫全局屬性。

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

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

media：說明所連結資源用于哪種裝置

rel：說明文檔與所連結資源的關系類型

target：執行用以打開所連結資源的浏覽環境

type：說明所連結資源的MIME類型(比如text/html)

這這幾個屬性當中，隻有href和target一般比較常用。href是必須的。

href屬性：

解釋：href是必須屬性，否則<a>元素就變成空元素了。如果屬性值是“http://”開頭的，意味着點選跳轉到指定的外部連結

target屬性：

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

解釋：target屬性告訴浏覽器希望将所連結的資源顯示在哪裡。如果不寫，預設是_self，在目前視窗打開超連結

相對路徑和絕對路徑

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

file://磁盤開始的完整路徑。我們在同一個目錄下做上兩個頁面，其中一個頁面連結到另一個頁面。

1、絕對路徑

<a href="file:////Users/cengchengpeng/Documents/html_test/index.html">index</a>

解釋：首先是file:///開頭，然後是路徑。

2、相對路徑

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

解釋：相對路徑的條件是必須檔案都在同一個目錄中或磁盤中。如果是在同一個主目錄中，中間有多個子目錄層次，則需要使用目錄結構文法

3、目錄文法

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

在子目錄中：xxx/index2.html

在父目錄中：../xxx/index2.html

錨點設定

超連結也可以将同一個文檔中的另一個元素移入視野，通過屬性id或者name實作錨點定位。

//連結

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<code>&lt;</code><code>a</code> <code>href</code><code>=</code><code>"#1"</code><code>&gt;第一章&lt;/</code><code>a</code><code>&gt; &lt;</code><code>a</code> <code>href</code><code>=</code><code>"#2"</code><code>&gt;第二章&lt;/</code><code>a</code><code>&gt; &lt;</code><code>a</code> <code>href</code><code>=</code><code>"#3"</code><code>&gt;第三章&lt;/</code><code>a</code><code>&gt;</code>

<code>&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;&lt;</code><code>br</code><code>&gt;</code>

<code>&lt;</code><code>a</code> <code>name</code><code>=</code><code>"1"</code><code>&gt;這是第一張内容&lt;/</code><code>a</code><code>&gt; </code>

<code>&lt;</code><code>a</code> <code>name</code><code>=</code><code>"2"</code><code>&gt;這是第二章内容&lt;/</code><code>a</code><code>&gt; </code>

<code>&lt;</code><code>a</code> <code>id</code><code>=</code><code>"3"</code><code>&gt;這是第三章内容&lt;/</code><code>a</code><code>&gt;</code>

當在頁面上點選“第一章”時，頁面會自動跳轉到“這是第一章内容”這裡。

<a href="https://s5.51cto.com/wyfs02/M02/8D/91/wKioL1iicnPwwLpMAAAZiBQ0U_M542.png" target="_blank"></a>

<a href="https://s5.51cto.com/wyfs02/M00/8D/94/wKiom1iicnPReS9zAAAY3SHjyP4221.png" target="_blank"></a>

本文轉自 曾哥最愛 51CTO部落格，原文連結：http://blog.51cto.com/zengestudy/1897537，如需轉載請自行聯系原作者