当前位置：首页 > Web前端 > HTML

Web前端开发标准规范

时间：2023-04-02 18:04:30 HTML

Web前端开发规范的意义提高团队协作能力提高代码复用率和利用率能写出更高质量、更高效的代码为后期维护提供更好的支持1.命名规则使用英文语义命名，禁止使用特殊字符，禁止使用拼音，禁止中英文混合使用！项目、目录、html/css/js等文件均以小写命名，下划线分隔。eg：my_project_namehtml/css/js文件名与微信小程序一一对应。eg：login.html、login.css、login.jsclass，图片、视频、音频小写，下划线或破折号分隔；例如：btn-play或btn_playid可以用驼峰命名；eg：play或playGame变量名小写，下划线分隔；应该是名词，eg:product,product_detail常量全部大写，下划线分隔；例如：以动词开头的驼峰命名法中的MAX_COUNT函数名。getName()，返回类型为Boolean类型，一般以is开头，eg:isEnable();变量和函数的命名，不用担心长度，一定要符合语义和逻辑。eg：saveImageToPhotosAlbum()变量和函数名不能以数字开头，不能使用保留字；jQuery对象以“$”符号开头，私有变量以“_”开头。2、生产时间等信息需要添加到备注页的头部。页面名称功能模块，模块之间请添加注释，不需要中英文：...活动规则

{{index+1}}

{{item}}

