web前端开发规范
web前端开发规范
麦子学院何虎老师的开发web前端开发规范课程笔记javascript
web前端开发规范的意义
一、提升团队的协做能力
二、提升代码的复用利用率
三、能够写出质量更高，效率更好的代码
四、为后期维护提供更好的支持css
规范
一、命名规则
二、文件存放位置规范
三、css书写规范
四、html代码书写规范
五、JavaScript书写及实用规范
六、图片规范
七、注释规范
八、兼容性规范
九、开发测试约定及实用工具规范html
一、html 的命名规则
一、文件名称命名规则
统一用小写英文字母、数字、和下划线组合，不得包含汉字（转义问题）空格（）和特殊字符（）。
原则：
方便理解
方便查找
二、索引文件命名原则
三、各子页面命名原则
统一用翻译的英文名称
统一用拼音命名
注意：不要用英语拼音混用前端
二、图片 的命名规则
常规命名：
放置在页面顶部的广告、装饰图案等长方形的图片取名：banner
标志性的图片取名为：logo
在页面上位置不固定而且带有链接的小图片咱们取名为button
在页面上一个位置连续出现，性质相同的链接栏目的图片咱们取名为：menu
装饰用的照片咱们取名;pic
不带链接表示标题的图片咱们取名：titlejava
三、脚本文件 的命名规则
通常使用脚本功能的英文小写缩写命名：
实际模块：
例如：
广告条的JavaScript文件名为ad.js
弹出窗口的JavaScript文件名为pop.js
共用模块：
js文件名;英文命名，后缀js，共用common,js
外部资源：
jQuery.min.js
jquery.date.js
动态语言文件命名原则：见名知意
以性质描述，描述能够有多个单词，用“”隔开，性质通常是该页面的概要
register_form.aspx
register_post.aspx
topic_lock.aspxjquery
四、文件存放位置规范
文件夹说明：
flash存放flash文件
images存放图片文件‘
Inc存放include文件
library存放DW库文件
media存放多媒体文件
script存放JavaScript脚本
css存放css文件web
五、css的3中基本类型
css
css指层叠样式表
样式一般存储在样式表中
把样式添加到html4.0中，是为了解决内容表现分离的问题
外部样式表能够极大的提升工做效率
外部样式表一般存储在css文件中
多个样式定义可层叠为一数组
一、从新定义html样式
影响所有的被设定标签样式
用于统一网页中某一标签的样式定义
二、连接状态样式
连接状态样式为设计师对连接不一样状态设定特殊样式，影响被使用样本区域中的连接
a.nav:link(中间无空格) 、.nav a:link
第一种只能修饰全部包含有<a>标签
第二种能够修饰全部包含有<a>标签的其余标签
三、自定义样式
样式为设计师自定义的新css样式，影响被使用本样式的区域，用于完成网页中局部的样式设定。
样式名：”.” + “相应样式效果描述的单词或缩写”例如：”.shadow”
文字样式名 “.no”+”字号”+”行距”+”颜色缩写” 例如：”.no12 ” “.no12_24 “浏览器
六、class与ID的使用规范
区别：
ID在页面中有且只能有一个。因此使用ID表示的css样式只能表示一个元素的样式
class在一个页面中能够有多个，也就是说定义一个css样式后，能够有多个元素引用这个class
书写方式：
id的书写样式：#title{font-size:18px;color:#333;}
class的书写方式：.title{font-size:18px;color:#333;}
命名注意：
一、大的框架好比说header/footer/wrapper/left/right之类的由设计框架之人统一命名。
其余样式名称由小写英文&数字&_来命名，避免使用中文拼音，尽可能使用简易的单词组合；
总之，命名要语义化，简明化。缓存
七、css的命名规范
意义：
规范的命名有助于提高团队开发效率
规范的命名有助于后期产品的维护
规范的命名有助于后期的二次开发
八、head区域代码规范
必须加入的标签：
搜索时候使用的关键字：
<meta name="keywords"（关键字必须这么写） content="xxxx,xxxx,xxxx,xxxx"（里面填写搜索关键字）>
- 1
- 1
css
<link href=".../css/style.css" rel="stylesheet" type="text/css"></link>
- 1
- 1
网页显示字符集：
简体中文：
<meta http-equiv="content" content="text/html;charset=gb2312"/>
繁体中文：
<meta http-equiv="content" content="text/html;charset=utf-8">
英语：
<meta http-equiv="content" content="text/html;charset=utf-8">
网页标题：
<title> 河北工程大学孟佳 </title>
可选加入的标签：
公司的版权注释
<!---the site is designed by maiziedu 09/2015 --->
网页制做者信息
网站简介
设定网页的到期时间。网页一旦过时，必须到服务器上从新调阅
<meta http-equiv="expires" content="wed,26 Fed 1997 08:21 GMT">
禁止浏览器从本地机的缓存中调阅页面内容
<meta http-equiv="pragma" content="no-cache">
- 1
- 1
用来防止别人在框架里调用你的页面
<meta http-equiv="window-target" content="_top">
- 1
- 1
自动跳转 //例如注册后跳转
<meta http-equiv="Refresh" content="5" url=http://www.baidu.com">
- 1
- 1
网页搜索机器人向导。用来告诉机器人哪些页面须要索引，哪些页面不须要索引 //搜索引擎
收藏夹图标
全部的JavaScript的调用尽可能采起外部调用
九、字体规范
在设定字体样式时对于文字字号样式和行间距应必须使用css样式表。
禁止在页面中出现<font size=?>标记
字体大小：
在网页中应首选使用宋体。英文和数字首选使用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;}而后给每一段加上一个<p>
标记，注意，通常状况下，请不要省略</p>结束标记。
十、链接和表格使用规范
连接：
一、网站中连接路径所有采用相对路径
二、通常连接到某一目录下的缺省文件的链接路径没必要写全名
例如：<a href="aboutus/index.html">而应该这样：<a href="aboutus/">
三、在浏览器里，当咱们点击空链接时，他会自动将当前页面重置到首端，从而影响用户正常的阅读内容，咱们用代码
“JavaScript：void(null)”代替原来的“#”标记
表格：
一、尽可能避免表格嵌套过多
后果会对浏览器加载延长时间，带来不友好的用户体验
二、在写<table>互相嵌套时，严格按照的规范，对于单独的一个<table>来讲，<table><tr>对齐，<td>缩进两个半角空格， <td>中若是还有嵌套的表格,<table>也缩进两个半角空格。若是结束标记应该与<td>处于同一行，不要换行。
十一、下载和浏览速度控制
意义：
考虑下载速度，以及页面浏览速度是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
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
注意规范：
一、首页flash网页大小应限定在200k如下，尽量的使用矢量图形和action来减少动画大小。
二、非首页静态页面含图片大小应限定在70k左右，尽量的使用背景颜色替换大块同色图片。
可以用背景色替代图片尽可能用背景色，尽可能且小图片进行平铺
十二、嵌套include和iframe
说明：
页面嵌套在另外一个页面中
意义：
若是多个页面都须要这个模块，能够才有嵌套的方式，方便后期的维护也就是维护一个页面，就能够同时改变多个页面的效果
include
include是ssi（server side include）
jsp <%@include file=”…/inc/index_top.jsp”%>
htm <!--#include file="b.htm">
iframe
在html中想达到嵌套的效果，可使用iframe标签
<iframe src="111" frameborder=0 border=0 width=300 height=300 src="b.htm"></iframe>
- 1
- 1
html与XHTML之间的差别在html4.1strictDTD和XHTML1.0strictDTD中，不支持iframe元素
1三、嵌套Alt和Title
相同点：
提示性语言标签
不一样点：
alt：通常是对图片进行提示描述
title：通常对文字标签进行描述
实例：
-
<p title="给连接文字提示"> 文字</p>
-
<a href="#" title="给连接文字提示">文字</a>
-
<img src="图片.gif" alt="给图片提示">
- 1
- 2
- 3
- 1
- 2
- 3
1四、浏览器缓存使用注意
什么是缓存？
缓存就是数据交换的缓冲区（称做cache），当某一硬件要读取数据时，首先会从缓存中查到须要的数据，若是找到了就直接执行，找不到的话就从内存中找，因为缓存的运行速度比内存快得多，故缓存的做用就是帮助硬件更快的运行。
缓存的原理：
缓存的意义：
能够提升浏览器浏览页面的效率
缓存可能带来哪些后果？
对于一些设计用户重要信心的页面若是被缓存则很危险
占用大量硬盘资源
设置网页不被缓存
<meta http-equiv="pragma" content="no-cache">
- 1
- 1
<meta http-equiv="Cache-Control" content="no-cache,must-revalidate">
- 1
- 1
<meta http-equiv="expires" content="wed,26 Feb 1997 08:21:57 GMT ">//有效期
- 1
- 1
1五、浏览器兼容性问题
什么是浏览器的兼容问题？
所谓的浏览器兼容性问题，是指由于不一样的浏览器对同一代码有不一样的解析，形成页面的显示效果不统一的状况。
问题1
不一样浏览器的标签默认的外补丁和内补丁不一样
问题症状：随便写几个标签，不加样式控制的状况下，各自的margin和padding差别较大（本身会有距离要加样式控制 ）。
碰到频率：100%
解决方案：css里 *{margin:0;padding:0;}
备注：这个是最多见的也是最容易解决的一个浏览器的问题，几乎全部的css文件开头都会用通配符*来设置各个外标签的补丁是0
问题2：
浏览器兼容性 问题二：块属性标签float后，又有横行margin状况下，在ie6显示margin比设置的大
问题症状：
常见症状是ie6中后面的一块被顶到下一行
碰到频率：90%(稍微复杂点都会碰到，float布局最多见的浏览器兼容性问题)
解决方案：
在float的标签样式控制中加入display：inline;将其转化成行内属性
备注：
咱们最经常使用的就是div+css布局，而div就是一个典型的块属性标签，横向布局的时候咱们一般都是用div float实现的，横向的间距设置若是用margin实现，这就是一个必然会碰到的兼容性 问题哦
问题3：
浏览器兼容性 问题三：
设置较小高度标签（通常小于10px），在ie6.ie7，遨游中高度超出本身设置高度
为题症状：
ie六、7和遨游里这个标签的高度不受控制，超出本身设置的高度。
碰到频率：60%
解决方案：
给超出高度的标签设置 overflow：hidden；或者设置行高line-height小于你设置的高度
备注：
这种状况通常出如今咱们设置小圆角背景的标签里。出现这个问题的缘由是ie8以前的浏览器都会给标签一个最小默认行高的高度。即便你的标签是空的，这个标签的高度仍是会达到默认的行高。
问题4：
浏览器兼容性 问题四：
水平元素居中问题
一、FF：margin：0 auto //外间距上下为零左右自动
IE：父级{text-align：center；}
问题5：
const问题
const char
var;//说明var这个变量如今变成只读变量， 任何对var修改的语句都被编译器视为错误，不能修改。
说明：Firefox下可使用const关键字或var关键字来定义常量；
IE下，只能使用var关键字来定义常量。
解决方法：
统一使用var关键字来定义常量
问题6：
模态和非模态窗口问题
说明：ie下能够经过showModalDialog和showModallessDialog打开模态和非模态窗口；
解决方法：
直接使用window.open（pageURL，name，parameters）方式打开新窗口。
若是须要将子窗口中的参数传递回父窗口，能够在子窗口中使用window.openner来访
例如：
var parWin = window.opner;
parWin.document.getElementById(”Aqing’).value=”Aqing”;
问题7：
float的延续性
说明：在ie浏览器中，若是使用float设置元素浮动对齐。若是不关闭浮动，将会对后面的元素标签延续浮动。
解决方法;在设置float的元素后面加上clear：both，关闭浮动。
1六、Banner和Logo
banner
横幅广告(网络广告的主要形式, 通常使用GIF格式的图像文件,可使用静态图形,也可用多帧图像拼接为动画图像)
推荐网站：http://www.zhaoxi.net/
logo
为了便于INTERNET上信息的传播，一个统一的国际标准是须要的。实际上已经有了这样的一整套标准。
其中关于网站的LOGO，目前有三种规格：
88*31 这是互联网上最广泛的LOGO规格。
120*60 这种规格用于通常大小的LOGO。
120*90 这种规格用于大型LOGO。
1七、JavaScript规范
书写：
书写过程当中,每行代码结束必须有分号; 原则上全部功能均根据XXX项目需求原生开发, 以免网上down下来的代码形成的代码污染(沉冗代码 || 与现有代码冲突 ||…);
变量命名格式
变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun; jQuery变量要求首字符为’_’, 其余与原生JavaScript规则相同, 如: _iTaoLun; 另,要求变量集中声明,避免全局变量.
函数命名:
首字母小写驼峰式命名. 如iTaoLun();
JavaScript文件
JavaScript程序应独立保存在后缀名为.js的文件中。应尽可能减小在HTML 中的JavaScript代码，由于存在与HTML中的JavaScript代码会明显增长文件大小，且不能对其进行缓存和压缩。
filename.js或JavaScript的代码应尽可能放到body的后面。 这样能够减小由于载入脚本而形成其余页面内容载入也被延迟的问题。
缩进
缩进的单位为四个空格。避免使用Tab键来缩进。 由于始终没有个统一的Tab长短标准。虽然使用空格会增长文件的大小， 但在局域网中几乎能够忽略，且在最小化过程当中也可被消除掉。
函数声明
全部的函数在使用前进行声明。内函数的声明跟在var语句的后面. 这样能够帮助判断哪些变量是在函数范围内的。
变量声明
全部的变量必须在使用前经过var进行声明。JavaScript并不强制必须这么作， 但这么作可让程序易于阅读，且也容易发现那些没声明的变量(它们会被编译成全局变量)。 将var语句放在函数的首部。最好把每一个变量的声明语句单独放到一行，并加上注释说明。
var currentEntry;//当前选择项 var level;//缩进程度 var size; // 表格大小
尽可能减小全局变量的使用。不要让局部变量覆盖全局变量。
{} 和[]
使用{}代替new Object()。使用[]代替new Array()。这样便于书写且能提升一点执行效率。
当成员名是一组有 序的数字时使用数组来保存数据。当成员名是无规律的字符串或其余时使用对象来保存数据。
1. event.srcElement问题 //找到触发事件的源对象
问题说明：I.E.下，even对象有srcElement属性，可是没有target属性； Firefox下，even对象有target属性，可是没有srcElement属性。
解决方法：使用 var obj=event.target||window.event.srcElement;
2.parentElement问题
firefox与I.E.的父元素(parentElement)的区别
IE：obj.parentElement
firefox：obj.parentNode
解决方法: 由于firefox与I.E.都支持DOM,所以使用obj.parentNode是不错选择.
1八、图片的使用规范
存放位置
全部页面元素类图片均放入images文件夹, 测试用图片放于img/demoimg文件夹
格式
图片格式仅限于gif || png || jpg;
命名
命名所有用小写英文字母 || 数字 || _ 的组合，其中不得包含汉字 || 空格 || 特殊字符；尽可能用易懂的词汇, 便于团队其余成员理解; 另, 命名分头尾两部分, 用下划线隔开, 好比ad_left01.gif || btn_submit.gif;
性能
运用css sprite技术集中小的背景图或图标, 减少页面http请求,但注意,请务必在对应的spritepsd源图中划参考线, 并保存至img/images目录下.
CSSSprites
在国内不少人叫css精灵，是一种网页图片应用处理方式。它容许你将一个页面涉及到的全部零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像之前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差很少的，因此无需顾忌这个问题。
咱们常常看到一个页面上有不少小图标，但是当咱们用工具去打开时却发现
这些小图标其实在一张图片上，这是怎么实现的呢？
这当中用到了CSS Sprites切图技术。
CSS Sprites其实就是把网页中一些图标整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position能够用数字能精确的定位出背景图片的位置。
优势：减小网页http请求，提升页面性能，下降服务器负载；文件命名减小麻烦。
缺点：定位繁琐，布局固定，下降网页弹性。
Css Sprite使用方法：
一、将用到的背景图片压缩为zip格式的压缩包
二、用Css图片拼合生成器将其拼合成一张图片，而后下载该图片
三、拼合完成后会生成相应的Css规则，该文件定位了每一个图片的位置及图片的宽度和高度
四、在Css样式中定位背景图片，例如：
例子：
-
ul.share li{float:left;}
-
ul.share li a{display:block;width:25px;height:25px;text-indent:-9999px;}
-
a.renren{background:url(../images/share.gif) 0 0 no-repeat;}
-
a.kaixin{background:url(../images/share.gif) -25px 0 no-repeat;}
-
a.sina{background:url(../images/share.gif) -50px 0 no-repeat;}
-
a.douban{background:url(../images/share.gif) -75px 0 no-repeat;}
-
a.googleBM{background:url(../images/share.gif) -100px 0 no-repeat;}
-
<ul class="share">
-
<li>分享到：</li>
-
<li><a class="renren" href="/cuiying_2007/blog/ " title="">人人网</a></li>
-
<li><a class="kaixin" href="/cuiying_2007/blog/ " title="">开心网</a></li>
-
<li><a class="sina" href="/cuiying_2007/blog/ " title="">新浪微博</a></li>
-
<li><a class="douban" href="/cuiying_2007/blog/ " title="">豆瓣</a></li>
-
<li><a class="googleBM" href="/cuiying_2007/blog/ " title="">谷歌书签</a></li>
-
</ul>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
1九、注释规范
html注释:
注释格式 , ‘–’只能在注释的始末位置,不可置入注释文字区域;
Css注释:
注释格式 /这儿是注释/;
javascript注释:
单行：单行注释使用//这儿是单行注释 ,
多行：多行注释使用 /* 这儿有多行注释 */;
20、浏览器兼容性 CSS hack
css hack
CSS hack的目的就是使你的CSS代码兼容不一样的浏览器。固然，咱们也能够反过来利用CSS hack为不一样版本**的浏览器定制编写不一样的CSS效果。
实例：**
div{
background:green;/* forfirefox */
background:red;/*for IE6/(bothIE6&&IE7)
}
效果：我在IE6中看到是红色的，在firefox中看到是绿色的。
上面的css在firefox中，它是认识不了后面的那个带星号的东西是什么的， 因而将它过滤掉，不予理睬，解析获得的结果是:div{background:green}, 因而理所固然这个div的背景是绿色的。 在IE6中呢，它两个background都能识别出来， 它解析获得的结果是:div{background:green;*background:red;} ,因而根据优先级别，处在后面的red的优先级高，因而固然这个div的背景颜色就是红色的了。
区别不一样浏览器，CSS hack写法:
区别IE6与FF：background:orange;*background:blue;
区别IE6与IE7：background:green!important;background:blue;
区别IE7与FF：background:orange;*background:green;
区别FF，IE7，IE6：background:orange;*background:green;_background:blue; background:orange;*background:green!important;*background:blue;
21 、开发中的其余开发规范总结
开发环境 软件版本的选择：1.应选择热门的开发软件2.选择成熟的开发工具和技术 开发文档的约束 其余： 1.开发过程当中严格分工完成页面，以提升css重用率，避免重复开发 2.减少沉冗代码,书写全部人均可以看的懂的代码. 简洁易懂是一种美德.为用户着想,为服务器着想. 如何才能成为前端开发高手？ 1.要多练，不断总结 2.看到别人写的好的代码要多研究研究 3.要勤收集素材
- 1. web前端开发规范
- 2. WEB前端开发规范
- 3. web前端开发规范：命名规范、html规范、css规范、js规范
- 4. Web前端开发规范手册
- 5. Web前端开发规范文档
- 6. web前端开发代码规范
- 7. Web前端开发标准规范
- 8. web前端开发规范文档
- 9. WEB前端开发规范文档
- 10. Web 前端开发规范文档
- 更多相关文章...
- • ASP.NET Web Pages - 发布网站 - ASP.NET 教程
- • RDF 规则 - RDF 教程
- • PHP开发工具
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. web前端开发规范
- 2. WEB前端开发规范
- 3. web前端开发规范：命名规范、html规范、css规范、js规范
- 4. Web前端开发规范手册
- 5. Web前端开发规范文档
- 6. web前端开发代码规范
- 7. Web前端开发标准规范
- 8. web前端开发规范文档
- 9. WEB前端开发规范文档
- 10. Web 前端开发规范文档