第15篇：容器与布局标签
·
第15篇：容器与布局标签
前面的章节学习了各种具体内容标签。本篇将聚焦"容器"——如何用正确的标签搭建页面的整体骨架，让代码既对人类可读，也对机器（搜索引擎、屏幕阅读器）友好。
学习目标
- 彻底理解
div与span的区别和适用场景 - 掌握 HTML5 语义化容器：
header、nav、main、article、section、aside、footer - 能够区分
article、section、div的语义差异 - 理解语义化容器对 SEO 和可访问性的价值
- 能用语义标签搭建一个完整的页面骨架
核心知识点
一、无语义容器：div 与 span
div 和 span 是 HTML 中最基础的容器，它们没有任何语义，纯粹作为"盒子"使用。
<!-- div：块级容器 -->
<div class="card">
<h3>卡片标题</h3>
<p>卡片内容描述...</p>
</div>
<!-- span：行内容器 -->
<p>这是一段文字，<span class="highlight">这里需要高亮</span>显示。</p>
div vs span 对比
div | span | |
|---|---|---|
| 显示类型 | 块级（独占一行） | 行内（不独占一行） |
| 默认宽度 | 占满父容器 | 包裹内容 |
| 能否设宽高 | ✅ 可以 | ❌ 不行（需 CSS 改变） |
| 典型用途 | 布局区块、组件容器 | 行内文字标记 |
什么时候用 div/span？
| ✅ 适合用 div/span | ❌ 不适合用 div/span |
|---|---|
| 纯粹的样式钩子 | 有明确语义的内容（用语义标签） |
| 布局需要的包裹层 | 文章（用 article）、导航（用 nav） |
| 组件化开发中的容器 | 页眉（用 header）、页脚（用 footer） |
<!-- ✅ 正确：div 作为纯粹的布局容器 -->
<div class="grid-container">
<article>...</article>
<aside>...</aside>
</div>
<!-- ❌ 错误：用 div 冒充语义标签 -->
<div class="header">
<div class="nav">...</div>
</div>
<!-- 应该用 header 和 nav -->
⚠️ div 不是万能的：HTML5 引入了大量语义标签，有语义时绝对不要用 div 代替。
二、HTML5 语义化容器
HTML5 提供了 7 个主要的语义化容器标签，让页面结构自带含义。
┌─────────────────────────────────────────────┐
│ <header> │ ← 页眉：logo、标题、导航
│ ┌─────────────────────────────────────┐ │
│ │ <nav> │ │ ← 导航链接
│ └─────────────────────────────────────┘ │
├─────────────────────────────────────────────┤
│ │
│ ┌──────────────────┐ ┌──────────────────┐ │
│ │ │ │ │ │
│ │ <article> │ │ <aside> │ │
│ │ ┌──────────┐ │ │ │ │
│ │ │ <header> │ │ │ 侧边栏内容 │ │
│ │ │ 标题作者 │ │ │ │ │
│ │ └──────────┘ │ │ │ │
│ │ │ │ │ │
│ │ 正文内容... │ └──────────────────┘ │
│ │ │ │
│ │ ┌──────────┐ │ │
│ │ │<section> │ │ │
│ │ │ 评论区域 │ │ │
│ │ └──────────┘ │ │
│ │ │ │
│ └──────────────────┘ │
│ │
│ （main 内部） │
├─────────────────────────────────────────────┤
│ <footer> │ ← 页脚：版权、联系信息
│ © 2024 公司名 │
└─────────────────────────────────────────────┘
三、各语义容器详解
1. header —— 页眉
定义页面或区块的介绍性内容，通常包含标题、logo、搜索框等。
<!-- 页面级 header -->
<header>
<h1>我的博客</h1>
<p>分享技术与生活</p>
</header>
<!-- 文章级 header -->
<article>
<header>
<h2>HTML5 语义化指南</h2>
<p>作者：张三 | 发布于 2024-06-01</p>
</header>
<p>文章内容...</p>
</article>
规则：
- 一个页面可以有多个
header（如页面 header + 文章 header） header不能嵌套在footer、address或另一个header中
2. nav —— 导航
定义主要导航链接的区域。
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/articles">文章</a></li>
<li><a href="/about">关于</a></li>
<li><a href="/contact">联系</a></li>
</ul>
</nav>
规则：
- 不必把所有链接都放
nav里，只放主要导航 - 页脚中的辅助链接（版权声明、隐私政策）通常不需要
nav - 一个页面可以有多个
nav（如主导航 + 文章内目录导航）
3. main —— 主要内容
定义页面的主要内容，一个页面只能有一个 main。
<body>
<header>...</header>
<nav>...</nav>
<main>
<h1>欢迎来到我的网站</h1>
<p>这是页面的主要内容...</p>
<article>...</article>
</main>
<footer>...</footer>
</body>
规则：
- 一个页面只能有一个
main main不能嵌套在article、aside、footer、header、nav中main的内容应该是页面独有的（不包含重复出现的侧边栏、导航等）
4. article —— 独立文章
定义独立、完整、可独立分发的内容单元。
<article>
<header>
<h2>HTML 从 0 到 1 教程</h2>
<p>发布于 2024-06-01</p>
</header>
<p>HTML 是构建网页的标准语言...</p>
<footer>
<p>标签：HTML, 前端, 教程</p>
</footer>
</article>
<!-- 另一篇独立文章 -->
<article>
<h2>CSS 入门指南</h2>
<p>CSS 用于描述网页的外观...</p>
</article>
判断标准：这个内容如果单独抽出来，是否还有意义？
- 一篇博客文章 ✅ 是 article
- 一条评论 ✅ 是 article（可独立理解）
- 一篇论坛帖子 ✅ 是 article
- 一个产品介绍卡片 ✅ 是 article
- 页面的导航栏 ❌ 不是 article
5. section —— 主题分区
定义文档中的主题性内容分组，通常有标题。
<section>
<h2>第一章：HTML 基础</h2>
<p>HTML 是超文本标记语言...</p>
</section>
<section>
<h2>第二章：HTML 表单</h2>
<p>表单用于收集用户输入...</p>
</section>
规则：
section不是通用的 div！它应该有主题性，通常带标题- 如果只是需要样式包裹，用 div
6. aside —— 侧边栏
定义与主要内容间接相关的内容，如侧边栏、广告、相关链接等。
<main>
<article>
<h1>文章标题</h1>
<p>文章内容...</p>
</article>
<aside>
<h2>相关文章</h2>
<ul>
<li><a href="#">CSS 入门指南</a></li>
<li><a href="#">JavaScript 基础</a></li>
</ul>
</aside>
</main>
7. footer —— 页脚
定义页面或区块的底部信息。
<!-- 页面级 footer -->
<footer>
<p>© 2024 我的博客. 保留所有权利。</p>
<p>
<a href="/privacy">隐私政策</a> |
<a href="/terms">服务条款</a>
</p>
</footer>
<!-- 文章级 footer -->
<article>
<p>文章内容...</p>
<footer>
<p>作者：张三 | 分类：前端开发</p>
</footer>
</article>
四、article vs section vs div 选择指南
这是初学者最容易混淆的三个标签。
这个内容块是什么性质？
│
├── 独立完整的内容，可单独分发？
│ └── → article
│ 博客文章、评论、产品卡片、新闻条目
│
├── 主题性的内容分组，有标题？
│ └── → section
│ 章节、功能区块、带标题的内容组
│
└── 纯粹为了样式/布局需要包裹？
└── → div
布局容器、样式钩子、无语义包裹
对比示例
<!-- ❌ 错误：article 里只有一句 slogan，不是独立内容 -->
<article>
<p>欢迎访问我们的网站！</p>
</article>
<!-- ✅ 正确：用 section 或 div -->
<section>
<h2>欢迎</h2>
<p>欢迎访问我们的网站！</p>
</section>
<!-- ❌ 错误：用 section 包裹导航 -->
<section class="nav">
<a href="/">首页</a>
</section>
<!-- ✅ 正确：用 nav -->
<nav>
<a href="/">首页</a>
</nav>
<!-- ❌ 错误：用 div 包裹完整文章 -->
<div class="article">
<h2>文章标题</h2>
<p>内容...</p>
</div>
<!-- ✅ 正确：用 article -->
<article>
<h2>文章标题</h2>
<p>内容...</p>
</article>
五、完整页面骨架示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>语义化页面骨架示例</title>
</head>
<body>
<!-- 页眉：logo + 导航 -->
<header>
<h1>我的博客</h1>
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/articles">文章</a></li>
<li><a href="/about">关于</a></li>
</ul>
</nav>
</header>
<!-- 主体内容 -->
<main>
<h1>最新文章</h1>
<!-- 文章列表 -->
<article>
<header>
<h2><a href="/post/1">HTML 语义化完全指南</a></h2>
<p>作者：张三 | 2024-06-01</p>
</header>
<p>HTML5 引入了大量语义化标签，让网页结构更加清晰...</p>
<footer>
<p>标签：HTML, 语义化, 前端</p>
</footer>
</article>
<article>
<header>
<h2><a href="/post/2">CSS Grid 布局入门</a></h2>
<p>作者：李四 | 2024-05-28</p>
</header>
<p>CSS Grid 是一种强大的二维布局系统...</p>
</article>
</main>
<!-- 侧边栏 -->
<aside>
<section>
<h2>关于我</h2>
<p>前端开发工程师，热爱分享技术。</p>
</section>
<section>
<h2>热门标签</h2>
<ul>
<li><a href="/tag/html">HTML</a></li>
<li><a href="/tag/css">CSS</a></li>
<li><a href="/tag/js">JavaScript</a></li>
</ul>
</section>
</aside>
<!-- 页脚 -->
<footer>
<p>© 2024 我的博客. 保留所有权利。</p>
<address>
联系邮箱：<a href="mailto:hello@example.com">hello@example.com</a>
</address>
</footer>
</body>
</html>
📎 完整代码文件：CODE/15/semantic-layout.html
动手练习
练习 1：标签辨析
判断以下场景应该用哪个容器标签：
| 场景 | 你的选择 | 理由 |
|---|---|---|
| 页面顶部的 logo + 导航 | ||
| 一篇完整的博客文章 | ||
| 页面底部的版权声明 | ||
| "关于本站"的侧边栏介绍 | ||
| 章节"1.1 什么是 HTML" | ||
| 包裹文章列表的容器（仅用于 Grid 布局） | ||
| 一条用户评论 | ||
| 页面主导航菜单 |
练习 2：重构 div 页面
将以下纯 div 页面重构为语义化 HTML5：
<!-- 重构前 -->
<div class="header">
<h1>我的网站</h1>
<div class="nav">
<a href="/">首页</a>
<a href="/about">关于</a>
</div>
</div>
<div class="content">
<div class="article">
<h2>文章标题</h2>
<p>文章内容...</p>
</div>
</div>
<div class="sidebar">
<h3>分类</h3>
<ul><li>技术</li><li>生活</li></ul>
</div>
<div class="footer">
<p>© 2024</p>
</div>
练习 3：搭建个人主页骨架
用语义化标签搭建一个个人主页的完整 HTML 骨架：
-
header：姓名 + 头像 + 一句话介绍 -
nav：主页、文章、项目、联系 -
main：包含多个section- 关于我（section）
- 技能清单（section）
- 项目展示（article × 3）
-
aside：联系方式 + 社交链接 -
footer：版权信息
常见误区 ⚠️
| 误区 | 真相 |
|---|---|
“section 可以代替所有 div” | ❌ section 必须有主题性，通常带标题。纯布局用 div |
“一个页面只能有一个 header” | ❌ 可以有多个（页面 header + 文章 header） |
“所有链接都要放 nav 里” | ❌ 只放主要导航。页脚链接、文章内链接不需要 |
“article 只能用于博客” | ❌ 任何独立完整的内容都可以：评论、产品卡片、论坛帖子 |
“main 可以放在 article 里” | ❌ main 不能嵌套在 article、aside、footer、header、nav 中 |
| “用了语义标签就不用 div 了” | ❌ div 仍有价值：纯布局容器、组件包裹层 |
“aside 必须放在侧边” | ❌ 语义上是"间接相关内容"，位置由 CSS 决定 |
| “语义化只是为了 SEO” | ❌ 语义化对屏幕阅读器、代码可读性、维护都有巨大价值 |
速查卡片 📋
HTML5 语义容器一览
| 标签 | 语义 | 数量限制 |
|---|---|---|
header | 页眉/区块头 | 页面可有多个 |
nav | 导航链接 | 页面可有多个 |
main | 主要内容 | 每页只能有 1 个 |
article | 独立完整的内容 | 页面可有多个 |
section | 主题性内容分组 | 页面可有多个 |
aside | 间接相关内容 | 页面可有多个 |
footer | 页脚/区块尾 | 页面可有多个 |
article vs section vs div 决策树
独立完整的内容？ → article
├── 主题性分组+标题？ → section
└── 纯布局/样式？ → div
标准页面骨架
<body>
<header>
<nav>...</nav>
</header>
<main>
<article>
<header>...</header>
<section>...</section>
<footer>...</footer>
</article>
<aside>...</aside>
</main>
<footer>...</footer>
</body>
语义化 checklist
- 有独立内容时用
article，不是用div - 有主题分组时用
section，不是用div - 页面只有一个
main，且不在其他语义容器内 - 主要导航用
nav - 页眉用
header，页脚用footer - 侧边/相关内容用
aside
扩展阅读
📌 下一步：HTML 核心标签阶段已结束！接下来进入 第16篇：HTML5 语义化结构实战，用正确的标签从零搭建真实页面骨架。
更多推荐
8
0- 0
已为社区贡献7条内容
所有评论(0)