1.6 语义化标签与页面结构
到这里，你已经会用各种标签往页面里填内容了。但还差一步：怎么把一整个页面组织成有头有尾的结构？这就要用到语义化标签。
下面的实验把同一个页面布局分别用“一堆 div”和“语义化标签”表达，你可以来回切换对比。
正在加载交互实验...
div 是“万能盒子”，但太笼统
<div> 是一个没有特定含义的“通用容器”，就是一个盒子。你可以用一堆 <div> 搭出任何布局：
html
<div class="header">网站标题</div>
<div class="nav">导航</div>
<div class="main">主内容</div>
<div class="footer">页脚</div>这能跑，但有个问题：对浏览器、搜索引擎和屏幕阅读器来说，这些全都是“一模一样的盒子”，它们看不出哪个是导航、哪个是主内容。
语义化标签：给盒子起个有意义的名字
HTML5 提供了一批语义化标签，它们长得和 <div> 一样、用法一样，但名字本身就说明了用途：
html
<header>网站标题</header>
<nav>导航</nav>
<main>
<article>一篇文章</article>
<aside>侧边栏</aside>
</main>
<footer>页脚</footer>常用的语义标签：
| 标签 | 表示 |
|---|---|
<header> | 页眉（顶部，常放标题、logo） |
<nav> | 导航链接区 |
<main> | 页面主要内容（一页只有一个） |
<article> | 一篇独立的内容（文章、帖子） |
<section> | 一个主题分区 |
<aside> | 侧栏、相关链接等附属内容 |
<footer> | 页脚（底部，常放版权、联系方式） |
正在加载概念检查...
为什么值得用语义化标签
它们在视觉上和 <div> 没区别（默认样式几乎一样），但带来三个实实在在的好处：
- SEO（搜索引擎优化）：搜索引擎能更好地理解页面结构，知道哪块是正文。
- 无障碍：屏幕阅读器能让视障用户“跳到主内容”“跳到导航”，因为它认识
<main>和<nav>。
- 可读性：你自己和队友看代码时，
<nav>显然比<div class="nav">更一目了然。
注意
经验法则：先问“这块内容是什么？”如果有对应的语义标签（页眉、导航、主内容、页脚……），就用它；只有当找不到合适的语义标签时，才退回用
<div>。正在加载概念检查...
本章小结
你已经掌握了 HTML 的核心：
- 网页骨架：
<!DOCTYPE>、<html>、<head>、<body>。
- 内容标签：标题、段落、强调、列表。
- 属性：用
名字="值"配置元素，链接用href，图片用src/alt。
- 表单：
<input>及其type、复选框与单选、<label>。
- 表格：用
<table>、<tr>、<th>、<td>、<caption>表示二维数据。
- 语义化标签：让结构有含义。
但现在你的页面大概还很“朴素”——黑字白底。下一章用 CSS 给它换上漂亮的外观。
正在加载本节练习...