The p tag cannot be nested div, and the p tag is nested div.

The p tag cannot be nested div, and the p tag is nested div.

I declare that my code level is a zero starting point. I just started to learn the front-end, so I am a little white. But is the big God also a little white, so we need to concentrate on code and research, haha ~

I practiced code segments today and found that the effects are different from what I imagined:

I thought it was probably a question of <p> and <div> nesting, but neither of them are block-level elements. Can't they be nested, in addition, the final result is a little more than <p>. I feel that HTML is very tolerant and the code can be displayed even if it is wrong. So I found some information on the Internet, involving the nesting of block-level elements and inline elements.

1. Differences between block and inline:

Simply put, block-level elements are used to build the website architecture, layout, and carry content, and are responsible for the overall big aspects. A block-level element always starts from another line. Its height, row height, and margin are controllable. The Inline element is responsible for the local and details. It is displayed on the same line, and its height, row height, and margin are uncontrollable.

Either display: block or display: inline can be used to convert each other.

As for the variable element, you can decide whether it is a block-level element or an inline element based on the context. Well, it is the most flexible =. =

2. Category details: (copied)

Block element HTML Tag classification details
* Address-address
* Blockquote-block reference
* Center-align Blocks
* Dir-directory list
* Div-common block-level labels are easy, and they are also the main labels of css layout.
* Dl-definition list
* Fieldset-form Control Group
* Form-interactive forms (can only be used to accommodate other block elements)
* H1-large title
* H2-subtitle
* H3-Level 3 title
* H4-4 level title
* H5-Level 5 Title
* H6-6 titles
* Hr-horizontal Separator
* Isindex-input prompt
* Menu-menu list
* Optional content of noframes-frames. (content in this block is displayed in browsers that do not support frame.
* Noscript-optional script content (this content is displayed in browsers that do not support scripts)
* Ol-sorting form
* P-paragraph
* Pre-format text
* Table-table
* Ul-non-sorted list

Inline elements are generally Basic semantic-based elements and can only contain text or other inline elements.
* A-anchor
* Abbr-abbreviation
* Acronym-First word
* B-bold (not recommended)
* Bdo-bidi override
* Big-large font
* Br-line feed
* Cite-Reference
* Code-computer code (required when source code is referenced)
* Dfn-define a field
* Em-emphasis
* Font-font setting (not recommended)
* I-italic
* Img-Image
* Input-input box
* Kbd-defines the keyboard text
* Label-Table label
* Q-short reference
* S-hyphen (not recommended)
* Samp-Defines sample computer code
* Select-select a project
* Small-small font text
* Span-commonly used inline containers that define text blocks
* Strike-dashes
* Strong-highlighted in bold
* Sub-subscript
* Sup-superscript
* Textarea-multi-line text input box
* Tt-telex text
* U-underline
* Var-define variables

Variable elements change with the environment based on the above two. The basic concept of variable elements is to determine whether the element is a block element or an inline element based on the context relationship. Once its category is determined, it complies with the rules and restrictions of block elements or Inline elements.
* Applet-java applet
* Button-button
* Del-delete text
* Iframe-inline frame
* Ins-inserted text
* Map-image block (map)
* Object-object
* Script-client script

3. nesting rules for block-level elements and inline elements:

• Basic: inline cannot be nested at the block level. inline elements can be nested at the block level.

<Div>

<A href = "#"> <span> </a> correct (Inline nested inline)

<Span> <div> </span> error (Inline nested block level)

• 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. Therefore, the div cannot be nested in p, which is my mistake.

  <P> <ol> <li> </ol> </p> -- Error

  <P> <div> </p> -- Error

• In special <li>, div can be nested (<li> yes, but <p> NO)
• Block-level elements are tied with block-level elements, and inline elements are tied with Inline elements.

  <Div>

  <Div> <a href = "#"> </a> <span> </div>

  <Div>

Then, the p tag is embedded with the div. The result is that the p tag is split into two tags by the div ~ The brain population process is as follows:

<P> sample</P><Div> inline </div><P></P>