WEB前端开发规范

为什么80%的码农都做不了架构师?>>>   hot3.png

一、文件命名规范

images  //图片资源,如果项目多人开发里面还需要用子文件夹分开
fonts    //字体资源,一般就是特殊字体嵌入或者图标字体
styles   //CSS文件
- app.css //reset样式,如果项目小直接写在里面,如果多人开发则需要分开如:app.xxx.css
- app.a.css
- app.b.css
scripts //javascripts
- jquery.js
- app.js //主程序
videos  //视频
sounds //音频
index.html //HTML文件

注:所有文件夹以及文件名都是小写,编码都均采用UTF-8编码

二、书写规范

1.所有HTML标签都必须使用小写。
2.CSS能用id的尽量用id,能复用的要使用class。
3.样式文件要在head标签内,脚本要再底部。
4.如果页面图片量很多,要使用JS脚本按需动态加载。
5.如果要兼容retina屏幕要使用 srcset和-webkit-image来设置2x质量图片。
6.如果文档模式是<!doctype html>可以不用写<br />中的斜杠。(当然包含其他无内容tag)
7.引用脚本和者样式去掉type属性,能节省一点是一点。
8.不管是HTML还是CSS或是JS都需要写注释,代码不仅要自己看得懂,让别人看得懂也很重要。
9.开发的时候CSS不要堆在一行编写,等项目完全编写完后再用压缩工具整体压缩。
10.编写JS的时候开始大括号要跟在语法后面不要另起一行,JS命名方式采用驼峰。

