Home > Developer > Web Develop
Look at Google's HTML, CSS code specifications, simple to make a record.
The part of omitting the http: or https: in your ur address can be done when referencing stylesheets, script files, pictures, and other media files, unless you have access to resources using either of these protocols, that is, you must use other protocols to obtain resources. cannot be omitted, only http: and https: can be omitted. The advantage of this is that it reduces the size of the file and avoids the problem of confusion in relative URLs.
<!--not recommended--><script src= "Http://www.google.com/js/gweb/analytics/autotrack.js" ></script><!-- Recommended--><script src= "//www.google.com/js/gweb/analytics/autotrack.js" ></script>/* not recommended */.example { Background:url (http://www.google.com/images/example);} /* Recommended */.example { background:url (//www.google.com/images/example);}Second, the common code style
1. Indent two spaces at a time, do not indent using the TAB key, and do not mix tab and space to indent. It's good to simply indent with a space.
<ul> <li>fantastic <li>great</ul>.example { color:blue;}2. Use lowercase only, including the label signature, attribute name, attribute value (except for some customizable string property values)
<!--not recommended--><a href= "/" >Home</A><!--recommended-->
Iii. General meta-rules
1. Make sure your IDE uses UTF-8 encoding to save the file, and do not bring the BOM. Use <meta charset= "Utf-8" > when defining the encoding of the page. There is no need to declare UTF-8 code in the stylesheet file.
2. Annotate the place where it needs to be.
3, use TODO to mark the code in need of perfect place
<!--todo:remove Optional tags--><ul> <li>Apples</li> <li>oranges</li ></ul>
Iv. rules for the writing of HTML
1. Document type. The HTML5 document type applies to all HTML documents: <!doctype html>. Also, it's best to use HTML instead of XHTML.
2, the use of standardized HTML, and the use of the HTML validator and other tools to detect.
<!--nonstandard--><title>test</title><article>this is only a test.<!--specification--><! DOCTYPE html><meta charset= "Utf-8" ><title>test</title><article>this is only a test.</ Article>
3. Use semantic HTML tags to select tags according to their purpose.
<!--not recommended--><div onclick= "gotorecommendations (); >all recommendations</div><!--recommended--><a href= "recommendations/" >all recommendations</a>
4, the multimedia elements of the known. Like pictures, videos, animations and other multimedia elements, to have relevant text to reflect its content, such as can use the ALT attribute to say the picture content.
<!--not recommended--><!--recommended-->
5, to ensure that the structure of the page, style, behavior of the three-phase separation. Make sure that the document or template contains only HTML, write the style used in the style sheet file, and write the script to the JS file. This is very important when collaborating with multiple people.
<!--not recommended--><! DOCTYPE html><title>html sucks</title><link rel= "stylesheet" href= "base.css" media= "screen" > <link rel= "stylesheet" href= "grid.css" media= "screen" ><link rel= "stylesheet" href= "Print.css" media= "print" >6, optimize the label. Some labels do not need to be used, can be less. You can refer to HTML5 specification to know which tags are necessary and which are superfluous.
<!--not recommended--><! DOCTYPE html>7. Omit the type attribute of <style> and <script>
the formatting of HTML code .
1. A new row for each block-level element or TABLE element label, and indentation for each child element
<blockquote> <p><em>space</em>, the final frontier.</p></blockquote>< ul> <li>moe <li>larry <li>Curly</ul><table> <thead> <tr> <th scope= "col" >income <th scope= "col" >taxes <tbody> <tr > <td>$ 5.00 <td>$ 4.50</table>Vi. rules for the writing of CSS
1, the use of legitimate, normative CSS, can be verified by the CSS validator.
2. The name of the ID and class is as short as possible and conforms to the semantics.
/* Not recommended */#navigation {}.atr {}/* recommended */#nav {}.author {}3. Use multiple selectors or descendant selectors sparingly, as this can affect performance.
/* Not recommended */ul#example {}div.error {}/* recommended */#example {}.error {}4. Use combination attributes. CSS provides a number of places where you can combine attribute ligatures. such as font,margin,padding and so on.
/* Not recommended */border-top-style:none;font-family:palatino, Georgia, serif;font-size:100%;line-height:1.6; padding-bottom:2em;padding-left:1em;padding-right:1em;padding-top:0;/* Recommended */border-top:0;font:100%/1.6 Palatino, Georgia, serif;padding:0 1em 2em;5. If the value of the CSS property is 0, do not bring the unit back. Unless it's really needed.
margin:0;padding:0;6. Omit the 0 in front of the decimal. For example, 0.8 can be written. 8
7. Do not enclose the value of the URI type in quotation marks. For example @import URL (//www.google.com/css/go.css);
8. If possible, use a hexadecimal number of 3 characters.
/* Not recommended */color: #eebbcc;/* Recommended */color: #ebc;9. Use a specific prefix
. adw-help {}/* AdWords */#maia-note {}/* Maia */10. Use in ID and class-as hyphens.
/* Not recommended:does separate the words ' demo ' and ' image ' */.demoimage {}/* not recommended:uses underscore inst EAD of hyphen */.error_status {}/* Recommended */#video-id {}.ads-sample {}11, avoid using CSS hack, first consider using another method of writing to solve.
Vii. CSS Formatting rules
1, in alphabetical order to the CSS property declaration, but some browser's private prefix can not be counted in.
background:fuchsia;border:1px Solid;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;color: Black;text-align:center;text-indent:2em;2. Indent the statement in {}.
@media screen, projection { HTML { background: #fff; Color: #444; }}3, each CSS property declaration to use a semicolon, even the last one.
/* Not recommended */.test { display:block; height:100px}/* Recommended */.test { display:block; height:100px;}4. Use a space after the colon immediately following the property name
/* Not recommended */H3 { font-weight:bold;} /* Recommended */h3 { font-weight:bold;}5, each CSS selector or attribute declaration to a new row.
/* Not recommended */a:focus, a:active { position:relative; top:1px;} /* Recommended */h1,h2,h3 { font-weight:normal; line-height:1.2;}6. There should be a blank line between each CSS rule
HTML { background: #fff;} body { Margin:auto; width:50%;}Personally, the code specification of this kind of thing is a matter of opinion, the purpose is to better team cooperation and ensure the quality of the code, in the actual use of the situation is still practical.
More details: http://www.cnblogs.com/2050/archive/2012/04/26/2470947.html
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
