面试系列：请说出Link中你知道的属性
内容提要
HTML中的<link>标签用于建立文档与外部资源的关系，如样式表、网站图标、字体文件等。常用属性有href、hreflang、media、rel、sizes和type。其中rel属性的常用值有alternate、canonical、dns-prefetch、icon、next、nofollow、noreferrer、preload、prefetch、preconnect和stylesheet。这些属性分别用于指定替代版本、规范版本、DNS解析、图标、下一页、不被跟踪、不发送访问来源信息、预加载、预加载并缓存、预先连接和样式表。
延伸解读
rel 属性为何是 link 的核心
在 link 的常用属性中，rel 是唯一被文章标注为“必填”的属性，它决定了浏览器和搜索引擎如何理解外部资源与当前文档的关系。href 只负责指明资源位置，而 rel 的值如 stylesheet、icon、canonical 等，才真正区分资源用途。因此面试中若只列举属性名而不解释 rel 的作用，容易显得理解不够深入。
性能类 rel 值的分工与差异
文章列出了 dns-prefetch、preconnect、preload 和 prefetch 四种与性能相关的 rel 值，它们分别对应不同阶段的优化：dns-prefetch 预先解析域名，preconnect 预先建立连接，preload 在页面渲染前加载当前页面所需资源，prefetch 则缓存将来可能用到的资源。理解这些差异，有助于在实际项目中根据资源的使用时机选择合适的方式。
canonical 与 alternate 的 SEO 意义
canonical 用于告诉搜索引擎页面的规范地址，避免多个 URL 被视为重复内容；alternate 则用于指定当前文档的替代版本，例如不同语言或格式的页面。两者都涉及页面与外部资源的关系，但目的不同：一个用于收敛权重，一个用于提供备选入口。在涉及多语言站点或内容聚合时，正确使用这两个属性对搜索表现有直接影响。
注意示例中的细节与适用范围
文章在 preload 示例中使用了 as 和 crossorigin 属性，说明预加载字体等资源时需要额外声明类型和跨域设置，否则浏览器可能不会按预期复用缓存。此外，sizes 只对 rel="icon" 生效，nofollow 和 noreferrer 的示例实际写在 a 标签上，说明这些 rel 值并不限于 link 元素。回答时若能指出这些细节，会比单纯罗列属性更有说服力。
Q&A
<link>标签的主要用途是什么？
<link>标签用于建立文档与外部资源的关系，如样式表、网站图标和字体文件等。
<link>标签中常用的属性有哪些？
常用属性包括href、hreflang、media、rel、sizes和type。
什么是rel属性，它的常用值有哪些？
rel属性表明当前文档与外部资源的关系，常用值有alternate、canonical、dns-prefetch、icon、next、nofollow、noreferrer、preload、prefetch、preconnect和stylesheet。
如何使用alternate属性？
alternate属性用于指定当前文档的替代版本，通常用于多语言版本的链接。
canonical属性的作用是什么？
canonical属性用于指定网站的规范版本，避免搜索引擎将多个地址视为相同内容的重复。
preload和prefetch属性有什么区别？
preload用于在页面渲染之前对资源进行预加载，而prefetch用于对将来可能需要的资源进行预加载并缓存。
