web前端编码规范小结

最新推荐文章于 2024-07-25 11:26:35 发布

imyfd

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量237

点赞数

文章标签： html css html5

本文链接：https://blog.csdn.net/imyfd/article/details/53374617

版权

一、基本规范

1.必须声明文件类型为html5,在头文件添加<!DOCTYPE html>

2.一个html5的基本格式为


<!DOCTYPE html>
<head>
<title>
</title>
</head>
<body>
</body>

3.为了明确字符编码，使浏览器准确并快速渲染页面，需在头部声明文档编码

<meta charset="utf-8">

4.引入文件

引入css文件：

<link rel="stylesheet" href="lib/bootstrap.min.css" />

引入js文件：

<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>

注意：例如在jquery的框架中编码，必须要在编码前引用，否则会出现错误。

5.命名

建议使用驼峰命名法，例

<div class="forName"></div>

而函数命名可使用下划线命名，例

function http_send_post(){
}

6.缩进

用tab键来进行缩进，缩进范围为4个空格。

7.代码注释

css样式中的注释格式为

#div{}
/*div样式*/

js中的注释格式为

function example(){}
//函数

二、代码风格

1.css样式定义时，命名后样式中每一项属性要清晰的缩进及空行，更利于查看代码

#div{
      top:100px;
      width:100px;
      background-color:red;
}

编写js函数时也是如此,同级函数语句尽量保持一致，下级则缩进。


function f1(){
　　　　var n=999;
　　　　function f2(){
　　　　　　alert(n); 
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999

2.带前缀的属性要缩进编辑

在编码中，会遇到许多特定的带前缀的相同属性，用缩进的方式去编辑更利于查看与美观，形成良好的代码风格。

.div{
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
          box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

3.结构控制

控制接口，就是 if else while switch等。这一类的写法规范也是经常容易出现问题的，规范一下会更利于编码。

（1）if ,else if, else写法:

<script>
    if(){

    }else if(){

    }else{

    }
</script>

（2）switch写法：

<script>
switch(n){
case 1: break;
case 2: break;
default: n 与 case 1 和 case 2 不同时执行的代码
}
</script>





（3）for循环写法：
<script>
    for(var i=0;i<100;i++){
    
    };
</script>


（4）for in写法：
<script>
for (i in object){ }
</script>


（5）while, do while写法:


<script>
while () { 
需要执行的代码 
}
</script>


<script>
do(){
 执行的代码
}while();
</script>

imyfd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端编码规范小结

一、基本规范1.必须声明文件类型为html5,在头文件添加2.一个html5的基本格式为3.为了明确字符编码，使浏览器准确并快速渲染页面，需在头部声明文档编码4.引入文件引入css文件：引入js文件：注意：例如在jquery的框架中编码，必须要在编码前引用，否则会出现错误。5.命名建议使用驼峰命名法，例而函数命名可使用
复制链接

扫一扫