Organize website front-end development (File, html, js, css) standard documents

My vision

Become an industry-renowned web front-end development engineer

Sort out some front-end development standard documents

This document has been written for almost a year, and has been updated recently. As an organized and disciplined team, standardization is necessary, after all, each coder has its own set of styles and specifications. For the harmonious development of the team and the development experience of the front-end industry, a relatively large and concise document is written, I hope to inspire you. The following is a brief excerpt from my document. For details, you can download the PDF document at the bottom of this article.

Part 1: Document specifications

1. All tpl, css, js, and imgfiles are archived in the <system development Specifications> agreed directory;

2. tpl File name: English name, suffixed with. Html. Rename the same name as the php file so that you can find the corresponding page when adding functions to the backend;

3. css file name: English name, suffixed with. css. Base.css, index.css on the first page, and other pages are named according to actual module requirements .;

4. Js file name: English name, suffix. js. Share common. js, other names according to actual module requirements.

Part 2: HTML writing specifications

1. Document type declaration and encoding: all types are html5 declaration types, while all types are encoded. IDE is used for hierarchical indentation during writing;

2. In special cases, style files must be external links to

3 introduce JS library file, file name must contain Library name and version number and whether it is compressed version, such as jquery-1.7.1.min.js; introduce plug-in, file name format for library name + plug-in name, such as jQuery. cookie. js;

4. All codes follow the xhtml standard. The tag & attribute naming must consist of lower-case letters and underline numbers, and all tags must be closed. The attribute values must be enclosed in double quotation marks;

5. make full use of html tags without compatibility issues, such as span, em, strong, optgroup, and label. When you need to add custom attributes to html elements, first, consider whether there are existing appropriate labels by default. If not, you can add custom attributes with the prefix "data-" to avoid using "data: "And other naming methods;

6. Semantic html. For example, if the title uses h based on importance (only one h1 can be found on the same page), p is used for Section marking, ul is used for the list, and block-level elements cannot be nested in inline elements;

7. Minimize div nesting

8. Avoid redirection when writing the link address. For example, href = "http://www.example.com/" must be added after the URL address.

9. Avoid using the style attribute on the page, that is, style = "...", Try to use the class or id to define a new style, and then modify it in the corresponding css file;

I. Webpage creation details

---- Head code specification

The head area refers to the content between Tags that must be added:

• Company copyright note <! --- The site is designed by EHM, Inc 07/2005 --->;
• Web page display character set.
<META HTTP-EQUIV = "Content-Type" CONTENT = "text/html; charset = gb2312">
Traditional Chinese: <META HTTP-EQUIV = "Content-Type" CONTENT = "text/html; charset = utf-8">
English: <META HTTP-EQUIV = "Content-Type" CONTENT = "text/html; charset = utf-8">
• Webpage producer information <META name = "author" content = "webmaster@maketown.com">
• Website introduction <meta name = "DESCRIPTION" CONTENT = "xxxxxxxxxxxxxxxxxxxxxxxxxx">
• Search keywords <meta name = "keywords" CONTENT = "xxxx, xxxx, xxx, xxxxx, xxxx,">
• Css specifications for web pages <LINK href = "../css/style.css" rel = "stylesheet" type = "text/css">
• Webpage title <title> xxxxxxxxxxxxxxxxxx </title>
You can select the added tags:
• Set the expiration time of the webpage. Once the webpage expires, you must re-access it on the server.
<META HTTP-EQUIV = "expires" CONTENT = "Wed, 26 Feb 1997 08:21:57 GMT">
• Prohibit the browser from reading the page content from the cache on the local machine.
<META HTTP-EQUIV = "Pragma" CONTENT = "no-cache">
• It is used to prevent others from calling your page in the framework.
<META HTTP-EQUIV = "Window-target" CONTENT = "_ top">
• Automatic jump.
<META HTTP-EQUIV = "Refresh" CONTENT = "5; URL = http://www.yahoo.com"> 5 stands for 5 seconds
• Web search robot wizard. It is used to tell the search robot which pages need to be indexed and which pages do not need to be indexed.
<Meta name = "robots" CONTENT = "none"> The CONTENT parameters include all, none, index, noindex, follow, and nofollow. The default value is all.
• Favorites icon www.111cn.net
<Link rel = "Shortcut Icon" href = "favicon. ico">
• Try to use external calls for all javascript calls.
<Script language = "JavaScript" SRC = "script/xxxxx. js"> </SCRIPT>
• Attached <body> label:
<Body> The tag does not belong to the head area. To ensure browser compatibility, you must set the page background. <body bgcolor = "# FFFFFF">

