首頁 > 文章 > web前端 > HTML 超級連結詳細講解

HTML 超級連結詳細講解

不言原創: 2018-04-27 14:25:471852瀏覽

這篇文章主要介紹了關於HTML 超級連結詳細講解，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

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

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

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

4.5.1 為文字加上連結

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

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

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

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

<html>
<head>
  <title>超级链接的设置</title>
</head>
<body>
<font size="5">
<a href="ul_ol.htm">进入列表的设置页面</a>
</font>
</body>
</html>

在瀏覽器網址列輸入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

<html>
<head>
  <title>超级链接的设置</title>
</head>
<body>
<font size="5">
<a href="ul_ol.htm" target="_blank" title="读者你好，现在你看到的是提示文字，单击本链接可以新开窗口跳转到ul_ol.htm页面。">进入列表的设置页面</a>
</font>
</body>
</html>

在瀏覽器網址列輸入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

<html>
<head>
  <title>超级链接的设置</title>
</head>
<body>
<font size="5">
<a name="top">这里是顶部的锚</a><br />
<a href="#1">第1任</a><br />
<a href="#2">第2任</a><br />
<a href="#3">第3任</a><br />
<a href="#4">第4任</a><br />
<a href="#5">第5任</a><br />
<a href="#6">第6任</a><br />
<h2>美国历任总统</h2>
●第1任(1789-1797)<a name="1">这里是第1任的锚</a><br />
姓名：乔治·华盛顿<br />
George Washington<br />
生卒：1732-1799<br />
政党：：联邦<br />
●第2任(1797-1801)<a name="2">这里是第2任的锚</a><br />
姓名：约翰·亚当斯<br />
John Adams<br />
生卒：1735-1826<br />
政党：：联邦<br />
●第3任(1801-1809)<a name="3">这里是第3任的锚</a><br />
姓名：托马斯·杰斐逊<br />
Thomas Jefferson<br />
生卒：1743-1826<br />
政党：：民共<br />
●第4任(1809-1817)<a name="4">这里是第4任的锚</a><br />
姓名：詹姆斯·麦迪逊<br />
James Madison<br />
生卒：1751-1836<br />
政党：民共<br />
●第5任(1817-1825)<a name="5">这里是第5任的锚</a><br />
姓名：詹姆斯·门罗<br />
James Monroe<br />
生卒：1758-1831<br />
政党：民共<br />
</font>
</body>
</html>l>

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

图4.21 超级链接的锚

当浏览者单击超级链接时，页面将自动滚动到href属性值名称的锚位置。

— 注意：定义锚的标签aaee7a1ed4a6a1c43f3bdc241aa9871e5db79b134e9f6b82c0b36e0489ee08ed内不一定需要具体内容，只是做一个定位。

4.5.5 电子邮件、FTP和Telnet的链接

超级链接还可以进一步扩展网页的功能，比较常用的有发电子邮件、FTP以及Telnet连接。完成以上的功能只需要修改超级链接的href值。发电子邮件的编写格式为：

<a href = "mailto:邮件地址">给我发email</a>

邮件地址必须完整，如intel@qq.com。

前面提到过，浏览网页采用http协议，而FTP服务器采用FTP协议连接，链接格式如下：

<a href = "ftp://服务器IP地址或域名">链接的文字</a>

FTP服务器链接和网页链接区别在于所用协议不同。FTP需要从服务器管理员处获得登录的权限。不过部分FTP服务器可以匿名访问，从而能获得一些公开的文件。同样，连接Telnet协议的服务器也是采用类似方法，格式如下：

<a href = "telnet://服务器IP地址或域名">链接的文字</a>

telnet协议应用非常少，使用http协议居多。在D:\web\目录下创建网页文件，命名为mail.htm，编写代码如代码4.21所示。

代码4.21 超级链接的其他设置：mail.htm

<html>
<head>
  <title>超级链接的其他设置</title>
</head>
<body>
<font size="5">
<a href="mailto:intel@qq.com" title="读者你好，单击这里可以发电子邮件。">给我发E-mail</a><br />
<a href="ftp://101.22.25.11" title="读者你好，欢迎进入FTP服务器。">连接FTP服务器</a><br />
<a href="telnet://101.22.25.11" title="读者你好，欢迎进入Telnet服务器。">连接Telnet服务器</a>
</font>
</body>
</html>s

在浏览器地址栏输入http://localhost/mail.htm，浏览效果如图4.22所示。

图4.22 超级链接的其他设置

HTML 超級連結詳細講解

相關文章