前端规范文档

HTML规范

1.给 a 标签加上title属性
2.a 标签的href属性必须写上链接地址，暂无的加上 javascript:;
3.非本专题的页面间跳转，采用打开新窗口模式：target="_blank"

属性值

1.元素属性值使用双引号语法 <input type="radio" name="name" checked="checked" >
2.css属性值需要用到引号时，统一使用单引号 .jdc { font-family: 'Hiragino Sans GB';}
3.属性书写顺序,建议遵循以下顺序：
布局定位属性：display / position / float / clear / visibility / overflow
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient
4.CSS3浏览器私有前缀写法,CSS3 浏览器私有前缀在前，标准前缀在后
.jdc {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

样式文件

1.样式文件必须写上 @charset 规则，并且一定要在样式文件的第一行首个字符位置开始写，编码名用 “UTF-8”  @charset "UTF-8";
2.每个属性声明末尾都要加分号；
3.左括号与类名之间一个空格，冒号与属性值之间一个空格 .jdc { width: 100%; }
4.为单个css选择器或新声明开启新行
5.属性值十六进制数值能用简写的尽量用简写 .jdc { color: #fff;}
6.不要为 0 指明单位 .jdc { margin: 0 10px;}
7.使用16进制表示颜色值
除非你需要透明度而使用rgba，否则都使用#f0f0f0这样的表示方法，并尽量缩写。  .m-box{color:#f00;background:rgba(0,0,0,0.5);}
8.模块注释和行内注释
/* 
块状注释文字
 */
.m-list li{height:20px;line-height:20px;/* 这里是对line-height的一个注释 *}

纯数字输入框

使用 type="tel" 而不是 type="number"
<input type="tel">

reset

PC端

body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,p,form,header,section,article,footer{margin:0;}
body,button,input,select,textarea{font:12px/1.5 tahoma,'\5FAE\8F6F\96C5\9ED1',sans-serif}
h1,h2,h3,h4,h5,h6{font-size:100%}
em,b{font-style:normal}
a{text-decoration:none} 
a:hover{text-decoration:underline}
img{border:0} 
body{padding-top:42px} 
button,input,select,textarea{font-size:100%;outline:none}
table{border-collapse:collapse;border-spacing:0}
td,th,ul,ol{padding:0}

移动端

html,body,div,p,ul,li,dl,dt,dd,em,i,span,a,img,input,h1,h2,h3,h4,h5 {margin:0;padding:0}
a,img,input {border:none;}
body{font: 14px/1.75  -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;-webkit-tap-highlight-color: rgba(0,0,0,0);}
a {text-decoration:none;}
ul,li{list-style: none}
a, img {-webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */}
html, body {
    -webkit-user-select: none;   /* 禁止选中文本（如无文本选中需求，此为必选项） */
    user-select: none;
}

图片标签

• PC端img图片必须填写width、height、alt属性
• 移动端必须填写alt属性
• alt不能为无意义字符，需要能表现出图片的含义

样式命名

 .wrap{}                 //外层容器
 .mod-box{}              //模块容器
 .btn-start{}            //开始
 .btn-download-ios{}     //ios下载
 .btn-download-andriod{} //安卓下载
 .btn-head-nav1{}        //头部导航链接1
 .btn-news-more{}        //更多新闻
 .btn-play{}             //播放视频
 .btn-ico{}              //按钮ico
 .btn-lottery{}          //开始抽奖
 .side-nav{}             //侧栏导航
 .side-nav-btn1{}        //侧栏导航-链接1 
 .btn-more{}             //更多

 提示：命名词穷了怎么办？试下这个工具 [codelf](https://unbug.github.io/codelf/****)

rem布局

viewport

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">