Basic concepts and usage examples of html inline elements and block-level elements_HTML/Xhtml

Basic concepts and usage examples of html inline elements and block-level elements_HTML/Xhtml_Web page production

WBOY

Release： 2016-05-16 16:39:11

Original

1918 people have browsed it

HTML tags are divided into two types, inline elements and block-level elements. First, let’s understand the concepts of inline elements and block-level elements:

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

Inline elements (inline elements): Inline elements can only accommodate text or other inline elements. They are descendants of block-level elements. They allow other inline elements to be located on the same line as them and cannot be set. Height and width. A common inline element is "a".

According to the concept of block-level elements, we can understand that block-level elements have line breaks before and after them, which is equivalent to adding a
tag before and after the element. We can think of block-level elements as a block or a rectangle, so block-level elements can set the height and width attributes

Example:
css file:

Copy code

The code is as follows:

#div1{
width:200px;
height:200px;
background:#666
}
div2{
width:200px;
height:200px;
background:#F00
}

html file:

Copy code

The code is as follows:

div1
The block-level element excludes other elements located on the same line as it

div2
Block-level elements exclude other elements located on the same line as it

Display effect:

The two div elements are not on the same line

According to the concept of inline elements, we can understand that there are no line breaks 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 tag

address - address
blockquote - block quote
center - center alignment
dir - directory list
div - commonly used block level is also the main tag of CSS layout
dl - definition list
fieldset - form control group
form - interactive form
h1 - headline
h2 - subtitle
h3 - level 3 title
h4 - level 4 title
h5 - 5 Level title
h6 - Level 6 title
hr - Horizontal separator line
isindex - input prompt
menu - Menu list
noframes - frames optional content, (for browsers that do not support frames Show this block content
noscript - optional script content (show this content for browsers that do not support script)
ol - sort form
p - paragraph
pre - formatted text
table - table
ul - unsorted list

inline element

a - anchor
abbr - abbreviation
acronym - first word
b - bold (not recommended)
bdo - bidi override
big - big font
br - Line break
cite - quote
code - computer code (required when citing source code)
dfn - define field
em - emphasis
font - font setting (not recommended)
i - italic
img - image
input - input box
kbd - define keyboard text
label - table label
q - short quote
s - underscore
samp - Define sample computer code
select - Item selection
small - Small font text
span - Commonly used inline containers, define blocks within text
strike - Underline
strong - Bold Emphasis
sub - subscript
sup - superscript
textarea - multi-line text input box
tt - define typewriter text
var - define variable