Web学习网站

Appearance

<link> 标签 ​

<link> 标签定义了当前文档与外部资源之间的关系。最常用于链接外部样式表，但也用于建立网站图标、预加载资源等。

概述 ​

<link> 标签是一个自闭合标签，用于定义当前文档与外部资源的关系。它通常放置在文档的 <head> 部分。

语法 ​

html
<link rel="关系类型" href="资源URL">

常用属性 ​

rel 属性（必需） ​

指定当前文档与链接资源之间的关系：

html
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">

href 属性（必需） ​

指定链接资源的 URL：

html
<link rel="stylesheet" href="https://example.com/styles.css">
<link rel="icon" href="/images/favicon.ico">

type 属性 ​

指定链接资源的 MIME 类型：

html
<link rel="stylesheet" href="styles.css" type="text/css">
<link rel="icon" href="favicon.ico" type="image/x-icon">

media 属性 ​

指定链接资源适用的媒体类型：

html
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)">

sizes 属性 ​

指定图标资源的尺寸：

html
<link rel="icon" href="icon-32.png" sizes="32x32">
<link rel="apple-touch-icon" href="apple-icon.png" sizes="180x180">

常见用途 ​

外部样式表 ​

html
<head>
  <!-- 外部 CSS 文件 -->
  <link rel="stylesheet" href="styles.css">
  
  <!-- CDN 样式表 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
  
  <!-- 带有媒体查询的样式表 -->
  <link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)">
  <link rel="stylesheet" href="print.css" media="print">
</head>

网站图标（Favicon） ​

html
<head>
  <!-- 标准 favicon -->
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  
  <!-- PNG 格式的 favicon -->
  <link rel="icon" href="/favicon.png" type="image/png">
  
  <!-- 多尺寸 favicon -->
  <link rel="icon" href="/favicon-16.png" sizes="16x16">
  <link rel="icon" href="/favicon-32.png" sizes="32x32">
  <link rel="icon" href="/favicon-96.png" sizes="96x96">
  
  <!-- Apple touch icon -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>

字体链接 ​

html
<head>
  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap">
  
  <!-- 本地字体 -->
  <link rel="stylesheet" href="/fonts/font.css">
</head>

预加载资源 ​

html
<head>
  <!-- 预加载关键资源 -->
  <link rel="preload" href="/fonts/webfont.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="/styles/critical.css" as="style">
  <link rel="preload" href="/scripts/main.js" as="script">
  
  <!-- 预连接到外部源 -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>

其他关系类型 ​

html
<head>
  <!-- 规范 URL（解决重复内容问题） -->
  <link rel="canonical" href="https://example.com/page">
  
  <!-- 上一页和下一页 -->
  <link rel="prev" href="https://example.com/page1">
  <link rel="next" href="https://example.com/page3">
  
  <!-- 另一种语言版本 -->
  <link rel="alternate" href="https://example.com/en/page" hreflang="en">
  <link rel="alternate" href="https://example.com/es/page" hreflang="es">
  
  <!-- RSS 订阅 -->
  <link rel="alternate" href="/rss.xml" type="application/rss+xml" title="RSS 订阅">
</head>

完整示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!-- 字符编码 -->
  <meta charset="UTF-8">
  
  <!-- 响应式设计 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- 页面标题 -->
  <title>网页开发教程</title>
  
  <!-- 网站图标 -->
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  <link rel="icon" href="/favicon.png" type="image/png" sizes="32x32">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
  
  <!-- 字体 -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,400&display=swap">
  
  <!-- 样式表 -->
  <link rel="stylesheet" href="/css/normalize.css">
  <link rel="stylesheet" href="/css/main.css">
  <link rel="stylesheet" href="/css/responsive.css" media="screen and (max-width: 768px)">
  <link rel="stylesheet" href="/css/print.css" media="print">
  
  <!-- 预加载关键资源 -->
  <link rel="preload" href="/fonts/main-font.woff2" as="font" type="font/woff2" crossorigin>
  
  <!-- 规范 URL -->
  <link rel="canonical" href="https://example.com/html-tutorial">
  
  <!-- RSS 订阅 -->
  <link rel="alternate" href="/rss.xml" type="application/rss+xml" title="RSS 订阅">
</head>
<body>
  <h1>HTML 教程</h1>
  <p>欢迎学习 HTML！</p>
</body>
</html>

性能优化 ​

预加载关键资源 ​

html
<!-- 预加载字体 -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>

<!-- 预加载关键 CSS -->
<link rel="preload" href="/css/critical.css" as="style">

<!-- 预加载关键 JavaScript -->
<link rel="preload" href="/js/main.js" as="script">

预连接到外部源 ​

html
<!-- 提前建立连接以减少延迟 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

DNS 预解析 ​

html
<!-- 提前解析 DNS -->
<link rel="dns-prefetch" href="//example.com">

最佳实践 ​

  1. 将 <link> 标签放在 <head> 部分
  2. 使用相对路径或绝对路径正确引用资源
  3. 为图标文件指定适当的 sizes 属性
  4. 使用 preconnect 和 preload 优化性能
  5. 为外部资源添加 crossorigin 属性（如果需要）
  6. 使用 media 属性为不同设备提供适当的样式表
  7. 添加 canonical 链接以避免重复内容问题

浏览器兼容性 ​

<link> 标签在所有浏览器中都得到支持：

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Internet Explorer

不同 rel 值的支持情况：

  • stylesheet: 所有浏览器
  • icon: 所有浏览器
  • preload: 现代浏览器
  • preconnect: 现代浏览器
  • canonical: 所有浏览器

注意事项 ​

  1. <link> 标签是自闭合的，不需要结束标签
  2. 必须包含 rel 和 href 属性
  3. 外部样式表应该放在页面顶部以避免 FOUC（无样式内容闪烁）
  4. 预加载资源时要谨慎，避免预加载不必要的资源
  5. 使用 CDN 时要注意资源的可用性和加载速度

相关标签 ​