HTML&CSS Writing Specification

The first part: HTML Writing Specification:

1.1 HTML Overall structure:

1.1.1:html Infrastructure:

1. Document with "<! Doctype...> "first line shelf, recommended" <! DOCTYPE htlm> ";
2. The document must declare the encoding charset, consistent with the encoding of the file itself, recommended <meta charset= "UTF-8" >;
3. Fill in keywords and description according to the content and requirements of the page;<meta name= "keywords" content= "" ><meta name= "Decription" Content= "" >
4. Page title is a very important item.

1.1.2: Structural order is basically consistent with visual order

1. Write HTML in order from top to bottom, left to right;
2. Sometimes in order to facilitate the search engine crawl, we have important content in the HTML structure in advance;
3. Use div instead of table layout;
4. When you need some form of tabular data, use <table>

1.1.3: Structure (HTML), performance (CSS), behavior (JS) three separate, avoid inline

1. Use link to bring CSS files into the head;
2. Use script to introduce the JS file and place it at the bottom of the body.

1.1.4 maintains a good, concise tree structure:

1. Each block-level element has a different row, and each row uses the tab indent alignment. Remove spaces at the end of a redundant line
2. Use 4 spaces Instead of 1 tab (most editors can set)
3. For simpler forms, it is recommended to write <tr> as a single line
4. Large modules can be separated by a blank line to make the structure clearer

In addition, please do the following:

1. The structure can be written in parallel, do not nest writing. such as: If you can write <div></div><div></div, do not write <div><div></div></div>
2. If the structure can already meet the visual and semantic requirements, there is no redundant structure. such as: <div>
3. A label does not refer to too many classname, such as this: <div class= "Calss1 class2 class3 class4 class5" ></div>
4. For a semantically internal tag, try to avoid using classname. In this case: <ul class= "Ask-help" ><li class= "item" ></li></ul>,class= "item" should be removed!

1.2 Content and Semantics:

1.2.1 Content type determines the semantic tags used

In HTML, a particular type of content is hosted by a specific HTML tag, or the HTML structure is semantically based on content.

1.2.2 Enhancing accessibility and availability of "resource-based" content

Add a descriptive copy to the contents of the resource, such as img adding ALT attribute, in audio plus copy and link

1.2.3 Enhancing accessibility of "invisible" content

The text on the background image should be written in HTML at the same time, and use CSS to make it invisible, facilitate search engine crawling content, and the CSS can see the content when it fails

1.2.4 to avoid browser parsing errors by substituting character entities for the same characters as HTML syntax

More HTML Specifications: Reference links

Part II: CSS Writing specifications

Reference links

Part III: JavaScript writing specifications

3.1 Blocks:

Always use curly braces to denote chunks

1 if(false)2     varAa=1;3     varbb=2;4     varCc=3;5Console.log (AA,BB,CC);//undefined 2 36 //equivalent to:7 if(false){8     varAa=1;9 }Ten varbb=2; One varcc=3;

The curly brace follows the keyword .

1 functionTest () {2     return 3     {4Name: ' Apple '5     }6 }7Console.log (Test ());//undefined8 //The above function originally wanted to return an object, but the above code is equivalent to:9 functionTest () {Ten     return ; One     { AName: ' Apple ' -     } -}

The correct wording:

1 function Test () {2     return {3         name: ' Apple '4    }5 }

3.2-line tail semicolon : javascript Specifies that the end-of-line semicolon can be omitted. But the suggestion: can not save the place not to omit (this is not python,ruby and other languages)

3.3 Variable declaration: Because of "variable promotion", therefore, the variable statement is best declared in the head

3.4new command:

var a=new myobeject ();

This is used by the constructor to generate an object using the new command. But once you forget that the This keyword inside the new,myobject () will point to the global object, causing all the variables bound on this to become global variables.

Therefore, the initial letter of the construction function is generally uppercase, and the normal function is lowercase!

3.5 with: try not to use with

3.6 = = = = = = = always use strict equality (= = =)

3.7 switch...case Structure: Code is easy to verbose, easy to cause confusion of the process, not conform to object-oriented programming principles.

Switch...case recommended to avoid use!

HTML&CSS Writing Specification