Study notes summary of block-level elements and row-level (inline) elements of HTML (including HTML5)

1. First we need to know what are block-level elements and row-level (inline) elements ?

Characteristics of block elements:

①Always start on a new line;

②Height, line height, margins and padding can all be controlled;

③The default width is 100% of its container, unless a width is set;

④ It can hold inline elements and other block elements.

Characteristics of inline elements:


① and other elements are on the same line;


② height, line height, outer margins and inner margins cannot be changed;


③ width is its text Or the width of the picture, which cannot be changed;

④Inline elements can only accommodate text or other inline elements.

2. Okay, let’s take a look at the Block LevelElements:

div: Document section
section: Document section
nav: Navigation
header: Header
article: Article
aside: Article sidebar
footer: Footer
details: Details of the element
summary: The visible title of the details element
dialog: dialog window
h1, h2, h3, h4, h5, h6: title
p: paragraph
ul: unordered list
ol: ordered list
dir: directory list
li: project
dl: list
dt : list item
dd: item description
menu: menu of commands, list
menuiitem: menu item
command: command button
form: form
fieldset: the border around the element (can be used to group elements within the form)
legend: in the border The title on
select: select list (inline element)
optgroup: combined select list options
option: select list options (can also be used as datalist option)
datalist: drop-down list (id should be bound to the list attribute value in the input)
table: table
caption: table title
thead: combined header content (th)
tbody: combined body content (td)
tfoot: combined table note content (td)
tr: table row
th: header cell
td: table unit
col: table column attribute; (empty label)
colgroup: table formatting column group;
iframe: inline frame
figure: media content group
figcaption: figure title
map: image mapping
area: Image area
canvas: graphics container (script to draw graphics)
video: video
source: media source
track: text track
audio: sound content
br: newline (empty label)
hr: horizontal dividing line (empty label)
pre: Formatted text
blockquote: Block quote
address: Document contact information
center: Centered text (deprecated)
spacer: Insert space (empty element) horizontally and vertically

3. Next, let’s look at the row-level (inline) elements:

span: inline container
abbr: abbreviation
em: emphasis
strong: bold emphasis
mark: highlighted text
b: bold
i: italic
bdi: text direction
bdo: text direction
big: Large font
small: small font
sup: superscript
sub: subscript
del: deleted text
strike: strikethrough
s: strikethrough
ins: inserted text
u: underline
nobr: prohibit line breaks
wbr: word wrap timing (empty tag)
tt: typewriter text
kbd: keyboard text
time: date/time
cite: quote
q: short quote ("")
font: font setting (not commonly used)
acronym: abbreviation (not supported by html5)
dfn: field (not commonly used)
a: anchor
img: image
embed: embedded (empty label)
label: input tag (click on the text to trigger the control)
input: input box
button: button
keygen: generate key (empty label)
textarea: multi-line text input box
output: output result
ruby: Chinese phonetic
rt: phonetic
rp: The browser does not support the content displayed by ruby ​​elements
progress :progress bar
meter: measure
var: define variable
code: computer code text
samp: computer code sample
select: drop-down list

Please correct me if there are any errors or omissions, thank you!