一、WEB前端开发
规范目的
为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档: 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发: 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改。
二、WEB前端
基本准则
- 符合web标准, 语义化html,遵循内容(HTML)、显示(CSS)、行为(JavaScript)分离的代码组织模式。
- 代码格式化,保持干净整洁。
- 换行必须缩进一个tab。
- 编写所有前台页面时,请使用已有模板进行复制,在模板的基础上进行开发。
- 每一个页面都必须有一个独立的css,js文件。
- 如果不是用HTML5编写的网站,请用IE7,IE8,IE9,火狐, 谷歌,webkit,safari内核进行测试兼容性。
- 如果是HTML5编写的网站,请用IE9,火狐,谷歌,webkit, safari内核进行测试兼容性。
补充说明:
-
-moz代表firefox浏览器私有属性
-
-ms代表ie浏览器私有属性
-
-webkit代表safari、chrome私有属性
-
这些是为了兼容老版本的写法,比较新版本的浏览器都支持直接写:border-radius。
-
现在比较流行的一个概念就是:不太关键的样式,可以不考虑兼容,比如你说的圆角,并不影响内容的显示,如果客户浏览器太旧,就让他看到旧的方形效果就是,一定要看到新效果,只能建议客户升级浏览器。
三、WEB前端文件规范
1.html, css, js, images文件均归档至<系统开发规范>约定的目录中;
2.html文件命名: 英文命名, 后缀:htm: 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名, 以方便后端添加 功能时查找对应页面;
3.css文件命名: 英文命名, 后缀:css: 共用base:css, 首页index:css, 其他页面依实际模块需求命名;
4.Js文件命名: 英文命名, 后缀:js: 共用common:js, 其他依实际模块需求命名;
四、
HTML书写规范
1.所有元素都必须小写,属性也是
,如: <input type=”text” id=”idName” />正确
<INPUT TYPE=”text” ID=”idName” />错误
2.元素必须成对出现
,如<span>必须写成<span></span>特殊元 素除外,如:<br /><hr /><img /><input />
3.标签中不允许出现样式,必须用class来声明样式
,如:
<input type=”text” id=”idName” style=”text-align:right;” />错误
<input type=”text” id=”idName” class=”class-name” />正确
4.元素id命名必须是驼峰式命名如:
<input type=”text” id=”idName” />正确
<input type=”text” id=”idname” />错误
<input type=”text” id=”id-name” />错误
5.元素class命名规范是:
元素简写+”-”+功能名,
如:
<button calss=”btn-save”></button>正确
<button calss=”btnSave”></button>错误
<button calss=”save”></button>错误
6.元素name命名必须遵循驼峰式命名法。
<input type=”text” name=”idName” />正确
<input type=”text” name=”idname” />错误
<input type=”text” name=”id-name” />错误
7.元素属性必须有值:
<input type=”checkbox” checked=”checked” />正确
8.元素属性必须用双引号,不允许使用单引号。
<input type=”checkbox” checked=”checked” />正确
<input type=’checkbox’ checked=’checked’ />错误
9.如果元素需要自定义属性,请用data-xxx方式命名。
10.严禁使用已在XHTML1:0中已移除的标签,
如:
s,i,b,font等
五、HTML其他规范
1.文档类型声明及编码
: 统一为html5声明类型<!DOCTYPE html>; 编码统一为<meta charset=”UTF-8″ />, 书写时利用IDE实现层 次分明的缩进;
2.非特殊情况下样式文件必须外链至<head>:::</head>之间;非特殊情况下JavaScript文件必须外链至页面底部;
3.引入样式文件或JavaScript文件时, 须略去默认类型声明, 写法如下:
Example Source Code [www:52css:com]
<link rel=”stylesheet” href=”:::” />
<style>:::</style>
<script src=”:::”></script>
4.引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版,
比如jquery-1:4:1:min:js; 引入插件, 文件名格式为库名称+插件名称, 比 如jQuery:cookie:js;
5.所有编码均遵循xhtml标准,
标签 & 属性 & 属性命名 必须由小写字母及下划线数字组成, 且所有标签必须闭合, 包括 br (<br />), hr(<hr />)等; 属性值必须用双引号包括;
6.充分利用无兼容性问题的html自身标签
, 比如span, em, strong, optgroup, label,等等; 需要为html元素添加自定义属性的时候, 首先 要考虑下有没有默认的已有的合适标签去设置, 如果没有, 可以使用须以”data-“为前缀来添加自定义属性,避免使用”data:”等其他命名方式;
7.语义化html,
如 标题根据重要性用h*(同一页面只能有一个h1), 段落标记用p, 列表用ul, 内联元素中不可嵌套块级元素;
8.尽可能减少div嵌套
, 如<div class=”box”><div class=”welcome”>欢迎访问XXX, 您的用 户名是<div class=”name”>用户名</div></div></div>完全可以用以下代码替代: <div class=”box”><p>欢迎 访问XXX, 您的用户名是<span>用户名</span></p></div>;
9.书写链接地址时, 必须避免重定向
,例如:href=”http://itaolun:com/”, 即须在URL地址后面加上“/”;
10.在页面中尽量避免使用style属性
,即style=”…”;
11.必须为含有描述性表单元素(input, textarea)添加label
, 如
Example Source Code [www:52css:com]
<p>姓 名: <input type=”text” id=”name” name=”name” /></p>
必须写成:
<p><label for=”name”>姓 名: </label><input type=”text” id=”name” /></p>
12.能以背景形式呈现的图片, 尽量写入css样式中;
13.重要图片必须加上alt属性; 给重要的元素和截断的元素加上title;
14.给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能;
15.特殊符号使用: 尽可能使用代码替代: 比如 <(<) & >(>) & 空格( ) & »(») 等等;
16.书写页面过程中, 请考虑向后扩展性;
六、将标签tab键改为2,默认是4,打开设置的快捷键:ctrl+,(逗号键),然后搜索tabsize即可。