Web学习网站

Appearance

<main> 标签 ​

<main> 标签用于定义文档的主要内容。它表示文档或应用程序的核心内容，与页面的主导航、页眉、页脚等辅助内容区分开来。

概述 ​

<main> 标签是 HTML5 中引入的语义化标签，用于标识文档的主要内容区域。每个文档中应该只有一个 <main> 元素，且不应嵌套在其他语义地标元素（如 <article>、<aside>、<footer>、<header> 或 <nav>）中。

语法 ​

html
<main>
  <!-- 主要内容 -->
</main>

基本用法 ​

简单页面结构 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>main 标签示例</title>
</head>
<body>
  <header>
    <h1>网站标题</h1>
    <nav>
      <ul>
        <li><a href="#home">首页</a></li>
        <li><a href="#about">关于</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <h2>页面主要内容</h2>
    <p>这是页面的核心内容，与页眉、导航、页脚等辅助内容区分开来。</p>
  </main>
  
  <footer>
    <p>&copy; 2023 我的网站</p>
  </footer>
</body>
</html>

与文章内容结合 ​

html
<main>
  <article>
    <h1>文章标题</h1>
    <p>文章内容...</p>
  </article>
  
  <article>
    <h1>另一篇文章</h1>
    <p>文章内容...</p>
  </article>
</main>

实际示例 ​

完整网页结构 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>main 标签示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    
    header {
      background-color: #333;
      color: white;
      padding: 1rem;
    }
    
    nav ul {
      list-style: none;
      padding: 0;
      display: flex;
      gap: 1rem;
    }
    
    nav a {
      color: white;
      text-decoration: none;
    }
    
    main {
      padding: 2rem;
      max-width: 1200px;
      margin: 0 auto;
    }
    
    aside {
      background-color: #f4f4f4;
      padding: 1rem;
      margin: 1rem 0;
    }
    
    footer {
      background-color: #333;
      color: white;
      text-align: center;
      padding: 1rem;
      margin-top: 2rem;
    }
  </style>
</head>
<body>
  <header>
    <h1>我的网站</h1>
    <nav>
      <ul>
        <li><a href="#home">首页</a></li>
        <li><a href="#about">关于</a></li>
        <li><a href="#services">服务</a></li>
        <li><a href="#contact">联系</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <h2>欢迎来到我的网站</h2>
    <p>这是网站的主要内容区域。</p>
    
    <section>
      <h3>关于我们</h3>
      <p>我们是一家专业的网页开发公司...</p>
    </section>
    
    <section>
      <h3>我们的服务</h3>
      <p>我们提供以下服务...</p>
      
      <aside>
        <h4>特别优惠</h4>
        <p>现在订购享受 20% 折扣！</p>
      </aside>
    </section>
  </main>
  
  <footer>
    <p>&copy; 2023 我的网站. 保留所有权利。</p>
  </footer>
</body>
</html>

无障碍访问 ​

跳转到主要内容 ​

html
<a href="#main-content" class="skip-link">跳转到主要内容</a>

<header>
  <h1>网站标题</h1>
  <nav>...</nav>
</header>

<main id="main-content" tabindex="-1">
  <h2>主要内容</h2>
  <p>页面的核心内容...</p>
</main>

<style>
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #000;
  color: #fff;
  padding: 8px;
  text-decoration: none;
}

.skip-link:focus {
  top: 6px;
}
</style>

与相关标签的区别 ​

与 <div> 的区别 ​

html
<!-- 不推荐：使用 div 表示主要内容 -->
<div id="main-content">
  <h1>主要内容</h1>
  <p>页面内容...</p>
</div>

<!-- 推荐：使用语义化的 main 标签 -->
<main>
  <h1>主要内容</h1>
  <p>页面内容...</p>
</main>

与 <article> 的区别 ​

html
<!-- main 表示整个页面的主要内容 -->
<main>
  <!-- article 表示独立的文章内容 -->
  <article>
    <h2>文章标题</h2>
    <p>文章内容...</p>
  </article>
  
  <article>
    <h2>另一篇文章</h2>
    <p>文章内容...</p>
  </article>
</main>

最佳实践 ​

  1. 唯一性：每个页面只使用一个 <main> 标签
  2. 语义化：只在表示文档主要内容时使用
  3. 不嵌套：不要在 <article>、<aside>、<footer>、<header> 或 <nav> 中使用
  4. 无障碍访问：提供跳转到主要内容的链接
  5. SEO 友好：搜索引擎会识别 <main> 标签中的内容为主要页面内容

浏览器兼容性 ​

<main> 标签在所有现代浏览器中都得到支持：

  • Chrome 26+
  • Firefox 21+
  • Safari 7+
  • Edge
  • Internet Explorer 11+

对于不支持的旧浏览器，可以通过 CSS 显示声明为块级元素：

css
main {
  display: block;
}

注意事项 ​

  1. <main> 标签是块级元素
  2. 每个文档只能有一个 <main> 元素
  3. <main> 元素不应嵌套在其他语义地标元素中
  4. <main> 标签没有默认样式，需要通过 CSS 设置
  5. 考虑无障碍访问，提供跳转到主要内容的链接

相关标签 ​