a标签可以用来创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。 是我们常用的一个标签之一,今天就讲讲如何使用a来创建email,电话,描点链接等。以及防止链接被搜索引擎收录。
a锚点链接
锚点可以在同一页面的不同位置间跳转,其实就是在元素间跳转, 常用的场景就是,页面很长,让用户方便在页面不同部分间跳转 建立锚点目标,只需要给目标元素增加id或者name即可。当我们点击a标签的时候,页面就能自动定位到含有name="test"的位置,例如:
<div id="test" name="test"></div>
<!--
其它代码
-->
<a href="#test"></a>
创建email链接
这样可以将用户的电子邮件程序打开,让他们发送新邮件,它是通过使用一个mailto链接完成的。例如:
<a href="mailto:522607023@qq.com">Send email</a>
创建Tel链接
当页面在手机浏览器器中运行的时候,可以调用手机的拨号tel,来实现网页中点击就能拨打电话的能,例如:
<a href="tel:+12345678">联系电话:12345678</a>
a链接实现文件下载
在我们写项目的时候经常会遇到上传下载什么的,如果想不通过后台直接在html中下载文件的话,可以把文件路径给a标签的href属性即可。注意一点的是,如果文件是txt,png,jpg等格式,浏览器会直接打开,而不触发下载功能,这时需要我们给a标签添加一个“download”属性,例如:
<a href="文件地址" download="文件名.txt">点击下载</a>
防止a链接被搜索引擎收录
当我们做网站的时候,经常会遇到部分连接里的内容不想让Google或百度等搜索引擎抓取,这时候就需要使用a标签下rel属性nofollow和external的结合,来防止连接被收录。 对于外链或某些无意义链接我们就这样使用到,例如 :
<a href=”http://www.****.com” rel=”external nofollow” target=”_blank”>连接</a>