Summary of line elements and block-level elements in html, and summary of html elements

Summary of line elements and block-level elements in html, and summary of html elements

I. First, let's summarize the following elements and block-level elements:

Line element:

<A> the tag can define the anchor.
<Abbr> An abbreviation
<Acronym> the definition is abbreviated to the first letter.
<B> bold font
<Bdo> override the default text direction
<Big> bold font size
<Br> line feed
<Cite> reference for definition
<Code> define computer code text
<Dfn> define a project
<Em> defined as emphasized content
<I> italic text Effect
embed an image into the webpage
<Input> input box
<Kbd> define keyboard text
<Label> the label is
<Input> element definition annotation (TAG)
<Q> define short references
<Samp> Define sample text
<Select> create a single-or multiple-choice menu
<Small> display the small font Effect
<Span> combination of intra-row elements in a document
<Strong> more emphasized content
<Sub> define subscript text
<Sup> define the superscript text
<Textarea> multi-line text input control
<Tt> typewriter or same width text Effect
<Var> define variables

Block-level elements:

<Address> define an address
<Caption> define the table title
<Dd> define entries in the definition list
<Div> define partitions or sections in the document
<Dl> definition list
<Dt> define a project in the list
<Fieldset> define a framework set
<Form> Create an HTML form
<H1> define the largest title
<H2> define subtitle
<H3> define the title
<H4> define the title
<H5> define the title
<H6> define the smallest title
<Hr> Create a horizontal line
The <legend> element is
<Fieldset> element definition title
<Li> tag definition list item
<Noframes> displays text for browsers that do not support frames, which is inside the frameset element.
<Noscript> define alternative content when the script is not executed <ol> define an ordered list
<Ul> unordered list defined
<P> label definition section
<Pre> define pre-formatted text
<Table> tag-defined HTML table
<Tbody> label table subject (Body)
<Td> standard cells in the table
<Tfoot> define the table footer (footer or table note)
<Th> define the header Cell
<Thead> label defines the table header.
<Tr> define rows in the table

2. Let's take a look at the differences between intra-row elements and block-level elements:

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

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

Each block-level element occupies one row and is arranged vertically. Block-level elements start from the new line and end with a broken line.

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

3. The differences between intra-row elements and block-level element attributes are mainly in the Box Model attributes.

The width setting of the row element is invalid, the height setting is invalid (line-height can be set), the upper and lower of margin is invalid, and the upper and lower of padding are invalid.

3. Conversion of intra-row elements and block-level elements:

Converts block-level elements into a line element: display: inline;

Converts an element in a row into a block-level element: display: block;

Line block element: display: inline-block;