HTML - link 标签

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

语法


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

属性

属性	值	描述
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	定义当前 url 文档和链接的 url 文档之间的关系。
sizes	HeightxWidth any	指定链接资源的大小。仅适用于 rel=“icon”。
title		指定首选样式表或备用样式表。
type	media_type	指定墨迹填入的 url 文档的媒体类型。

<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;
}

在选项卡上链接网站图标

以下是 <link> 标签的另一个示例。在这里，我们使用 <link> 标签及其 rel 和 href 属性在浏览器上建立网站图标。我们给出了本地图像名称 “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 属性创建一个外部资源链接，以在浏览器上建立和管理网站图标的大小。

<!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=“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;
}

支持的浏览器

浏览器
是否支持	Yes	Yes	Yes	Yes	Yes

打印本页