HTML: HTML 布局
网页布局决定了页面的外观——包括页眉的位置、导航栏的排列方式以及内容区域和侧边栏的布局。良好的布局能使页面清晰易读，并能适应各种屏幕尺寸。
1. 什么是HTML布局
HTML布局就是将网页划分为几个功能区域：头部（header）、导航栏（nav）、主要内容区（main）、侧边栏（aside）和底部（footer）。早期常用 <div> 搭配 CSS 完成布局：
▶ 示例
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; font-family: sans-serif; }
.header { background: #4a90d9; color: #fff; padding: 20px; text-align: center; }
.nav { background: #333; color: #fff; padding: 10px; text-align: center; }
.nav a { color: #fff; margin: 0 10px; text-decoration: none; }
.container { display: flex; }
.main { flex: 3; padding: 20px; background: #f4f4f4; }
.sidebar { flex: 1; padding: 20px; background: #e4e4e4; }
.footer { background: #333; color: #fff; padding: 15px; text-align: center; }
</style>
</head>
<body>
<div class="header"><h1>我的网站</h1></div>
<div class="nav">
<a href="#">首页</a>
<a href="#">关于</a>
<a href="#">服务</a>
<a href="#">联系</a>
</div>
<div class="container">
<div class="main"><h2>主要内容</h2><p>这是页面的主体区域。</p></div>
<div class="sidebar"><h3>侧边栏</h3><p>放广告或相关链接。</p></div>
</div>
<div class="footer">© 2025 我的网站</div>
</body>
</html>
上面的例子用 <div> 配合 class 和 style 实现了一个经典的"上-中-下"布局，中间区域又分为主要内容区和侧边栏。这种方式的缺点是 HTML 标签本身无法表达区域的含义——所有区块都用 <div>，语义不清晰。
2. 语义化布局
HTML5 引入了语义化标签，用有含义的标签替代 <div>：
<header>— 头部区域<nav>— 导航栏<main>— 主要内容<section>— 内容区块<aside>— 侧边栏<footer>— 底部区域
▶ 示例
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; font-family: sans-serif; }
header { background: #4a90d9; color: #fff; padding: 20px; text-align: center; }
nav { background: #333; color: #fff; padding: 10px; text-align: center; }
nav a { color: #fff; margin: 0 10px; text-decoration: none; }
.container { display: flex; }
main { flex: 3; padding: 20px; background: #f4f4f4; }
aside { flex: 1; padding: 20px; background: #e4e4e4; }
footer { background: #333; color: #fff; padding: 15px; text-align: center; }
</style>
</head>
<body>
<header><h1>我的网站</h1></header>
<nav>
<a href="#">首页</a>
<a href="#">关于</a>
<a href="#">服务</a>
<a href="#">联系</a>
</nav>
<div class="container">
<main>
<section>
<h2>最新文章</h2>
<p>这是文章内容。</p>
</section>
</main>
<aside>
<h3>相关链接</h3>
<p>侧边栏内容。</p>
</aside>
</div>
<footer>© 2025 我的网站</footer>
</body>
</html>
💡 语义化布局 vs div 布局： 语义化标签对搜索引擎（SEO）和辅助技术（屏幕阅读器）更友好。搜索引擎会优先分析
<main>里的内容，屏幕阅读器可以直接跳转到 <nav>。代码也更清晰——看标签名就知道每个区域的作用，不再需要从 class 名猜测。
3. Flexbox 简介
display: flex 是 CSS3 提供的弹性布局模型，能让子元素自动横向或纵向排列。你只需要在容器上设置 display: flex，子元素就会自动"排队"。下面用 Flexbox 做一个水平导航栏：
▶ 示例
HTML
<!DOCTYPE html>
<html>
<head>
<style>
nav ul {
display: flex;
list-style: none;
padding: 0;
background: #333;
}
nav ul li a {
display: block;
padding: 14px 24px;
color: #fff;
text-decoration: none;
}
nav ul li a:hover {
background: #575757;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">联系</a></li>
</ul>
</nav>
</body>
</html>
💡 Flexbox 和 Grid 是现代 CSS 布局的核心。
Flexbox 擅长一维排列（横排或竖排），Grid 擅长二维布局（行列同时控制）。建议学完 HTML 后系统学习 CSS 教程，掌握这两大利器。
Flexbox 的常用属性包括
justify-content（水平对齐）、align-items（垂直对齐）和 gap（间距）。上面的导航栏只用了一行 display: flex 就让列表项从纵向变成横向排列，非常简洁。
❓ 常见问题
Q
<div>和语义化标签（<header>、<nav>等）有什么区别？A
<div>是通用容器，没有任何语义含义，只是用来包裹内容；语义化标签则明确表达了内容的用途——<header>是页眉，<nav>是导航，<main>是主体内容，<aside>是侧边栏，<footer>是页脚。好处：1）代码可读性更强；2）搜索引擎能更好地理解页面结构；3）屏幕阅读器用户可以快速跳转到特定区域。Q 什么时候用Flexbox，什么时候用Grid？
A Flexbox是一维布局，适合在一条轴线上排列元素（横排或竖排），如导航栏、卡片列表、按钮组；Grid是二维布局，适合同时控制行和列，如页面整体布局、仪表盘、图片画廊。简单判断：如果只需要控制一行或一列，用Flexbox；如果需要同时控制多行多列，用Grid。两者可以结合使用。
Q 三栏布局（左-中-右）怎么实现？
A 最简单的方案是Flexbox：外层容器设
display: flex，左右栏设固定宽度（如width: 200px），中间栏设flex: 1占满剩余空间。代码：<div style="display: flex"><div style="width: 200px">左</div><div style="flex: 1">中</div><div style="width: 200px">右</div></div>。响应式时可以用flex-wrap: wrap让三栏自动换行。Q 为什么推荐用语义化标签替代
<div>？A 语义化标签的核心价值是"让代码自解释"。好处：1）开发者看到
<nav>就知道这是导航，看到<aside>就知道这是侧边栏，不需要看class名猜测；2）搜索引擎给予语义化标签更高的权重，有助于SEO；3）屏幕阅读器用户可以通过语义标签快速导航（如"跳到main内容"）；4）未来维护时更容易理解页面结构。📖 小节
- HTML 布局将页面划分为头部、导航、内容、侧边栏和底部等区域
- 可以用
<div>+ CSS 实现任意布局 - 语义化标签（
<header>、<nav>、<main>、<aside>、<footer>）替代<div>，增强可读性和 SEO display: flex让子元素横向排列，适合导航栏、卡片列表等场景
📝 作业
- 个人主页布局：用语义化标签搭建一个个人主页，包含 header（网站标题）、nav（导航链接）、main（自我介绍+作品展示 section）、aside（联系信息）、footer（版权声明）。用
display: flex让导航栏水平排列。 - 三栏布局：用
<div>实现一个左-中-右的三栏布局，中间栏宽度自适应，左右两栏固定宽度 200px。（提示：用 Flexbox 的flex属性控制比例）
