HTML 编码规范

基本准则 代码风格统一，代码要求简洁明了有序，符合web标准, 语义化xhtml, 结构表现行为分离,兼容性优良. 页面性能良好

协议

省略图片、样式、脚本以及其他媒体文件 URL 的协议部分 （http:,https:），除非文件在两种协议下都不可用。这种方案称为 protocol-relative URL，好处是无论你是使用 HTTPS 还是 HTTP 访问页面，浏览器都会以相同的协议请求页面中的资源，同时可以节省一部分字节。

    //省略http:,https:
    <script src="/images/js/mobile_bundle/milo.js"></script>
  
    .example { background: url("/images/img.png"); }

</pre>

文档类型声明及编码: 统一为html5声明类型 <!DOCTYPE html> ; 编码统一为 utf-8
在定义页面的编码时使用 <meta charset="utf-8">

Warning: 使用AMS的运营活动页面请使用 GBK.

所有编码均遵循xhtml标准, 所有标签必须闭合; 属性值必须用双引号包括;
引入css文件或JavaScript文件时, 须略去默认type声明. 引入第三方javascript需加上charset属性指明编码格式。将css放在页面头部，脚本放在页面的底部( </body>之前)。
-内联元素中不可嵌套块级元素

<!-- 不推荐 -->
<span class=”container”>
  <div>test</div>
</span> <!-- 推荐 --> <div class=”container”>
  <span>test</span>
</div>

id与class命名,尽可能短，并符合语义, 英文单词全部小写字母，多个单词用 - 分隔。
比如：left-nav、header-nav、media-list等等
需要为html元素添加自定义属性的时候, 以 data- 为前缀来添加自定义属性，避免使用其他命名方式;
语义化html, 如段落标记用p, 列表用ul，根据用途来选择标签。

<!-- 不推荐 --> 
<div onclick="goToRecommendations();">All recommendations</div>
<!-- 推荐 --> 
<a href="recommendations/">All recommendations</a>

<!-- TODO: 精简代码结构 --> <div>
  <div>
    <div>test</div>
  </div> </div>
<!-- DESC: left menu -->
<nav>
  <a href=”/”>home</a>
</nav>

尽可能减少html标签嵌套
-把多媒体元素可知化。像图片、视频、动画等多媒体元素，要有相关的文字来体现其内容，比如<img>可以使用 alt属性来说明图片内容, 给重要的元素加上title;

<!-- 不推荐 --> 
<img src="spreadsheet.png">
<!-- 推荐 --> 
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">

HTML中<，>，&等有特殊含义，这类符号已经用来表示HTML标签，因此就不能直接当作文本中的符号来使用。为了在HTML文档中使用这些符号，就需要定义它的转义字符串比如： <(<)、>(>)、&(&)等等;
为每个块级元素新起一行，并且对每个子元素进行缩进 ,代码缩进每次缩进两个空格

<ul>  
    <li>Fantastic</li>  
    <li>Great</li> 
</ul>

<!-- 不推荐 --> 
<A HREF="/">Home</A> 
<!-- 推荐 -->
<img src="google.png" alt="Google">

书写链接地址时, 必须避免重定向即须在URL地址后面加上/；
在页面中尽量避免使用内联style属性,即style="…";
在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间;
确保页面的结构、样式、行为三者相分离。确保文档或模板中只包含html，把用到的样式都写到样式表文件中，把脚本都写到js文件中。一些特殊的页面比如首页可以把少量只在该页面用到的特殊的css和JavaScript直接写在页面上以减少http请求让页面尽快的呈现。
书写页面过程中, 请考虑向后扩展性;