Shulou(Shulou.com)06/01 Report--

This article is about the differences between inline elements and block-level elements in html. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

There are two types of html tags, inline elements and block-level elements. First, let's take a look at the concepts of inline elements and block-level elements:

Block-level element: generally a container of other elements, which can hold inline elements and other block-level elements. Block-level elements exclude that other elements are on the same line as them, and the width (width) height (height) attribute can be set. Block-level elements in the normal flow will be placed vertically. The common block element is "div"

Inline elements (inline elements): inline elements can only hold text or other inline elements, are descendants of block-level elements, and allow other inline elements to be on the same line as them, without setting height (height) and width (width). The common inline element is "a".

According to the concept of block-level elements, we can understand that block-level elements are preceded by line breaks, which is equivalent to adding a line before and after the element.

Label. We can think of block-level elements as a block or a rectangle, so block-level elements can set height and width attributes.

Example:

Css file:

# div1 {

Width:200px

Height:200px

Background:#666

}

Div2 {

Width:200px

Height:200px

Background:#F00

}

Html file:

Div1

Block-level elements exclude other elements on the same line as them

Div2

Block-level elements exclude other elements on the same line as them

Two div elements are not on the same line

According to the concept of inline elements, we can understand that there are no newline characters before and after inline elements. We can think of an inline element as a line, so it cannot set the height attribute and the width attribute.

Block level element (blockelement) tag

Address- address

Blockquote- block referenc

Center- Center alignment

Dir- directory list

Div- is commonly used at the block level and is also the main tag of CSSlayout.

Dl- definition list

Fieldset-form control group

Form- interactive form

H2-headline

H3-subtitle

H4-3 level title

H5-4 level title

H6-5 level title

H7-6 level title

Hr- horizontal separator

Isindex-inputprompt

Menu- menu list

Noframes-frames optional content, (display this block content for browsers that do not support frame

Noscript- optional script content (displayed for browsers that do not support script)

Ol- sort form

P-paragraph

Pre- formatted text

Table- form

Ul- unsorted list

Inline element (inlineelement)

A-anchor point

Abbr- abbreviation

Acronym- initials

B-bold (not recommended)

Bdo-bidioverride

Big- big font

Br- line wrapping

Cite- reference

Code- computer code (required when referencing source code)

Dfn- definition field

Em- emphasizes

Font- font settings (not recommended)

I-italic

Img- Picture

Input- input box

Kbd- defines keyboard text

Label- form label

Q-short reference

S-middle dash

Samp- defines sample computer code

Select- project selection

Small- small font text

Span- commonly used inline containers to define blocks within the text

Dash in strike-

Strong- emphasizes in bold

Sub- subscript

Sup- superscript

Textarea- multiline text input box

Tt- defines typewriter text

Var- defines variables

Thank you for reading! This is the end of the article on "what is the difference between inline elements and block-level elements of html". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.