HTML: HTML 元素
理解块级元素与内联元素的区别，并掌握正确地嵌套标签的方法。
1. 什么是 HTML 元素
HTML 中，元素（element）是指从开始标签到结束标签之间的完整结构，包含标签本身以及包裹的内容。浏览器将每个元素解析为 DOM 树中的一个节点，构成页面的层次结构。
一个完整的 HTML 元素由三部分组成：
▶ 示例
HTML
<p>这是一个段落元素</p>
<!-- 开始标签 + 内容 + 结束标签 = 完整元素 -->
<a href="https://example.com">点击这里</a>
<!-- 元素可以包含属性（href），属性写在开始标签中 -->
然而，并非所有元素都包含内容。有些元素没有内容，也不需要结束标签，它们被称为空元素（void element）。
▶ 示例
HTML
<br> <!-- 换行元素：没有内容，也没有结束标签 -->
<hr> <!-- 水平分隔线：同样为空元素 -->
<img src="/assets/images/tutorials/html-example-photo.webp" alt="A sample photo"> <!-- 图片元素：仅有属性，没有内容 -->
<input type="text" name="username"> <!-- 输入框元素 -->
关键区别在于：完整元素有开始标签、内容和结束标签；空元素只有开始标签（通常携带属性），没有内容和结束标签。
📌 元素与 DOM 节点： DOM 结构中，每个元素对应一个节点。
<html> 是根节点，<body> 和 <head> 是其子节点。元素之间的嵌套关系决定了节点之间的父子关系和兄弟关系。你可以回到 HTML 基础 一章回顾 DOM 的概念。
2. 块级元素 vs 行内元素
HTML 元素根据在页面上的排布方式分为两大类：块级元素（block-level element）和行内元素（inline element）。理解它们的区别是掌握页面布局的第一步。
(1) 块级元素（Block-level）
块级元素的特点是独占一行。无论它的内容有多宽，它都会自动占据父容器的整行宽度，并且前后的元素会另起一行显示。
常见的块级元素如下表所示：
| 标签 | 说明 | 标签 | 说明 | 标签 | 说明 |
|---|---|---|---|---|---|
<h1>~<h6> |
标题1-6 | <dl> |
定义列表 | <article> |
文章 |
<p> |
段落 | <dt> |
定义术语 | <aside> |
侧边 |
<fieldset> |
分组 | <dd> |
定义描述 | <footer> |
页脚 |
<hr> |
分隔线 | <header> |
页眉 | <table> |
表格 |
<ol> |
有序列表 | <nav> |
导航 | <div> |
块容器 |
<ul> |
无序列表 | <main> |
主体 | <form> |
表单 |
<li> |
列表项 | <section> |
区域 |
▶ 示例
HTML
<p>这是第一个段落，占据一整行</p>
<p>这是第二个段落，另起一行显示</p>
<div>
<h2>标题也在独立行中</h2>
<p>div 内部的段落也在独立行</p>
</div>
(2) 行内元素（Inline）
行内元素的特点是不独占一行。它只占据自身内容的宽度，在一行内从左到右依次排列，宽度不够时会自动换行。
常见的行内元素如下表所示：
| 标签 | 说明 | 标签 | 说明 |
|---|---|---|---|
<a> |
超链接 | <ins> |
插入的文本 |
<b> |
加粗 | <del> |
删除的文本 |
<strong> |
重要文本 | <button> |
按钮 |
<em> |
强调（斜体） | <input> |
表单输入 |
<i> |
斜体 | <img> |
图像 |
<small> |
小号字体 | <span> |
行内容器 |
<sub> |
下标 | <sup> |
上标 |
▶ 示例
HTML
<p>这段文字中包含<strong>加粗部分</strong>和<em>斜体部分</em>，它们和<span style="color: red">在同一行内</span>显示。</p>
(3) 两者的核心区别对比
▶ 示例
HTML
<!-- 块级元素对比 -->
<div style="border: 1px solid #e74c3c; padding: 4px;">块级 1</div>
<div style="border: 1px solid #e74c3c; padding: 4px;">块级 2</div>
<!-- 每个 div 独占一行，上下排列 -->
<!-- 行内元素对比 -->
<span style="border: 1px solid #3498db; padding: 4px;">行内 1</span>
<span style="border: 1px solid #3498db; padding: 4px;">行内 2</span>
<!-- 两个 span 在同一行内，左右排列 -->
📌 关键规则：
- 块级元素可以包含行内元素和其他块级元素。
- 行内元素只能包含行内元素（或文本），不能直接包含块级元素。
- 例外：HTML5 中，
<a>标签可以包裹块级元素，例如将一个整块卡片设置为可点击链接。
3. 元素的嵌套与层级
HTML 元素可以像俄罗斯套娃一样一个包裹另一个，这种关系被称为嵌套（nesting）。嵌套结构决定了元素在 DOM 树中的层级关系。
(1) DOM 树的节点关系
当元素相互嵌套时，它们之间形成了三种关系：
- 父子关系：外层元素是内层元素的"父节点"。例如
<body>是<p>的父节点。 - 兄弟关系：同一个父元素下的多个子元素互为"兄弟节点"。例如
<h1>和<p>同属<body>时互为兄弟。 - 祖先-后代关系：跨越多层嵌套的关系。例如
<html>是所有元素的祖先节点。 下面这张嵌套结构清晰地展示了元素之间的层级关系：
▶ 示例
HTML
<body> <!-- 父节点 -->
<h1>页面标题</h1> <!-- 子节点 + 兄弟节点1 -->
<p> <!-- 子节点 + 兄弟节点2 -->
这是一段包含<strong>强调文字</strong> <!-- 孙子节点（p的子节点）-->
的段落。
</p>
</body>
对应的 DOM 树结构如下：
PLAIN
body
├── h1 ("页面标题")
└── p
├── 文本: "这是一段包含"
├── strong
│ └── 文本: "强调文字"
└── 文本: "的段落。"
(2) 正确嵌套 vs 错误嵌套
嵌套必须遵循"先进后出"的原则——最内层先打开的元素必须最先关闭。如果标签交叉关闭，就会导致错误的嵌套：
▶ 示例
HTML
<!-- 正确嵌套：先打开的先关闭 -->
<div>
<p><strong>重要的文字</strong> 后面是普通文字。</p>
</div>
<!-- 错误嵌套：标签交叉关闭 -->
<div>
<p><strong>重要的文字</p></strong>
</div>
<!-- 浏览器会尝试纠正这个错误，但可能导致意想不到的布局问题 -->
⚠️ 嵌套注意事项：
- 行内元素（如
<span>、<strong>）内不能嵌套块级元素（如<div>、<p>）。 <p>标签内部不能嵌套其他块级元素，如<div>或另一个<p>。- 深层嵌套虽然语法上合法，但会降低可读性和维护性。建议控制在 3~4 层以内。
- 使用浏览器的"检查"功能（F12）可以直观地查看 DOM 树结构，是一个极好的学习方式。
❓ 常见问题
Q 块级元素和行内元素的本质区别是什么？什么时候用哪个？
A 本质区别在于"是否换行"。块级元素独占一行，像一个段落，用于搭建页面的宏观结构（标题、段落、容器）；行内元素不换行，像一个词，用于标记文本中的局部内容（加粗、链接、强调）。实际开发中，90%的布局用块级元素（
div、section、article），行内元素只在需要对文字做特殊处理时使用（strong、em、a）。记住：块级搭骨架，行内做细节。Q 为什么行内元素不能包含块级元素？这背后有什么逻辑？
A 这是HTML语义化的要求。块级元素代表"一个独立的内容区块"，行内元素代表"文本流中的一部分"。把块级放进行内，就像把一个段落塞进一个词里——语义上说不通。浏览器虽然能容错处理，但会导致DOM结构混乱，影响CSS样式和JavaScript操作。HTML5中唯一的例外是
<a>标签可以包裹块级元素，用于把整个卡片变成可点击链接。Q
<strong>和<b>都是加粗，<em>和<i>都是斜体，有什么区别？A 区别在于"语义"。
<strong>表示"这段文字很重要"，<em>表示"这段文字需要强调"——它们传达的是内容的重要性；而<b>只是"把文字加粗"，<i>只是"把文字斜体"——它们只管视觉样式。搜索引擎和屏幕阅读器会识别<strong>和<em>的语义，但会忽略<b>和<i>。原则是：如果是为了强调内容的含义，用<strong>/<em>；如果只是为了视觉效果，用<b>/<i>或CSS。📖 小节
- 元素 = 开始标签 + 内容 + 结束标签（完整元素）或只有开始标签（空元素）。
- 块级元素独占一行，可包含其他块级和行内元素；行内元素不换行，只能包含文本或行内元素。
- 嵌套必须遵循"先进后出"原则，不能交叉嵌套。
- DOM 树中元素形成父子、兄弟、祖先-后代三种关系。
📝 作业
- 块级 vs 行内实验：创建一个页面，分别用两个
<div>（块级）和两个<span>（行内）放入相同内容。给它们加上边框样式style="border:1px solid red"，观察它们在浏览器中的排列方式有何不同。 - DOM 树练习：写出以下代码对应的 DOM 树结构（手动画出树形图）：
<div><h2>标题</h2><p>文本<strong>强调</strong>结尾</p></div>
