1. First, let’s summarize what are inline elements and block-level elements: Inline elements: The tag can define an anchor. represents an Abbreviation formDefinition only takes the abbreviationFont boldCan override the default text directionLarge font bold Line breakQuote to defineDefine computer code textDefine a definition itemDefine for emphasis Contentitalic text effectEmbed an image into a web pageInput boxDefine keyboard text< label>Label defines a label (tag) for the elementDefines a short referenceDefines sample textCreates single or multiple selections Select menuPresent small font effectCombine inline elements in the documentStronger emphasis on contentUnder definition Superscript textDefine superscript textMulti-line text input control<br><tt>Typewriter or fixed-width text effect<br><var>Define variables</p> <p>Block-level elements:</p> <p><address>Define address<br><caption>Define table title<br><dd>Define entry in list<br><div> Define a section or section in a document<br><dl>Define a list<br><dt>Define items in a list<br><fieldset>Define a frameset<br><form>Create an HTML form<br><h1>Define the largest title<br><h2>Define subtitle<br><h3>Define title<br><h4>Define title<br><h5>Define title<br>< ;h6>Define a minimal title<br><hr>Create a horizontal line<br><legend>Element is <br><fieldset>Element defines title<br><li>Label defines list item<br> <noframes>Display text for browsers that do not support frames, inside the frameset element<br><noscript>Defines alternative content when the script is not executed<ol>Defines an ordered list<br><ul> ;Define unordered list<br/><p>Tag definition paragraph<br><pre>Define preformatted text<br><table>Tag definition HTML table<br><tbody>Tag table body ( Text)<br><td>Standard cells in tables<br><tfoot>Define the footer of the table (footnotes or table notes)<br><th>Define header cells<br>< thead> tag defines the header of the table <br><tr> defines the rows in the table </p> <p>2. Then let’s take a look at the difference between inline elements and block-level elements: </p> <p>1. The intuitive difference between inline elements and block-level elements</p> <p>Inline elements will be arranged in a straight line, all on the same line, arranged horizontally</p> <p>Block-level elements each occupy one line, arranged vertically . Block-level elements start on a new line and end with a line break. </p> <p>2. Block-level elements can contain inline elements and block-level elements. Inline elements cannot contain block-level elements. </p> <p>3. The difference between the attributes of inline elements and block-level elements is mainly due to the box model attributes. </p> <p>The width and height settings for inline elements are invalid, (line-height can be set), and the margin up and down are invalid. padding is invalid up and down</p> <p>3. Conversion of inline elements and block-level elements:</p> <p>Convert block-level elements into inline elements: display:inline;</p> <p>Convert inline elements into Block-level elements: display:block;</p> <p>Inline block elements: display:inline-block;</p>
