项目文件夹规范

# 项目规范

 

### 1、项目文件夹

 

- 根据项目名称创建项目文件夹。如：ushop

 

-  html、css、img、js 文件均归档至项目名称目录中

 

- HTML 文件、根据页面内容以英文命名，首页或只有一个页面通常命名为index.html

 

- css 文件以英文命名

 

  - 公用样式通常命名为reset.css（常用的浏览器样式）

 

  - public.css（多个页面时的公共模块的样式，或多次重复使用字体、字号、间距等样式）

  - 首页通常命名为index.css, 其他页面依实际模块或功能需求命名

 

- 图片文件命名尽量与其模块样式名称保持关联，尽量使用小写命名

  - （如登录框的背景与图片：login_bg.jpg、login_user_ico.gif 等）

  - 常用图片格式 gif 、png 、jpg

 

**目录结构参考**

 

```

---/html/

|---- /user/                    与用户相关的页面  

|---- /user/login.html          登录页

---/css/

|---- /reset.css                 重置浏览器样式    

|---- /page                        其他页面的css

|---- /page/pagename.css         单独某个页面的css

|---- /common.css                  css通用样式库

---/js/

|---- /lib                      公用组件

|---- /lib/jquery.2.2.3.min.js  调用jq库文件 

|---- /page                          其他页面的js

|---- /page/pagename.js         单独书写的js

|---- /common.js                公用方法

---/img/

|---- /page                     其他页面对应的图片

|---- /page/wap                 手机端图片夹

|---- /page/wap/wap_icon.png    手机端图标

|---- /logo.png                 公用图片

```

 

### 2、HTML 书写规范

 

#### 2.1 文档类型声明及编码

 

-  统一为 html5 声明类型

- 编码统一为 utf-8

 

####  2.2 书写规范

 

- 书写时根据页面结构实现层次分明的缩进

- 标签必合

- 属性值必须用双引号包括

- 通常小写字母

 

#### 2.3 语义化 HTML

 

- 根据页面结构选择合适的标签

  - 如标题根据重要性用 h1-h6不同等级的标签标记 、段落标记用p，结构简章重复的部分用 ul、li标签

  - 页面中重要的图片内容要添加 alt=“”替换文本，以便图片丢失时，用户可以根据替换文本了解页面内容

 

- 根据模块内容定义class和id名称

  - 如包含logo和搜索框等在内的头部标签用.header,包含联系信息，版权等的模块用footer或copyright

 

#### 2.4 合理嵌套HTML标签

 

-  合理嵌套HTML标签，

  - ul和li是固定嵌套，ul直接子元素必须是li;

  - dl和dt,dd是固定嵌套，dl的直接子元素必须是dl和dd;

  - p标签不允许嵌套p标签;a标签不允许嵌套

  - a标签和其他交互性元素比如button

 

- 尽可能的控制元素嵌套层级，不合理的嵌套会影响页面性能

 

####  2.5 保证结构与表现相分离

 

- CSS表现层和JavaScript表现层分别归属于独立的.css和.js文件。

 

- 在页面中尽量避免使用行内样式即 style=“”或行间属性，尽量使用 class 或者 id 

 

### 3、css 书写规范

 

#### 3.1 编码

 

编码统一为 utf-8

 

#### 3.2 书写代码前

 

1. 确定版心（页面有效区）

2. 考虑样式表规划，提高样式重复使用率

3. 提前沟通页面中模棱两可的需求和交互效果，方便后续合理布局

4. 布局时考虑后续交互效果处理的便利性，必要时预留出交互效果中涉及到的样式类（如鼠标点击后的样式等）

 

#### 3.3 书写代码时

 

1. 添加注释：应该为大区块样式添加注释 ，小区块适量注释

 

2. class 与 id 的命名

 

   - 命名要语义化、简明化

 

   - CSS命名时要加前缀如：.zg_top{}

 

   - 常用命名方法一：样式名称由小写英文、数字和 _ 来组合命名，如 top_left、to