web前端开发规范

时间 2019-11-12

标签 web 前端开发规范栏目 HTML 繁體版

原文原文链接

本文原创，这里首先声明，转载注明本文出处，翻版必究！

web前端开发规范的现实意义

一、提升团队的协做能力javascript

二、提升代码的重复利用率php

三、能够写出质量更高，效率更好的代码css

四、为后期维护提供更好的支持html

五、可读性高前端

1、命名规则

一、html命名规则：

　　a、文件名称命名规则：统一使用小写英文字母、数字、下划线的组合，不得包含汉字空格和特殊字符java

二、命名原则：方便理解、方便查找

　　b、索引文件命名原则：index.html、index.htm、index.asp、index.aspx、index.jsp、index.phpjquery

　　c、各子页命名的原则：统一用翻译的英文命名、统一用拼音命名，注意：不要英语拼音混用eg:关于咱们:aboutus.html 新闻列表:newslist.html 产品详细：prodetail.htmlweb

三、图片命名规则：

　　a、图片名称分为头尾两部分，用下划线隔开，头部分表示此图片的大类性质，例如：广告、标志、菜单、按钮等banner_1.jpg、banner_2.jpg、menu_bg.jpg、　　logo.png数组

　　b、常规命名规则：浏览器

　　　　标志性的图片取名：logo

　　　　装饰性图片：pic

　　　　不带连接表示标题的图片：title

　　　　放置在页面顶部的广告、装饰图案等长方形的图片取名：banner

　　　　在页面上位置不固定而且带有连接的小图片咱们取名为button

　　　　在页面上某一个位置连续出现，性质相同的连接栏目的图片为menu

四、脚本文件和动态文件命名规则：

　　a、通常使用脚本功能的英文小写缩写命名：

　　　　实际模块：eg：广告条的javascript文件名为ad.js 弹出窗口的javascript文件名为:pop.js

　　　　共用模块：eg：js文件命名：英文命名，后缀.js 共用common.js

　　　　外部资源：eg：jquery.min.js、jquery.date.js

　　b、动态语言文件命名规则：以性质_描述，描述能够有多个单词，用"_"隔开，性质通常是该页面的概要

　　　　如：register_form.php、register_post.php、register_lock.php　　

2、文件存放位置规范

　　文件夹说明：flash存放flash文件、images存放图片文件、css存放css文件、script存放脚本文件、js存放自定义脚本文件、media存放媒体文件

　　网站页面位置存放：客户端：web（或者网站根目录）、服务器端：admin

3、CSS书写规范

一、CSS基础类型

　　CSS：CSS指层叠样式表。

　　　　样式定义如何显示HTML元素　　　　　　

　　　　样式一般存储在样式表中

　　　　把样式添加到HTML4.0中，是为了解决内容与表现分离的问题

　　　　外部样式表能够极大的提升工做效率

　　　　外部样式表一般存储在CSS文件中

　　　　多个样式定义可层叠为一

　　商业开发：

