a标签中rel的属性定义

HTML/CSS/JavaScript:理解关系标签在网页中的作用

rel = “relationship” 于 关系的意思;
即rel标签用来规范标签的href属性和后面链接所指向的目标文档与当前页面之间的关系

如果没使用href 则不能使用rel属性

用法
alternate 文档的可选版本(例如打印页、翻译页或镜像)。
stylesheet 文档的外部样式表。
start 集合中的第一个文档。
next 集合中的下一个文档。
prev 集合中的前一个文档。
contents 文档目录。
index 文档索引。
glossary 文档中所用字词的术语表或解释。
copyright 包含版权信息的文档。
chapter 文档的章。
section 文档的节。
subsection 文档的子段。
appendix 文档附录。
help 帮助文档。
bookmark 相关文档。
nofollow Google 使用 “nofollow”,用于指定 Google 搜索引擎不要跟踪链接。
licence
tag
friend

a 标签rel 属性用于定义页面与通过链接引用的资源之间的关系,对于辅助技术、搜索引擎和其他解析网页的工具非常有用,其具体作用会因属性值的不同而有所差异 [^2]: - **noopener**:用于浏览器安全防护,防止钓鱼攻击。指示浏览器打开目标文档而不授予目标文档打开源文档的访问权限,打开添加了 `rel="noopener"` 的链接,`window.opener` 会为 `null`。当打开不受信任的链接时,该属性特别有用,可以确保目标文档无法通过 `Window.opener` 属性来篡改源文档,同时仍提供 Referer HTTP 标头(除非同时使用 `noreferrer`)。注意,使用 `noopener` 时,在决定是否打开新窗口/选项卡方面,除 `_top`、`_self` 和 `_parent` 以外的非空目标名称都被视为 `_blank` [^3]。 - **noreferrer**:浏览器导航到另一个页面时,阻止 HTTP header 将当前页面地址或任何其他值作为 Referrer 发送。可以使用 `rel="noreferrer"` 禁用 HTTP 头部的 Referer 属性 [^3]。 - **nofollow**:用于指定搜索引擎不要跟踪链接,不要将该链接计入权重。例如一些非本站的链接,不想传递权重,但是又需要加在页面中的像统计代码、备案号链接、供用户查询的链接等 [^3]。 - **external**:此属性的意思是告诉搜索引擎,这个链接不是本站链接,其作用相当于 `target='_blank'`。在有些采用严格的 DOCTYPE 声名的网站中,`target="_blank"` 会失效,此时可采用 `rel='external'` 替代 [^5]。 - **bookmark**:该属性值本意是书签链接,用来规范 `href` 属性后面链接所指向的目标文档与当前页面的关系是“书签关系”,也可说是“相关文章”的关系,或“永久固定连接”的关系 [^4]。 示例代码如下: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 使用 noopener 防止钓鱼攻击 --> <a href="https://example.com" rel="noopener" target="_blank">外部链接</a> <!-- 使用 nofollow 告知搜索引擎不跟踪链接 --> <a href="https://another-example.com" rel="nofollow">不传递权重的链接</a> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值