前端代码规范
```
```
html
1.标签必须关闭不管是单个标签还是双个标签。
<img/> //单个
<head></head> //双个
2.使用符合浏览器规范的语义化标签
标题 h1-h6 链接 a 地址 address
文章 article 侧边栏 aside 主体 body
头部 header 底部 footer 代码文本 code
下拉列表 datalist|select图片 img 输出框 input
表单 form 列表 ul|ol 导航 nav
块文本 p 板块 section 内联文本 span
表格 table 时间 time 页面标题 title
按钮 button
有些标签是html5新添加的,所以浏览器的低的版本都不会兼容。会被低浏览器解析为div展示。
-
js文件与css文件由外链引入,css在head中引入,js在body尾部引入。
-
标签属性顺序
- class
- id
- src, for, type, href, value
- placeholder, title, alt
- data-*
- required、readonly、 disabled
-
id,class命名
1.使用跟内容相关的名字, 如nav, name, user, manager
- 使用小写字母,多个单词以“-”连接。 right-nav
3.避免使用不符合规范的词汇 wenzhang,banner,youxi
-
内联标签禁止包含块级标签,块级标签可以包含内联与块级标签。
内联标签:span,b,a,img,time,code,em,input,select.sup,sub,textarea,label
块级标签 p,div,ul,address,menu,form,table,h1-h6,hr,section,nav,header,footer
css
- 属性顺序
- 定位属性:position,top,left,right,bottom,z-index,display,
- 盒子属性:width,height,margin,padding,border,background,float,overflow,border-radius
- 文字属性: font-family,font-size,font-weight,text-align,text-overflow,white-space,...
- 其他属性:box-shadow,transform,animation,opaticy,
-
属性简写
单个值使用完全写法 margin-left: 10px;
值为0的时候不带单位 margin-left: 0;
多个值使用简写 margin: 0 0 0 10px;
颜色值为一样时简写 color: #333
-
动画@keyform 写在顶部, 媒体查询写在底部。
js
1.文件命名与模块或者页面相关
2.变量使用前必须声明
3.使用分号结束
// 赋值
var a = 1;
// 函数声明
function a() {
};
// 函数调用
a();
// 返回
return ;
4.函数最好包含在作用域块中,防止污染全局
;{}
5.函数必须有返回对象,switch循环也必须有默认返回
switch(name) {
case 'a':
break;
default:
return '';
};
function a() {
return '';
}
-
代码格式化,整洁规范
-
函数命名使用驼峰法