Detailed summary of HTML tag nesting rules

All web pages are based on HTML tags. Let’s summarize the nesting rules of HTML tags in detail. It is necessary for novice friends who are learning web pages to read it. I have been re-learning HTML recently, which can be regarded as a new understanding of HTML! Don't underestimate this thing, all web pages are based on it! Let’s summarize the nesting rules of HTML tags in detail. I hope it will be helpful to everyone.

XHTML has many tags: p, ul, li, dl, dt, dd, h1~h6, p, a, addressa, span, strong... When we use these tags to build the page structure, They can be nested infinitely, but nesting also needs to have certain rules, and you cannot allow your own personal habits to be nested randomly - XHTML is not XML after all.

In the language of XHTML, we all know: ul tag contains li, dl tag contains dt and dd - the nesting rules of these fixed tags are very clear. However, there are many independent tags that are not bundled together, such as h1, p, p... So what are the nesting rules of these tags? Let’s talk about this topic today.

When it comes to the nesting rules of XHTML tags, we must first know that there are two types of XHTML tags:
One type is called block-level elements (block)
The other type is called inline elements (inline, Many people also call it: inline, inline, line level, etc.)

The standard for dividing block-level elements and inline elements is very simple. Please put the following two lines of code into the body tag:

<p style=”border: 1px solid red;”>p1</p> 
<p style=”border: 1px solid red;”>p2</p>

The rendering effect of the browser:
p1
p2

The two p's presented on the page occupy two lines of space, unless they are allowed to float (float) or It is necessary to make other settings, otherwise no one will be next to each other, and they will occupy their own line of space arrogantly - whenever you see this phenomenon in a certain label, you can call it: block-level element (block);

Put the following two lines of code into the body tag:

<span style=”border: 1px solid red;”>span1</span> 
<span style=”border: 1px solid red;”>span2</span>

浏览器的呈现效果：
span1 span2

这一次，两个 span 并列在一行，它们之间睦邻友好、亲切和谐……像这样的标签行为，我们可以称它们为：内嵌元素（inline）;

块级元素和内嵌元素的区别：

·块级元素 一般用来搭建网站架构、布局、承载内容……像这些大体力活都属于块级元素的，它包括以下这些标签：

address、blockquote、center、dir、p、dl、dt、dd、fieldset、form、h1~h6、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul

· 内嵌元素 一般用在网站内容之中的某些细节或部位，用以“强调、区分样式、上标、下标、锚点”等等，下面这些标签都属于内嵌元素：

a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、span、strike、strong、sub、sup、textarea、tt、u、var


· 块元素 和 内嵌元素 是可以互相转换的，转换的代码如下：
display: block; /* 转成块元素 */
display: inline; /* 转成内嵌元素 */

· 块元素 和 内嵌元素 对于 CSS 的调用规则是不一样的（这篇文章讨论的是标签嵌套，所以对这个知识点不展开说明）。

简单认识了块元素和内嵌元素以后，下面就可以罗列 XHTML 标签的嵌套规则了：

1. 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素：
e388a4556c0f65e1904146cc1a846bee4a249f0d628e2318394fd9b75b4636b1473f0a7621bec819994bb5020d29372ae388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a394b3e26ee717c64999d7867364b1b4a3 —— 对
c7edcd5438aed4fd08cf917afe0c61c045a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d1145db79b134e9f6b82c0b36e0489ee08ed —— 对
45a2772a6b6107b401db3c9b82c049c2e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a354bdf357c58b8a65c66d7c19c8e4d114 —— 错

2. 块级元素不能放在e388a4556c0f65e1904146cc1a846bee里面：
e388a4556c0f65e1904146cc1a846beec34106e0b4e09414b63b2ea253ff83d625edfb22a4f469ecb59f1190150159c6bed06894275b65c1ab86501b08a632ebf6f112ef45f603be226bc581f9dd5e9094b3e26ee717c64999d7867364b1b4a3 —— 错
e388a4556c0f65e1904146cc1a846beee388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a394b3e26ee717c64999d7867364b1b4a3 —— 错

3. 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：
h1、h2、h3、h4、h5、h6、p、dt

4. li 内可以包含 p 标签 —— 这一条其实不必单独列出来的，但是网上许多人对此有些疑惑，就在这里略加说明：

li 和 p 标签都是装载内容的容器，地位平等，没有级别之分（例如：h1、h2 这样森严的等级制度^_^），要知道，li 标签连它的父级 ul 或者是 ol 都可以容纳的，为什么有人会觉得 li 偏偏容纳不下一个 p 呢？别把 li 看得那么小气嘛，别看 li 长得挺瘦小，其实 li 的胸襟很大滴……

5. 块级元素与块级元素并列、内嵌元素与内嵌元素并列：
e388a4556c0f65e1904146cc1a846beec1a436a314ed609750bd7c7d319db4da2e9b454fa8428549ca2e64dfac4625cde388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a394b3e26ee717c64999d7867364b1b4a3 —— 对
e388a4556c0f65e1904146cc1a846beec7edcd5438aed4fd08cf917afe0c61c05db79b134e9f6b82c0b36e0489ee08ed45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d11494b3e26ee717c64999d7867364b1b4a3 —— 对
e388a4556c0f65e1904146cc1a846beec1a436a314ed609750bd7c7d319db4da2e9b454fa8428549ca2e64dfac4625cd45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d11494b3e26ee717c64999d7867364b1b4a3 —— 错

更多HTML标签嵌套规则详细归纳相关文章请关注PHP中文网！