永远遵循同一套编码规范 -- 可以是这里列出的，也可以是你自己总结的。如果你发现本规范中有任何错误，敬请指正。
使用符合语义的标签书写 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="//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="//www..com/css/maia.css" type="text/css"> <!-- 不推荐 --> <script src="//www..com/js/gweb/analytics/autotrack.js" type="text/javascript"></script>
<!-- 推荐 --> <link rel="stylesheet" href="//www..com/css/maia.css"> <!-- 推荐 --> <script src="//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>
本站文章版权归原作者及原出处所有 。内容为作者个人观点， 并不代表本站赞同其观点和对其真实性负责，本站只提供参考并不构成任何投资及应用建议。本站是一个个人学习交流的平台，网站上部分文章为转载，并不用于任何商业目的，我们已经尽可能的对作者和来源进行了通告，但是能力有限或疏忽，造成漏登，请及时联系我们，我们将根据著作权人的要求，立即更正或者删除有关内容。本站拥有对此声明的最终解释权。
