PHP小码农

Appearance

section 章节 ​

<section> 元素表示文档或 <article> 中的一个通用章节或主题分组。它需要一个标题（h1-h6）来标识该章节的主题。<section> 是构建文档大纲的重要元素，用于将相关内容进行逻辑分组。

前置知识

阅读本节前，建议先了解：article 文章

基础概念 ​

什么是 section ​

<section> 是 HTML5 语义化标签中最通用的分区元素，用于将文档内容按主题进行分组。与 <div> 不同，<section> 表示内容的一个逻辑章节，应该具有明确的主题，并配有标题元素。

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>section 示例</title>
</head>
<body>
  <main>
    <article>
      <h1>CSS Flexbox 教程</h1>

      <!-- 每个主题区域使用 section -->
      <section>
        <h2>什么是 Flexbox</h2>
        <p>Flexbox 是一种一维布局模型...</p>
      </section>

      <section>
        <h2>容器属性</h2>
        <p>Flexbox 容器有 6 个主要属性...</p>
      </section>

      <section>
        <h2>项目属性</h2>
        <p>Flex 项目的属性可以控制...</p>
      </section>
    </article>
  </main>
</body>
</html>

section 的隐式角色 ​

属性值说明
隐式角色region当 section 有可访问名称时
可访问名称通过标题或 aria-label没有标题时不是 landmark

如果 <section> 没有标题（或 aria-label），它不会被视为 landmark，屏幕阅读器不会将其列入 landmark 列表。

语法与使用 ​

基本语法 ​

html
<section>
  <h2>章节标题</h2>
  <!-- 章节内容 -->
  <p>段落内容...</p>
</section>

section 的使用规则 ​

规则说明
必须有标题使用 h1-h6 或 aria-label/aria-labelledby
不能用作纯样式容器纯样式目的使用 <div>
表示主题分组语义上应该代表一个主题或功能区域
可以嵌套section 内可以包含 section

section 可以包含的内容 ​

html
<section>
  <!-- 标题（必需） -->
  <h2>章节标题</h2>

  <!-- 段落 -->
  <p>正文内容...</p>

  <!-- 列表 -->
  <ul>
    <li>项目 1</li>
    <li>项目 2</li>
  </ul>

  <!-- 图表 -->
  <figure>
    <img src="diagram.png" alt="示意图">
    <figcaption>图1：概念示意图</figcaption>
  </figure>

  <!-- 嵌套的 section -->
  <section>
    <h3>子章节标题</h3>
    <p>子章节内容...</p>
  </section>
</section>

详细说明 ​

section vs div ​

选择 <section> 还是 <div> 是开发者经常面临的问题。核心判断标准：内容是否构成一个独立的主题章节。

html
<!-- 适合用 section：有明确的主题和标题 -->
<section>
  <h2>产品特性</h2>
  <p>我们的产品具有以下特性...</p>
  <ul>
    <li>高性能</li>
    <li>易使用</li>
    <li>可扩展</li>
  </ul>
</section>

<!-- 适合用 div：纯粹的样式容器，没有语义含义 -->
<div class="card-layout">
  <div class="card">卡片1</div>
  <div class="card">卡片2</div>
  <div class="card">卡片3</div>
</div>

<!-- 适合用 section：功能性的区域 -->
<section>
  <h2>用户评价</h2>
  <div class="testimonial">...</div>
  <div class="testimonial">...</div>
</section>

section 的标题要求 ​

<section> 必须包含标题元素。如果没有标题，应该使用 <div> 替代：

html
<!-- 正确：section 有标题 -->
<section>
  <h2>产品特性</h2>
  <p>...</p>
</section>

<!-- 正确：使用 aria-label 提供名称 -->
<section aria-label="产品特性">
  <p>...</p>
</section>

<!-- 错误：section 没有标题 -->
<section>
  <p>一些段落...</p>
  <p>另一些段落...</p>
</section>

<!-- 应该改为 div -->
<div>
  <p>一些段落...</p>
  <p>另一些段落...</p>
</div>

section 在不同上下文中的使用 ​

1. 页面级 section ​

