阅读量:0
HTML 文档的头部是加载页面时不会在 Web 浏览器中显示的部分。它包含的信息包括页面<标题>、指向 CSS的链接（如果您选择使用 CSS 设置HTML内容的样式）、指向自定义图标的链接以及其他元数据（有关HTML的数据，例如作者和描述文档的重要关键字）。Web 浏览器使用头部中包含的信息来正确呈现 HTML 文档。在本文中，我们将介绍上述所有内容以及更多内容，以便为使用标记提供良好的基础。
| 先决条件： | 熟悉基本的 HTML知识，如HTML 入门中所述。 |
|---|---|
| 目的： | 要了解 HTML 头，它的目的，最重要的项目 可以包含，以及它可以对 HTML 文档产生什么影响。 |
什么是HTML头？
让我们回顾一下我们在上一篇文章中介绍的简单 HTML 文档：
[HTML全文]复制到剪贴板<span style="background-color:var(--code-background-block)"><code><span style="color:var(--code-token-comment)"><span style="color:var(--code-token-punctuation)"><!</span>doctype html<span style="color:var(--code-token-punctuation)">></span></span> <span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"><</span>html</span> <span style="color:var(--code-token-attribute-name)">lang</span><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)">=</span><span style="color:var(--code-token-punctuation)">"</span>en-US<span style="color:var(--code-token-punctuation)">"</span></span><span style="color:var(--code-token-punctuation)">></span></span> <span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"><</span>head</span><span style="color:var(--code-token-punctuation)">></span></span> <span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"><</span>meta</span> <span style="color:var(--code-token-attribute-name)">charset</span><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)">=</span><span style="color:var(--code-token-punctuation)">"</span>utf-8<span style="color:var(--code-token-punctuation)">"</span></span> <span style="color:var(--code-token-punctuation)">/></span></span> <span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"><</span>title</span><span style="color:var(--code-token-punctuation)">></span></span>My test page<span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"></</span>title</span><span style="color:var(--code-token-punctuation)">></span></span> <span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"></</span>head</span><span style="color:var(--code-token-punctuation)">></span></span> <span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"><</span>body</span><span style="color:var(--code-token-punctuation)">></span></span> <span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"><</span>p</span><span style="color:var(--code-token-punctuation)">></span></span>This is my page<span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"></</span>p</span><span style="color:var(--code-token-punctuation)">></span></span> <span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"></</span>body</span><span style="color:var(--code-token-punctuation)">></span></span> <span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"></</span>html</span><span style="color:var(--code-token-punctuation)">></span></span> </code></span>HTML head 是<head>元素的内容。与<body>元素的内容（在浏览器中加载时显示在页面上）不同，头部的内容不会显示在页面上。相反，头部的工作是包含有关文档的元数据。在上面的例子中，头部非常小：
[HTML全文]复制到剪贴板<span style="background-color:var(--code-background-block)"><code><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"><</span>head</span><span style="color:var(--code-token-punctuation)">></span></span> <span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"><</span>meta</span> <span style="color:var(--code-token-attribute-name)">charset</span><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)">=</span><span style="color:var(--code-token-punctuation)">"</span>utf-8<span style="color:var(--code-token-punctuation)">"</span></span> <span style="color:var(--code-token-punctuation)">/></span></span> <span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"><</span>title</span><span style="color:var(--code-token-punctuation)">></span></span>My test page<span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"></</span>title</span><span style="color:var(--code-token-punctuation)">></span></span> <span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"></</span>head</span><span style="color:var(--code-token-punctuation)">></span></span> </code></span>然而，在较大的页面中，头部可能会变得相当大。尝试访问一些您最喜欢的网站，并使用开发人员工具查看其头部内容。我们在这里的目的不是向你展示如何使用所有可能放在脑海中的东西，而是教你如何使用你想包含在脑海中的主要元素，并给你一些熟悉感。让我们开始吧。
添加标题
我们已经看到了<title>元素在起作用 — 这可以用来向文档添加标题。然而，这可能会与 h1 元素混淆，h1元素用于为您的正文内容添加顶级标题——这有时也被称为页面标题。但它们是不同的东西！
- h1元素在浏览器中加载时会出现在页面上 - 通常每个页面应使用一次，以标记页面内容的标题（故事标题、新闻标题或任何适合您用法的内容）。
