目錄
一,定義和用法
二,提示和註釋
三,屬性

一,定義和用法

所有瀏覽器都支援 標籤。

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

元素最重要的屬性是 href 屬性,它指示連結的目標。

在所有瀏覽器中,連結的預設外觀是:

  • 未被訪問的連結帶有下劃線而且是藍色的
  • 已被訪問的連結帶有下劃線而且是紫色的
  • 活動連結帶有下劃線而且是紅色的
若想連結外觀與預設的連結外觀非常不同。您可以使用 CSS 偽類 為文字超連結添加複雜而多樣的樣式。
 

二,提示和註釋

提示:如果不使用 href 屬性,則不可以使用以下屬性:download, hreflang, media, rel, target 以及 type 屬性。

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

提示:請使用 CSS 來設定連結的樣式。

三,屬性

屬性 描述
charset char_encoding HTML5 中不支援。規定被連結文件的字元集。
coords coordinates HTML5 中不支援。規定鏈接的座標。
download(5) filename 規定被下載的超連結目標。
href URL 規定連結指向的頁面的 URL。
hreflang language_code 規定被連結文檔的語言。
media(5) media_query 規定被連結文件是為何種媒介/設備最佳化的。
name section_name HTML5 中不支援。規定錨的名稱。
rel text 規定目前文件與被連結文件之間的關係。
rev text HTML5 中不支援。規定被連結文件與目前文件之間的關係。
shape
  • default
  • rect
  • circle
  • poly
HTML5 中不支援。規定鏈接的形狀。
target
  • _blank
  • _parent
  • _self
  • _top
  • framename
規定在何處開啟連結文件。
type(5) MIME type 規定被連結文件的的 MIME 類型。
 
四,案例
本例示範如何在 HTML 文件中建立連結。
<html>

<body>

<p>
&lt;a href=<span style="color: #800000;">"</span><span style="color: #800000;">/index.html</span><span style="color: #800000;">"</span>&gt;本文本&lt;/a&gt; 是一个指向本网站中的一个页面的链接。&lt;/p&gt;

&lt;p&gt;&lt;a href=<span style="color: #800000;">"</span><span style="color: #800000;">http://www.microsoft.com/</span><span style="color: #800000;">"</span>&gt;本文本&lt;/a&gt; 是一个指向万维网上的页面的链接。&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;
登入後複製

 

本例示範如何使用圖像作為連結。

&lt;html&gt;

&lt;body&gt;
&lt;p&gt;<span style="color: #000000;">
您也可以使用图像来作链接:
</span>&lt;a href=<span style="color: #800000;">"</span><span style="color: #800000;">/example/html/lastpage.html</span><span style="color: #800000;">"</span>&gt;
&lt;img border=<span style="color: #800000;">"</span><span style="color: #800000;">0</span><span style="color: #800000;">"</span> src=<span style="color: #800000;">"</span><span style="color: #800000;">/i/eg_buttonnext.gif</span><span style="color: #800000;">"</span> /&gt;
&lt;/a&gt;
&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;
登入後複製

 

本例示範如何使用連結跳轉至文件的另一部分 

&lt;html&gt;

&lt;body&gt;

&lt;p&gt;
&lt;a href=<span style="color: #800000;">"</span><span style="color: #800000;">#C4</span><span style="color: #800000;">"</span>&gt;查看 Chapter <span style="color: #800080;">4</span>。&lt;/a&gt;
&lt;/p&gt;

&lt;h2&gt;Chapter <span style="color: #800080;">1</span>&lt;/h2&gt;
&lt;p&gt;This chapter explains ba bla bla&lt;/p&gt;

&lt;h2&gt;Chapter <span style="color: #800080;">2</span>&lt;/h2&gt;
&lt;p&gt;This chapter explains ba bla bla&lt;/p&gt;

&lt;h2&gt;Chapter <span style="color: #800080;">3</span>&lt;/h2&gt;
&lt;p&gt;This chapter explains ba bla bla&lt;/p&gt;

&lt;h2&gt;&lt;a name=<span style="color: #800000;">"</span><span style="color: #800000;">C4</span><span style="color: #800000;">"</span>&gt;Chapter <span style="color: #800080;">4</span>&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;This chapter explains ba bla bla&lt;/p&gt;

&lt;h2&gt;Chapter <span style="color: #800080;">5</span>&lt;/h2&gt;
&lt;p&gt;This chapter explains ba bla bla&lt;/p&gt;

&lt;h2&gt;Chapter <span style="color: #800080;">6</span>&lt;/h2&gt;
&lt;p&gt;This chapter explains ba bla bla&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;
登入後複製

 

 本例示範如何在新視窗中開啟一個頁面,這樣的話訪客就無需離開你的網站了。

&lt;html&gt;

&lt;body&gt;

