编辑“︁HTML布局技术”︁

{{DISPLAYTITLE:HTML布局技术}}

'''HTML布局技术'''是构建网页视觉结构的核心方法，通过语义化元素和CSS的配合实现内容的逻辑分组与空间分配。本文将系统介绍传统与现代的HTML布局方案及其应用场景。

== 概述 ==
HTML布局指通过特定元素或技术将网页内容划分为可管理的区块（如页眉、导航栏、主内容区等）。随着Web标准演进，布局技术从早期的表格布局发展到现代的[[CSS Flexbox]]和[[CSS Grid]]。

=== 历史演变 ===
* '''表格布局（1990s）'''：使用{{code|lang=html|code=<table>}}元素实现，现已被淘汰
* '''浮动布局（2000s）'''：依赖{{code|lang=html|code=float}}属性，需清除浮动
* '''现代布局（2010s+）'''：基于Flexbox和Grid的响应式设计

== 核心布局元素 ==
以下是HTML5引入的语义化布局元素：

{| class="wikitable"
! 元素 !! 描述 !! 示例代码
|-
| {{code|lang=html|code=<header>}} || 定义文档或区块的页眉 || {{code|lang=html|code=<header><h1>网站标题</h1></header>}}
|-
| {{code|lang=html|code=<nav>}} || 导航链接容器 || {{code|lang=html|code=<nav><a href="/">首页</a></nav>}}
|-
| {{code|lang=html|code=<main>}} || 文档主要内容 || {{code|lang=html|code=<main><article>...</article></main>}}
|-
| {{code|lang=html|code=<footer>}} || 文档或区块的页脚 || {{code|lang=html|code=<footer>版权信息</footer>}}
|}

== 布局技术详解 ==
=== 1. 传统浮动布局 ===
通过{{code|lang=css|code=float}}属性实现多栏布局，需配合清除浮动：

<syntaxhighlight lang="html">
<div class="container">
  <div style="float: left; width: 30%;">左侧栏</div>
  <div style="float: right; width: 70%;">主内容</div>
  <div style="clear: both;"></div>
</div>
</syntaxhighlight>

'''缺点'''：需要手动计算宽度，不支持垂直居中

=== 2. Flexbox布局 ===
弹性盒子模型（Flexible Box）提供一维布局解决方案：

<mermaid>
graph TD
    A[flex容器] --> B[主轴 main axis]
    A --> C[交叉轴 cross axis]
    B --> D[flex-start]
    B --> E[flex-end]
    B --> F[space-between]
</mermaid>

<syntaxhighlight lang="html">
<div style="display: flex; justify-content: space-between;">
  <div style="width: 20%;">菜单</div>
  <div style="width: 60%;">内容</div>
  <div style="width: 20%;">边栏</div>
</div>
</syntaxhighlight>

'''关键属性'''：
* {{code|lang=css|code=flex-direction}} (row/column)
* {{code|lang=css|code=justify-content}} (主轴对齐)
* {{code|lang=css|code=align-items}} (交叉轴对齐)

=== 3. CSS Grid布局 ===
二维网格系统，适合复杂布局：

<math>
\text{网格面积} = \text{行高} \times \text{列宽}
</math>

<syntaxhighlight lang="html">
<div style="display: grid; grid-template-columns: 1fr 2fr 1fr;">
  <div style="grid-column: 1 / 4;">页眉</div>
  <div>左侧</div>
  <div>主内容</div>
  <div>右侧</div>
</div>
</syntaxhighlight>

'''核心概念'''：
* {{code|lang=css|code=fr}} 单位（分数剩余空间）
* {{code|lang=css|code=grid-template-areas}} 可视化布局
* {{code|lang=css|code=gap}} 控制网格间距

== 响应式布局技术 ==
结合媒体查询实现自适应：

<syntaxhighlight lang="css">
/* 移动优先策略 */
.container {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: 1fr 3fr;
  }
}
</syntaxhighlight>

== 实际应用案例 ==
'''新闻网站布局示例'''：

<syntaxhighlight lang="html">
<body>
  <header>
    <h1>每日新闻</h1>
    <nav>...</nav>
  </header>
  <main>
    <article class="featured">...</article>
    <section class="news-grid">
      <article>...</article>
      <article>...</article>
    </section>
  </main>
  <aside>相关链接</aside>
  <footer>© 2023</footer>
</body>
</syntaxhighlight>

'''对应的CSS实现'''：

<syntaxhighlight lang="css">
body {
  display: grid;
  grid-template-areas:
    "header header"
    "main aside"
    "footer footer";
}

header { grid-area: header; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }
</syntaxhighlight>

== 最佳实践 ==
* 优先使用语义化HTML5元素
* 移动优先设计原则
* 结合Flexbox和Grid的优势：
  * Flexbox适合组件内布局（导航菜单、卡片等）
  * Grid适合整体页面框架
* 使用命名网格线提高可维护性

== 常见问题 ==
{{Collapse|title=如何选择Flexbox还是Grid？|content=
* '''选择Flexbox'''当：
  * 需要一维布局（行或列）
  * 内容动态变化需要弹性调整
* '''选择Grid'''当：
  * 需要精确控制行列关系
  * 创建复杂的二维布局
}}

{{Collapse|title=如何处理旧浏览器兼容？|content=
使用特性检测渐进增强：
<syntaxhighlight lang="css">
@supports (display: grid) {
  /* 现代浏览器样式 */
}
@supports not (display: grid) {
  /* 回退样式 */
}
</syntaxhighlight>
}}

== 参见 ==
* [[CSS盒模型]]
* [[响应式网页设计]]
* [[HTML语义化]]

[[Category:HTML教程]]
[[Category:网页布局]]

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