Web前端开发标准规范 1
web前端开发规范的意义
- 提高团队的协作能力
- 提高代码的复用利用率
- 可以写出质量更高，效率更好的代码
- 为后期维护提供更好的支持
一、命名规则
- 命名使用英文语义化，
禁止使用特殊字符，禁止使用拼音，禁止使用中英文混合！ - 项目、目录、html/css/js等文件命名全部采用小写方式， 以下划线分隔。eg：my_project_name
- html/css/js文件名一一对应参考微信小程序.eg: login.html、login.css、login.js
- class、图片、视频、音频采用小写方式，以下划线或中划线分隔；eg：btn-play或btn_play
- id可采用驼峰命名;eg：play或playGame
- 变量名采用小写方式， 以下划线分隔；应为名词,eg： car,person
- 函数名采用驼峰命名，以动词开始。 getName(), 返回类型是布尔类型，一般以is开头，eg: isEnable();
- 变量和函数命名，不要担心长度，一定要语义化合乎逻辑。
二、注释
- 页面头部需要添加制作时间等信息。
<head> <title>页面名称</title><!-- 月影 2019-02-19 -->
</head>
- 功能模块，请在模块之间加入注释，中英文不做要求：
... <!-- 活动规则 开始 -->
<div class="rules-wrapper"><div class="rules-title">活动规则</div><div class="rules-list"><div class="rules-item" v-for='item,index in rules_list'><div class="rules-num">{{index+1}}</div><div class="rules-text">{{item}}</div></div></div>
</div>
<!-- 活动规则 结束 -->...
/* rules start*/
.rules-wrapper{...}
.rules-title{...}
.rules-list{...}
.rules-item{...}
.rules-num{...}
.rules-text{...}
/* rules end*/
- 自定义函数。请注明函数的调用方式，包括函数的用途、参数类型等。
/* JQ公告滚动 封装函数
* 参数说明
* obj : 动画的节点，本例中是ul
* top : 动画的高度，本例中是-35px;注意向上滚动是负数
* time : 动画的速度，即完成动画所用时间，本例中是500毫秒，即marginTop从0到-35px耗时500毫秒
* function : 回调函数，每次动画完成，marginTop归零，并把此时第一条信息添加到列表最后;
*
*/
function noticeUp(obj,top,time) {$(obj).animate({marginTop: top}, time, function () {$(this).css({marginTop: "0"}).find(":first").appendTo(this);})
}
$(function () {// 调用 公告滚动函数setInterval("noticeUp('.notice ul','-35px',500)", 2000);});
三、HTML规范
1、页面头部
- 文档类型统一使用html5的doctype：
- lang属性统一使用en，特殊场景特殊处理
- 字符编码统一指定为'UTF-8'
- 页面标题(Title)： 页面名称-产品中文全称-官方网站-腾讯游戏-产品slogan，28个汉字以内
- 页面关键字(Keywords)： Keywords为产品名、专题名、专题相关名词，之间用英文半角逗号隔开
- 页面描述(Description) ：不超过150个字符，描述内容要和页面内容相关。
- IE兼容模式 <meta http-equiv="X-UA-Compatible" content="IE=Edge">
- 移动端禁止缩放
PC端头部示范：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!-- 月影 2019-02-19 --><title>抓金角银角大王每周末放送装备 - 地下城与勇士官方网站 - 腾讯游戏</title><meta http-equiv="X-UA-Compatible" content="IE=Edge"><meta name="keywords"content="英雄联盟,lol,lol新手礼包,lol攻略,lol视频,lol视频攻略,英雄资料,英雄联盟战争学院,明星解说视频,101战争学院,英雄,攻略,WCG,点亮图标,赛事"/><meta name="description"content="英雄联盟官方网站，海量风格各异的英雄，丰富、便捷的物品合成系统，游戏内置的匹配、排行和竞技系统，独创的“召唤师”系统及技能、符文、天赋等系统组合，必将带你进入一个崭新而又丰富多彩的游戏世界。"/>
</head>
<body>
</body>
</html>
移动端头部示范：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!-- 月影 2019-02-19 --><title>页面名称-产品中文全称-官方网站-腾讯游戏-产品slogan</title><!-- 禁止缩放 --><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><!-- 为了防止页面数字被识别为电话号码，可根据实际需要添加： --><meta name="format-detection" content="telephone=no"><!-- 让添加到主屏幕的网页再次打开时全屏展示，可添加： 删除默认的苹果工具栏和菜单栏 --><meta content="yes" name="mobile-web-app-capable"><meta content="yes" name="apple-mobile-web-app-capable"><meta name="Description" content="页面的描述内容"/><meta name="Keywords" content="页面关键字"/><!-- External CSS --><link rel="stylesheet" href="demo.css"><!-- In-document CSS --><style></style>
</head>
<body><!-- External JS -->
<script src="demo.js"></script><!-- In-document JS -->
<script></script>
</body>
</html>
2、HTML标签
- 标签必须合法且闭合、嵌套正确，标签名需小写
- 自定义标签需要符合语义化，
必须小写 - 标签的自定义属性以data-开头，后面跟
小写单词，多单词使用下划线连接如：<a href="javascript:;" data-goods_num='18'></a> - 缩进使用Tab键不要使用空格键，webstorm中使用快捷键command+option+L（Ctrl+Alt+L）对齐
- 引入CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。样式表在head中，JavaScript在body中
标签中属性必须添加双引号（非单引号)，应该按照特定的顺序出现以保证易读性；属性顺序
class
id
name
data-*
src, for, type, href, value , max-length, max, min, pattern
placeholder, title, alt
aria-*, role
required, readonly, disabled
class是为高可复用组件设计的，所以应处在第一位；
id更加具体且应该尽量少使用，所以将它放在第二位。- boolean属性指不需要声明取值的属性，XHTML需要每个属性声明取值，但是HTML5并不需要；boolean属性的存在表示取值为true，不存在则表示取值为false。
参考
Code Guide by @AlloyTeam
页面前端规范
来源：https://segmentfault.com/a/1190000018194697
Web前端开发标准规范 1相关推荐
- Web前端开发标准规范
web前端开发规范的意义 提高团队的协作能力 提高代码的复用利用率 可以写出质量更高,效率更好的代码 为后期维护提供更好的支持 一.命名规则 命名使用英文语义化,禁止使用特殊字符,禁止使用拼音,禁止使 ...
- Web前端开发标准规范总结
Web前端作为开发团队中不可或缺的一部分,需要按照相关规定进行合理编写(一部分不良习惯可能给自己和他人造成不必要的麻烦).不同公司不同团队具有不同的规范和文档.下面是根据不同企业和团队的要求进行全面详 ...
- Web前端开发代码规范（基础）
一. 引言 对于一个多人团队来说,制定一个统一的规范是必要的,因为个性化的东西无法产生良好的聚合效果,规范化可以提高编码工作效率,使代码保持统一的风格,以便于代码整合和后期维护. 二. HTML/CS ...
- 前端传中文文件名_前端工程师需要掌握哪些知识，web前端开发规范总结
Web前端作为开发团队中不可或缺的一部分,需要按照相关规定进行合理编写(一部分不良习惯可能给自己和他人造成不必要的麻烦).不同公司不同团队具有不同的规范和文档.下面是根据不同企业和团队的要求进行全面详 ...
- （16）WEB前端开发规范之HTML规范
一.WEB前端开发规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档: 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发: 本 ...
- Web 前端开发规范手册
Web 前端开发规范手册 一.规范目的 1.1 概述 二.文件规范 2.1 文件命名规则 2.2 文件存放位置规范 2.3 CSS 书写规范 基本原则: 注意细则: 命名规则: id的命名: 基本样式 ...
- Web前端开发规范文档（更新于2013-01-13）
规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不 ...
- 汇总Web前端开发工程师需要注意的一些开发规范
对于正在从事Web前端开工作的人来说,了解Web前端开发规范是很重要的.因为只有这样才能保证高效快速的完成工作,今天小千就来和大家分享一下新手初学Web前端需要注意的Web前端开发规范有哪些!希望对小 ...
- web前端开发职业技能证书_1+x证书web前端开发职业技能等级标准1
1+x证书web前端开发职业技能等级标准1
最新文章
- HDU 2189 悼念512汶川大地震遇难同胞——来生一起走
- 机器学习中的不平衡分类方法(part2)--模型评估与选择
- How to determine if SAP CRM UI is extensible
- 【Python】【有趣的模块】【systimeos】
- LX04 小米触屏音箱刷机教程
- window系统怎么解压tar.bz2文件
- matlab显示图像的横纵坐标
- python自动生成字幕脚本_自动生成字幕软件？
- html九宫格实现人像拼图游戏,实例分享jQuery+vue.js实现的九宫格拼图游戏
- 基于树莓派的视频会议系统
- 老羊摘编自《罗辑思维跨年演讲》——分享3——阿里和腾讯
- ODrive配置云台电机GIMBLE_TYPE
- 分享逻辑思维导图模板，需要的自取进行编辑使用
- QWidget相对坐标转全局坐标
- loadrunner监控mysql服务性能
- word操作技巧：不同情况的文字统计方法
- 在线python编辑器-在线python编辑器
- 通过HFS低成本搭建NAS，并内网穿透实现公网访问 1/2
- E. By Elevator or Stairs?
- 外呼系统APP外呼软件手机电销软件拨号销售软件功