托普康儿-
页眉内容
前端开发设计规范
目录
前端开发设计规范
............................. .................................................. ..................
错
误
!
未定义书签。
一、
HTML
使用规范
....................... .................................................. ...................
错
误
!
未定义书签。
1.1
、页面文件命名规范
.
................ .................................................. ...........
错
误
!
未定义书签。
1.2
、页面
head
部分书写规范
......... .................................................. ........
错
误
!
未定义书签。
1.3
、
HTML
元素开发规范
........... .................................................. ............
错
误
!
未定义书签。
.. .................................................. .................................................. .............
错
误
!
未定义书签。
. .................................................. .................................................. ..............
错
误
!
未定义书签。
二、
WEB
页面开发规范
.
............. .................................................. ......................
错
误
!
未定义书签。
2.1
、错误跳转页面的处理
........................ .................................................
错
误
!
未定义书签。
2.2
、提示信息的处理
.......................... .................................................. ......
错
误
!
未定义书签。
2.3
、页面的返回
.
................... .................................................. ......................
错
误
!
未定义书签。
2.4
、提交前数据的判断验证
.
.............. .................................................. ....
错
误
!
未定义书签。
2.5
、删除操作
............................. .................................................. .................
错
误
!
未定义书签。
2.6
、页面中
java
代码的使用
.
.... .................................................. ..............
错
误
!
未定义书签。
2.7
、网站页面布局规范
.
................ .................................................. ...........
错
误
!
未定义书签。
... .................................................. .................................................. ............
错
误
!
未定义书签。
.. .................................................. .................................................. .............
错
误
!
未定义书签。
页眉内容
................................ .................................................. .................................
错
误
!
未定义书签。
............... .................................................. ..................................................
错
误
!
未定义书签。
三、
javaScript
开发规范
.
........ .................................................. .............................
错
误
!
未定义书签。
3.1
、
javaScript
文件命名规范：
.... .................................................. ..........
错
误
!
未定义书签。
3.2
、
javaScript
开发规范
.
.. .................................................. .........................
错
误
!
未定义书签。
............... .................................................. ..................................................
错
误
!
未定义书签。
............... .................................................. ..................................................
错
误
!
未定义书签。
四、
css
样式规范
.
............... .................................................. ..................................
错
误
!
未定义书签。
4.1
、
css
样式文件命名规范
.............. .................................................. .......
错
误
!
未定义书签。
....... .................................................. .................................................. ........
错
误
!
未定义书签。
...... .................................................. .................................................. .........
错
误
!
未定义书签。
..... .................................................. .................................................. ..........
错
误
!
未定义书签。
4.2
、
css
样式文件存放目录规范
............ ..................................................
错
误
!
未定义书签。
4.3
、
css
样式定义规范
.
....... .................................................. .......................
错
误
!
未定义书签。
............... .................................................. ..................................................
错
误
!
未定义书签。
............... .................................................. ..................................................
错
误
!
未定义书签。
............... .................................................. ..................................................
错
误
!
未定义书签。
............... .................................................. ..................................................
错
误
!
未定义书签。
............... .................................................. ..................................................
错
误
!
未定义书签。
4.4
、
css
样式书写规范
.
....... .................................................. .......................
错
误
!
未定义书签。
页眉内容
............................................. .................................................. ....................
错
误
!
未定义书签。
............................................. .................................................. ....................
错
误
!
未定义书签。
............................................. .................................................. ....................
错
误
!
未定义书签。
............................................. .................................................. ....................
错
误
!
未定义书签。
Hack
的使用
.
................ .................................................. ......................
错
误
!
未定义书签。
............... .................................................. ..................................................
错
误
!
未定义书签。
............... .................................................. ..................................................
错
误
!
未定义书签。
............... .................................................. ..................................................
错
误
!
未定义书签。
4.5
、
css
样式引用规范
.
....... .................................................. .......................
错
误
!
未定义书签。
4.6
、媒体内容命名规范
.
................ .................................................. ...........
错
误
!
未定义书签。
五、项目文件存放规范
.
...................... .................................................. ...............
错
误
!
未定义书签。
六、前端开发规则
............................. .................................................. ..................
错
误
!
未定义书签。
页眉内容
一、
HTML
使用规范
1.1
、页面文件命名规范
命名格式为：项目名缩写
_
所 属功能
_
所属功能子项
_...
.jsp/html
…，文件命名 下划线
不能超过三个，命名尽量使用简短的能明确表明文件用途的英文或者英文简写。
1.2
、页面
head
部分书写规范
1)
、
JSP
页面：需要在页面的最开始部分增加以下语句：
2)
、
HTML
页面：需要在页面的最开始部分增加以下语句：
3)
、
HTML5
页面：页面添加编码格式可简写为：
4)
、响应式的网页添加如下语句：
5)
、
title
元素：
一般网页必须添加
title
元素，
若 为框架页面，
则可以不写。
title
统一使用中文，
title
内 容要简洁明了，不能超过
20
个字。
6)
、外部
js
的引用：页面加载时需要用到的
js
文件写在
head
中，引 用时不用写
language
属性，
HTML5
可以省略
type< br>属性，如。
7)
、
外部
CSS
文件的引 用：
必须使用
link
方式引入，
HTML5
可以省略
ty pe
属性，
CSS
文件引入要放在
js
文件前。
1.3
、
HTML
元素开发规范
1)
、
代码的结构要保持完整性，单个标签必须要关闭，如：
，< br>
等。
2)
、子元素要比父元素缩进两个字符。
3)
、
body< br>中的所有内容不能直接书写在
标签中，需要在
bo dy
中嵌入
页眉内容
一层
div
，所有的元素需要写在改
div
中。
4)
、除非必要，所有标签元素的样式都需要使用
CSS
文件来定义。
5)
、
img
元素：所有展示用图片都要使用
alt属性添加能简要描述图片的文字说明，
如首页的广告图片等，必须具有
width
和
height
属性。
6)
、所有
Form< br>都要指定
action
属性，但属性值需要则填写，
不需要则留空，
m ethod
属性统一使用
POST
；所有
form
表单都要在提交前 对输入的数据前进行验证，验证
使用
jQuery validate
插件，书写规范如下：
7)
、所有不可更改的
input
元素都要设置
readonly
属性。
8)
、
按功能模块添加简单明了的注释，
在功能模块的开始标明模 块开始，
结束时标明
模块结束，注释单独占一行；模块之间留行间隔便于查看代码。
9)
、已过时的元素标签使用
CSS
样式来代替，已过时的标签属 性禁止使用，使用
CSS
样式定义来实现。
涉及到跟服务端交互的元素，< br>元素命名应当与服务端程序中定义的对应变量名相同，
或
使用对象名
.
变量名的形式。
页面上使用到的不涉及与服务端交互的
HTML
元素其id
和
name
需统一，所有命名使用
元素标签的缩写
_
后缀方式
,
后缀命名使用小驼峰命名法即第一个单词全部使用小写，
其他单
词首字母大写，常见元素命名规则如下表所示：
HTML
元素
text
输入框
button
按钮
select
下拉选择
checkbox
多选项
div
标记
submit
提交按钮
hidden
隐藏值
缩写
txt
btn
sel
chk
div
sub
hdn
示例
txt_userName
btn_check
sel_beginTime
chk_departmentNumber
div_result
sub_register
hdn_userId
页眉内容
二、
WEB
页面开发规范
2.1
、错误跳转页面的处理
400
、
401
、
403
、
404
、
405
、
406
、407
、
410
、
412
、
414
、
500
、
501
、
502
等错误代码使
用其相应的统一页面 ，所有错误信息全部使用中文错误信息，标点符号使用中文半角符号。
页面设计与项目功能相匹配，做到 简洁友好。
2.2
、提示信息的处理
成功提示信息可以使用弹窗 或跳转统一成功页面的方式，
成功页面的风格与网站总体风
格相同，格式如下：
成功：
提示信息
+
！
。
2.3
、页面的返回
所有需要返回上一页的时候使用
();
不使用
(-1)
。
2.4
、提交前数据的判断验证
1)
、所有由用户输入的数据在提交前都要进行验证。
2)
、验证方式使用
jQuery validate
插件，需要验证的项：
长度验证：默认长度为数据库中数据的最大长度，中文占两个字符，英文占一个字符。
为空验证：所有不允许为空的输入内容为空时不允许提交。
其他验证：
需要 根据输入内容的不同设定合适的验证，
如
格式是否正确，
身份证< br>号格式是否正确等。
3)
、验证后发现错误，需要提示明确的错误 信息。错误提示信息样式：字体颜色
#ff3366
，文字前面加红色感叹号小图标。
4)
、
可输入表单需要具有输入内容的提示信息，
可使用
placeholder
属性来定义或者
页眉内容
自定义，颜色必须使用灰色，字体比网站使用字体小。
2.5
、删除操作
所有涉及删除的操作，需要用户进行确认之后才能进行操作。
2.6
、页面中
java
代码的使用
页面中不允许使用
<% %>
的方式嵌入
java
代码。
2.7
、网站页面布局规范
1)
、
800*6 00
下，网页宽度保持在
778
以内，就不会出现水平滚动条，高度则视版面
和内容决定，
1024*768
下，网页宽度保持在
1002
以内，不会出现 水平滚动条，高
度同样视版面内容决定。
2)
、根据第一条原则 ，规定网页的尺寸为
width=960px,height=600px
。
3)
、页面长度原则上不超过
3
屏（可根据实际情况设定）
，宽度不超过
1
屏。
4)
、
全尺寸
banner
为
468*60px
，
半尺寸
banner
为
234*60px
，
小
banner
为
88*31px。
5)
、每个非首页静态页面含图片字节不超过
60K，全尺寸
banner
不超过
14K
。
1)
、
120*120
，适用于产品或新闻照片展示。
2)
、
120*60
，主要用于做
LOGO
使用。
3)
、
120*90
，主要应用于产品演示或大型
LOGO
。
4)
、
125*125
，适于表现照片效果的图像广告。
5)
、
234*60
，适用于框架或左右形式主页的广告链接。
6)
、
392*72
，主要用于有较多图片展示的广告条，用于页眉或页脚。
7)
、
468*60
，应用最为广泛的广告条尺寸，用于页眉或页脚。
页眉内容
8)
、
88*31
，主要用于网页链接，或网站小型
LOGO
。
正文内容中文统一使用宋体（可根据需要设定）
，大小为
12px
，标题使用
14px
加粗，
不建议使用
13px
字，英文字体使用
Ar ial
和
Helvetica/Univers
。
1)
、正文使用灰黑色
#333333
。
2)
、超 链接可以使用蓝色
#1f376d
或
#425c9e
，也可以根据整体页面布 局进行调整，
整个网站的文字超链接样式要统一。
三、
javaScript
开发规范
3.1
、
javaScript
文件命名规范：
1)
、可通用的
javaScript
文件：项目名称缩写
-
文件作用
.js
。
2)
、其他
j avaScript
文件：所属功能
-
文件作用
.js
。
3.2
、
javaScript
开发规范
1)
、
javaScript
代码都需要写在
javaScript
文件 中，在页面中进行调用，调用代码
除页面加载时需要用到的外全都写在页面最低端。
2)
、如验证用
javaScript
代码等，每个页面不同且比 较短的，可以写在页面的最底
端，从最后一个外部
javaScript
引入命令后开 始。
3)
、脚本变量开发规范：变量的使用尽量缩小到小的作用域。如循环使用。
4)
、尽量避免使用全局变量。
5)
、每一句语句都要以分号“；
”结束。
6)
、函数程序 体缩进四个空格，
Tab
键为
4
个空格，以
Tab
键作为缩 进单位。
7)
、函数名与“
（”之间不应该有空格，
“ ）
”与“
{
”之间加空格。
托普康儿-
托普康儿-
托普康儿-
托普康儿-
托普康儿-
托普康儿-
托普康儿-
托普康儿-
本文更新与2021-01-24 09:18，由作者提供，不代表本网站立场，转载请注明出处：http://www.xapfxb.com/yuer/424783.html
-
上一篇：临床输血检验小知识点与名词解释
下一篇：教你如何应对痤疮、青春痘