面试系列：请说出Link中你知道的属性

前言

<link>标签是HTML中的一个元素，用于建立文档与外部资源之间的关系。这些资源可以是样式表，网站图标，字体文件，或者其他网页所需的资源等等。

使用实例

引入样式表

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

设定网站图标

<link rel="icon" href="favicon.ico" type="image/x-icon" />

引入字体文件

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" />

Link中的属性有哪些

<link>标签通常包括如下属性。

• href：指明外部资源文件的路径，即告诉浏览器外部资源的位置

• hreflang：说明外部资源使用的语言

• media：说明外部资源用于哪种设备

• rel：必填，表明当前文档和外部资源的关系

• sizes：指定图标的大小，只对属性rel="icon"生效

• type：说明外部资源的MIME类型，如text/css、image/x-icon

rel 属性详解

注：本文只对rel中一些常用的属性进行解析，具体可参照MDN文档。

alternate

alternate是HTML <link> 元素的一个属性，用于指定当前文档的替代版本。通常用于指定当前页面的另一个版本，如不同语言或格式的版本。

例如，如果一个网站提供了多种语言版本的页面，可以使用alternate属性指定其他语言版本的链接，以便用户可以根据自己的偏好选择不同的语言版本。

<link rel="alternate" hreflang="fr" href="https://example.com/fr/page.html" />

在这个例子中，hreflang指定了链接的语言，href指定了该语言版本的链接地址。

canonical

canonical属性用于指定网站的规范版本。它告诉搜索引擎这个页面的规范地址，避免搜索引擎将多个地址视为相同内容的重复。通常用于解决重复内容的问题。

<link rel="canonical" href="https://example.com/canonical-page.html" />

DNS Prefetch

dns-prefetch属性用于指定浏览器预先执行目标资源的DNS解析，以减少加载资源时的延迟。

<link rel="dns-prefetch" href="//example.com">

Icon

icon属性用于定义网站或网页在浏览器标题栏中的图标。

<link rel="icon" href="/favicon.ico" type="image/x-icon">

Next

next属性记录文档的下一页，浏览器可以提前加载此页。

<link rel="next" href="https://example.com/page2.html" />

Nofollow

nofollow属性指定文档不被搜索引擎跟踪，即某些页面不被爬虫抓取。

<a href="https://example.com/page.html" rel="nofollow">Link</a>

Noreferrer

noreferrer属性可以阻止浏览器发送访问来源信息。

<a href="https://example.com/page.html" rel="noreferrer">Link</a>

Preload

preload属性用于在页面渲染之前对资源进行预加载，且不易阻塞页面的初步渲染。 其中href和as属性用于指定被加载资源的路径和类型，as指定资源的类型后，浏览器可以更加精确地优化资源加载优先级。

如下预加载了css和js文件，而在页面的渲染时，一旦需要此资源，则可以立即使用，

<link rel="preload" href="https://example.com/font.woff2" as="font" crossorigin="anonymous">

Prefetch

prefetch属性用于对资源进行预加载并缓存，通常用于加载将来页面可能需要的资源。

<link rel="prefetch" href="https://example.com/large-image.jpg">

Preconnect

preconnect属性用于预先连接到目标资源的地址。

<link rel="preconnect" href="https://example.com">

Stylesheet

stylesheet属性指定作为样式表的外部资源。

<link rel="stylesheet" href="styles.css">

Tag

tag属性指定当前文档使用的标签、关键词。以下是一个示例：

<link rel="tag" href="">