一个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. 区块和内嵌套
块元素既可以包含块元素,也可以包含内联元素。
但是,内联元素只能包含其他内联元素1 。
<!----这是无效代码! :-( -->
<strong>
<p>你不能把一个段落放在 "强 "标签内。
</strong>
只要记住祖先/后裔、父母/子女和兄弟姐妹就可以了。这个层次结构在CSS中会很有用。
链接元素
<a>
是唯一的例外。 ↩︎