大綱

1、什麼是<a>标簽

2、<a>标簽的幾個重要屬性

3、a标簽的運行機制

4、a标簽常用的協議

5、超鍊接标簽的樣式問題——a标簽的僞類選擇器的書寫順序

1、什麼是<a>标簽

<a> 标簽定義超鍊接，用于從一張頁面鍊接到另一張頁面。

<a> 元素最重要的屬性是 href 屬性，它指示鍊接的目标。

2、<a>标簽的幾個重要屬性

2.1、href

規定鍊接指向的頁面的 URL。

2.2、target

規定在何處打開鍊接文檔。

a:自定義打開錨點

target的特殊值：有 4 個保留的目标名稱用作特殊的文檔重定向操作：

2.3、name

規定錨的名稱。（Html5不支持）

2.4、downloadHTML5新增

HTML5新增，隻有 Firefox 和 Chrome 支持 download 屬性。

download 屬性規定被下載的超鍊接目标。

在 <a> 标簽中必須設置 href 屬性。

該屬性也可以設置一個值來規定下載文件的名稱。所允許的值沒有限制，浏覽器将自動檢測正确的文件擴展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。

1

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

2.5、media

media 屬性規定目标 URL 是為什麼類型的媒介/設備進行優化的。

該屬性用于規定目标 URL 是為特殊設備（比如 iPhone）、語音或打印媒介設計的。

該屬性可接受多個值。

隻能在 href 屬性存在時使用。

3、a标簽的運行機制

4、a标簽常用的協議

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 之後，才是有效的。

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最适合2019年學習的web前端學習幹貨，各種框架都有整理，送給每一位前端小夥伴，想要獲取的可以關注我的頭條号并在後台私信我：前端，即可免費獲取。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部