Basic concepts and examples of html inline and block-level elements _ HTML/Xhtml _ webpage Creation

Html tags are divided into two types: inline elements and block-level elements. Block-level elements are generally containers of other elements. inline elements can only contain text or other inline elements; first, let's take a look at the concepts of inline elements and block-level elements. html tags are divided into two types: inline elements and block-level elements. First, let's take a look at the concepts of inline elements and block-level elements:

Block-level elements:Generally, it is a container of other elements, which can accommodate inline elements and other block-level elements. Block-level elements exclude other elements and are located in the same row. You can set the width (width) height attribute, the block-level elements in a normal stream are placed vertically. The common block element is "p"

Inline element (intra-Row Element ):An inline element can only contain text or other inline elements. It is the descendant of a block-level element. It allows other inline elements to be in the same row and cannot be set to height or width ). The common inline element is "".

Based on the concept of block-level elements, we can understand that block-level elements carry line breaks before and after, which is equivalent to adding
Label. We can think of a block-level element as a block or a rectangle, so the block-level element can set the height and width attribute.

Example:
Css file:

The Code is as follows:

# P1 {
Width: 200px;
Height: 200px;
Background: #666
}
P2 {
Width: 200px;
Height: 200px;
Background: # F00
}

Html file:

The Code is as follows:

P1
Block-level elements exclude other elements from the same row

P2
Block-level elements exclude other elements from the same row

Display Effect:

The two p elements are not in the same row.

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

Block element labels

Address-address
Blockquote-block reference
Center-center alignment
Dir-directory list
P-common block-level labels are also the main labels of CSS layout.
Dl-definition list
Fieldset-form Control Group
Form-interactive form
H1-title
H2-subtitle
H3-Level 3 title
Level h4-4 title
H5-Level 5 Title
H6-6 level title
Hr-horizontal Separator
Isindex-input prompt
Menu-menu list
Optional content of noframes-frames. (content in this block is displayed in browsers that do not support frame.
Noscript-optional script content (this content is displayed in browsers that do not support scripts)
Ol-sort form
P-paragraph
Pre-format text
Table-table
Ul-non-sorted list

Inline element)

A-anchor
Abbr-abbreviation
Acronym-First word
B-bold (not recommended)
Bdo-bidi override
Big-font size
Br-line feed
Cite-Reference
Code-computer code (required when source code is referenced)
Dfn-define Fields
Em-emphasis
Font-font setting (not recommended)
I-italic
Img-Image
Input-input box
Kbd-define keyboard text
Label-Table label
Q-short reference
S-hyphen
Samp-definition example computer code
Select-Project Selection
Small-small font text
Span-commonly used inline containers that define text blocks
Strike-dashes
Strong-highlighted in bold
Sub-subscript
Sup-superscript
Textarea-multi-line text input box
Tt-Defines typewriter text
Var-define variables