What are the three categories of html5 tags?

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:
< strong> <var></p> <p>Commonly used inline block elements: <img> <input></p> <p style="text-align:left;"><span style="font-size: 16px;"><strong> Features of block-level elements: <strong><code class="marker">display:<strong><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!

Related labels：

html html5

Previous article：Is figure a new tag in html5? Next article：How to convert decimal to binary in jquery

Statement of this Website

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

Latest Articles by Author

• Understand the sentinel in Redis in depth
  2023-04-26 17:59:18
• [Organization and sharing] 7 popular React state management tools
  2023-04-26 17:47:48
• An article discusses the difference between key in Vue2 and key in Vue3
  2023-04-26 17:41:42
• An article about memory control in Node
  2023-04-26 17:37:05
• Sharing practical Excel skills: 4 tips for deleting duplicate values!
  2023-04-26 17:31:25
• Sharing practical Word skills: The Simplified to Traditional conversion function can be used in this way!
  2023-04-26 17:27:32
• How to solve cross-domain issues? A brief analysis of common solutions
  2023-04-25 19:57:58
• One article to understand the singleton pattern in JavaScript
  2023-04-25 19:53:11
• Learn more about Buffers in Node
  2023-04-25 19:49:11
• Explore how to write unit tests in Vue3
  2023-04-25 19:41:54

Latest Issues

html5 validation for symfony 2.1

From 1970-01-01 08:00:00

0

0

0

The difference between HTML and HTML5

From 1970-01-01 08:00:00

0

0

0

Can I use html5 to create an image scrolling effect?

From 1970-01-01 08:00:00

0

0

0

html5 show hide

From 1970-01-01 08:00:00

0

0

0

Can PDF files run HTML5 and Javascript?

From 1970-01-01 08:00:00

0

0

0

Related Topics

More>

• html copyright symbol
• html online editor
• html web page production
• html space
• what is html
• How to set html font size
• html to txt
• How to write html text box code