HTML头部元素

### HTML头部元素

HTML头部元素位于`<head>`标签内，用于包含文档的元数据。以下是一些常用的头部元素：

#### `<title>`标签

`<title>`标签定义了文档的标题，这个标题会显示在浏览器的标签页上，也是搜索引擎结果页面上显示的页面标题。例如：

```html
<head>
    <title>我的网页标题</title>
</head>
```

#### `<meta>`标签

`<meta>`标签提供了关于HTML文档的元数据。元数据是关于数据的数据，不会显示在页面上，但会被浏览器和搜索引擎使用。常见的`<meta>`标签包括：

- **字符集声明**：指定页面使用的字符编码，通常是UTF-8。
  ```html
  <meta charset="UTF-8">
  ```
- **视口设置**：用于响应式设计，控制视口的大小和比例。
  ```html
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  ```
- **描述**：提供页面内容的简短描述，这可能会显示在搜索引擎结果中。
  ```html
  <meta name="description" content="这里是页面的描述">
  ```
- **关键词**：虽然现在搜索引擎不太重视这个标签，但它可以用来提供页面内容的关键词。
  ```html
  <meta name="keywords" content="HTML, CSS, JavaScript">
  ```

#### `<link>`和`<style>`标签

- **`<link>`标签**：用于链接外部资源，通常是CSS样式表。
  ```html
  <link rel="stylesheet" href="styles.css">
  ```
  `<link>`标签还可以用于链接图标、预加载资源等。

- **`<style>`标签**：用于在HTML文档内部定义CSS样式。
  ```html
  <head>
      <style>
          p {
              color: red;
          }
      </style>
  </head>
  ```

#### `<script>`标签

`<script>`标签用于在HTML文档中嵌入JavaScript代码或链接外部JavaScript文件。例如：

- **内联JavaScript**：
  ```html
  <script>
      window.onload = function() {
          alert("页面已加载！");
      };
  </script>
  ```
- **链接外部JavaScript文件**：
  ```html
  <script src="script.js"></script>
  ```

`<script>`标签可以放在`<head>`中，也可以放在`<body>`的底部，以异步或延迟加载的方式提高页面加载速度。

这些头部元素对于定义页面的元数据、样式和行为至关重要，它们共同确保了页面的正确显示和功能实现。