前端、HTML+CSS+JS编写规范（终极版）

HTMLCSS文档规范 HTML和CSS文档必须采用UTF-8编码格式: HTML文档必须使用HTML5的标准文档格式: HTMLCSS编写规范 HTML和CSS的标签.属性.类名.ID都必须使用小写字母: HTML和CSS的属性.类名.ID命名必须具有语义化: HTML代码必须保持文档结构清晰,必须合理的进行代码缩进: CSS文件禁止样式表内引用CSS文件: CSS编写格式,样式代码保持一行,多个选择器同一个规则必须换行,如图1: CSS样式表格分为3个级别:系统级(以lib_开头).模块级(…

HTML/CSS/JS编码规范

最近整理了一份HTML/CSS/JS编码规范,供大家参考.目录:一.HTML编码规范二.CSS编码规范三.JS编码规范一.HTML编码规范 1. img标签要写alt属性根据W3C标准,img标签要写alt属性,如果没有就写一个空的.但是一般要写一个有内容的,根据图片想要表达的意思,因为alt是在图片无法加载时显示的文字.如下不太好的写法: <img src="company-logo.svg" alt="ABC Company Logo"> 更好的…

CSS的编写规范

一.前言如上图,页面在渲染和画图时,耗时还是比较多的,这就对我们的编写要求愈加严格. 我们有很多方法来减少上图所示的页面加载耗时的,比如但是更多的还是在于平时的编写规范,我们需要了解浏览器,让他更加便捷快速的理解(加载)我们的代码. 另外,在编写页面时,如果内容较多,相应的css也会变得更多.更加复杂. 或许会你会想着拆分css成2个或更多的文件,然而这并不是好的方法,会增加向服务器请求的次数,进而延长了页面加载完成的时间. 基于以上两点考虑,规范化的编写代码,不仅仅能够减少页面加载的耗时,…

认识大前端html+css+js

认识大前端:前端就是将效果图生成网页,利用html+css+js等技术. 如果把前端比作一台汽车,那么html就是车的骨架,css就是完整的车的模型,而js就充当着车的发动机... 建议: 刚刚开始学的话,html,css,js时间要合理分配:博主的时间的分配是这样html2天,css7天,js基础3天,博主的仅供参考,具体时间还要看你自己的学习进度. 做前端没一个好的浏览器是不行的: 建议每个人都下一个火狐或者谷歌,博主用着还不错,不要忘记把它设置成默认浏览器. 有了一个好的浏览器,就必须…

实现简易版德州扑克|学习麻瓜编程以项目为导向入门前端 HTML+CSS+JS

实现简易版德州扑克 1.先上达到网页效果图(简易版德州扑克) 网页分为发牌区和牌池,上面为发牌区,下面是牌池区 2. 代码实现 2.1 HTML和JS代码 ` <link rel="stylesheet" href="styles.css"> </head> <body style="background-color:cornflowerblue"> <div class="pool"…

中阶d01-- web前端 html css js bootstrap

html 页面骨架结构css 页面优化js(脚本语言) 页面和用户互动 bootstrap 前端框架,主要实现不同设备直接打开页面时播放比例设置(全屏暂时,不要滚动条)…

js编写规范

JavaScript编码规范 Bug----33条 1. 不要使用’==’和’!=’,使用’===’和’!==’替代等级:Major 原因:==和!=在判断值相等前会判断类型是否相等.这容易因为类型不同而造成错误.比如:它会认为表达式:’\t\r\n’==0是正确的.因此,要采用===和!==替代这两个符号. 建议如下的方式: if (var === 'howdy') { ... } 不建议如下的方式: if (var == 'howdy') { ... } 例外:在判断函数是否为空的情况下,…

html +　css + js注释规范

添加注释到代码中,是一个很好的习惯,而且极大的提高了代码的可读性 1.HTML  2.CSS //commentContent /*commentContent*/ 3.JS //commentContent /*commentContent*/ 注意: 1.注释位置每个人都有自己的习惯,但要保证代码的整洁和可读性. 2.注释也是字符也是会有流量产生.因此当页面发布到正式地址的时候,最好加上一步优化流程.…

Qt编写输入法终极版V2018

输入法是很多Qt+嵌入式linux开发的同学的痛,自从5.7自带了输入法后,这个痛终于缓解了不少,不过还有大量的嵌入式linux程序停留在qt4时代,为此特意选择了QWidget来写这个输入法,为了兼容qt4到qt5所有版本,陆续完善了好几年,吸收过不少的建议,也卖出过不少份,感谢大家!1:纯QWidget编写,支持任何目标平台(亲测windows.linux.嵌入式linux等),支持任意Qt版本(亲测Qt4.6.0到Qt5.10.1).2:调用极为方便,pri文件调用形式,只要改成文件包含即…

用CSS实现蒙德里安名画|学习麻瓜编程以项目为导向入门前端 HTML+CSS+JS

实现项目:用CSS实现蒙德里安名画 1.首先,献上代码和效果图 1.1代码: <head> <style> .centerframe{ display: flex; height: 100vh; justify-content: center; align-items: center; } .red{ background-color: crimson; } .blue{ background-color: blue; } .yellow{ background-color: ye…

css编写规范最佳实践

最初,在编写CSS的时候,我们往往想到哪儿就写到哪儿,它们之间的关联性和有序性并不在考虑之中.但随着代码量的增加,亦或是多人共同开发,CSS的编写规范变得重要起来了.本文通过三个方面,总结出CSS编写的最佳实践.一来强制自己按照规范编写CSS,二来可以推广到团队使用. 层级规范(从高到低) Popout Mask Navigation Content 书写规范小写.英文 tab四个空格缩进以'-'短横杠连接名词为选择器添加状态前缀(.is-xxx) 关于空格的使用选择器与{之间有空格属…

前端开发 css、less编写规范

壹 ❀ 引早在大半年前,我在负责整理定义了前端组JavaScript开发规范与less.css样式开发规范.一直想将两个规范整理成文章,但在整理了JavaScript规范后,我花了较多的时间在学习JavaScript基础知识,所以对于样式规范一直处于放置状态.直到上周我收到了一条关于JavaScript规范的评论,提醒了我样式规范不能再拖了,那么在放假前花点时间整理一遍作为复习也算不错. 说在前面,本文虽然作为规范但对于less与css写法也给出了部分建议,所以在阅读本规范前建议读者先掌握le…

1. web前端开发分享-css,js入门篇

关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学习之路是比较好的.学习没有捷径,但学习是有技巧与方法. 一,css入门篇: 推荐书籍:css哪些事儿,精通css. 理由:css那些事儿,他是一本介绍css基础类的书,是入门的经典读物. 系统的介绍了css的选择符,伪类,工作环境,盒模型,两列,三列自适应布局.文字样式,图片处理,列表,表单…

web前端开发分享-css,js入门篇（转）

转自:http://www.cnblogs.com/jikey/p/3600308.html 关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学习之路是比较好的.学习没有捷径,但学习是有技巧与方法. 一,css入门篇: 推荐书籍:css哪些事儿,精通css. 理由:css那些事儿,他是一本介绍css基础类的书,是入门的经典读物. 系统的介绍…

个人css编写规范

前言:最近在做微信小程序,因为公司小,就我一个人弄前端的东西,js和页面都是我来弄,结果那天后台的人看到我的js代码,说我的代码写得不规范,函数什么的都很乱,弄得我羞愧难当,幸亏没看我的css,其实我的css命名也很随意==!一直觉得自己css其实还是可以的,但是突然发现自己到现在的css还没有很规范,很多名称什么的还很随意,有的地方用驼峰命名,有的又用横杠,有的还会用下划线,真的太随意了,所以就上网搜了搜命名规范,改了两天终于把样式全改过来了.因此做个小结: 意义:感觉规范css代码是非常有意…

web前端开发分享-css,js入门篇

学习没有捷径,但学习是有技巧与方法. 一,css入门篇: 推荐书籍:css哪些事儿,精通css. 理由:css那些事儿,他是一本介绍css基础类的书,是入门的经典读物. 系统的介绍了css的选择符,伪类,工作环境,盒模型,两列,三列自适应布局.文字样式,图片处理,列表,表单,还有选项卡,相册,导航,新闻列表等其它大部分的实践. 精通css,这书已经出到第二版了,相比第一版,第二版的大部分目录结构保持不变,内容变得更丰满了.此书从一另一个视角介绍了css的博大精深. 二,js入门篇:…

前端工程师面试问题归纳（一、问答类html/css/js基础）

一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.Web前端常见面试题及答案 6.常见前端面试题及答案(上) 7.web前端面试题及答案 8.web前端经典面试题 9.javascript之面试题精讲二.面试题汇总网上搜到一大堆面试题,重复的不少,全部归纳一下,也加上自己的理解 (一).问答类(html/css/js基础) 1. JavaScri…

前端规范之JS代码规范（ESLint + Prettier）

代码规范是软件开发领域经久不衰的话题,几乎所有工程师在开发过程中都会遇到或思考过这一问题.而随着前端应用的大型化和复杂化,越来越多的前端团队也开始重视代码规范.同样,前段时间,笔者所在的团队也开展了一波开源治理,而其中代码规范就占据了很重要的一项.接下来的几篇文章,将会对JS代码规范.CSS规范.Git工作流规范以及文档规范进行详细的介绍~ 系列文章: 前端规范之JS代码规范(ESLint + Prettier) 前端规范之CSS规范(Stylelint) 前端规范之Gti工作流规范(Husky…

JS模块规范前端模块管理器

一:JS模块规范(为了将js文件像java类一样被import和使用而定义为模块, 组织js文件,实现良好的文件层次结构.调用结构) A:CommonJS就是为JS的表现来制定规范,因为js没有模块的功能所以CommonJS应运而生,它希望js可以在任何地方运行,不只是浏览器中. CommonJS是主要为了JS在后端的表现制定的,他是不适合前端的! 这么理解:单独的JS文件中,需要用到另一个JS文件(当然了,将多个JS文件分开是为了提高代码的可读性.可维护性): 在html或动态页面文件中我…

【开源】前端练手笔记，Chrome扩展应用程序(html+CSS+JS) （1）

项目名称:github-notification 项目地址:https://github.com/WQTeam/github-notification 说明:本人打算抽时间学习前端(html + css +js),选择Chrome扩展应用程序制作一个简单练手的项目.避免中途放弃在此立字为证! 有一起的兄弟吗? 项目简介:一款开源的,关于Github通知和监控个人项目的Chrome扩展应用程序(其实就是想监控下github上某个项目的star数,fork数等等.当然大家有什么想法也可以一起提出来讨…