HTML <main> 标签

定义和用法

<main> 标签规定文档的主要内容。

<main> 元素中的内容对于文档应该是唯一的。不应包含在多个文档中重复出现的内容，例如侧边栏、导航链接、版权信息、网站标志和搜索表单等。

注意：文档中不能有多个 <main> 元素。 <main> 元素不能是 <article>、<aside>、<footer>、<header> 或 <nav> 元素的后代元素。

实例

例子 1

指定文档的主要内容：

<main>
  <h1>最流行的浏览器</h1>
  <p>Chrome、Firefox 和 Edge 是当今使用最多的浏览器。</p>

  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome 是谷歌开发的网络浏览器，于 2008 年发布......</p>
  </article>

  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox 是由 Mozilla 开发的开源网络浏览器......&</p>
  </article>

  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge 是微软开发的一款网络浏览器，于 2015 年发布......&</p>
  </article>
</main>

亲自试一试

例子 2

使用 CSS 设置 <main> 元素的样式：

<html>
<head>
<style>
main {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}

main > h1, p, .browser {
  margin: 10px;
  padding: 5px;
}

.browser {
  background: white;
}

.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
</style>
</head>
<body>

<main>
  <h1>最流行的浏览器</h1>
  <p>Chrome、Firefox 和 Edge 是当今使用最多的浏览器。</p>

  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome 是谷歌开发的网络浏览器，于 2008 年发布......</p>
  </article>

  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox 是由 Mozilla 开发的开源网络浏览器......&</p>
  </article>

  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge 是微软开发的一款网络浏览器，于 2015 年发布......&</p>
  </article>
</main>

</body>
</html>

亲自试一试

全局属性

<main> 标签还支持 HTML 中的全局属性。

事件属性

<main> 标签还支持 HTML 中的事件属性。

浏览器支持

表中的数字注明了首个完全支持该标签的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 12.0 21.0 7.0 16.0