文章标题
章节1
章节内容...
章节2
章节内容...
1. 什么是语义化
语义化是指使用恰当的 HTML 标签来表达内容的含义，而不是仅仅为了样式。
语义化的好处：
- ✅ 代码可读性更好
- ✅ SEO 友好，搜索引擎更容易理解页面结构
- ✅ 无障碍访问，屏幕阅读器能正确解读
- ✅ 维护性更好，团队协作更高效
对比示例：
| 非语义化 ❌ | 语义化 ✅ |
|---|---|
| <div class="header">...</div> | <header>...</header> |
| <div class="nav">...</div> | <nav>...</nav> |
| <div class="content">...</div> | <main>...</main> |
| <div class="footer">...</div> | <footer>...</footer> |
2. 常用语义化标签
HTML5 引入了多个语义化标签：
<header> 页头 | <nav> 导航 | <main> 主体 | <article> 文章
<section> 区块 | <aside> 侧边栏 | <footer> 页脚
<figure> 媒体容器 | <figcaption> 媒体标题
标签说明：
| 标签 | 含义 | 使用场景 |
|---|---|---|
| header | 页头 | Logo、导航、标题 |
| nav | 导航 | 主导航、面包屑 |
| main | 主体 | 页面核心内容（唯一） |
| article | 文章 | 独立的内容块（博客、新闻） |
| section | 区块 | 内容分组（标题+内容） |
| aside | 侧边栏 | 相关链接、广告、标签云 |
| footer | 页脚 | 版权、联系方式、链接 |
| figure | 媒体容器 | 图片、图表、代码示例 |
3. 页面结构示例
一个典型的语义化页面结构：
演示效果：
网站标题
1<header>
2 <h1>网站标题</h1>
3 <nav>
4 <a href="#">首页</a>
5 <a href="#">关于</a>
6 <a href="#">联系</a>
7 </nav>
8</header>
9
10<main>
11 <article>
12 <h2>文章标题</h2>
13 <section>
14 <h3>章节1</h3>
15 <p>章节内容...</p>
16 </section>
17 <section>
18 <h3>章节2</h3>
19 <p>章节内容...</p>
20 </section>
21 </article>
22
23 <aside>
24 <h3>侧边栏</h3>
25 <p>相关链接...</p>
26 </aside>
27</main>
28
29<footer>
30 <p>版权信息 © 2024</p>
31</footer>
4. div 区块元素
<div> 是最常用的块级元素，用于组合其他元素，形成一个区块。
特点：独占一行，宽度默认100%，可设置宽高。
用途：布局容器、分组元素、CSS 样式载体。
演示效果：
这是一个 div 区块
它独占一行
这是另一个 div 区块
1<div class="box">
2 <p>这是一个 div 区块</p>
3 <p>它独占一行</p>
4</div>
5
6<div class="box">
7 <p>这是另一个 div 区块</p>
8</div>
5. span 行内元素
<span> 是最常用的行内元素，用于包裹文本或行内内容。
特点：不独占一行，宽度由内容决定，不能设置宽高（除非转为行内块）。
用途：给文本添加样式、标记、分组行内内容。
演示效果：
这是一段文本，其中 这是 span 包裹的内容，它不会换行。
多个 span 会 并排显示 在同一行。
1<p>这是一段文本，其中 <span>这是 span 包裹的内容</span>，它不会换行。</p>
2
3<p>多个 span 会 <span>并排显示</span> <span>在同一行</span>。</p>
6. 块级 vs 行内
HTML 元素分为块级元素和行内元素两大类：
对比表格：
| 特性 | 块级元素 | 行内元素 |
|---|---|---|
| 独占一行 | ✅ 是 | ❌ 否 |
| 宽度 | 默认 100% | 由内容决定 |
| 可设置宽高 | ✅ 可以 | ❌ 不可以（除非转行内块） |
| 常见标签 | div, p, h1-h6, ul, ol, li, table, form | span, a, strong, em, img, input |
| 用途 | 布局容器、结构分组 | 文本修饰、行内内容 |
行内块元素（inline-block）：
通过 display: inline-block 可以让元素兼具两者特点：
✅ 不独占一行（像行内）
✅ 可设置宽高（像块级）
常见场景：导航按钮、标签、徽章等。
1<!-- 块级元素 -->
2<div style="width: 200px; height: 100px; background: #3498db;">
3 块级元素：独占一行，可设置宽高
4</div>
5
6<!-- 行内元素 -->
7<span style="background: #e74c3c;">
8 行内元素：不独占一行，不能设置宽高
9</span>
10
11<!-- 行内块元素 -->
12<span style="display: inline-block; width: 150px; height: 50px; background: #2ecc71;">
13 行内块：不独占一行，可设置宽高
14</span>
7. inline-block 间隙问题
行内块元素之间会出现约 4px 的间隙，这是 HTML 中换行符被解析为空白字符导致的。
问题演示：
以下两个方块之间有间隙（注意红色和蓝色之间的白色缝隙）：
1<div style="background: #ecf0f1; padding: 10px;">
2 <span style="display: inline-block; width: 100px; height: 50px; background: #e74c3c;"></span>
3 <span style="display: inline-block; width: 100px; height: 50px; background: #3498db;"></span>
4</div>
5
6<!-- 两个 span 之间的换行符会被解析为空白，产生约 4px 间隙 -->
8. 间隙解决方案
三种常见的解决方案：
方案1：父元素 font-size: 0
方案2：标签写在同一行
方案3：使用 flex 布局（推荐 ✅）
1<!-- 方案1：font-size: 0 -->
2<div style="font-size: 0;">
3 <span style="display: inline-block; ...; font-size: 14px;"></span>
4 <span style="display: inline-block; ...; font-size: 14px;"></span>
5</div>
6
7<!-- 方案2：标签写在同一行 -->
8<div>
9 <span style="display: inline-block; ..."></span><span style="display: inline-block; ..."></span>
10</div>
11
12<!-- 方案3：flex 布局（推荐） -->
13<div style="display: flex;">
14 <span style="width: 100px; height: 50px; background: #e74c3c;"></span>
15 <span style="width: 100px; height: 50px; background: #3498db;"></span>
16</div>