Front-end newcomers learning notes ------- html/css/js BASICS (2)-clothes without pants

Beginner Study Notes ------- htmlcssjs BASICS (2)-clothes without pants Knowledge points learned in April 7:

I:

Alt is an introduction to the image. When the image is not loaded, the alt value is displayed directly. The search engine can find the image better.

Ii. Tag download

When the href value is a file name or compressed package, the file will be downloaded directly from the browser download function.

III:

Anchor Point, commonly used in Baidu encyclopedia. Click "a" to jump to the corresponding id.

4. Group Selector

# Box1, # box2 {} select the objects with IDs of box1 and box2.

5. class selector

. Class

6. Type Selector

P {}; p {} and so on

7. Style priority

1.Same level StyleBy default, the latter overwrites the former;

2. Priority: type (1) <class (10) <id (100) <style interline style (1000)

8. pseudo class

The pseudo class is used to add special effects to the selected element.

Link: not accessed (default );

Visited: After access;

Hover: hover over the mouse;

Active: click the mouse.

If you want to continuously make a certain element have the above effect, the order of writing these four pseudo classes should be as above, and visited must be written in second. If it is written at the end, after the access, it is based on the priority order of the same level elements, the accessed style will overwrite the hover and active, which will cause continuous effects.

Compatibility problem: IE6 does not support pseudo classes of any label other than a. IE6 and later browsers support hover pseudo classes of all labels.

9. Default style Reset

Some labels will contain some styles such as padding and margin. Before development, clear these default styles. When clearing, it is best not to use wildcards to clear, because it will be very inefficient.

10: block and embedded Elements

Block features:

1. By default, only one row is exclusive;

2. If there is no width, a row is full by default;

3. supports all css commands;

Embedded features:

1. Similar labels can be displayed in the same row;

2. Support opening width;

3. width and height are not supported;

4. Upper and Lower margin and padding are not supported;

5. There will be a space in the middle of the line feed.

11: display

You can use display to change block and embedded attributes.

Display: block;

Display: inline;

Display: inline-block

Features: 1. The block is displayed in one row;

2. In-row elements support width and height;

3. When there is no width, the width of the content is extended.

Compatibility problem: there will be spaces in the code line feed; ie6 and ie7 do not support the inline-block of block attribute labels;