What are the categories of html5 tags?-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

What are the categories of html5 tags?

青灯夜游

Dec 15, 2021 pm 05:53 PM

html5

html5 tags are divided into 3 categories: 1. Block-level elements, which are characterized by the ability to set width and height, automatic line wrapping, and the top, bottom, left, and right margins and padding are valid for them; 2. Inline elements, which are characterized by: The width and height cannot be set, and the line will not wrap automatically; 3. Inline block elements are characterized by the ability to set the width and height, and the line will not wrap automatically.

What are the categories of html5 tags?

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

Marks in HTML5 are divided into block-level elements, inline elements, and inline block elements.

Inline elements:

The width and height cannot be set.
The margin is invalid up and down, only the left and right are effective; padding is effective and will expand the space.
box-sizing:border-box;Invalid because this property is for the box model.
Will not wrap automatically

Block-level elements:

Able to set the width and height
The top, bottom, left and right margins and padding are all valid for it
Can automatically wrap lines
Multiple block element tags are written together, and the default arrangement is from top to bottom
You can use margin:0 autoCentered alignment

Inline block elements:

will not wrap automatically
can set the width High
The default arrangement is from left to right
You can use text-align:center to make the content relative to To align the parent box horizontally and centrally, such as the img tag, you can use text-align:center to align it in the center relative to the parent box
margin:0 auto Invalid
is arranged horizontally, but all elements will have a gap of 1 space by default, because there is a carriage return and line feed between elements in HTML, and the browser will parse it into a Space.

But the type of label can be converted

display:inline: Convert to Inline elements
display:linline-block are converted to inline block elements
display:block Convert to block-level elements

Master element categories. Now classify the tags we have learned as follows:

##1. Block-level elements

Title

Ordered list

Unordered list

< ;/pre>
Large quotation
Small quotation
Divide blocks< div>

Definition

Audio

Video

Table

Form

Add a straight line

Load independent article

Define document section

Define non-text content

Header< header>

Footer