首頁 > web前端 > html教學 > HTML程式碼實例:詳細解說超級連結_HTML/Xhtml_網頁製作

HTML程式碼實例:詳細解說超級連結_HTML/Xhtml_網頁製作

WBOY
發布: 2016-05-16 16:43:27
原創
1691 人瀏覽過

超級連結是網站中使用比較頻繁的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任

第2任

第3任

第4任

第5任

第6任

美國歷任總統


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

姓名:喬治華盛頓

George Washington

生卒:1732-1799

政黨::聯邦

●第2任(1797-1801)這裡是第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伺服器


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

圖4.22 超級連結的其他設置
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板