众所周知,a标签是用来定义超链接,我们最常用的就是a标签href属性,如果没有设置这个属性,他就会和最普通的行内元素一样 span 一样,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.打电话发邮箱
苹果手机浏览器会自动识别网页中手机号码,并将其标记为黑色,造成页面的不美观。
只需要在头部加上:
<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网页的反向链接。