超鏈接



實例

指向 趙智鵬鷹立的博客 的超鏈接:

<網頁>
<主體>
<超鏈接 超引用=“https://www.cnblogs.com/zzpyl/“>趙智鵬鷹立</超鏈接>
</主體>
</網頁>


 

瀏覽器支持

 

元素 Chrome IE Firefox Safari Opera
<超鏈接>

 

所有瀏覽器都支持 <超鏈接> 標簽。


定義和用法

<超鏈接> 標簽定義超鏈接,用於從一張頁面鏈接到另一張頁面。

<超鏈接> 元素最重要的屬性是 超引用 屬性,它指示鏈接的目標。

在所有瀏覽器中,鏈接的默認外觀是:

  • 未被訪問的鏈接帶有下划線而且是藍色的
  • 已被訪問的鏈接帶有下划線而且是紫色的
  • 活動鏈接帶有下划線而且是紅色的

提示:您可以使用 層疊樣式表 偽類 向文本超鏈接添加復雜而多樣的樣式。


術語解釋

什么是超文本?

標記語言的真正威力在於其收集能力,它可以將收集來的文檔組合成一個完整的信息庫,並且可以將文檔庫與世界上的其他文檔集合鏈接起來。

這樣的話,讀者不僅可以完全控制文檔在屏幕上的顯示,還可以通過超鏈接來控制瀏覽信息的順序。這就是 HTML 和 XHTML 中的 “HT” - 超文本(hypertext),就是它將整個 Web 網絡連接起來。

超文本的基礎知識

超文本的基本特征就是可以超鏈接文檔;你可以指向其他位置,該位置可以在當前的文檔中、局域網中的其他文檔,也可以在因特網上的任何位置的文檔中。這些文檔組成了一個雜亂的信息網。目標文檔通常與其來源有某些關聯,並且豐富了來源;來源中的鏈接元素則將這種關系傳遞給瀏覽者。

超鏈接可以用於各種效果。超鏈接可以用在目錄和主題列表中。瀏覽者可以在瀏覽器屏幕上單擊鼠標或在鍵盤上按下按鍵,從而選擇並自動跳轉到文檔中自己感興趣的那個主題,或跳轉到世界上某處完全不同的集合中的某個文檔。

超鏈接還可以向瀏覽者指出有關文檔中某個主題的更多信息。例如,“如果您想了解更詳細的信息,請參閱某某頁面。”。作者可以使用超鏈接來減少重復信息。例如,我們建議創作者在每個文檔中都簽署上自己的姓名。這樣就可以使用一個將名字和另一個包含地址、電話號碼等信息的單獨文檔鏈接起來的超鏈接,而不必在每個文檔中都包含完整的聯系信息。

超鏈接(hyper text),或者按照標准叫法稱為錨(anchor),是使用 <超文本>(<a>) 標簽標記的,可以用兩種方式表示。錨的一種類型是在文檔中創建一個熱點,當用戶激活或選中(通常是使用鼠標)這個熱點時,會導致瀏覽器進行鏈接。瀏覽器會自動加載並顯示同一文檔或其他文檔中的某個部分,或觸發某些與因特網服務相關的操作,例如發送電子郵件或下載特殊文件等。錨的另一種類型會在文檔中創建一個標記,該標記可以被超鏈接引用。

還有一些與超鏈接相關聯的鼠標相關事件。這些事件與 JavaScript 結合使用可以產生一些令人激動的效果。

注釋

錨的這兩種類型都使用同樣的標簽;也許這就是它們擁有同樣的名稱的原因。但是我們發現,如果將它們區分開,把提供熱點和超鏈接地址的錨看作“鏈接”,而用於標記文檔的目標部分的錨稱為“錨”,那么您將更容易理解這兩種類型的錨。


提示和注釋

提示:如果不使用 超引用 屬性,則不可以使用如下屬性:下載, 超引用語言, 媒體, 關系, 目標 以及 類型 屬性。

提示:被鏈接頁面通常顯示在當前瀏覽器窗口中,除非您規定了另一個目標(目標 屬性)。

提示:請使用 層疊樣式表 來設置鏈接的樣式。


HTML 4.01 與 HTML5 之間的差異

在 HTML 4.01 中,<超鏈接> 標簽可以是超鏈接或錨。在 HTML5 中,<超鏈接> 標簽始終是超鏈接,但是如果未設置 超引用 屬性,則只是超鏈接的占位符。

HTML5 提供了一些新屬性,同時不再支持一些 HTML 4.01 屬性。


屬性

新: HTML5 中的新屬性。

