HTML 布局
布局决定网页内容如何"排座位"：顶部放导航、左侧放菜单、中间放正文。传统上人们用 <div> 加 CSS 拼布局，HTML5 又提供了 header、nav、section 等语义化标签，让页面结构既清晰又好维护。
布局的基本思路
任何网页布局都可以拆成若干"区域块"，再用 CSS 控制每个块的宽度与位置。最常见的是上下分栏：顶部页眉、中间内容、底部页脚；中间还可以再左右分栏。块用什么标签装，就用下面的 div 或语义化标签。
传统 div 布局
用 <div> 划分区域，配合 CSS 的 float、width、margin 等属性排列位置，是老式页面最常用的方法。缺点是代码里全是无意义的 div，语义不明确。
<div id="header">网站标题</div>
<div id="nav">首页 | 教程 | 参考</div>
<div id="section">这里是正文内容区域</div>
<div id="footer">版权信息</div>
在浏览器中显示为：从上到下依次显示"网站标题""首页 | 教程 | 参考""这里是正文内容区域""版权信息"四个色块（配合 CSS 可有底色与间距）。
使用 CSS 控制布局
如今布局基本交给 CSS：float 让块左右浮动，flex 弹性盒与 grid 网格能更灵活地排布，页面宽度用百分比或固定像素设置。HTML 只负责结构，位置与外观全部由样式决定。
<div style="float:left;width:30%;background:#ddd;">左侧菜单</div>
<div style="float:left;width:70%;background:#f5f5f5;">右侧内容</div>
在浏览器中显示为：左右并排两个色块，左边占三成宽显示"左侧菜单"，右边占七成宽显示"右侧内容"。
HTML5 语义化布局标签
HTML5 提供了带含义的布局标签：<header> 页眉、<nav> 导航、<section> 章节、<article> 独立文章、<aside> 侧边栏、<footer> 页脚。它们显示效果和 div 一样，但让搜索引擎和阅读代码的人一眼看懂结构。
<header>站点页眉</header>
<nav>导航链接</nav>
<section>
<article>文章一的内容</article>
<aside>侧边栏广告</aside>
</section>
<footer>版权与联系方式</footer>
在浏览器中显示为：自上而下排列的页眉、导航、正文区（内含文章与侧栏）、页脚几大块内容。
布局方式对比简表
| 方式 | 代表写法 | 优点 | 缺点 |
|---|---|---|---|
| 表格布局 | table 嵌套 | 老浏览器兼容好 | 代码臃肿、不利于维护 |
| div+CSS | div + float | 结构样式分离 | div 泛滥、语义不明 |
| HTML5 语义化 | header/nav/section | 语义清晰、利于 SEO | 需配合 CSS 才有外观 |
| Flex/Grid | display:flex/grid | 灵活强大、响应式友好 | 需要额外学习 CSS |
小结
布局 = 用标签划分区域 + 用 CSS 安排位置。新版页面推荐 HTML5 语义化标签搭配 Flex/Grid，结构清晰又灵活，是当今的主流做法。