html
<main>
  <section id="about">
    <h2>关于我们</h2>
    <p>我们是一家专注于前端技术的公司...</p>
  </section>

  <section id="services">
    <h2>我们的服务</h2>
    <p>我们提供以下服务...</p>
  </section>

  <section id="contact">
    <h2>联系我们</h2>
    <p>通过以下方式联系我们...</p>
  </section>
</main>

2. article 内的 section ​

html
<article>
  <h1>CSS Grid 详解</h1>
  <p>本文将深入讲解 CSS Grid 布局...</p>

  <section id="grid-basics">
    <h2>Grid 基础</h2>
    <p>Grid 的核心概念...</p>
  </section>

  <section id="grid-template">
    <h2>Grid 模板</h2>
    <p>定义网格的结构...</p>
  </section>

  <section id="grid-alignment">
    <h2>Grid 对齐</h2>
    <p>控制网格项的对齐方式...</p>
  </section>
</article>

3. aside 内的 section ​

html
<aside>
  <section>
    <h2>热门标签</h2>
    <ul>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">HTML</a></li>
    </ul>
  </section>

  <section>
    <h2>近期文章</h2>
    <ul>
      <li><a href="#">文章1</a></li>
      <li><a href="#">文章2</a></li>
    </ul>
  </section>
</aside>

实战示例 ​

