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

贊皇ssl適用于網站、小程序/APP、API接口等需要進行數據傳輸應用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯建站的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！

a標簽

定義和用法

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

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

屬性	值	描述
download	fileName	規(guī)定被下載的超鏈接目標名
href	URL	規(guī)定鏈接指向的頁面的 URL
name	section_name	規(guī)定錨的名稱【HTML5 中不支持】
target	_blank【跳轉新頁面】 / _parent【在父窗體中打開鏈接】 / _self【默認，當前頁面跳轉】 / _top【在當前窗體打開鏈接，并替換當前的整個窗體(框架頁)】 / framename【在指定的框架中打開被鏈接文檔，把frame看做內置瀏覽器】	規(guī)定在何處打開鏈接文檔
title	說明	規(guī)定鼠標置于標簽上的顯示說明

具體用法：

<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">發(fā)送郵件【mailto：會自動檢測本機系統是否安裝郵箱，如果有就會自動打開郵箱，沒有則會提示用戶選擇郵箱或者沒提示】</a>
    <a href="tel:123456789">一鍵撥打電話</a>
    <a href="sms:123456789">一鍵發(fā)送短信</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>

偽類狀態(tài)

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

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

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

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

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

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

那么，為什么一定是這個順序，才會使偽類樣式按照我們心中所想而生效呢？這就涉及到CSS樣式的優(yōu)先級問題了?？杀叩氖牵瑐晤惖奶厥庑裕☉脙?yōu)先級）是同樣的，所以，后出現的偽類會覆蓋先出現的偽類（同時激活）。

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

舉個簡單的例子

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

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

但是有一點要謹記：

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

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

新聞標題：html中a標簽的知識點有哪些
文章分享：http://aaarwkj.com/article26/ijpojg.html

成都網站建設公司_創(chuàng)新互聯，為您提供標簽優(yōu)化、網頁設計公司、品牌網站制作、軟件開發(fā)、手機網站建設、網站策劃

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