2.3 HTML 元素关系（Hierarchy）

HTML文档就像一个 族谱，元素之间的关系有父亲（parents），兄弟姐妹（siblings），子女（children），祖先（ancestors）和后代（descendants）。

通过这样的层级和嵌套关系把元素彼此关联组织在一起，形成完整的体系。

嵌套（Nesting）

我们使用下面的代码来说明：

<p>
  我们认为学习不只是掌握知识点，更重要的是要沉淀为<strong>理解力</strong>，为此需要：<q>"知其然，知其所以然。"</q>.
</p>

我们认为学习不只是掌握知识点，更重要的是要沉淀为理解力，为此需要："知其然，知其所以然。".

本例中：

• <strong> 元素赋予“理解力”更多重要性
• <q> 标记一段引用

<strong> 被显示为 粗体（bold） 是 浏览器的默认行为。

本例中：

• <p> 是 <strong> 和 <q> 的 父 元素
• <strong> 和 <q> 是 <p> 的 子 元素
• <strong> 和 <q> 是 兄弟 元素

顺序（Order）

元素嵌套关系 由 开始标签 和 关闭标签 的顺序所确定。

子元素被包含在父元素的标签对之间，开始标签要晚于父元素，而关闭标签必须早于父元素。下面的代码是违反规则的。

<!-- 无效代码! :-( -->
<p>
  这段代码无效，因为 "strong" 标签的关闭<strong>顺序不正确。
</p></strong>

<!-- 有效代码. :-) -->
<p>
  这段代码有效，因为 "strong" 标签的关闭<strong>顺序</strong>不正确。</p>

深度（Depth）

嵌套允许有多个层级，下面是一个有更深元素层级的代码示例：

上述例子中：

• <article> 是所有其他元素的 祖先（ancestor）
• <h1>, <p>, <strong> 和 <q> 元素都是 <article> 的后代（descendants）
• <h1> and 2个 <p> 元素是 兄弟（siblings）
• <p> 是其包含的 <strong> 和 <q> 子元素的 父亲
• <article> 是 <strong> 和 <q> 的 父亲 的 父亲

块和内联元素的嵌套

块元素可以包含块或内联元素，但是内联元素只能包含其他内联元素。¹

<!-- 无效代码! :-( -->
<strong>
  <p>你不应该把p元素放在 "strong" 标签中。</p>
</strong>

写文章要条理清楚，写HTML文档也一样，良好的文档结构有助于用户和搜索引擎更好的理解页面内容。

1. <a> 链接是唯一的例外。 ↩