<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。
四、圖片鏈接
在圖片上添加超鏈接,示例代碼:
<div class="content">
<a href="rose.htm" title="情人節必備玫瑰花"><img width="300" src="img/rose.png"/ alt="rose"></a>
</div>
提示:alt和title的區別:alt是一小段描述圖像的信息,當圖像不能顯示時用這段信息代替;title是鼠標滑到元素上(不只限於圖像)顯示的信息。
五、電子郵件、FTP和Telnet的鏈接
超級鏈接還可以進一步擴展網頁的功能,比較常用的有發電子郵件、FTP以及Telnet連接。完成以上的功能只需要修改超級鏈接的href值。發電子郵件的編寫格式為:
<a href = "mailto:郵件地址">給我發email</a>
郵件地址必須完整。
瀏覽網頁采用http協議,而FTP服務器采用FTP協議連接,鏈接格式如下:
<a href = "ftp://服務器IP地址或域名">鏈接的文字</a>
FTP服務器鏈接和網頁鏈接區別在於所用協議不同。FTP需要從服務器管理員處獲得登錄的權限。不過部分FTP服務器可以匿名訪問,從而能獲得一些公開的文件。同樣,連接Telnet協議的服務器也是采用類似方法,格式如下:
<a href = "telnet://服務器IP地址或域名">鏈接的文字</a>
telnet協議應用非常少,使用http協議居多。
六、瀏覽環境設定
<a> 標簽的 target 屬性規定在何處打開鏈接文檔。
重點了解一下在框架中打開的情況:
不用打開一個完整的瀏覽器窗口,使用target更通常的方法是在一個<frameset>顯示中蔣超鏈接內容定向到一個或多個框架中。舉個栗子,將內容放到一個帶有兩個框架的文檔的其中一個框架中,在其相鄰的框架里顯示選定的文檔。
<frameset cols="200,*"><!-- 創建了兩個框架 -->
<frame src="nav.html"><!-- 框架1顯示nav.html的文檔內容 -->
<frame src="content.html" name="my_frame"><!-- 框架2顯示content.html的內容 -->
</frameset>
其中,nav.html的內容如下,其中target屬性值均為my_frame:
<h3>這里是第一個框架的內容</h3>
<ul>
<li><a href="pref.html" target="my_frame">前言</a></li>
<li><a href="chap1.html" target="my_frame">第1章</a></li>
<li><a href="chap2.html" target="my_frame">第2章</a></li>
<li><a href="chap3.html" target="my_frame">第3章</a></li>
</ul>
在框架一中單擊鏈接,瀏覽器會將該鏈接的關聯文檔載入並顯示在框架二中,即my_frame框架。