HTML's weird nesting rules_html/css_WEB-ITnose

1. HTML tags include block-level elements (block) and inline elements (inline)

　1. Block-level elements

Generally used to build website architecture, layout, and content... It includes 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

　2. Inline elements

Generally used in Certain details or parts of the website content are used to "emphasize, distinguish styles, superscripts, subscripts, anchor points", etc. The following tags are all 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

2. Nesting rules of HTML tags

1. Block elements can contain inline elements or certain Some 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

:

　

?? Wrong

　

?? Wrong

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

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

4. Can li contain div tags?? This one is actually unnecessary It is 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, with equal status and no level distinction (for example: h1, h2 Such a strict hierarchy^_^), 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? 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. Inline elements are juxtaposed with inline elements:

　

?? vs.

?? Right

　

?? Wrong

Attachment:

Search WeChat ID: ruixin, or scan the QR code below, follow the blog public account, and supplement your brain on the Internet from time to time:

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn