web前端开发规范

本文详细介绍了前端开发的编码规范,包括通用规范、HTML规范、CSS规范和JavaScript规范。通用规范涉及制表符的使用和文件命名规则;HTML规范涵盖文档类型、元素缩进和属性定义;CSS规范包括选择器、声明块的布局和属性顺序;JavaScript规范包含注释、变量声明和比较操作等。这些规范旨在提高代码可读性,保证团队合作的顺畅。
摘要由CSDN通过智能技术生成

作为一个前端开发人员,遵守一定的编码规范是很有必要的,因此我这里总结了一些规范作为自己日后开发的编码规范,当然,在实际的工作中要优先遵守公司制定的规范,确保跟团队其他人写的代码风格上是一样的,这样有利于日后的维护。
下面总结了一些基本的编码规范,包括通用规范、html规范、css规范以及JavaScript 规范四个方面:

通用规范:

(1)用4个空格来代替制表符(tab):由于制表符在不同系统即使使用相同的编辑器也可能会不一致(系统对制表符的解析不一致),所以如果想代码在所有环境下展现一致就用4个空格代替制表符,现在很多编辑器都可以配置敲入Tab键时插入4个空格。
(2)文件的命名尽量用有意义的英文单词加破折号“-”:
对于文件的命名要注意:1)字母开头而不是数字开头;2)英文单词(或缩写)要全部小写,使用破折号“-”来分割;3)对于一些有前后缀或特定的扩展名的文件,使用点分隔符,下面是一些例子:

layer.js
my-style.css
my-style.min.css
jquery.cookie.min.js


html规范:

(1)使用html5的文档类型,字符编码统一使用UTF-8编码:

<!DOCTYPE HTML>
<html> 
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    </head>
    <body>
    </body>
</html>

(2)嵌套元素应当缩进一次(即两个空格)
(3)属性的定义,全部使用双引号,绝不要使用单引号,如:

<input class="my-input" name="myinput" type="text">

(4)不要在自闭合元素的尾部添加斜线:
HTML中所有的自闭合标签如下:area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
推荐的例子:

<img src="....">
<br>

(5)属性的顺序:
HTML 属性推荐按照以下顺序依次排列:
class -> id, name -> data-* -> src, for, type, href -> title, alt -> aria-*, role
(6)布尔型属性可以在声明时不赋值:
XHTML规范要求为其赋值,但是HTML5规范不需要。如:

<input type="text" disabled>
<input type="checkbox" value="1" checked>
<s
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值