Block-level and intra-row elements and html-level elements in html

Block-level and intra-row elements and html-level elements in html

Three differences between block-level elements and intra-row Elements

1. Intuitive differences between intra-row elements and block-level elements:

The elements in the row are arranged in a straight line, both in the same row and horizontally.

Block-level elements occupy only one row and are arranged vertically. Block-level elements end from a new row and then end with a broken row.

2. Block-level elements can contain intra-row and block-level elements. Intra-row elements cannot contain block-level elements.

3. The differences between intra-row elements and block-level element attributes mainly refer to the box model attributes.

The width setting of the row element is invalid, and the height setting is invalid (line-height can be set ),

The upper and lower of the Line Element margin is invalid, and the upper and lower of the padding are invalid.

Transform block-level elements in the row using css

Display: block (represented literally at the block level)

Block-level elements

Common block-level elements

<Div> define partitions or nodes in the document

<H1> to

<P> define a paragraph

<Ul> unordered list

<Ol> ordered list

<Li> list items

<Dl> Custom list

<Dt> Custom list item title

<Dd> Custom list items

<Form> Create an HTML form

<Tabel> define an HTML table

<Caption> table title

<Thead> table Header

<Tbody> table topic

<Tfoot> table footer

<Th> header Cell

<Td> standard cells in the table

<Tr> define rows in the table

<Pre> pre-formatted text

<Hr/>

Line Element

<A> anchor tag

<Abbr> An abbreviation

<Span> combination of intra-row elements in a document

<B> bold labels

<Strong> More semantic bold labels

<I> italic text Effect

<Em> italic words but strong Semantics

insert an image to the page

<Input> input box

<Label for = ""> A tag defines a tag for the input element)

<Small> display the small font Effect

<Select> create single-choice and multi-choice menus. drop-down menus

<Sub> subscript text

<Sup> superscript

<Textarea> multi-line controllable text input box

In-row block-level element inline-block

insert an image to the page

<Input> input box

<Button> button