HTML | rel 属性

在 HTML 中，rel 属性指定了当前文档与链接文档之间的关系，通常用于 <a>、<link> 和 <area> 标签中。

rel 属性的值是一个或多个空格分隔的关键字，例如 rel="stylesheet"，关键字表示当前文档与链接文档之间的关系，其中最常见的值有：

• alternate：链接到当前文档的替代版本。
• stylesheet：链接到当前文档使用的样式表。
• canonical：指定当前文档的规范版本，用于避免重复内容被搜索引擎索引。
• prev 和 next：指定前一篇和后一篇文章，用于方便用户浏览，可以用于分页内容或文章列表等地方。
• nofollow：告诉搜索引擎不要沿着该链接抓取被链接的网页内容。
• noopener：告诉浏览器打开链接时不要关联新窗口的父窗口。这是出于安全考虑，避免窃取数据。
• noreferrer：告诉浏览器打开链接时不要发送 HTTP Referer 头部信息，以避免泄露信息。

下面是一个例子，展示如何在 <link> 标签中使用 rel 属性链接到样式表：

<link rel="stylesheet" type="text/css" href="styles.css">

上面的代码意味着链接到一个 styles.css 的样式表。

在 <a> 标签中，rel 属性通常用于链接到外部页面，例如：

<a href="https://www.google.com" rel="nofollow noopener">Google</a>

上面的代码意味着链接到谷歌网站，并告诉搜索引擎不要抓取被链接的网页内容，并告诉浏览器打开链接时不要关联新窗口的父窗口。

总体来说，rel 属性非常有用，可以让页面链接变得更加有意义，同时也可以提高用户体验和搜索引擎优化。