Block-level elements and inline elements in HTML

Three differences between a block-level element and an inline element

1. The visual difference between inline elements and block-level elements:

Inline elements are arranged in a straight line, all on the same line, horizontally

Block-level elements are exclusively on one line and are arranged vertically. Block-level elements start from the beginning of the new row and then a line break

2. Block-level elements can contain inline elements and block-level elements, and inline elements cannot contain block-level elements

3. The difference between the inline element and the block-level element attribute is mainly on the box model attribute

The inline element setting width is invalid, the height is invalid (you can set Line-height),

Row element margin is invalid, padding up or down

Inline elements convert block-level elements, implemented with CSS

Display:block (the literal representation is set to block level)

Block-level elements

Common block-level elements

<div> define a partition or node in a document

<p> Defining paragraphs

<ul> unordered List

<ol> ordered list

<li> list Items

<dl> Custom Lists

<dt> Custom list item title

<dd> Customize list items

<form> Create an HTML form

<tabel> Defining HTML Tables

<caption> table title

<thead> table Header

<tbody> Table Topics

<tfoot> table Footer

<th> Table Header Cells

Standard cells in the <td> table

<tr> define rows in a table

<pre> pre-formatted session text

In-line elements

<a> Anchor Point Labels

<abbr> represents an abbreviated form

<span> inline elements in a combined document

<b> Bold Label

<strong> more strongly semantic bold tags

<i> Italic text effects

<em> Italic but more semantic

insert a picture into the page

<input> input Box

<label for= "" > Label defining callouts (tags) for input elements

<small> Render Small font effects

<select> Create a single and multi-select menu, drop-down menu

<sub> Subscript Text

<sup> Superscript text

<textarea> Multi-line Controllable text input box

Inline block-level element Inline-block

insert a picture into a page

<input> input Box

<button> buttons

Block-level elements and inline elements in HTML