前端代码规范HTML，CSS，JS

最新推荐文章于 2022-04-29 10:09:48 发布

置顶 JoeChen.

最新推荐文章于 2022-04-29 10:09:48 发布

阅读量366

点赞数 2

分类专栏：前端必学基础·

本文链接：https://blog.csdn.net/qq_41995398/article/details/103833305

版权

前端必学基础· 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

前端代码的质量至关重要，直接决定着页面的质量和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二更，发现自己博客写的很烂，可读性很差，把代码段改成文本了

JoeChen.

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
4
评论
前端代码规范HTML，CSS，JS

前端代码的质量至关重要，直接决定着页面的质量和SEO，来看看一般实用的规范吧！HTML代码规范：1，img要写alt，在网络阻塞的情况下即使你没有加载出来图片内容，也可以得以知道图片代表的内容，起到提示的作用，提示内容要贴切。 <img alt="Smart">2，单标签不用写闭合符号，因为没必要，而且也显得你不懂HTML5规范，常见的单标签有img input...
复制链接

扫一扫

专栏目录