Html+css code needs to be noted (collation)

Just enter the front line, has been struggling, small companies no guidance, only slowly groping!

Be accustomed to doing everything! The code is no exception. (It is estimated that many people have ignored it!) I'm one of them, too. 0.0)

There are good habits in writing code that can avoid many unexpected mistakes. Many people neglect it when they learn it, and it is difficult to change it until the wrong habits are cooked.

So when you write code you should take a good look at some of the details and specifications, do not need to remember, read through once there is an impression, in the actual combat encountered in the turn over, long time, will be.

Start organizing now (personal understanding):

1. Why does the code have good code habits?

The answer is, of course, easy to find errors and reduce the chance of errors.

What are some of the places 2.html+css should be aware of? Recommendations

　　　　 HTML section:

1. Page declaration:

Before so many standards, bored all bored to death, until HTML5 came, I like, simple rude has connotation.

　　　　　　　　　　　<! DOCTYPE html>

Simple, direct second kill 4.0,4.1 ....

2. Put the CSS in

3. Avoid using CSS expressions, the CSS expression is only useful in IE, the number of times he executes will change as the page shrinks, zooms in and scrolls.

PS: Think of a related knowledge, solved with an expression.

Problem: Remove the dashed box that occurs after clicking the a tag.

Workaround:

　　　　　　　　　　　　　　　　　　　　Body a{outline:none;blr:expression (This.onfocus=this.blur ());}

Compatible with most major browsers. Detailed later will introduce

4. Language attribute declaration.

　　　　　　　　　　　　

5. Use lowercase for HTML tags. (capitalization is not useless, but not easy to read.) Often encountered the familiar word capitalization do not know ... ）

6. Use Utf-8 encoding.

　　　　　　　　　　　　Html中： <meta charset="utf-8">

　　　　　　　　　　　　css中： @charset "utf-8";

7. IE compatibility mode

　　　　　　　　　　　　Perfect solution for IE compatibility Mode code: <meta http-equiv= "x-ua-compatible" content= "IE=9; ie=8; ie=7; Ie=edge ">

8. Replace the Table tab with a space. (Has been near in the day pack of seniors said, the Japanese audit is very strict, each line will go to see you are not pressed 4 under the space bar, Celestial ╮(╯▽╰)╭).

9. In HTML has been declared self-closing element (single closed label) after the slash can be omitted, since can be omitted, omit better, save bytes. (double closed label do not province, or fault do not know, often because of these small details, looking for an afternoon, the gun has wood? ）

10. Attribute definitions are best used in double quotation marks. (this looks at it).

The introduction of JS,CSS file in HTML5 does not require the definition of the type attribute. (Can save the province).

12. A Boolean type declaration is not assigned a value, and forms are commonly used.　　　

　　　　　　　　　　　　　　如：<input type="checkbox" value="1" checked> 中的checked 

13. Avoid using JavaScript to generate tags (hard to find, edit, and degrade performance).

　　　CSS section:

A line of code can see many details:　　　　　　　　　

 　　　　　　　　　　　　　　　 / * Bad CSS * /. Selector, . Selector-secondary, . Selector[type=text] {padding:15px; margin:0px0px15px; Background-color:Rgba(0, 0, 0, 0.5); Box-Shadow:0px1px2px#CCC,inset01px0#FFFFFF}/ * Good CSS * /. Selector,. Selector-secondary,. Selector[type="Text"] {padding: 15px; Margin-bottom: 15px; Background-color: Rgba(0,  0   ,    0   ,.  　　　　　　　　　　　　　　　  5  );   box   -   Shadow   :    0    1px    2px    #ccc   ,    inset    0    1px　　　　　　　　　　　　　　　　   0    #fff   ;   }  
           

The upper part of the code is not recommended for writing, the next part of the code when the suggested wording.

1. When a selector is combined, place a separate selector on a single line.

2. The declaration block should be empty before the opening parenthesis.

3. The closing parenthesis of the declaration block should be a separate line.

4. Declaration statement: Empty one after the next

5. Multiple attribute values comma after empty one grid

6. The last line attribute should not forget; (This place I have been in many times, are in the modification (maintenance) error prone. )

7. The starting value of the unit PX and 0 values after the 0 value is omitted. such as 0px=>0, 0.5=>.5

8. Partial repeating color value abbreviation. such as #ffffff=> #fff ( Note: #00ffac, #eaeaea can not be abbreviated into #0fac, #eae. Don't make a mistake .)

Other places to note:

9. CSS Declaration Order

 　　　　　　　　　　　　　　　　　　　　　　 . declaration-order{/* Positioning */Position:Absolute;Top:0;Right:0;Bottom:0;Left:0;Z-index:100;/* Box-model */Display:Block;Float:Right;Width:100px;Height:100px;/* Typography */Font:Normal13px"Helvetica Neue",Sans-serif;Line-height:1.5;Color: #333 text-align: center/* Visual */background-color:  #f5f5 　　　　　　　　　　　　　　　　　　　　　　F5border: 1px solid  #e5e5e5 　　　　　　　　　　　　　　　　　　　　　　border-radius: 3px 　　　　　　　　　　　　　　　　　　　　　　/* Misc */opacity: 1;                /span>           

　　　　　　　　

--out-of-text flow properties take precedence (position, float, display)

--Box model properties (dimension properties)

(width, height, margin, padding, border)

-Other properties

10. Single-line attribute rule:

One line property, one row, multiple lines of property branch writing

Such as:

　　　　　　　　　　　　　　. span1 {width:150px;}

. span2 {

width:150px;

height:150px;

}

　　　　　　　　　　　　Frequent check errors will encounter multiple lines written together, the 50th line error, the number of rows will not be obvious.

11. Do not use "tag + class name", "tag +id" structure, such as a.str ...

　　　　　　　　　　You can avoid modifying the type of page element two causes the style to fail, as I change the above a tag to a span tag. The result style lapsed ╮(╯▽╰)╭.

do not use entity references

For example, ">" As much as "&gt;" (This ==! Examples have been forgotten, but be careful. )

13. Try to avoid the descendant selector, also known as ">". More time-consuming (others say ...) ）

All right, so many estimates are dizzy .... More look don't need to remember, write code to stay dim sum, time long practice become accustomed to.

There are many details that I would like to add ... Learn to make progress together

Html+css code needs to be noted (collation)