在 HTML 中，我们经常会使用<link>标签来引入外部资源，比如样式表、图标等。<link>标签有一个rel属性，用来定义当前文档与被链接文档之间的关系。rel属性的取值有很多种，下面我们来详细介绍一些常用的rel属性及其用法。
rel="stylesheet"
rel="stylesheet"表示被链接的文档是一个样式表文件。通过<link>标签引入样式表可以让我们在页面中使用外部样式表来定义页面的样式，使得页面结构与样式分离，提高了代码的可维护性和可重用性。
示例代码：
<link rel="stylesheet" href="styles.css">
rel="icon"
rel="icon"表示被链接的文档是一个图标文件，通常用来指定网站的图标，也就是网站标签栏上显示的小图标。可以指定不同尺寸和格式的图标文件，让浏览器根据设备的不同选择合适的图标显示。
示例代码：
<link rel="icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" sizes="192x192" href="icon-192.png">
rel="alternate"
rel="alternate"表示被链接的文档是当前文档的一个替代版本，通常用于指定当前页面的不同语言版本或不同媒体类型的版本。
示例代码：
<link rel="alternate" href="https://example.com/fr" hreflang="fr" type="text/html"> <link rel="alternate" href="https://example.com/feed.xml" type="application/rss+xml" title="RSS feed">
rel="preload"
rel="preload"表示被链接的文档是一个预加载资源，可以在页面加载时提前加载一些关键资源，以提高页面加载速度和性能。
示例代码：
<link rel="preload" href="image.jpg" as="image"> <link rel="preload" href="font.woff2" as="font" type="font/woff2">
rel="canonical"
rel="canonical"表示被链接的文档是当前页面的规范版本，用来指定页面的规范 URL，防止搜索引擎抓取到重复内容，提高页面的搜索引擎排名。
示例代码：
<link rel="canonical" href="https://example.com/page">
除了上述介绍的几种常用的rel属性，还有很多其他的rel属性可以用来定义不同的关系，比如rel="author"、rel="license"、rel="next"、rel="prev"等等。根据具体的需求和情况，我们可以选择合适的rel属性来定义链接文档之间的关系，以实现更好的页面效果和用户体验。