function isEmail(){   //do something....}

11.切图的时候如果是全彩图片则使用jpg格式且用80%质量,如果带有透明要使用png24格式。
12.书写链接地址时, 必须避免重定向,例如:href=”http://jinzhe.net/”, 即须在URL地址后面加上“/”。
13.在页面中尽量避免使用style属性,即style=”…”。
14.给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能。
15.能以背景形式呈现的图片, 尽量写入css样式中。
16.重要图片必须加上alt属性; 给重要的元素和截断的元素加上title。
17.CSS属性书写顺序, 建议遵循:  布局定位属性-->自身属性-->文本属性-->其他属性. 此条可根据自身习惯书写, 但尽量保证同类属 性写在一起. 属性列举: 布局定位属性主要包括: 
display & list-style & position(相应 的 top,right,bottom,left) & float & clear & visibility & overflow; 自身属性主要包括: width & height & margin & padding & border & background; 文本属性主要包括:color & font & text-decoration & text-align & vertical-align & white- space & 其他 & content; 我所列出的这些属性只是最常用到的, 并不代表全部。
18.样式表中中文字体名, 请务必转码成unicode码, 以避免编码错误时乱码。
19.jQuery变量前面要加$

三、图片规范

1. 所有页面元素类图片均放入images文件夹, 测试用图片放于images/demo文件夹;
2. 图片格式仅限于png,jpg;
3. 命名全部用小写英文字母、 数字、 _ 的组合,其中不得包含汉字、空格、特殊字符;尽量用易懂的词汇, 便于团队其他成员理 解; 另, 命名分头尾两部分, 用下划线隔开, 比如ad_1.jpg,btn_submit.png;
4. 在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间;
5. 尽量避免使用半透明的png图片;
6. 运用css sprite技术集中小的背景图或图标, 减小页面http请求, 但注意, 请务必在对应的sprite psd源图中划参考线, 并保存至images目录 下.

四、注释规范

1. html注释: 注释格式 <!--这儿是注释-->, '--'只能在注释的始末位置,不可置入注释文字区域;
2. css注释: 注释格式 /*这儿是注释*/;
3. JavaScript注释, 单行注释使用'//这儿是单行注释' ,多行注释使用 /* 这儿有多行注释 */;


转载于:https://my.oschina.net/myshow/blog/311380

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/299168.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Execute .NET Code under SQL Server 2005

http://www.codeproject.com/KB/database/Managed_Code_in_SQL.aspx转载于:https://www.cnblogs.com/OceanChen/archive/2010/07/22/1783091.html

MySQL调用mongodb事务回滚_SpringBoot整合MongoDB,在多数据源下实现事务回滚。

项目中用到了MongoDB&#xff0c;准备用来存储业务数据&#xff0c;前提是要实现事务&#xff0c;保证数据一致性&#xff0c;MongoDB从4.0开始支持事务&#xff0c;提供了面向复制集的多文档事务特性。能满足在多个操作&#xff0c;文档&#xff0c;集合&#xff0c;数据库之间…

Goreplay来做流量回放

最近做项目&#xff0c;用到goreplay来做流量回放&#xff0c;什么是goreplay&#xff1f;GoReplay is an open-source network monitoring tool which can record your live traffic, and use it for shadowing, load testing, monitoring and detailed analysis.本质上就是通…

硬盘知识学习(一)

硬盘相关常识&#xff08;一&#xff09;一、硬盘的组成硬盘粗略的讲&#xff0c;包括碟片、磁头&#xff0c;主轴、接口、缓存等组成。二、硬盘的三个基本概念1&#xff0c;什么是磁道&#xff08;TRACK&#xff09;。磁道首先是看不到的。他是在格式化的时候在盘面上划分出的…

“Python简直万能!”拜托快醒醒!

全世界只有3.14 % 的人关注了爆炸吧知识在程序员中&#xff0c;一直流传着“Python除了不会生孩子&#xff0c;什么都会”的传说&#xff0c;Python真的是万能语言&#xff1f;很多使用Python的小伙伴&#xff0c;坚信 Python 可以做任何事情。到底是不是真的如传说中那般万能&…

如何对 string 进行Base64编码,解码?

咨询区 Kevin Driedger&#xff1a;如何将指定的 string 编码成 base64。如何将 base64 解码成 string。回答区 andrew.fox&#xff1a;我来分享下对这个问题的处理吧&#xff1a;对 Encoding 类进行扩展&#xff0c;当然扩展方法还支持各种编码格式&#xff0c;不仅仅是 UTF8。…

python编程自然数表达式_[宜配屋]听图阁

普通的数学运算用这个纯抽象的符号演算来定义&#xff0c;计算结果只能在脑子里存在。所以写了点代码&#xff0c;来验证文章中介绍的演算规则。我们来验证文章里介绍的自然数及自然数运算规则。说到自然数&#xff0c;今天还百度了一下&#xff0c;据度娘说&#xff0c;1993年…

Oracle分区表常用命令

一、Oracle分区简介 ORACLE的分区是一种处理超大型表、索引等的技术。分区是一种“分而治之”的技术&#xff0c;通过将大表和索引分成可以管理的小块&#xff0c;从而避免了对每个表作为一个大的、单独的对象进行管理&#xff0c;为大量数据提供了可伸缩的性能。分区通过将操作…

linux--web服务器

WEB服务器也称为WWW(WORLD WIDE WEB)服务器&#xff0c;主要功能是提供网上信息浏览服务。 WWW 是 Internet的多媒体信息查询工具&#xff0c;是 Internet 上近年才发展起来的服务&#xff0c;也是发展最快和目前用的最广泛的服务。1.rpm -qa|grep httpd 查询服务是否安装…

WPF轮播图实现方式

WPF开发者QQ群&#xff1a; 340500857 | 微信群 -> 进入公众号主页 加入组织欢迎转发、分享、点赞、在看&#xff0c;谢谢~。 01—效果预览效果预览&#xff08;更多效果请下载源码体验&#xff09;&#xff1a;02—代码如下一、MasterCarousel.cs 代码如下using System; …

学过物理的人才能看懂的笑话,你能看明白几个?

全世界只有3.14 % 的人关注了爆炸吧知识1丈夫买了几斤廉价藕&#xff0c;满以为可对妻子炫耀了。不料妻子破口大骂&#xff1a;笨蛋&#xff01;为何不买别的菜&#xff0c;这藕一斤少说也有半斤窟窿啊&#xff01;还说便宜&#xff1f;2第一次坐飞机的两位老妇人在飞机起飞前找…

QtWebkit中浏览器插件的设计-1

我们都知道浏览器中有一套由Netscape浏览器传承下来的插件接口&#xff0c;包括webkit&#xff0c;firefox都是支持的&#xff0c;但是那个开发起来比较困难&#xff0c;并且是平台相关的&#xff0c;借助于Qt的跨平台的特性&#xff0c;可以方便地为Qt开发出一套跨平台的插件。…

mysql左键关联_MySQL的:左键删除重复列加入,3个表

我有一个表,使用3个外键到其他表.当我执行左连接时,我会收到重复的列.MySQL表示,USING语法将减少重复的列,但没有多个键的示例.鉴于&#xff1a;mysql> describe recipes;---------------------------------------------------------------| Field | Type | Null | Key | De…

cisco 双ISP线路接入,链路自动切换方案

最近接到的一个项目&#xff0c;客户总部在惠州&#xff0c;分部在香港&#xff0c;在香港分部设有ERP服务器与邮件服务器&#xff0c;总部出口为铁通10M光纤与网通1M DDN 专线&#xff08;新增&#xff09;&#xff0c;原总部是用netscreen 防火墙与香港的pix 515作IPsec 对接…

js遮罩层以及移动端的上拉框

今天发一个之前写的移动端的项目&#xff0c;主要是讲一下遮罩层的应用&#xff0c;以及顺带提一下移动开发的一些事情。首先按钮点击弹出遮罩层这个大家很熟悉了&#xff0c;这里还是给大家提供一份代码&#xff0c;跟通用的没太大区别&#xff0c;主要讲一下方法&#xff1a;…

精简ABP的模块依赖

ABP的模块非常方便我们扩展自己的或使用ABP提供的模块功能&#xff0c;对于ABP自身提供的模块间的依赖关系想一探究竟&#xff0c;并且试着把不必要的模块拆掉&#xff0c;找到那部分核心模块。本次使用的是AspNetBoilerplate。源码下载从Github下载ABP源码后&#xff0c;进入s…

你这飞机会爆炸吗?航空公司含泪甩卖49元机票,却被超模君挖出秘密!

全世界只有3.14 % 的人关注了爆炸吧知识制作团队制作人 超模君编剧 恐恐恐插画 杨羊羊 友情出演 超模君 章小天……小天吐槽时刻……超模君之后还会采访谁呢小天有小道消息哦扫描这个二维码你将会有机会见识到超模君的科普沙雕网友们一起斗图↓↓↓↓…

[zz]WCF分布式开发步步为赢(0):WCF学习经验分享,如何更好地学习WCF?

WCF分布式开发学习&#xff0c;应该从哪里开始? 学习WCF是不是就不需要学习Enterprise Sevices(COM).Net Remoting、Web Service(ASMX)、WSE3.0和MSMQ消息队列&#xff1f; WCF分布式开发学习&#xff0c;如何制定一个合理的计划&#xff0c;才能更好地学习WCF分布式应用开…

C#报错:创建调试信息文件 ……obj\Debug\model.pdb: 拒绝访问

错误&#xff1a;创建调试信息文件“.......\obj\Debug\model.pdb”时发生错误 --“......\obj\Debug\model.pdb: 拒绝访问。 解决办法如下&#xff1a; 删除该项目下的 bin 和 obj 文件夹 就可以了,然后右键项目名点生成&#xff0c;就会重新生成bin和obj文件夹。

linux nginx mysql php 5.5._搭建基于Linux6.3+Nginx1.2+PHP5+MySQL5.5的Web服务器全过程

之前的Web服务器都是通过yum搭建的&#xff0c;想要添加新模块或者更新某些软件都很不方便(牵一发而动全身啊&#xff01;)。所以&#xff0c;现在准备将环境改为源码编译安装&#xff0c;这样便于调整&#xff0c;性能上也会比yum方式好很多。以下是我的安装步骤&#xff0c;我…