HTML 文档的头部是加载页面时不会在 Web 浏览器中显示的部分。它包含的信息包括页面"><标题>、指向 CSS的链接（如果您选择使用 CSS 设置HTML内容的样式）、指向自定义图标的链接以及其他元数据（有关HTML的数据，例如作者和描述文档的重要关键字）。Web 浏览器使用头部中包含的信息来正确呈现 HTML 文档。在本文中，我们将介绍上述所有内容以及更多内容，以便为使用标记提供良好的基础。
| 先决条件： | 熟悉基本的 HTML知识，如HTML 入门中所述。 |
|---|
| 目的： | 要了解 HTML 头，它的目的，最重要的项目 可以包含，以及它可以对 HTML 文档产生什么影响。 |
|---|
什么是HTML头？
让我们回顾一下我们在上一篇文章中介绍的简单 HTML 文档：
[HTML全文]复制到剪贴板
doctype html> <html lang="en-US"> <head> <meta charset="utf-8" /> <title>My test pagetitle> head> <body> <p>This is my pagep> body> html>
HTML head 是">
元素的内容。与">元素的内容（在浏览器中加载时显示在页面上）不同，头部的内容不会显示在页面上。相反，头部的工作是包含有关文档的元数据。在上面的例子中，头部非常小： [HTML全文]复制到剪贴板
<head> <meta charset="utf-8" /> <title>My test pagetitle> head>
然而，在较大的页面中，头部可能会变得相当大。尝试访问一些您最喜欢的网站，并使用开发人员工具查看其头部内容。我们在这里的目的不是向你展示如何使用所有可能放在脑海中的东西，而是教你如何使用你想包含在脑海中的主要元素，并给你一些熟悉感。让我们开始吧。
添加标题
我们已经看到了">
元素在起作用 — 这可以用来向文档添加标题。然而，这可能会与 h1 元素混淆，h1元素用于为您的正文内容添加顶级标题——这有时也被称为页面标题。但它们是不同的东西！</p><ul style="margin-left:0;"><li>h1元素在浏览器中加载时会出现在页面上 - 通常每个页面应使用一次，以标记页面内容的标题（故事标题、新闻标题或任何适合您用法的内容）。</li><li></li></ul> <!--end::Text-->
</div>
<!--end::Description-->
<div class="mt-5">
<!--关键词搜索-->
</div>
<div class="mt-5">
<p class="fc-show-prev-next">
<strong>上一篇：</strong><a href="/dnzs/102349.html">Conda修改包/虚拟环境储存目录</a><br>
</p>
<p class="fc-show-prev-next">
<strong>下一篇：</strong><a href="/dnzs/102351.html">qq不在线为什么还有自动回复</a> </p>
</div>
<!--begin::Block-->
<div class="d-flex flex-stack mb-2 mt-10">
<!--begin::Title-->
<h3 class="text-dark fs-5 fw-bold text-gray-800">相关内容</h3>
<!--end::Title-->
</div>
<div class="separator separator-dashed mb-9"></div>
<!--end::Block-->
<div class="row g-10">
</div>
</div>
<!--end::Table widget 14-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-xl-4 mt-0">
<!--begin::Chart Widget 35-->
<div class="card card-flush h-md-100">
<!--begin::Header-->
<div class="card-header pt-5 ">
<!--begin::Title-->
<h3 class="card-title align-items-start flex-column">
<!--begin::Statistics-->
<div class="d-flex align-items-center mb-2">
<!--begin::Currency-->
<span class="fs-5 fw-bold text-gray-800 ">热门资讯</span>
<!--end::Currency-->
</div>
<!--end::Statistics-->
</h3>
<!--end::Title-->
</div>
<!--end::Header-->
<!--begin::Body-->
<div class="card-body pt-3">
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/news/611880.html" class="text-dark fw-bold text-hover-primary fs-6">“无人家务”渐行渐近</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7">记者 李 均 宋迎迎 从AI技术的持续突破，到各类AI产品与智能终端的加速落地，再到智慧生活场景的日...</span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/news/611879.html" class="text-dark fw-bold text-hover-primary fs-6">苏州工业园区 2026年防灾减...</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7">在第18个全国防灾减灾日到来之际，5月11日，苏州工业园区2026年防灾减灾宣传周启动仪式暨AI赋能...</span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/news/611878.html" class="text-dark fw-bold text-hover-primary fs-6">【好物】雅诗兰黛第7代小棕瓶京...</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7">全网 618 大促现已正式开始，全场均年度好价，有需求的小伙伴速抢哦： 京东无门槛红包 京东无门槛...</span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/news/611877.html" class="text-dark fw-bold text-hover-primary fs-6">原创 1...</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7">2011年4月底，郴州开往湖北的火车上，一名少年满头大汗地捂着腰部，低声呻吟。列车员和周围乘客焦急地...</span>
</div>
<!--end::Title-->
</div>
<!--begin::Item-->
<div class="d-flex flex-stack mb-7">
<!--begin::Symbol-->
<!--end::Symbol-->
<!--begin::Title-->
<div class="m-0">
<a href="/news/611876.html" class="text-dark fw-bold text-hover-primary fs-6">Geekom Air12 20...</a>
<span class="text-gray-600 fw-semibold d-block pt-1 fs-7">随着中国制造商在紧凑且高性能迷你电脑领域的崛起，Geekom已成为备受瞩目的品牌之一。此前，其AMD...</span>
</div>
<!--end::Title-->
</div>
</div>
<!--end::Body-->
</div>
<!--end::Chart Widget 35-->
</div>
<!--end::Col-->
</div>
</div>
<!--end::Content container-->
</div>
<!--end::Content-->
</div>
<!--end::Content wrapper-->
<!--begin::Footer-->
<div id="kt_app_footer" class="app-footer">
<!--begin::Footer container-->
<div class="app-container container-xxl d-flex flex-column flex-md-row flex-center flex-md-stack py-3">
<!--begin::Copyright-->
<div class="text-dark order-2 order-md-1">
<span class="text-muted fw-semibold me-1">2026 ©</span>
泰达科技网<a href="http://tansuo.caiding5.cn/">财丁探索</a><a href="http://www.hgjy100.com/">汉高教育网</a><a href="http://www.bitekongjian.com/">比特空间</a><a href="http://www.tdroid.net/">太卓网</a><a href="http://www.nengyuan100.com/">能源100</a><a href="http://www.gangyiku.com/">易库网</a><a href="http://www.hcygmm.com/">汇川网</a><a href="http://www.dcglq.cn/">电池功率网</a><a href="http://ic.tdroid.net/">太卓IC网</a><a href="http://game.tdroid.net/">土豆游戏网</a> </div>
<!--end::Copyright-->
<!--begin::Menu-->
<ul class="menu menu-gray-600 menu-hover-primary fw-semibold order-1">
<li class="menu-item">
<a href="/news/" target="_blank" class="menu-link px-2">科技资讯</a>
</li>
<li class="menu-item">
<a href="/dnzs/" target="_blank" class="menu-link px-2">电脑知识</a>
</li>
</ul>
<!--end::Menu-->
</div>
<!--end::Footer container-->
</div>
<!--end::Footer-->
</div>
<!--end:::Main-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Page-->
</div>
<!--end::App-->
<div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true">
<!--begin::Svg Icon | path: icons/duotune/arrows/arr066.svg-->
<span class="svg-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect opacity="0.5" x="13" y="6" width="13" height="2" rx="1" transform="rotate(90 13 6)" fill="currentColor"></rect>
<path d="M12.5657 8.56569L16.75 12.75C17.1642 13.1642 17.8358 13.1642 18.25 12.75C18.6642 12.3358 18.6642 11.6642 18.25 11.25L12.7071 5.70711C12.3166 5.31658 11.6834 5.31658 11.2929 5.70711L5.75 11.25C5.33579 11.6642 5.33579 12.3358 5.75 12.75C6.16421 13.1642 6.83579 13.1642 7.25 12.75L11.4343 8.56569C11.7467 8.25327 12.2533 8.25327 12.5657 8.56569Z" fill="currentColor"></path>
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--begin::Javascript-->
<script>var hostUrl = "/static/default/pc/";</script>
<!--begin::Global Javascript Bundle(mandatory for all pages)-->
<script src="/static/default/pc/plugins/global/plugins.bundle.js"></script>
<script src="/static/default/pc/js/scripts.bundle.js"></script>
<!--end::Global Javascript Bundle-->
<!--end::Javascript-->
</body>
<!--end::Body-->
</html> 
