大家應該都知道,a標簽主要是轉跳鏈接,接下來,讓我為大家介紹一下a標簽的使用!
主要的作用:從當前頁面進行跳轉
標簽名 | 標簽語義 | 常用屬性 | 單/雙標簽 |
---|---|---|---|
a | 超鏈接 | href:要跳轉的具體位置 target:跳轉時如何打開頁面,常用值如下: _self:在本頁簽中打開 blank:在新頁簽中打開 | 雙 |
一、跳轉頁面
代碼介紹:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body><!-- a標簽的簡單寫法 --><!-- 轉跳頁面 用百度的鏈接為大家演示一下 --><a href="http://baidu.com">點擊跳轉百度</a><!-- 使用target 屬性值為_self --><a href="http://baidu.com" target="_self">點擊跳轉百度_self</a><!-- 使用target 屬性值為_blank --><a href="http://baidu.com" target="_blank">點擊跳轉百度_blank</a>
</body>
</html>
來看下面的GIF動圖看看區別在哪
這是區別所在
注意點:
1.代碼中的多個空格、多個回車,都會被瀏覽器解析成一個空格!
2.雖然 a 是行內元素,但 a 元素可以包裹除它自身外的任何元素!
擴展一個知識
我們發現我們點完鏈接,鏈接變了顏色,我們可以變回原來的顏色嗎?
就拿我的雙核瀏覽器舉例:
第一步
第二步
第三步
來看看我們a標簽
二、跳轉到錨點
什么是錨點?
網頁中的一個標記點
我拿代碼為大家演示一下,如果大家復制的時候,千萬要注意img標簽的路徑,可以拿自己有的圖片代替
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body><a href="#test">我們要看22222的圖片</a><a href="#test1">我們要看33333的圖片</a><p>11111111111111111111</p><img src="./1.webp" alt=""><!-- 第一種方法 使用name --><a name="test"></a><p>22222222222222222222</p><img src="./2.webp" alt=""><!-- 第二種方法 使用id --><a id="test1"></a><p>33333333333333333333</p><img src="./1.webp" alt=""><a href=""></a><p>44444444444444444444</p><img src="./2.webp" alt=""><br><!-- 回到頂部 --><a href="#">回到頂部</a><br><!-- 刷新頁面 --><a href="">刷新頁面</a>
</body>
</html>
看下面的GIF
注意點:
1.具有 href 屬性的 a 標簽是超鏈接,具有 name 屬性的 a 標簽是錨點
2.name 和 id 都是區分大小寫的,且 id 最好別是數字開頭
<!-- 轉跳到test1 --><a href="#test1">去test1錨點</a><!-- 跳到本頁面頂部 --><a href="#">轉跳到頂部</a><!-- 跳轉到其他頁面錨點 --><a href="index.html#test1">去index.html頁面的test1錨點</a><!-- 刷新本頁面 --><a href="">刷新頁面</a><!-- 執行一段js,如果還不知道執行什么,可以留空,javascript:; --><a href="javascript:alert(1);">點我彈窗</a>
三、喚起指定應用
通過 a 標簽,可以喚起設備應用程序
在手機上使用效果更好
<!-- 喚起設備撥號 --><a href="tel:10086">電話聯系</a><!-- 喚起設備發送郵件 --><a href="mailto:10086@qq.com">郵件聯系</a><!-- 喚起設備發送短信 --><a href="sms:10086">短信聯系</a>
感謝大家的閱讀,如有不對的地方,可以向我提出,感謝大家!