link标签怎么用？外部资源如何引入？-html教程-PHP中文网

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

煙雲

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

原创

957人浏览过

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样式表、网站图标，甚至是一些预加载的资源。

解决方案

<link>

登录后复制

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

基本用法：

<link rel="stylesheet" href="style.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样式表：

<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="https://cdn.example.com/bootstrap.min.css" type="text/css">

登录后复制

第一个例子引入了项目内部的样式表，第二个例子引入了CDN上的Bootstrap样式表。

设置网站图标：
```
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.png" type="image/png" sizes="32x32">
```
登录后复制
这里定义了网站的favicon，可以是
```
.ico
```
登录后复制
格式，也可以是
```
.png
```
登录后复制
格式。
```
sizes
```
登录后复制
属性指定了图标的尺寸。
预加载字体：
```
<link rel="preload" href="fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>
```
登录后复制
使用
```
preload
```
登录后复制
可以提前加载字体文件，避免页面出现字体闪烁（FOIT）或字体替换（FOUT）的问题。注意
```
as
```
登录后复制
属性要指定资源类型，
```
crossorigin
```
登录后复制
属性用于处理跨域字体。
针对不同屏幕尺寸应用不同的样式表：

标小兔AI写标书
一款专业的标书AI代写平台，提供专业AI标书代写服务，安全、稳定、速度快，可满足各类招投标需求，标小兔，写标书，快如兔。

40

查看详情
```
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small-screen.css">
<link rel="stylesheet" media="screen and (min-width: 601px)" href="large-screen.css">
```
登录后复制
使用
```
media
```
登录后复制
属性可以根据屏幕尺寸应用不同的样式表，实现响应式设计。

link标签的

rel

登录后复制

属性还有很多其他的取值，比如

dns-prefetch

登录后复制

、

preconnect

登录后复制

、

modulepreload

登录后复制

等等，它们分别用于DNS预解析、预连接和模块预加载，可以进一步优化页面加载性能。

rel="preload" vs rel="prefetch"，什么时候用？

preload

登录后复制

和

prefetch

登录后复制

都是用来优化页面加载的，但它们的使用场景略有不同。

preload

登录后复制

用于预加载当前页面需要的资源，而

prefetch

登录后复制

用于预取将来可能需要的资源。

简单来说，如果某个资源在当前页面渲染过程中是必须的，那么就用

preload

登录后复制

。如果某个资源在当前页面不是必须的，但用户将来很可能会访问到，那么就用

prefetch

登录后复制

。

例如，当前页面需要用到某个字体文件，那么就应该使用

preload

登录后复制

：

<link rel="preload" href="fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>

登录后复制

如果用户点击某个链接后会跳转到另一个页面，而这个页面需要用到某个图片，那么就可以使用

prefetch

登录后复制

：

<link rel="prefetch" href="images/next-page-image.jpg" as="image">

登录后复制

使用

preload

登录后复制

可以提高当前页面的加载速度，而使用

prefetch

登录后复制

可以提高用户浏览体验，减少页面切换时的等待时间。但是，过度使用

prefetch

登录后复制

可能会浪费用户的带宽，所以需要谨慎使用。

link标签放在head里还是body里？有什么区别？

通常情况下，

<link>

登录后复制

标签应该放在

<head>

登录后复制

标签里。这是因为浏览器在渲染页面之前需要先解析HTML文档，如果

<link>

登录后复制

标签放在

<body>

登录后复制

里，浏览器可能会在渲染过程中才发现需要加载外部资源，导致页面重新渲染，影响用户体验。

将

<link>

登录后复制

标签放在

<head>

登录后复制

里，可以确保浏览器在渲染页面之前就加载好所有需要的外部资源，避免页面重新渲染。

但是，在某些特殊情况下，也可以将

<link>

登录后复制

标签放在

<body>

登录后复制

里。例如，如果某个样式表只在页面的某个特定区域使用，那么就可以将

<link>

登录后复制

标签放在这个区域的

<body>

登录后复制

里。这样做可以减少初始加载的资源量，提高页面加载速度。不过，这种做法可能会导致页面出现闪烁，所以需要谨慎使用。

总的来说，最佳实践是将

<link>

登录后复制

标签放在

<head>

登录后复制

里，除非有特殊的需求才考虑放在

<body>

登录后复制

里。

以上就是link标签怎么用？外部资源如何引入？的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

JavaScript实现动态表单标签自动重排序与更新 JSX中实现文本换行：标签的有效应用从HTML字符串中提取指定标签内容：JavaScript与正则表达式实践如何通过Notepad++批量替换HTML标签的详细步骤 Web页面下载.exe文件被安全软件标记的解决方案