html head标签中引入css的标准写法-css教程-PHP中文网

html head标签中引入css的标准写法

P粉602998670

发布： 2025-09-16 20:42:02

原创

588人浏览过

使用link标签是引入CSS的标准方法，因其支持并行下载、代码分离和浏览器缓存；还可通过style标签内嵌或@import导入，但后者影响性能。

html head标签中引入css的标准写法

将CSS引入HTML head标签，标准做法就是使用

<link>

登录后复制

标签，这几乎是所有前端开发者的肌肉记忆了。但为什么是

<link>

登录后复制

？还有没有其他方法？这就是我们今天要聊的。

<link>

登录后复制

标签是标准答案，但理解背后的原因更重要。

解决方案

在HTML的

<head>

登录后复制

标签内，使用

<link>

登录后复制

标签引入CSS文件。这是最常见、最推荐的方法。

立即学习“前端免费学习笔记（深入）”；

<!DOCTYPE html>
<html>
<head>
  <title>我的网页</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>你好，世界！</h1>
</body>
</html>

登录后复制

rel="stylesheet"

登录后复制

属性告诉浏览器这是一个样式表，

href

登录后复制

属性指定CSS文件的路径。

除了

<link>

登录后复制

标签，还有其他方法吗？

理论上，还有两种方法：

EasyUI中文学习教程 DOC版

jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。本平台提供EasyUI中文学习教程下载，需要的朋友们可以下载！

查看详情

使用

<style>

登录后复制

标签内嵌CSS代码： 可以将CSS代码直接写在HTML文件的

<head>

登录后复制

标签内的

<style>

登录后复制

标签中。这种方法适用于少量CSS代码，但对于大型项目，会使HTML文件变得臃肿，不利于维护。

<!DOCTYPE html>
<html>
<head>
  <title>我的网页</title>
  <style>
    body {
      background-color: lightblue;
    }
    h1 {
      color: white;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>你好，世界！</h1>
</body>
</html>

登录后复制

使用
```
@import
```
登录后复制
指令： 可以在
```
<style>
```
登录后复制
标签内或外部CSS文件中使用
```
@import
```
登录后复制
指令引入其他CSS文件。这种方法不推荐，因为它会导致浏览器在加载HTML文件后，再去下载CSS文件，会阻塞页面的渲染，影响用户体验。
```
<!DOCTYPE html>
<html>
<head>
  <title>我的网页</title>
  <style>
    @import url("styles.css");
  </style>
</head>
<body>
  <h1>你好，世界！</h1>
</body>
</html>
```
登录后复制

为什么

<link>

登录后复制

标签是首选？

性能优化：
```
<link>
```
登录后复制
标签允许浏览器并行下载CSS文件，不会阻塞HTML的解析和渲染。
代码分离： 将CSS代码放在单独的文件中，可以提高代码的可维护性和可重用性。
浏览器缓存： 外部CSS文件可以被浏览器缓存，下次访问页面时，可以直接从缓存中加载，提高加载速度。

<link>

登录后复制

标签中的
rel
登录后复制
属性还有哪些其他值？

rel

登录后复制

属性定义了当前文档与被链接文档之间的关系。除了

stylesheet

登录后复制

，还有一些常用的值：

```
icon
```
登录后复制
: 指定网站的图标（favicon）。
```
shortcut icon
```
登录后复制
: 与
```
icon
```
登录后复制
类似，用于指定网站的图标，一些老旧浏览器可能需要这个属性。
```
alternate
```
登录后复制
: 指定文档的备用版本，例如不同语言的版本。
```
preload
```
登录后复制
: 预加载资源，可以提高页面加载速度。
```
prefetch
```
登录后复制
: 预获取资源，用于后续页面导航。