Home > Article > Web Front-end > What are the three categories of html5 tags?

What are the three categories of html5 tags?

青灯夜游Original: 2022-05-18 16:36:453619browse

There are three types of html5 tags: 1. Block-level elements, whose display value is "block", are characterized by being able to set width, height, margins, and automatic line wrapping; 2. inline elements, whose display value is "inline" will not wrap automatically, and the width and height cannot be set; 3. Inline block elements will not wrap automatically, and the width and height can be set.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Classification of html5 tags

Tags are also called elements

can be based on tag characteristics Divided into: block tags, inline (inline) tags, inline block tags
According to the label closing rules, it can be divided into: single label (empty label, self-closing label), double label

Commonly used block elements:

....

Commonly used inline elements:
 `<var> Commonly used inline block elements: <img> <input> Features of block-level elements: <code class="marker">display:<code class="marker">block;`
## 1. Each block-level element starts on a new line, and subsequent elements also start on a new line.
2. The height, width, line height, and margin and padding values of the top, bottom, left and right of the element can be set.
3. If the width of an element is not set, it is 100% of its parent container (the same as the width of the parent element), unless a width is set.

Characteristics of inline elements: display:inline;
1. On the same line as other elements;
2. The element’s
height, width and top and bottom margins are not allowed Settings (only supports left and right margin and padding);
3. The width of an element is the width of the text or image it contains and cannot be changed.

Characteristics of inline block elements: display:inline-block;
1, and other elements are in On one line; the height, width, line height, top and bottom margins of
2 and
elements can be set. (Supports upper, lower, left and right margin and padding values)
3. Margin: 0 auto is invalid
4. Horizontal arrangement, but all elements will have 1 space by default Gaps, because there is a carriage return and line feed between elements in HTML, and the browser will parse it into a space.

Conversion of tag type
The type of tag can be converted:

Settings
display:inline `Convert to inline elements`

Settings
display:linline-block `Convert to inline block elements`

Settings
display:block `Convert to block-level elements`

(Learning video sharing: html video tutorial , web front-end )
The above is the detailed content of What are the three categories of html5 tags?. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Is figure a new tag in html5?Next article：Is figure a new tag in html5?

See more

What are the three categories of html5 tags?

....

Related articles