關於XHTML中的超連結的實例詳解

這篇文章主要介紹了XHTML中的超鏈接標籤使用教程,包括錨鏈接和鏈接相對地址用法的介紹,需要的朋友可以參考下

超鏈接，也叫“連結」。超連結在我們瀏覽的網頁上可以說是無所不在，我們點擊網頁上某個連結地址，也就是連結到另一個網頁，這就是超連結在運作。
使用 標籤來定義超鏈接，語法：
顯示的文字或圖片
範例：

XML/HTML Code複製內容到剪貼簿

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

1. 瀏覽器顯示效果：

2. 連結至百度

3. 當我們點選上面「連結至百度」 字樣時，瀏覽器就會轉向百度首頁。

超連結屬性
超連結屬性：
href 連結位址。可以是絕對網頁位址或相對地址。
target 連結目標。取值為 _blank 會在新視窗中開啟連結位址，缺省則使用目前視窗開啟連結位址。
name 錨鏈接，這個我們下面會單獨講到。

相對網頁連結位址：

XML/HTML Code複製內容到剪貼簿

<a href="/css" target="_blank">p+CSS教程</a>

1. 這個例子使用了相對位址，而在上面連結至百度的例子，則使用了絕對位址。

增加了target 屬性的範例：

#XML/HTML Code複製內容到剪貼簿

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

1. 再次點擊連結時，瀏覽器會啟用新頁面開啟連結位址，而原始頁面視窗得以保留。

2. 提示

3. 當連結位址與目前主題或流程並不十分緊密時，通常會啟用target="_blank" 屬性，否則盡量不要啟用新窗口，以便給瀏覽者以友好的瀏覽體驗。

4. 如果頁面是由幾個頁面框架幀組成，那麼target 屬性還可以有其他取值

郵件超鏈接
郵件連結範例：

XML/HTML Code#複製內容到剪貼簿

<a href="mailto:admin@xyz.com">联系xyz站的站长</a>

1. 點擊此鏈接，將啟用預設的郵件用戶端撰寫郵件。

錨連結
錨定連結是指頁面內的鏈接，但現在很多人也把文字超連結叫做錨連結。
我們舉個例子解釋一下錨的作用：
例如我們有一篇文章寫得很好，有很多人都在文章後面作了評論，而發表評論的窗口一般都在評論結束最底下的位置。網站會在發表評論的地方設置一個錨鏈接，而在顯示評論的位置設計一個鏈接到錨鏈接，如：“發表評論”。如果有人不想查看別人留下的評論而想立刻跳到評論輸入窗口，那麼點擊「發表評論」即可在本業內快速跳到評論輸入窗口。這種設計無疑地提高了瀏覽者的使用者體驗。
使用錨定連結的範例
建立錨定：

XML/HTML Code複製內容到剪貼簿

<p><a name="comment"></a></p>

1. #建立連結至錨的超連結位址：

XML/HTML Code#複製內容到剪貼簿##

<p><a href="#comment">链接至comment锚</a></p>

1. 從例子可以看出，造訪一個錨，就是在連結位址後面加上「#」號碼和錨的名字。上面這個例子由於是連結到本頁的錨，因此前面的連結位址被忽略（註：實際上是相對位址被忽略，在此不做展開討論）。

2. 提示

3. 如果你要實驗這個錨標記的用法，那麼注意一點，將連結至錨的超連結和錨標記之間保持足夠的網頁空間，才能看出效果。可以用我們上面學到的換行標籤來創造足夠的上下空白空間來進行測試。

4. 你也可以建立一個連結到其他頁面的錨標記，例如：

XML/HTML Code複製內容到剪貼簿

<p><a href="http://www.abc.com/#test">链接至锚</a></p>

當然需要在www.abc.com 這個頁面有這個test 錨標記才行，否則只會連結到www.abc.com 頁面而忽略這個錨標記

【相關推薦】

1. 

HTML免費影片教學

2. 對HTTP Headers知識點的圖文說明

3. html中怎麼樣才能讓JSON資料顯示的方法介紹

#4. html實作訊息按鈕上的數量角標的實例詳解

5. Html完成非同步上傳檔案的Jquery程式碼實例    

以上是關於XHTML中的超連結的實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！