前端起家，而最终还是没留在这块‘宝地’，虽然火，但也不和大波人抢饭吃啦！！
记载回忆篇教程—'老年人’的理解（这里不讲教程，而是整个的学习过程）
一款好的文本编辑器是必须先入手的，sublime是我一直在用且功能强大的文本编辑器，软件自寻，装好之后装一些插件,在工具栏Preference->Browse Packdges先安装包，之后Preference->Packdge Control->Install Packdges，搜Emmet，先下这个吧，其他看需求。（之下还有讲sublime的）
然后开始前端的部分啦！！（不理解的名词自行谷歌哦）先纠正一下外来人对于做网页的理解，可能认为网页只是图片和文字的拼接，这种理解很片面。那你的登陆信息呢？那在网页某宝怎么实现支付呢？用户在访问互联网的时候，很多是通过浏览器，而最开始的前端就是写网页用户直接看到的用到的部分。然后你得收集数据，和后端交互数据，把数据可视化，数据安全等等。甚至前端写的不好，黑客可以通过入侵网页和服务器然后用户访问了网址之后就入侵了他的电脑。当然正常也没这么吓人，但也要防患于未然。
前端最初始的部分便是html，css，js。什么其他库啊，框架啊，预处理器啊都最终会回到这三个。因为浏览器就认识这三个咯！！关于前端的亲戚------浏览器还有一些有趣的历史故事，大家可以自行发掘。
html是使用标签来组成网页内能看到的内容。有html，head，body，div，p，h1，a，img，span，input，button，form等等标签，常用的就没几个，知道每个标签的代表的意思就行。这里算是刚刚开始，所以推荐的教程是w3school。
css是网页中的用来定位，美化的html内容的。这部分和审美设计就相关啦，不过前端基础的一些也得会写。包括布局，居中，字体，盒子模型等等。一般写在head里的style标签内，用选择器来选择html元素，其内写css代码改进网页。很多情况我们会引入外部css文件，写在head的link标签里。
之后可以写一个简单页面咯，sublime里新建文件保存为xxx.html。输入html:5+tab就会生成一个html的一般模板。在其内继续补充内容。这部分需要大量的练习来熟悉和巩固使用html和css。然后，直到展示类页面基本成型。这里补充写的时候很重要的一点就是理解html块级元素和行内元素，css的定位方法。然后在写的时候进行合理的布局，而不是所有不按自己想法占位的元素，都进行浮动和绝对定位。这对于网页在其他不同大小的屏上效果展示很重要。
这里先不介绍js，先来尝试一下bootstrap这个奇妙的框架。前面写网页的经历应该会让你发现直接写一个看得过去的页面是一件略复杂的事情，然后前人为了造福后人就帮你把很多展示层面的css和js写好了，你直接引用就行。先找到bootstrap3中文官网的起步部分，在页面头部引入bootstrap的那几个文件。之后按照后面的全局css样式和组件来尝试写页面的每一部分，写起来便轻松愉快啦！！bootstrap更强的是他是移动设备优先，这个之后在述。
前面部分貌似都感觉不到自己在编程，更像是美工，然后js就来啦，js在网页里充当给网页增加动态的角色。他可以改变html和css的内容，做各种特效，处理提交的数据等等。写js就完完全全有写编程语言的感觉啦，当然这也注定了它将会是前端最难的一部分。
写js先从基本语法开始，如果接触过c一类的语言，应该很快上手，没接触过也不要紧，基础的语法并不难，很快就能搞定。js可以写在head里也可以在body最下方，大部分情况建议写在body最下方，因为同步的代码从上往下执行，这样就可以先展示html，也就是页面反应变快一些。这部分虽然简单，但在写复杂网页程序的时候往往错误就出在不经意的语法错误。细节决定成败，简单也要严谨。
上面是js作为一门语言的语法，然后作为网页里的一部分，它还能操作dom，也就是改变html和css。先通过选择器获取dom节点，之后进行操作。当然也可以直接创建dom，网页里的它可以说无所不能。react框架就是用编译成js的jsx包揽了全部页面。
这里插入一个前端开发者必备功能，这里以chrome为例，那就是会用chrome的开发者工具。我们通过打开浏览器然后按f12或者右键审查元素打开，我习惯会把网页在左边，开发者工具在右边，可以按开发者工具右上角切换。前面js的基本语法里有个console.log便是在开发者工具里的console选项里输出内容，这里可以输出一些数组，对象等等alert不能输出的内容，当然也可以在这里直接像命令行一样输入js进行调试。在elements选项里是所有html内容，network里是所有加载的资源以及获取方式，加载时间等等有用信息，这里还能看到网页header，cookie等的信息，分析别人网页的时候很有用哦。中间那一块是css部分，可以直接在这里写css，然后就能看到效果啦，这里比较强大的两个一个是写一个color:#000;点击彩色小方块，然后会有出现一个颜色板和拾色器。另一个是在写css3动画的时候，写一个速度曲线，点击小方块，会出现一个可调整二次贝塞尔曲线的速度曲线改变面板。css右边还有一个盒子模型，必要时还是挺有用的。
至此你应该已经得会写轮播图，瀑布流，分页等等网页特效，甚至于写个简单的贪吃蛇，扫雷游戏。当然这里的逻辑还是需要挺多的，想想挺简单，用原生js写起来自然会感觉到吃力。除非之前进行过编程或者算法训练，不然很容易绕在里面，感觉不上不下。之前我自己的感受就是无数自己想想的小demo死在了我代码写到一半的时候。然后会感觉很吃力，如瓶颈一般。现在想想，与其纠结于此，不如去追求更广的天空。
所以继续来学习jquery，虽然都说用这个的都是老年人，但这些话都是已经把这个库用烂了的人说的。对于一个新手，学jquery也是很重要的一环，这个部分，你会体验到快速开发的乐趣。jquery相当于帮你封装了很多又难理解又难写的原生js，然后你可以直接调用它设定的更简便的形式来写js。在html文件里引入jquery文件，一般推荐min的那个，就可以直接按jquery的语法写啦。开始的话jquery写起来速度可以达到js的好几倍，立刻爱上jquery!!如果用jquery来重写上面那些网页特效，可能会轻松很多。当然网上jquery插件和特效也数不胜数，随便上某度搜就行。前期还是建议自己先造造轮子。
这里插一个提醒，之后讲的很多东西要在服务器运行，ajax也是。所以先配置一下服务器的环境。windows下建议wamp，linux下建议lnmp。都是集成安装环境，安装完就可以直接用。然后windows用浏览器访问localhost打开www文件目录，Linux用浏览器访问公网ip会打开wwwroot文件下default文件下index.html文件。这样就可以继续进行下去啦，之后尽量把文件放服务器。如果想要了解服务器知识的话就走向了后端了哦，但前端也可以稍微了解。
然后讲一个js里神奇的东西，为什么放在jquery下面呢，因为从jquery的语法来理解他会变得简单易行，他就是ajax。它是一种对js来说跨时代的技术。如果直接用原生来实现当然也可以，但对于菜鸟时候的我晦涩难懂。所以当我看到jquery实现的ajax，jquery好感++；ajax相当于可以在页面不跳转的情况下直接与后台进行交流。看似简单，但却实用，几乎每个页面都或多或少有ajax的身影，特别是对于前后端数据交流频繁的页面。
通过ajax，再来理解这里面的要用到的其他几个东西。一个是json，它是一种数据格式，常常用于前后端数据交流。因为这种数据很轻便，前后端解析json也很简单。出现json之前很多用的是xml，相比于json，xml解析起来很复杂，现在也少用，但也可以了解。另一个是异步和回调。自行搜异步和同步区别哦，ajax默认是异步的，也就是执行ajax时不会停在这里等数据回来，而是发出了一个ajax执行的指令，然后浏览器就继续扫描执行下面的代码啦，至于ajax，浏览器不去管他什么时候执行完，因为他执行完可以调用一个函数来告诉浏览器执行完了，那个函数就是回调函数。这个弄明白对于以后写node.js很重要。
最近h5这个名词总是很火，那现在就来讲讲html5和css3，html5和css3都是在原来的基础上增加了许多内容。目前主流的浏览器基本也都支持了大部分特性，所以可以放心大胆的写，不放心就看看手册，到这里你应该是查手册和看文档的时候，而不是又看之前看过的教程，那太慢啦。h5新增了很多带语义的标签，js里也开放了很多接口。可以试试，有个大致的了解。css3也一样，增加的一些css属性，有些还非常强大，比如做个3d什么的，也可以实现。这个名词虽然被炒的很高大上的样子，但其实质还是搭在原来的基础知识之上。在基础很牢固之后再去看这些就感到得心应手咯!
看到这的你已经大致走完了入门之路，接下来的进阶才是真正考验人的时候。都说前端入门很容易，确实，自从有了jquery，js的dom操作变得容易，而jquery可能只要半天时间就能学会。而jquery现在的弊端也很明显就是dom操作太多了，导致网页反应慢。大部分的页面用前面的知识都可以做出成果，但要效果最好肯定远不止这些。接下来，就将进入进阶的时候！！！
支付宝打赏
微信打赏
赞赏一下