Home > Developer > Web Develop
HTML file format
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<body>
</body>
Label
<b></b> Coarse Label
<strong></strong> Coarse Label
<mark></mark> Highlight
<em></em> Italic Accent
<i></i> Italic
<p></p> text, deleting spaces
<pre></pre> Keep the original text
<form></form> Forms
text box (can be initialized by adding value in angle brackets)
<input type= "text"/> Plain text box
<input type= "password"/> Password box
<input type= "textarea"/> Text field
<textarea ></textarea> Text fields (properties: readonly (Read only), disable (not available))
Button
<input type= "Submit" value= "button"/> (trigger Commit)
<button></button> Normal button
<input type= "reset" value= "reset button" > (reset button)
drop-down box
<select>
<option value= "" > "" </option>
......
</select>
Radio Box
<label> "</label><input type=" Radio "name=" "/>
<label> "</label><input type=" Radio "name=" "/>
check box
<label> "" </label>
<label></label><input type= "checkbox"/>
......
<span></span> labels that contain text
<fieldset></fieldset> Define a box
<legend> "" </legend> add text to the box
HTML framework
iframe inline frame, used to embed another document
<iframe src= "File path" ></iframe>
Form
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
Colspan Unit columns Merging
rowspan Cell Row Merging
<div></div> layout
<table></table> layout
<ol></ol> ordered list
<ul></ul> unordered List
<dl></dl> Custom Lists
CSS style h{first style; second style}
Background
Background
-color; color
-image:url (picture path); background image
-repeat background repeat (no-repeat default upper left corner, repeat-y ordinate tile, rapeat-x horizontal tile)
-position Picture location (Center,right bottom ... ）
Text
Text-indent Indent Text
Text-align Horizontal Alignment (Left,right,center)
word-spacing English Character spacing
Letter-spacing Word or Kanji spacing
Text-transform character conversion (uppercase uppercase, lowercase lowercase, none unchanged, captialize first capitalization)
Text-decoration text decoration (underline ... ）
White-space Handling whitespace characters
Direction Text direction (RTL is displayed on the right)
Font
font-family font Style
Font-style font Style (italic italic, oblique text italic, normal)
Font-varaint font variants (small-caps small caps, normal,inherient inheritance)
Font-weight Bold
Font-size Font Size
Hypertext links
a:link{} link Default
a:visited{} After the point is finished
a:hover{} put the mouse up
a:active{} When clicked
CSS List
The identity before the unordered list
P{list-style-square} Square
P{list-style-image:url ("path")} Picture
P{list-style-position} (inside place the shape inside the text, outside right offset)
CSS Tables
Border-collapse Border Merge
Text-align level setting (Center,left,right)
Vertical-align Up/Down settings (middle,bottom,top)
CSS style sheet Precedence
inline > Internal style sheets > external style Sheets
CSS Box model
padding inner margin
padding:x x x x (UP) (right) (bottom) (left)
Padding:x x; (Up and down) (left and right)
Padding:x x x (UP) (left and right) (bottom)
Pdding:x (up or down)
Margin margin (same inner margin)
Border border (Left,right,top,bottom)
Min-width: "" When heading is scaled to "", a scroll bar is created
Positioning
Position:relative relative positioning
1. Using relative positioning does not affect the element itself
2. Not out of the document flow, just offset
3. If no offset is set, the element will not be affected
4. Will also occupy the original space
Position:absolute Absolute Positioning
1. Out of document Flow
2. Use absolute positioning to set the current element to Inline-block (can be set to a wide height)
3. The coordinates can be moved (
1. Absolute positioning no parent, default to document as parent
2. If a parent is located, move
3. If there are multiple targeting parents, find the nearest location parent
4. Relative positioning must match absolute positioning use)
Z-INDEX:1/2/3. Raise the module priority, but it must be used with position
！ Important can set other weights to 0
Position:static static positioning
Layout according to normal document flow (default property)
position:fixed fixed positioning (can do navigation, does not move with the scroll bar movement)
Floating
Float:left/right/none
1. Make the block elements appear on one line, set the Inline-block for each element
2. Enable row elements to support high, wide
3. Do not set high width, high width is determined by the content
4.left start from left to right and right to left
Floats are arranged in a certain order, the boundary of the parent element is stopped, or the previous sibling element stops.
Float is out of the document flow
Clear: (both eliminates floating on both sides, Left,right)
HTML CSS Learning Summary
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
