前端代码编写规范 - 360文档中心

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

前端代码编写规范

命名规则

1.项目名称

项目名称驼峰式命名。

例：myProject

2.目录命名

采用单数命名法。

例：css img font js

3.JS文件命名

字母全部小写，单词之间用“-”链接。

例：popup-window.js

4.CSS文件命名

字母全部小写，单词之间用“-”链接。

例：popup-window.css

5.H TML文件命名

文件名称驼峰式命名。

例：riverMonitor.html

HTML

1.语法

缩进使用Tab（4个空格）;

解释：对于非HTML标签之间的缩进,比如script或style标签内容缩进，与script 或style标签的缩进同级。

first

second

嵌套的节点应该缩进;

在属性上使用双引号（字符串拼接除外）; 属性名全小写，用“-”做分隔符;

自动闭合标签处不能使用斜线。

Page title

Company

Hello, world!

2.HTML5 doctype

页面开头的doctype大写，html小写。

例：

...

3.字符编码

采用UTF-8的编码格式。

例：

...

4.引入CSS,JS

CSS引入使用

JS 引入使用

页面不允许出现style标签。

5.属性

1.属性名必须使用小写字母

...

2.属性值必须使用双引号包围

不允许使用单引号。

6.属性顺序

class

id

name

data-*

src,for,type,href,value,max-length,max, min,pattern

placeholder,title,alt

aria-*,role

required,readonly,disabled

7.标签

标签名必须使用小写字母

Hello StyleGuide!

1．对于无需自闭合的标签，不允许自闭合解释：

常见无需自闭合标签有 input、br、

img、hr 等。

2. 标签使用必须符合标签嵌套规则

解释：

比如div不得置于p中，tbody必须置于table中。

ul 标签包含着li、dl 标签包含着dt 和dd。

3. 标签使用必须符合标签嵌套规则

常见标签语义：

P –段落

h1,h2,h3,h4,h5,h6–层级标题

strong,em–强调

ins–插入

del–删除

abbr–缩写

code–代码标识

cite–引述来源作品的标题

q–引用