HTML 標籤

WBOY
發布: 2016-08-30 09:21:08
原創
1139 人瀏覽過

一,定義和用法

所有瀏覽器都支援 標籤。

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

元素最重要的屬性是 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>
<a href=<span style="color: #800000;">"</span><span style="color: #800000;">/index.html</span><span style="color: #800000;">"</span>>本文本</a> 是一个指向本网站中的一个页面的链接。</p>

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

</body>
</html>
登入後複製

 

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

<html>

<body>
<p><span style="color: #000000;">
您也可以使用图像来作链接:
</span><a href=<span style="color: #800000;">"</span><span style="color: #800000;">/example/html/lastpage.html</span><span style="color: #800000;">"</span>>
<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> />
</a>
</p>

</body>
</html>
登入後複製

 

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

<html>

<body>

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

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

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

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

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

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

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

</body>
</html>
登入後複製

 

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

<html>

<body>

<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>>Visit W3School!</a>

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

</body>

</html>
登入後複製

 

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

<html>

<body>

<p>被锁在框架中了吗?</p> 

<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>>请点击这里!</a> 

</body>
</html>
登入後複製

 

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

<html>

<body>

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

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

</body>
</html>
登入後複製

 

本例示範更複雜的郵件連結。
<html>

<body>

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

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

</body>
</html>
登入後複製

 

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