HTML link 标签 - 绿叶网

HTML link 语法

在 HTML 中，link 标签用于在 HTML 中引入外部资源（比如 CSS 文件）。

语法：

<link rel="关系" href="资源URL" type="MIME类型" media="媒体查询" sizes="尺寸" crossorigin="匿名" integrity="哈希值" as="类型">

说明：

link 标签有许多常用属性，下面是其中一些重要的属性：

href（主要）：定义被链接资源的 URL 地址。
rel（主要）：定义当前文档与被链接资源之间的关系。这是 link 标签最重要的属性，常见的取值有：
- stylesheet：表示被链接的资源是样式表。
- icon 或 shortcut icon：表示被链接的资源是网站图标（Favicon）。
- preload：指示浏览器预加载此资源，因为它在稍后会被用到。
- preconnect：指示浏览器预先建立与某个域的连接，以减少后续请求的延迟。
- canonical：指定页面的规范 URL，用于 SEO，避免重复内容。
- alternate：指定备用版本，例如翻译版本或 RSS 订阅。
type（主要）：定义被链接资源的 MIME 类型。对于 CSS 文件通常是 "text/css"，对于图片图标通常是 "image/x-icon" 或 "image/png"。
media：指定被链接资源适用于哪种媒体 / 设备类型。可以是一个媒体查询，例如 screen（屏幕）、print（打印）、（max-width: 600px） ( 最大宽度为 600px 的屏幕 )。
sizes：当 rel="icon" 时，定义图标的尺寸，例如 16 x 16 或 any（任意尺寸）。
crossorigin：配置跨域请求的 CORS 行为，用于从不同源加载资源。
as：与 rel="preload" 一起使用，指示预加载资源的类型，例如 style、script、image、font。这有助于浏览器更精确地优化加载。
integrity：用于子资源完整性（SRI）。它包含一个哈希值，浏览器会使用该哈希值来验证下载的资源文件是否被篡改。

提示: link 标签定义的是 CSS 外部样式，而 style 标签定义的是 CSS 内联样式。

HTML link 摘要

属于	HTML 标签
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

HTML link 示例

接下来，我们通过几个简单的例子来讲解一下 HTML link 标签是如何使用的。

示例 1：link 标签引入外部 CSS 文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
</body>
</html>

分析：

<link rel="stylesheet" href="css/index.css">

上面这句代码，表示在当前页面中引入 css 目录中的 index.css 文件。

在最新的 HTML5 标准中，link 标签不需要加上 type="text/css" 属性。下面 2 种写法是等价的，推荐写法 1。

<!--写法1-->
<link rel="stylesheet" href="CSS文件路径">

<!--写法2-->
<link type="text/css" rel="stylesheet" href="CSS文件路径">

示例 2：link 标签引入网站图标（favicon）

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="icon" type="image/x-icon" href="imgs/favicon.ico">
    <link rel="icon" type="image/png" sizes="32x32" href="imgs/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="imgs/favicon-16x16.png">
</head>
<body>
    <h1>绿叶网</h1>
    <p>为好教程，全力以赴。</p>
</body>
</html>

浏览器效果如下图所示。

分析：

link 标签有一个非常重要的用途，就是为网站设置地址栏图标（favicon）。rel="icon" 或 rel="shortcut icon" 告诉浏览器这是一个网站图标。现代浏览器通常推荐使用 PNG 格式的图标，并通过 sizes 属性提供不同尺寸的版本以适应不同设备和屏幕密度。