介紹HTML的超連結詳細解說

本文介紹HTML的超級連結詳細講解

超級連結是網站中使用比較頻繁的HTML元素，因為網站的各種頁面都是由超級連結串接而成，超級連結完成了頁面之間的跳轉。超級連結是瀏覽者和伺服器的互動的主要手段，在後面的技術中會逐步深化學習。

—  注意：圖片也可以做鏈接，將在下一章“網頁中的圖片”詳細學習。

 4.5.1  為文字加上連結

超級連結的標籤是，為文字加上超級連結類似於其他修飾標籤。新增了連結後的文字有其特殊的樣式，以和其他文字區分，預設連結樣式為藍色文字，有底線。超級連結是跳到另一個頁面的，標籤有一個href屬性負責指定新頁面的位址。 href指定的位址一般使用相對位址。

—  說明：網站開發中，文件相對位址使用較為普遍。

在D:\web\目錄下建立網頁文件，命名為a.htm，編寫程式碼4.18所示。

程式碼4.18  超級連結的設定：a.htm

 

進入清單的設定頁面

#

#

在瀏覽器網址列輸入http://localhost/a.htm，瀏覽效果如圖4.19所示。

圖4.19  超級連結的設定

#讀者可從圖4.19看到超級連結的預設樣式，當點擊頁面中的鏈接，頁面將跳到同一目錄下的ul_ol.htm頁面，即上節的清單設定頁面。當點擊瀏覽器的「後退」按鈕，回到a.htm頁面時，文字連結的顏色變成了紫色，用於告訴瀏覽者，此連結已經被訪問過。

 4.5.2  修改連結的視窗開啟方式

預設情況下，超級連結開啟新頁面的方式是自我覆蓋。根據瀏覽者的不同需要，讀者可以指定超級連結的其他開啟新視窗的方式。超級連結標籤提供了target屬性進行設置，取值分別為_self（自我覆蓋，預設）、_blank（建立新視窗開啟新頁面）、_top（在瀏覽器的整個視窗打開，將會忽略所有的框架結構）、_parent（在上一層視窗開啟）。

—  注意：_top和_parent方式用於框架頁面，後面章節有詳解。

 4.5.3  新增提示文字

很多情況下，超級連結的文字不足以描述所要連結的內容，超級鏈接標籤提供了title屬性能很方便地給瀏覽者做出提示。 title屬性的值即為提示內容，當瀏覽者的遊標停留在超級連結上時，提示內容才會出現，這樣不會影響頁面排版的整齊。修改a.htm網頁文件，編寫程式碼4.19所示。

程式碼4.19  超級連結的設定：a.htm

 

進入列表的設定頁面

#

#在瀏覽器網址列輸入http://localhost/a.htm，瀏覽效果如圖4.20所示。

圖4.20  超級連結的提示文字

 4.5.4  什麼是錨（anchor）

#很多網頁文章的內容比較多，導致頁面很長，瀏覽者需要不斷地拖曳瀏覽器的捲軸才能找到需要的內容。超級連結的錨功能可以解決這個問題，錨（anchor）是引自於船隻上的錨，錨被拋下後，船隻就不容易飄走、迷路。實際上錨就是用於在單一頁面內不同位置的跳轉，有的地方叫做書籤。

超級連結標籤的name屬性用來定義錨的名稱，一個頁面可以定義多個錨，透過超級連結的href屬性可以根據name跳到對應的錨。在D:\web\目錄下建立網頁文件，命名為a_anchor.htm，編寫程式碼如程式碼4.20所示。

程式碼4.20  超級連結的錨：a_anchor.htm

#

# 

這裡是頂部的錨

第1任< ;br />

第2任

第3任

第4任

第5任

第6任< ;/a>

美國歷任總統

●第1任(1789-1797)這裡是第1任的錨

姓名：喬治華盛頓

##George Washington
生卒：1732-1799

政黨：：聯邦

●第2任(1797-1801)< ;a name="2">這裡是第2任的錨

姓名：約翰亞當斯

John Adams

生卒：1735-1826

政黨：：聯邦

●第3任(1801-1809)這裡是第3任的錨

姓名：托馬斯·傑斐遜

Thomas Jefferson

生卒：1743-1826

政黨：：民共

●第4任(1809-1817)這裡是第4任的錨

#姓名：詹姆斯·麥迪遜

James Madison

生卒：1751-1836

政黨：民共

●第5任(1817-1825)這裡是第5任的錨

姓名：詹姆斯·門羅

James Monroe

生卒：1758-1831

政黨：民共

l>

在測試之前，讀者從程式碼4.20可以看到，定義錨也是用的標籤，錨的名稱用name屬性定義（名稱沒有限制，可自訂）。而尋找錨的連結用href屬性指定對應的名稱，在名稱前面要加個#符號。在瀏覽器網址列輸入http://localhost/a_anchor.htm，瀏覽效果如圖4.21所示。

圖4.21  超級連結的錨

#當瀏覽者點擊超級連結時，頁面會自動捲動到href屬性值名稱的錨點位置。

—  注意：定義錨的標籤內不一定需要具體內容，只是做一個定位。

 4.5.5  電子郵件、FTP和Telnet的連結

超級連結還可以進一步擴展網頁的功能，比較常用的有發電子郵件、FTP以及Telnet連線。完成以上的功能只需要修改超級連結的href值。發電子郵件的寫作格式為：

給我發email

郵件地址必須完整，如intel@qq .com。

前面提到過，瀏覽網頁採用http協議，而FTP伺服器採用FTP協議連接，連結格式如下：

連結的文字

FTP伺服器連結和網頁連結差異在於所用協定不同。 FTP需要從伺服器管理員取得登入的權限。不過部分FTP伺服器可以匿名訪問，可獲得一些公開的檔案。同樣，連接Telnet協定的伺服器也是採用類似方法，格式如下：

連結的文字

telnet協定應用非常少，使用http協定居多。在D:\web\目錄下建立網頁文件，命名為mail.htm，編寫程式碼4.21所示。

程式碼4.21  超級連結的其他設定：mail.htm

 

#

給我發E-mail

連接FTP伺服器

連接Telnet伺服器

> ;

在瀏覽器網址列輸入http://localhost/mail.htm，瀏覽效果如圖4.22所示。

圖4.22  超級連結的其他設定

以上是介紹HTML的超連結詳細解說的詳細內容。更多資訊請關注PHP中文網其他相關文章！