网站开发基本流程

（1）产品提出需求，给出产品原型图（RP图）

（2）需求评审—例会进行需求评审，产品经理阐述原型图。
（3）指派研发任务（排期）
（4）阶段验收，根据进度，进行效果验收
（5）功能测试 —测试人员：对完成的功能进行测试，检查BUG。
（6）项目发布—运维人员：对产品上线需要的服务器进行管理，维护。
概述：任何一个Web项目或者系统开发之前都需要定制一个开发约定和规则，这样有利于项目的整体风格统一、代码维护和扩展，只有每个开发人员 都按照一个共同的规范去设
计、沟通、开发、测试、部署，才能保证整个开发团队协调一致的工作，从而提高开发工作效率，提升工程项目质量
UI:负责产品的样式设计，产出设计效果图
前端:负责HTML页面与交互
后端任务：负责业务逻辑的实现和数据库操作

项目规范 

概述：任何一个Web项目或者系统开发之前都需要定制一个开发约定和规则，这样有利于项目的整体风格统一、代码维护和扩展，只有每个开发人员 都按照一个共同的规范去设
计、沟通、开发、测试、部署，才能保证整个开发团队协调一致的工作，从而提高开发工作效率，提升工程项目质量

文件目录

根据项目名称创建项目文件夹。如：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

目录结构参考

文件命名规范 

通过文件名称可以给使用者传达一些有用的信息

对于文件的名称的命名，要尽量做到见词达意。
全部英文小写字母，可以使用中线，不可出现其他字符
如果使用一个单词无法准确描述文件的功能，那么可以使用两个或者多个单词。
这时候推荐使用中划线，也就是减号（-）作为连字符
必要时，lib文件需包含版本号如jquery.1.8.1.js，压缩文件需包含 min 关键词

书写风格（格式化规范）

HTML 书写规范
文档类型声明及编码：

统一为 html5 声明类型；
编码统一为 utf-8

书写规范：

书写时根据页面结构实现层次分明的缩进；
标签必合
属性值必须用双引号包括
通常小写字母

语义化 HTML：

根据页面结构选择合适的标签，属性
如标题根据重要性用 h1-h6不同等级的标签标记 、段落标记用 p、结构简章重复的部分用 ul、li标签
页面中重要的图片内容要添加 alt=””替换文本，以便图片丢失时，用户可以根据替换文本了解页面内容
根据模块内容定义class和id名称，
如包含logo和搜索框等在内的头部标签用.header,包含联系信息，版权等的模块用footer或copyright.

合理嵌套HTML标签：

合理嵌套HTML标签，
ul和li是固定嵌套，ul直接子元素必须是li;
dl和dt,dd是固定嵌套，dl的直接子元素必须是dl和dd;
p标签不允许嵌套p标签;a标签不允许嵌套
a标签和其他交互性元素比如button
尽可能的控制元素嵌套层级，不合理的嵌套会影响页面性能

保证结构与表现相分离：

CSS表现层和JavaScript表现层分别归属于独立的.css和.js文件。
在页面中尽量避免使用行内样式即 style=”…”或行间属性，尽量使用 class 或者 id

css 书写规范

编码格式：

编码统一为 utf-8

书写代码前

（1）确定版心（页面有效区）
（2）考虑样式表规划，提高样式重复使用率；
（3）提前沟通页面中模棱两可的需求和交互效果，方便后续合理布局；

书写风格（格式化规范）

推荐使用小写字母书写
保持代码缩进,每个属性声明末尾都要加分号

.box {
height:100px;
width: 50px;
}

书写规范

合理使用id选择器，id选择器用于唯一的页面结构元素
合理使用全局意义的标签选择器
尽可能不使用通配符选择器
避免选择器嵌套层级过多
注意精简代码
属性值十六进制数值能用简写的尽量用简写
属性值为 0 可以省略单位

css 属性书写顺序：

建议遵循 :
特殊(文档流相关)属性 –> 盒模型 –> 装饰属性 –>内容排版相关
（1）文档流相关属性（display, position, float, clear, visibility,）
（2）盒模型相关属性（width, height, margin, padding, border）
（4）装饰性相关属性（background, opacity, cursor）
（3）内容排版相关属性（color, font, line-height, text-align, text-indent, vertical-align）

图片规范

命名

尽量与其模块样式名称保持关联，
尽量使用小写命名（如登录框的背景与图片：login-bg.jpg、user-pic等）

图片格式

内容图多以商品图等照片类图片形式存在，颜色较为丰富，文件体积较大，优先考虑 JPEG 格式，
背景图多为图标等颜色比较简单、文件体积不大、起修饰作用的图片,优先考虑PNG格式
条件允许的话优先考虑 WebP 格式，PC平台单张的图片的大小建议不大于 200KB

类名命名参考

盒子：box
头部：header、hd
内容：content/container
页面主体：main、bd
页脚：footer
版权：copyright
导航：nav，navbar导航条
子导航：subnav
侧栏：sidebar
栏目：column
文章：article
包装器、外框：wrapper
左右中：left / right / center
列表：list
栏目标题：title
更多：more
登录条：loginbar
标志：logo
广告：banner
友情链接：friendlink
热点：hot
新闻：news
下载：download
加入：join
指南：guild
服务：service
合作伙伴：partner
加入我们：join_us
菜单：menu
子菜单：submenu
搜索：search
标签页：tab
滚动：scroll
提示信息：msg（message）
小技巧、贴士：tips
标签：tag
工具条：tool, toolbar
箭头： arrow
下拉：drop 下拉菜单： dorp_menu