II. Webpage creation details-fonts

• CSS style sheets must be used for text font size styles and row spacing when setting font styles. <Font size =?> Mark.
• Is preferred for Chinese characters on webpages. Verdana and arial fonts are preferred for English and numbers. Generally, the 9pt, 11pt, 12px, and 14.7px characters of the Chinese are used. This is the optimized font size. When the Chinese characters are bold, the font sizes of 11pt and 14.7px are generally used.
• To maximize the browser's automatic layout function, do not use <br> to manually intervene in segments in a complete text segment.
• There should be a half-width space between texts of different languages, except for the characters before and after the headers. The punctuation between Chinese characters must be full-width punctuation, parentheses should be around English letters and numbers.
• Do not show more than one character in a webpage or use as few full-angle spaces as possible (in the English character set, full-angle spaces will become garbled characters). Try to use text-indent and padding for blank spaces, this is achieved by using margin, hspace, vspace, and transparent gif images.
• Percentage is recommended for line spacing. The commonly used two line spacing values are line-height: 120%/150%.
• In typographical layout, we often encounter the need to indent the first line. Do not use spaces or full-angle spaces to achieve the effect. The standard approach is to define p {text-indent: 2em;} in the style sheet ;} then add the <p> flag to each segment. Note that, in general, do not omit the </p> end mark.

3. Webpage creation details-links

• All links on the website use relative paths. Generally, you do not need to write the full name for the link paths of the default files linked to a directory. For example, we do not need: <a href = "aboutus/index.htm"> This should be the case: <a href = "aboutus/">. All links to the home page are written as <a href = "/">
• In the browser, when we click the blank link, it will automatically reset the current page to the first end, thus affecting users' normal reading content. We use the code "javascript: void (null) "replaces the original" # "mark
4. Webpage creation details-table
1px table style = "border-collapse: collapse"
Example:
<Table border = "1" cellspacing = "0" width = "32" height = "32" style = "border-collapse: collapse "bordercolor =" #000000 "cellpadding =" 0 ">
<Tr>
<Td> </td>
</Tr>
</Table>
Set the color of the highlighted or hidden border: The table has two attributes: bordercolorlight and bordercolordark.
<Table border = "1" width = "500" bordercolorlight = "#000000" bordercolordark = "# FFFFFF">

When writing <table> nesting to each other, strictly follow the rules. For a single <table>, <table> <tr> alignment and <td> indent two spaces, <td> if there are nested tables, <table> also indent two spaces. If <td> does not contain any nested tables, </td> The end mark should be in the same line as <td>. Do not wrap the line. For example, note that such code should not be included in the source code:
<Td> </td>
It should be like this:
<Td> </td>
This is because the browser thinks that the line feed is equivalent to a half-width space. The above nonstandard writing method is equivalent to inadvertently adding a half-width space. If it is necessary to add a half-width space, it should also be written as follows:
<Td> </td>
A webpage should try to avoid using the entire large table. All content is nested in this big table, because the browser displays the elements of the page one by one in units of tables when interpreting the page, if a webpage is nested in a large table, the possible consequence is that when a visitor clicks the website, he must first face a blank area for a long time, then all the webpage content appears at the same time. If this is required, use the <tbody> flag to enable the large table to be displayed in blocks.
5. Webpage creation details-download speed
The size of the Flash webpage on the home page should be limited to less than 200 KB, and vector graphics and actions should be used as much as possible to reduce the animation size. The size of a non-homepage static page containing images should be limited to around 70 kb. Use the background color as much as possible to replace a large image with the same color.
 
6. Webpage creation details ---- include

Asp standard syntax: <! -- # Include file = "inc/index_top.asp" -->
Standard jsp syntax: <% @ include file = "../inc/index_top .. jsp" %>
 
7. Webpage creation details ---- Alt and Title
All are prompt language labels. Pay attention to the differences between them.

