HTML - <link> 标签

HTML <link> 标签指定当前文档与外部资源之间的关系。

<link> 标签主要用于链接样式表。它也用于设置站点图标（包括 favicon 样式图标以及移动设备上的主屏幕和应用程序图标）。

语法

<link href="..." rel=".."/>

属性

HTML link 标签支持 HTML 的全局和事件属性。也接受一些特定的属性，如下所示。

属性	值	描述
crossorigin	anonymous use-credentials	指定元素如何处理跨源请求。
href	URL	指定要链接的页面。
hreflang	language_code	指定附加链接的语言。
media	media_query	指定链接文档针对的媒体/设备。
referrerpolicy	no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url	指定要与链接一起发送的引用程序信息。
rel	alternate author dns-prefetch help icon license next pingback preconnect prefetch preload prerender prev search stylesheet	定义当前文档和链接文档之间的关系。
sizes	HeightxWidth any	指定链接资源的大小。仅限于 rel="icon"。
title		指定首选或备用样式表。
type	media_type	指定链接文档的媒体类型。

HTML link 标签示例

下面的示例将说明 link 标签的用法。在哪里、何时以及如何使用 link 标签。在每个示例中，我们都尝试展示了<link> 标签的不同用例。

链接外部样式表

在下面的示例中，我们使用<link> 标签创建一个外部资源链接元素，以将 CSS 文件链接到 HTML 文件。我们将 CSS 文件名 "style.css" 作为源传递给 href 属性，并将 "stylesheet" 传递给 rel 属性源。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Anchor Tag</title>
   <!--create a link tag-->
   <link rel="stylesheet" href="style.css">
</head>
<body>
   <h1>Hello World!</h1>
</body>
</html>

style.css

body{
   background-color: green;
}
h1{
   color: white;
   font-size: 40px;
}

在选项卡上链接 favicon

以下是 HTML <link> 标签的另一个示例。在这里，我们使用 <link> 标签及其 rel 和 href 属性在浏览器上建立 favicon。我们将本地图像名称 "download.png" 作为链接目标传递给 href 属性，并将 rel 属性源设置为 "icon"。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Anchor Tag</title>
   <!--create a link tag-->
   <link rel="icon" type="image/x-icon" href="download.png">
   <style>
      body {
         background-color: aquamarine;
         font-family: initial;
         font-size: 20px;
      }
   </style>
</head>
<body>
   <h1> The
      <pre>
         <link>
      </pre> tag with the favicon icon......
   </h1>
</body>
</html>

使用属性链接外部资源

在此示例中，我们使用 <link> 标签及其 rel、href 和 sizes 属性创建一个外部资源链接，以在浏览器上建立和管理 favicon 的大小。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Link Tag</title>
   <!--create a link tag-->
   <link rel="icon" type="image/x-icon" 
         href="simply-easy-learning.png" sizes="500x500">
   <style>
      body {
         background-color: rgb(14, 116, 211);
         font-family: initial;
         font-size: 16px;
         color: white;
      }
   </style>
</head>
<body>
   <h1>favicon with
      <pre>
         <link>
      </pre> tag
   </h1>
</body>
</html>

定义打印媒体

您还可以提供媒体类型或查询到 media 属性中，然后只有在媒体条件为真时才会加载此资源。例如 -

如果打印此页面或在打印预览中打开它，您将看到它使用media="print"样式表进行样式设置。“print”样式表包含白色背景上的黑色文本。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Link Tag</title>
   <!--create a link tag-->
   <link href="print.css" rel="stylesheet" media="print" />
   <link href="style.css" rel="stylesheet" 
         media="screen and (max-width: 680px)" />
</head>
<body>
   <h1>The
      <pre>
         <link>
      </pre> tag with media attribute
   </h1>
</body>
</html>

print.css

body{
   background-color: aquamarine;
   color: white;
}

style.css

body{
   background-color: green;
}
h1{
   color: white;
   font-size: 40px;
}

支持的浏览器

标签
link	是	是	是	是	是

html_tags_reference.htm

打印页面