掌握 HTML 标题：结构化网页内容的全面指南

介绍

HTML 标题在创建结构良好的网页时至关重要。它们提供了层次结构，并帮助读者快速浏览网站。在本实验中，你将学习如何使用 <h1> 到 <h6> 标签创建不同级别的 HTML 标题。

注意：你可以在 index.html 中练习编码，并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后，你可以刷新 Web 8080 标签以预览网页。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70769{{"HTML 多级标题"}} html/head_elems -.-> lab-70769{{"HTML 多级标题"}} html/text_head -.-> lab-70769{{"HTML 多级标题"}} html/doc_flow -.-> lab-70769{{"HTML 多级标题"}} html/inter_elems -.-> lab-70769{{"HTML 多级标题"}} end

添加 HTML 模板

第一步是创建一个名为 index.html 的 HTML 文件。你可以使用任何文本编辑器，例如 Notepad、TextEdit 或 Sublime Text。

通过在第一行输入 <!DOCTYPE html>，并在第二行和最后一行分别输入 <html></html> 标签，将基本的 HTML 结构添加到你的 index.html 文件中。

<!doctype html>
<html>
  <head></head>
  <body></body>
</html>

添加 Head 部分

在 <html> 标签内，使用 <head> 标签创建 head 部分。在 head 部分中，使用 <title> 标签添加网页的标题。

<!doctype html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
</html>

创建 Body 部分

使用 <body></body> 标签创建 body 部分。在 body 部分中，使用 <h1> 到 <h6> 标签添加不同级别的标题。

<!doctype html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Main Heading</h1>
    <h2>First Sub-Heading</h2>
    <h3>Second Sub-Heading</h3>
    <h4>Third Sub-Heading</h4>
    <h5>Fourth Sub-Heading</h5>
    <h6>Fifth Sub-Heading</h6>
  </body>
</html>

请确保将 "Main Heading" 和子标题替换为你自己的相关标题。

使用 `<hgroup>` 分组标题

你可以使用 <hgroup> 标签将多个标题分组。在下面的示例中，我们使用 <hgroup> 将最后三个标题分组。

<!doctype html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Main Heading</h1>
    <h2>First Sub-Heading</h2>
    <h3>Second Sub-Heading</h3>
    <h4>Third Sub-Heading</h4>
    <hgroup>
      <h4>Fourth Sub-Heading Part 1</h4>
      <h5>Fourth Sub-Heading Part 2</h5>
      <h6>Fourth Sub-Heading Part 3</h6>
    </hgroup>
  </body>
</html>

保存你的 index.html 文件并在浏览器中打开，查看你创建的标题。

总结

在本实验中，你学习了如何使用 <h1> 到 <h6> 标签创建 HTML 标题。标题对于创建结构良好的网页至关重要，同时也有助于搜索引擎优化（SEO）。请记住，每个 HTML 文件应仅包含一个 <h1> 标签，用于页面的主标题。

HTML 多级标题

介绍

Skills Graph

添加 HTML 模板

添加 Head 部分

创建 Body 部分

使用 <hgroup> 分组标题

总结

使用 `<hgroup>` 分组标题