MindMap Gallery html
This is a compilation of some key points about getting started with HTML. It is full of useful information. Friends in need should quickly collect it!
Edited at 2023-12-03 15:12:26This 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
Label (the thing with angle brackets)
After generating the .html file! enter
Labels are divided into odd and even
Single label: hr
Double tag:p
Skeleton 9 four tags
html: the entire web page
head: Web page header
title: Web page title
body: web page theme, you can type directly inside
relationship between tags
Constellation
Nested relationship
Comment
ctrl/
anywhere on this line,
Typography tags
title tag
Features: Exclusive line, bold, font size gradually becomes smaller, 6
H1 pages are generally used only once in a web page. Used to put news titles or web page names
paragraph tag p
Exclusive line, gaps between paragraphs, adaptive layout
text formatting tag
Two text formatting tags will appear on one line
strong bold em tilt
Image tag (single)
<img src="image path" alt=" ">
Attributes
alt (replacement text): text displayed when the image cannot be displayed
title (prompt text): the text displayed when the mouse hovers
width
height
Browsers scale images to equal proportions by default
path
Category: relative path, absolute path
Relative path (commonly used)
. indicates the file where the current file is located
/ Go to a folder
../ Previous folder
absolute path
The default value for Windows is "\", and for other systems, it is "/". It is recommended to change it to "/"
You can also jump by right-clicking on the web page and copying the image path.
Hyperlink
<a href="http://">Jump link</a>
href="./" can also be used
href="#"empty link
target="_blank" does not overwrite the previous interface, the default coverage is _self
Audio
<audio></audio>
Attributes
src
controls
Attribute names and attribute values can also be abbreviated. Only write the attribute name.
Show control panel
loop
Same as above,
Loop
autoplay
Same as above, but not recommended
Autoplay
video
<video></video>
Attributes
controls
src
loop
muted
Play silently
autoplay
Play automatically but mute
list, table, form
list
Lay out areas with neat content
Classification
orderly
Areas that need to be specified in order
ol nested li
ol can only contain li
disorder
ul nested li
The ul tag can only contain li tags, and the li tag can contain any content.
definition list
Typically used for final service centers
dl nests dt and dd, dt is above and dd is below
dl: definition list
dt: defines the title of the list
dd: defines the description of the list
dl can only contain dt and dd
sheet
four labels
table: table
tr: OK
th: header cell
td: content cell
table nests tr, and each tr nests th or td
There is no table line by default. Just add the border attribute (representing the thickness of the table line) to the table.
Table structure tag
thead
tbody
tfoot
Classify the contents of the entire table for future Css modifications
Merge Cells
Merge horizontal and vertical cells into a grid, spanning rows and columns
Merge steps
Keep the leftmost and uppermost cell and add attributes (the value is a number, indicating the number of cells that need to be merged)
Cross rows, attribute rowspan
span columns, colspan
Get rowspan="x", colspan="x" at td
Delete other cells
Cannot merge across structure tags
form
Used to collect user information, login, registration, search area, etc.
input tag
<input type="....">, different types have different functions
attribute value
text: text box, input of single line text
password: Password box, only displayed. . . .
radio: radio button
attribute name
name: name of the control, only one can be selected in a group, choose it yourself
checked: checked by default, the attribute value and attribute name are the same, only write one
ex: Default is male when selecting gender, change it when selecting female.
<input type="radio" name="gender" checked>Male
<input type="radio" name="gender">Female
checkbox: multi-select box
checked: checked by default (generally used to agree to terms)
file: upload files, avatars, etc.
To transfer multiple files, add the attribute name multiple (same)
ex
Text box: <input type="text">
input tag placeholder text
<input type="text" placeholder="Please enter username">
Prompt information in the frame, light-colored words
Drop-down menu
select nested option, the selected attribute is set to default
text field
Enter text in multiple lines
<textarea>Prompt text</textarea>
There is a corner in the lower right corner
label label
Use it to bind the relationship between text and form controls to increase the click range of the form controls.
Both ways of writing
1. The label label only wraps the content, not the form control. Set the for attribute of the label label to the same value as the id attribute of the form control.
2. Label directly wraps text and form controls, one label per line
text, password, file, radio, checkbox, select, textarea all support increasing the click range
button
<button type=""></button>The default is submit when type is omitted
type attribute value
submit: submit, data is sent to the background
reset: reset
When using it, you must match the form tag and put all the places you want to reset in the form tag.
<form action="Address to send data"></form>
button: ordinary button, used with js
Semantic divs and spans
Used to lay out web pages
div (big box): exclusive line
span (small box): no line breaks
character entity
Space:
Only one space can be recognized in the code, which can be copied multiple times to increase the space.
Less than sign: <
Greater than sign:>