When we browse a webpage, when you move your cursor over an image object or text link, a prompt box is displayed in the lower right corner of the mouse. Comment on the target. In some cases, its role is very important.
Alt is used to prompt the image. Title is used to prompt link text or common text. The usage is as follows:
<P Title = "link text prompt"> text </p>
<A href = "#" Title = "link text prompt"> text </a>

8. Webpage creation details-cache
The webpage will not be cached
• HTM webpage
<META HTTP-EQUIV = "pragma" CONTENT = "no-cache">
<META HTTP-EQUIV = "Cache-Control" CONTENT = "no-cache, must-revalidate">
<META HTTP-EQUIV = "expires" CONTENT = "0">
• ASP webpage
Response. Expires =-1
Response. ExpiresAbsolute = Now ()-1
9. Webpage creation details-browser compatibility
When creating a site, you should understand that visitors may use various Web browsers. If other design restrictions are known, design the site as best as possible with the maximum browser compatibility.

Currently, more than 20 Web browsers are used, and most of them have released multiple versions. Even if you are only targeting most Web users using Netscape Navigator and Microsoft Internet Explorer, it is clear that not everyone is using the latest versions of these two browsers.

The more complex your site (in terms of layout, animation, multimedia content, and interaction), the less likely cross-browser compatibility. For example, not all browsers can run JavaScript. Plain text pages without special characters may be correctly displayed in any browser, but such pages are more aesthetic than those that effectively use graphics, la S, and interactions. Therefore, try to strike a balance between the best effect design and the maximum browser compatibility design.
All attributes of HTML tags must be enclosed in single or double quotation marks. That is, we should write <a href = "url"> instead of <a href = url>.
10. Image processing details ---- banner
• The full-size banner is 468X60px, the half-size banner is 234X60px, and the small banner is 88X31px.
• 120X90,120X60 is also the standard size for small icons. The full size banner cannot exceed 14 K.
• Universal banner size 760X100,750X120,468X60,468X95,728X90,585X140 X
• Pip size of the secondary page: 360X300,336X280
• Cursor: 100X100 or 120X120
11. Image processing details-International LOGO standards
To facilitate the dissemination of information on the INTERNET, a unified international standard is required. In fact, we already have such a set of standards. There are currently three types of website logos:
• 88*31 This is the most common LOGO specification on the Internet.
• The 120*60 type is used for general LOGO sizes.
• The 120*90 specification is used for large LOGO.
12. Image processing details-page-based image processing
Images are optimized to accelerate the download speed and have a better visual space effect. The use of images must be consistent with the page style and content. The images are beautifully crafted and the details are properly handled.

Part 3: CSS specifications

1. The encoding is UTF-8;

2. Public files: in the collaborative development process, base.css will be introduced (including css reset、's commonly used css, css, css, and details can be found in base.css );

3. class and id Naming: The style names are in combination with lower-case English letters, numbers, and _, such as I _comment, fontred, and width200. Do not use Chinese pinyin and try to use simple word combinations; naming should be semantically and concise.

4. Reserve the hook name for JavaScript. Use the id attribute whenever possible to get the dom faster.

5. css attributes are written in sequence. We recommend that you choose layout positioning attributes> text attributes> other attributes. this article can be written according to your habits, but try to ensure that similar attributes are written together. attribute list: layout positioning attributes include: display, list-style, position (corresponding top, right, bottom, left), float & clear, visibility, and overflow; attributes include width, height, margin, padding, border, and background. Text attributes include: color, font, text-decoration, text-align, vertical-align, white-space, and other content; the attributes I list are only the most commonly used and do not represent all;

6. Before writing the code, consider and improve the style reuse rate;

7. Use sprite technology as much as possible to reduce http requests. sprite is made by module considering collaborative development by multiple people;

8. You must add comments to the large block style and comments to the right of the block;

9. Code indentation and format: it is recommended to write a single line, which can be handled in a unified manner according to your habits;

Common CSS naming rules
Header: header
Content: content/container
End: footer
Navigation: nav
Sidebar: sidebar
Column: column
Overall page peripheral control? Why? Rapper
Left right center
Logon entry: loginbar
Logo: logo
Advertisement: banner
Page Subject: main
Hotspot: hot
News: news
Download: download
Subnavigation: subnav
Menu: menu
Sub Menu: submenu
Search: search
Link: friendlink
Footer: footer
Copyright: copyright
Scroll: scroll
Content: content
Tags: tags
Article list: list
Message: msg
Tips: tips
Topic title: title
Join: joinus
Guide: guide
Service: service
Registration: regsiter
Status: status
Vote: vote
Partner: partner

Annotation syntax:
/* Header */
Content area
/* End Header */

Id:
1) page structure

