HTML head 标签 - 绿叶网

HTML head 语法

在 HTML 中，head 标签表示网页的头部部分。它是一个特殊的标签，只有一些特定的标签可以放在 head 标签内，其他大部分标签则放在 body 标签内。

语法：

<head>
    ……
</head>

说明：

head 标签主要是为 “浏览器” 或 “搜索引擎” 提供一些重要信息，它的主要作用包括以下 3 个方面。

搜索引擎优化（SEO）：在 head 标签中通过 meta 标签，来为搜索引擎提供与该网页相关的信息，对于 SEO 至关重要。
链接外部资源：比如使用 link 标签链接外部 CSS 文件，或者使用 script 标签链接外部 JavaScript 文件。
为浏览器提供信息：比如使用 <meta charset="utf-8"> 告知浏览器，当前页面使用 utf-8 编码等。

在 HTML 中，只有以下 8 种标签能放在 head 标签内。

注意: head与 header 是两个不同的标签，小伙伴们不要搞混淆了。其中，head 标签用于定义文档的元数据（用户不可见），而 header 标签是页面结构的一部分（用户可见）。

HTML head 摘要

属于	HTML 标签
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

HTML head 示例

接下来，我们通过一个简单的例子来讲解一下 HTML head 标签是如何使用的。

示例：head 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>页面标题</title>
    <style>
        p { color: red; }
    </style>
</head>
<body>
    <p>正文内容</p>
</body>
</html>

浏览器效果如下图所示。

HTML head示例

分析：

在上面例子中，head 标签包含了 3 种标签。

meta：设置当前网页编码为 "utf-8"。
title：定义网页标题内容。
style：定义内联样式。