　　　　从新定义样式：为设计师从新定义已有的HTML标签样式，影响所有的被设定标签样式，用于统一网页中某一标签的样式定义。如：hr{border:1px dotted #333;}

　　　　连接状态样式：连接状态样式为设计师对连接不一样状态设定特殊样式，影响被使用本样式区域中的连接。a.nav:link(中间无空格)只能修饰类名为nav的<a>标签。.nav a:link能够修饰类为nav 下的全部的<a>标签。

　　　　自定义样式：样式为设计师自定义的新CSS样式，影响被使用本样式的区域，用于完成网页中局部的样式设定。如：.border{border:1px solid #333;} .red{color:red;}

二、Class与ID的使用规范：

　　区别：ID在页面中只有一个，因此使用ID表示的CSS样式只能表示一个元素的样式

　　　　 class在一个页面中能够有多个，也就是说定义一个CSS样式后，能够有多个元素引用这个class

　　书写方式：ID书写样式：#title{font-size:18px;}

　　　　　　　class书写样式：.title{font-size:18px;}

　　命名注意：大的框架命名：如：header/footer/wrapper/left/right之类的由设计框架之人统一命名。其余样式由小写英文&数字&_来组合命名，避免使用中文拼音，尽可能使用简易的单词组合；总之命名要有语义化，简明化。

　　　　　　　避免命名重复：注意1：经过从属写法规避<div id="mainnav"><div class="firstnav"></div></div>;样式写法：#mainnav .firstnav{...};

　　　　　　　　　　　　　　注意2：规避class与id重名，不建议使用Id选择器

　　　　　　　　　　　　　　注意3：重复使用率高的命名，可加代号加下划线起始，如：title_news

　　　　　　　　　　　　　　注意4：取父级元素id/class命名部分命名，如：<div id="mainnav"><div class="main_frist"></div></div>

三、CSS命名规范：

意义：有助于提高团队开发效率、有助于后期产品的维护、有助于后期二次开发。


页面结构
容器：container/wrap	总体宽度：wrapper
页头：header	内容：content
页面主体：main	页尾：footer
侧栏：sliderbar	栏目：column
中间内容：center
导航
导航：nav	主导航：mainnav/gobalnav
子导航：subnav	顶导航：topnav
边导航：sidebar	左导航：leftbar
右导航：rightbar	边导航图标：sidebarIcon
标题：title
功能
标志：logo	登录：login
登录条：loginbar	注册：register
产品：products	产品价格：products_prices
产品评价：products_review	编辑评价：editor_review
最新评价：news_release	广告/标语：banner
摘要：summary	生产商：publisher
缩略图：screenshot	常见问题：fags
关键词：keyword	博客：blog
论坛：forum	搜索：search
搜索输入框：search_input	搜索输出：search_output
搜索结果：search_results	加入咱们:joinus
状态：status	按钮：btn
滚动：scroll	版权全部：copy_right
电话：tel	在线订购：on_line_order
行内动态：trends	新闻动态：news_trends
行内新闻：trade_news	下载中心：download
热点：hot	图标：icon
在线调查：online_inquiry	注释：note
购物车：shop/cart	投票：vote
友情连接：friendlink	版权：copyright

4、HTML代码规范

一、head区域代码规范

　　必须加入的标签：

　　　　keywords：<meta name="keywords" content="xxxxxxx">

　　　　字符集：<meta charset="UTF-8">

　　　　网站标题：<title>Title</title>

　　　　css：<link rel="stylesheet" href="../css/reset.css">

　　可选加入的标签：

公司版权注释：

　　　　网页制做者信息：<meta name="author" content="22@qq.com">

　　　　网站简介：<meta name="description" content="该网站是xxxxxx">

　　　　设定网页的到期时间，一旦网页过时，必须到服务器上从新订阅。以下：

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

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

　　　　网页搜索机器人向导，用来告诉搜索机器人哪些页面须要索引，哪些页面不须要索引以下：

　　　　自动跳转：<meta http-equiv="Refresh" content="5;url=http://baidu.com">

　　　　收藏夹图标：<link rel="Shortcut Icon" href="favicon.ico">

　　　　全部的javascript的调用尽可能采用外部调用。

二、字体规范

　　在设定字体样式时，对于文字字号样式和行间距应必须使用CSS样式表，禁止在页面中出现<font-size=?>标记

　　字体大小：在网页中中文应首选宋体，英文和数字首选使用verdana和arial两种字体，通常使用中文宋体的9pt或12px和14.7px这是通过优化的字号，黑体字或者宋体字加粗时，通常选用11pt和14.7px的字号比较合适

　　为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽可能不要使用<br>来人工干预分段

　　不一样语种的文字之间应该有一个半角空格，但避头的符号以前和避尾的符号以后除外，汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号。

　　请不要在网页中连续出现多于一个的也尽可能少用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽可能使用text-indent、padding、margin、hspace、vspace以及透明的gif图片来实现。

　　行距建议用百分比来定义，经常使用的两个行距的值是line-height:120%/150%;

　　排版中咱们常常会遇到须要进行首行缩进的处理，不要使用或者全角空格来达到效果，规范的作法是在样式表中定义p{text-indent:2em;}

三、连接和表格使用规范

　　连接：

　　　网站中的连接路径所有采用相对路径

　　　通常连接到某一目录下的缺省文件的连接路径没必要写全名：如<a href="aboutus/index.html">应该写成<a href="aboutus/">

　　　在浏览器里，当咱们点击空连接时，它会自动将当前页面重置到首端，从而影响用户正常的阅读内容。所以咱们使用<a href="javascript:void(0);">代替原来的"#"标记

　　表格：

　　尽可能避免表格嵌套过多：若是过多会对浏览器加载延长时间，带来不友好的用户体验。

　　在写<tabel>互相嵌套时，严格按照的规范，对于单独的一个<table>来讲，<table><tr>对齐，<td>缩进两个半角空格,<td>中若是还有嵌套的表格，<table>也缩进两个半角空格，结束标记应该与<td>处于同一行，不要换行。

应使用：<td><img src="../images/logo.png"></td>

四、下载和浏览器速度控制

　　文件下载能够经过a标签href指向路径直接实现（<a href="message.pdf" ></a><a href="message.zip" ></a>）

　　图片下载则直接在网页中展现（<a href="day/logo.png"></a>）如何解决。（经过对图片压缩）或经过ASP.NET输出文件流的形式能够直接下载，后台实现；或者PHP/JAVA

　　注意：首页flash网页大小应限定在200k如下，尽量的使用矢量图形和Action来减小动画大小

　　　　　非首页静态页面含图片大小应限定在70K左右，尽量的使用背景颜色替换大块同块色图片。（一、可以用背景色替换的尽可能使用背景色。二、尽可能切小图片进行平铺）

五、include/iframe嵌套

　　页面嵌套在另外一个页面中。若是多个页面都须要这个模块，能够才有嵌套的方式，方便后期的维护也就是维护一个页面，就能够同时改变多个页面的效果

　　include对于jsp <%@include file="../inc/index_top.jsp"%>

对于asp/asp.net

对于htm

　　iframe：在html中想达到嵌套的效果，可使用iframe标签

　　　　　　HTML与XHTML之间的差别在HTML4.1StrictDTD和XHTML1.0StrictDTD中，不支持iframe元素

　　　　　　<iframe src="i/eg_landscape.jpg"></iframe><p>一些老的浏览器不支持iframe</p><p>若是得不到支持，iframe是不可见的</p>

六、title与alt

　　相同点：都是显示性语言标签

　　不一样点：alt通常是对图片进行展现描述（当图片不显示时，显示该提示文字）

　　　　　　title通常是对文字标签进行提示（当鼠标悬停在图片或文字上时，显示该提示文字）

　　　　如：<a href="index.html" title="跳转到首页">首页</a>

七、缓存的注意事项

缓存是数据交换的缓冲区（称做Cache），当某一硬件要读取数据时，会首先从缓存中查找须要的数据，若是找到了则直接执行，找不到的话则从内存中找，因为缓存的运行速度比内存快的多，因此缓存的做用就是帮助硬件更快的运行。

缓存能够提升浏览器浏览页面的效率

缓存的原理：浏览器第一次请求页面时-》没有缓存-》向web服务器请求-》请求响应，缓存协商-》呈现

　　　　　　当浏览器第二次请求页面时-》此时有缓存-》是否过时-》若是过时（判断Etag?是，则向web服务器请求带if-None-Match）（否、进行last-Modified判断？是则向web服务器请求带if-Modified-Since，否的话，就向web服务器请求，请求响应，缓存协商-》呈现）服务器决策200or304若是200直接进行响应，缓存协商-》呈现、304的话从缓存中读取-》呈现，若是不过时直接从缓存中读取数据而后呈现。

缓存可能带来的哪些后果？对于一些涉及用户重要信息的页面，若是页面被缓存则很危险。占用大量的硬盘资源

设置页面不被缓存：<meta http-equiv="pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache, must-revalidate"><meta http-equiv="expires" content="0">

<!--或者js中加入相似下面的代码，让每次的连接都不同-->

八、banner和logo注意规范

banner：横幅广告（网络广告的主要形式，通常使用GIF格式的图像文件，可使用静态图形，也可使用多帧图像拼接为动画图像）

　　　　尺寸：100*100、120*60、120*240、120*600、160*160、180*80、960*120（经常使用）等

　　　　推荐网站：http://www.zhaoxi.net/

logo：为了便于internet上信息的传播，一个统一的国际标准是须要的。实际上已经有了这样的一整套标准

其中关于网站的LOGO，目前有三种规格：88*31这是互联网上最广泛的LOGO规格，120*60这种规格用于通常大小的LOGO，120*90这种用于大型的LOGO

5、javaScript书写及使用规范

一、书写

　　书写过程当中，每行代码结束必须有分号；

　　原则上全部功能均根据XXX项目需求原生开发

　　以免网上down下来的代码形成代码污染（沉冗代码与现有代码的冲突...）

二、变量命名格式

　　变量命名：驼峰式命名。

　　原生JavaScript变量要求是纯英文字母，首字母必须小写，如：iTaoLun

　　jQuery变量要求首字符为“_ ”其余与原生JavaScript规则相同，如： _iTaoLun

　　要求变量集中声明，避免全局变量。

三、函数命名

　　首字母小写、驼峰式命名。如：checkUsername()

四、其余

　　代码结构明了，加适量注释，提升函数重用率；

　　注重与html分离，减少reflow，注重性能；

五、JavaScript文件

　　javaScript程序应独立保存在后缀名为：.js的文件夹中。应尽可能减小在HTML中，由于存在于HTML中的Javascript代码会明显增长文件大小，且不能对其进行filename.js

　　JavaScript的代码应尽可能放到body后面。这样能够减小由于载入脚本而形成其余页面内容载入也被延迟的问题。　

六、缩进

　　缩进单位为四个空格，避免使用Tab键来缩进，由于始终没有统一的Tab长短标准。虽然使用空格会增长文件的大小，但在局域网中几乎能够忽略，且在最小化过程当中也可被消除掉。

七、每行长度

　　避免每行长度超过80个字符。当一条语句一行写不下时，请考虑折行。

　　在运算符号，最好是逗号后换行。在运算符后换行能够减小由于复制粘贴产生的错误被分号掩盖的概率。　　

八、变量声明

　　全部的变量必须在使用前经过var进行声明。JavaScript并不强制必须这么作，但这么作可让程序易于阅读，且也容易发现那些没声明的变量（它们会被编译成全局变量）。将var语句放在函数的首部。最好把每一个变量的声明语句单独放一行，并加上注释说明。　尽可能减小全局变量的使用。不要让局部变量覆盖全局变量

　　var currentPage；//当前页码

　　var pageSize；//每页显示条数

九、函数声明

　　全部函数在使用前进行声明。内函数的声明跟在var语句的后面，这样能够帮助判断哪些变量是在函数范围内的。

十、{}和[]

　　使用{}代替 new Object（），使用[]代替 new Array()。这样便于书写且能提升一点执行效率。当成员是一组有序的数字时，使用数组来保存数据。当成员是无规律的字符串或者其余时使用对象来保存数据。

十一、event.srcElement问题

　　说明：IE下，event对象有srcElement属性，但没有target属性；Firefox下，event对象有target属性，可是没有srcElement属性。

　　解决方法：使用var obj = event.target || window.event.srcElement

十二、parentElement问题

　　说明：firefox与IE父元素（parentElement）的区别

　　IE：obj.parentElement

　　firefox：obj.parentNode

　　解决方法：由于firefox和IE都支持DOM，所以使用obj.parentNode是不错的选择　

6、图片规范

一、存放位置

　　全部页面元素类图片均放入images文件夹，测试用图片放于image/demoimg文件夹

二、格式

　　图片格式仅限于gif、jpg、png

三、命名规则

　　命名所有用小写英文字母或数字或下划线的组合，其中不得包含汉字、空格、特殊字符：尽可能用易懂的词汇，便于团队其余成员理解；另命名分头尾两部分，用下划线隔开，好比：ad_left01.gif、btn_submit.gif；

四、性能

　　在保证视觉效果的状况下选择最小的图片格式与图片质量，以减小加载时间。

　　运用Css Sprite技术集中小的背景图或图标，减小页面http请求，但注意，请务必在对应的spritepsd源图中划参考线，并保存至img目录下。

　　Css Sprite（CSS精灵图）使用方法：

　　　　a、将用到的背景图片压缩为zip格式的压缩包。

　　　　b、用CSS图片拼合生成器将其拼合成一张图片，而后下载该图片。

　　　　c、拼合完成后会生成相应的CSS规则，该文件定位了每一个图片的位置及图片的宽度和高度

　　　　d、在CSS样式中定位背景图片eg：a{background:url('../images/share.gif') 0 0 no-repeat;}

7、注释规范

一、html注释

注释格式：

二、css注释

　　注释格式：/*这是注释*/；

三、JavaScript注释

　　单行：单行注释使用//这是单行注释；

　　多行注释使用/*这是多行注释*/

8、兼容性规范

什么是浏览器兼容问题？

是指由于不一样的浏览器对同一段代码有不一样的解析，形成页面显示效果不统一的状况。

问题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六、IE7和遨游里的这个标签高度不受控制

　　碰到概率：60%

　　解决方案：给超出高度的标签设置overflow:hidden；或者设置行高line-height小于你设置的高度或font-size：1px；。

　　备注：这种状况通常出如今咱们设置小圆角背景的标签里。出现这个问题的缘由是IE8以前的浏览器都会给标签一个最小的默认的行高的高度。即便你的标签是空的，这个标签的高度仍是会达到默认的行高。

问题4：元素水平居中问题：

　　火狐中使用（针对块状元素）margin:0 auto，IE中父级元素设置（只对文本进行水平居中）：text-align:center

问题5：const问题：

　　　const char var说明var这个变量如今变成“只读变量”，任何对var修改的语句都被编译器视为错误。

　　　说明：火狐浏览器下，可使用const关键字或var关键字来定义常量；IE下，只能使用var关键字来定义常量；

　　　解决办法：统一使用var关键字来定义常量

问题6：模态和非模态窗口的问题

　　症状：IE下，能够经过window.showModalDialog和window.showModelessDialog打开模态和非模态窗口；

　　解决办法：直接使用window.open(pageurl,name,parameters)（但尽可能少用，安全级别低）方式打开新窗口。若是须要将子窗口中的参数传递回父窗口，能够在子窗口中使用window.opener来访问。如：var parWin = window.opener;parWin.document.getElementById("aing").value = "aing"

问题7：float延续性

　　在IE浏览器中，若是使用float设置元素浮动对齐，若是不关闭浮动，将会对后面的元素标签延续浮动。

　　解决办法：在设置float元素后面加上clear:both，清除浮动。

9、浏览器兼容性CSS hack

一、css hack

hack的目的就是使你的css代码兼容不一样的浏览器，固然咱们也能够反过来利用hack为不一样版本的浏览器定制编写不一样的css效果。

例如：div{background:green;/*火狐*/ *background:red;/*IE6&&IE7*/}咱们在IE6中看到的是红色，在火狐中看到的是绿色。

二、上面的css在火狐中，它是认识不了后面的那个带星号的东西是什么的，因而将它过滤掉，不予理睬，解析获得的结果是：div{background:green;}

在IE6中呢，它两个background都能识别出来。它解析获得的结果是：div{background:green;*background:red;}因而根据优先级别，处在后面的red的优先级高，因而div的背景色就是红色的了

三、区别不一样浏览器，CSS hack写法：

　　区别IE6与FF：background:orange；*background:blue;

　　区别IE6与IE7：background:green!important;background:blue;（IE6是blue、IE7下是green）

　　区别IE7与FF：background:orange;*background:green;（IE7下显示green、FF下显示orange）

　　区别FF,IE7,IE6：background:orange;*background:green;_background:blue;*background:green!important;（IE6显示green;IE7显示green；FF下显示orange）

注：IE都能识别*、标准浏览器（如FF）不能识别*；

IE6能识别*、不能识别!important

IE7能识别*、也能识别!important

FF不能识别*、但能识别!important

浏览器优先级别：FF<IE7<IE6，CSS hack书写顺序通常是：FF IE7 IE6

四、IE9下的css hack

div{

　　background:red\0;/*IE8和IE9都支持*/

　　background:blue\9\0;/*IE9*/

　　*background:green;/*IE7*/

　　 _background:gray;/*IE6*/

}

注意：书写CSShack的顺序，其中：

　　a、background-color:red\0；IE8和IF9都支持；

　　b、background-color:blue\9\0；仅IE9支持；

区别FF（IE8）与IE6与IE7

　　background:orange;FF和IE8背景色将为橘黄色

　　*background-color:red;IE6和IE7背景色将为红色