阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      HTML main 标签

      HTML <main> 标签功能

      HTML <main> 元素呈现了文档的 <body> 或应用的主体部分。

      主体部分由与文档直接相关,或者扩展于文档的中心主题、应用的主要功能部分的内容组成。

      使用说明

      在文档中,<main> 元素的内容应当是独一无二的。任何同时存在于任意一系列文档中的相同、重复内容,比如侧边栏、导航栏链接、版权信息、网站 Logo,搜索框(除非搜索框为文档的主要功能),都不应当被包含在其内。

      <main> 对文档的大纲(outline)没有贡献;也就是说,它与诸如 <body> 之类的元素,诸如 <h2> 之类的标题等不同,<main> 不会影响 DOM 的页面结构概念。

      它仅有提供信息的作用。(原文:It’s strictly informative.)

      示例

      <!-- 其他内容 -->
      <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>
      <!-- 其他内容 -->
      

      可访问性相关

      界标 Landmark

      <main>元素的行为就像一个main地标性角色。辅助技术可以使用地标来快速识别和导航到文档的大部分。除非<main>声明role=“main”有旧版浏览器支持问题,否则最好使用元素声明。

      直达内容 Skip navigation

      跳过导航,也称为“ skipnav”,是一种允许辅助技术用户快速绕过大部分重复内容(主导航,信息标语等)的技术。这使用户可以更快地访问页面的主要内容。

      在元素上添加id属性 <main> 可以使其成为跳过导航链接的目标。

      <body>
        <a href="#main-content">Skip to main content</a>
      
        <!-- navigation and header content -->
      
        <main id="main-content">
          <!-- main page content -->
        </main>
      </body>
      

      阅读器模式 Reader mode

      将内容转换为专门的阅读器视图时main,浏览器阅读器模式功能将查找该元素的存在以及标题和内容分段元素。

      全局属性

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

      事件属性

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

      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录