MindMap Gallery HTML study notes
Share HTML study notes! The content includes table composition properties, form controls, CSS styles, CSS selectors, display modes, etc. The knowledge points are detailed and focused, which is helpful for learning HTML. If you are interested, please like and save it!
Edited at 2019-07-24 02:33:30This 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.
HTML02
table table
composition
table
Only tags inside the table can be placed in it, not divs and the like.
row tr
cell td
Attributes
width and height width height
border border
cellpadding The distance between the content in the cell and the border padding
Default is 2 pixels
cellspacing distance between cells margin
Default is 1 pixel
align=center
Table text alignment
<tr align = "center">
Table page alignment (basically not used)
<table align="center">
<table border = "1px" width="500px" align="center" cellpadding="10" cellspacing="10">
header cell
th
Usually in the first row or column of the table
The text will be bold and centered
table title
caption
The position is written inside the table tag on the next line
<caption>I am the table title</caption>
Merge Cells
across lines
rowspan
span columns
colspan
step
1. Determine whether to span rows or columns
2. Select the target cell from top to bottom and left to right.
3. Delete redundant cells
form
Purpose: Collect user information and interact with users. It consists of three parts: form fields, form controls, and prompt information.
form fields
form
action
Used to specify the URL address of the server program that receives and processes form data
Submit the form information to the xxx location page
method
Used to set the submission method of form data
get
post
name
Used to specify the name of the form to distinguish multiple forms on the same page
range area
form control
input (single)
text
single line of text
password
Password box
radio
single button
checkbox
checkbox
image
image submission
file
file domain
upload file
submit
submit
reset
reset
label for
(Understanding) Click the text in the label, and the cursor can be positioned inside the form of id
Enhance user experience
select
drop-down list
option option
textarea
text field multiline text
Enter text content
button
Normal button
name
Attribute name used to find the form
value
The attribute value is displayed in the form and will be placed in the background later.
Prompt message
CSS
Location classification
inline style sheet
<p style="color:red;">Content</p>
few
internal style sheet
head inside
many
external style sheet
link
Really realizes the separation of structure and style H and C
most
CSS style rules
selector {property: value; property: value;}
Font style
font size
font size
Don’t forget to add the unit px
font-family
font
1. 14px is now commonly used in web pages.
2. Try to use even numbers and font sizes. Old browsers such as IE6 will have bugs when supporting odd numbers.
3. Various fonts must be separated by commas in English.
4. Chinese fonts need to be quoted in English, while English fonts generally do not need to be quoted. When you need to set an English font, the English font name must precede the Chinese font name.
5. If the font name contains symbols such as spaces, #, $, etc., the font must be enclosed in single quotes or double quotes in English, for example, font-family: "Times New Roman";.
6. Try to use the system default font to ensure that it can be displayed correctly in any user's browser.
7. Generally, multiple fonts will be written. If the browser does not support the first font, it will be pushed to the next one. If it does not support it, the default font will be used.
font-weight
Bold font
normal == 400
bold bold == 700
There is no need to have a unit for 400 or 700. It is recommended to use numbers instead of normal and bold.
font-style
font style italic
normal normal
italic inclined
oblique is also italicized
Italic and oblique both give fonts an angled effect, but not all fonts have an angled effect. When the font does not have italic attributes, you can use oblique instead. Oblique tilts the font to the right.
Comprehensive continuous writing
There is a sequential relationship and cannot be adjusted. There must be font-size and font-family. These two cannot be omitted, otherwise the continuous writing will have no effect.
Selector {font: font-style font-weight font-size/line-height font-family;}
Whether the font is italic, whether the font is bold, size/line height, font
text style
color
hexadecimal
#f00
#000
#fff
line-height
line height, line spacing
distance between rows
The unit generally uses px
It’s just a suggestion. The actual situation depends on the specific situation. The line spacing should be about 7.8 pixels larger than the font size.
text-align
Instead of the box being centered, the content inside the box is aligned horizontally within the box.
Align text horizontally and center
text-align:center,left,right;
text-indent
The first line of the paragraph is indented by 2 words text-indent: 2em; 1em is the distance of one word
text-decoration
none
underline
Text formatting label style
em and i tilt
Cancel tilt
font-style: normal
Add tilt
font-style:italic
strong and b
Cancel bold
font-weight: normal 400
Add bold
font-weight: bold 700
u ins
Remove underline
text-decoration:none;
add underline
text-decoration:underline;
s and del
Remove strikethrough
text-decoration:none;
Add strikethrough
text-decoration:line-through
CSS selectors
basic selector
tag selector
You can select a certain type of tags, such as all div tags
div span table input
class selector
You can select one or more tags
.nav
Class name naming
1. It cannot be pure numbers
2. Cannot start with a number
3. Use English letters and numbers as much as possible
4. .div .p .table is wrong and cannot be named after tags
self-made name
Multiple class name selector
ID selector
# Define id call
The difference between id selector and class selector
number of uses
Class is reused multiple times (most commonly used)
id can only be used once
For example, class is a person's name and can be repeated, but id is an ID number and is unique.
They are not mutually exclusive and can be mixed
wildcard selector
* All tags will be selected and used less often during actual development.
compound selector
descendant selector
Separate with spaces to select descendants
This is used more often
descendant selector
Separate with > Select biological son
use less
Intersection selector
Label concatenation div.one
div#two ==》 <div id = "two"></div>
It is used relatively rarely and is not recommended.
Union selector
Use commas to separate collective declarations of the same style.
div, p ,span, .current { color: red;}
Link pseudo-class selector
:
a:link
/* Unvisited links */
a:visited
/* Visited links */
a:hover
/* Move the mouse to the link */
It makes no sense if it is not written after link and visited.
a:active
/* selected link */
a{} a:hover {}
Order (try not to change): link, visited, hover, active
display mode
block-level elements block-level
block
Have height and width
Only one can be placed in a line
overbearing
Features:
(1) Always start on a new line
(2) Height, line height, margins and padding can all be controlled.
(3) The width defaults to 100% of the container
(4) Can accommodate inline elements and other block elements.
Inline elements inline-level
inline
You can put multiple in one line
no width and height
Features:
(1) On the same line as adjacent inline elements.
(2) The height and width are invalid, but the padding and margin in the horizontal direction can be set, but the vertical ones are invalid.
(3) The default width is the width of its own content.
(4) Inline elements can only accommodate text or other inline elements. (a special a can put block-level elements in it)
inline block element
inline-block
has width and height
You can put multiple in one line
Convert
display
display: inline;
display: block;
display: inline-block;