看了一下google的html、css代碼規範,簡單的作下記錄。
一、省略ur地址中的 http: 或 https: 的部分 , 在引用樣式表檔案、指令檔、圖片以及其它媒體檔案時，都可以這樣做，除非使用這兩種協議都無法擷取到資源，也就是說必須使用其它協議才能擷取到資源的，就不能省略啦，只有http:和https:是可以省略的。這樣做的好處是能減少檔案的體積，而且還能避免一些相對url中混亂問題的產生。
<!-- 不推薦 --><script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script><!-- 推薦 --><script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>/* 不推薦 */.example { background: url(http://www.google.com/images/example);}/* 推薦 */.example { background: url(//www.google.com/images/example);}
二、通用代碼風格
1、每次縮排兩個空格，不要使用tab鍵進行縮排，也不要把tab鍵以及空格混合起來進行縮排。單純的使用空格進行縮排就好了。
<ul> <li>Fantastic <li>Great</ul>.example { color: blue;}
2、只使用小寫，包括標籤名、屬性名稱、屬性值（一些可以自訂的字串屬性值除外）
<!-- 不推薦 --><A HREF="/">Home</A><!-- 推薦 --><img src="google.png" alt="Google">
三、通用Meta規則
1、確保你的IDE使用的是UTF-8編碼來儲存檔案的，且不要帶上BOM。在定義頁面的編碼時使用<meta charset="utf-8"> 就好了。在樣式表檔案裡不用去聲明UTF-8編碼什麼的。
2、在需要地地方進行注釋。
3、用 TODO 來標誌代碼中需要完善的地方
<!-- TODO: remove optional tags --><ul> <li>Apples</li> <li>Oranges</li></ul>
四、HTML書寫規則
1、文件類型。HTML5的文件類型對所有的html文檔都適用：<!doctype html>。另外，最好使用html,而不是xhtml.
2、使用正常化的html，並使用W3C HTML validator之類的工具來進行檢測。
<!-- 不規範 --><title>Test</title><article>This is only a test.<!-- 規範 --><!DOCTYPE html><meta charset="utf-8"><title>Test</title><article>This is only a test.</article>
3、使用語義化的html標籤，根據用途來選擇標籤。
<!-- 不推薦 --><div onclick="goToRecommendations();">All recommendations</div><!-- 推薦 --><a href="recommendations/">All recommendations</a>
4、把多媒體元素可知化。像圖片、視頻、動畫等多媒體元素，要有相關的文字來體現其內容，比如<img> 可以使用alt屬性來說明圖片內容。
<!-- 不推薦 --><img src="spreadsheet.png"><!-- 推薦 --><img src="spreadsheet.png" alt="Spreadsheet screenshot.">
5、確保頁面的 結構、樣式、行為三者相分離。確保文檔或模板中只包含html，把用到的樣式都寫到樣式表檔案中，把指令碼都寫到js檔案中。這在多人協作時非常重要。
<!-- 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"><h1 style="font-size: 1em;">HTML sucks</h1><p>I’ve read about this on a few sites but now I’m sure: <u>HTML is stupid!!1</u><center>I can’t believe there’s no way to control the styling of my website without doing everything all over again!</center><!-- Recommended --><!DOCTYPE html><title>My first CSS-only redesign</title><link rel="stylesheet" href="default.css"><h1>My first CSS-only redesign</h1><p>I’ve read about this on a few sites but today I’m actually doing it: separating concerns and avoiding anything in the HTML of my website that is presentational.<p>It’s awesome!
6、最佳化標籤。有些標籤是不需要用到的，能少就少。可以參考HTML5 specification來知道哪些標籤是必須的，哪些又是多餘的。
<!-- Not recommended --><!DOCTYPE html><html> <head> <title>Spending money, spending bytes</title> </head> <body> <p>Sic.</p> </body></html><!-- Recommended --><!DOCTYPE html><title>Saving money, saving bytes</title><p>Qed.
7、省略<style>和<script>的type屬性
五、HTML代碼的格式化。
1、為每個區塊層級元素或表格元素標籤新起一行，並且對每個子項目進行縮排
<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>
六、css書寫規則
1、使用合法、規範的css,可以通過W3C CSS validator來進行驗證。
2、ID和class的命名儘可能短，並符合語義。
/* Not recommended */#navigation {}.atr {}/* Recommended */#nav {}.author {}
3、盡量少用多重選取器或後代選取器，因為這會影響效能。
/* Not recommended */ul#example {}div.error {}/* Recommended */#example {}.error {}
4、使用組合屬性。css中提供了不少的能進行組合屬性連寫的地方。比如font,margin,padding等。
/* 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、如果css屬性的值為0,則後面不要帶上單位。除非真的是需要。
margin: 0;padding: 0;
6、省略小數前面的0。比如 0.8 可以寫成 .8
7、在URI類型的值裡不要加上引號。比如 @import url(//www.google.com/css/go.css);
8、如果有可能，盡量使用3個字元的十六進位數。
/* Not recommended */color: #eebbcc;/* Recommended */color: #ebc;
9、使用特定的首碼
.adw-help {} /* AdWords */#maia-note {} /* Maia */
10、在ID和class中使用 - 來作為連字號。
/* Not recommended: does not separate the words “demo” and “image” */.demoimage {}/* Not recommended: uses underscore instead of hyphen */.error_status {}/* Recommended */#video-id {}.ads-sample {}
11、避免使用css hack，首先考慮使用另一種寫法來解決。
七、css格式化規則
1、按字母的先後順序來進行css屬性的聲明，但某些瀏覽器的私人首碼可以不算進來。
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、對處在{}中的語句進行縮排。
@media screen, projection { html { background: #fff; color: #444; }}
3、每個css屬性聲明後都要使用一個分號，即使是最後的那個。
/* Not recommended */.test { display: block; height: 100px}/* Recommended */.test { display: block; height: 100px;}
4、在緊跟屬性名稱的冒號後使用一個空格
/* Not recommended */h3 { font-weight:bold;}/* Recommended */h3 { font-weight: bold;}
5、每一個css選取器或是屬性聲明都要新起一行。
/* Not recommended */a:focus, a:active { position: relative; top: 1px;}/* Recommended */h1,h2,h3 { font-weight: normal; line-height: 1.2;}
6、在每一個css規則之間應該空一行
html { background: #fff;}body { margin: auto; width: 50%;}
個人認為，代碼規範這種東西是見仁見智的，目的就是為了更好的進行團隊合作以及保證代碼的品質，在實際運用途中還是要結合實際情況。
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
