前端代码规范HTML，CSS，JS

前端代码的质量至关重要，直接决定着页面的质量和SEO，来看看一般实用的规范吧！

HTML代码规范：

1，img要写alt，在网络阻塞的情况下即使你没有加载出来图片内容，也可以得以知道图片代表的内容，起到提示的作用，提示内容要贴切。

    <img alt="Smart">

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，类名要使用小写字母加中划线的写法。

7，使用语义化的标签，标签的作用在于让浏览器知道标签里面的内容是什么，例如 h 标签是一个标题，那种通篇都是div的页面是很拙劣的，标签语义化可以在MDN上查到相关内容。

css代码规范：

1，文件名规范：小写字母加中横线的方式,这样可读性比较强而且清爽。

扫描二维码关注公众号，回复： 12916911 查看本文章

2，多利用css3新选择器来完成一些高级的功能，这样可以省去很多时间，你不必给你要控制的所有元素加类名。

    ul li:nth-child(n) {
        //选择ul下第n个li子元素
    }
    
    ul>li{
        //直接子元素
    }
    .wer+li{
        //下一个兄弟元素
    }
    <ul>
        <li class="wer"></li>
        <li></li>
        <li></li>
    </ul>

3，多写注释，模块注释，功能注释，代码不仅仅是给自己看的，也是给其他人看的，注释是一个程序员的应有职业素养。

4，排版规范，统一的规范是提高生产力的关键.

1) 多个选择器共用一个样式集时要换行
ul,
ol,
div{
    //css code
}
2) 属性名后面带空格
ul{
    color: red;
}

5,属性值规范，

1)如果属性值为0，通常不带单位
ul{
    height: 0;
}
2)颜色要用十六进制，少用rgb，rgb需要计算
ul{
    background: #eee;
}

JS代码规范：

1，变量命名，不宜短小为荣，符合小驼峰命名法，

2，声明变量要赋值

3，逗号后面应该加空格，在 ")" 和 "{"之间应该有空格，双目运算符号前后应该加空格

function addNumber(a, b) {
    return a + b; 
}

4，尽量符合低耦合高内聚的代码原则

//持续更新中

前端代码规范HTML，CSS，JS

猜你喜欢