2.md

前端入门篇

作者：Bugzhang

---

2.1 什么是前端

前端是C-S（客户端-服务器）架构中客户端的一种，只是其主要开发平台是游览器环境，与其对应的是后端，前端代码是运行在游览器的，而后端代码是运行在服务器的。开发前端的过程就是前端工程，开发前端应用的人自然就是前端工程师，

2.2 我该如何选择

看到上一章介绍后，估计会有很多人迷茫，不知道自己应该学习前端还是后端或者移动端。后端语言选择也好多啊，php听说很简单，go的Logo好萌而且语言看上去也好不错，java似乎很好找工作的样子，python听说很有用而且也简单。遇上这类选择问题，无论是技术方向还是编程语言，我的建议是：先精后广，一专多长。先应该有自己精通的方向或者语言，再去考虑是学习其他的哪一个，如果都学的后果就是，自己忙了很久结果碌碌无为，发现除了hello world之外似乎什么都写不出来，所以学的太多是初学者的大忌。而相反，如果对某门技术或者语言尤较为深入的了解后，就可以举一反三的迅速对其他技术有所突破，同时还可以利用自己精通的技术来实现一些有趣的东西提升成就感。

2.3 前端入门之工具选择

2.3.1 开发工具

如果接触过编程，那么肯定会有人提及大名鼎鼎的宇宙studio式的：编辑->链接->编译->运行的大一统式开发。实际上，前端开发甚至整个web开发，都可以通过极简单的开发工具实现，当然直接在命令行里用vi或者用window的记事本编程这种还是不推荐的。我比较推荐的初期开发工具是，宇宙studio的小弟弟vscode（下载地址：https://code.visualstudio.com/。是微软用自家的JavaScript变种语言typescript开发的，对，在用这门语言开发的这门工具写这门语言，是很优雅的一件事。此外，vscode提供很多功能强大的插件来自由拓展你的编辑器，相关总结文章：https://segmentfault.com/a/1190000006697219。

同时，这里再推荐一个网站：http://jsbin.com/，可以直接在这个网站里进行代码的测试，非常方便。

2.3.2 运行环境

前端执行环境主要是游览器，关于游览器的哲学（兼容）是一个高深的问题，会在之后搞基篇介绍。大家只要知道，你写的前端代码，都是在游览器上运行的即可。

2.3.3 调试工具

调试工具都是在游览器自带的，使用方法：http://xgfe.github.io/2016/05/16/scliuyang/ChromeDevTools2/。

2.4 前端入门之编程语言

前端编程语言是三剑客，其中缺一不可：HTML+CSS+JavaScript。入门阶段，必须对其熟悉乃至掌握。

2.4.1 HTML

作为很多人接触的第一门标记语言，不得不说HTML总体还是非常简单的。当然涉及到HTML5的语义化与一些多媒体之后，可能会稍微复杂一点点但总体不至于遇上问题。

非常推荐的入门学习教程：https://freecodecamp.cn/

HTML入门：http://www.runoob.com/html/html-tutorial.html

HTML5入门：http://www.runoob.com/html/html5-intro.html

2.4.2 CSS

CSS入门：http://www.runoob.com/css/css-tutorial.html

CSS各个属性效果展示：http://cssreference.io/

提升你的CSS姿势：https://segmentfault.com/a/1190000005775934

20个编写CSS代码的建议：https://segmentfault.com/a/1190000006834519

是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对 网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文 本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。CSS看似比较繁杂，其实只要掌握了CSS中的盒子模型、定位、以及页面布局，就基本上掌握了大半。这时我们就以及能够对网页中各个元素进行精准的排版，做出符合我们意愿的网页。 此外对于HTML和CSS，我觉得没必要专门买书研究。

2.4.3 JavaScript

相比于CSS和HTML，JavaScript是一门相当困难的语言，除了语法简单外，客户端JavaScript的难度是非常大的，他有着晦涩以及大多数人第一次接触的的原型对象系统，大量无法简单理解的dom api，以及诸多的因为本身设计而出现的坑。

菜鸟入门教程：http://www.runoob.com/js/js-tutorial.html

廖雪峰js入门教程：http://www.runoob.com/js/js-tutorial.html

js标准参考教程-阮一峰：http://www.runoob.com/js/js-tutorial.html

然后建议参考这些书单https://github.com/CSU-Apple-Lab/programing-books中的前端篇书单。其中JavaScript高级程序或者JavaScript权威指南中，至少选择其中一本先读完并进行一些开发实践。对于难度颇高的JavaScript，看书还是必须的，甚至要看很多本。另外关于好多人觉得书贵的问题，首先图书馆可以借到很多（但质量参差不齐，注意选择），其次就是一本书几十块最多一百左右真的只是小钱，毕业第一年年薪上20万对于其实很简单，与此相比，当初如果不舍得多花钱买书恐怕会将来后悔。

最后，给一个前端知识库大全，来着阿里云整理：前端知识库-博客-云栖社区-阿里云