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

This article "html inline elements and block-level elements of the basic concepts and how to use" most people do not understand the knowledge points of the article, so Xiaobian summarized the following content for you, detailed content, clear steps, with a certain reference value, I hope you can read this article to gain something, let's take a look at this article "html inline elements and block-level elements of the basic concepts and how to use" article bar.

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

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 element: Generally, it is a container for other elements, which can accommodate inline elements and other block-level elements. Block level elements exclude other elements from being located in the same row. Width and height attributes can be set. 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, are descendants of block-level elements, allow other inline elements to be on the same line as them, and cannot 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 newlines before and after them, which is equivalent to adding a newline before and after the element.

Labels. We can think of a block-level element as a block or a rectangle, so block-level elements can set height and width properties

Example:

CSS file:

The copy code is as follows:

#div1{

width:200px;

height:200px;

background:#666

}

div2{

width:200px;

height:200px;

background:#F00

}

html file:

The copy code is as follows:

div1

Block level elements exclude other elements from being on the same row as them

div2

Block level elements exclude other elements from being on the same row as them

Two div elements are not on the same line

According to the concept of inline element, we can understand that there are no newlines before and after the inline element. We can think of an inline element as a line, so it can't set the height and width attributes.

Block element tags

address -address

blockquote -block reference

center-centered alignment

dir -List of directories

div -Common block-level easy, also the main tag of CSS layout

dl -Definition list

fieldset - form control group

form -interactive form

h2 -Headline

h3 -subtitle

h4 -Level 3 title

h5 - 4 level titles

h6 - 5 level titles

h7 - 6 level titles

hr -Horizontal divider

isindex - input prompt

menu -Menu list

noframes - frames Optional content,(Show this block content for browsers that do not support frames

noscript -Optional script content (displayed for browsers that do not support script)

ol -Sort Forms

p-Paragraph

pre -format text

table -table

ul -unsorted list

inline element

a -anchor point

abbr -Abbreviations

acronym

b -Bold (not recommended)

bdo - bidi override

big -large font

br -newline

cite -quote

code -computer code (required to reference source code)

dfn -Definition field

em -emphasis

font -Font setting (not recommended)

i -italics

img -Images

input -input box

kbd -Define keyboard text

label -Form label

q -Short quote

s-center line

samp -defines sample computer code

Select -Project selection

small -Small font text

span -Common inline container, defining blocks within text

strike -middle line

strong -bold emphasis

sub -subscript

sup -superscript

textarea -Multiline text input box

tt -defines typewriter text

The above is the content of this article about "html inline elements and block-level elements basic concepts and how to use", I believe everyone has a certain understanding, I hope the content shared by Xiaobian is helpful to everyone, if you want to know more related knowledge content, please pay attention to the industry information channel.

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.