詳解HTML的a標簽（超鏈接標簽）
原文
簡書原文：https://www.jianshu.com/p/d6a2499db73b
大綱
1、什麽是<a>標簽
2、<a>標簽的幾個重要屬性
3、a標簽的運行機制
4、a標簽常用的協議
5、超鏈接標簽的樣式問題——a標簽的偽類選擇器的書寫順序
1、什麽是<a>標簽
<a> 標簽定義超鏈接，用於從一張頁面鏈接到另一張頁面。
<a> 元素最重要的屬性是 href 屬性，它指示鏈接的目標。
2、<a>標簽的幾個重要屬性
2.1、href
規定鏈接指向的頁面的 URL。
<a href="http://www.w3school.com.cn">W3School</a>
2.2、target
規定在何處打開鏈接文檔。
a:自定義打開錨點
<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 個保留的目標名稱用作特殊的文檔重定向操作：
_self：這個目標的值對所有沒有指定目標的 <a> 標簽是默認目標，它使得目標文檔載入
並顯示在相同的框架或者窗口中作為源文檔。這個目標是多余且不必要的，除非和文檔標題
<base> 標簽中的 target 屬性一起使用。
_parent：這個目標使得文檔載入父窗口或者包含來超鏈接引用的框架的框架集。如果這個
引用是在窗口或者在頂級框架中，那麽它與目標 _self 等效。
_top：這個目標使得文檔載入包含這個超鏈接的窗口，用 _top 目標將會清除所有被包含
的框架並將文檔載入整個瀏覽器窗口。
_blank：瀏覽器總在一個新打開、未命名的窗口中載入目標文檔。
提示：這些 target 的所有 4 個值都以下劃線開始。任何其他用一個下劃線作為開頭的
窗口或者目標都會被瀏覽器忽略，因此，不要將下劃線作為文檔中定義的任何框架 name 或
id 的第一個字符。
2.3、name
規定錨的名稱。（Html5不支持）
<html> <body> <h1>HTML 教程目錄</h1> <ul> <li><a href="#C1">第一章</a></li> </ul> <h2><a name="C1">第一章</a></h2> <p>本章講解的內容是 ... ...</p> </body> </html>
2.4、downloadHTML5新增
HTML5新增，只有 Firefox 和 Chrome 支持 download 屬性。
download 屬性規定被下載的超鏈接目標。
在 <a> 標簽中必須設置 href 屬性。
該屬性也可以設置一個值來規定下載文件的名稱。所允許的值沒有限制，瀏覽器將自動檢測正確的文件擴展名並添加到文件 (.img, .pdf, .txt, .html, 等等)。
<a href="/images/myw3schoolimage.jpg" download="w3logo">
2.5、media
media 屬性規定目標 URL 是為什麽類型的媒介/設備進行優化的。
該屬性用於規定目標 URL 是為特殊設備（比如 iPhone）、語音或打印媒介設計的。
該屬性可接受多個值。
只能在 href 屬性存在時使用。
<a href="att_a_media.asp?output=print" media="print and (resolution:300dpi)"> 打開用於打印的 media 屬性頁面 </a>
3、a標簽的運行機制
1、a標簽的href屬性值如果是以http開頭的，那麽瀏覽器會馬上啟動http解釋器去解釋
該網址，首先會在本地機器去找一個hosts文件， 如果在hosts文件上該域名沒有對應的主機
，那麽瀏覽器就去到對應的dns服務器去尋找該域名對應的主機號。如果找到了對應的主機，
那麽該請求就會發給對應的主機。
2. 如果a標簽的href屬性值沒有以任何協議開頭，那麽瀏覽就會啟動file協議解釋器去解
釋該資源路徑。
3. 如果a標簽的href屬性值並不是以http開始，而且其他 的一些協議，那麽這時候瀏覽
器就回去到我們本地的註冊表中去查找是否有處理這種協議 的應用程序，如果有，那麽馬上啟
動該應用程序處理該協議。
4、a標簽常用的協議
1、file:
file協議（文件協議）這種協議主要是用於搜索本地機器的資源文件的。
格式：file:\\\f:\美女\1.jpg
2、郵件的協議： mailTo
3、迅雷的協議： thunder
5、超鏈接標簽的樣式問題——a標簽的偽類選擇器的書寫順序
5.1、a標簽的多重狀態
對於<a>元素，我們可以用“多重人格”來形容它。對於該標簽，它一共有五種狀態：:link, :visited, :hover, :focus, :active.
“:link”可以用於聲明未訪問狀態鏈接的樣式；
“:visited”可以用於聲明已經訪問鏈接的樣式；
“:hover”可以用於聲明鼠標懸停在鏈接上的樣式；
“:focus”可以用於聲明瀏覽器焦點懸停在鏈接上的樣式(通過鍵盤選擇鏈接)；
“:active”可以用於聲明瀏覽器點擊鏈接的樣式。
註意：冒號前後不要出現空格
一般a:hover和a:visited鏈接的狀態（顏色、下劃線等）應該是相同的。
link、visited、active分別對應body元素的link、vlink、alink這三個屬性。
四個“狀態”的先後過程是：a:link ->a:hover ->a:active ->a:visited。另外，a:active不能設置有無下劃線（總是有的）。
5.2、鏈接（a標簽狀態）定義的順序
沒有規矩不成方圓，雖然鏈接定義寫好了，但它也是有規則的，如果這四項的書寫順序稍有差錯，鏈接的效果可能就沒有了，所以每次定義鏈接樣式時務必確認定義的順序，link--visited--hover-active，也就是我們常說到的LoVe HAte原則（大寫字母就是它們的首字母）。
老外總結了一個便於記憶的“愛恨原則”（LoVe/HAte），即四種偽類的首字母:LVHA。定義A鏈接樣式的正確的順序：a:link、a:visited、a:hover、a:active。若沒有按照這樣的順序的話，有的狀態的樣式會被放置在後面的樣式覆蓋而導致像沒有觸發一樣沒有效果，如：如果hover放在visited之後，則就算我放上去變色了，但是同時這個標簽也具有visited狀態以及其的效果，會覆蓋了hover的效果。
為了符合瀏覽器解釋CSS遵循的"就近原則"。我們在定義CSS中，宜將最一般的條件放在最上面，並依次向下，最下面放最特殊的。
在W3C規範中，也規定了鏈接的聲明順序：
在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 之後，才是有效的。
在 CSS 定義中，a:active 必須被置於 a:hover 之後，才是有效的。
a:link、a:visited、a:hover、a:active
參考網址
http://blog.csdn.net/linwh8/article/details/52491645
http://www.jb51.net/css/182670.html
http://www.nowamagic.net/csszone/css_IntroduceToTagA.php
詳解HTML的a標簽（超鏈接標簽）