HTML: HTML 布局
最后更新：2026-10-13
网页布局决定了页面的外观——包括页眉的位置、导航栏的排列方式以及内容区域和侧边栏的布局。良好的布局能使页面清晰易读，并能适应各种屏幕尺寸。
1. 什么是HTML布局
HTML布局就是将网页划分为几个功能区域：头部（header）、导航栏（nav）、主要内容区（main）、侧边栏（aside）和底部（footer）。早期常用 <div> 搭配 CSS 完成布局：
▶ 示例
▶ 试一试上面的例子用 <div> 配合 class 和 style 实现了一个经典的"上-中-下"布局，中间区域又分为主要内容区和侧边栏。这种方式的缺点是 HTML 标签本身无法表达区域的含义——所有区块都用 <div>，语义不清晰。
2. 语义化布局
HTML5 引入了语义化标签，用有含义的标签替代 <div>：
▶ 示例
▶ 试一试💡 语义化布局 vs div 布局： 语义化标签对搜索引擎（SEO）和辅助技术（屏幕阅读器）更友好。搜索引擎会优先分析
<main>里的内容，屏幕阅读器可以直接跳转到 <nav>。代码也更清晰——看标签名就知道每个区域的作用，不再需要从 class 名猜测。
3. Flexbox 简介
display: flex 是 CSS3 提供的弹性布局模型，能让子元素自动横向或纵向排列。你只需要在容器上设置 display: flex，子元素就会自动"排队"。下面用 Flexbox 做一个水平导航栏：
▶ 示例
▶ 试一试💡 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属性控制比例）
