前言： 大家好，我是[小奇腾]。欢迎来到 “幼儿园前端” 第 5 集！ 很多新手写网页，喜欢用
<div>走天下。 头部是 div，导航是 div，文章是 div，底部还是 div。 这种代码虽然能跑，但在浏览器和搜索引擎眼里，它就是一个没有任何特征的“大通铺” 。 今天我们来学习 语义化标签（Semantic Tags），也就是给网页的每个部分“挂上名牌”。学会这个，你的代码不仅更漂亮，还能让 Google 和百度更喜欢你！
本期详细的视频教程bilibili：幼儿园前端 #05：别再用 div 也就是盒子堆一切了！教你写出“有教养”的代码 。
一、div和语义化区别
1. div = 没有任何感情的纸箱子 📦
<div class="header"> 这样的写法只有自己知道是头部，浏览器是不知道的。
2. 语义化标签 = 专业的盒子
- HTML5新特性推出了一套**“有名字的盒子”** ，当你写
<header>时，浏览器立刻就懂了：“哦！这是网页的头部！此外还有<nav>、<main>、<footer> - 为了 SEO（让搜索引擎爱上你）：如果用了
<main>，爬虫狂喜：“哈！重点内容全在这里，我要把这部分收录进数据库！” 结论：想让你的网站在百度排前面？用语义化！ - 为了无障碍（让盲人也能上网）：当读到
<nav>时，阅读器会提示：“进入导航区域”。
二、四大核心金刚
不要背那一堆复杂的标签，新手只要把这 4 个 刻在脑子里，就足够应付 90% 的场景了。
1. <header> —— 头部（客厅）
- 放什么？ 网站 Logo、搜索框、登录按钮。
- 位置：通常在网页的最上面。
2. <nav> —— 导航（路标）
- 放什么？ 菜单链接（比如：首页 | 产品 | 关于我们）。
- 注意：它通常放在
<header>里面，或者紧挨着<header>。
3. <main> —— 主体内容（卧室）
- 放什么？ 页面里最重要的内容。
- 规则：一个页面最好只有一个
<main>。就像一个人只能有一个心脏。
4. <footer> —— 底部（地下室）
- 放什么？ 版权声明（© 2025）、备案号、联系方式。
- 位置：通常在网页的最下面。
三、 动手实战：重构页面结构
<!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>
<nav>
<a href="#">首页</a> | <a href="#">文章</a>
</nav>
</header>
<hr> <main>
<h2>今天学习语义化</h2>
<p>这是我正文的核心内容，爬虫最喜欢这里。</p>
</main>
<hr>
<footer>
<p>© 2026 幼儿园前端. All rights reserved.</p>
</footer>
</body>
</html>
