1 Star 0 Fork 1

小弟调调 / html-tutorial

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
main.md 3.10 KB
AI 代码解读
一键复制 编辑 原始数据 按行查看 历史
小弟调调 提交于 2022-05-01 14:37 . doc: add tag document.

HTML <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 是 Microsoft 开发的 Web 浏览器,于 2015 年发布。Microsoft Edge 取代了 Internet Explorer。</p>
  </article>
</main>

定义和用法

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

<main> 元素内的内容对于文档应该是唯一的。 它不应包含在文档中重复的任何内容,例如侧边栏、导航链接、版权信息、站点徽标和搜索表单。

注意: 文档中的 <main> 元素不得超过一个。 <main> 元素不能是 <article><aside><footer><header><nav> 元素的后代。

浏览器支持

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

Element chrome edge firefox safari opera
<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 是 Microsoft 开发的 Web 浏览器,于 2015 年发布。Microsoft Edge 取代了 Internet Explorer。</p>
    </article>
  </main>
</body>
</html>
1
https://gitee.com/jaywcjlove/html-tutorial.git
git@gitee.com:jaywcjlove/html-tutorial.git
jaywcjlove
html-tutorial
html-tutorial
main

搜索帮助