本文目录一览：
web前端开发需要掌握的几个必备技术
接下来由小编简单的列举出几个前端开发中必须要学会的知识：
第一阶段：
HTML+CSS:
HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、
JavaScript基础：
Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。
JS基本特效：
常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。
JS高级特征：
正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、
JQuery：基础使用
悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。
第二阶段：
HTML5和移动Web开发
HTML5：
HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、WebSocket、Canvas.
CSS3:
CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。
Bootstrap:
响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。
移动Web开发：
跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、Zepto.js、手机聚划算页面、手机滚屏。
第三阶段：
HTTP服务和AJAX编程
WEB服务器基础：
服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍。
PHP基础：
PHP基础语法、使用PHP处理简单的GET或者POST请求、
AJAX上篇：
Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍方法、兼容性处理方法、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用。
AJAX下篇：
JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。
第四阶段：
面向对象进阶
面向对象终极篇：
从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、属性读写权限、设置器、访问器。
面向对象三大特征：
继承性、多态性、封装性、接口。
设计模式：
面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程。
第五阶段：
封装一个属于自己的框架
框架封装基础：
事件流、冒泡、捕获、事件对象、事件框架、选择框架。
框架封装中级：
运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装。
框架封装高级和补充：
JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。
第六阶段：
模块化组件开发
面向组件编程：
面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序。
面向模块编程：
AMD设计规范、CMD设计规范、RequireJS，LoadJS、淘宝的SeaJS。
第七阶段：
主流的流行框架
Web开发工作流：
GIT/SVN、Yeoman脚手架、NPM/Bower依赖管理工具、Grunt/Gulp/Webpack。
MVC/MVVM/MVW框架：
Angular.js、Backbone.js、Knockout/Ember。
常用库：
React.js、Vue.js、Zepto.js。
第八阶段：
HTML5原生移动应用开发
Cordova：
WebApp/NativeApp/HybirdApp简介、Cordova简介、与PhoneGap之间的关系、开发环境搭建、Cordova实战(创建项目，配置，编译，调试，部署发布)。
Ionic：
Ionic简介和同类对比、模板项目解析、常见组件及使用、结合Angular构建APP、常见效果(下拉刷新，上拉加载，侧滑导航，选项卡)。
ReactNative：
ReactNative简介、ReactNative环境配置、创建项目，配置，编译，调试，部署发布、原生模块和UI组件、原生常用API。
HTML5+：
HTML5+中国产业联盟、HTML5PlusRuntime环境、HBuilder开发工具、MUI框架、H5+开发和部署。
第九阶段：
Node.js全栈开发：
快速入门：
Node.js发展、生态圈、Io.js、Linux/Windows/OSX环境配置、REPL环境和控制台程序、异步编程，非阻塞I/O、模块概念，模块管理工具、开发流程，调试，测试。
核心模块和对象：
全局对象global，process，console，util、事件驱动，事件发射器、加密解密，路径操作，序列化和反序列化、文件流操作、HTTP服务端与客户端。
Web开发基础：
HTTP协议，请求响应处理过程、关系型数据库操作和数据访问、非关系型数据库操作和数据访问、原生的Node.js开发Web应用程序、Web开发工作流、Node.js开发Blog案例。
快速开发框架：
Express简介+MVC简介、Express常用API、Express路由模块、Jade/Ejs模板引擎、使用Express重构Blog案例、Koa等其他常见MVC框架。
Web前端应该学习的css代码编写策略
今天小编要跟大家分享的文章是关于Web前端应该学习的css代码编写策略。本篇文章的目的不在于规则手册，而在于你正在编写CSS时的指南。希望能帮助大家找到自己的流程，而这篇文章的目标是让你的CSS一致，简单，易于使用。下面我们就一起看一看css代码编写策略吧！
1、不要写不需要的样式定义
例如：编写display:block;时要注意，因为很多元素默认有这个样式。
另一个例子是在元素上定义字体大小，它将继承你正在定义的正文字体大小。
目标是双重的：
§减少CSS文件的长度，以便浏览。
§明确你的CSS类需要做什么，而不是定义一堆已经产生的垃圾。
这里有一个常见问题是CSS没有清理干净，此时，为了简洁起见，可以完全删除。
2、将CSS看做可重用组件
不要将CSS元素视为每个单独页面上的特定表单或元素，如果你可以定义可重用的CSS实用程序和组件以供自己使用，则可以减少很多复杂性。
编写旨在重用的类的作用：
§确保你的设计在不同的页面之间保持一致。当你在很多页面上共享CSS类时，你知道当你改变这个类时，它会在每一个出现的页面发生改变。
§
这使得编写CSS真的很快。首先，如果大多数样式被定义为你所知道的实用程序和类，那么你就不必花费大量时间刷新和重新创建应用程序中已存在的样式。
3、在CSS中定义实用工具来干你的CSS
我们将’utilities’定义为一个CSS类，实际上它只用来做一件特定的事情，而不是封装整个元素。
你会看到这个策略经常用于流行的CSS框架，如Bootstrap和Foundation。
在这些流行的框架中你所看到的一些例子是：
.hide{display:none;}.text-center{text-align:center;}
例如，使用.hide，就不必每次想要在页面上隐藏元素时就得编写一个新的类——你只需要在你的元素上加上.hide类，它会使元素display:
one;。
我们写了一些实用程序文件，这些文件在应用程序之间共享，使用一些常用的实用程序可以减少为每个元素编写特定样式的需求。
一个很好的例子是我们如何使用margin和padding实用程序。下面是padding实用程序的一个简单例子：
.padding-0{padding:0;}.padding-xxs{padding:5px;}.padding-xs{
padding:10px;}.padding-sm{padding:20px;}.padding-md{padding:30px;
}.padding-lg{padding:40px;}.padding-xl{padding:50px;}.padding-xxl{
padding:60px;}
通过结合使用这些工具，我们可以与我们间距的像素数保持一致，并且可以快速标记页面，而不必编写非常多的CSS。
实用程序背后的理念是，你认为你可能会不止一次地使用它们。如果它是一次性样式，或者如果你认为组合样式会经常使用，那么可能它作为CSS类将可以更好地工作。
4、除非绝对需要，否则避免嵌套
假设有一些复选框的表单。在这个特定的情况下，你需要复选框内联(并排)。
所以你试图像这样写样式：
.user-formlia{color:red;}
然后在这过程中，你意识到你需要列表元素中的一个链接实际上是黑色的。所以你试图为黑色的链接编写一个工具类：
.link--black{color:black;}
此处.link_black链接将被CSS特殊性所覆盖，并且将无法压倒.my-formlia样式。
现在你可能想要确保列表元素中的所有锚标记是红色的，但是你不知道未来的元素会怎么样以及可能会对设计做出什么样的更改。
你可能会问，“好的亲，那么你怎么解决上面的问题呢?”
通过上面的例子，你应该明白锚标签的颜色应该是一个远离默认链接颜色的变体。
所以，在这种情况下，我会100%确定一个额外的工具类来处理红色链接。下面是实践中可能的处理例子：
a{
color:blue;
:hover{color:black;
}
}
.link--red{color:red;}
然后将其添加到HTML中的每个li元素。
我在这里作出的假设是：某一天，此红色的链接将在应用程序的其他地方被使用。我不想把它嵌入到用户表单中，因为那样我就不得不在未来编写另外一个样式来说明需要红色链接的情况。
另外，因为我将自己的悬停定义在自己的锚点上，所以红色链接将会变成黑色悬停，而不必定义任何其他样式。
5、利用BEM防止嵌套
能够真正防止过度嵌套的一个策略是名为BEM(BlockElementModifier)的命名策略。
使用BEM的一个很好的例子就是当你有一个真正具体的样式的组件时，如果使用实用程序会太麻烦和复杂的话。
这个例子看起来像这样：
//HTMLsnippet
//BEMCSS.profile{
background-color:white;
border:1pxsolid#ccc;}
.profile__photo{
border-radius:50%;
border:1pxsolid#000;}
你可以从这个例子中看到，我可以从我的样式表中看到.profile__photo嵌套在.profile中，然而实际上并不需要嵌套这个类。这真的是BEM最棒的地方，也是为什么我建议使用它的原因。
6、只使用!inportant作为最后的手段
在一个类上放上!important定义会使得覆盖代码变成一件令人头痛的事情，特别是当你试图处理媒体查询时。
这是我在处理Foundation的某个版本遇到的一个令人头痛的问题，因为他们决定对可见类打上!important。
这对于移动设备也是一个痛苦的根源。例如，如果你希望手机屏幕显示某些内容，则必须使用另一个!important类来重写.hide类以显示它。
我一直找不到使用!important的有效借口，除了在别人错误使用!important定义的情况下。
7、重新发明轮子需要时间和精力，所以要慎重考虑
比如说在客户端项目中创建自己的网格CSS框架，可能就是一个重新发明轮子的例子。
根据我的经验，除非你想知道它是如何工作的，否则自己写这些东西其实并没有多大的好处。有许许多多的边缘情况可以让你自己动手编写代码，所以为什么不使用别人已经写好的免费又能工作良好的代码呢?
也就是说，自己动手创建可能是一个很好的学习经验——但这很可能不属于生产应用程序的过程。
好的，那么JavaScript插件呢?
在谈论JavaScript或jQuery插件时，我要说的是，对于任何你使用的具有很好集成选项的真正常见组件来说，情况也是如此。其中的一些例子是照片轮播的JavaScript转盘，或日期选择器。
这里的边缘案例是使用一些带有封装组件逻辑的JavaScript框架的插件(React，Ember，Angular等)。如果你想要做的事情相对简单，有时可能将这些插件放到组件中会更麻烦。
例如，我会使用立即可用的Foundation或Bootstrap模块，如果我正工作于依赖jQuery的项目，但是会在React中构建我自己的模块(只是因为编写组件以便通过引入jQuery插入到React组件中会更容易)。
8、关注前端代码
最后，我要向你建议的最重要的事情是，你得关注你为前端编写的代码，掌握它，并持之以恒地改进它(统计提高自己!)。
我相信这是长期可维护的应用程序与难以处理的应用程序之间最大的区别因素之一。
以上就是小编今天为大家分享的关于Web前端应该学习的css代码编写策略的文章。希望通过遵循编写CSS的八个技巧，能够对未来继承你的代码的开发人员节省时间和精力。想要了解更多web前端相关知识记得关注北大青鸟Linux培训官网。最后祝愿小伙伴们工作顺利!
译文链接：#/article/8-tips-write-good-css-code.html
英文原文：8CSSStrategiesforWritingMaintainable,StreamlinedFront-End
Code
翻译作者：码农网_小峰
前端运行python代码几种方式
（1）在python自带的编辑器IDLE中运行
（2）将python代码保存在.py结尾的文件中，通过命令的方式运行
（3）放置在.bat文件中，在bat文件中写入：python -i helloworld.py,双击运行
（4）在解释器中，通过函数execfile,运行
学习Python就来北京尚学堂。
JS 前端的筛选代码
先给大家展示下效果图，如果大家感觉效果不错，请参考实现代码：
因为这是我自己第一次动手用js写分页，写的应该也不是很完美，有些公共的没有抽取出来，但是用起来还是可以的，这块代码是可以把它当做公共的分页去处理的，我就是用这块代码写了两个稍微不同一些的分页！公共的代码抽取的也差不多，主要就是ajax后台以及返回的值不同而已，只要把总页码的值获取到，点击首页/下一页等传值正确的话，基本上分页是不会出什么问题的
网上确实有很多分页的插件以及开源代码，单本是一个后台开发猿，前台css等样式还驾驭不住，所以就开始自己去写了。其实这个分页原理很简单，就是用ajax往后台传值(当前页码)，后台使用limit进行分页。
废话不多说，直接上代码了！
注：本项目是全程使用js来写的，前台的数据通过ajax进行获取，然后再进行拼装，动态加载到页面。
1.先把上一页，下一页等的代码附上(里面的值都是伪值，下面会在js里进行重新赋值的！)
ul class="10d4-c36f-9a77-237a page" id="page" li id="shouye" class="c36f-9a77-237a-27be p-prev disabled" a href='javascript:indexpage(1);'首 页/a /li li id="shangyiye" class="9a77-237a-27be-ce69 p-prev disabled" a href='javascript:indexpage(-1);'i/i上一页/a /li li a id="one" href="javascript:void(0);" 1/a/li lia id="two" href="javascript:void(0);" 2/a/li lia id="three" href="javascript:void(0);" 3/a/li li class="237a-27be-ce69-6594 more"a id="five" href="javascript:void(0);" .../a/li lia id="fore" href="javascript:void(0);" 13855/a/li li class='ec78-9d24-30d0-0a6e p-next' a href='javascript:indexpage(-3);' onclick="jumpToPage('2','/goods/ajaxqueryGoodsList.do.html','','goodsListContainer','13855', listPageCallback);"下一页i/i/a /li li id="weiye" class='9d24-30d0-0a6e-6ae4 p-next' a href='javascript:void(0);' onclick="indexpage(0);"尾 页/a /li li class="27be-ce69-6594-b8f9 total" span id="span_number"共13855页 到第input type="text" id="input_number" class="ce69-6594-b8f9-8682 page-txtbox" /页 input name="" value="确定" type="button" onclick="jumpToPage(jQuery('#input_number').val(),'/goods/ajaxqueryGoodsList.do.html','','goodsListContainer','13855', listPageCallback);" class="6594-b8f9-8682-ec78 page-btn"/ /span /li /ul
2.首先在页面放两个隐藏域，一个是当前页码，一个是总页码，总页码是页面加载完，从后台查询出来后直接附上值的，当前页码是没操作一个，就要对当前页码赋值
input id="jiazai" type="hidden" /input!-- 当前页码 -- input id="totalpage" type="hidden" /input!-- 总页码 --
3.写一个页面加载完的function，给总页码和当前页码赋值
$(function(){ $('#jiazai').val(1);//给当前页码进行赋值，默认为第一页 ajaxfunction(page,arg,chipssort,'');//这个方法是抽取的ajax后台访问的方法 });
4.抽取的ajax方法，此页面会用到好几次这个方法，所有把它收取了出来，因为页面的数据时通过ajax从后台获取到的，后台返回的是一个List集合
//抽取ajax的方法 function ajaxfunction(page,arg,chipssort,fontval){ $.ajax({ type:'POST', url:'/admin/receptionchips/showlist',//请求的url地址 data:{ page:page, sort:arg, chipssort:chipssort, fontval:fontval }, dataType:'json', contentType:'application/x-www-form-urlencoded; charset=utf-8', success:function(data){ //返回值在进行访问抽取的方法，从后台返回 commonfunction(data); } }); }
3.代码看到这也不是很多，最后一个了
//抽取拼串的方法 function commonfunction(data){ $('#projectlist').find("li").remove(); for (var i=0;idata.length;i++ ) { /*****因为此页面是动态加载的，这里主要就是进行拼串，代码也不少，就不漏出来占空间了*****/br }br//开始是分页的核心了 if(data.length0){ //设置页码 var pading = data[0].padingnum;//总页码 $('#totalpage').val(pading); var page = $('#jiazai').val();//当前页 $('#countpage').html("b id='currentPageNo'"+page+"/b/"+pading+""); $('#span_number').html("共"+pading+"页 到第input type='text' id='input_number' class='bb5a-d6b2-f043-9249 page-txtbox' /页input name='' value='确定' type='button' onclick='indexpage(-2)'/goods/ajaxqueryGoodsList.do.html','','goodsListContainer','"+pading+"', listPageCallback);' class='d6b2-f043-9249-10d4 page-btn'/") }else{ $('#countpage').html("b id='currentPageNo'"+0+"/b/"+0+""); } //设置分页的底部 就是 首页 1 2 3 4 5 6 尾页 var pading = data[0].padingnum;//总页码href="javascript:void(0);" var nowpage = $('#jiazai').val();//当前页 //one two three five forebr//下面代码看着是比较麻烦，但是也不难理解 全是一样的代码，只不过是加了些判断 if(nowpage5 ){ $('#one').text(1); $('#one').attr('href','javascript:pagenum("'+1+'");'); $('#two').text(2); $('#two').attr('href','javascript:pagenum("'+(2)+'");'); $('#three').text(3); $('#three').attr('href','javascript:pagenum("'+(3)+'");'); $('#five').text(4); $('#five').attr('href','javascript:pagenum("'+(4)+'");'); $('#fore').text(5); $('#fore').attr('href','javascript:pagenum("'+(5)+'");'); $('#five').parent().show(); $('#fore').parent().show(); }else{ //alert("已经不是第五页了"); //设置中间的为当前页 $('#one').text(Number(nowpage)-2); $('#one').attr('href','javascript:indexpage("'+(Number(nowpage)-2)+'");'); $('#two').text(Number(nowpage)-1); $('#two').attr('href','javascript:indexpage("'+(Number(nowpage)-1)+'");'); $('#three').text(nowpage); $('#three').attr('href','javascript:indexpage("'+(nowpage)+'");'); $('#five').parent().show(); $('#fore').parent().show(); //判断下一页是否超过了总页数 if(Number(nowpage)+1pading){ $('#five').parent().hide(); $('#fore').parent().hide(); }else{ $('#five').parent().show(); $('#five').text(Number(nowpage)+1); $('#five').attr('href','javascript:indexpage("'+(Number(nowpage)+1)+'");'); } //判断下一页的第二页是否超过了总页数 if(Number(nowpage)+2pading){ $('#fore').parent().hide(); }else{ $('#fore').parent().show(); $('#fore').text(Number(nowpage)+2); $('#fore').attr('href','javascript:indexpage("'+(Number(nowpage)+2)+'");'); } } //如果总页数小于5，这块代码主要就是设置 1 2 3 4 5 这些的显示和隐藏的 if(pading==0){ $('#one').parent().hide(); $('#two').parent().hide(); $('#three').parent().hide(); $('#five').parent().hide(); $('#fore').parent().hide(); }else if(pading==1){ $('#shouye').hide(); $('#weiye').hide(); $('#one').parent().hide(); $('#two').parent().hide(); $('#three').parent().hide(); $('#five').parent().hide(); $('#fore').parent().hide(); }else if(pading==2){ $('#one').parent().show(); $('#two').parent().show(); $('#three').parent().hide(); $('#five').parent().hide(); $('#fore').parent().hide(); }else if(pading==3){ $('#one').parent().show(); $('#two').parent().show(); $('#three').parent().show(); $('#five').parent().hide(); $('#fore').parent().hide(); }else if(pading==4){ $('#one').parent().show(); $('#two').parent().show(); $('#three').parent().show(); $('#five').parent().show(); $('#fore').parent().hide(); }else{ $('#one').parent().show(); $('#two').parent().show(); $('#three').parent().show(); $('#five').parent().show(); $('#fore').parent().show(); } //设置高亮显示的，就是是第一页时，1亮，第二页时 2亮 $('#page a').each(function() { $(this).parent().removeClass("current"); if($(this).text()==nowpage){ $(this).parent().addClass("current"); } }); //分页完返回页面顶端 $("html,body").animate({scrollTop:0}, 500); //最后，给当前页码加1 $('#jiazai').val(Number(bianlaing)+Number(1)); }
好了，到这里分页就完成了，如果你们需要使用的话，可能会话费一会去理解我的代码，其实代码不难，我是使用了两个小时把它写完的，只要一行一行代码看，并且自己再加注释，把这块弄过去，不出半小时绝对搞定！