Learn the front-end development from scratch-7, tag nesting rules and CSS common style overlay

1. Block-level elements can contain inline elements or some block-level elements, but inline elements cannot contain block-level elements, which can contain only other inline elements:

<div>

<a href= "#" ><span></span></a>--to

<span><div></div></span>--not reasonable

2. Block-level elements cannot be placed in <p>:

<p><ol><li></li></ol></p>--not reasonable

<p><div></div></p>--not reasonable

3. There are several special block-level elements that can contain only inline elements and no longer contain block-level elements, which are the following special tags:

H1, H2, H3, H4, H5, H6, p, DT

4. A div tag can be included in Li:

Li and div tags are loaded content container, status equality, no level of points, you know, Li Tag even its parent UL or OL can be accommodated.
<li><div></div></li>--On

5. Block-level elements are tied to block-level elements, inline elements and inline elements:

<div>

<div><a href= "#" ></a><span></span></div>--to

<div>

<a> tags cannot contain other <a> tags

The <button> tag cannot contain <input>,<select>,<textarea>,<label>,<button>,<form> <fieldset>,<iframe> and <isindex> tags

<label> tags cannot contain other <label> tags

<form> tags cannot contain other <form> tags

Appendix:

CSS Common style overrides:

body,div,p,ul,ol,li,dl,dt,dd,table,tr,td,form,hr,fieldset,h1,h2,h3,h4,h5,h6,img,input{    margin:0;    padding:0;} body{    font-family: "Microsoft Jas Black", Arial;} a{    Text-decoration:none;} ul,ol{    List-style:none;} img{    border:0;}

Learn the front-end development from scratch-7, tag nesting rules and CSS common style overlay