Home > Developer > Web Develop
Keeping good programming habits and complying with code specifications is a required course for every coder. This is where the Web front end specification (i) begins.
Filename
1 All filenames should follow the same naming conventions.
2 The file name starts with a lowercase letter, avoiding the beginning of the number
3 file names preferably all lowercase letters, if divided into several parts, the "-" split open.
4 If some of the sections are extensions as a file, use "." To connect. Example: My-validate.min.js.
Not recommended:
MyScript.jsmyCamelCaseName.cssi_love_underscores.html1001-scripts.jsmy-file-min.css
推荐：
my-script.jsmy-camel-case-name.cssi-love-underscores.htmlthousand-and-one-scripts.jsmy-file.min.css
链接名
我们一般忽略不写协议（http: https:）对于图片链接，a标签，或者其他媒体元素。当然如果如果不是这两种协议，需要写上。
Not recommended:
{ background: url (http://static.example.com/images/bg.jpg);}<script src= "Http://cdn.com/foundation.min.js" ></script>
Recommended:
{ background: url (//static.example.com/images/bg.jpg);}<script src= "//cdn.com/foundation.min.js" ></script>
Comments:
Note Be sure to write clearly the intent of the code, so that the reason for writing, and so on, rather than a few simple logo, and finally don't know what it means
Not recommended:
{ //Add offset of + offset =;}Recommended:
var offset = 0;if(includeLabels) { // If the labels are included we need to have a minimum offset of 20 pixels // We need to set it explicitly because of the following bug: http://somebrowservendor.com/issue-tracker/ISSUE-1 offset = 20;}
Formal section of HTML specification
Use the HTML5 text type declaration. <! DOCTYPE html>
Do not close tags without content, such as <br> instead of <br/>.
Use valid and correct HTML elements
Not recommended:
< title > Test</title><article>This was only a test.
Recommended:
<! DOCTYPE HTML > < charset= "Utf-8"><title>Test< /title><article>This was only a test. </ article >
Script loading:
The script file is generally placed at the bottom of the body, in addition to some modern browsers.
Modern browsers allow:
<HTML> <Head> <Linkrel= "stylesheet"href= "Main.css"> <Scriptsrc= "Main.js"Async></Script> </Head> <Body> <!--body goes here - </Body></HTML>
All browsers:
<HTML> <Head> <Linkrel= "stylesheet"href= "Main.css"> </Head> <Body> <!--body goes here - <Scriptsrc= "Main.js"Async></Script> </Body></HTML>
Promote the labelling of expressions
Not recommended:
<div class= "Head" > Head </div>
<div class= "Body" >body</div>
<div class= "foot" > Tail </div>
Recommended:
< Header > head </header> <article> body </ article > < Footer > tail </footer>
Supplemental display of multimedia file load failure.
Not recommended:
<src= "luke-skywalker.jpg">
Recommended:
<src= "luke-skywalker.jpg" alt= "Luke Skywalker riding an alien horse ">
Do not use more than two style sheets
Do not use more than two script files (learn to script merge)
Do not use inline styles <style>.no-good {}</style>
Do not use an internal style
Do not use inline scripting ( <script>alert(‘no good‘)</script> )
Don't let non-content information pollute your HTML and disrupt the HTML structure. Instead, use before: pseudo-class elements
Not recommended:
<!-- We should not introduce an Additional element just to solve a design problem --> < span class = "Text-box" > < span class = "square" ></ span > See the square next to me? </ span >
. text-box >. square { display:inline-block; Width:1rem; Height:1rem; background-color:red;}Recommended:
<!---<class= "Text-box"> See the square next to me? </ span >
We use A:before pseudo element to solve the design problem of placing a colored square in front of the text Content.te Xt-box:before { content: ""; Display:inline-block; Width:1rem; Height:1rem; background-color:red;}Type property
Not recommended:
<rel= "stylesheet" href= "main.css" type= "text/ CSS "><src=" main.js " type=" text/ JavaScript "></script>
Recommended:
<rel= "stylesheet" href= "Main.css">< src = "main.js" ></script >
Formatting rules
After each block element, list element, and table element, add a new blank line and indent its descendant elements. Inline elements are written on one line, and block elements have lists and tables to be added to another line.
(It is acceptable to merge all elements into one row if the line breaks cause an unpredictable problem, and the format warning is better than the error warning).
Recommended:
<blockquote> <P><em>Space</em>, the final frontier.</P></blockquote><ul> <Li>Moe</Li> <Li>Larry</Li> <Li>Curly</Li></ul><Table> <thead> <TR> <thScope= "Col">Income</th> <thScope= "Col">Taxes</th> </TR> </thead> <tbody> <TR> <TD>$5.00</TD> <TD>$4.50</TD> </TR> </tbody></Table>
Use double quotation marks
Not recommended:
<class= ' news-article '></div>
Recommended:
<class= "News-article"></div>
At this point in the HTML section of the specification has been written, of course, different companies have different specifications, specific circumstances specific analysis.
Original address: Https://github.com/gionkunz/chartist-js/blob/develop/CODINGSTYLE.md
NEC Specification: Http://nec.netease.com/standard
Web Front End Specification (i)--html specification
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
