#HTML 布局

网页布局是指如何安排页面上的内容。一个良好、清晰的布局对于用户体验至关重要。HTML 提供了用于构建布局的元素，而具体的定位和排列则通过 CSS 来实现。

#使用 <div> 元素进行布局

在 HTML5 出现之前，<div> 元素是构建网页布局的唯一主力。开发者会使用 <div> 来创建页面的各个部分，如头部、导航、内容区和脚部，然后通过 CSS 来为这些 <div> 设置样式和定位。

<div id="header">
  <h1>网站标题</h1>
</div>

<div id="nav">
  <a href="#">首页</a>
  <a href="#">关于</a>
  <a href="#">联系</a>
</div>

<div id="content">
  <h2>文章标题</h2>
  <p>这里是主要内容...</p>
</div>

<div id="footer">
  <p>版权所有 &copy; 2024</p>
</div>

这种方法完全有效，但所有部分都是通用的 <div>，缺乏语义含义。

#HTML5 语义化布局元素

为了解决 <div> 汤（div soup）的问题，HTML5 引入了一系列具有明确语义的布局元素。这些元素在功能上与 <div> 类似（都是块级容器），但它们的名字能清晰地告诉浏览器、开发者和搜索引擎这个区块是用来做什么的。

• <header>: 定义文档或区域的头部。通常包含网站 Logo、标题、导航等。
• <nav>: 定义导航链接的容器。
• <section>: 定义文档中的一个独立区域或章节。
• <article>: 定义一个独立的、自成一体的内容单元，如一篇博客文章、一则新闻报道。
• <aside>: 定义与页面主要内容相关但可以独立存在的内容，如侧边栏、引言框。
• <footer>: 定义文档或区域的脚部。通常包含版权信息、联系方式等。
• <main>: 定义文档的核心主体内容。一个文档应该只有一个 <main> 元素。

使用这些语义化标签是现代 HTML 的最佳实践。

示例：使用 HTML5 语义元素重构布局

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

<nav>
  <a href="#">首页</a>
  <a href="#">关于</a>
  <a href="#">联系</a>
</nav>

<section>
  <article>
    <h2>文章标题</h2>
    <p>这里是主要内容...</p>
  </article>
</section>

<aside>
  <h3>相关链接</h3>
  <ul>
    <li><a href="#">链接1</a></li>
    <li><a href="#">链接2</a></li>
  </ul>
</aside>

<footer>
  <p>版权所有 &copy; 2024</p>
</footer>

#布局技术（通过 CSS 实现）

HTML 负责提供布局的“骨架”，而具体的排列技术则由 CSS 控制。历史上，布局技术经历了几个阶段：

1. 表格布局 (Table Layout): 最早期的布局方式，使用 <table> 来排列页面内容。这种方法现在被认为是不正确的，因为它滥用了表格的语义，并且难以维护和实现响应式设计。

2. 浮动布局 (Float Layout): 通过 CSS 的 float 属性，让元素向左或向右浮动，从而实现多列布局。这是在 Flexbox 出现前最主流的布局方式，但它存在一些副作用（如需要清除浮动），对于复杂的布局来说比较棘手。

3. Flexbox 布局: 现代的一维布局模型，非常适合对齐和分布容器中的项目。它极大地简化了许多常见的布局任务，如垂直居中、创建等高的列等。是目前最主流的组件级布局方案。

4. Grid 布局: 现代的二维布局模型，允许你同时控制行和列。它非常强大，是构建复杂、大规模页面级布局的理想选择。

总结: 学习 HTML 布局，意味着学习如何使用 <div> 和 HTML5 语义元素来构建页面的结构，然后应用 Flexbox 和 Grid 等现代 CSS 技术来实现最终的视觉排列。