Nested rule analysis of XHTML tags_HTML/Xhtml_Web page production

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 still many tags that are independent and not bundled together, such as h1, div, 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 is called block-level element(block), and the other is called inline element (inline, many people also call it: inline, inline, line level, etc.).

The classification standard for block-level elements and inline elements

is very simple. Please put the following two lines of code into the body tag:

div1

div2

Browser rendering effect:

div1

div2

The two divs presented on the page occupy two rows of space. Unless they are floated or other settings are made, no one is next to the other. They all occupy their own row of space domineeringly - —Whenever you see a tag exhibiting this phenomenon, you can call it: Block-level element (block) ;

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

span1
span2

Browser rendering effect:

span1 span2

This time, the two spans are juxtaposed in one line. They are friendly and harmonious... We can call them tag behaviors like this: Inline elements (inline) ;

The difference between block-level elements and inline elements:

· Block-level elements are generally used to build website architecture, layout, and carry content... These major physical tasks all belong to 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 website content to "emphasize, distinguish styles, superscripts, subscripts, anchors", etc. The following tags All are inline elements:

a, span, strong, sub, sup, img...

· Block elements and inline elements can be converted to each other . The conversion code is as follows:

display: block; /* Convert to block element */

display: inline; /* Convert to inline element */

· Block elements and inline elements have different calling rules for CSS's (this article discusses tag nesting, so this knowledge point will not be explained. ).

After briefly understanding block elements and inline elements, we can list the nesting rules of XHTML tags below:

1. Block elements can contain inline elements or certain block elements, but inline elements cannot contain block elements. It can only contain other inline elements :

—— Yes
—— True

—— False

2. Block-level elements cannot be placed inside

:

—— Wrong

—— Wrong

3. There are several special block-level elements that can only contain inline elements and cannot contain block-level elements. These special tags are:

h1, h2, h3, h4, h5, h6, p, dt.

4. li can contain div tags - This item does not need to be listed separately, but many people on the Internet are confused about this, so I will briefly explain it here:

Li and div tags are both containers for loading content. They have equal status and have no distinction in levels (for example: strict hierarchies such as h1 and h2^_^). You must know that the li tag is connected to its parent ul or ol can be accommodated. Why do some people think that li cannot accommodate a div? Don’t think li is so stingy. Don’t think li is quite thin. In fact, li has a big heart...

5. Block-level elements are juxtaposed with block-level elements, and inline elements are juxtaposed with inline elements:

—— Yes

—— Yes

—— Wrong