.../*rulesstart*/.rules-wrapper{...}.rules-title{...}.rules-list{...}.rules-item{...}.rules-num{...}.rules-text{...}/*规则结束*/自定义函数.请说明函数的调用方式，包括函数的用途、参数类型等。/***JQ公告滚动封装函数*参数说明*@obj：动画节点，本例为ul*@top：动画高度，本例为-35px；注意向上滚动是一个负数*@time:animation的速度，即完成动画所花费的时间，本例中为500毫秒，即marginTop从0到-需要500毫秒35px*function：回调函数，每次动画完成，marginTop重置为零，并将此时显示的第一条消息添加到列表末尾；**/functionnoticeUp(obj,top,time){$(obj).animate({marginTop:top},时间,函数(){$(this).css({marginTop:"0"}).find(":first").appendTo(this);})}$(function(){//调用通知滚动函数setInterval("noticeUp('.noticeul','-35px',500)",2000);});三、HTML规范1、页眉的文档类型统一使用html5的doctype：lang属性统一使用en，特殊场景特殊处理的字符编码统一指定为'UTF-8'页面标题（Title）：页面名称-产品中文全称-官网-腾讯游戏-产品宣传语，28个汉字以内页面关键词（Keywords）：关键词为产品名称、主题名称、主题相关名词,页面描述用英文逗号隔开（Description）：不超过150个字符，描述要与页面内容相关。IE兼容模式移动端禁止缩放PC端header演示：

每周末抓金角银角王放装备-地下城与勇士官网-腾讯游戏

移动头演示：

页面名称-产品中文全称-官网-腾讯游戏-产品标语

2。HTML标签标签必须是合法的、封闭的、正确嵌套的。标记名称必须小写。不要使用HTML5过时的标签。例如：b。em自定义标签必须符合语义，标签的自定义属性必须小写。Data-开头，后面跟小写单词，多单词用下划线连接，如：\\使用Tab键代替空格键进行缩进，如webstorm中使用的快捷键command+option+L(Ctrl+Alt+L)对齐导入CSS和JavaScript文件时，一般不需要指定type属性，因为text/css和text/javascript分别是它们的默认值。css放在head上面，而JavaScript放在body下面紧跟在标签之前。属性必须加双引号（不是单引号），并且它们应该以特定的顺序出现以确保易读性；属性的顺序classidnamedata-*src,for,type,href,value,max-length,max,min,patternplaceholder,title,altria-*,rolerequired,readonly,disabledclass是为高度可重用的组件设计的，所以它们应该在第一名；id比较具体而且应该尽量少用，所以放在第二位。布尔属性是指不需要声明值的属性。XHTML要求每个属性声明一个值，但HTML5不需要。编写HTML代码时，需要尽量避免父节点冗余；很多时候，您需要迭代和重构以减少HTML。删除无意义的空标签，不要使用标签名设置样式四、CSS规范1、CSS导入方式一般使用外部样式表：统一使用link标签，少用@import（原生导入有加载性能问题）、sass、Except对于less、vue.js等使用import命令的文件（因为最终前端构建工具会将导入的文件编译成css文件）。在某些情况下，使用内部样式表：非常简单的页面，样式很少，比如：纯图片海报页面，纯文本协议页面内联样式只在特殊情况下使用：如：js动态获取滚动高度：style="height:{{scroll_height}}px;"2、css导入的顺序是先引用frameworkcss，再引用publiccss，再引用privatecss，最后写内部css，如下：3.CSS代码样式css头统一加上@charset声明，如下：@charset"utf-8";禁止使用ID选择器定义元素样式，避免使用!important和z-index。调整结构和引用顺序，禁止使用层级太深的选择器，最多3层。eg:ul.pro_list>li>p除非样式重置需要，否则禁止为纯元素选择器设置特定样式，避免样式污染PC和移动端通用重置示例body,html{width:100%;min-height:100%;/*移动端*/-webkit-user-select:none;user-select:none/*禁止文本选择（如果没有文本选择要求，则为必选项）*/}body{background-color:#fff;color:#333;font-size:16px;font-family:PingFangSC-Regular}a,body,button,dd,div,dl,dt,h1,h2,h3,h4,h5,h6,img,input,li,ol,p,select,table,td,textarea,th,tr,ul{box-sizing:border-box;margin:0;padding:0;border:0}button,input,select,textarea{outline:0;font-size:100%}h1,h2,h3,h4,h5,h6{font-size:100%}li,ol,ul{list-style:none}a{cursor:pointer}a,a:hover{text-decoration:none}::-webkit-input-placeholder{color:#B0B0B0}:-moz-placeholder{color:#B0B0B0}::-moz-placeholder{color:#B0B0B0}:-ms-input-placeholder{color:#B0B0B0}媒体查询顺序从大到小@mediaonlyscreenand(max-width:1080px),onlyscreenand(max-device-width:1080px){}@mediaonlyscreenand(max-width:960px),onlyscreenand(max-device-width:960px){}使用softta进行缩进b（4个空格）分号每个属性声明必须以分号引号结束。最外层统一使用双引号；url的内容必须使用引号；属性选择器中的属性值需要引号。以下情况不需要空格：属性名','之后的多个规则的分隔符！重要的'!'之前，属性值中'('和')'之后，末尾不能有多余的空格以下情况前的行的空格是必需的：selectorbeforeattributevalue'>','+','~'beforeandafter'{'before!important'!'before@elsebeforeandafterattributevalue','aftercomment'/*'and'*/'之前CSS属性的声明顺序与性能无关，但为了便于阅读统一规范，请遵循以下顺序。declaration-order{/*定位*/position:absolute;顶部：0；右：0；底部：0；左：0；z-指数：100；浮动：对；/*盒子模型*/display:block;宽度：100px；高度：100px；/*外观*/border:1pxsolid#e5e5e5;边界半径：3px；:#f5f5f5;/*排版*/颜色：#333；文本对齐：居中；字体：普通13像素“HelveticaNeue”，无衬线字体；行高：1.5；/*transparency*/opacity:1;}通过flex布局项目上线前添加兼容前缀Autoprefixer，然后压缩代码4.CSS框架阿里图标库css3动画库Sass和Compass少用@import（原生import有加载性能问题），使用webpack等打包工具使用import命令的项目除外。js附在body底部的引用上，先引用框架js，再引用工具类js，然后在私有js最后写内部js。如下优点：1.页面代码和js代码实现有效分离，降低耦合2.方便代码维护和扩展3.方便代码复用script>layui.use('console',layui.factory('console'));优点：内部js代码是相对集中，与页面结构的实现代码耦合度低，更容易维护缺点：js代码仅限于当前页面，代码不能被多个页面复用，导致代码冗余度高”value="button"name="button">开发中不推荐使用该方法1.因为该方法与页面结构代码耦合性太强，后期维护起来很不方便，2.并且该方法正在开发中process会导致大量冗余代码2.Javascript代码编写目前在使用webpack等打包工具时只使用ES6语法，所以一般项目还是使用ES5。语句通常以分号结尾。变量必须在使用前声明，即它们在每个作用域开始之前声明。函数声明使用表达式方式//badconstfn=function(){};//goodfunctionfn(){}除了三元运算，if,else等禁止简写console.log(name);//不推荐写if(true)alert(name);控制台日志（名称）；//正确写法if(true){alert(name);}使用三元运算符，但不要滥用(type==1?(agagin==1?'Resold':'Sold'):'Unsold')//不要再使用三元运算符了！3、Javascript框架和插件必须掌握jQuery和Vue；工作中一般用jQuery维护老项目，新项目一般用Vue。对其他框架略有了解，遇到了就去查资料。（业余时间可以学习angular和React以及自己喜欢的框架）移动端：MintUIPC端官网，商城：ElementPC端后台管理系统：layui或iView轮播图：swiperscroll插件：iScrollorbetter-scrollResponsive官网：尽量使用mediaqueries自定义样式，不推荐bootstrap（因为不喜欢记一堆类名^_^）。常用功能封装在util.js中，大家一起完善；方便以后使用。参考@AlloyTeam页面前端规范的CodeGuide

上一篇：百度单测生成技术如何召回在线服务异常问题？

下一篇：基于Vue和Quasar的前端SPA项目实战环境（一）

Web前端开发标准规范相关文章

最新推荐

猜你喜欢