### 前端开发设计规范知识点详解
#### 一、HTML使用规范
##### 1.1 页面文件命名规范
- **命名格式**：遵循“项目名缩写_所属功能_所属功能子项_.jsp/html…”的模式。例如，对于一个电子商务项目的登录功能，可能命名为`EC_login_form.html`。
- **限制**：文件命名中下划线的数量不得超过三个。
- **建议**：文件命名应尽可能简短且明确地表示文件用途。
##### 1.2 页面头部书写规范
- **JSP页面**：应在最开始部分加入以下语句：
```html
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
```
- **HTML页面**：在最开始部分加入以下语句：
```html
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
```
- **HTML5页面**：添加编码格式可以简化为：
```html
<!DOCTYPE html>
<meta charset="utf-8">
```
- **响应式网页**：添加以下语句以支持不同设备的适配：
```html
<meta name="viewport" content="width=device-width, initial-scale=1">
```
- **title元素**：所有页面必须包含title元素（框架页面除外）。title使用中文，内容简洁明了，不超过20个汉字。
- **外部JavaScript引用**：页面加载时所需的JavaScript文件应写在`<head>`标签内，引用时不需写`language`属性，HTML5中可以省略`type`属性。
```html
<script src="path/to/script.js"></script>
```
- **外部CSS文件引用**：必须使用`<link>`方式引入，HTML5中可以省略`type`属性，CSS文件引入要在JavaScript文件之前。
```html
<link rel="stylesheet" href="path/to/style.css">
```
##### 1.3 HTML元素开发规范
###### 1.3.1 HTML元素书写规范
- **代码结构完整性**：确保单个标签必须被正确关闭。
- **缩进**：子元素相对于父元素缩进两个字符。
- **body结构**：`<body>`内的所有内容需要嵌套在另一层`<div>`标签中。
- **样式定义**：除非必要，所有标签样式的定义均应使用CSS文件。
- **img元素**：展示图片需使用`alt`属性添加简要描述，同时具备`width`和`height`属性。
- **form表单**：所有表单需指定`action`属性，方法统一使用`POST`。使用jQuery validate插件进行表单验证。
- **input元素**：不可更改的`input`元素需设置`readonly`属性。
- **注释**：添加简单明了的注释以标识功能模块，并保持良好的代码可读性。
- **废弃标签与属性**：避免使用已过时的HTML标签和属性，通过CSS样式替代。
###### 1.3.2 HTML元素命名规范
- **交互元素命名**：与服务器端交互的元素名称应与后端变量名保持一致或使用“对象名.变量名”的形式。
- **非交互元素命名**：使用元素标签的缩写加后缀方式，采用小驼峰命名法。
#### 二、WEB页面开发规范
##### 2.1 错误跳转页面处理
- **错误代码**：对于常见的HTTP状态码（如404、500等）使用统一的错误页面。
- **信息显示**：所有错误信息使用中文表述，标点符号使用中文半角符号。
- **页面设计**：页面设计需与项目功能相匹配，简洁友好。
##### 2.2 提示信息处理
- **成功提示**：使用弹窗或跳转至统一的成功页面，页面风格与整体风格一致。
- **提示格式**：“成功：[提示信息]！”。
##### 2.3 页面返回
- **返回操作**：使用`history.back()`进行返回操作，避免使用`history.go(-1)`。
##### 2.4 提交前数据验证
- **验证方式**：使用jQuery validate插件进行验证。
- **验证内容**：包括长度验证、为空验证和其他特定验证（如邮箱格式验证）。
- **错误提示**：发现错误时提供明确的错误信息，样式统一为字体颜色`#ff3366`，文字前加红色感叹号图标。
- **表单提示**：可输入表单需具有提示信息，可通过`placeholder`属性或自定义方式定义，字体颜色为灰色。
##### 2.5 删除操作
- **确认机制**：涉及删除操作时，需先提示用户进行确认。
##### 2.6 页面中Java代码使用
- **禁用嵌入**：页面中不得使用`<% %>`方式嵌入Java代码。
##### 2.7 页面布局规范
- **前台页面尺寸**：为了适应不同分辨率屏幕，规定网页尺寸为`width=960px, height=600px`。
- **页面长度**：原则上不超过三屏，宽度不超过一屏。
- **横幅尺寸**：全尺寸横幅尺寸为`468*60px`，半尺寸横幅为`234*60px`，小横幅为`88*31px`。
以上是关于前端开发设计规范的详细说明，涵盖了从HTML编写规范到Web页面开发的多个方面，旨在提高前端开发的质量与效率。
