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

Posted 2020-10-11 悟空前端

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习前端开发，一段心路历程，这个世界根本没有速成的方法相关的知识，希望对你有一定的参考价值。

本篇文章我就来给大家说一说我在学习前端开发过程中的一些经验，我把它们总结成了十条警言，希望能够对你的学习带来一些小的帮助。

希望收藏了我写的文章的你同时可以关注一下微信公众号：“web前端技术圈”，因为这些文章都是连载的，并且是经过我系统的归纳过的。

web前端/html5学习群：733581373

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

由于篇幅问题，本篇文章先为大家阐述前五条，下一篇文章会为大家分享后五条。

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

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

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

我将前端开发的基础知识总结为以下几点，对于初学者来说，一定要认真学习这部分内容：

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

(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>等。

(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新加的内容，需要广大初学者更多地接触并掌握。

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

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

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

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

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

web前端学习交流群：733581373

3、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文件，从原理上理解这个框架是如何利用简单的类名和属性名来实现复杂的脚本功能的。我在日常的教学过程中也是这么带领学生一起学习的。

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