HTML结构

1. 什么是语义化

语义化是指使用恰当的 HTML 标签来表达内容的含义，而不是仅仅为了样式。

语义化的好处：

对比示例：
非语义化 ❌ 语义化 ✅
<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

章节内容...

章节2

章节内容...

1. 表格结构分组

<thead> 表头 | <tbody> 表体 | <tfoot> 表尾

<caption> 表格标题，让表格更语义化。

演示效果：
学生成绩表
姓名 语文 数学
张三 85 90
李四 78 88
平均分 81.5 89

2. 合并列 colspan

colspan 属性让一个单元格横跨多列。

例如 colspan="2" 表示这个单元格占 2 列的位置。

演示效果：
个人信息 成绩
张三 男 90

3. 合并行 rowspan

rowspan 属性让一个单元格纵跨多行。

例如 rowspan="2" 表示这个单元格占 2 行的位置。

演示效果：
姓名 科目 分数
张三 语文 85
数学 90
李四 语文 78
数学 88

4. 综合示例

同时使用 colspan 和 rowspan 的复杂表格。

演示效果：
科目 总分
语文 数学
85 90 175