单页面网站的 section 布局 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>单页面网站 - section 示例</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, sans-serif; color: #333; }

    /* 页面头部 */
    .site-header {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      background: rgba(0,0,0,0.85); color: #fff; padding: 1rem 2rem;
      display: flex; justify-content: space-between; align-items: center;
    }
    .site-header nav a { color: rgba(255,255,255,0.85); text-decoration: none; margin-left: 1.5rem; }
    .site-header nav a:hover { color: #fff; }

    /* 每个区域都是 section */
    section { padding: 5rem 2rem; }
    section h2 { font-size: 2rem; text-align: center; margin-bottom: 1rem; }
    section .subtitle { text-align: center; color: #666; margin-bottom: 3rem; max-width: 600px; margin-left: auto; margin-right: auto; }

    /* 首屏 section */
    #hero {
      min-height: 100vh; display: flex; align-items: center;
      justify-content: center; text-align: center;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: #fff; padding-top: 0;
    }
    #hero h1 { font-size: 3rem; margin-bottom: 1rem; }
    #hero p { font-size: 1.25rem; opacity: 0.9; max-width: 600px; margin: 0 auto 2rem; }

    /* 特性 section */
    #features { background: #fff; }
    .features-grid {
      max-width: 1000px; margin: 0 auto;
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
    }
    .feature-card { text-align: center; padding: 2rem; }
    .feature-icon { font-size: 2.5rem; margin-bottom: 1rem; }
    .feature-card h3 { margin-bottom: 0.5rem; }
    .feature-card p { color: #666; font-size: 0.9rem; }

    /* 价格 section */
    #pricing { background: #f8f9fa; }
    .pricing-grid {
      max-width: 1000px; margin: 0 auto;
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
    }
    .pricing-card {
      background: #fff; padding: 2rem; border-radius: 8px;
      text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    .pricing-card h3 { margin-bottom: 1rem; color: #2c3e50; }
    .pricing-card .price { font-size: 2rem; font-weight: 700; color: #3498db; margin-bottom: 1rem; }
    .pricing-card ul { list-style: none; margin-bottom: 1.5rem; }
    .pricing-card li { padding: 0.5rem 0; color: #555; }
    .btn {
      display: inline-block; padding: 0.75rem 2rem;
      background: #3498db; color: #fff; border: none;
      border-radius: 4px; text-decoration: none; cursor: pointer;
    }

    /* 联系 section */
    #contact { background: #fff; }
    .contact-form {
      max-width: 500px; margin: 0 auto;
    }
    .contact-form label { display: block; margin-bottom: 0.25rem; font-weight: 500; }
    .contact-form input, .contact-form textarea, .contact-form select {
      width: 100%; padding: 0.75rem; margin-bottom: 1rem;
      border: 1px solid #ddd; border-radius: 4px; font-size: 1rem;
    }
    .contact-form textarea { height: 120px; resize: vertical; }

    /* 响应式 */
    @media (max-width: 768px) {
      .features-grid, .pricing-grid { grid-template-columns: 1fr; }
      #hero h1 { font-size: 2rem; }
    }
  </style>
</head>
<body>
  <header class="site-header">
    <h1>MyProduct</h1>
    <nav aria-label="主导航">
      <a href="#hero">首页</a>
      <a href="#features">特性</a>
      <a href="#pricing">价格</a>
      <a href="#contact">联系</a>
    </nav>
  </header>

  <main>
    <!-- 首屏 section -->
    <section id="hero">
      <div>
        <h1>打造更好的产品</h1>
        <p>我们的平台帮助企业快速构建高质量的 Web 应用</p>
        <a href="#contact" class="btn">开始使用</a>
      </div>
    </section>

    <!-- 特性 section -->
    <section id="features">
      <h2>核心特性</h2>
      <p class="subtitle">我们提供全面的解决方案，帮助您的团队更高效地工作</p>
      <div class="features-grid">
        <div class="feature-card">
          <div class="feature-icon">&#9889;</div>
          <h3>高性能</h3>
          <p>采用最新技术栈，确保应用响应迅速、体验流畅</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">&#128274;</div>
          <h3>安全可靠</h3>
          <p>企业级安全防护，数据加密存储，多层权限管理</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">&#128640;</div>
          <h3>快速部署</h3>
          <p>一键部署到云端，支持自动扩缩容，省时省力</p>
        </div>
      </div>
    </section>

    <!-- 价格 section -->
    <section id="pricing">
      <h2>定价方案</h2>
      <p class="subtitle">选择适合您团队的方案，随时可以升级或降级</p>
      <div class="pricing-grid">
        <div class="pricing-card">
          <h3>基础版</h3>
          <p class="price">免费</p>
          <ul>
            <li>5 个项目</li>
            <li>1GB 存储</li>
            <li>社区支持</li>
          </ul>
          <a href="#" class="btn">开始使用</a>
        </div>
        <div class="pricing-card">
          <h3>专业版</h3>
          <p class="price">¥99/月</p>
          <ul>
            <li>无限项目</li>
            <li>50GB 存储</li>
            <li>优先支持</li>
          </ul>
          <a href="#" class="btn">升级</a>
        </div>
        <div class="pricing-card">
          <h3>企业版</h3>
          <p class="price">定制</p>
          <ul>
            <li>无限一切</li>
            <li>专属服务器</li>
            <li>7x24 支持</li>
          </ul>
          <a href="#" class="btn">联系销售</a>
        </div>
      </div>
    </section>

    <!-- 联系 section -->
    <section id="contact">
      <h2>联系我们</h2>
      <p class="subtitle">有任何问题？请填写以下表单，我们会尽快回复</p>
      <form class="contact-form">
        <label for="name">姓名</label>
        <input type="text" id="name" name="name" required>
        <label for="email">邮箱</label>
        <input type="email" id="email" name="email" required>
        <label for="message">留言</label>
        <textarea id="message" name="message" required></textarea>
        <button type="submit" class="btn">发送消息</button>
      </form>
    </section>
  </main>
</body>
</html>

注意事项 ​

常见错误 ​

  1. section 没有标题：违反规范，<section> 必须有标题或 aria-label
  2. 用 section 代替 div：section 用于语义分组，不是样式的替代品
  3. 过度使用 section：简单的段落不需要用 section 包裹
  4. section 内只有一句话：单个段落不需要 section
html
<!-- 错误：section 内只有一段话 -->
<section>
  <p>这是一段话。</p>
</section>
<!-- 应该直接使用 p -->
<p>这是一段话。</p>

<!-- 正确：section 有标题和完整内容 -->
<section>
  <h2>产品介绍</h2>
  <p>我们的产品...</p>
  <ul>...</ul>
</section>

最佳实践 ​

  1. 始终为 section 提供标题：使用 h1-h6 或 aria-label
  2. 合理嵌套：section 内可以包含 section，但避免嵌套过深
  3. 使用 id 作为锚点：为 section 添加 id，方便导航和跳转
  4. 区分 section 和 div：有主题分组用 section，纯样式用 div
  5. 配合 header/footer 使用：section 内可以有 header 和 footer

下一节

继续学习：aside 侧边栏

参考链接 ​