link标签怎么用？外部资源如何引入？

煙雲

发布时间：2025-08-07 13:02:01

1013人浏览过

来源于php中文网

原创

link标签应放在head中，通常用于引入css、图标等外部资源；1. rel定义资源关系，如stylesheet、icon、preload、prefetch；2. href指定资源url；3. type标明mime类型；4. media控制应用的媒体条件；5. sizes用于图标尺寸；6. crossorigin处理跨域请求；preload用于当前页必需资源，prefetch用于预加载未来可能需要的资源；最佳实践是将link标签置于head中以确保资源优先加载，避免页面重绘，特殊情况下可放body但可能导致闪烁。

link标签怎么用？外部资源如何引入？

link标签，简单来说，就是HTML里引入外部资源的钥匙。它让你的网页能用上CSS样式表、网站图标，甚至是一些预加载的资源。

解决方案

标签主要用于定义当前文档与外部资源之间的关系。它是一个空元素，只能包含属性。

基本用法：

这个例子是最常见的，它告诉浏览器，

style.css

是一个样式表，应该用来渲染当前页面。

rel

属性定义了当前文档与被链接资源之间的关系，

href

属性则指定了资源的URL。

核心属性：

rel
: 这个属性至关重要，它定义了链接的关系。常用的值包括：
- ```
stylesheet
```
  : 链接的是样式表。
- ```
icon
```
  : 链接的是网站图标（favicon）。
- ```
preload
```
  : 预加载资源，提升页面加载速度。
- ```
prefetch
```
  : 预取资源，为用户可能访问的页面做准备。
- ```
alternate
```
  : 定义文档的备用版本，例如不同语言的版本。
href
: 指定链接资源的URL。可以是相对路径或绝对路径。
type
: 指定链接资源的MIME类型。虽然不是必须的，但建议添加，可以帮助浏览器更快地识别资源类型。例如：
```
type="text/css"
```
。
media
: 指定链接资源应用的媒体类型。例如，
```
media="screen"
```
表示只在屏幕上应用，
```
media="print"
```
表示只在打印时应用。
sizes
: 用于
```
rel="icon"
```
，指定图标的尺寸。例如，
```
sizes="32x32"
```
。
crossorigin
: 用于处理跨域资源请求。常见的取值有
```
anonymous
```
和
```
use-credentials
```
。

实际案例：

引入CSS样式表：
第一个例子引入了项目内部的样式表，第二个例子引入了CDN上的Bootstrap样式表。
设置网站图标：
这里定义了网站的favicon，可以是
```
.ico
```
格式，也可以是
```
.png
```
格式。
```
sizes
```
属性指定了图标的尺寸。
预加载字体：
使用
```
preload
```
可以提前加载字体文件，避免页面出现字体闪烁（FOIT）或字体替换（FOUT）的问题。注意
```
as
```
属性要指定资源类型，
```
crossorigin
```
属性用于处理跨域字体。
针对不同屏幕尺寸应用不同的样式表：

NatAgent
AI数据情报监测与分析平台

下载
使用
```
media
```
属性可以根据屏幕尺寸应用不同的样式表，实现响应式设计。