web前端开发规范

web前端开发规范

麦子学院何虎老师的开发web前端开发规范课程笔记

web前端开发规范的意义

1、提高团队的协作能力
2、提高代码的复用利用率
3、可以写出质量更高,效率更好的代码
4、为后期维护提供更好的支持

规范

1、命名规则
2、文件存放位置规范
3、css书写规范
4、html代码书写规范
5、JavaScript书写及实用规范
6、图片规范
7、注释规范
8、兼容性规范
9、开发测试约定及实用工具规范

1、html 的命名规则

1、文件名称命名规则
统一用小写英文字母、数字、和下划线组合,不得包含汉字(转义问题)空格()和特殊字符()。
原则:
方便理解
方便查找
2、索引文件命名原则
3、各子页面命名原则
统一用翻译的英文名称
统一用拼音命名
注意:不要用英语拼音混用

2、图片 的命名规则

常规命名:
放置在页面顶部的广告、装饰图案等长方形的图片取名:banner
标志性的图片取名为:logo
在页面上位置不固定并且带有连接的小图片我们取名为button
在页面上一个位置连续出现,性质相同的连接栏目的图片我们取名为:menu
装饰用的照片我们取名;pic
不带连接表示标题的图片我们取名:title

3、脚本文件 的命名规则

一般使用脚本功能的英文小写缩写命名:
实际模块:
例如:
广告条的JavaScript文件名为ad.js
弹出窗口的JavaScript文件名为pop.js
共用模块:
js文件名;英文命名,后缀js,共用common,js
外部资源:
jQuery.min.js
jquery.date.js
动态语言文件命名原则:见名知意
以性质描述,描述可以有多个单词,用“”隔开,性质一般是该页面的概要
register_form.aspx
register_post.aspx
topic_lock.aspx

4、文件存放位置规范

文件夹说明:
flash存放flash文件
images存放图片文件‘
Inc存放include文件
library存放DW库文件
media存放多媒体文件
script存放JavaScript脚本
css存放css文件

5、css的3中基本类型

css
css指层叠样式表
样式通常存储在样式表中
把样式添加到html4.0中,是为了解决内容表现分离的问题
外部样式表可以极大的提高工作效率
外部样式表通常存储在css文件中
多个样式定义可层叠为一

1、重新定义html样式
影响全部的被设定标签样式
用于统一网页中某一标签的样式定义
2、链接状态样式
链接状态样式为设计师对链接不同状态设定特殊样式,影响被使用样本区域中的链接
a.nav:link(中间无空格) 、.nav a:link
第一种只能修饰所有包含有标签
第二种可以修饰所有包含有
标签的其他标签
3、自定义样式
样式为设计师自定义的新css样式,影响被使用本样式的区域,用于完成网页中局部的样式设定。
样式名:”.” + “相应样式效果描述的单词或缩写”例如:”.shadow”
文字样式名 “.no”+”字号”+”行距”+”颜色缩写” 例如:”.no12 ” “.no12_24 “

6、class与ID的使用规范

