# 常用标签介绍

URL: https://caijiao.org/html/09-integration/03-head-tags
Source: docs/html/09-integration/03-head-tags.md
Description: HTML 中常用的标签如 、 和 用于将 CSS 和 JavaScript 引入到页面中，帮助实现网页的样式设计和动态交互功能。

在 HTML 中，可以通过一些特定的标签将 CSS 和 [JavaScript](/javascript/) 文件与网页进行关联，实现页面的样式设计和功能增强。以下是最常用的标签及其用途。

## 1. `<link>`：引入外部 CSS

`<link>` 标签用于在 HTML 中加载外部样式表，通常放置在 `<head>` 区域中。

```html
<link rel="stylesheet" href="styles.css" />
```

### 属性说明：

- `rel="stylesheet"`：表示关系是样式表
- `href`：外部 CSS 文件路径

## 2. `
```

## 3. `<script>`：引入 JavaScript

`<script>` 标签用于定义或加载 JavaScript 脚本。可以写在页面底部或通过 `src` 属性加载外部文件。

### 内部脚本示例：

```html
<script>
  console.log("Hello World!");
</script>
```

### 外部脚本示例：

```html
<script src="main.js"></script>
```

### 常用属性：

- `src`：外部脚本路径
- `defer`：延迟执行直到文档解析完毕
- `async`：异步加载脚本，适合独立脚本文件

## 小结

| 标签       | 功能             | 典型用途               |
| ---------- | ---------------- | ---------------------- |
| `<link>`   | 引入外部 CSS     | 加载统一的页面样式     |
| `<style>`  | 定义页面内部样式 | 快速测试或页面局部样式 |
| `<script>` | 引入或编写 JS    | 实现交互功能与动态控制 |

合理地使用这些标签，是实现网页样式与行为分离、提升开发效率的关键。
