HTML rel 语法
在 HTML 中，rel 属性用于定义链接资源与当前文档之间的关系。它可以用于以下 4 种元素。
语法：
<element rel="取值">说明：
element 是支持 rel 属性的元素。不同元素的 rel 属性是不一样的，下面分类说明一下。
对于 a 元素的 rel 属性来说，它常用取值如下表所示。
| 取值 | 说明 |
|---|---|
| alternate | 表示链接指向当前文档的替代版本 |
| author | 表示链接指向的是文档作者 |
| bookmark | 表示链接指向的是一个书签 |
| help | 表示链接指向的是与当前文档相关的帮助信息 |
| icon | 表示链接指向的图标用于表示当前文档 |
| license | 表示链接指向的文档包含当前文档的许可证信息 |
| prev | 表示链接指向的是当前文档的上一篇文档 |
| next | 表示链接指向的是当前文档的下一篇文档 |
| nofollow | 告知搜索引擎不要继续爬行该链接 |
| noopener | 告知浏览器不要为指向的文档打开新窗口 |
| noreferrer | 告知浏览器不要向链接指向的文档发送引用来源信息 |
| prefetch | 告知浏览器这是预加载的资源 |
| search | 表示链接指向的文档包含当前文档的搜索工具 |
对于 link 元素的 rel 属性来说，它常用取值如下表所示。
| 取值 | 说明 |
|---|---|
| alternate | 表示链接指向的是当前文档的替代版本 |
| author | 表示链接指向的是文档作者 |
| bookmark | 表示链接指向的是一个书签 |
| help | 表示链接指向的是与当前文档相关的帮助信息 |
| icon | 表示链接指向的图标用于表示当前文档 |
| license | 表示链接指向的文档包含当前文档的许可证信息 |
| stylesheet | 表示链接指向的文档包含当前文档的的样式表 |
| canonical | 指示优先使用的页面版本（用于 SEO 去重） |
对于 form 元素的 rel 属性来说，它常用取值如下表所示。
| 取值 | 说明 |
|---|---|
| alternate | 表示链接指向的是当前文档的替代版本 |
| author | 表示链接指向的是文档作者 |
| bookmark | 表示链接指向的是一个书签 |
| help | 表示链接指向的是与当前文档相关的帮助信息 |
| license | 表示链接指向的文档包含当前文档的许可证信息 |
对于 area 元素的 rel 属性来说，它常用取值如下表所示。
| 取值 | 说明 |
|---|---|
| alternate | 表示链接指向的是当前文档的替代版本 |
| author | 表示链接指向的是文档作者 |
| bookmark | 表示链接指向的是一个书签 |
| help | 表示链接指向的是与当前文档相关的帮助信息 |
| icon | 表示链接指向的图标用于表示当前文档 |
HTML rel 摘要
| 适用元素 | a、link、area、form |
|---|---|
| 使用频率 | 高 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML rel 示例
接下来，我们通过几个简单的例子来讲解一下 HTML rel 属性是如何使用的。
示例 1：a 元素中使用 rel 属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="https://www.baidu.com" rel="nofollow">百度</a>
</body>
</html>页面效果如下图所示。
分析：
rel="nofollow" 表示当搜索引擎爬到该链接时，不会打开该链接继续爬行，而是直接跳过该链接。
示例 2：link 元素中使用 rel 属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
</body>
</html>分析：
在上面例子中，rel="stylesheet" 表示指向的是一个样式文件。
