Basic concepts and usage examples of HTML inline elements and block-level elements

There are two types of html tags, inline elements and block-level elements. First, let's understand the concepts of inline elements and block-level elements:

Block-level elements: Generally, they are containers for other elements. They can hold inline elements and other block-level elements. Block-level elements exclude other elements from being on the same line as them. They can set width and height attributes. Block-level elements in the normal flow will be placed vertically. Common block elements are "div"

Inline elements (inline elements): Inline elements can only contain text or other inline elements. They are descendants of block-level elements. They allow other inline elements to be located on the same line with them. The height and width cannot be set. A common inline element is "a".

According to the concept of block-level elements, we can understand that block-level elements have line breaks before and after them, which is equivalent to adding a <br> tag before and after the element. We can think of block-level elements as a block or a rectangle, so block-level elements can set height and width attributes

example:
css file:

According to the concept of inline elements, we can understand that there are no line breaks before and after inline elements. We can think of an inline element as a line, so it cannot have height and width attributes set.

Block element tags

address - address
blockquote - Blockquote
center – align in the center
dir - directory listing
div - commonly used block-level element, and also the main tag of CSS layout
dl - Definition List
fieldset - form control group
form - interactive form
h1 - Large title
h2 - Subtitle
h3 - Level 3 heading
h4 - Level 4 heading
h5 - Level 5 heading
h6 - Level 6 heading
hr - horizontal separator line
isindex - input prompt
menu - menu list
noframes - frames optional content, (for browsers that do not support frames, this block content is displayed
noscript - optional script content (displayed for browsers that do not support script)
ol - Sorting Form
p - paragraph
pre - format text
table
ul - unordered list

Inline element

a - anchor point
abbr - abbreviation
acronym - first letter
b - bold (not recommended)
BDO - Bidi Override
big - large font
br - Line break
cite - citation
code - computer code (required when citing source code)
dfn - defines a field
em - emphasis
font - font settings (not recommended)
i - italic
img - picture
input
kbd - Define keyboard text
label - table label
q - short quote
s - hyphen
samp - define sample computer code
select - item selection
small - small font text
span - commonly used inline container, defines the text block
strike - a dash
strong - bold emphasis
sub - subscript
sup—superscript
textarea - multi-line text input box
tt - defines typewriter text
var - define a variable