Cannot nest Div in P tag

First declare my code level is zero starting point, just beginning to learn the front end, so is small white. But the big God is also small white change body, so to concentrate code, painstaking study, haha~

Practice the code today and find that the effect is different from what you think:

Think about the estimate is the <p> and <div> nested problems, but two is not all block-level elements, can not be nested, and the final result is more than a section of the effect of <p>, the sense of HTML tolerant heart strong, code error can also be displayed. So I found some information on the Internet, which involves the nesting of block-level elements and inline elements.

1. The difference between a block-level element (block) and an inline element (inline):

To put it simply, block-level elements are used to build the site architecture, layout, hosting content, responsible for the overall big aspect. Block-level elements always start on a different line, and their height, row height, and margin are controllable. Inline elements are responsible for local and detail, and are displayed on the same line, whose height, row height, and margin are not controllable.

by Display:block, or display:inline can be converted to each other.

As for variable elements, it is possible to determine whether a block-level element or an inline element, depending on the context, well, it is the most flexible. =

2. Classification Details: (copied)

Block element HTML tag classification details
* Address-addresses
* BLOCKQUOTE-block Reference
* Center-align Block
* DIR-List of directories
* Div-Common block-level easy, is also the main tag of CSS layout
* DL-definition list
* Fieldset-form control Group
* Form-interactive form (can only be used to accommodate other block elements)
* H1-Big title
* H2-subtitle
* H3-3 level title
* H4-4 level title
* H5-5 level title
* H6-6 level title
* HR-Horizontal divider line
* Isindex-input Prompt
* menu-List of menus
* Noframes-frames Optional content, (for browsers that do not support frame, display this chunk content
* NoScript-Optional script content (this content is displayed for browsers that do not support script)
*ol-Sort the form
* P-paragraph
* Pre-formatted text
* Table-form
* ul-non-sorted list

Inline elements (inline element) are generally based on the semantic level (semantic) of the basic elements, can only accommodate text or other inline elements.
* A-anchor point
* ABBR-abbreviation
* Acronym-First word
* B-Bold (not recommended)
* Bdo-bidi Override
* Big-Large font
* BR-line break
* cite-citation
* Code-computer code (required when referencing the source)
* DFN-Define Fields
* EM-emphasis
* font-typeface settings (not recommended)
* I-Italic
* img-Images
* Input-Enter box
* KBD-Define keyboard text
* Label-table label
* Q-Short reference
* S-Medium dash (not recommended)
* Samp-Define sample computer code
* Select-Project selection
* Small-Small font text
* span-a common inline container that defines chunks within a text
* Strike-Medium dash
* Strong-Bold Emphasis
* Sub-subscript
* sup-superscript
* TEXTAREA-multi-line text input box
* TT-Telex text
* U-Underline
* var-Define Variables

The variable element is based on the above two changes with the environment, and its basic concept 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 follows the rules of the block element or inline element.
* Applet-java Applet
* Button-Buttons
* Del-delete text
* Iframe-inline Frame
* INS-Inserted text
* Map-image block (map)
* Object-object Object
* Script-client-side scripting

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

• Most basic: inline cannot nest block level, block level can nest inline element

<div>

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

<span><div></div></span> errors (inline nested block level)

• There are several special block-level elements that can contain only inline elements, and can no longer contain block-level elements, these special tags are:H1, H2, H3, H4, H5, H6, p, dt. so I can't nest Div in P, that's my mistake.

  <p><ol><li></li></ol></p>--wrong

  <p><div></div></p>--wrong

• Special <li> can be nested div (<li> can but <p> not)
• Block-level elements are tied to block-level elements, inline elements and inline elements

  <div>

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

  <div>　

Again, the result of the P tag inline Div is that the P tag is sliced into two tabs by a DIV-the process of estimating brain compensation is this:

<p>sample</p><div>inline</div><p></P>

Cannot nest Div in P tag