编码规范

Html

1. 命名
   
   • 全部是小写字母，中间用-隔开
   • 命名需代表模块内容或标题，不得以样式命名

2. 标签
   

   • 标签用小写字母
   • 无需闭合的标签不允许闭合，无需自闭合标签有input、br、img、hr等
   • 尽量不适用表格进行布局
   • 标签简洁，减少不必要的标签
   • 符合语义
     

   常见语义：
   p - 段落
   h1,h2,h3,h4,h5,h6 - 层级标题
   strong,em - 强调
   ins - 插入
   del - 删除
   abbr - 缩写
   code - 代码标识
   cite - 引述来源作品的标题
   q - 引用
   blockquote - 一段或长篇引用
   ul - 无序列表
   ol - 有序列表
   dl,dt,dd - 定义列表

3. 属性

   • 小写字母
   • 属性值用双引号包围，不允许使用单引号
   • 布尔类型属性省略属性值 eg：disable，checked
   • 自定义属性以xxx-为前缀，建议使用data-
4. 通用
   
   • DOCTYPE大写
   • title作为head的直接子元素，并紧随charset之后
   • 启用ie=Edge模式
   • 保证favicon 可访问。
   • css在head加载，js在页尾或者异步加载
   • 移动环境或只针对现代浏览器设计的 Web 应用，如果引用外部资源的 URL 协议部分与页面相同，建议省略协议前缀。
   • 禁止 img 的 src 取值为空。延迟加载的图片也要增加默认的 src。多余的 title 影响体验，并且增加了页面尺寸。alt可以提高加载失败时的用户体验。
   • 推荐label嵌套input进行关联，避免不必要的id，如果 DOM 结构不允许直接嵌套，则应使用第二种。见解释3
   • 使用 button 元素时必须指明 type 属性值。

解释：
1，在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证favicon可访问，避免404，必须遵循以下两种方法之一：在 Web Server 根目录放置 favicon.ico 文件；使用 link 指定 favicon。
2，使用 protocol-relative URL 引入 CSS，在 IE7/8 下，会发两次请求。是否使用 protocol-relative URL 应充分考虑页面针对的环境。
3，

html
<label><input type="checkbox" name="confirm" value="on"> 我已确认上述条款</label>
<label for="username">用户名：</label> <input type="textbox" name="username" id="username">
5. 属性定义顺序
相关的属性声明应当归为一组，并按照下面的顺序排列：
1)定位（position->z-index）
2)盒模型（display->float->margin->border->padding->width/height）
3)文字属性（font->color->line-height->text-align）
4)视觉属性（background-color->border->opacity）

由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。
其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。

javascript

代码示例：

if (considion) {    var obj = {        a: 4;        b: 5;        }    funcname(x,y);    function funcname(x,y) {    }} else {}

1. 空格
   
   • if/else/function/switch等关键字后面必须有一个空格
   • 函数名和 ( 之间不允许有空格，() 和 [] 内紧贴括号部分不允许有空格。
   • { 前必须有一个空格。
   • 对象创建时，属性中的 : 之后必须有空格，: 之前不允许有空格。
   • , 和 ; 前不允许有空格。不允许换行
   • 二元运算符左右需要有空格，一元不要有空格a++；a += 1;
   • if语句只有一句也不能省略{代码块}
2. 类 使用 Pascal命名法。function TextNode(options) {}其他函数、变量 使用 Camel命名法textNode

3. 注释

   • 单行注释// 后跟一个空格，缩进与下一行被注释说明的代码一致。
   • 避免使用 /…/ 这样的多行注释。有多行注释内容时，使用多个单行注释。
   • 为了便于代码阅读和自文档化，以 /*…/ 进行文档化注释。文档注释前必须空一行。
   • 用 @namespace 标识命名空间;
     用 @file 标识文件说明；
     用 @author 标识开发者信息；
     用 @extends 标记类的继承信息；
     用 @public / @protected / @private 中的任意一个，指明可访问性；
     用 @event 标识事件

4. 变量

   • 变量在使用前必须通过 var 定义。
   • 每个 var 只能声明一个变量。