首頁 > 開發者 > JavaScript
HTML系列（五）：超連結，html系列超連結
<a> 標籤定義超連結，最重要的屬性是 href 屬性，它指示連結的目標。通過將href屬性設定不同類型的值可以使連結指向不同類型的連結地址：內部連結、外部連結、錨連結。
內部連結指的是同一網域名稱網站內部頁面的相互連結；外部連結指從某一網域名稱網頁指向外部網域名稱網站的連結；錨連結指從某個網域名稱外部所有以文字帶超連結指向這個網域名稱的連結，是影響網站關鍵詞在搜尋引擎中排名的重要因素。
一、指向外部的超連結
<a href="外部頁面連結地址">連結文本</a>
二、相對路徑
當源檔案和引用檔案在同一個目錄裡，直接引用檔案名稱；使用../表示源檔案所在目錄的上一級目錄，../../表示源檔案所在目錄的上上級目錄，以此類推；引用下級目錄檔案，直接寫下級目錄檔案名稱，用/隔開。
三、頁面內超連結
當一張頁面上篇幅較長，使用者尋找困難，就可以用頁面內超連結作為導航。頁面內超連結也稱作錨連結，類似於書籤的功能，實現在頁面內不同位置的跳轉，使用者不需要反覆拖動捲軸進行定位。
做法：通過a的name屬性定義錨的名稱，通過a的href屬性可以根據name跳到對應的錨。
範例程式碼：
1 <body> 2 <h1>HTML 教程目錄</h1> 3 4 <ul> 5 <li><a href="#C1">第一章</a></li> 6 <li><a href="#C2">第二章</a></li> 7 <li><a href="#C3">第三章</a></li> 8 <li><a href="#C4">第四章</a></li> 9 <li><a href="#C5">第五章</a></li>10 <li><a href="#C6">第六章</a></li>11 <li><a href="#C7">第七章</a></li>12 <li><a href="#C8">第八章</a></li>13 </ul>14 15 <h2><a name="C1">第一章</a></h2>16 <p>本章講解的內容是 ... ...</p>17 18 <h2><a name="C2">第二章</a></h2>19 <p>本章講解的內容是 ... ...</p>20 21 <h2><a name="C3">第三章</a></h2>22 <p>本章講解的內容是 ... ...</p>23 24 <h2><a name="C4">第四章</a></h2>25 <p>本章講解的內容是 ... ...</p>26 27 <h2><a name="C5">第五章</a></h2>28 <p>本章講解的內容是 ... ...</p>29 30 <h2><a name="C6">第六章</a></h2>31 <p>本章講解的內容是 ... ...</p>32 33 <h2><a name="C7">第七章</a></h2>34 <p>本章講解的內容是 ... ...</p>35 36 <h2><a name="C8">第八章</a></h2>37 <p>本章講解的內容是 ... ...</p>38 39 </body>使用 name 屬性還是 id 屬性？
在 HTML 4.0 之前的版本中，只有使用 <a> 標籤的 name 屬性才能建立片段標識符。隨著 HTML 4.0 中 id 屬性的出現，所有 HTML 或 XHTML 元素都可以是片段標識符。這是因為 id 標識符幾乎可以用在所有的標籤中。<a> 標籤為了能夠和以前的版本相相容而保留了 name 屬性，同時也可以使用 id 屬性。這些屬性可以相互交換使用，可以把 id 屬性看作是 name 屬性的升級版本。name 和 id 屬性都可以與 href 屬性結合起來使用，這樣一個 <a> 標籤就可以同時作為超連結和片段標識符使用。
可以簡單地將片段標識符看作是對許多程式設計語言中普遍使用的 goto 語句標籤的 HTML 類比。<a> 標籤中的 name 屬性或者 <a> 或其他標籤中的 id 屬性會在文檔中放置一個標識。當標籤用於連結到該文檔時，就等於告訴瀏覽器要轉到（goto）該標識。
id 或 name 屬性的值可以是引號引起來的任何字串。字串必須是唯一的標記，不能在同一文檔中的其他 name 或 id 屬性中重複使用，但是可以在不同的文檔中再次使用。
上面的範例程式碼的name可以替換成id。
未完待續。。。。。。。。。。。。。。。。。。。。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
