Web front-end code specifications and page layout_html/css

1. Purpose of specification:

In order to improve work efficiency, facilitate back-end personnel to add functions and front-end post-optimization and maintenance, output high-quality documents, and make the structure more efficient during website construction. It is clear, the code is concise and orderly, and it has a better front-end architecture, which is conducive to SEO optimization.

2. Basic guidelines for specifications:

Comply with web standards, use semantic tags to separate structure, performance, and behavior, have excellent compatibility, and optimize page performance. The code is concise, clear and orderly, reducing the load on the server as much as possible and ensuring the fastest parsing speed.

3. File specifications:

HTML, css, js, and images files are all archived in the agreed directory.

1. html

(1) Encoding: All encodings use xhtml, tags must be closed, attribute values are included in double quotes, and the encoding is unified to utf-8.

(2) Semanticization: Semantic html, use tags correctly, and make full use of html's own tags without compatibility issues.

(3) File naming: Name it in Chinese and name it according to the actual module. For example, the same module is named with _&title&_ to facilitate finding the corresponding page when adding functions.

(4) The content of the file header

title, you need to add the title

Encoding charset=UTF-8

Cache:

Content='-1' means it will expire immediately.

Add description and keywords content

The Robots content section has four command options: index, noindex, follow, nofollow, separated by ',', such as:

in the head Introducing css files in tags will help page rendering

When introducing style files or JavaScript files, the default type declaration must be omitted.

Introducing javascript files in the footer

( 5) Connection address tag: When writing the link address, avoid redirection, such as href="http://www.100sucai.com/", you need to add '/' after the address

(6) Try to be as specific as possible Reduce div nesting, such as: use h1-6 tags according to importance, use p for paragraphs, use ul for lists, block-level elements cannot be nested in inline elements, and add label

(7) Pictures

Pictures that can be presented as backgrounds should be written into css styles as much as possible

Distinguish between pictures as content and pictures as background. Pictures as background should be used Css sprite technology, put it in a large picture

Important pictures must be added with alt attributes, and add titles to important elements and truncated elements

(8) Comment: Give block code Add comments to important functions to facilitate adding functions in the background

(9) Escape characters: Use escape characters for special symbols

(10) Consider scalability when designing the page

2. Css

(1) Try to avoid using the style attribute inside the page

(2) css is placed in the head tag and introduced by the link tag to make the page Separation of structure and performance.

(3) File naming: named in English, suffix .css, common: base.css, homepage: index.css, other page styles are named according to specific module requirements

(4) Coding Unified to utf-8

(5) Use of Class and id:

Id: unique, parent, used to identify specific elements on the page, such as header/footer /wrapper/left/right and the like

Class: can be reused, is a child, and can be used for any number of elements on the page

Naming: a combination of lowercase English letters, numbers, and underscores When naming, avoid using Chinese pinyin, try to use simple word combinations, avoid using pinyin, and use camel case naming and underline naming to improve readability, such as: dropMenu, sub_nav_menu, drop-menu, etc.

(6) Name the hooks reserved for JavaScript, starting with js_, such as: js_hide, js_show

(7) Before writing code, consider the style reuse rate and make full use of HTML's own attributes and style inheritance principles to reduce the amount of code. It is recommended to write the code in a single line to facilitate later management

(8) Pictures

Naming: A combination of lowercase English letters, numbers, and _. Use a meaningful name or English abbreviation. It is best not to use Chinese pinyin and distinguish between uppercase letters.

Use sprite technology to reduce http requests, sprites are made according to modules

(9) Writing order: Ensure that attributes of the same type are written together, generally follow the layout positioning attributes?>Self attributes? >Text attribute?>Writing format of other attributes

(10) Writing order rules

Positioning attributes (such as: display, position, float, clear, visibility, table-layout, etc.)

Own properties (such as: width, height, margin, padding, border, etc.)

Text properties (such as: font, line-height, text-align, text-indent, vertical-align etc.)

Other attributes (such as: color, background, opacity, cursor, content, list-style, quotes, etc.)

(11) Indentation: Use tabs for indentation

(12) It is best to convert the Chinese font name in the style sheet into unicode code to avoid garbled characters when encoding errors occur.

(13) Reduce attributes that affect performance, such as: position, float

(14) Add comments to large block styles and appropriate comments to small blocks.

3. Javascript

(1) The file encoding is unified to utf-8. When writing, there must be a semicolon ';' at the end of each line of code, try to meet the needs Write native code development to avoid problems such as code pollution (redundant code || conflicts with existing code || ...)

(2) Introduce javascript scripts in the footer and use external links to introduce them. Separate the structure and behavior of the page

(3) Naming:

File naming: named in English, with a suffix of .js, common: common.js, other names can be named according to module requirements

Variable naming: camel case naming. Native JavaScript variables are required to be pure English letters, and the first letter must be lowercase, such as iTaoLun. Centralized declaration of variables, avoid global variables

Class naming: capitalize the first letter, camel case naming . Such as ITaoLun;

Function naming: lowercase camel case naming. Such as iTaoLun();

Semantic naming, use English words or their abbreviations as much as possible;

(4) Rules

Try to avoid using methods that are incompatible and consume resources Or attribute

In the later optimization, JavaScript non-annotation Chinese characters must be converted into unicode encoding to avoid garbled display when encoding errors occur.

The code structure is clear and appropriate comments are added. Improve function reuse rate

Focus on separation from html, reduce reflow, and focus on performance.

4. Comment specifications

(1) html: comment format, "- ” can only be placed at the beginning and end of the comment, and cannot be placed in the comment text area

(2) Css: comment format

(3) Javascript: single-line comment: //Here is a comment, multi-line Notes:

5. Css Hack Special symbols

(1) *: IE6/7 can recognize *, standard browsers do not recognize

(2)_: Only IE6 recognizes

(3)! Important: Not recognized by IE6, but recognized by Firefox, IE7/8/9, Chrome and other mainstream browsers

(4) 9: Recognized by all browsers, including IE6/7/8

(5): IE6/7/8 recognition

(6) Writing order: first write the styles required by non-IE browsers such as FF, then IE8, then IE7, and finally IE6

4. Adaptive page layout (the main platforms are ios and Android, so IE compatibility is not considered)

1. Layout details

First, add meta to the head New tag

, so that the web page width is equal to the screen width by default, and the original scaling ratio is 1.0, that is, 100% display.

Position: Absolute positioning cannot be used

Width: px width cannot be used, percentage or auto should be used

Font: Absolute size cannot be used, em should be used

2. The use of float in flow layout

The position of each block is floating and not fixed. The advantage of float is that if the width is too small to fit two elements, the following element will automatically scroll to the bottom of the previous element without overflowing in the horizontal direction, thus avoiding the appearance of horizontal scroll bars.

3. The Media Query module introduced by CSS3 can automatically detect the screen width and load the corresponding CSS file

, the screen width is less than 400 pixels (max-device-width : 400px), load the tinyScreen.css file

, if the screen width is between 400 pixels and 600 pixels, load the smallScreen.css file.

@importurl("tinyScreen.css") screen and (max-device-width: 400px);

In the same CSS file, you can also choose to apply it according to different screen resolutions Different CSS rules.

@media screen and (max-device-width: 400px) {

　　.column {

　　 float: none;

　　 width: auto;

　　}

Reprinted from: http://blog.sina.com.cn/s/blog_6c2f334c01018rmz.html