Html中a标签用法总结:创建email,电话,描点链接等。以及防止链接被搜索引擎收录

本文介绍了HTML中a标签的多种用途,包括创建锚点链接实现页面内部跳转,创建mailto链接启动邮件客户端,利用tel链接在手机上直接拨打电话,以及设置文件下载。同时,还讲解了如何通过rel属性的nofollow和external来防止链接被搜索引擎收录。
摘要由CSDN通过智能技术生成

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>
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在 JavaScript ,可以使用正则表达式来匹配字符串链接地址,然后使用 replace() 方法来替换成 a 标签。 例如: ``` var str = "这是一个链接地址:https://www.example.com"; var pattern = /(https?:\/\/[^\s]+)/g; var replacement = '<a href="$1">$1</a>'; str = str.replace(pattern, replacement); console.log(str); ``` 输出结果为: "这是一个链接地址:<a href="https://www.example.com">https://www.example.com</a>" ### 回答2: 在JavaScript,我们可以使用正则表达式和字符串方法来获取字符串链接地址并将其替换为a标签。 首先,我们可以使用正则表达式来匹配字符串链接地址。例如,我们可以使用以下正则表达式来匹配"http://"或"https://"开头的链接地址: ```javascript const regex = /(http:\/\/|https:\/\/)\S+/g; ``` 然后,我们可以使用字符串的`replace()`方法来替换匹配到的链接地址为a标签。我们可以传入一个回调函数作为`replace()`方法的第二个参数,该回调函数的参数为被匹配到的链接地址,我们可以在回调函数进行替换操作。例如: ```javascript const str = "这是一个包含链接地址的字符串,例如http://www.example.com和https://www.example.com"; const result = str.replace(regex, (match) => { return '<a href="' + match + '">' + match + '</a>'; }); console.log(result); ``` 输出结果为: ``` 这是一个包含链接地址的字符串,例如<a href="http://www.example.com">http://www.example.com</a>和<a href="https://www.example.com">https://www.example.com</a> ``` 这样,我们就可以成功获取字符串链接地址并将其替换为a标签了。 ### 回答3: JavaScript可以使用正则表达式和字符串的replace()方法来获取字符串链接地址并替换成a标签。具体步骤如下: 1. 使用正则表达式来匹配字符串链接地址。可使用以下正则表达式进行匹配:/((http|https|ftp):\/\/[\w\-]+(\.[\w\-]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-@?^=%&/~\+#])?)/gi。该正则表达式匹配http、https、ftp开头的链接地址,并允许一些特殊字符和路径参数。 2. 使用字符串的replace()方法来替换匹配到的链接地址。可以传入一个替换函数作为replace()方法的第二个参数。该替换函数会被调用一次传入匹配到的链接地址,并返回替换后的字符串。 示例代码如下: ```javascript let str = '这是一个包含链接地址的字符串,地址为http://www.example.com,还有一个https://www.example.com'; let regex = /((http|https|ftp):\/\/[\w\-]+(\.[\w\-]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-@?^=%&/~\+#])?)/gi; let result = str.replace(regex, (match) => { return '<a href="' + match + '">' + match + '</a>'; }); console.log(result); ``` 运行以上代码,输出结果为: 这是一个包含链接地址的字符串,地址为<a href="http://www.example.com">http://www.example.com</a>,还有一个<a href="https://www.example.com">https://www.example.com</a> 通过以上步骤,我们可以在字符串获取并替换链接地址为a标签
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值