屬性 描述
字符集 字符編碼 HTML5 中不支持。規定被鏈接文檔的字符集。
坐標 坐標值 HTML5 中不支持。規定鏈接的坐標。
下載
文件名
規定被下載的超鏈接目標。
超引用 地址 規定鏈接指向的頁面的 URL。
超引用語言 程序語言_代碼文本 規定被鏈接文檔的語言。
媒體 媒體_詢問 規定被鏈接文檔是為何種媒介/設備優化的。
名字 文檔章節_名字 HTML5 中不支持。規定錨的名稱。
關系 文本 規定當前文檔與被鏈接文檔之間的關系。
反關系(rev 文本 HTML5 中不支持。規定被鏈接文檔與當前文檔之間的關系。
形狀

默認

矩形

圓形

多邊形

HTML5 中不支持。規定鏈接的形狀。
目標

新窗口

父窗口

本窗口

頂級窗口

指定窗口

規定在何處打開鏈接文檔。
類型 媒體 類型 規定被鏈接文檔的的 媒體 類型。

全局屬性

<超鏈接> 標簽支持 HTML 中的全局屬性。


事件屬性

<超鏈接> 標簽支持 HTML 中的事件屬性。


親自試一試 - 實例

創建超級鏈接
本例演示如何在 超文本(HTML )文檔中創建鏈接。

<網頁>
<主體>
<段落>
<超鏈接 超引用=“/index.html“>本文本</超鏈接> 是一個指向本網站中的一個頁面的鏈接。</段落>
<段落><超鏈接 超引用=“http://www.microsoft.com/“>本文本</超鏈接> 是一個指向萬維網上的頁面的鏈接。</段落>
</主體>
</網頁>

將圖像作為鏈接
本例演示如何使用圖像作為鏈接。

<網頁>
<主體>
<段落>
您也可以使用圖像來作鏈接:
<超鏈接 超引用=“https://www.w3school.com.cn/example/html/lastpage.html“>
<圖像 邊框=“0“ 資源地址=“https://www.w3school.com.cn/i/eg_buttonnext.gif“ />
</超鏈接>
</段落>
</主體>
</網頁>

鏈接到同一個頁面的不同位置
本例演示如何使用鏈接跳轉至文檔的另一個部分

<網頁>
<主體>
<段落>
<超鏈接 超引用=“#第四章“>查看 章節4。</超鏈接>
</段落>
<標題2>章節1</標題2>
<段落>本章解釋了ba bla bla</段落>
<標題2>章節2</標題2>
<段落>本章解釋了ba bla bla</段落>
<標題2>章節3</標題2>
<段落>本章解釋了ba bla bla</段落>
<標題2><超鏈接 名字=“第四章“>章節4</超鏈接></標題2>
<段落>本章解釋了ba bla bla</段落>
<標題2>章節5</標題2>
<段落>本章解釋了ba bla bla</段落>
<標題2>章節6</標題2>
<段落>本章解釋了ba bla bla</段落>
<標題2>章節7</標題2>
<段落>本章解釋了ba bla bla</段落>
<標題2>章節8</標題2>
<段落>本章解釋了ba bla bla</段落>
<標題2>章節9</標題2>
<段落>本章解釋了ba bla bla</段落>
<標題2>章節10</標題2>
<段落>本章解釋了ba bla bla</段落>
<標題2>章節11</標題2>
<段落>本章解釋了ba bla bla</段落>
<標題2>章節12</標題2>
<段落>本章解釋了ba bla bla</段落>
<標題2>章節13</標題2>
<段落>本章解釋了ba bla bla</段落>
<標題2>章節14</標題2>
<段落>本章解釋了ba bla bla</段落>
<標題2>章節15</標題2>
<段落>本章解釋了ba bla bla</段落>
<標題2>章節16</標題2>
<段落>本章解釋了ba bla bla</段落>
<標題2>章節17</標題2>
<段落>本章解釋了ba bla bla</段落>
</主體>
</網頁>

在新的瀏覽器窗口打開鏈接
本例演示如何在新窗口打開一個頁面,這樣的話訪問者就無需離開你的站點了。

<網頁>
<主體>
<超鏈接 超引用=“https://www.cnblogs.com/zzpyl/“ 目標=“新窗口“>趙智鵬鷹立</超鏈接>
<段落>如果把鏈接的 目標 屬性設置為 “新窗口“,該鏈接會在新窗口中打開。</段落>
</主體>
</網頁>

跳出框架
本例演示如何跳出框架,假如你的頁面被固定在框架之內。

<網頁>
<主體>
<段落>被鎖在框架中了嗎?</段落>
<超鏈接 超引用=“https://www.cnblogs.com/zzpyl/“ 目標=“頂級窗口“>請點擊這里!</超鏈接>
</主體>
</網頁>

創建電子郵件鏈接
本例演示如何如何鏈接到一個郵件。(本例在安裝郵件客戶端程序后才能工作。)

<網頁>
<主體>
<段落>
這是郵件鏈接:
<超鏈接 超引用=“mailto:someone@microsoft.com?subject=hello%20again“>發送郵件</超鏈接>
</段落>
<段落>
<粗體>注意:</粗體>應該使用 %20 來替換單詞之間的空格,這樣瀏覽器就可以正確地顯示文本了。
</段落>
</主體>
</網頁>

創建電子郵件鏈接 2
本例演示更加復雜的郵件鏈接。

<網頁>
<主體>
<段落>
這是另一個 mailto 鏈接:
<超鏈接 超引用=“mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=summer%20party&body=you%20are%20invited%20to%20a%20big%20summer%20party!“>發送郵件!</超鏈接>
</段落>
<段落>
<粗體>注意:</粗體>應該使用 %20 來替換單詞之間的空格,這樣瀏覽器就可以正確地顯示文本了。
</段落>
</主體>
</網頁>



 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM