All Web pages can be based on HTML tags. Next, let's look at the nesting rules of HTML tags in detail. It is necessary for new friends who are learning web pages to learn more about HTML recently, A new understanding of HTML! Don't underestimate this. All webpages are based on it! Next, let's take a look at the nesting rules of HTML tags in detail, hoping to help you.
There are many XHTML labels: p, ul, li, dl, dt, dd, h1 ~ H6, p, a, addressa, span, strong ...... When we use these labels to construct the Page Structure, We Can infinitely nest them. However, nesting also requires certain rules, you cannot let your individual habits nest randomly-XHTML is not XML.
In the XHTML language, we all know that ul labels contain li and dl labels, dt and dd. The nested rules of these fixed labels are very clear. However, there are many tags that are independent and are not bundled together, such as h1, p, p ...... So what are the nesting rules of these labels? Let's talk about this topic today.
When talking about the nesting rules of XHTML tags, we first need to know the following two types of XHTML tags:
A class is called block-level elements (blocks)
One class is embedded element (inline, which is also called by many people: inline, in-line, line level, etc)
The criteria for dividing block-level elements and embedded elements are simple. Put the following two lines of code into the body tag:
The Code is as follows:
P1
P2
The rendering effect of the browser:
P1
P2
The two p values displayed on the page occupy the space of two rows. Unless they are float or other settings are made, no one will touch anyone, they all take over the space of their own line-whenever you see a label with this phenomenon, you can call it block-level elements (blocks );
Put the following two lines of code into the body tag:
The Code is as follows:
Span1
Span2
The rendering effect of the browser:
Span1 span2
This time, the two spans are on the same line. They are friendly and harmonious ...... For such label behaviors, we can call them embedded elements (inline );
Differences between block-level elements and embedded elements:
· Block-level elements are generally used to build website architecture, layout, and carry content ...... Such large physical activity belongs to block-level elements, and it includes the following tags:
Address, blockquote, center, dir, p, dl, dt, dd, fieldset, form, h1 ~ H6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul
· Embedded elements are generally used in some details or parts of the website content to "emphasize, differentiate styles, superscripts, subscript, and anchor". The following labels are embedded 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 elements and embedded elements can be converted to each other. The conversion code is as follows:
Display: block;/* convert to block element */
Display: inline;/* convert to embedded elements */
· Block elements and embedded elements have different calling rules for CSS (this article discusses label nesting, so do not describe this knowledge point ).
After a simple understanding of block elements and embedded elements, we can list the nesting rules of XHTML labels below:
1. A block element can contain inline elements or some block elements, but an inline element cannot contain block elements. It can only contain other inline elements:
-- Pair
-- Pair
-- Error
2. Block-level elements cannot be placed
Inside:
-- Error
-- Error
3. There are several special block-level elements that can only contain embedded elements, but cannot contain block-level elements. These special labels are:
H1, h2, h3, h4, h5, h6, p, dt
4. li can contain the p tag-this one does not need to be listed separately, but many people on the Internet have some doubts about this, so I will add a description here:
Both li and p labels are content-loaded containers with equal status and no level (for example, a strict hierarchy like h1 and h2, the li tag can even accommodate its parent ul or ol. Why do people think that li cannot accommodate the next p? Don't look at li so stingy. Don't look at li very thin. In fact, li's mind is very big ......
5. Parallel Block-level elements and block-level elements, parallel embedded elements and embedded elements:
-- Pair
-- Pair
-- Error
