前端代码的质量至关重要,直接决定着页面的质量和SEO,来看看一般实用的规范吧!
HTML代码规范:
1,img要写alt,在网络阻塞的情况下即使你没有加载出来图片内容,也可以得以知道图片代表的内容,起到提示的作用,对于特殊人士(视力障碍),alt属性对提示他们图片信息,对用户友好。要写title属性,用户鼠标移动上去会出现提示文字,并且有利于SEO,对机器友好
<img alt="this is a picture" title="this is a picture">
2,单标签不用写闭合符号,因为没必要,而且也显得你不懂HTML5规范,常见的单标签有img input br hr 等等
<img>
<input>
<link>
3,html代码要简洁明了,不能嵌套太多,这是出于性能的考虑,而且有利于SEO,当网络爬虫爬取内容的时候,多层标签嵌套是不利于数据收集的
4,html标签上面应该添加lang属性,用来标识网页语言,第一,有助于转化结果,例如盲文生成器,语言生成器在有网页语言标识的情况下可以更好的工作,第二,排版更加规范,断句,断行,子距,对齐等规则在不同语言里面是不一样的。第三,更好的SEO,虽然主流浏览器引擎会用自动语言检测来区分语言,但是标识网页语言,有助于浏览器引擎根据语言偏好来提高搜索结果的质量
<html lang="en"></html>//表示英文网页
<html lang="en-US"></html>//表示美国英语网页
<html lang="zh-CN"></html>//中国网页
5,img标签的src属性不要为空,可以加个about:blank,如果省略了该属性,那么浏览器认为src是当前页面,就会从新发请求当前页面页面
<img src="about:blank">
6,使用语义化的标签,标签的作用在于让浏览器知道标签里面的内容是什么,例如 h 标签是一个标题,那种通篇都是div的页面是很拙劣的,标签语义化可以在MDN上查到相关内容
css代码规范:
1,类名要使用小写字母加中划线的写法, title-nav
2,ID采用驼峰命名法
3,css文件名采用小写加下划线的方式
4,多利用css3新选择器来完成一些高级的功能,这样可以省去很多时间,你不必给你要控制的所有元素加类名
ul li:nth-child(n) {
//选择ul下第n个li子元素
}
ul>li{
//直接子元素
}
.wer+li{
//下一个兄弟元素
}
<ul>
<li class="wer"></li>
<li></li>
<li></li>
</ul>
5,多写注释,模块注释,功能注释,代码不仅仅是给自己看的,也是给其他人看的,注释是一个程序员的应有职业素养
6,排版规范,统一的规范是提高生产力的关键
1) 多个选择器共用一个样式集时要换行
ul,
ol,
div{
//css code
}
2) 属性名后面带空格
ul{
color: red;
}
7,属性值规范
1)如果属性值为0,通常不带单位
ul{
height: 0;
}
2)颜色要用十六进制,少用rgb,rgb需要计算
ul{
background: #eee;
}
JS代码规范:
1,变量命名,不宜短小为荣 ,符合小驼峰命名法,变量区分大小写
2,常量全大写,用下划线连接
3,数组,对象最后一个属性不要有逗号
4,布尔值命名开头用:is are has 等前缀
5,JavaScript 函数也是以驼峰形式编写的。另外,最好的做法是通过给函数名称一 个动词作为前缀来实际告诉该函数在做什么。动词作为前缀可以是任何东西(例如,get, fetch, push, apply, calculate, post)。考虑具有更多自我描述性 的 JavaScript 变量,这是另一个软规则
6,逗号后面应该加空格,在 ")" 和 "{"之间应该有空格,双目运算符号前后应该加空格
function addNumber(a, b) {
return a + b;
}
7,尽量符合低耦合高内聚的代码原则
文件命名规范
项目文件,JS文件,HTML文件,CSS文件都用小写加下划线的方式
比如 user_table,
//持续更新中
//2021/8/11二更,发现自己博客写的很烂,可读性很差,把代码段改成文本了