&lt;a href=<span style="color: #800000;">"</span><span style="color: #800000;">http://www.w3school.com.cn/</span><span style="color: #800000;">"</span> target=<span style="color: #800000;">"</span><span style="color: #800000;">_blank</span><span style="color: #800000;">"</span>&gt;Visit W3School!&lt;/a&gt;

&lt;p&gt;如果把链接的 target 属性设置为 <span style="color: #800000;">"</span><span style="color: #800000;">_blank</span><span style="color: #800000;">"</span>,该链接会在新窗口中打开。&lt;/p&gt;

&lt;/body&gt;

&lt;/html&gt;
登入後複製

 

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

&lt;html&gt;

&lt;body&gt;

&lt;p&gt;被锁在框架中了吗?&lt;/p&gt; 

&lt;a href=<span style="color: #800000;">"</span><span style="color: #800000;">/index.html</span><span style="color: #800000;">"</span><span style="color: #000000;">
target</span>=<span style="color: #800000;">"</span><span style="color: #800000;">_top</span><span style="color: #800000;">"</span>&gt;请点击这里!&lt;/a&gt; 

&lt;/body&gt;
&lt;/html&gt;
登入後複製

 

本例示範如何如何連結到一個郵件。 (本例在安裝郵件用戶端程式後才能運作。)

&lt;html&gt;

&lt;body&gt;

&lt;p&gt;<span style="color: #000000;">
这是邮件链接:
</span>&lt;a href=<span style="color: #800000;">"</span><span style="color: #800000;">mailto:someone@microsoft.com?subject=Hello%20again</span><span style="color: #800000;">"</span>&gt;发送邮件&lt;/a&gt;
&lt;/p&gt;

&lt;p&gt;
&lt;b&gt;注意:&lt;/b&gt;应该使用 %<span style="color: #800080;">20</span><span style="color: #000000;"> 来替换单词之间的空格,这样浏览器就可以正确地显示文本了。
</span>&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;
登入後複製

 

本例示範更複雜的郵件連結。
&lt;html&gt;

&lt;body&gt;

&lt;p&gt;<span style="color: #000000;">
这是另一个 mailto 链接:
</span>&lt;a href=<span style="color: #800000;">"</span><span style="color: #800000;">mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&amp;bcc=andsomeoneelse2@microsoft.com&amp;subject=Summer%20Party&amp;body=You%20are%20invited%20to%20a%20big%20summer%20party!</span><span style="color: #800000;">"</span>&gt;发送邮件!&lt;/a&gt;
&lt;/p&gt;

&lt;p&gt;
&lt;b&gt;注意:&lt;/b&gt;应该使用 %<span style="color: #800080;">20</span><span style="color: #000000;"> 来替换单词之间的空格,这样浏览器就可以正确地显示文本了。
</span>&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;
登入後複製

 

 
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗? 公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗? Mar 04, 2025 pm 12:32 PM

公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?

如何使用HTML5表單驗證屬性來驗證用戶輸入? 如何使用HTML5表單驗證屬性來驗證用戶輸入? Mar 17, 2025 pm 12:27 PM

如何使用HTML5表單驗證屬性來驗證用戶輸入?

如何高效地在網頁中為PNG圖片添加描邊效果? 如何高效地在網頁中為PNG圖片添加描邊效果? Mar 04, 2025 pm 02:39 PM

如何高效地在網頁中為PNG圖片添加描邊效果?

&lt; iframe&gt;的目的是什麼。 標籤?使用時的安全考慮是什麼? &lt; iframe&gt;的目的是什麼。 標籤?使用時的安全考慮是什麼? Mar 20, 2025 pm 06:05 PM

&lt; iframe&gt;的目的是什麼。 標籤?使用時的安全考慮是什麼?

使用IFRAME的安全性含義是什麼?如何減輕它們? 使用IFRAME的安全性含義是什麼?如何減輕它們? Mar 18, 2025 pm 02:51 PM

使用IFRAME的安全性含義是什麼?如何減輕它們?

我如何使用html5&lt; meter&gt; 要在範圍內顯示數值數據的元素? 我如何使用html5&lt; meter&gt; 要在範圍內顯示數值數據的元素? Mar 12, 2025 pm 04:08 PM

我如何使用html5&lt; meter&gt; 要在範圍內顯示數值數據的元素?

HTML5中跨瀏覽器兼容性的最佳實踐是什麼? HTML5中跨瀏覽器兼容性的最佳實踐是什麼? Mar 17, 2025 pm 12:20 PM

HTML5中跨瀏覽器兼容性的最佳實踐是什麼?

如何有效地使用HTML鏈接進行導航和SEO? 如何有效地使用HTML鏈接進行導航和SEO? Mar 18, 2025 pm 02:39 PM

如何有效地使用HTML鏈接進行導航和SEO?

See all articles