html| CSS Summary and supplement

Knowledge Content:

1.HTML Summary

2.CSS Summary

First, the HTML summary

See details: http://www.cnblogs.com/wyb666/p/8733699.html

1, HTML is a set of rules, the browser knows the rules

2. Developer:
Learning HTML Rules
Development daemon:
-Write HTML files (acting as templates) ******
-The database gets the data and then replaces it to the specified location in the HTML file (Web framework)

3. Local Testing
-Find file path, direct browser open
-Pycharm Open Test

4. Writing HTML files
-DOCTYPE correspondence relationship
-HTML tags, tags can be written inside the property ====> can only have one
-Note: <!--the contents of the note--

5. Label classification
-Self-closing label
<meta charset= "UTF-8" >
-Active closing tag
<title> old boy </title>

6.HTML Common Tags:
Inside head Tag:
-<meta, jump, refresh, keyword, description, IE compatible
<meta http-equiv= "x-ua-compatible" content= "IE=IE9;IE=IE8;"/>
-Title Tag page Header
-<link/> Introducing CSS
-<style/> CSS About
-<script> JavaScript related

Body inside Tag:
-Icons, &nbsp;   &gt; &lt;

-P tag, paragraph

-BR, line break

======== Small Summary =====
All tags are divided into:
Block-level Tags: div (whiteboard), H-Series (enlarged bold), p label (spacing between paragraphs and paragraphs)
Inline Tags: span (whiteboard)
Tags can be nested between
The meaning of tag existence, CSS operation, JS operation
Ps:chorme use of review elements
-Positioning
-View Styles

-H Series (H1 H2 H3 h4 h5 h6 size in turn, all bold and black)

-Div-and block-level labels

-Inline tags with span

-Input series + form label
Input type= ' text '-Name property, value= "Chaofan"
Input type= ' password '-Name property, value= "Chaofan"
Input type= ' submit '-value= ' commit ' submit button, form
Input type= ' button '-value= ' login ' button

Input type= ' Radio '-Radio box value,checked= "Checked", Name property (name same is mutually exclusive)
Input type= ' checkbox '-check box value, checked= "Checked", Name property (bulk fetch data)
Input type= ' file '-relies on a property of form form enctype= "Multipart/form-data"
Input type= ' rest '-Reset

<textarea > Default value </textarea>-Name property
Select Label-Name, internal option value, submit to background, size,multiple

-A label
-Jump
-Anchor href= ' #某个标签的ID ' tag ID is not allowed to repeat

-img
Src
Alt
Title

-List
Ul
Li
Ol
Li
Dl
Dt
Dd

-Table
Table
Thead
Tr
Th
Tbody
Tr
Td
colspan = ' '
rowspan = ' '

-Label
Used to click on the file so that the associated tag gets the cursor
<label for= "username" > User name:</label>
<input id= "username" type= "text" name= "user"/>

-FieldSet Group
Legend-Definition Title

-Total 18 groups of labels

Second, CSS Summary

See details: http://www.cnblogs.com/wyb666/p/8970209.html
1. CSS styles can be written in the label's style property
2. Write style in the Style tab in head
-ID Selection Area
#i1 {
Background-color: #2459a2;
height:48px;
}

-Class selector ******

Name
...
}

< label class= ' name ' > </tag >

-Tag Selector
div{
...
}


All div settings on this style

-level selector (space) ******
. C1. C2 div{

}
-Combo Selector (comma) ******
#c1,. c2,div{

}

-Property selector ******
Filter the selected labels again by attributes
. c1[n= ' Alex ']{width:100px; height:200px;}

Ps:
-priority, style first on label, write order, nearest principle

CSS styles can also be written in separate files and then introduced using the link tag
<link rel= "stylesheet" href= "Commons.css"/>

3. Comments
/*   */

4. CSS Common Properties

(1) Font

font-family font Type

Font-size Font Size

Font-weight Font Bold

Color font

　　　
(2) Text properties
Text-align Alignment (important)
Text-decoration decoration (Remove the underscore (text-decoration:none) of a label)
Text-indent indent in first line

(3) Background properties
Background-color background Color
Background-image background image (nine Gongge) URL () no-repeat 50% 50%

(4) Color
Red (write name directly)
#FF0000
RGB (255, 0, 0)--RGBA (255,0,0,0.5)

(5) Border property border
1. Border-width (Border width)
2. Border-style (Border Style)
3. Border-color (border color)
Shorthand:
border:1px solid red;

(6) Center

Text-align:ceter, centered horizontally
Line-height, vertical direction according to label height

(7) Height width

Height, percentage of altitude
width, breadth pixels, percent

6, float
Let the label wave up, block-level labels can also be stacked
I can't control:
<div style= "Clear:both;" ></div>

7. Display
Display:none; --Let the label disappear
Display:inline;
Display:block;
Display:inline-block;
With inline, the default number of its own how much
With block, you can set the height, width, padding margin
******
Inline Tags: Unable to set height, width, padding margin
Block-level Tags: set height, width, padding margin


8. CSS Box model

Content (contents)
Padding (inner padding) Use this property when adjusting the distance between content and borders
Border (border)
Margin (margin) is used to adjust the distance between the adjustment labels (note the maximum value of two next to the label margin)
Note: Be accustomed to looking at the box model in the Browser console window

9. Pseudo-class and pseudo-elements
(1) Pseudo-class
: Link
: Visited
: Hover (important)
: Active
: Focus (Input tag gets cursor focus)
(2) Pseudo-elements
: First-letter
: Before (important added in front of the interior)
: After (important after internal addition)

html| CSS Summary and supplement