在已经成功的为大家讲解了20篇有关前端开发的技术文章之后，小海老师想跟每一位前端开发人员谈一谈学习前端开发的一些心得。本篇文章我就来给大家说一说我在学习前端开发过程中的一些经验，我把它们总结成了十条警言，希望能够对你的学习带来一些小的帮助。

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

希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。

前端开发是当今社会上比较有发展潜力的一个行业，该行业主要以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技术的第一层面，更多的使用技巧等待大家去挖掘。

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

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

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

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

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

这里，小海老师为大家推荐几本前端开发领域的经典著作，真的希望你也能拿起教材，从第一页读到最后一页，你一定会受益匪浅。

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

Bootstrap开发的经典教材

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

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

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

jQuery提高的优质教材

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

非常适合初学Node.js的学生阅读的书

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

一本讲述SVG实践的教材

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

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

这里，小海老师为大家推荐几个学习前端开发的网站，希望大家可以多多浏览，利用好互联网资源。

慕课网。其中汇集了大量一线教师的教学经验，全部是以视频的形式呈现的。
W3CSchool。这里列举了多门前端技术和后台技术的基础知识。内容较为基础，却是初学者好的帮手。
菜鸟教程。一个类似于W3CSchool的基础知识学习网站。
jQuery API中文文档（
http://jquery.cuishifeng.cn/）。这里汇集了jQuery各个版本的API内容。
Bootstrap中文网。这里涵盖了Bootstrap框架全部的组件和插件。

如果大家也有好的学习网站，希望也推荐给我哦。

由于篇幅问题，后面还有五条心得，我会在下一篇文章中，为大家展开阐述。如果你有什么学习前端开发的好方法和自己的感悟，也可以在下面留言。真心的希望能够与你得到更深入的交流！

（未完待续）

文章预告

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

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

小海教材

如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。

小海声明

在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。

希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。

关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。