HTML-CSS-JS编码规范跳链就使用a标签，而不是自己写onclick跳转。a标签里面不能套a标签 4. 选择器的性

一、HTML代码规范

1.img标签要写alt属性（alt属性：图片无法加载时的提示文字）

<img src = "imgs/btn.png"  alt = "ABC" >

2.单标签可以不写闭合标签

<input  type = "text" >
<br>
<img src= "" >

3.自定义属性以 data- 开头

<div data-count = "5" ></div>

4.td放在tr里面，li放在ol/ul里面（如不标准浏览器可能有自己的解析方式）

<tr>
<td></td>
<td></td>
</tr/>
<ul>
<li></li>
<li></li>
</ul>

5.行内元素里不能使用块元素

a标签里嵌套div，可能会导致a标签无法正常点击如果span里面嵌套div，要把span加上display：block

6.每个页面都写，设置页面渲染模式为标准模式

7.html要保持简洁，不能套很多层

8.style不能写在body里，有可能出现渲染两次，闪屏问题

9.html加lang属性（有利于SEO）

<html lang = "zh-CN" >

10.meta标签里要写charset属性,避免网页显示unicode符号时乱码

<head>
    <meta charset = "utf-8" >
</head>

11.特殊符号使用html实体

符号实体编码

© &copy;
¥ &yen;
® &reg;
> &gt;
< &lt;
& &amp;

12.img标签空src的问题，a标签空href问题，background-image空url问题

动态给src赋值时，空src会使浏览器认为src是当前页面链接，就会再一次请求页面，解决办法：

<img src = "about:blank" alt >

这样浏览器会去加载一个空白页面，不会加载当前页面，也不会报错 background-image空url，会报404错误

13.行内元素换行和空格的影响

<form>
	 <label>Email: </label>
	 <input type = "email" >
</form>

在label和input中间有一个空格，可能会导致label的width和input的width两者的和等于form导致input换行，因为块级元素开始会有空白文本注意：注释标签也会创建相应的节点，只是不渲染

14.类名使用小写字母加中划线连接

<div class = "btn-icon" ></div>

15.使用合适的标签

内容是表格就使用table，table有自适应的优点；如果是一个列表就使用ol/ul标签，扩展性比较好
是输入框就使用input，而不是写一个p标签，然后设置contenteditable=true，因为这个在IOS Safari上光标定位容易出现问题（如果需要做特殊效果除外）
粗体就使用b/strong，而不是自己设置font-weight
表单就使用form标签，注意form里面不能套form
跳链就使用a标签，而不是自己写onclick跳转。a标签里面不能套a标签
使用html5语义化标签，如导航使用nav，侧边栏使用aside，顶部和尾部使用header/footer，页面比较独立的部分可以使用article，如用户的评论
如果是按钮就应该写一个button或者<input type="button">，而不是写一个a标签设置样式，因为使用button可以设置disabled，然后使用CSS的:disabled，还有:active等伪类使用，例如在:active的时候设置按钮被按下去的感觉
如果是标题就应该使用标题标签h1/h2/h3，而不是自己写一个<p class="title"></p>，相反如果内容不是标题就不要使用标题标签了
在手机上使用select标签，会有原生的下拉控件，手机上原生select的下拉效果体验往往比较好，不管是IOS还是android，而使用<input type="tel">在手机上会弹一个电话号码的键盘，<input type="number"><input type="email">都会弹相应的键盘
如果是分隔线就使用hr标签，而不是自己写一个border-bottom的样式，使用hr容易进行检查
如果是换行文本就应该使用p标签，而不是写br，因为p标签可以用margin设置行间距，但是如果是长文本的话使用div，因为p标签里面不能有p标签，特别是当数据是后端给的，可能会带有p标签，所以这时容器不能使用p标签

二、CSS编码规范

1.文件名规范

文件名：小写字母加中划线变量名：驼峰命名引入的css可以不写type = "text/css"，但是要写rel

<link rel = "stylesheet" href = "../common.css"></link>

js同上

<script src = "test.js"></script>

2.属性书写顺序，一般重要的放在最前面

3.不要使用样式特点命名，类的命名应当使用它所表示的逻辑意义，如`company-logo、commit-btn`

4. 选择器的性能，选择器一般不要超过三个

5.使用css3的选择器完成一些高级的功能

6.使用正确的选择器，尽量不要使用很大的选择器

7.多写注释

8.属性值规范

如果值是0，通常都不用带单位
色值用十六进制，少用rgb
注意border none和0的区别

9.不要设置太大的z-index，通常保持在个位数就可以

10.合并属性

11.注意float/absolute/fixed定位会强制设置成block

12.清除浮动（兼容IE8及以上）

.clearfix:after{
    content: "";
    display: table;
    clear: both;
}

13.css动画规范

使用transition做动画的时候不要用all所有属性，用哪个属性就写哪个属性，Safari- 可能会有奇怪的抖动
使用transform替代position做动画（transition不会重绘）
使用css代替js完成动画

14.图片压缩（tinypng）

15.正确使用background和img

如果是头图等直接展示的图片还是要img标签，如果是做为背景图就使用background，使用img可以写个alt属性增强SEO

16.响应式开发不要杂合使用rem

17.适当使用`:before` `:after`（会在标签后面追加一个标签）

18.少用`absolute`定位（页面的主要布局不能用absolute），可以用`float`

19.移动端提高可点区域范围

20.不要设置input的line-height，在Safari浏览器的输入光标会变大，如果要居中，使用`padding`

21.移动端弹框要禁止body滑动

因为IOS Safari切换输入框的时候会页面会弹闪得很厉害，因为你在切的时候它会先把键盘收起来，然后再弹出来，这个时间很短，给人感觉页面弹闪了一下，但如果把body禁止滑动了就不会有这个问题，这有两个解决办法，第一种是把body fixed住，第二种设置body overflow: hidden，相对来说第二种比较简单一点。IOS10完全不会闪，IOS9以下还是会闪

22.手动编写渐变的CSS，可以用一个在线工具https://www.cssmatic.com/，生成兼容性很强的css样式

background: rgba(232,228,236,1);
background: -moz-linear-gradient(left, rgba(232,228,236,1) 0%, rgba(202,195,213,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(232,228,236,1)), color-stop(100%, rgba(202,195,213,1)));
background: -webkit-linear-gradient(left, rgba(232,228,236,1) 0%, rgba(202,195,213,1) 100%);
background: -o-linear-gradient(left, rgba(232,228,236,1) 0%, rgba(202,195,213,1) 100%);
background: -ms-linear-gradient(left, rgba(232,228,236,1) 0%, rgba(202,195,213,1) 100%);
background: linear-gradient(to right, rgba(232,228,236,1) 0%, rgba(202,195,213,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e4ec', endColorstr='#cac3d5', GradientType=1 );

23.行内元素可以直接设置margin-left/margin-right

三、JS编码规范

1.变量命名

2.生命变量时要赋值

3.函数的返回值类型要确定

因为经常使用undefined来判断变量有没有定义，如果要赋值应该要赋空值，如对象赋值为null，数字赋值为0，字符串赋值为空字符，

4.不要让代码在全局作用域下运行

5.简洁代码

使用三目运算代替简单的if-else
使用箭头函数代替简单的函数

HTML-CSS-JS编码规范