Joke Collection Website - News headlines - What is the specification of front-end monomer coding?

What is the specification of front-end monomer coding?

This time, I will bring you the specification of front-end monomer coding and the matters needing attention in using front-end monomer coding specification. The following is a practical case, let's take a look.

Whether it is front-end or background code, coding specification is particularly important, especially in large-scale projects. Standardizing the code, format and requirements at the beginning of opening will reduce a lot of workload and be conducive to the later maintenance of the code.

The sorting table of front-end monomer coding specifications has no category.

Verification content 1

Page design

The list title is displayed in the center. 2 page design query data area data display style:

1. Indefinite Chinese, Indefinite English, Indefinite Chinese and English, Indefinite English number to the left.

2. Fixed length, fixed value data in the center, date, time and serial number in the center.

3. Amount: right 3*** Is there a correct comment in each file header 4 * * * on- Is there a correct comment in each function 5 * * * on- Is there a comment in the related content of each configuration file 6 * * * on- Is there a comment in each logic block 7 * * on- Is there any unused variable and reference 8 * * on in the writing specification?

1. Label names must use lowercase letters, for example

2. For tags that do not need self-closing, self-closing is not allowed, such as input, br, img, hr, etc.

3. The closing tag specified in HTML 5 is not allowed to be omitted. 10 HTML- write standard tag 2:

The use of the 1 tag must conform to the tag nesting rules, for example, P cannot be placed in P, but tbody must be placed in table.

The use of 2.HTML tags should follow the semantics of tags. Public label semantic p segment

H 1, h2, h3, h4, h5, h6- level titles

Strongly emphasize

Ins- insert

Delete-delete

Abbreviation-abbreviation

Code-code identification

Citation-Cites the title of the source work.

Q reference voltage source

A passage or a long quotation

Ul- unordered list

Ordered list

Dl, dt, DD- Define form 1 1 HTML- Write standard attributes:

1. Attribute names must use lowercase letters;

2. Attribute values must be enclosed in double quotes;

3. It is suggested to use xxx- as the prefix of the custom attribute and data- as the prefix, for example

1. Use the DOCTYPE of HTML5 to enable standard mode. It is recommended to use uppercase doctype.

2. The page must contain a title tag to declare the title.

3.3.title must be a direct child of head and immediately follow the charset declaration.

Example "head"

& ltmeta charset =“UTF-8“& gt；

& lttitle & gt page title

& lt/head & gt； 13HTML- write standard code2:

1. Make favicon accessible (put the favicon.ico file in the root directory and use link to specify Favicon).

such as

2. If the project is mobile or responsive, you must specify the viewport of the page.

14 HTML- introduction to writing specifications:

1. rel =“style sheet "must be specified when introducing CSS, for example

2. CSS and JavaScript can be introduced without specifying the type attribute (with default value).

3. Introduce all CSS resources needed by the page into the header, and JavaScript should be placed at the end of the page or loaded asynchronously. (Putting the script in the middle of the page will prevent the page from rendering). 15 HTML- write standard pictures:

The src value of 1.img is forbidden to be empty. The default src should also be added to the pictures with delayed loading (if the src is empty, the page will be reloaded);

2. Avoid adding unnecessary title attributes to img (redundant titles will affect the picture viewing experience and increase the page size);

3. Add alt attribute to important pictures;

4. Pictures with download requirements are realized by img tags, and pictures without download requirements are realized by CSS background images.

16 HTML- write standard format:

1. A control with a text title must be associated with the title with a label label;

2. When using the button element, you must indicate the value of the type attribute;

3. The buttons responsible for the main functions should be placed at the first place in the DOM (this is recommended and depends on the design). 17 HTML- write standard video and audio:

1. Audio and video tags are preferentially used to define audio and video elements in browsers supporting HTML5;

2. Turn on the automatic playback of audio and video only when necessary;

3. Provide a description that the browser does not support tags in object tags, such as

1.class, id must be all lowercase words, and words are separated by-(dash);

2. The class and id must represent the content or function of the corresponding module or component, and shall not be named by using style information, such as left, right, middle, red, black and other words that appear alone in the naming;

3. Classes must have prefixes (to avoid global pollution), such as g- for global style, m- for module style, ui- for component style, etc. , depending on the project regulations;

4. A single style cannot appear! Important;

5.class is not allowed to be used only for JavaScript to select certain elements and create classes without style information (using ID);

6. The element id must ensure that the page is unique;

7. Same page, different labels, avoid using the same name and id (you can use the same label). When a rule contains multiple selectors, each selector declaration must be exclusive to one row. 2 1 CSS- The values in the writing specification property selector must be enclosed in double quotes. For example, enter [name = "ACD"] {} 22 CSS-standardization of writing When the value is a decimal between 0- 1, the integer part of 0 is omitted. For example, opacity. 8 23 The path in the url () function of CSS-write specification is not quoted. For example, the background: URL (bg.png); 24 CSS- When writing the standard length of 0, the unit must be omitted. For example, padding: 0 5px25 css- Code written in canonical style should be saved independently in a file with suffix. Unless there are special circumstances, CSS and interlining styles should not be used. 26 CSS- standard RGB color values must be written in hexadecimal notation #rrggbb. Rgb () is not allowed. 27 CSS- writing standard color:

