詳解HTML的a標(biāo)簽(超鏈接標(biāo)簽)

原文

博客原文

大綱

1、什么是<a>標(biāo)簽
2、<a>標(biāo)簽的幾個重要屬性
3、a標(biāo)簽的運(yùn)行機(jī)制
4、a標(biāo)簽常用的協(xié)議
5、超鏈接標(biāo)簽的樣式問題——a標(biāo)簽的偽類選擇器的書寫順序

1、什么是<a>標(biāo)簽

<a> 標(biāo)簽定義超鏈接,用于從一張頁面鏈接到另一張頁面。
<a> 元素最重要的屬性是 href 屬性,它指示鏈接的目標(biāo)。

2、<a>標(biāo)簽的幾個重要屬性
2.1、href

規(guī)定鏈接指向的頁面的 URL。

<a >W3School</a>
2.2、target

規(guī)定在何處打開鏈接文檔。
a:自定義打開錨點(diǎn)

<frameset cols="100,*">
  <frame src="toc.html">
  <frame src="pref.html" name="view_frame">
</frameset> 

<h3>Table of Contents</h3>
<ul>
  <li><a href="pref.html" target="view_frame">Preface</a></li>
  <li><a href="chap1.html" target="view_frame">Chapter 1</a></li>
  <li><a href="chap2.html" target="view_frame">Chapter 2</a></li>
  <li><a href="chap3.html" target="view_frame">Chapter 3</a></li>
</ul>

target的特殊值:有 4 個保留的目標(biāo)名稱用作特殊的文檔重定向操作:

    _self:這個目標(biāo)的值對所有沒有指定目標(biāo)的 <a> 標(biāo)簽是默認(rèn)目標(biāo),它使得目標(biāo)文檔載入
并顯示在相同的框架或者窗口中作為源文檔。這個目標(biāo)是多余且不必要的,除非和文檔標(biāo)題
 <base> 標(biāo)簽中的 target 屬性一起使用。

    _parent:這個目標(biāo)使得文檔載入父窗口或者包含來超鏈接引用的框架的框架集。如果這個
引用是在窗口或者在頂級框架中,那么它與目標(biāo) _self 等效。

    _top:這個目標(biāo)使得文檔載入包含這個超鏈接的窗口,用 _top 目標(biāo)將會清除所有被包含
的框架并將文檔載入整個瀏覽器窗口。

    _blank:瀏覽器總在一個新打開、未命名的窗口中載入目標(biāo)文檔。

    提示:這些 target 的所有 4 個值都以下劃線開始。任何其他用一個下劃線作為開頭的
窗口或者目標(biāo)都會被瀏覽器忽略,因此,不要將下劃線作為文檔中定義的任何框架 name 或 
id 的第一個字符。
2.3、name

規(guī)定錨的名稱。(Html5不支持)

<html>
<body>
<h1>HTML 教程目錄</h1>
<ul>
<li><a href="#C1">第一章</a></li>
</ul>

<h2><a name="C1">第一章</a></h2>
<p>本章講解的內(nèi)容是 ... ...</p>
</body>
</html>
2.4、downloadHTML5新增

HTML5新增,只有 Firefox 和 Chrome 支持 download 屬性。
download 屬性規(guī)定被下載的超鏈接目標(biāo)。
在 <a> 標(biāo)簽中必須設(shè)置 href 屬性。
該屬性也可以設(shè)置一個值來規(guī)定下載文件的名稱。所允許的值沒有限制,瀏覽器將自動檢測正確的文件擴(kuò)展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。

<a href="/images/myw3schoolimage.jpg" download="w3logo">
2.5、media

media 屬性規(guī)定目標(biāo) URL 是為什么類型的媒介/設(shè)備進(jìn)行優(yōu)化的。
該屬性用于規(guī)定目標(biāo) URL 是為特殊設(shè)備(比如 iPhone)、語音或打印媒介設(shè)計的。
該屬性可接受多個值。
只能在 href 屬性存在時使用。

<a href="att_a_media.asp?output=print" media="print and (resolution:300dpi)">
打開用于打印的 media 屬性頁面
</a>
3、a標(biāo)簽的運(yùn)行機(jī)制
    1、a標(biāo)簽的href屬性值如果是以http開頭的,那么瀏覽器會馬上啟動http解釋器去解釋
該網(wǎng)址,首先會在本地機(jī)器去找一個hosts文件, 如果在hosts文件上該域名沒有對應(yīng)的主機(jī)
,那么瀏覽器就去到對應(yīng)的dns服務(wù)器去尋找該域名對應(yīng)的主機(jī)號。如果找到了對應(yīng)的主機(jī),
那么該請求就會發(fā)給對應(yīng)的主機(jī)。
    2. 如果a標(biāo)簽的href屬性值沒有以任何協(xié)議開頭,那么瀏覽就會啟動file協(xié)議解釋器去解
