学习前端开发，一段心路历程，这个世界根本没有速成的方法

时间 2019-11-17

标签学习前端开发一段心路历程这个世界根本没有速成方法繁體版

原文原文链接

本篇文章我就来给你们说一说我在学习前端开发过程当中的一些经验，我把它们总结成了十条警言，但愿可以对你的学习带来一些小的帮助。css

但愿收藏了我写的文章的你同时能够关注一下微信公众号：“web前端技术圈”，由于这些文章都是连载的，而且是通过我系统的概括过的。html

web前端/html5学习群：733581373前端

前端开发是当今社会上比较有发展潜力的一个行业，该行业主要以Web开发、移动端开发、全栈式开发等为主要内容。在社会上有较为普遍的应用领域，从业者有较为丰厚的薪资待遇。那么对于一个前端开发从业者来讲，如何学习前端开发的相关知识，如何将本身打造为一个强大的前端开发设计师呢？小海老师从事多年的一线教学工做，深刻挖掘学生在学习阶段的特色，总结了如下十条学习心得，愿意与你们一同分享。html5

因为篇幅问题，本篇文章先为你们阐述前五条，下一篇文章会为你们分享后五条。node

第一条：学好基础知识，作一个有扎实基本功的开发者。

前端开发的相关技术和知识很是多，每一年还会有许多新的技术诞生并获得普遍的推广。IT行业自己就是一个技术更新很是快的行业。不过每门技术都有它最基本的知识内容和基础体系。不管学到多深的程度，扎实的基本功是必不可少的。jquery

初入职场，若是可以获得老板或技术总监一句“你的基础知识真扎实”的赏识，对于新入行的你必定是信心满满，也让领导对你有一个新层次的认识。web

我将前端开发的基础知识总结为如下几点，对于初学者来讲，必定要认真学习这部份内容：编程

一、HTML超文本标记性语言：尽可能掌握尽量多的标记或标记对。bootstrap

(1)必须掌握的标记或标记对包括：<html>、<head>、<title>、<body>、<h1>、<p>、<a>、<img>、<table>、<tr>、<td>、<th>、<form>、<input>、<select>、<option>、<textarea>、<div>、<span>、<script>、<link>、<meta>、<style>、<hr>等。canvas

(2)同时，还有许多较为生僻的标记，你们看一看，你认识下列标记对吗？

<label></label>：用于表单中盛放表单元素的文本提示，被称为“标签”标记对。
<pre></pre>：预格式化文本，在该标记对内部文本中的空格和换行都会在页面中起做用。
<address></address>：用于表示地址的语义标签。
<var></var>：用于表示变量的语义标签。

固然还有许多较为生僻的标签，这些标签在平常的HTML开发中基本上已经再也不使用了。可是当你学到Bootstrap框架的时候，你会发现，Bootstrap框架启用了这些标签，并为这些标签赋予了特定的功能和外观。

(3)除此以外，HTML5技术也为HTML注入了新的活力，许多新标签和新属性加入其中，使得HTML语言更加丰富与强大。

<button>标记对：HTML5新加的具备数据提交功能的按钮。
<canvas></canvas>：HTML5的画布技术，该标记对结合脚本语言对应一套完整的API，能够实现页面矢量图的绘制。
<audio></audio>：HTML5的音频技术，该标记对结合脚本语言对应一套完整的API，能够开发有关音频的项目。

固然还有许多HTML5新加的内容，须要广大初学者更多地接触并掌握。

二、CSS层叠样式表：对于CSS的各个属性以及一些属性之间结合使用的技巧应该多钻研。

CSS技术做为对HTML标记对外观的扩展，在前端开发中体现出了强大的生命力。再结合CSS3技术，又扩展了大量的属性，使得CSS的功能更为全面，实现方法更为简洁。学好CSS，同时也是为页面布局打下坚实的基础。

你会用CSS技术的使用技巧解决下列问题吗？

如何去掉容器中图片下方自动产生的距离。
当容器中具备浮动元素时，如何为容器设置边框或背景颜色？
怎样让块级元素在容器中水平居中？
当多个连续块级元素的浮动布局影响了本来不想浮动的对象时该如何处理？
容器内部的对象如何实现相对于容器的自由定位？

看来，CSS的属性及其取值只是CSS技术的第一层面，更多的使用技巧等待你们去挖掘。

web前端学习交流群：733581373

三、CSS+div布局模式：这是许多布局模式的基础，也是大部分前端开发人员接触到的第一种布局方式。

这种布局模式对于PC端页面的设计是很是有帮助的，同时对于后面将会遇到的“圣杯布局”、“双飞翼布局”、“移动端布局”、“响应式布局”等，这种布局方式都具备必定的指导意义。

上述就是小海老师认为的必定要很是扎实的掌握的前端开发的基础知识。基础知识是高阶知识的起步平台，没有基础知识，更深层次的内容是没法真正理解的。

第二条：重视脚本学习，将JavaScript做为前端学习的重点。

JavaScript已经发展成为了Web开发的惟一的脚本语言。它从早期的基于对象的语言变为了面向对象的语言，现代JavaScript为前端开发带来了不可替代的技术革新。

