HTML 头部

HTML <head> 元素是一个容器，用于存放那些不直接显示在页面内容区的元数据 (metadata)、文档链接、样式和脚本。

简单来说，<head> 里的内容是给浏览器和搜索引擎看的，而 <body> 里的内容是给用户看的。

<head> 元素位于 <html> 标签之后，<body> 标签之前。

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 元数据、样式、脚本等放在这里 -->
</head>
<body>
    <!-- 页面可见内容放在这里 -->
</body>
</html>

`<head>` 中常见的元素

以下是 <head> 元素内部最常用的一些标签：

1. `<title>` 元素

这是 <head> 中唯一必须包含的元素。它定义了文档的标题，这个标题会用在三个关键地方：

浏览器工具栏（或标签页）的标题。
用户将页面添加到收藏夹（书签）时，作为默认名称。
搜索引擎结果页面 (SERP) 中显示的页面标题。

<head>
    <title>我的网站 - 首页</title>
</head>

一个准确、简洁的标题对于可用性和搜索引擎优化 (SEO) 都非常重要。

2. `<meta>` 元素

<meta> 标签用于提供关于 HTML 文档的元数据，它是一个空元素。常见的用途包括：

声明字符集: 这是最重要的 <meta> 标签之一，应始终作为 <head> 的第一个子元素，以确保浏览器正确解析所有文本字符。
```
<meta charset="UTF-8">
```
设置视口 (Viewport): 这对于创建响应式设计至关重要，它告诉浏览器如何控制页面的尺寸和缩放。
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
页面描述和关键词 (SEO): 虽然现在搜索引擎对 keywords 的权重已经很低，但 description 仍然非常重要，它通常会作为搜索结果中的摘要显示。
```
<meta name="description" content="这是一个关于HTML学习的网站。">
<meta name="keywords" content="HTML, CSS, JavaScript, Web开发">
```
作者信息:
```
<meta name="author" content="张三">
```

3. `<link>` 元素

<link> 元素定义了当前文档与外部资源之间的关系，最常见的用途是链接外部 CSS 样式表。

<head>
    <link rel="stylesheet" href="styles/main.css">
</head>

rel="stylesheet" 表明链接的资源是一个样式表。
href 指定了 CSS 文件的路径。

它还可以用来链接网站的图标 (favicon)。

4. `<style>` 元素

如果你不想使用外部样式表，可以使用 <style> 元素在 HTML 文档内部定义 CSS 样式（通常称为“内部样式”）。

<head>
    <style>
        body {
            background-color: linen;
        }
        h1 {
            color: maroon;
        }
    </style>
</head>

5. `<script>` 元素

<script> 标签用于嵌入或引用可执行的 JavaScript 代码。它可以直接包含代码，也可以通过 src 属性链接到外部的 .js 文件。

<head>
    <!-- 引用外部脚本 -->
    <script src="scripts/main.js"></script>

    <!-- 内部脚本 -->
    <script>
        alert('你好，世界！');
    </script>
</head>

最佳实践: 为了提高页面加载性能，通常建议将 <script> 标签放在 <body> 元素的末尾，而不是 <head> 中，除非脚本需要在页面渲染前执行。

6. `<base>` 元素

<base> 元素可以为页面上的所有相对链接（如 <img>, <a>）设置一个基础 URL。一个文档中最多只能有一个 <base> 元素。

<head>
    <base href="https://www.example.com/images/" target="_blank">
</head>
<body>
    <!-- 这张图片会从 https://www.example.com/images/logo.png 加载 -->
    <img src="logo.png">
    <!-- 这个链接会在新标签页打开 -->
    <a href="page.html">一个页面</a>
</body>

#HTML 头部

#<head> 中常见的元素

#1. <title> 元素

#2. <meta> 元素

#3. <link> 元素

#4. <style> 元素

#5. <script> 元素

#6. <base> 元素