编辑“︁HTML区块元素”︁

{{Note|本教程适用于HTML初学者及需要复习布局概念的程序员。所有示例均遵循HTML5标准。}}

= HTML区块元素 =

'''HTML区块元素'''（Block-level Elements）是构成网页布局的基础结构单元，这些元素在页面中以独立区块的形式存在，默认情况下会占据父容器的整个水平空间，并在垂直方向堆叠排列。与[[#内联元素对比|内联元素]]不同，区块元素通常用于构建网页的主要结构框架。

== 核心特性 ==
区块元素具有以下关键特征：
* '''自动换行'''：前后默认带有换行符
* '''尺寸可控'''：可通过CSS设置明确的width/height
* '''包含关系'''：可包含其他区块元素或内联元素
* '''边距控制'''：默认带有margin（某些元素如<code><nowiki><p></nowiki></code>具有默认上下边距）

=== 标准区块元素示例 ===
{| class="wikitable"
! 元素标签 !! 语义用途
|-
| <code><nowiki><div></nowiki></code> || 通用内容容器
|-
| <code><nowiki><section></nowiki></code> || 文档主题分区
|-
| <code><nowiki><article></nowiki></code> || 独立内容区块
|-
| <code><nowiki><header></nowiki></code> || 页眉/章节头部
|-
| <code><nowiki><footer></nowiki></code> || 页脚/章节尾部
|-
| <code><nowiki><nav></nowiki></code> || 导航链接区
|-
| <code><nowiki><h1>-<h6></nowiki></code> || 标题层级
|}

== 基础代码示例 ==
以下示例展示典型区块元素的结构关系：

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
    <title>布局示例</title>
    <style>
        body { font-family: Arial; margin: 0; }
        header { background: #333; color: white; padding: 1rem; }
        nav { background: #444; padding: 0.5rem; }
        main { display: flex; min-height: 300px; }
        article { flex: 3; padding: 1rem; }
        aside { flex: 1; background: #f4f4f4; padding: 1rem; }
    </style>
</head>
<body>
    <header>
        <h1>网站标题</h1>
    </header>
    <nav>
        <a href="#">首页</a> | <a href="#">产品</a>
    </nav>
    <main>
        <article>
            <h2>主内容区</h2>
            <p>这是文章的主要内容...</p>
        </article>
        <aside>
            <h3>侧边栏</h3>
            <p>附加信息内容</p>
        </aside>
    </main>
    <footer>
        <p>© 2023 公司名称</p>
    </footer>
</body>
</html>
</syntaxhighlight>

{{Output|示例渲染效果|
+-----------------------------------+
|           网站标题               | ← header
+-----------------------------------+
| 首页 | 产品                      | ← nav
+---------------------+-------------+
| 主内容区            | 侧边栏      | ← main
| 这是文章的主要内容...| 附加信息    |  包含article和aside
+---------------------+-------------+
| © 2023 公司名称     | ← footer
+-----------------------------------+
}}

== 布局行为详解 ==

=== 盒子模型 ===
每个区块元素都遵循CSS盒子模型：

<mermaid>
graph TD
    A[元素内容] --> B[Padding 内边距]
    B --> C[Border 边框]
    C --> D[Margin 外边距]
</mermaid>

数学表达：
<math>总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right</math>

=== 堆叠规则 ===
区块元素默认按照文档流垂直排列：
<mermaid>
graph TD
    A[区块元素A] --> B[区块元素B]
    B --> C[区块元素C]
    style A fill:#f9f,stroke:#333
    style B fill:#bbf,stroke:#333
    style C fill:#9f9,stroke:#333
</mermaid>

== 实际应用案例 ==

=== 响应式布局 ===
结合CSS媒体查询创建自适应布局：

<syntaxhighlight lang="html">
<div class="container">
    <div class="row">
        <div class="col">左栏</div>
        <div class="col">中栏</div>
        <div class="col">右栏</div>
    </div>
</div>

<style>
    .row { display: flex; flex-wrap: wrap; }
    .col { flex: 1; min-width: 200px; padding: 1rem; }
    @media (max-width: 600px) {
        .col { flex: 100%; }
    }
</style>
</syntaxhighlight>

=== 卡片式布局 ===
现代网页常用的卡片组件实现：

<syntaxhighlight lang="html">
<article class="card">
    <header>
        <h2>产品名称</h2>
    </header>
    <div class="card-body">
        <img src="product.jpg" alt="产品图片">
        <p>产品描述文字...</p>
    </div>
    <footer>
        <button>加入购物车</button>
    </footer>
</article>

<style>
    .card {
        border: 1px solid #ddd;
        border-radius: 8px;
        width: 300px;
        overflow: hidden;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    .card-body { padding: 15px; }
    .card footer { 
        background: #f5f5f5;
        padding: 10px;
        text-align: center;
    }
</style>
</syntaxhighlight>

== 高级主题 ==

=== 语义化布局 ===
HTML5引入的语义元素比传统<div>更能表达结构含义：

<syntaxhighlight lang="html">
<body>
    <header>...</header>
    <nav>...</nav>
    <main>
        <article>
            <section>...</section>
            <section>...</section>
        </article>
        <aside>...</aside>
    </main>
    <footer>...</footer>
</body>
</syntaxhighlight>

=== 布局模式转换 ===
通过CSS display属性可以改变元素的默认布局行为：

<syntaxhighlight lang="css">
/* 将区块元素转为内联块 */
div.inline-block {
    display: inline-block;
    width: 200px;
}

/* 创建弹性容器 */
section.flex-container {
    display: flex;
    gap: 20px;
}

/* 创建网格布局 */
div.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
</syntaxhighlight>

== 最佳实践 ==
* 优先使用语义化元素（<code><nowiki><article></nowiki></code>、<code><nowiki><section></nowiki></code>等）
* 避免深层嵌套（一般不超过4-5层）
* 结合CSS Grid/Flexbox进行现代布局
* 为关键区块添加ARIA地标角色（如<code>role="main"</code>）

{{Warning|避免滥用<div>元素，应优先考虑语义化替代方案}}

== 参见 ==
* [[#内联元素对比|区块元素 vs 内联元素]]
* [[#CSS布局模型|相关CSS布局技术]]
* [[#浏览器兼容性|跨浏览器注意事项]]

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML布局元素]]