HTML front-end development of 20 points of knowledge (personal build station summed up)

Source: Internet
Author: User
Tags html header

This is my own normal construction station at the time, encountered some small skills and important knowledge points, share to everyone


1. Border of the box 3 elements: Box actual performance


2.padding color is the background color, and is outward expansion


3. Use margin auto to complete the center of the homepage


4. Upper and lower adjacent common elements (some div set floating, that is not ordinary elements), the upper and lower margins, not simply add, but take the larger margin values, this phenomenon is called


margin overlap


5. Box model is block (DIV) layout, span is the inline selection of text with


6.text-indent:20px; indent 20 pixels ********

Text-decoration:line-through; (strikethrough)

leteter-spacing:20px (distance between words)

Line-height: (Row height)

font-family: (font) ' Simhei ' (boldface)

Font Control tips: The order of the points

Font:italic bold 23px/46px "Simhei";

Style Weight size Height family

Style weight size line high font

Sans-serif sans Serif, seirf lined (new Arial)



7. Set the background image

Background-image:url (small.jpg)

Background-repeat:repeat-x/y/no-repeat;

background-attachment:fixed (fixed); The browser is pinned to one location, sliding as the page slides




8.CSS Selector: ID selector class selector tag selector (such as P tag, div tag) derivation selector (the hierarchy between elements to declare pseudo-class selectors wildcard selection


Manager


4 ways to introduce 9.CSS

1) external link to a CSS file, which we indicated in the HTML header section:

<link href= "Css/my.css" rel= "stylesheet" type= "Text/css"/>


2) head directly written css:<style type= "Text/css" > div{margin:0;padding:0;border:1px solid red;} </style>


3) When you add multiple CSS files: <style type= "text/css" > @import url (my.css) <style>


4) directly in the HTML tag to write the CSS control of this tag, such as: <div style= "border:1px solid red;" > Test Information </div>


The second one can declare the third class float with float


10. Insert Picture 34

Search engine, picture of the text description


11. Remove Li small black spot list-style-type:none;

After initializing the CSS, write Li, and use the background image +padding, to complete the effect of Li Small icon, and to achieve the compatibility of each browser 36



12. Add 3 anchor points within the page and create 3 links

<a href= "31.anchor.html#p1" >P1 Anchor Point </a>

<a href= "31.anchor.html#p2" >P2 Anchor Point </a>

<a href= "31.anchor.html#p3" >P3 Anchor Point </a>


<a name= "P1" ></a>

<p>p1</p>


<a name= "P2" ></a>

<p>p2</p>


<a name= "P3" ></a>

<p>p3</p>


13.CSS allows us to set individual CSS features for the 4 states of a sticky note, called CSS pseudo-class

A:link{color:gray;}

A:visited{color:orange;}

A:hover{color:purple;}

A:active{color:black;}

Note: The order is LVHA

Active generally does not have to write

A:link General Jane writes a:

Character entities in HTML development, there are some characters that are not intended to be written directly,

such as &gt;&lt;&quot;&yen;&copy;

> < "RMB trademark


14.CSS draw fillet border-radius:15px; (RADIUS)

px:width:300px;

heigth:300px;

border:1px solid red;

border-radius:150px;

(a circle with a radius of 150px)



15overflow Overflow Handling:

Overflow:visible;/auto;/hidden;/scroll;


16 form:

When the user registers, the online registration and so on occasions, needs to put the user's information, fills in and submits, this is to use the form to collect the user's information

<form action= "http://www.baidu.com" method= "POST" > Insert the following fill information here </form>

User name: <input type= "text" name= "Usename"/>

Password: <input type= "password" name= "password"/>

Gender: Male: <input type= "Radio" name= "Gender" value= "male"/>

Female: <input type= "Radio" name= "Gender" value= "female"/>

Hobbies: Basketball <input type= "checkbox" name= "Hobby" value= "basketball"/>

Football <input type= "checkbox" name= "hobby" value= "soccer"/>

Billiards <input type= "checkbox" name= "hobby" value= "billiards"/>

Volleyball <input type= "checkbox" name= "hobby" value= "Volleyball"/>

Education: <select name= "Xueli" >

<option value= "Please select" > Please select </option>

<option value= "University" > University </option>

<option value= "High School" > High School </option>

<option value= "Junior High School" > Junior High School </option>

Upload avatar: <input type= "file" name= "Pic"/>


17. Block-level elements: is a block, like a paragraph, the default occupies a line appears;


18. Inline elements: Also called inline elements, as the name implies, can only be placed in the line, like a word, will not cause before and after the line, play an auxiliary role.


19. General block-level elements such as paragraph <p>, title


Elements such as: Table cell <input>, Hyperlink <a>, Image , <span> ..... The significant feature of block-level vegan is that each block-level element is displayed starting with a new line


, and the subsequent non-vegetarian also needs to be displayed on a separate line.


20. The same elements, such as Li, under different browsers, show a slightly different effect, because different browsers margin,border,font-size each element

And so slightly different, if you want to eliminate this situation, we force the CSS to make all the elements of the same property values, so that the browser display is consistent, reducing the incompatibility

This process is called CSS initialization.









HTML front-end development of 20 points of knowledge (personal build station summed up)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.