HTML 主要内容

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

在 HTML 中,<main> 标签用于表示文档的主要内容或核心内容。它是 HTML5 中新引入的标签,通常写在 <body> 标签内。<main> 标签的内容应该是唯一的,并且与文档的中心主题直接相关。它类似于一个地标(landmark),可以快速识别并简化大型文档中的导航。

在本实验中,我们将学习如何使用 <main> 标签在 HTML 中创建一个主要内容容器。

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



Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/lists_desc("`Lists and Descriptions`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/LayoutandSectioningGroup -.-> html/nav_links("`Navigation and Links`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") subgraph Lab Skills html/basic_elems -.-> lab-70792{{"`HTML 主要内容`"}} html/head_elems -.-> lab-70792{{"`HTML 主要内容`"}} html/text_head -.-> lab-70792{{"`HTML 主要内容`"}} html/lists_desc -.-> lab-70792{{"`HTML 主要内容`"}} html/layout -.-> lab-70792{{"`HTML 主要内容`"}} html/nav_links -.-> lab-70792{{"`HTML 主要内容`"}} html/doc_flow -.-> lab-70792{{"`HTML 主要内容`"}} end

设置 HTML 文件

创建一个新文件并将其命名为 index.html。在你喜欢的代码编辑器中打开它。

在 HTML 文件的 <head> 部分,添加以下代码:

<!doctype html>
<html>
  <head>
    <title>Creating a Main Content Container in HTML</title>
  </head>
  <body></body>
</html>

添加页眉和页脚

为了让我们的网页看起来更完整,我们将添加一个页眉(header)和页脚(footer)。

在你的 HTML 文件的 <body> 标签之间添加以下代码:

<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
</header>

<main>
  <p>Welcome to my website. This is the main content area.</p>
</main>

<footer>
  <p>&copy;2021 My Website. All rights reserved.</p>
</footer>

以上代码定义了一个包含导航菜单的页眉、一个 <main> 标签以及一个页脚。

向 Main 标签添加内容

现在我们已经设置了页眉和页脚,接下来可以向 <main> 标签中添加内容。

<main> 标签之间添加以下代码:

<main>
  <h2>About Us</h2>
  <p>
    We are a company that specializes in web development services. Our team
    consists of experienced web developers who can help you create a website
    that will help your business grow.
  </p>
  <h2>Our Services</h2>
  <ul>
    <li>Web Design</li>
    <li>Web Development</li>
    <li>Search Engine Optimization</li>
    <li>Social Media Marketing</li>
  </ul>
  <h2>Our Portfolio</h2>
  <p>Here are some of the websites we have created:</p>
  <ul>
    <li><a href="#">Website 1</a></li>
    <li><a href="#">Website 2</a></li>
    <li><a href="#">Website 3</a></li>
  </ul>
</main>

查看最终的 HTML 代码

在添加了主要内容区域后,你的 HTML 代码应该如下所示:

<!doctype html>
<html>
  <head>
    <title>Creating a Main Content Container in HTML</title>
  </head>
  <body>
    <header>
      <h1>My Website</h1>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <h2>About Us</h2>
      <p>
        We are a company that specializes in web development services. Our team
        consists of experienced web developers who can help you create a website
        that will help your business grow.
      </p>
      <h2>Our Services</h2>
      <ul>
        <li>Web Design</li>
        <li>Web Development</li>
        <li>Search Engine Optimization</li>
        <li>Social Media Marketing</li>
      </ul>
      <h2>Our Portfolio</h2>
      <p>Here are some of the websites we have created:</p>
      <ul>
        <li><a href="#">Website 1</a></li>
        <li><a href="#">Website 2</a></li>
        <li><a href="#">Website 3</a></li>
      </ul>
    </main>

    <footer>
      <p>&copy;2021 My Website. All rights reserved.</p>
    </footer>
  </body>
</html>

总结

在本实验中,我们学习了如何使用 <main> 标签在 HTML 文档中创建一个主要内容容器。我们创建了一个页眉、主要内容区域和页脚,并填充了示例内容。请记住,<main> 标签的内容应该是唯一的,并且与文档的核心主题直接相关。通过使用 <main> 标签,我们可以创建一个易于识别的网站部分,帮助用户轻松导航。

您可能感兴趣的其他 HTML 教程