(完整word版)WEB前端开发代码使用要求规范.pdf
《(完整word版)WEB前端开发代码使用要求规范.pdf》由会员分享,可在线阅读,更多相关《(完整word版)WEB前端开发代码使用要求规范.pdf(10页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、实用文档文案大全WEB 前端代码规范规范目的为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,特制订此文档。本规范文档一经确认,前端开发人员必须按本文档规范进行前台页面开发。本文档如有不对或者不合适的地方请及时提出,经讨论决定后方可更改。基本准则符合 web标准;语义化 html;结构、表现、行为分离;兼容性优良。页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度。文件规范1.Html,css,js,images 文件均归档至相应约定的目录中。2.html 文件命名:英文驼峰式命名,文件名.html。按实际模块需求命名。WebRootba
2、ckStagecssimagesjs后台模块 frontStagecssimagesjs前台模块 WEB-INF全局公共模块精品资料-欢迎下载-欢迎下载 名师归纳-第 1 页,共 10 页 -实用文档文案大全3.jsp 文件命名:英文驼峰式命名,文件名.jsp。按实际模块需求命名。4.css 文件命名:英文驼峰式命名,文件名.css。共用 base.css,首页 index.css,其他页面按实际模块需求命名。5.js 文件命名:英文驼峰式命名,文件名.js。共用 common.js,其他依实际模块需求命名。html 书写规范1.文档类型声明及编码:统一为 html5 的声明类型;编码统一为,
3、书写时利用 IDE实现层次分明的缩进。2.非特殊情况下 css 文件必须在.之间引入,选择link方式引入而非import 形式。3.非特殊情况下 js 文件必须在页面底部引入。4.引入样式文件或 JavaScript文件时,须略去默认类型声明,写法如下:.5.引入 JS库文件,文件名须包含库名称及版本号及是否为压缩版,比如:jquery-1.4.1.min.js;6.引入插件,文件名格式为库名称+插件名称,比如:jQuery.cookie.js。7.所有 HTML 标签嵌套必须是正确的,禁止出现多出或者少出闭合标签的情况。8.所有编码均遵循 xhtml 标准,标签、属性、属性命名必须由小写字
4、母及下划线数字组成,且所有标签必须闭合,包括br(),hr()等;属性值必须用双引号包括。9.充分利用无兼容性问题的html 自身标签,比如 span、em、strong、optgroup、label 10.需要为 html 元素添加自定义属性的时候,首先要考虑下有没有默认的已有的合适标签去设置,如果没有,须以 data-为前缀来添加自定义属性,避免使用data:等其他命名方式。精品资料-欢迎下载-欢迎下载 名师归纳-第 2 页,共 10 页 -文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5
5、P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:C
6、P3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ
7、1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1
8、H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码
9、:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5
10、HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 Z
11、P1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1文档编码:CP3T7X4G6C5 HZ1H8K6M7E5 ZP1H5P10E6H1实用文档文案大全11.语义化 html,如标题根据重要性用h1-h6(同一页面只能有一个h1),段落标记用 p,列表用 ul,内联元素中不可嵌套块状元素。12.尽可能减少 div 的嵌套层数。13.在页面中尽量避免使用内嵌样式表,即在标签内使用 style=。14.以背景形式呈现的图片,尽量写入css 样式中;重要图片必须加上alt 属性;15.特殊符号使用:尽可能使用代码替代:比如(>)、空格(&nbs
12、p;)、&(&)、”(")等等;16.尽量避免使用过度复杂的HTML 结构。css 书写规范1.编码统一为 utf-8。2.为了避免一些浏览器兼容性问题以及增加样式重用性,每个页面必须引入base.css(详见附件一),此文件不可随意修改。3.class 与 id 的使用:id 是唯一的并是父级的,class 是可以重复的并是子级的,所以id仅使用在大的模块上,class 可用在重复使用率高及子级中。4.为 JavaScript预留钩子的命名,请以js_ 起始,比如:js_hide,js_show。5.class 与 id 命名:使用英文命名,命名要语义化,简明化,但不要使用
13、诸如 first,last之类的命名。使用驼峰式和下划线分隔相结合的命名规则,即命名应以父级加子级的命名规范,如:父级的类为simple 子级的类应该为simple_first,以此类推,但是尽量避免出现超过四级的类命名。6.css 属性书写顺序,建议遵循:自身属性-布局定位属性-文本属性-其他属性。此条可根据自身习惯书写,但尽量保证同类属性写在一起。属性列举:自身属性主要包括:width、height、margin、padding、border、background;布局定位属性主要包括:display、list-style、position(相应的 top、right、bottom、lef
14、t)、float、clear、visibility、overflow;文本属性主要包括:color、font、text-decoration、text-align、vertical-align、white-space 精品资料-欢迎下载-欢迎下载 名师归纳-第 3 页,共 10 页 -文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10
15、U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D1
16、0U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D
17、10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8
18、D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D
19、8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7
20、D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I
21、7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3实用文档文案大全其他:content;7.书写代码前,考虑并提高样式重复使用率。8.充分利用 html 自身属性及样式继承原理减少代码量。9.样式表中中文字体名,请务必转码成unicode 码,以避免编码错误时乱码。10.背景图片请尽可能使用sprite技术,减小 http 请求,考虑到多人协作开发,sprite按模块制作。11.使用 table 标签时(尽量避免使用 table 标
22、签),请不要用 width、height、cellspacing、cellpadding等 table 属性直接定义表现,应尽可能的利用table 自身私有属性分离结构与表现,如:thead、tr、th、td、tbody、tfoot、colgroup、scope。12.用 png 图片做图片时,要求图片格式为png-8 格式,若 png-8 实在影响图片质量或其中有半透明效果,请为ie6 单独定义背景:_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src
23、=img/bg.png);13.避免兼容性属性的使用,比如text-shadow、css3 的相关属性;14.减少使用影响性能的属性,比如position:absolute、float;15.代码缩进与格式:开发阶段单行书写,系统交付时可再将所有css 进行压缩;使用 Tab键进行缩进,每层缩进一个Tab键16.背景重复,确保使用的图片在与迭代方向相同的长度要大于1 像素而小于 10 像素。简单点说,就是 x 轴迭代,宽度要在1 和 10 之间,y 轴迭代,长度要在1 和 10 之间。JavaScript书写规范1.文件编码统一为 utf-8,书写过程过,每条语句必须以分号结束。2.变量命名:
24、驼峰式命名。首字母须小写,如:iTaoLun。3.类命名:驼峰式命名。首字母大写,如:ITaoLun。4.函数命名:驼峰式命名。首字母小写。如:iTaoLun()。5.构造函数命名:全部大写。精品资料-欢迎下载-欢迎下载 名师归纳-第 4 页,共 10 页 -文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10
25、A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W10A3文档编码:CA2K10I6K1O4 HC5I7D8D10U7 ZK8B2F1W1
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 完整 word WEB 前端 开发 代码 使用 要求 规范
限制150内