MindMap Gallery HTML various tags
Lists various HTML tags and usage methods, and analyzes and summarizes audio and video tags, H5 new semantic tags, block-level elements, etc.
Edited at 2021-08-31 10:39:33This is a mind map about bacteria, and its main contents include: overview, morphology, types, structure, reproduction, distribution, application, and expansion. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about plant asexual reproduction, and its main contents include: concept, spore reproduction, vegetative reproduction, tissue culture, and buds. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about the reproductive development of animals, and its main contents include: insects, frogs, birds, sexual reproduction, and asexual reproduction. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about bacteria, and its main contents include: overview, morphology, types, structure, reproduction, distribution, application, and expansion. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about plant asexual reproduction, and its main contents include: concept, spore reproduction, vegetative reproduction, tissue culture, and buds. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about the reproductive development of animals, and its main contents include: insects, frogs, birds, sexual reproduction, and asexual reproduction. The summary is comprehensive and meticulous, suitable as review materials.
HTML tags
block-level elements
div
h tag
Generally only use h1~h3
search engine
h1 is second only to title and affects search engine rankings
p tag
There is a gap between paragraphs
hr tag
Generate dividing line
Elements: html, body, div, p, h1~h6, ul->li, ol->li, dl->dd/dt, header, footer, nav, article, section, aside, address...
other
character entity
space
< <
>>
" "
& &
' '
br tag
self closing tag
Line break, do not start a new paragraph
inline elements
img tag
Attributes
src
Image path
absolute path
Relative path, preferably relative path
alt
Description of the image when the image cannot be displayed
title
Display text content when mouse hovers
replace element
width/height, you can set the width and height
be careful
Generally, except for adaptive pages, it is not recommended to set the width and height.
Pictures may be distorted
Only set width/height, and scale the other proportionally
span
Most used
a tag
Attributes
href
Jump address
mailto link
mailto:name@email.com
receiver's address
cc=name@email.com
CC address
bcc=name@email.com
Bcc address
subject=subject text
e-mail title
body=body text
e-mail content
?
The first splicing parameter
&
Other parameter symbols
title
Display on mouseover
target
_self
By default, the current page jumps
_blank
New page jump
fake link
#
javascript:;
anchor point
#id
You can also jump to the specified location on other pages
base tag
Uniformly specify the jump methods of all a
written between head tags
For example: <base target="_blank">
If there is a base and a also specifies a target, jump according to a
be careful
href is required
Pictures can also be clicked
Specify the URL address, precede it with http:// or https://
In addition to the URL address, you can also specify a local address
other
em
Emphasize, highlight the key points of the article
strong
Emphasis, the content is more useful
b
Bold
i
italics
u
Underline
Elements: span, a, img, strong, b, i, em, sub, sup...
H5 adds new semantic tags
Same as div except semantics
header
Header title, search form or logo
nav
Link group for page navigation
article
document
section
aside
Sidebar, navigation bar, advertising
footer
footnote
address
Present contact information in document
figure& figcaption
details
open attribute
summary child element
Audio and video tags
video
Attributes
loop
Loop playback, mostly used for advertising videos
src
Video address
muted
mute
controls
control strip
autoplay
Autoplay
width/height
Width Height
poster
Placeholder image before playback
Format
Format 2: <video> <source src="" type=""></source> <source src="" type=""></source> </video>
Format 1:<video src=""></video>
be careful
Support H5 tag to use video tag
Does not support H5, use JS htmlmedia framework
audio
Format
Almost the same as video
be careful
Basically the same as the video tag
There are 3 attributes that cannot be used, height/width/poster