• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • <main>

    版本:HTML5

    HTML<main>元素呈现了文档的<body>。主要内容区域和文档核心主题或应用程序中心功能直接相关与扩展的内容组成。

    浏览器支持

    所有主流浏览器都支持<main>标签。

    示例

    <main>
      这里是主体内容。
    </main>
    

    使用说明

    • 在文档中,<main>元素的内容应当是独一无二的。任何同时存在于任意一系列文档中的相同、重复内容,比如侧边栏、导航栏链接、版权信息、网站 Logo,搜索框(除非搜索框为文档的主要功能),都不应当被包含在其内。
    • <main>对文档的大纲(outline)没有贡献;也就是说,它与诸如<body>之类的元素,诸如<h2>之类的标题等不同,<main>不会影响DOM的页面结构概念。它仅有提供信息的作用。
    内容分类流式内容,可触知内容。
    允许的内容流式内容元素
    标签省略不允许,开始标签和结束标签都不能省略。
    允许的父元素任何支持流内容但可能不是继承元素的元素<article>,<aside>,<footer>,<header>,或<nav>
    允许的 ARIA roles<main>元素默认就有 main 角色,同时也允许使用 presentation 角色。
    DOM 接口HTMLElement

    WHATWG 和 W3C 规范之间的差异

    <main>元素的定义在 WHATWG 的现行标准(这是 MDN(Mozilla 开发者网络)按照惯例使用规范)和 W3C 规范大不相同。与上面给出的描述相比,这两个规范之间的区别是:

    • HTML 的 WHATWG 现行标准允许页面中有多个<main>元素,而W3C 版本的规范不允许,除非其中除了一个之外,都使用 hidden 属性隐藏。
    • WHATWG 规范允许在流式内容的任何地方使用<main>。另一方面,W3C 版本的规范不允许<main>成为<article>,<aside>,<footer>,<header>,或<nav>的后代。

    这似乎是一小段差异,但是在功能层面上,<main>元素是非常简单的,所以如果不牢记这些差异,这些差异的存在就会产生重大后果。

    属性

    此元素仅包含全局属性。

    事件属性

    <main>元素支持 HTML 的事件属性。

    例子

    <!-- 其他内容 -->
    
    <main>
      <h1>apples</h1>
      <p>the apple is the pomaceous fruit of the apple tree.</p>
      
      <article>
        <h2>red delicious</h2>
        <p>these bright red apples are the most common found in many
        supermarkets.</p>
        <p>... </p>
        <p>... </p>
      </article>
    
      <article>
        <h2>granny smith</h2>
        <p>these juicy, green apples make a great filling for
        apple pies.</p>
        <p>... </p>
        <p>... </p>
      </article>
    </main>
    <!-- 其他内容 -->
    

    上篇:<section>

    下篇:<header>