指南
布局与语义标签
掌握 HTML 结构布局与语义化标签，打造清晰、易维护的网页骨架。
🎯 引言
在你动手写网页之前，有件事情必须搞清楚：网页不是胡乱堆砌出来的，而是有“骨架”在支撑它。这个骨架，指的就是网页的结构布局。学习结构标签不仅能让页面看起来更规整，还能帮助搜索引擎理解你的内容，提升 SEO 表现。
通过这篇文章你将学会：
- 如何使用 HTML 的结构标签来构建页面
- 常用的列表标签和分组标签的作用
- 语义化标签的价值
- 如何用语义化标签写出“人和机器都能看懂”的页面
无论你是前端小白，还是希望打好基础的老手，这篇文章都值得细读！
🏗 什么是网页结构标签？
网页结构标签指的是用于组织、分组和排布页面内容的 HTML 标签，它们不直接改变内容的样式，但在页面结构中起到“搭骨架”的作用。比如：
| 标签 | 作用说明 |
|---|---|
<div> | 无语义分区容器，常用于布局 |
<section> | 表示页面中独立的章节区块 |
<header> | 页眉部分，一般包含 logo、导航等 |
<footer> | 页脚部分，通常用于版权、链接等 |
<main> | 表示文档的主要内容部分 |
<article> | 表示一篇独立的文章或帖子 |
<nav> | 用于导航菜单的语义标签 |
这些标签的存在，就是为了让页面更有结构、更清晰。
📋 列表标签 <ul>、<ol>、<li>
列表标签用于组织一组相关的项目。HTML 中有两种主要的列表标签：
| 标签 | 含义 |
|---|---|
<ul> | 无序列表，通常使用圆点符号 |
<ol> | 有序列表，按数字或字母排序 |
<li> | 列表项，必须嵌套在 <ul> 或 <ol> 中 |
<ul> 更适合用于导航栏或特性罗列，而 <ol> 更适用于有步骤或顺序的场景。示例代码：
<!-- 无序列表 -->
<ul>
<li>HTML 结构</li>
<li>CSS 样式</li>
<li>JavaScript 行为</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>打开编辑器</li>
<li>编写 HTML 代码</li>
<li>保存并预览页面</li>
</ol>
🧱 分组标签 <div> 和 <span>
分组标签在页面结构中用来“打包”内容，便于整体处理。虽然它们没有语义，但使用频率极高。
| 标签 | 作用说明 |
|---|---|
<div> | 块级元素，用于包裹结构模块 |
<span> | 行内元素，用于包裹文本或小元素 |
示例代码：
<div class="card">
<h2>产品名称</h2>
<p>这是一个产品介绍，<span class="highlight">特别优惠</span>，不要错过！</p>
</div>
🧠 语义化标签的意义
语义化标签是 HTML5 推出的重要特性。它们的优势在于：
| 优势 | 描述 |
|---|---|
| 可读性强 | 开发者一眼能看出这个区域是干什么的 |
| SEO 友好 | 搜索引擎更容易理解网页结构，提升排名 |
| 易于维护 | 多人协作时，语义化标签更容易沟通和定位 |
| 便于设备适配 | 屏幕阅读器和辅助设备能正确朗读页面内容 |
常见语义标签：
<header>：头部区域<main>：主要内容<nav>：导航<section>：章节<article>：文章内容<footer>：底部区域
🧩 示例：语义化标签构建页面结构
来看一个简洁又标准的语义化页面结构：
<body>
<header>
<h1>我的网站</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>最新资讯</h2>
<article>
<h3>HTML5 真的很香！</h3>
<p>HTML5 引入了很多语义化标签，让开发更简单了。</p>
</article>
</section>
</main>
<footer>
<p>版权所有 © 2025</p>
</footer>
</body>
🧾 小节总结
- 网页结构标签是页面的骨架，不能忽视。
- 列表标签让信息更有条理。
- 分组标签适合布局，但要慎用。
- 语义化标签让网页更易懂、更强大。
- 善用语义化结构，能提高 SEO 和代码可读性。
❓ 知识问答（Q&A）
Q：<div> 和 <section> 有什么区别？
A：<div> 没有语义，只是分组元素，而 <section> 是有语义的，表示一个功能相关的章节。
Q：语义化标签对 SEO 有帮助吗？
A：有帮助，语义化标签能让搜索引擎更准确地理解网页结构，从而优化收录效果。
Q：所有结构标签都必须使用语义化的吗？
A：不是必须，但推荐优先使用。如果没有对应的语义标签，再使用 <div> 这样的非语义标签。
🧪 小练习
练习 1：构建语义化页面结构
<header>
<h1>旅行博客</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">目的地</a></li>
<li><a href="#">攻略</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>巴厘岛之旅</h2>
<p>阳光、沙滩、海浪，是度假的最佳选择！</p>
</article>
</main>
<footer>
<p>联系我：travel@blog.com</p>
</footer>
请拷贝到编辑器中去尝试预览体验吧！
练习 2：使用 <ul> 和 <ol> 列出待办事项和步骤
<h2>待办事项</h2>
<ul>
<li>写博客</li>
<li>更新页面</li>
<li>优化 SEO</li>
</ul>
<h2>发布步骤</h2>
<ol>
<li>本地测试</li>
<li>提交代码</li>
<li>上线部署</li>
</ol>
请拷贝到编辑器中去尝试预览体验吧！
🎉 恭喜你已经掌握了网页结构标签的使用方式、语义化的重要性、常见列表和分组标签的用法。这是成为前端高手的基础一步，加油继续向前吧！