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,一经查实,立即删除!

相关文章

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.本质上就是通…

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

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

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第一次坐飞机的两位老妇人在飞机起飞前找…

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

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

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

ASP 缩略图 (纠错版)

网上很多缩略的代码&#xff0c;不过很多都是错误的。 这个是纠正版&#xff0c;本人已修改。 Code<%Function PicReSize(picURL)FileName1Mid(picURL,13,22)Set Jpeg Server.CreateObject("Persits.Jpeg") 获取源图片路径Path Server.MapPath(picURL) 打开源图…

Blazor Server 应用程序中进行 HTTP 请求

翻译自 Waqas Anwar 2021年5月4日的文章 《Making HTTP Requests in Blazor Server Apps》 [1]Blazor Server 应用使用标准的 ASP.NET Core 应用程序&#xff0c;在服务端执行 .NET 代码。在 Blazor Server 应用程序中&#xff0c;我们可以像在 ASP.NET Core Web 应用程序中那样…

遍历属性动态展示列

为什么80%的码农都做不了架构师&#xff1f;>>> 前端根据后台返回json对象(Map)进行动态列展示。 javascript属性遍历和访问&#xff1a; //var obj {name:"h2do",age:0,sex:"男"}; function User(){this.name "h2do";this.age 0…

厉害了!这几位小学生竟然在艺术界掀起一阵风暴,简直是灵魂画手无疑.........

全世界只有3.14 % 的人关注了爆炸吧知识高能预警&#xff01;请查阅全文&#xff01;在孩子们的眼中&#xff0c;世间万物都被赋予了无限的想象力&#xff0c;而绘画是他们独特想法和思维的表达。一支小小的画笔&#xff0c;便能创造一个千奇百怪的世界。为鼓励孩子们拿起画笔&…

花开的声音 - 张靓颖

姓名&#xff1a;张靓颖 / Jane Zhang性别&#xff1a;女 地区&#xff1a;内地 职业&#xff1a;歌手 星座&#xff1a;天秤座 血型&#xff1a;O 身高&#xff1a;162cm张靓颖&#xff0c;中国女歌手&#xff0c;四川成都人。2005年参加湖南卫视…

基于事件驱动架构构建微服务第5部分:容器化(Web Api Core 和 SQL Server Linux)

原文链接&#xff1a;https://logcorner.com/building-microservices-through-event-driven-architecture-part5-dockerization-web-api-core-and-sql-server-linux/在本文中&#xff0c;我将谈谈web api和sql server linux数据库的容器化Web API将发布并上线&#xff0c;它需要…

爆笑!物理书上的照片能不能好好选选啊喂!

全世界只有3.14 % 的人关注了爆炸吧知识在物理书里&#xff0c;有各种物理大佬的照片。他们正襟危坐&#xff0c;他们不苟言笑&#xff0c;他们看起来就很“物理”。但是&#xff0c;知识君想说&#xff0c;谁不是个有血有肉的人啊&#xff1f;&#xff01;选照片的时候给我好好…

计算机网络体系结构概述

1.Internet结构 2.计算机网络的体系结构 1&#xff09;网路协议主要由以下三要素组成&#xff1a; 语法&#xff0c;即数据与控制信息的结构或格式&#xff1b; 语义&#xff0c;即需要发出何种控制信息&#xff0c;完成何种动作以及做出何种响应&#xff1b; 同步&#xff0c;…

.NET 6 全新指标 System.Diagnostics.Metrics 介绍

前言工友们, .NET 6 Preview 7 已经在8月10号发布了, 除了众多的功能更新和性能改进之外, 在 preview 7 版本中, 也新增了全新的指标API, System.Diagnostics.Metrics, 为了让应用能有更好的可观测性, 在之前的发布的.NET 5中, 也把 Activity 增强为 ActivitySource, 主要原因还…

42张动图带你走进神奇的物理世界,超震撼!

全世界只有3.14 % 的人关注了爆炸吧知识世界之大&#xff0c;无奇不有。生活中其实有许多神奇的物理化学现象。下面就一起来看看吧&#xff01;图片加载慢稍加等待即可哦~神 奇 的 物 理 反 应1.锤击被液氮冻上的康乃馨&#xff0c;求康乃馨的心理阴影面积。2.比重比空气还大的…