Detailed explanation of inline elements and block-level elements in HTML tags

This article mainly introduces inline elements and block-level elements in commonly used HTML tags to you in detail. Friends who need it can refer to it. I hope it can help everyone.

Block element (block element) HTML tag classification details

* address - address
* blockquote - block quote
* center - center alignment block
* dir - Directory list
* p - Commonly used block level, 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 - Heading
* h2 - Subheading
* h3 - Level 3 heading
* h4 - Level 4 heading
* h5 - Level 5 heading
* h6 - Level 6 title
* hr - Horizontal separator line
* isindex - input prompt
* menu - Menu list
* noframes - frames optional content, (displayed for browsers that do not support frames Content of this block
* noscript - optional script content (displayed for browsers that do not support script)
* ol - sorting form
* p - paragraph
* pre - formatted text
* table - table
* ul - non-sorted list

Inline element (inline element) HTML tag classification details

* a - anchor point
* abbr - abbreviation
* acronym - first character
* b - bold (not recommended)
* bdo - bidi override
* big - large font
* br - line break
* cite - citation
* code - computer code (required when citing source code)
* dfn - definition field
* em - emphasis
* font - font setting (not recommended)
* i - italic
* img - picture
* input - input box
* kbd - define keyboard text
* label - table label
* q - short quote
* s - Center line (not recommended)
* samp - Define sample computer code
* select - Project selection
* small - Small font text
* span - Commonly used inline container, define text inner area Block
* strike - center line
* strong - bold emphasis
* sub - subscript
* sup - superscript
* textarea - multi-line text input box
* tt - telex text
* u - underline
* var - define variables

Variable elements HTML tag classification details

* applet - java applet　
* button - button
* del - delete text
* iframe - inline frame
* ins - inserted text
* map - image block (map)
* object - object object
* script - client script

Summary:

1. Block-level elements block such as p h1 p ul li, etc. will wrap and want to be displayed on the same line

Need to float Or display: inline

2. Row-level elements inline such as a span b multiples can be displayed side by side. The default setting width does not work

Need to set display: inline-block or block Just fine.

Related recommendations:

Summarize three methods of converting inline elements into block-level elements

Inline elements in html Summary of block-level elements

Summary of related usage of inline elements

The above is the detailed content of Detailed explanation of inline elements and block-level elements in HTML tags. For more information, please follow other related articles on the PHP Chinese website!