轻松上手,快乐学习!

HTML <main> 标签



实例

使用 main 标签来展示文档的主体部分:

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

  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome 是谷歌开发的网络浏览器,于 2008 年发布。Chrome 是当今世界上最受欢迎的网络浏览器!</p>
  </article>

  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox 是由 Mozilla 开发的开源网络浏览器。 自 2018 年 1 月以来,Firefox 一直是第二大最受欢迎的网络浏览器。</p>
  </article>

  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge 是微软开发的一款网络浏览器,于 2015 年发布。Microsoft Edge 取代了 Internet Explorer。</p>
  </article>
</main>
亲自试一试 »

下面有更多实例。


定义和用法

<main> 标签用于指定文档的主体内容。

<main> 标签中的内容在文档中是唯一的。它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。

注意 在一个文档中,<main> 元素是唯一的,所以不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代:<article>、<aside>、<footer>、<header> 或 <nav>。


浏览器支持

表中的数字指完全支持该元素的第一个浏览器版本。

元素
<main> 26.0 12.0 21.0 7.0 16.0

全局属性

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


事件属性

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


更多实例

实例

使用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 class="browser">
    <h2>Google Chrome</h2>
    <p>Google Chrome 是谷歌开发的网络浏览器,于 2008 年发布。Chrome 是当今世界上最受欢迎的网络浏览器!</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox 是由 Mozilla 开发的开源网络浏览器。 自 2018 年 1 月以来,Firefox 一直是第二大最受欢迎的网络浏览器。</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge 是微软开发的一款网络浏览器,于 2015 年发布。Microsoft Edge 取代了 Internet Explorer。</p>
  </article>
</main>

</body>
</html>
亲自试一试 »