系统平台前端设计编码规范分析.doc

系统平台前端设计编码规范 HTML,CSS,JavaScript 对系统平台中涉及到前端设计及编码部分的约定和建议 weiran 2010-2-5  目录 1. 概述 6 1.1. 目的 6 1.2. 范围 6 1.3. 适用角色 6 1.4. 强制性 6 1.5. 文档样式说明 6 2. HTML 设计编码规范 6 2.1. XHTML介绍 6 2.2. XHTML必须遵循的规则 7 XHTML DTD 定义了强制使用的 HTML 元素 7 XHTML 元素必须被正确的嵌套 7 XHTML 元素必须被关闭 7 标签中的id名称在同一个文档内必须唯一 8 标签名必须用小写字母 8 XHTML 文档必须拥有一个根元素 8 属性名称必须小写 8 属性值必须加引号 8 属性不能简写 9 用 Id 属性代替 name 属性 9 2.3. 常用HTML标签编码规则 9 表格table 9 表单form 10 标记label 10 文本框、文本域input text textarea 11 单选、复选框input radio checkbox 11 下拉框select 11 2.4. HTML标签推荐使用表 11 3. CSS设计编码规范 11 3.1. CSS介绍 11 3.2. CSS必须遵循的规则 12 CSS样式应用 12 CSS命名规则 12 CSS目录文件规则 12 CSS注释 13 3.3. 推荐CSS编码规则 13 4. JavaScript设计编码规范 14 4.1. JavaScript的实现组成 14 4.2. JavaScript必须遵循的规则 14 JavaScript编码注意 14 JavaScript兼容性 15 JavaScript与HTML代码分离 15 JavaScript目录文件规则 16 4.3. 推荐的JavaScript插件 16 在线HTML编辑器 16 树形结构 16 日期选择 16 表单验证 17 cookie操作 19 地图导航 20 弹出窗口 21 整体界面 21 4.4. 推荐的JavaScript公共函数 21 日期格式化 21 金额格式化 21 金额大小写 21 数字计算 21  【内部资料 注意保密】 版本：v1.0 武汉市精建工程科技有限公司 信息部 二〇一〇年二月 系统平台前端设计编码规范 概述 目的 为了使前端设计及编码标准化和模块化，从而提高工作效率和资源利用率，增加代码的可阅读性、重用性和继承性而编写。 范围 适用于本部门所有研发项目的前台设计规范和指导，重点倾向于标准和表现。 适用角色 页面前台工程师/网页设计师 强制性 前台工程师在前台界面设计中推荐按照此规范实施。 前台涉及技术主要分为html、 CSS和JavaScript。 文档样式说明 斜体+粗体字：表示需要重点关注的内容。 必须：表示在设计编码时一定要进行的事项。 禁止：表示在设计编码时一定不能进行的事项。 建议：表示在设计编码时可以进行的事项，但根据实际情况可以进行调整。 开发人员：默认为jsp开发人员，非专注前端的前端开发人员。 公司系统平台前端常用规范 结构 作为内部管理的BS系统，常见浏览界面如下： 作为jsp开发人员，仅需关心右侧红框中的界面内容，以上界面为标准浏览页面，主要分为： 题头区域； 即上图部分，该部分为装饰器自动装饰，无需开发人员关注。 搜索区域； 即上图部分； 需标识为【查询条件】； 查询条件及输入框需保证在一行，否则需另起一行； 为保证以上效果在不同分辨率下都能正常显示，需使用span标签包裹查询语句，代码如下： tdspanlabel for=cxtj}查询条件1/labelinput type=text name=cxtj id=cxtj/span/td 注：以上代码仅展示span标签包裹代码，确保其不会换行的css代码如下，且应写入公共css文件中，与开发人员无关： span{ display:inline-block} 操作按钮区域； 按钮可能涉及到大量js代码，可抽为一个jsp页面，再include。 %@ include file=btnoper.jsp% 分页区域； ex控件自带 内容区域（以table为主）。 文本默认靠左，为统一，可设置td的class为text； 数字、日期靠右，可设置td的class为num和date； 金额格式化，逢3位逗号，建议默认保留两位小数，，可设置td的class为sum。 常见编辑页面如下： 可根据编辑内容情况，将其分解，例如：基本信息和施工计量信息，以便用户方便的填写。 对于必填项，必须使用红色星号标识。 对于自动生成或单位，需进行文