永遠遵循同一套編碼規范 -- 可以是這里列出的，也可以是你自己總結的。如果你發現本規范中有任何錯誤，敬請指正。
使用符合語義的標簽書寫 HTML 文檔, 選擇恰當的元素表達所需的含義;
<!-- 不推薦 --> <div onclick="goToRecommendations();">All recommendations</div>
<!-- 推薦 --> <a href="recommendations/">All recommendations</a>
元素的標簽和屬性名必須小寫, 屬性值必須加雙引號; 例如
<!-- 不推薦 --> <A HREF='/'>Home</A>
<!-- 推薦 --> <a href="/">Home</a>
例如
<ul> <li> 1 </li> </ul>
去除比不必要的空格; 例如
<!-- 不推薦 --> <p>test </p>
<!-- 推薦 --> <p>test</p>
<!-- 不推薦 --> <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>
使用雙引號來標識 html 的屬性; 例如
<!-- 不推薦 --> <a class='maia-button maia-button-secondary'>Sign in</a>
<!-- 推薦 --> <a class="maia-button maia-button-secondary">Sign in</a>
通過給元素設置自定義屬性來存放與 JavaScript 交互的數據, 屬性名格式為 data-xx (例如：data-lazyload-url)
頁面文檔類型統一使用HTML5 DOCTYPE. 代碼如下：
<!doctype html>
聲明方法遵循HTML5的規范.推薦使用 utf-8 編碼.
<meta charset="utf-8" />
建議對超過10行的頁面模塊進行注釋, 以降低開發人員的嵌套成本和后期的維護成本. 例如：
<div id="sample"> ... </div> <!-- #sample END -->
<div class="sample"> ... </div> <!-- .sample END -->
如果鏈接和當前頁面一致則忽略鏈接的協議部分，例如
<!-- 不推薦 --> <script src="http://www.taobao.com/fp.js"></script>
<!-- 推薦 --> <script src="http://www.taobao.com/fp.js"></script>
/* 不推薦 */ .example { background: url(http://www.taobao.com/fp.css); }
/* 推薦 */ .example { background: url(//www.taobao.com/fp.css); }
例如
<!-- TODO(yiminghe): remove duplicate tag --> <p><span>2</span></p>
<!-- 不推薦 --> <!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>
<!-- 推薦 --> <!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!
<!-- 不推薦 --> <link rel="stylesheet" href="http://www..com/css/maia.css" type="text/css"> <!-- 不推薦 --> <script src="http://www..com/js/gweb/analytics/autotrack.js" type="text/javascript"></script>
<!-- 推薦 --> <link rel="stylesheet" href="http://www..com/css/maia.css"> <!-- 推薦 --> <script src="http://www..com/js/gweb/analytics/autotrack.js"></script>
<!-- 不推薦 --> <img src="spreadsheet.png">
<!-- 推薦 --> <img src="spreadsheet.png" alt="Spreadsheet screenshot.">
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>Sample page</title> <link rel="stylesheet" href="css_example_url" /> </head> <body> <div id="page"> <div id="header"> 頁頭 </div> <div id="content"> 主體 </div> <div id="footer"> 頁尾 </div> </div> <script src="js_example_url"></script> <script> // 你的代碼 </script> </body> </html>
本站文章版權歸原作者及原出處所有 。內容為作者個人觀點， 并不代表本站贊同其觀點和對其真實性負責，本站只提供參考并不構成任何投資及應用建議。本站是一個個人學習交流的平臺，網站上部分文章為轉載，并不用于任何商業目的，我們已經盡可能的對作者和來源進行了通告，但是能力有限或疏忽，造成漏登，請及時聯系我們，我們將根據著作權人的要求，立即更正或者刪除有關內容。本站擁有對此聲明的最終解釋權。
