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>父亲父亲

块和内联元素的嵌套

元素可以包含内联元素,但是内联元素只能包含其他内联元素。1

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

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

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