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

Source: Internet
Author: User

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;

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.