html中a標(biāo)簽的知識(shí)點(diǎn)有哪些

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

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

a標(biāo)簽

定義和用法

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

此處列舉幾個(gè)相對常用的屬性

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

具體用法：

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

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

    <a href="#app">跳轉(zhuǎn)</a>
    <p id="app">錨點(diǎn)</p>

    <a href="#app">跳轉(zhuǎn)</a>
    <a href="" name="app">跳轉(zhuǎn)【這種方式只能用a標(biāo)簽的name屬性定義才生效】</a>

感覺HTML5以前，a標(biāo)簽主要是用來做錨點(diǎn)跳轉(zhuǎn)、鏈接跳轉(zhuǎn)和按鈕點(diǎn)擊事件，HTML5出現(xiàn)之后，a標(biāo)簽更多的用來做文件下載功能了

// 下載，href指示目標(biāo)地址，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標(biāo)簽中有四個(gè)偽類，分別是：

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

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

  3. hover：設(shè)置對象在其鼠標(biāo)懸停時(shí)的樣式表屬性

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

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

那么，為什么一定是這個(gè)順序，才會(huì)使偽類樣式按照我們心中所想而生效呢？這就涉及到CSS樣式的優(yōu)先級(jí)問題了。可悲催的是，偽類的特殊性（應(yīng)用優(yōu)先級(jí)）是同樣的，所以，后出現(xiàn)的偽類會(huì)覆蓋先出現(xiàn)的偽類（同時(shí)激活）。

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

舉個(gè)簡單的例子

// 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>

當(dāng)我點(diǎn)擊了test1之后，此時(shí)頁面上一個(gè)被點(diǎn)擊過的按鈕，一個(gè)沒被點(diǎn)擊過的按鈕，按照預(yù)期，【test1】渲染:visited會(huì)變成黃色，而【博客園】渲染:link顯示紅色，嗯，是這樣顯示沒錯(cuò)

但是有一個(gè)問題，鼠標(biāo)放至按鈕上時(shí)，會(huì)渲染:hover偽類將文字變成綠色，點(diǎn)擊了按鈕test1時(shí)，其實(shí)是觸發(fā)了active狀態(tài)的，但是，并沒有渲染:active偽類將文字變成黑色，并且，點(diǎn)擊過后，不管如何hover，都不會(huì)再變成綠色了。實(shí)際上，頁面初始化的時(shí)候，兩個(gè)a標(biāo)簽?zāi)壳暗臓顟B(tài)都是:link狀態(tài)，所以均顯示紅色，當(dāng)鼠標(biāo)放至【test1】的時(shí)候，該按鈕處于:hover狀態(tài)，顯示綠色，點(diǎn)擊按鈕不放時(shí)觸發(fā):active，顯示了黑色，放開以后，按鈕變成:visited狀態(tài)，顯示黃色，此時(shí)，不管再想觸發(fā):hover還是:active，均會(huì)被最后的:visited樣式給覆蓋掉，:visited一旦被觸發(fā)，除非刪除歷史記錄，否則，會(huì)一直存在。

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

但是有一點(diǎn)要謹(jǐn)記：

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

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

新聞標(biāo)題：html中a標(biāo)簽的知識(shí)點(diǎn)有哪些
文章分享：http://bm7419.com/article26/ijpojg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、網(wǎng)頁設(shè)計(jì)公司、品牌網(wǎng)站制作、軟件開發(fā)、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站策劃

廣告

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

微信小程序開發(fā)