咨询电话:
15628812133
22
2023/12

a标签的几个用法

发布时间:2023-12-22 17:19:49
发布者:巴托尼亚菲奥娜冠军勇士
浏览量:
0

    众所周知,a标签是用来定义超链接,我们最常用的就是a标签href属性,如果没有设置这个属性,他就会和最普通的行内元素一样 span 一样,a标签的这些作用还有你不知道的吗?

1.锚链接

a标签的几个用法 (1)

    在本页面中可以直接使用#id名来使页面滚动到id所处位置,需要从其他页面跳转时,需要在href后加上#id名即可在跳转页面是滚动到id位置,这个滚动是没有动画的,如果需要动画效果可以加上以下的代码:

$('.xxHead a').click(function () {
        $(this).addClass("on").siblings().removeClass("on")
        $("html, body").animate({
                scrollTop: $($(this).attr("href")).offset().top + "px"
        }, 1000);
        return false;
    })

2.打电话发邮箱

    苹果手机浏览器会自动识别网页中手机号码,并将其标记为黑色,造成页面的不美观。

a标签的几个用法 (2)

只需要在头部加上:

<meta name="format-detection" content="telephone=no" />

    但是加上这个会使号码失去拨号的功能,于是我们可以使用以下代码为浏览器添加拨号功能

<a href="tel:+13245678910">联系电话:12345678</a> 打电话:tel标签

    另外 a标签还能用来发邮箱

<a href="mailto:123456789@qq.com">Send email</a> 发邮箱: mailto链接

3.下载

    部分网页中需要下载,我们只需要设置download属性规定内容就是下的内容的属性名

<a href="文件地址" download="文件名">点击下载</a>

4.规定跳转方式

    这属于基操 target属性_blank规定新窗口打开,_self规定本窗口打开

<a href="index.html" target="_self">此窗口打开</a>

5.阻止搜索引擎跟随

    如果A网页上有一个链接指向B网页,但A网页给这个链接加上了 rel=”nofollow” 标注,则搜索引擎不把A网页计算入B网页的反向链接。

返回列表