前端开发设计规范文档.docx编程资料_前端设计文档资源-CSDN文库

版权申诉

5星 · 超过95%的资源 180 浏览量 2022-04-06 07:32:01 上传评论收藏 212KB DOCX 举报

### 前端开发设计规范知识点详解 #### 一、HTML使用标准 ##### 1.1 页面文件命名标准 - **命名格式**：遵循“工程名缩写_所属功能_所属功能子项_.jsp/html…”的规则。例如，对于一个名为“CMS”的项目，“文章管理”功能下的“编辑文章”子功能页面可以命名为`CMS_art_edit.jsp`。 - **限制条件**：文件命名中下划线的数量不得超过三个，并且命名应尽量简洁、明确地表示文件用途。 ##### 1.2 页面head局部书写标准 - **JSP页面**：需在最顶部加入特定语句。 - **HTML页面**：同样需在最顶部加入指定语句。 - **HTML5页面**：简化编码声明。 - **响应式网页**：添加特定元信息。 - **Title元素**：必需包含标题，中文表示，简洁且不超过20个汉字。 - **外部JS引用**：在`<head>`标签中添加JS文件引用，无需指定`language`属性，HTML5中可省略`type`属性。 - **外部CSS引用**：使用`<link>`标签引入CSS文件，并放置在JS文件之前加载。 ##### 1.3 HTML元素开发标准 ###### 1.3.1 HTML元素书写标准 - **代码完整性**：确保每个HTML标签都有闭合标签。 - **缩进**：子元素相对于父元素缩进两个字符。 - **内容包裹**：所有内容应嵌套在一个顶层`<div>`标签内。 - **样式定义**：尽可能通过外部CSS文件定义样式。 - **图像元素**：使用`alt`属性描述图像内容，且必须设置`width`和`height`属性。 - **表单元素**：所有表单必须指定`action`属性（即使为空），方法统一使用`POST`。表单提交前需进行验证。 - **只读输入**：不可修改的`<input>`元素应设置`readonly`属性。 - **注释**：添加清晰的注释以标识模块的开始和结束。 - **过时标签**：避免使用过时的HTML标签，改用CSS替代。 ###### 1.3.2 HTML元素命名标准 - **命名一致性**：与服务端交互的元素名称需与服务端变量一致。 - **ID和NAME规则**：ID和NAME属性应统一，采用“元素类型缩写_后缀”的形式，其中后缀采用小驼峰命名法。 #### 二、WEB页面开发标准 ##### 2.1 错误跳转页面处理 - **错误代码**：针对不同的HTTP状态码使用相应的错误页面。 - **错误信息**：统一使用中文显示错误信息，并使用中文半角符号。 - **页面设计**：确保错误页面的设计与项目整体风格一致，简洁友好。 ##### 2.2 提示信息处理 - **成功提示**：成功消息可通过弹窗或跳转到统一的成功页面显示。 - **消息格式**：“成功：[提示信息]！” ##### 2.3 页面返回 - **返回机制**：使用`history.back()`实现返回上一页的功能。 ##### 2.4 提交前数据验证 - **验证规则**：所有用户输入的数据在提交前均需验证。 - **验证工具**：使用jQuery Validate插件。 - **验证类型**： - 长度验证：根据数据库字段的最大长度设置。 - 空值验证：确保必填项不为空。 - 其他验证：根据输入类型（如电子邮件地址）进行验证。 - **错误提示**：使用特定的颜色和图标突出显示错误信息。 ##### 2.5 删除操作 - **确认提示**：执行任何删除操作前，需先获得用户的确认。 ##### 2.6 页面中Java代码使用 - **禁用嵌入**：禁止在HTML页面中直接使用`<% %>`嵌入Java代码。 ##### 2.7 网站页面布局标准 - **屏幕尺寸**：根据不同分辨率设置页面宽度以适应不同设备。 - **页面尺寸**：建议网页宽度为960px，高度为600px。 - **页面长度**：原则上不超过三屏长度。 - **全尺寸Banner**：推荐大小为468×60像素。以上规范总结了前端开发过程中需要遵循的关键原则和技术细节，旨在提高代码质量和页面的用户体验。遵循这些标准有助于构建出既美观又易于维护的Web应用程序。

资源推荐

资源评论