HTML5 <section> 标签完全指南

📖 什么是 <section> ？

<section> 是 HTML5 引入的语义化块级元素，用于定义文档或应用中一个独立的、通用的区域。
   比如章节、页眉、页脚或论文的节。它通常包含一个标题（h1-h6），并且内容在逻辑上必须形成一个完整的整体。

✅ 正确使用场景

• 带有标题的内容区块（如：章节、标签页、论文部分）
• 小部件或应用中的卡片区块
• 对长文档进行分节

❌ 常见误区

• 不要仅仅为了添加样式而使用 <section> —— 那应该用 <article>？不，单纯的样式容器应该用 <span> 或保持纯文本。
• 如果内容可以独立分发（像一篇新闻、一篇帖子），请使用 <article> 而不是 <section>。

🔍 <section> 与 <article> 对比

下表清晰地展示了两者的主要区别：

🧪 实例1：简单的文章章节

下面的例子用 <section> 划分一篇教程的不同部分：

<h1>CSS 基础教程</h1>

<section>
    <h2>1. 选择器入门</h2>
    <p>CSS 选择器用于定位你希望样式化的 HTML 元素。例如元素选择器 p 将选中所有段落。</p>
</section>

<section>
    <h2>2. 盒模型详解</h2>
    <p>每个元素都是一个矩形盒子，包含 margin, border, padding 和 content。</p>
    <!-- 内部可以再嵌套 section 表示子节 -->
    <section>
        <h3>2.1 内边距(padding)</h3>
        <p>padding 在边框和内容之间。</p>
    </section>
    <section>
        <h3>2.2 外边距(margin)</h3>
        <p>margin 在边框之外，用于控制元素间距。</p>
    </section>
</section>

说明：每个 <section> 通常都带有一个标题（h1~h6），使结构清晰。

🧪 实例2：商品详情页面区块

电商详情页非常适合用 <section> 区分不同功能模块：

<h1>商品名称：复古蓝牙音箱</h1>

<section>
    <h2>📦 商品规格</h2>
    <table border="1" cellpadding="5">
        <tr><th>颜色</th><td>胡桃棕/经典黑</td></tr>
        <tr><th>电池续航</th><td>12小时</td></tr>
        <tr><th>蓝牙版本</th><td>5.3</td></tr>
    </table>
</section>

<section>
    <h2>⭐ 用户评价 (平均 4.8 星)</h2>
    <article>
        <h3>好评：音质太棒了！</h3>
        <p>低音浑厚，外观复古，非常喜欢。—— 张先生</p>
    </article>
    <article>
        <h3>中评：连接距离稍短</h3>
        <p>隔一堵墙声音会断，但音质可以。—— 李小姐</p>
    </article>
</section>

<section>
    <h2>📦 物流与售后</h2>
    <p>全场包邮，7天无理由退换，1年质保。</p>
</section>

🧪 实例3：带嵌套的博客文章结构

一个典型的博客文章页面，外层用 <article>，内部用 <section> 分隔：

<article>
    <h1>如何制作一杯手冲咖啡</h1>
    <p><strong>作者：</strong>咖啡师小赵</p>

    <section>
        <h2>1. 准备工作</h2>
        <ul>
            <li>手冲壶</li>
            <li>滤纸</li>
            <li>新鲜咖啡豆 15g</li>
            <li>热水 92℃ 250ml</li>
        </ul>
    </section>

    <section>
        <h2>2. 冲泡步骤</h2>
        <ol>
            <li>折叠滤纸并放入滤杯，用热水冲洗滤纸（去除纸味并温杯）。</li>
            <li>倒入研磨好的咖啡粉（细砂糖粗细）。</li>
            <li>第一次注水 40ml，闷蒸 30 秒。</li>
            <li>第二次注水至 150ml，等待滤干。</li>
            <li>第三次注水至 250ml，完成萃取。</li>
        </ol>
    </section>

    <section>
        <h2>3. 风味品鉴</h2>
        <p>这款豆子带有柑橘和巧克力的香气，酸度明亮。</p>
        <table border="1">
            <tr><th>酸度</th><td>●●●○○</td></tr>
            <tr><th>苦度</th><td>●●○○○</td></tr>
            <tr><th>醇厚度</th><td>●●●○○</td></tr>
        </table>
    </section>
</article>

📌 总结

• <section> 用于对相关内容进行主题分组，通常带标题。
• 它不是通用容器（通用容器应使用纯文本或 <article> 根据语境决定）。
• 与 <article> 嵌套使用时，<section> 负责内部结构划分。
• 合理使用 <section> 能提升文档的可访问性（对屏幕阅读器友好）以及 SEO 的语义理解。