项目规范的

项目规范

### 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、top_nav;

   - 避免使用中文拼音，尽量使用简易的单词组合

   - 常用命名方法二：首字母大写，驼峰式命名，如：topNav

3. 代码格式

4. 保持代码缩进与格式

5. 建议单行书写

6. 选择器

- 尽可能不使用通配符选择器 *

- 合理使用id选择器（页面中唯 一的元素，如头部，底部）

- 避免使用标签限定id或者类选择器

  - 如：div#test { }   p.box {}

- 避免层集嵌套

#### 3.4 css 属性书写顺序

- 建议遵循：

- 特殊(文档流相关)属性 –> 盒模型 –> 装饰属性 –>内容排版相关

  1. 文档流相关属性（display、 position、float、clear、 visibility）

  2. 盒模型相关属性（width、 height、margin、padding、border）

  3. 装饰性相关属性（background、opacity、cursor）

  4. 内容排版相关属性（color、font、line-height、text-align、text-indent、vertical-align）

- 书写代码过程中要兼容兼容问题，对熟知的兼容问题在书写代码过程中一并处理。

#### 3.5 类名命名参考

main  页面主体

tag 标签

msg message 提示信息

tips  小技巧

vote  投票

friendlink友情链接

title 标题

summary 摘要

login_bar 登录条

search_input  搜索输入框

hot 热门热点

search  搜索

search_output 搜索输出和搜索结果相似

search_bar  搜索条

search_results  搜索结果

copyright 版权信息

branding  商标

logo  网站LOGO标志

site_info 网站信息

site_info_legal 法律声明

site_info_credits 信誉

join_us 加入我们

partner 合作伙伴

service 服务

regsiter  注册

arr arrow 箭头

guild 指南

site_map  网站地图

list  列表

home_page 首页

sub_page  二级页面子页面

tool, toolbar 工具条

drop  下拉

dorp_menu 下拉菜单

status  状态

scroll  滚动

tab 标签页

left right center 居左、中、右

news  新闻

download  下载

## 项目介绍

### 1、项目名称

小U课堂

### 2、项目描述

小U课堂是优就业打造的在线实用技能学习平台，我们要完成 首页、同步课程、在线练习，精品课程、视频详情、登录、注册页面、个人中心等静态页面的制作。

### 3、项目页面（预览）

- 首页

- 列表页

- 详情页

- 其他

- 开发工具以及技术栈

  - 开发工具

    - VScode

      Photoshop

      主流浏览器

  - 技术栈

    - 利用 HTML5 + CSS3布局

- 采取结构与样式相分离，模块化开发

## 项目规划与项目搭建

概述：基于项目页面效果图分析，创建项目文件目录。

分析页面公共模块，规划创建公共模块的样式表文件，如页面头部和底部，方便重复使用。

### 1、文件目录

概述：根据项目名称创建项目文件夹，推荐用对应的英文单词命名。

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

#### 1.1、目录示例

- 项目文件夹

  - 样式类图片文件夹（images）

  - 样式文件夹（css）

  - 字体类文件夹（fonts）

  - 脚本文件夹（js）

  - 产品类图片文件夹（upload）

  ```

  ----webset

  - ---/html/

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

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

    ---/css/

    |---- /base.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、样式文件

#### 2.1、公共样式(common.css)

说明：有些样式和结构在很多页面都会出现，如页面头部和底部，此时，可以把这些结构和样式单独作为一个公共模块，方便重复使用。

#### 2.2、初始化样式（reset.css）

- 解释为什么要重置浏览器样式

- 总结重置样式

## 项目模块化开发

将一个项目按照功能划分，一个功能一个模块，互不影响，模块化开发具有重复使用、更换方便等优点。

- 首页整体画块分析

- 首页头部画块分析、布局讲解

- 首页【同步课程模块】布局讲解，渗透margin负值的应用

- 在线练习页【选项卡】模块讲解

- 登录、注册弹框讲解

## 网站favicon

favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。目前主要的浏览器都支持 favicon.ico 图标。

### 1、制作favicon图标

1. 把图标切成 `png` 图片

2. 把 `png` 图片转换为 `ico` 图标，这需要借助于第三方转换网站，例如比特虫：http://www.bitbug.net/

### 2、使用favicon图标

1. favicon图标放到网站根目录下

2. HTML页面引入favicon图标

## 网站TDK

SEO是英文Search Engine Optimization的缩写，译为搜索引擎优化，是按照搜索引擎自然排名机制，优化调整站内和站外，提高或者保持网站在搜索引擎中关键词自然排名，以获得更多流量（带来更多的访问），达成网站销售及品牌建设的目标。

### 1、description（网站描述）

简要说明我们网站主要是做什么的。

description 作为网站的总体业务和主题概括，多采用“我们是…”、“我们提供…”、“×××网作为…”、“电话：010…”之类语句。

```HTML

<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />

```

### 2、title(网站标题)

- 是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。

- 通常是网站名（产品名）- 网站的介绍（尽量不要超过30个汉字）

```html

<title>京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>

```

### 3、keywords（关键字）

- 页面关键词，是搜索引擎的关注点之一。

- keywords 最好限制为 6～8 个关键词，关键词之间用英文逗号隔开，采用 关键词1,关键词2 的形式

  ```html

  <meta name= " keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />

  ```

  **注意**：对于我们前端人员来说，我们只需要准备好这三个标签，具体里面的内容，有专门的 SEO 人员准备！