Front-end code specification

` ` ` ` ` `Copy the code

html

1. Labels must be closed whether single label or double label.

<img/> // single <head></head> // doubleCopy the code

2. Use semantic tags that conform to browser specifications

Title h1 - h6 a link address address articles article sidebar value main body in the head at the bottom of the header footer code text code drop-down list datalist | select img box input output images Form the form list ul | ol inline text navigation nav piece of text p plate section table time time span form page title title buttonCopy the code

Some of the tags are new additions to HTML5, so younger versions of browsers won’t be compatible. Will be parsed to div display by lower browsers.

  1. Js files and CSS files are introduced by the outer chain, CSS in the head, JS at the end of the body.

  2. Order of tag attributes

  • class
  • id
  • src, for, type, href, value
  • placeholder, title, alt
  • data-*
  • Required, Readonly, and disabled

  1. Id, class name

    1. Use content related names such as nav, name, user, manager

    1. Use lowercase letters and connect multiple words with “-“. right-nav

    3. Avoid nonconforming words wenzhang,banner,youxi

  2. Inline labels do not contain block-level labels. Block-level labels can contain inline and block-level labels.

    Inline tags: span, b, a, img, time, code, em, input, select, sup, sub, textarea, label

    Block-level tags p, div, ul, address, menu, form, table, h1 – h6, hr, section, nav, header, footer

css

  1. Attribute order
  • Positioning properties: the position, top, left, right, bottom, z – index, the display,
  • Box attributes: width, height, margin, padding, border, background, float, overflow, border – the radius
  • Font-family: arial, sans-serif, sans-serif, sans-serif, sans-serif…
  • Other attributes: box – shadow, transform, animation, opaticy,

  1. Attribute shorthand

    Margin-left: 10px;

    Margin-left: 0; margin-left: 0; margin-left: 0;

    Margin: 0 0 0 10px;

    Abbreviation color: #333 for the same color value

  2. The animation @keyForm is written at the top and the media query is written at the bottom.

js

1. The file name depends on the module or page

2. Variables must be declared before being used

3. End with a semicolon (;)

Var a = 1; Function a() {}; // call a(); // return return;Copy the code

4. It is best to include functions in scope blocks to prevent global contamination

; {}Copy the code

5. The function must have a return object, and the switch loop must have a default return

switch(name) {
    case 'a':
    
        break;
    default: 
        return '';
};

function a() {
    return '';
}
Copy the code

  1. Code formatting, clean specification

  2. Function names use the hump method