In the XHTML language, we all know that the ul tag contains li, dl tag contains dt and dd-necking rules for these fixed tags are very clear. However, there are many tags that are independent and they are not tied together, such as h1, div, p... So what are the nesting rules for 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 is called block element , and the other is called inline element (inline, which many people call it: inline, inline, line level, etc.).
The division standards for block-level elements and embedded elements are very simple. Please put the following two lines of code into the body tag:
<div style=border: 1px solid red;>div1</div>
<div style=border: 1px solid red;>div2</div>
Browser rendering effect:
div1div2The two divs presented on the page occupy two rows of space. Unless they are allowed to float or make other settings, no one is next to each other. They all occupy their own rows of spaces too domineeringly. If you see a certain tag having this phenomenon, you can call it: block element (block) ;
Then 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>
Browser rendering effect:
span1 span2
This time, two spans are arranged side by side, and they are friendly and friendly, friendly and harmonious... For labeling behaviors like this, we can call them: inline elements ;
The difference between block-level elements and embedded elements: · Block-level elements are generally used to build website architecture, layout, and carry content... These big-tied jobs are block-level elements, which include the following tags:div, ul, li, dl, dt, dd, h1~h6, p, address...
· Inline elements are generally used in certain details or parts of the website content to emphasize and distinguish styles, superscripts, subscripts, anchor points, etc. The following tags are all embedded elements:a, span, strong, sub, sup, img...
· Block elements and embedded elements can be converted to each other , and the conversion code is as follows:display: block; /* convert to block element*/
display: inline; /* Convert to an embedded element*/
· The calling rules for CSS between block elements and embedded elements are different (this article discusses label nesting, so I will not explain this knowledge point).After simply understanding the block elements and embedded elements, you can list the nesting rules of XHTML tags :
1. A block element can contain inline elements or certain block elements, but an inline element cannot contain block elements. It can only contain other inline elements :<div><h1></h1><p></p></div> - Yes
<a href=#><span></span></a> - Yes
<span><div></div></span> - Wrong
2. Block-level elements cannot be placed in <p> :<p><ol><li></li></ol></p> - Wrong
<p><div></div></p> - Wrong
3. There are several special block-level elements that can only contain embedded elements and cannot contain block-level elements. These special tags are:h1, h2, h3, h4, h5, h6, p, dt.
4. The div tag can be included in li - this article does not need to be listed separately, but many people on the Internet have some doubts about this, so I will explain it briefly here:The li and div tags are containers for loading content, with equal status and no distinction between levels (for example: h1 and h2 with strict hierarchy^_^). You should know that the li tag can even accommodate its parent ul or ol. Why do some people think that li cannot accommodate the next div? Don’t take li so stingy, don’t look at li as thin as it is, actually li has a big mind...
5. Block-level elements and block-level elements are parallel, and inline elements and inline elements are parallel:<div><h2></h2><p></p></div> - Yes
<div><a href=#></a><span></span></div> - Yes
<div><h2></h2><span></span></div> - Wrong