前端开发设计规范文档.pdfVIP

前端开发设计规范 目录 一、HTML 使用规范 、页面文件命名规范 命名格式为：项目名缩写_所属功能_所属功能子项_... .jsp/html…，文件命名下划线不能超 过三个，命名尽量使用简短的能明确表明文件用途的英文或者英文简写。 、页面 hea 部分书写规范 1) 、JSP 页面：需要在页面的最开始部分增加以下语句： 2) 、HTML 页面：需要在页面的最开始部分增加以下语句： 3) 、HTML5 页面：页面添加编码格式可简写为： 4) 、响应式的网页添加如下语句： 5) 、title 元素：一般网页必须添加 title 元素，若为框架页面，则可以不写。title 统 一使用中文，title 内容要简洁明了，不能超过 20 个字。 6) 、外部 js 的引用：页面加载时需要用到的 js 文件写在 hea 中，引用时不用写 language 属性，HTML5 可以省略 type 属性，如。 7) 、外部CSS 文件的引用：必须使用 link 方式引入，HTML5 可以省略 type 属性，CSS 文 件引入要放在 js 文件前。 、HTML 元素开发规范 1) 、代码的结构要保持完整性，单个标签必须要关闭，如：div/div，br/等。 2) 、子元素要比父元素缩进两个字符。 3) 、body 中的所有内容不能直接书写在body/body标签中，需要在 body 中嵌入一层 div，所有的元素需要写在改 div 中。 4) 、除非必要，所有标签元素的样式都需要使用 CSS 文件来定义。 5) 、img 元素：所有展示用图片都要使用 alt 属性添加能简要描述图片的文字说明，如 首页的广告图片等，必须具有 width 和 height 属性。 6) 、所有 Form 都要指定 action 属性，但属性值需要则填写，不需要则留空，metho 属 性统一使用 POST；所有 form 表单都要在提交前对输入的数据前进行验证，验证使用 jQuery validate 插件，书写规范如下： 7) 、所有不可更改的input元素都要设置readonly属性。 8) 、按功能模块添加简单明了的注释，在功能模块的开始标明模块开始，结束时标明模 块结束，注释单独占一行；模块之间留行间隔便于查看代码。 9) 、已过时的元素标签使用CSS样式来代替，已过时的标签属性禁止使用，使用CSS样 式定义来实现。 涉及到跟服务端交互的元素，元素命名应当与服务端程序中定义的对应变量名相同，或使用对 象名.变量名的形式。 页面上使用到的不涉及与服务端交互的HTML元素其id和name需统一，所有命名使用元素标签 的缩写_后缀方式,后缀命名使用小驼峰命名法即第一个单词全部使用小写，其他单词首字母大 写，常见元素命名规则如下表所示： text输入框 txt txt_userName button按钮 btn btn_check select下拉选择 sel sel_beginTime checkbox多选项 chk chk_departmentNumber div标记 div div_result submit提交按钮 sub sub_register hidden 隐藏值 hdn hdn_userId 二、WEB页面开发规范 、错误跳转页面的处理 400、401、403、404、405、406、407、410、412、414、500、501、502等错误代码使用其相 应的统一页面，所有错误信息全部使用中文错误信息，标点符号使用中文半角符号。页面设计 与项目功能相匹配，做到简洁友好。 、提示信息的处理 成功提示信息可以使