区别:
ID在页面中有且只能有一个。所以使用ID表示的css样式只能表示一个元素的样式
class在一个页面中可以有多个,也就是说定义一个css样式后,可以有多个元素引用这个class
书写方式:
id的书写样式:#title{font-size:18px;color:#333;}
class的书写方式:.title{font-size:18px;color:#333;}
命名注意:
1、大的框架比如说header/footer/wrapper/left/right之类的由设计框架之人统一命名。
其他样式名称由小写英文&数字&_来命名,避免使用中文拼音,尽量使用简易的单词组合;
总之,命名要语义化,简明化。

web前端开发规范_第1张图片

7、css的命名规范

意义:
规范的命名有助于提升团队开发效率
规范的命名有助于后期产品的维护
规范的命名有助于后期的二次开发
web前端开发规范_第2张图片

8、head区域代码规范

必须加入的标签:
搜索时候使用的关键字:

   <meta name="keywords"(关键字必须这么写) content="xxxx,xxxx,xxxx,xxxx"(里面填写搜索关键字)>

css

 <link href=".../css/style.css" rel="stylesheet" type="text/css"></link>

网页显示字符集:
简体中文:



繁体中文:



英语:



网页标题:

河北工程大学孟佳

可选加入的标签:
公司的版权注释



网页制作者信息

网站简介

设定网页的到期时间。网页一旦过期,必须到服务器上重新调阅



禁止浏览器从本地机的缓存中调阅页面内容

<meta http-equiv="pragma" content="no-cache">

用来防止别人在框架里调用你的页面

<meta http-equiv="window-target" content="_top">

自动跳转 //例如注册后跳转

<meta http-equiv="Refresh" content="5" url=http://www.baidu.com">

网页搜索机器人向导。用来告诉机器人哪些页面需要索引,哪些页面不需要索引 //搜索引擎
收藏夹图标
所有的JavaScript的调用尽量采取外部调用

9、字体规范

在设定字体样式时对于文字字号样式和行间距应必须使用css样式表。
禁止在页面中出现标记

字体大小:
在网页中应首选使用宋体。英文和数字首选使用verdana和Arial两种字体。一般使用中文宋体的9pt和11pt或者12px和14.7px这是经过优化的字号,黑体字或者宋体字加粗时,一般选用11pt和14.7的字号比较合适。
为了最大程度的发挥浏览器自动排版的功能,在一段完整的文字中请尽量不要使用
来人工干预分段
不同语种的文字之间应该有一个半角空格,但避头的符号之前和避尾的符号除外,汉字之间的标点要用全角标点,英文字母和数字周围的括号应该使用半角括号。
请不要在网页中国连续出现多余一个的也尽量少使用全角空格(英文字符集下,全角空格会变成乱码),空白应尽量使用text-indent,pandding,margin,hspace,vspace以及透明的GIF图片来实现。

行距建议用百分比来定义,常用的两个行距值时line-height:120%/150%
排版中我们经常会遇到需要进行首行缩进的处理,不要使用或者全角空格来达到效果,规范的做法是在样式表中定义p{text-indent:2em;}然后给每一段加上一个


标记,注意,一般情况下,请不要省略

结束标记。

10、连接和表格使用规范

链接:
1、网站中链接路径全部采用相对路径
2、一般链接到某一目录下的缺省文件的连接路径不必写全名
例如:而应该这样:
3、在浏览器里,当我们点击空连接时,他会自动将当前页面重置到首端,从而影响用户正常的阅读内容,我们用代码
“JavaScript:void(null)”代替原来的“#”标记
表格:
1、尽量避免表格嵌套过多
后果会对浏览器加载延长时间,带来不友好的用户体验
2、在写

互相嵌套时,严格按照的规范,对于单独的一个
来说,
对齐,
缩进两个半角空格,
中如果还有嵌套的表格,也缩进两个半角空格。如果结束标记应该与
处于同一行,不要换行。

11、下载和浏览速度控制

意义:
考虑下载速度,以及页面浏览速度是web前端必须考虑的。页面的浏览速度越快,用户体验效果越好。
文件下载可以通过a标签的href指向路径直接实现
图片下载则直接在网页中展示。如何解决?asp.net输出文件流的形式可以直接下载,后台实现。jsp
下载实例:

 <h1>通过连接下载文件h1>
<a href="/day06/download/cors.zip">压缩包a>
<a href=''day06/download/1.png ''>图片a>
<h1>通过连接下载文件h1>
<a href="/day06/ServletDownLoad?filename=cors.zip">压缩包a>
<a href=''day06/ServletDownLoad?filename=1.png ''>图片a>

注意规范:
1、首页flash网页大小应限定在200k以下,尽可能的使用矢量图形和action来减小动画大小。
2、非首页静态页面含图片大小应限定在70k左右,尽可能的使用背景颜色替换大块同色图片。
能够用背景色替代图片尽量用背景色,尽量且小图片进行平铺

12、嵌套include和iframe

说明:
页面嵌套在另一个页面中
意义:
如果多个页面都需要这个模块,可以才有嵌套的方式,方便后期的维护也就是维护一个页面,就可以同时改变多个页面的效果
include
include是ssi(server side include)
jsp <%@include file=”…/inc/index_top.jsp”%>
htm

你可能感兴趣的:(web前端开发规范)