It has been a long time since the beginning of contact with the front end, and only for the individual to write points for H4 and C2 knowledge points.
1.font
This is one of the more important attributes in HTML,
Usage: <font color= "Gray" size= "2" face= "song body" > Content </font>
Color: Make text color change
Size: Range is 1-7 normal 3
Face: Specifies the font of the text
Font-weight setting the specific number range is 100-900.
Font's ligatures:
Font:font-style font-weight font-size font-family;
Characteristics:
Font-style,font-weight can be omitted
Font-style,font-weight can be exchanged in order
Font-size font-family can not be omitted
For example: font:15px "Chinese Xingkai";
Where the font size and font system is required to write
line-height:40px;
The row height definition needs to be after the font definition, and if the row height is before the font, Line-height expires!
2. Bold, italic, underline, strikethrough
Label |
Usage |
Effect |
The same effect that was discarded |
Strong |
<strong></strong> |
Bold |
B |
Em |
<em></em> |
Italic body |
I |
Ins |
<ins></ins> |
Underline |
U |
Del |
<del></del> |
Delete Line |
S |
3.OL,UL,DL List
UL unordered list:
<ul>
<li> content </li>
<li> content </li>
</ul>
OL ordered List
DL Custom list:
<dl>
<dt> Small title </dt>
<dd> content </dd>
</dl>
Among them, the UL list in the future development will be used frequently
4.table table
<table>
<caption> title </caption>
<thead><tr><th> Table Header </th></tr></thead>
<tbody><tr><td> content </td></tr></tbody>
<tfoot><tr><td> End of the table </td></tr></tfoot>
</table>
Colspan= "2" rowspan
Personally think the form to understand, can understand, because there is not too much need to use this type of form
5. Hyperlink tags
Target= "How to Jump"
_blank Open the page in a new window
_self Jump on current page
Use a tag to position labels on a page
To prepare a label that is positioned by a label, you must have the id attribute
The value of the href attribute of the label is the ID of the #+ target label
Implementing the Download function
<a href= "relative path to Files" ></a>
Attention:
① This approach is rarely used in the present
② If the browser recognizes this file, it will open in the browser directly
6.input input Box
<input type= "text" placeholder= "Please enter user name" value= "123456"/>
Properties: Placeholder hint of text, when we enter the content, will disappear
MaxLength setting the maximum allowable input length
<form action= "" >
<fieldset>//Add a box to the form
<legend> Test the Type attribute//word on the box
</legend>
<label for= "" >color:
</label>
<label for= "" >tel:
</label>
<input type= "Tel" >
<input type= "Submit" >
</fieldset>
</form>
This property is also a particularly important property, because in the Web page we can click to enter the content of the text box, 80% is the input tag
7. Positioning
1. Fixed positioning
Position:fixed
Characteristics:
1 does not occupy the original position in the standard flow
2 Mode Conversion
3 benchmark for positioning is browser-based
2. Absolute positioning
Position:absolute
Characteristics:
1 does not occupy the original position in the standard flow
2 but the transformation of the implementation mode
3 If the parent element is set to be positioned, absolute positioning is relative to the parent element, otherwise it is relative to the browser
3. Relative positioning
Position:relative
Characteristics:
1 occupy the original position in the standard flow
2 cannot implement a schema conversion
3 positioning is relative to the original position in the standard flow
4. Static positioning
Position:static
Static positioning is actually the standard flow, is also the default situation
Characteristics:
1 occupy the original position
2 cannot implement a schema conversion
3 positioning no matter how it is set, it has no effect
Usually in use, to remember the child absolute father, that is, to the child element absolutely positioning, then to the parent element relative positioning, so that the child element relative to the parent element to set the location of the positioning
8. Hierarchy
Z-index:number
The default level is 0 and the maximum is 9999, and of course this is rarely done to set the hierarchy.
Only elements that have been positioned are able to use this property, and static positioning is not possible with the Z-index
Control the level in the locator.
Writing is not very good, the specific content I think it is more practical to explore
Simple content of H4 and C2