Detailed summary of HTML tag nesting rules suitable for novice friends_HTML/Xhtml_Web page production

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.

There are many XHTML tags: div, 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 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 first need to 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:

Copy code

The code is as follows:

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 each other. They are both domineering. occupies its own row of space - whenever you see this phenomenon in a tag, you can call it: block-level element (block);

Then put the following two lines of code into the body tag Here:

Copy code

The code is as follows:

span1
span2

Browser rendering effect:
span1 span2

This time, the two spans are juxtaposed in a row. They are friendly, friendly and harmonious... With label behavior like this, we You can call them: inline elements;

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 are all block-level elements, which include the following tags:

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

· Inline elements are generally used in certain details or parts of website content to "emphasize, distinguish styles, Superscript, subscript, anchor point, etc., the following tags are all inline elements:

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


· Block element 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*/

· The CSS calling rules for block elements and inline elements are different (this article discusses tag nesting, so this knowledge point will not be explained).

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

1. Block elements can contain inline elements or certain block elements. But inline elements cannot contain block elements, they can only contain other inline elements:

—— Yes
—— Yes

< ;/span> —— Wrong

2. Block-level elements cannot be placed inside

:

1. ol> —— Wrong
   
   —— Wrong
   
   3. There are several special block-level elements It can only contain inline elements and can no longer contain block-level elements. These special tags are:
   h1, h2, h3, h4, h5, h6, p, dt
   
   4. inside 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 and have equal status. , there is no level distinction (for example: strict hierarchies such as h1 and h2^_^). You must know that the li tag can even accommodate its parent ul or ol. Why do some people think that li cannot accommodate a div? Woolen cloth? Don't think that li is so stingy. Even though li looks quite thin, in fact, li has a big heart...
   
   5. Block-level elements are juxtaposed with block-level elements, and inline elements are inline with inline elements. Juxtaposition:
   
   —— Right
   
   —— Right
   

   < ;/div> —— Wrong