2.3 HTML 层次结构

一个HTML文档就像一个大的家族树，有父母、兄弟姐妹、子女、祖先和后裔。

它来自于HTML元素之间相互嵌套的能力。

源文章： https://marksheet.io/html-hierarchy.html

1. 嵌套

让我们来写一个简单的段落，通过插入两个内嵌式元素来区分部分文字，来增强它。

<p>
    <strong>Alex Ferguson</strong>爵士曾说过Filipo Inzaghi：<q>那小子一定是天生的越位者</q>。
  </p>

效果：

Alex Ferguson爵士曾说过Filipo Inzaghi：那小子一定是天生的越位者。

在这个设定中:

• <strong>元素让 "弗格森 "这句话被强调。
• <p>标记了他对因扎吉的引用

事实上，<strong>用黑体显示只是浏览器的默认行为。请记住，你必须根据HTML元素的含义来选择HTML元素，而不是根据它们的样子来选择。

在这种情况下。

• <p>是<strong>和<q>的父元素。
• <strong>和<q>是<p>的子元素。
• <strong>和<q>是同族元素。

2. 顺序

嵌套的工作方式取决于开始和结束标记的位置。

因为一个HTML元素由一个开始标签、一个结束标签以及中间的所有内容组成，所以子元素必须在结束父元素之前结束。

<!----这是无效代码! :-( -->
<p>
  这段HTML代码无法工作，因为我的 "strong "标签在这里被打开了<strong>，但只是在段落之后才被关闭。
</p></strong>

因为<strong>是在<p>之后开始的（因此被认为是<p>的子元素），所以<strong>元素必须在其父元素<p>之前结束。

<!----这是有效的代码。) -->
<p>
  这个HTML代码之所以可以工作，是因为我的 "strong "标签被正确地开始<strong>和结束</strong>。
</p>

3. 深度

因为子元素本身可以包含其他的子元素，所以在一个HTML文档中可以写出更深层次的层次结构。

我们上面这一段可以成为一篇博客文章的一部分。

<article>
  <h1>著名的足球名言</h1>
  <p>
    <strong>Alex Ferguson</strong>爵士曾说过Filipo Inzaghi：<q>那小子一定是天生的越位者</q>。
  </p>
  <p>
    当被约翰-凯瑞批评时，<strong>兹拉坦-伊布拉希莫维奇</strong>回答道。<q>"卡里乌用足球做什么，我可以用橘子做什么"</q>。
  </p>
  <p>
    <strong>George Best</strong>说<q>"我花了很多钱在酒、鸟和快车上。其余的我只是挥霍了。"</q>当被问及他的生活方式时，</q>说："我花了很多钱在酒、鸟和快车上，其余的我都挥霍了。
  </p>
</article>

效果：

著名的足球名言

Alex Ferguson爵士曾说过Filipo Inzaghi：那小子一定是天生的越位者。

当被约翰-凯瑞批评时，兹拉坦-伊布拉希莫维奇回答道。"卡里乌用足球做什么，我可以用橘子做什么"。

George Best说"我花了很多钱在酒、鸟和快车上。其余的我只是挥霍了。"当被问及他的生活方式时，说："我花了很多钱在酒、鸟和快车上，其余的我都挥霍了。

---

在这个设定中:

• <article>是其他所有元素的祖先
• <article>是<h1>和3个<p>的父元素
• <h1>和3个<p>是兄弟姐妹
• 每一个<p>都是它们包含的<strong>和<q>的父级
• 每一个<h1>、<p>、<strong>和<q>都是<article>的后裔

在遍历几层HTML嵌套时，家族树的类比仍然适用：

• 元素X的后裔是指X中的任何元素
• 孩子只是直系后代
• 元素Y的祖先是任何一个包含Y的元素
• 父元素只是直系祖先
• 元素X的兄弟姐妹是指具有相同父系元素的任何元素

4. 区块和内嵌套

块元素既可以包含块元素，也可以包含内联元素。

但是，内联元素只能包含其他内联元素¹ 。

<!----这是无效代码! :-( -->
<strong>
  <p>你不能把一个段落放在 "强 "标签内。
</strong>

只要记住祖先/后裔、父母/子女和兄弟姐妹就可以了。这个层次结构在CSS中会很有用。

---

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