Web前端开发规文件规为输出高质量的Web页面，提高团队协作效率，便于后台人员添加功能及前端后期优化与维护，如有错误及时提出更改。
1、html，css，js，images,fonts等文件目录组织如下如示：├── xxx.html├── css/│ ├── index.css│ ├── header.css│ ├── footer.css│ └── 2016/│ │ ├── content.css│ │ └── nav.css├── js/│ ├── xxx.js│ ├── xxx_min-tab.js│ └── 2016/└── images/│ ├── index_head.jpg│ ├── index_logo.gif│ └── 2016│ │ ├── xxx.jpg│ │ └── xxx.png└── fonts/└── xxx.ttf文件命名原则调整为所有字母小写，单词之间使用破折号（-）相连，压缩后的文件在原文件名（除扩展名）后添加.min。
参考bootstrap文件命名：bootstrap-theme.css, bootstrap-theme.min.css。
常用目录名：data(数据库) images(图片) install (安装) templets (模版) include (包含) admin (后台) rss (定阅) media (媒体) config (配置) Script (脚本) Language (语言) style (样式);引入 CSS 和 JavaScript 文件<link rel="stylesheet" href="code-guide.css"><style>/* ... */</style><!-- JavaScript --><script src="code-guide.js"></script>class 用于标识高度可复用组件，因此应该排在首位。
id 用于标识具体组件，应当谨慎使用（例如，页面的书签），因此排在第二位。
<a class="..." id="..." data-modal="toggle" href="#">Example link</a><input class="form-control" type="text"><img src="..." alt="...">编写 HTML 代码时，尽量避免多余的父元素。
很多时候，这需要迭代和重构来实现。
<span class="avatar"><img src="..."></span>参考如下：<img class="avatar" src="...">其他要求●css文件外链至<head></head>之间，js文件置于</body>之前。
●语义化HTML，如标题根据重要性用h*(同一页面只能有一个h1)，段落标记用p，列表用ul，联元素中避免嵌套块级元素。
●书写地址时，建议在URL地址后面加上"/"，例如：href="/"。
●在页面中不能使用style属性，即style="…"；所有样式必须写在css文件中。
●必须为含有描述性表单元素(input，textarea)添加label，如：<p>:<inputtype="text"id="name"name="name"/></p>须写成：<p><labelfor="name">：</label><inputtype="text"id="name"/></p>●能以背景形式呈现的图片，尽量写入css样式中。
●给重要的元素和截断的元素加上title。
●建议给区块代码及重要功能（比如循环）加上注释，方便后台添加功能。
●不是标签一部分的特殊符号都用编码表示，出现在容中的特殊符号都需要用编码形式表现出来，如：<：<，>：>，&）：&，"："，尽量使用 代替空格。
●图片标签必须要有alt属性，如只起修饰作用而没有任何意义的图片可设置alt属性值为空。
如：<imgsrc="a.gif"alt="">。
CSS规1. css文件命名: 英文命名, 后缀.css. 共用首页单独定义.css部分，其他页面依实际模块需求命名.;2. Js文件命名: 英文命名, 后缀.js. 共用.js, 其他依实际模块需求命名.3. 文档类型声明及编码: 统一为html5声明类型<!DOCTYPE html>; 编码统一为<meta charset="utf-8" />, 书写时实现层次分明的缩进;4. 非特殊情况下样式文件必须外链至<head>...</head>之间;非特殊情况下JavaScript 文件必须外链至页面底部;5. 引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js;6. 语义化html, 如标题根据重要性用h*(同一页面只能有一个h1), 段落标记用p, 列表用ul, 联元素中不可嵌套块级元素;7 尽可能减少div嵌套, 如完全可以用以下代码替代: 8. 书写地址时, 必须避免重定向，例如：.qianxiuwang. 即须在URL地址后面加上“/”；9. 能以背景形式呈现的图片, 尽量写入css样式中;10. 重要图片必须加上alt属性; 给重要的元素和截断的元素加上title;11. 给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能;12.. 书写页面过程中, 请考虑向后扩展性;13. 必须为大区块样式添加注释, 小区块适量注释;14. 代码缩进与格式: 建议单行书写;书写规参考搜狐CSS板式.sohu./upload/style/style150302.css.sohu./upload/style/layout130716.css.sohu./upload/style/global130716.css例如css规news (性质)news_title (性质_描素)news_title_top (性质_描素_位置)news_title_top_01 (性质_描素_位置_数量)news_title_top_a_01 (性质_描素_位置_分类_数量)news_title_top_b_01 (性质_描素_位置_分类_数量)例如html规<div class="main"><div class="mtb10 clearfix"><div class="logo"><img src="#" title="" alt="" /></a></div><div class="fl"><a href="#" target="_blank">关注我们</a></div></div></div></div>注释部分Html注释<!-- header-->注释容区<!-- end header -->css注释中文命名注释/*----------------------------导航栏----------------------------*/ JavaScript注释单行注释使用'//这儿是单行注释' ,多行注释使用/* 这儿有多行注释*/;图片规1、图片格式仅限于gif、png、jpg，图标、按钮等采用透明背景为主；除需要透明的图片使用png、gif外其他图片都采用jpg格式。
为尽量控制文件大小，大尺寸图片应避免使用png，尽量使用jpg，运用css sprite技术集中小的背景图或图标, 减小页面http请求。
2、命名全部使小写英文字母、数字和破折号（-）的组合，其中不得包含汉字、空格和特殊字符。
尽量使用易懂的词汇，便于其他人理解。
如：ad-left.gif、btn-submit.jpg；3、在保证视觉效果的情况下选择最小的图片格式与图片质量，以减少加载时间。
尽量减少使用半透明的png图片。
命名规头：header容：content/container尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper 左右中：left right center登录条：loginbar标志：logo广告：banner页面主体：main热点：hot新闻：news下载：download子导航：subnav菜单：menu子菜单：submenu搜索：search友情：friendlink页脚：footer：copyright滚动：scroll容：content标签页：tab文章列表：list提示信息：msg小技巧：tips栏目标题：title加入：joinus指南：guild服务：service注册：regsiter状态：status投票：vote合作伙伴：partner。