JavaScript能够轻松的实现HTML和CSS没法实现的流程控制。
结合DOM技术，JavaScript能够访问HTML元素并操做它们。
HTML5中的许多API都是基于JavaScript进行开发和设计的。
强大的jQuery库、jQuery UI、jQuery Mobile等都是在JavaScript的基础上开发出来的。
全栈式开发所使用的node.js、AngularJS等第三方框架，也都是在JavaScript的基础上编写的。

这门神通常的语言，我我的认为是务必要认真学习的，不只要学习JavaScript的语法知识，还要学习利用它实现DOM元素的使用，学会面向对象的编程思想。甚至还要掌握该门语言的细节特色。

系统学习过JavaScript的同窗们，你看看下列问题你能准确的找到答案吗？

经过表达式来系统阐述“==”和“===”这两个运算符的区别。
经过哪一个函数能够判断从文本框中获取的内容是否是数字？
会使用这两个属性吗：contentEditable、isContentEditable。
知道window对象的两个方法：setTimeout()、setInterval()在计时器方面的使用区别吗？
delete运算符都能删除哪些内容？
在脚本中，this有几种使用状况呢？

JavaScript语言虽然很重要，许多公司都须要从业人员掌握原生态的JavaScript代码。可是这门语言因为发展过程当中的种种缘由，存在许多繁冗且很差的代码模式。例如原型链、闭包、对象与类等概念，都给这门语言戴上了“难学”的帽子。同时，这些知识有时候也正是JavaScript放光彩的一面，因此对于这门脚本语言掌握不精的学习者来讲，小海老师告诉你们，必定要把这门语言搞懂，达到精通的程度，对于后续的全栈式开发绝对有很是好的做用。

第三条：多练习多操做，实践是检验真理的惟一标准。

前端开发自己就是须要实战经验很是强的一门学科。学习和工做过程当中，不断地、反复地、大量地尝试和上机操做，是学好前端开发惟一不变的方法。

这里拿Bootstrap框架为例，互联网上大部分教程和许多前端教师都提倡让学生从Bootstrap官网上复制粘贴代码，以更加快速的完成页面的搭建。

小海老师尤其反对这种方式，特别是对于还处在学习阶段的同窗们和初次使用Bootstrap框架的从业者。首先不能否认，Bootstrap为前端开发人员带来了大量的类名和属性之间的搭配关系，每个组件和插件的使用都用脑子记下来，确实有很大的困难。可是在学习阶段，我很是提倡对官网的示例代码进行钻研和分析，阅读bootstrap.css文件和bootstrap.js文件，从原理上理解这个框架是如何利用简单的类名和属性名来实现复杂的脚本功能的。我在平常的教学过程当中也是这么带领学生一块儿学习的。

正所谓“知其然，还要知其因此然”，了解了内部的原理，一方面本身更加容易去记忆这些大量的名称，另外一方面，对于样式类框架的开发，也会有必定的了解。时间久了，本身也能写出符合自身特色的小框架，使得知识达到按部就班、熟能生巧的程度。

第四条：阅读前端书籍，多看有关前端开发的经典著做。

“读书”永远是掌握技术的一种有效方法，不管什么技术。读书的过程不只可以让咱们了解做者的意图，更能训练咱们的阅读速度，提升自身的自学能力。这正是一个合格的前端开发工程师应该具有的业务素质。

这里，小编为你们推荐几本前端开发领域的经典著做，真的但愿你也能拿起教材，从第一页读到最后一页，你必定会受益不浅。

web前端/html5学习群：733581373

Bootstrap开发的经典教材

学习JavaScript脚本语言必不可少的好书

jQuery提升的优质教材

很是适合初学Node.js的学生阅读的书

一本讲述SVG实践的教材

第五条：利用网络资源，多学习前辈好的实现方法。

现在互联网渗入到了咱们学习和工做的方方面面，与其每天拿着手机刷微博、聊微信，何不拿起互联网这个工具，多多学习一些有关前端开发的知识，积累一些前人总结出来的经验，丰富本身的羽翼。

这里，为你们推荐几个学习前端开发的网站，但愿你们能够多多浏览，利用好互联网资源。

W3CSchool。这里列举了多门前端技术和后台技术的基础知识。内容较为基础，倒是初学者好的帮手。
菜鸟教程。一个相似于W3CSchool的基础知识学习网站。
jQuery API中文文档（http://jquery.cuishifeng.cn/）。这里聚集了jQuery各个版本的API内容。
Bootstrap中文网。这里涵盖了Bootstrap框架所有的组件和插件。

若是你们也有好的学习网站，但愿也推荐给我哦。

因为篇幅问题，后面还有五条心得，我会在下一篇文章中，为你们展开阐述。若是你有什么学习前端开发的好方法和本身的感悟，也能够在下面留言。真心的但愿可以与你获得更深刻的交流！

（未完待续）

web前端学习交流群：733581373

文章预告

下一篇文章中，小编继续跟广大前端开发的爱好者谈一谈学习前端开发的心得。

在后续的文章中，小编将为你们讲解浮动属性。浮动属性是流式定位的重要属性，承担了大部分传统布局的功能。但愿广大前端学习者千万不要错过！