Home >Web Front-end >Front-end Q&A >What are the categories of html5 tags?

What are the categories of html5 tags?

青灯夜游
青灯夜游Original
2021-12-15 17:53:585120browse

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
  • Definition list

    Paragraph tag

    Preformatted text
    < ;/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