html中a標簽的知識點有哪些

這篇文章主要介紹“html中a標簽的知識點有哪些”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“html中a標簽的知識點有哪些”文章能幫助大家解決問題。

a標簽

定義和用法

a標簽定義超鏈接（用于從一張頁面鏈接到另一張頁面）或錨（用于從頁面當前位置跳轉至指定錨點），它最重要的屬性是 href 屬性，指示鏈接的目標。所有瀏覽器都支持 a 標簽。

此處列舉幾個相對常用的屬性

具體用法：

<a href="">空鏈接，當前頁面跳轉，刷新頁面</a>
    <a href="//www.baidu.com" target="_blank">打開新窗口，跳轉到百度</a>
    <a href="javascript:void(0)" >不跳轉，網頁上常用于button作用的a標簽設置點擊事件，阻止跳轉</a>
    <a href="mailto:123@qq.com">發送郵件【mailto：會自動檢測本機系統是否安裝郵箱，如果有就會自動打開郵箱，沒有則會提示用戶選擇郵箱或者沒提示】</a>
    <a href="tel:123456789">一鍵撥打電話</a>
    <a href="sms:123456789">一鍵發送短信</a>

    <a href="#">空錨點，回到最頂端，不刷新頁面</a>

    <a href="#app">跳轉</a>
    <p id="app">錨點</p>

    <a href="#app">跳轉</a>
    <a href="" name="app">跳轉【這種方式只能用a標簽的name屬性定義才生效】</a>

感覺HTML5以前，a標簽主要是用來做錨點跳轉、鏈接跳轉和按鈕點擊事件，HTML5出現之后，a標簽更多的用來做文件下載功能了

// 下載，href指示目標地址，download重命名下載文件
    <a href="//www.w3school.com.cn/i/w3school_logo_white.gif" download="w3logo">
        <img border="0" src="//www.w3school.com.cn/i/w3school_logo_white.gif" alt="W3School">
    </a>

偽類狀態

a標簽中有四個偽類，分別是：

1. link：設置a對象在未被訪問前的樣式表屬性

2. visited：設置a對象在其鏈接地址已被訪問過時的樣式表屬性

3. hover：設置對象在其鼠標懸停時的樣式表屬性

4. active：設置對象在被用戶激活（在鼠標點擊與釋放之間發生的事件）時的樣式表屬性

通過寫入偽類的樣式表，可以修改a標簽在各種狀態下的顯示形態，為了產生預期的效果，在 CSS 定義中，a:hover 必須位于 a:link 和 a:visited 之后，a:active 必須位于 a:hover 之后，所以a標簽偽類樣式重寫的順序應該是：a:link、a:visited、a:hover、a:active

那么，為什么一定是這個順序，才會使偽類樣式按照我們心中所想而生效呢？這就涉及到CSS樣式的優先級問題了。可悲催的是，偽類的特殊性（應用優先級）是同樣的，所以，后出現的偽類會覆蓋先出現的偽類（同時激活）。

假設我們不按這個順序書寫樣式，我們按照LHAV的順序來寫會發生什么呢？

舉個簡單的例子

// style
    <style>
        a:link {
            color: red;
            text-decoration: none;
        }
        a:hover {
            color: green;
            text-decoration: dashed;
        }
        a:visited {
            color: yellow;
        }
        a:active {
            color: black;
            text-decoration: dotted;
        }
    </style>

    // html
    <a href="https://www.baidu.com">test1</a>
    <a href="https://www.cnblogs.com/moonLightcy/">博客園</a>

當我點擊了test1之后，此時頁面上一個被點擊過的按鈕，一個沒被點擊過的按鈕，按照預期，【test1】渲染:visited會變成黃色，而【博客園】渲染:link顯示紅色，嗯，是這樣顯示沒錯

但是有一個問題，鼠標放至按鈕上時，會渲染:hover偽類將文字變成綠色，點擊了按鈕test1時，其實是觸發了active狀態的，但是，并沒有渲染:active偽類將文字變成黑色，并且，點擊過后，不管如何hover，都不會再變成綠色了。實際上，頁面初始化的時候，兩個a標簽目前的狀態都是:link狀態，所以均顯示紅色，當鼠標放至【test1】的時候，該按鈕處于:hover狀態，顯示綠色，點擊按鈕不放時觸發:active，顯示了黑色，放開以后，按鈕變成:visited狀態，顯示黃色，此時，不管再想觸發:hover還是:active，均會被最后的:visited樣式給覆蓋掉，:visited一旦被觸發，除非刪除歷史記錄，否則，會一直存在。

這也就是為什么，a標簽偽類自定義樣式的話，需要用這種順序來書寫了，顯而易見，:link和:visited都是長期狀態，而:active和:hover是短期狀態，用開關的說法來描述的話，就是：:link本身是一個打開的開關，且關閉后不能再打開，:visited本身是一個關閉的開關，且打開后無法再關閉，:active和:hover本身是一個關閉的開關，開關狀態由鼠標決定。加上在CSS樣式的優先級中偽類的應用優先級是同樣的，那必然是長期狀態在前，短期狀態在后，所以說，雖然大家長期被熏陶的是使用LVHA順序來書寫樣式，我估計只是為了方便記憶而已：LoVe，HAte。畢竟，只要遵循了長期狀態在前，短期狀態在后這個原則，:link和:visited誰在前，誰在后問題并不大，它們的狀態不可能同時出現，:active和:hover誰在前，誰在后也不影響它們各自的樣式渲染效果。你也可以假裝一下：LV比較貴，HA不知道是個啥。

但是有一點要謹記：

a標簽href=""的時候，默認狀態時:visited狀態；a標簽沒有href屬性的時候，默認狀態時:active狀態，這兩種情況都不影響:active和:hover的觸發，但是永遠不會觸發:link

關于“html中a標簽的知識點有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。