HTML - <main> 标签

HTML <main> 标签用于表示 HTML body 元素的主要内容。它指定文档的主要或重要内容。

它每个页面只能使用一次，并且不能用作 article、aside、footer、header 和 nav 元素的后代。<main> 标签的内容应针对文档唯一。<main> 标签不会影响 DOM 对页面结构的理解。

语法

<main>
   .....
</main>

属性

HTML main 标签支持 HTML 的全局和事件属性。

HTML main 标签示例

下面的示例将说明 main 标签的使用方法。在哪里、何时以及如何使用 main 标签创建网站的主要元素。

创建文档的主要内容

以下示例代码展示了 HTML <main> 标签的使用方法。当我们运行上述代码时，它将生成一个输出，其中包含显示在网页上的文本。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML main Tag</title>
</head>

<body>
   <!--create a main element-->
   <p>Example of the HTML 'main' element(tag).</p>
   <main>
      <article>
         <h1>HTML</h1>
         <p>Hyper Text Markup Language</p>
         <p>
            The HyperText Markup Language or HTML is the 
            standard markup language for documents designed
            to be displayed in a web browser.
         </p>
         <h1>CSS</h1>
         <p>Cascading Style Sheet</p>
      </article>
   </main>
</body>

</html>

设置页面主要内容的样式

考虑以下示例，我们将使用 <main> 标签并应用 CSS 属性来设置主要元素的样式。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML main Tag</title>
   <style>
      header {
         font-size: 10px;
      }

      main {
         background-color: green;
         color: white;
         padding: 10px;
      }

      main p {
         margin: 10px 10px;
      }
   </style>
</head>

<body>
   <header>Frontend Development</header>
   <!--create a main element-->
   <main>
      <p>
         Front-end web development is the development
         of the graphical user interface of a website.
      </p>
      <p>
         Through the use of HTML, CSS, and JavaScript,
         so that users can view and interact with that 
         website.
      </p>
   </main>
</body>

</html>

导航到主要内容

在此示例中，我们正在创建一个锚链接，其中包含“main”元素的“id”作为源（目标）。当用户点击锚链接时，它将跳过导航链接（即链接和主要元素之间）。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML main Tag</title>
   <style>
      ul {
         list-style: none;
         height: 1600px;
      }

      ul li {
         width: 100px;
         background-color: lightgreen;
         padding: 10px;
         border-bottom: 1px solid black;
      }

      ul li a {
         text-decoration: none;
         margin: 10px;
      }

      main {
         padding: 10px;
      }
   </style>
</head>

<body>
   <p>Example of the HTML 'main' element</p>
   <a href="#maincontent">Skip to main content</a>
   <nav>
      <ul>
         <li>
            <a href="">Home</a>
         </li>
         <li>
            <a href="">About</a>
         </li>
         <li>
            <a href="">Blog</a>
         </li>
         <li>
            <a href="">Contact Us</a>
         </li>
      </ul>
   </nav>
   <main id="maincontent"> 
      <p>
         It can be used only once per page and can’t use 
         as a descendent of the article, aside, footer, header, 
         and nav elements.

         The content of the <main> tag should be unique to
         the document. The <main> tag does not affect the 
         DOM’s concept of the structure of the page.
      </p> 
   </main>
</body>

</html>

支持的浏览器

标签
main	是 26.0	是 12.0	是 21.0	是 7.0	是 16.0

html_tags_reference.htm

打印页面