Container: container
Header: header
Content: content/container
Page Subject: main
Footer: footer
Navigation: nav
Sidebar: sidebar
Column: column
Overall page peripheral control? Why? Rapper
Left right center

(2) navigation

Navigation: nav
Main Navigation: mainnav
Subnavigation: subnav
Top navigation: topnav
Side navigation: sidebar
Left navigation: leftsidebar
Right navigation: rightsidebar
Menu: menu
Sub Menu: submenu
Title: title
Abstract: summary

(3) functions

Logo: logo
Advertisement: banner
Login: login
Logon entry: loginbar
Registration: register
Search: search
Functional area: shop
Title: title
Join: joinus
Status: status
Button: btn
Scroll: scroll
Mark? Page: tab
Article list: list
Message: msg
Current: current
Tips: tips
Icon: icon
Note: note
Guide: guild
Service: service
Hotspot: hot
News: news
Download: download
Vote: vote
Partner: partner
Link
Copyright: copyright

Note ::
1. All are in lower case;
2. Try to use English;
3. Do not add ?? And underline;
4. Try not to be abbreviated, except words that can be understood without looking at them.

 

CSS style sheet file name
Main master.css
Module module.css
Basic shared base.css
Layout.css
Themes.css
Columns.css
Text font.css
Form forms.css
Patch mend.css
Print print.css

Part 4: JavaScript specification

1. the file encoding is UTF-8, and the writing process is too long. Each line of code must end with a semicolon. In principle, all functions are developed based on the requirements of the XXX project, to avoid code contamination caused by code falling down from the Internet (redundant code | conflicts with existing code | ...);

2. Library introduction: in principle, only the jQuery library is introduced. If you need to introduce a third-party library, you must discuss and decide with other team members;

3. Variable naming: Camper naming. Native JavaScript variables must be letters only and the first letter must be lowercase, such as iTaoLun;

In addition, variables must be declared in a centralized manner to avoid global variables.

4. Class Naming: The first letter is in upper case, and the camper name, for example, ITaoLun;

5. Function naming: name the first letter in lower case. For example, iTaoLun ();

6. Name semantics. Use English words or abbreviations as much as possible;

7. Avoid using methods or attributes with compatibility and resource consumption, such as eval_r () & innerText;

8. During later optimization, Chinese characters in the JavaScript non-annotation class must be converted to unicode encoding to avoid garbled display during encoding errors;

9. The code structure is clear, and a proper amount of comments are added to improve the function reuse rate;

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

Part 5: Image specifications

1. each module adds an image folder for later maintenance and processing. Put images of the same module in the same folder. The image file name should be the same as that of the css file, use lower-case names as much as possible.

2. The image format is limited to gif | png | jpg;

3. the name must be a combination of lower-case English letters | numbers |-(unified use of strikethroughs), which cannot contain Chinese characters | space | special characters; easy-to-understand words, to facilitate other members of the team to understand; in addition, the name is divided into the first two parts, separated by a line, such as ad-left01.gif | btn-submit.gif;

4. Select the minimum image format and quality to reduce the loading time while ensuring the visual effect;

5. Avoid using translucent png images as much as possible (for details, refer to the css specifications );

6. Use css sprite technology to centralize small background images or icons to reduce http requests on pages.

Part 6: annotation specifications

1. html comment: The comment format can only be at the beginning and end of the comment, and cannot be placed in the comment text area;

<! -- Header --> <! -- // The header --> is enclosed. Make sure to separate the comments (that is, adding spaces to the comments)

2. css annotation: annotation format ;/**/

3. For JavaScript comments, use '// Here is a single line Comments' for single line comments, and use multiple lines of comments ;/**/

Part 7: development and testing tool conventions (see the document, the same below)
Part 8: other specifications
Part 9: css hack
Document description