HTML+CSS Learning notes 2[tags]

IMG Tag/a tag

Picture (single label) alt attribute is the name of the picture, is to Baidu search engine crawl use;

A tag: link/download/anchor href address equals tag ID
Target Link Open mode
Blank New Window
Self Current window
<base target= "_blank"/> Define page link default open mode

Common labels

div block
IMG Image (Single label)
A links, downloads, anchor points
H1-h6 Title
P Paragraph
Strong emphasis (bold)
Em accent (Italic)
Span-sensitive styles
UL unordered list
OL ordered List
Li list Item
DL Definition List
DT Definition List Title
DD Definition list Item

SEO: Search engine optimization;

Some methods:
A, page label semantics;
b, the use of SEO advantageous tags: h1/h2/h3/strong/em ...
c, improve the page keyword density;
D...... And so on

SEM: Search engine marketing; (including SEO)

Selection character

ID Selector (#)

Group selector (,)

Class selector (.)

Type selector (div ...)

Include selector (Div p)

wildcard character (*)

Selector Priority

Priority of the base selector
Type < class < ID < style (inline) < JS

Test:
A, #header #div1. box1 Div. section p. link{.........}
B, #some. Base #font #call a{..........}

See the number of advanced selectors the highest priority is the higher of course this is just a test

Selector usage principle: The exact selection of the element does not affect the other. There is also a performance issue

Four pseudo-element pseudo-classes of a

Pseudo-Class: Pseudo-Class is used to add special effects to selected elements. (elements are available under certain circumstances.) ）

Link not accessed (default)
Hover mouse hover (mouse over)
Active link activation (mouse down)
After visited visit (after click)

The order of a four pseudo-classes:
Link visited Hover active
(Love Hate memory Method!) ）
Application and compatibility issues

A pseudo-class application:

A, four pseudo-class full use (search engine, news portal, fiction website)

B, General website only (a{} a:hover{})

IE6 does not support pseudo-classes of any label other than A;

IE6 above browsers support hover pseudo-class of all tags;

Tag Style initialization

CSS Reset principle:
However, do not use any of the styles that are viewed by default.

body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;font-size:12px;}
Ol,ul{margin:0;padding:0;list-style:none;}
A{text-decoration:none;}
Img{border:none;}

Common Reset Code

BODY,DIV,P,UL,OL,LI,DL,DT,DD,H1,H2,H3,H4,H5,H6,FORM,INPUT,TEXTAREA,TH,TD {padding:0; margin:0;}//internal and external margin reset
Table {border-collapse:collapse; border-spacing:0;} Table border Two-pixel bug
img {border:0;} Picture IE Blue Border
Ol,ul{list-style:none;} Remove black spots
H1,h2,h3,h4,h5,h6 {font-weight:normal; font-size:100%;} Label text font settings parent label Invalid do not inherit
. Clear:after{content: "";d Isplay:block;clear:both;} Clear floating
. Clear{zoom:1;} Trigger Haslayout

Block elements and inline elements

Characteristics of The Block
1. Default Exclusive Line
2, no width, the default is full of a row
3. Support all CSS Commands

inline (inline, inline) features
1, same row can continue with the same label
2, the content open width
3, does not support the width of the high
4, does not support the upper and lower margin and padding
5. Code wrapping is parsed

Convert each other

Display:block Display as Block

Attributes that enable inline elements to have block property labels

Display:inline Display as inline

To make the properties of a row block property label an inline element

Characteristics and problems of inline-block

Characteristics:
1, block in a row display;
2, in-line attribute tags support wide-height;
3, no width when the content open width

Problem:
1, the code line is parsed;
2, IE6 IE7 does not support the block attribute tag Inline-block;

Application of Inline-block, cursor

A, analysis structure (div package a row a)
b, a label supports wide height, and in a row display
c, have hover effect
D, the current state can not point!

Cursor pointer style (specifies the type of cursor to display)
Cursor:pointer | Text | Move ...
Cursor:url (hand.cur), pointer;

Interview questions

Such a piece of HTML, please fault:

<P>&nbsp;&nbsp; does not write HTML, is lonely. <br><br>&nbsp;&nbsp; I said:<br> don't crush on brother, brother is just a legend

&nbsp; Space character

Standard:
<p> does not write HTML, is lonely. </p>
<p> I said:<br/> don't crush brother, brother is just a legend </p>

Best:
<p> brother wrote not <abbr title= "hypertext Markup Language" >HTML</ABBR> </p>
<p><cite> I </cite> said:<br/><q> don't crush brother, brother is just a legend </q></p>

Additional information for the TITLE element
HTML Tags: http://www.w3school.com.cn/tags/index.asp

Front End Specification

1. All writing is lowercase in the English half-angle state;
2, Id,class must start with a letter;
3, all labels must be closed;
4, the HTML tag is indented with the TAB key;
5, the attribute value must be quoted number;
6, <!--HTML comments--
7./* CSS Comments */
8, UL,LI/OL,LI/DL,DT,DD has a parent-child relationship label;
9, p,dt,h tag inside can not nest block attribute tag;
10, a label can not nest A;
11, inline elements can not be nested blocks;