a标签 rel=“external nofollow“ 用法

NoFollow 是 Google 曾经提出的一个a新标签,目的是减少垃圾留言(例如米扑博客的留言:https://blog.mimvp.com/about#comments),解释当前页面与此留言链接指向页面之间的关系。使用了此标签表明链接与网站作者无关,也就是说搜索引擎不会用这个链接计算网站的 PR 值。很多博客程序都会自动在评论链接中加上 nofollow 标签。现在主流的 Blog 程序,如 WordPress 和 MovableType 均默认为其留言与 trackback 中的链接自动添加 nofollow 属性。这样可以使 Spammer 意图通过这种方式提高网站流行度的目标落空。

米扑博客原文:a标签 rel=“external nofollow“ 用法

rel 有很多的属性值,比如 next、previous、chapter、section 等,本文不做解说,自行百度科普。

比较常见的就是【rel="nofollow"】和【rel="external nofollow"】这两种属性值的应用了。

 

网页源码里,a标签如下:

<a ref="external nofollow" target="_blank" href="https://blog.mimvp.com" title="i love mimvp.com">米扑博客</a>

解释说明:

nofollow 、external nofollow:告诉搜索引擎,不要将链接计入权重中,他是告诉一些非本站的链接、不想传递权重,例如网页里的统计代码、备案号链接、供用户查询链接等

external :告诉搜素引擎,这是非本站的链接,这个作用相当于target=“_blank”

external 和 nofollow 这两个属性的大致可以解释为 “这个链接非本站链接,不要爬取也不要传递权重”

 

 

ref="external nofollow"

ref="nofollow" 的作用,它是告诉搜索引擎,不要将该链接计入权重。

多数情况下,可以将一些不想传递权重的链接进行nofllow处理;

例如一些非本站的链接,不想传递权重,但是又需要加在页面中的像统计代码、备案号链接、供用户查询的链接等等。

 

除了 ref="nofollow" 还有两种链接属性形式,一种是 ref="external",另一种是 ref="external nofollow"。这两种分别代表什么意思呢?又有何区别呢?

rel="external"

此属性的意思是告诉搜索引擎,这个链接不是本站链接,其实作用相当于target=‘_blank’。

为什么要这样写呢?因为有些网站因为是采用严格的DOCTYPE声明的,如果你在网页源码中的第一行看到:在这种情况下target="_blank"会失效,因此采用rel="external"这个参数来替代。

 

rel="external nofollow"

上面已经说过rel=’nofollow’ 和 rel=’external’ 两种属性的所代表的意思了。这个属性基本上是相当于将两种属性结合起来,大致可以解释为 “这个链接非本站链接,不要爬取也不要传递权重”。因此在SEO的角度来说,是一种绝对隔绝处理的方法,可以有效减少蜘蛛爬行的流失。

 

rel="nofollow noopener noreferrer"

超链接 target="_blank" 要增加 rel="nofollow noopener noreferrer" 来堵住钓鱼安全漏洞。如果你在链接上使用 target="_blank"属性,并且不加上rel="noopener"属性,那么你就让用户暴露在一个非常简单的钓鱼攻击之下。

为了告知来自于不受保护的站点的用户,我们运行一个利用了这个缺陷的脚本。

1

2

3

if (window.opener) {

    window.opener.location = "https://mimvp.com/fishing?referrer="+document.referrer;

}

我相信绝大多数站点都没有恰当地处理这个问题,为了限制 window.opener的访问行为,原始页面需要在每个使用了target="_blank"的链接中加上一个rel="noopener"属性。

然而,火狐不支持这个属性值,所以实际上你要用 rel="noopener noreferrer"来完整覆盖。

 

target="_blank"属性特别提示

当你浏览一个页面点击一个a标签连接 <a href="mimvp.com" target="_blank"> 跳转到另一个页面时,

在新打开的页面(mimvp)中可以通过 window.opener获取到源页面的部分控制权, 即使新打开的页面是跨域的也照样可以(例如 location 就不存在跨域问题)。  

rel=noopener 新特性

<a href="mimvp.com" target="_blank" rel="noopener noreferrer"></a>

在chrome 49+,Opera 36+,打开添加了rel=noopener的链接, window.opener 会为null。

在老的浏览器中,可以使用 rel=noreferrer 禁用HTTP头部的Referer属性,使用下面JavaScript代替target='_blank' 的解决此问题:

1

2

3

var otherWindow = window.open('https://mimvp.com');

otherWindow.opener = null;

otherWindow.location = url;

使用 window.open 打开页面,手动剑opener设置为null。

更多资料,请参考:超链接 target="_blank" 要增加 rel="nofollow me noopener noreferrer" 来堵住钓鱼安全漏洞

<think>好的,我现在需要回答用户关于HTML中a标签的使用方法、属性和示例的问题。首先,我要回忆一下a标签的基本知识,确保自己理解正确。a标签主要用于创建超链接,连接其他页面或资源,这是HTML中非常重要的一个标签。 接下来,用户提到了使用方法和属性。根据记忆,a标签有几个关键属性,比如href、target、download、rel等。我需要详细解释每个属性的作用,并给出示例。例如,href指定链接的URL,target定义如何打开链接,比如在新标签页中打开。还要注意,有些属性可能需要配合其他属性使用,比如download属性通常和href一起使用来指定下载的文件名。 用户还要求提供示例代码。我需要确保示例涵盖不同的使用场景,比如普通链接、锚点跳转、下载链接等。同时,要检查代码的正确性,避免语法错误。比如,锚点链接需要在目标元素设置id属性,下载链接可能需要服务器端配置才能正确工作。 另外,用户提到的引用需要自然融入回答中。根据提供的引用资料,引用[1]提到a标签是文本级标签,可以包含伪类,并且不能包裹p标签。这需要在注意事项部分强调,避免用户错误嵌套标签。引用[2]关于z-index的内容可能与此问题关联不大,但如果有涉及层叠上下文的场景,可能需要提及,但这里可能不需要。 在结构上,应该分点说明属性和用法,每个属性单独列出,示例代码用代码块展示。注意事项部分需要提醒用户常见的错误,比如嵌套问题和伪类的使用。最后,生成的相关问题需要与a标签相关,帮助用户进一步学习,比如属性区别、新窗口打开的方法、锚点使用和下载功能实现。 需要检查是否有遗漏的重要属性,比如rel属性中的noreferrer、noopener等安全相关属性,或者hreflang、type等较少用到的属性。但为了保持回答的简洁性,可能只需提到常用属性,高级属性可以放在相关问题中。 最后,确保回答符合系统级指令,使用正确的中文表达,数学公式(如果有的话)用$...$格式,但这里可能不需要。独立公式也不涉及,所以主要检查代码格式和引用标识是否正确添加。</think>### HTML中<a>标签的使用方法、属性及示例 #### 一、基本语法与核心属性 <a>标签(超链接标签)用于定义超链接,允许用户跳转到其他页面或页面内的特定位置。其基本语法为: ```html <a href="URL">链接文本</a> ``` **主要属性:** 1. **`href`** - 功能:指定链接目标的URL,可以是绝对路径、相对路径、锚点或协议(如`mailto:`)。 - 示例: ```html <a href="https://www.example.com">访问示例网站</a> ``` 2. **`target`** - 功能:定义链接打开方式,常用值包括: - `_self`(默认,当前窗口打开) - `_blank`(新标签页打开) - `_parent`/`_top`(框架页面中使用) - 示例: ```html <a href="page.html" target="_blank">在新标签页打开</a> ``` 3. **`download`** - 功能:强制浏览器下载链接资源而非打开,可指定下载文件名[^1]。 - 示例: ```html <a href="image.jpg" download="my-photo.jpg">下载图片</a> ``` 4. **`rel`** - 功能:定义当前文档与目标资源的关系,如`nofollow`(禁止搜索引擎追踪)、`noopener`(安全防护)等。 - 示例: ```html <a href="external-site.com" rel="nofollow">外部链接</a> ``` --- #### 二、特殊功能示例 1. **锚点跳转** ```html <!-- 定义锚点 --> <a href="#section2">跳转到第二部分</a> <!-- 目标位置 --> <h2 id="section2">第二部分标题</h2> ``` 2. **邮件与电话链接** ```html <a href="mailto:contact@example.com">发送邮件</a> <a href="tel:+1234567890">拨打电话</a> ``` --- #### 三、注意事项 1. **标签嵌套规则** - <a>是**文本级标签**,不能包裹块级标签(如<p>、<div>),但可以被块级标签包裹[^1]。 - ✅ 正确用法: ```html <p><a href="#">段落中的链接</a></p> ``` - ❌ 错误用法: ```html <a href="#"><p>包裹段落</p></a> ``` 2. **伪类样式** - 支持`:link`(未访问)、`:visited`(已访问)、`:hover`(悬停)、`:active`(点击时)四种状态样式: ```css a:link { color: blue; } a:visited { color: purple; } ``` --- #### 四、完整示例 ```html <!DOCTYPE html> <html> <head> <style> a:hover { color: red; } </style> </head> <body> <a href="https://www.example.com" target="_blank">示例网站(新标签页打开)</a><br> <a href="#contact">跳转到联系信息</a> <div style="height: 1000px"></div> <!-- 模拟长页面 --> <h2 id="contact">联系信息</h2> <a href="mailto:test@example.com">发送邮件</a> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值