釋該資源路徑。
    3. 如果a標(biāo)簽的href屬性值并不是以http開始,而且其他 的一些協(xié)議,那么這時候?yàn)g覽
器就回去到我們本地的注冊表中去查找是否有處理這種協(xié)議 的應(yīng)用程序,如果有,那么馬上啟
動該應(yīng)用程序處理該協(xié)議。
4、a標(biāo)簽常用的協(xié)議
1、file: 
  file協(xié)議(文件協(xié)議)這種協(xié)議主要是用于搜索本地機(jī)器的資源文件的。
  格式:file:\\\f:\美女\1.jpg 
    
2、郵件的協(xié)議: mailTo 

3、迅雷的協(xié)議: thunder
5、超鏈接標(biāo)簽的樣式問題——a標(biāo)簽的偽類選擇器的書寫順序
5.1、a標(biāo)簽的多重狀態(tài)

對于<a>元素,我們可以用“多重人格”來形容它。對于該標(biāo)簽,它一共有五種狀態(tài)::link, :visited, :hover, :focus, :active.
“:link”可以用于聲明未訪問狀態(tài)鏈接的樣式;
“:visited”可以用于聲明已經(jīng)訪問鏈接的樣式;
“:hover”可以用于聲明鼠標(biāo)懸停在鏈接上的樣式;
“:focus”可以用于聲明瀏覽器焦點(diǎn)懸停在鏈接上的樣式(通過鍵盤選擇鏈接);
“:active”可以用于聲明瀏覽器點(diǎn)擊鏈接的樣式。
注意:冒號前后不要出現(xiàn)空格
一般a:hover和a:visited鏈接的狀態(tài)(顏色、下劃線等)應(yīng)該是相同的。
link、visited、active分別對應(yīng)body元素的link、vlink、alink這三個屬性。
四個“狀態(tài)”的先后過程是:a:link ->a:hover ->a:active ->a:visited。另外,a:active不能設(shè)置有無下劃線(總是有的)。

5.2、鏈接(a標(biāo)簽狀態(tài))定義的順序

沒有規(guī)矩不成方圓,雖然鏈接定義寫好了,但它也是有規(guī)則的,如果這四項的書寫順序稍有差錯,鏈接的效果可能就沒有了,所以每次定義鏈接樣式時務(wù)必確認(rèn)定義的順序,link--visited--hover-active,也就是我們常說到的LoVe HAte原則(大寫字母就是它們的首字母)。
老外總結(jié)了一個便于記憶的“愛恨原則”(LoVe/HAte),即四種偽類的首字母:LVHA。定義A鏈接樣式的正確的順序:a:link、a:visited、a:hover、a:active。若沒有按照這樣的順序的話,有的狀態(tài)的樣式會被放置在后面的樣式覆蓋而導(dǎo)致像沒有觸發(fā)一樣沒有效果,如:如果hover放在visited之后,則就算我放上去變色了,但是同時這個標(biāo)簽也具有visited狀態(tài)以及其的效果,會覆蓋了hover的效果。
為了符合瀏覽器解釋CSS遵循的"就近原則"。我們在定義CSS中,宜將最一般的條件放在最上面,并依次向下,最下面放最特殊的。
在W3C規(guī)范中,也規(guī)定了鏈接的聲明順序:
在 CSS 定義中,a:hover 必須被置于 a:link 和 a:visited 之后,才是有效的。
在 CSS 定義中,a:active 必須被置于 a:hover 之后,才是有效的。

a:link、a:visited、a:hover、a:active
參考網(wǎng)址

http://blog.csdn.net/linwh8/article/details/52491645
http://www.jb51.net/css/182670.html
http://www.nowamagic.net/csszone/css_IntroduceToTagA.php

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,533評論 1 41
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,868評論 1 45
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,189評論 1 92
  • 1. 標(biāo)簽 標(biāo)簽的功能: 標(biāo)簽定義超鏈接,用于從一張頁面鏈接到另一張頁面。 元素最重要的屬性是href屬性,它指示...
    聞金聽鳳閱讀 1,382評論 0 0
  • 最近在看html基礎(chǔ),好吧,寫點(diǎn)筆記,比較low見諒,反正我自己看懂就行了 CSS基礎(chǔ) 1、css簡介 casca...
    小龍是只貓閱讀 644評論 0 1

友情鏈接更多精彩內(nèi)容