一、语义化核心：见名知意
记忆口诀：用标签说话，别让div扛所有
非语义化 vs 语义化 对比代码
<!-- ❌ 全用div的写法 -->
<div class="header">
<div class="nav">...</div>
</div>
<div class="main-content">
<div class="section">...</div>
</div>
<div class="footer">...</div>
<!-- ✅ 语义化写法 -->
<header>
<nav>...</nav>
</header>
<main>
<article>...</article>
</main>
<footer>...</footer>
关键差异：
- 代码可读性：看到
<nav>就知道是导航，不需要查class名 - SEO优化：搜索引擎直接识别
<article>里的内容为重点
二、高频语义化标签速记表
| 标签 | 用途 | 典型场景 |
|---|---|---|
<header> | 页面/区块的头部 | 网页顶部LOGO、标题 |
<nav> | 导航链接 | 主导航菜单、侧边栏目录 |
<main> | 文档主要内容 | 页面核心内容区域（唯一） |
<article> | 独立内容块 | 博客文章、新闻内容、论坛帖子 |
<section> | 文档中的节 | 章节、带标题的内容分组 |
<aside> | 侧边栏/附属信息 | 广告、相关文章链接 |
<footer> | 页面/区块的底部 | 版权信息、联系方式 |
<figure> | 媒体内容+说明 | 图片+图注组合 |
<time> | 时间/日期 | 发布时间（机器可读格式） |
三、语义化三大实战好处
1. SEO优化（搜索引擎友好）
<!-- 爬虫会优先抓取article内的内容 -->
<article>
<h1>前端面试技巧</h1>
<p>掌握语义化标签能提升SEO排名...</p>
</article>
2. 无障碍访问（读屏软件支持）
<!-- 读屏软件会提示"导航区域" -->
<nav aria-label="主菜单">
<ul>...</ul>
</nav>
3. 开发维护效率
<!-- 团队协作时一眼看懂结构 -->
<section class="user-profile">
<header>...</header> <!-- 用户头像区 -->
<article>...</article> <!-- 个人简介 -->
<footer>...</footer> <!-- 操作按钮 -->
</section>
