掌握 HTML5 语义化布局标签的核心作用
能够正确使用 <header>、<nav>、<main>、<section>、<article>、<aside>、<footer> 构建清晰页面结构
理解语义化布局对可访问性、SEO 和代码维护性的价值
结合 CSS 实现美观且响应式的现代网页布局
HTML 布局是将网页划分为逻辑区域的过程，其核心目标是：
提升内容组织性：明确区分导航、主内容、侧边栏等区域
增强可访问性：屏幕阅读器能准确识别页面结构
优化 SEO：搜索引擎更易理解页面主题与层次
便于样式管理：CSS 可精准定位不同功能区块
早期网页依赖
<div>+ class（如<div class="header">），而 HTML5 引入了原生语义标签，使结构自解释。
重要规则：
<main>在单个页面中只能出现一次，且不应包含重复内容（如导航、页脚）。
<!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>
<!-- 页眉 -->
<header>
<h1>我的网站</h1>
<p>欢迎来到技术分享平台</p>
</header>
<!-- 导航 -->
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/articles">文章</a></li>
<li><a href="/about">关于</a></li>
</ul>
</nav>
<!-- 主内容区 -->
<main>
<section>
<h2>最新教程</h2>
<article>
<h3>HTML 响应式设计入门</h3>
<p>学习如何创建适配多设备的网页...</p>
</article>
</section>
</main>
<!-- 侧边栏（可选） -->
<aside>
<h2>作者简介</h2>
<p>资深前端工程师，专注 Web 标准实践。</p>
</aside>
<!-- 页脚 -->
<footer>
<p>© 2025 我的网站. 保留所有权利。</p>
</footer>
</body>
</html>结构说明：
<section>包裹一组相关文章每篇文章用
<article>表示
<aside>提供与主内容相关的补充信息
<header>页眉
可出现在页面顶部，也可用于 <article> 或 <section> 内部
示例（文章内部页眉）：
<article>
<header>
<h2>文章标题</h2>
<p>发布于 2025年2月10日</p>
</header>
<p>文章正文...</p>
</article><nav>导航
仅用于主要导航链接
辅助链接（如“上一篇 / 下一篇”）无需包裹在 <nav> 中
<main>主内容
唯一性：整个页面只能有一个 <main>
排他性：不包含重复内容（如 Logo、搜索框、版权信息）
<section> vs <article>判断标准：如果内容能作为 RSS 订阅项或单独分享，则用
<article>
<aside>侧边栏
内容应与主内容相关但非核心
常见用途：广告、相关文章推荐、术语解释
<footer>页脚
可出现在页面底部，也可用于 <article> 或 <section> 内部
示例（文章页脚）：
<article>
<h2>文章标题</h2>
<p>正文...</p>
<footer>
<p>标签: #HTML #Web开发</p>
</footer>
</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>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: "Microsoft YaHei", sans-serif;
line-height: 1.6;
background: #f5f5f5;
}
header {
background: #2c3e50;
color: white;
text-align: center;
padding: 1.5rem;
}
nav {
background: #34495e;
padding: 0.5rem;
}
nav ul {
display: flex;
justify-content: center;
list-style: none;
}
nav a {
color: white;
text-decoration: none;
padding: 0.5rem 1rem;
}
.container {
display: flex;
max-width: 1200px;
margin: 20px auto;
gap: 20px;
}
main {
flex: 3;
background: white;
padding: 20px;
border-radius: 8px;
}
aside {
flex: 1;
background: white;
padding: 20px;
border-radius: 8px;
}
footer {
background: #2c3e50;
color: white;
text-align: center;
padding: 1rem;
margin-top: 20px;
}
</style>
</head>
<body>
<header>
<h1>编程学习网</h1>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">教程</a></li>
<li><a href="#">问答</a></li>
</ul>
</nav>
<div class="container">
<main>
<h2>欢迎学习 HTML 布局</h2>
<p>本文介绍语义化标签的使用方法...</p>
</main>
<aside>
<h3>热门标签</h3>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
</aside>
</div>
<footer>
<p>© 2025 编程学习网</p>
</footer>
</body>
</html>关键技术：
display: flex实现主内容与侧边栏并排
flex: 3与flex: 1控制比例（3:1）响应式容器：
max-width: 1200px; margin: 0 auto
推荐策略：
简单布局 → Flexbox
复杂网格 → CSS Grid
企业级项目 → 结合框架 + 自定义 CSS
优先使用语义标签
避免无意义的 <div> 嵌套，用 <header> 代替 <div class="header">
确保结构逻辑清晰
<main> 包含唯一核心内容
<article> 和 <section> 正确嵌套
<nav> 仅用于主要导航
提升可访问性
为 <nav> 添加 aria-label（如 <nav aria-label="主导航">）
跳过链接（Skip Link）帮助键盘用户快速跳转到 <main>
响应式设计
在小屏幕上将侧边栏移至主内容下方：
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}SEO 优化
使用 <h1>–<h6> 建立清晰标题层级
<article> 内包含发布时间、作者等结构化数据