Front-end newcomers learning notes ------- basic html/css/js knowledge points, learning notes ------- html

Front-end newcomers learning notes ------- basic html/css/js knowledge points, learning notes ------- html

I am a software engineering college student who is about to graduate. I am looking for Android in the fall. I have come to the company for an internship this year and want to develop the front-end. So everything is only available now. Now I want to learn from the video, start this blog and record your learning process.

Knowledge points learned in April 6:

I. <! Doctype html>

! Declaration, meaning of attention;

The meaning of the doc document;

The meaning of the type;

Html does not need to be explained;

The Link means: note that the document type is HTML. That is to say, declare the document type of the file you wrote to facilitate browser resolution.

Ii. <meta charset = "UTF-8"/>

Declare the code encoding format

Note: Sometimes you declare to UTF-8 encoding, but in the actual web page Chinese or show garbled characters, at this time you can go to see whether to save the file when using UTF-8 encoding, only when the format of the file to be saved is the same as the encoding stated on the webpage will Garbled text be generated.

Iii. CSS style sheets

Three forms: Internal style sheets, external style sheets (<link href = "style.css" rel = "stylesheet"/>), and inline style sheets.

Iv. background compound attributes

Repeat: the background image is repeated. By default, the background image is repeated, including no-repeat (the background image is not repeated), repeat-x (the background image on the horizontal axis is repeated), and repeat-y (The vertical background image is repeated)

10px (X axis), 50px (Y axis) can also be negative. Center top (horizontal center, vertical at the top) and fixed (the background is fixed. No matter how you drag the scroll bar, the background image is fixed at the corresponding position .)

5. border compound attributes

Border-width: border width;

Border-style: border style; (solid line, dashed dotted line, dotted line, IE6 incompatible)

Border-color: border color;

6. padding

Padding attribute: Top right bottom left

Note: The padding is equivalent to adding the fill thickness to a box, which will affect the size of the box. If you want to keep the size of the box unchanged, You Need To reduce the length and width.

7. margin of margin

The distance between blocks.

Note: 1. The upper and lower margins are superimposed, that is, the upper and lower Divs. Set the margin-bottom of the previous div to 30px and set the margin-top Of The div to 30px, after setting, the total margin is still 30px, not 60px;

2. <div id = "box1"> <div id = "box2"> </div> If box2's margin-top is set to 10px, its Parent div still has the phenomenon of margin-top = 10px, that is, when the parent and child levels are included, the Child-level margin-top will be passed to the parent level.

Set margin-right: auto. The set object is left-aligned;

Set margin-left: auto. The set object is right-aligned;

Set margin: auto 0. The set object is horizontally centered.

8. Box Model

9. Common styles

Structure Style: width;

Height: height;

Background: background;

Border: border;

Padding: padding;

Margin: margin;

Text style: font-size: text size (generally an even number, minimum is set to 12px)

Font-family: font;

Color: text color;

Line-hight: The Row Height;

Text-align: text align;

Text-indent: text indent (2em );

Font-weight: emphasis on text;

Font-style: Text skew;

Text-decaration: text modifier (underline, dashes, strikethrough)

Letter-spacing: letter spacing;

Word-spacing: word spacing;

The above is a summary of all the knowledge points learned today. Learn more and remember more. fighting !!!!!!!!!!!!!!!