1.rgb color values must use hexadecimal notation #aabbcc, and RGB () is not allowed;

2. When the color value can be abbreviated, the abbreviated form must be used; Such as #fff, #000

3. Named color values are not allowed for color values; Uncertain values, such as using red and green.

4. All color values are expressed in lowercase English letters. 28 CSS- writing standard font 1:

The font family name in 1 The font-family attribute should use the English family name of the font. If there are spaces, they must be enclosed in quotation marks. Chinese is strictly prohibited. Example font series: "Microsoft Yahei";

Font operating system family name

(Chinese simple) Windows SimSun

Black body (medium easy to black body) Windows SimHei

Microsoft YaHei

Microsoft is invading Windows system.

China black Mac/iOS system

Holly blackbody Mac/iOS Hiragino Sans GB

Wen Quan Yi Zheng Hei Linux Wen Quan Yi Chan Hei

Wen Quan Yi micron black Linux Wen Quan Yi micro black 29 CSS- writing standard font 2:

1.font-family is written in the order of "western fonts come first, Chinese fonts come last" and "fonts with good effect (high quality/more in line with requirements) come first, and fonts with average effect come last". Finally, the general font series (serif/sans serif fonts); Must be specified.

Example of font family: Arial, sans serif font; 30 CSS- write standard font size:

1. The font size of Chinese content displayed on Windows platform shall not be less than12px; ;

2. Don't use abnormal font styles for Chinese content that needs to be displayed on the Windows platform. 3 1 JS- writing specification naming:

Common naming methods: hump named thissinapple, Pascal named thissinapple, underline named this_is_an_apple, underline named this-is-an-apple.

1. Method/property name, variable name, parameter name, namespace and function name must be named by hump;

2. Class names, enumeration names and constructors must be named by Pascal;

3. Constant names and enumeration attributes: All uppercase underlined nomenclature must be used, such as is _ debug _ enabled.

4. Private (protected) members (properties, functions, etc.). ): Must start with underscore _;

5. Boolean types should start with is, has, etc. To indicate its type;

6. Naming also needs to pay attention to semantics, such as using nouns for variable names, verb-object phrases for function names and nouns for class names. The standard JavaScript program written by 32 js should be saved separately in a file with suffix. js。 33 JS- standardization of writing avoids more than 80 characters per line. 34 JS- Writing standardization minimizes the use of global variables and does not allow local variables to overwrite global variables. 35 JS- Whether to use * * * general function when writing normalization can be used. 36 JS- write a normative statement:

1. Each line contains at most one statement. (semicolon) at the end of each simple sentence;

Step 2 return the statement

A return statement with a return value should not use () (parentheses) to enclose the return value. If an expression is returned, it should be on the same line as the return keyword to avoid the mistake of adding points by mistake;

3. Avoid using the continue statement, which can easily obscure the logical process of the program;

4.eval is the most easily abused method in JavaScript, so avoid using it. 37 JS- To write a standard ES5 syntax, the code must be wrapped in an IIFE (function expression called immediately) to create an independent and isolated domain and prevent the global namespace from being polluted. 38 js- Add js strict mode "use strict”39 JS- when writing specification code 39 JS-Write specification variable declaration: When using var or let to declare variables, unspecified variables will be implicitly declared as global variables, which will make it difficult to control variables. 40 JS- program dredge wisely uses the true and false judgment. IF(a = = true) is different from if (a). This judgment will be converted to true or false through special operations, and all the following expressions will return false: false, 0, undefined, null, nan, (empty string). 41js-program dresser avoids creating functions in loops. 42 JS-program dredger avoids declaring functions in statement blocks, which will report syntax errors in strict mode. 43 JS-program dredger uses array and object literals instead of array and object constructors, and array constructors are prone to make mistakes in their parameters. 44 JS- ternary conditional judgment of program dredging (a shortcut method of if), which uses Boolean expression characters to allocate or return statements to avoid using them in complex situations. 45 JS- The program uses single quotation marks (') instead of double quotation marks ('), which is very useful when creating HTML strings, such as

Varmsg =' This is some HTML & ltp class= "makes sense" >. & lt/p & gt； ‘。 46 JS- Program Dredging Don't Spare Programs. The following examples are for reference:

There are unused subroutines.

Repeated initialization

Defining Unused Variables 47 JS- Logical correctness There is no strange logic (null functions and unprocessed branches, etc.). ) 48 JS- The string length of the logical correctness text input box is limited based on two points: 1, whether it is needed in business; 2. Does the database field length meet the logical correctness of 49 JS? After the query is completed, the query conditions should be saved in the corresponding input box. 50 JS- logical correctness sorts the query results. 5 1 JS- Logical correctness The number of * * in the query area should be the total number of all data currently queried. After removing the leading and trailing spaces, you should query the 52 JS- logical correctness query condition input box, not the number of articles displayed on the current page.

I believe you have mastered the method after reading this case. For more exciting, please pay attention to other related articles on Gxl!