现在有很多人对前端都比较感兴趣，于是开启了自学前段生涯，但是其中有一大部分人因为学习步骤不对，导致半途而废，学着学着放弃的人有一大部分。为了避免半路放弃，下面我们就来讲讲在学习前端之前应该先学什么。在学习前端之前，第一件事是学习一些基础，包括学习HTML、CSS的一点基础知识，以及熟悉一下JavaScript的语法。学习HTML基础。 HTML给你的网页赋予了结构。它就像是人的骨架那样让你保持站立。首先你需要去学习语法以及它必须提供的一切。你的学习应该聚焦在下面这些东西上： 学习HTML基础，了解如何编写语义HTML 理解如何把网页分成section（段落），以及如何正确组织DOM（文档对象模型） 任务——一旦你学习了HTML基础，至少要制作5个HTML网页。我建议你随便找一个 网站，比如看看Github的档案页或者Twitter的登录页。然后把焦点放在恰当地组织内容上。出来的东西可能会很难看，但是暂时别担心，把你的关注点放在恰当的结构上。 学点CSS 现在我们已经学会了如何给网页准备好骨架，接下来就是在此基础上添加一些皮肤让它好看一点了。CSS——级联样式表就是用来美化你的HTML页面的。 首先要做的是学习语法，熟悉常见的CSS属性。 了解盒模型（box model），掌握如何利用Grid和Flexbox准备布局 一旦学习完上面的，再学习以下通过媒体查询把网站做成响应式的。 任务——一旦你掌握了基础，接下来就应该设计上一步制作的HTML网页。比方说如果你给Github档案编写了HTML页面的话，现在是时候应用CSS来让它的样子看起来像实际的Github资料页面一样了。前面的那5个页面都要拿来试一下。 学习JavaScript基础 JavaScript能让你的HTML页面互动性更强。比方说你在网站上看过的所有那些幻灯片、弹出窗口以及广播通知，以及在没有重载页面的情况下重载页面的特定部分，这些都是用JavaScript做的。在这一步中，你将会学习JavaScript的基础来为后面的旅程做好准备—— 学习这门语言的语法和基本机构。 学习如何用JavaScript来操纵DOM，比方说如何从页面移除一些元素，如何增加一些元素，增加和移除类，通过JavaScript应用CSS样式等。 完成之后再学习和理解诸如范围、闭包、变量提升以及事件冒泡这样的主题。 学习如何用XHR或者Ajax生成HTTP调用。Ajax可以让你在不需要重载网页的情况下执行特定动作。 学完之后接下来就要了解ES6+的所有新特性。ES6只是JavaScript的一个版本，里面给这门语言引入了大量有趣的更新，比如类、定义变量的多种方式，给数组增加了新的方法，字符串连接等。你们在网上找到的大部分文章都会用Babel来解析ES6，这其实是个转译器，可以将这门新的JavaScript转换为旧的JavaScript，因为有一些旧版的浏览器不支持新版的JS。不过现在先不用担心Babel，只需要了解相关概念，然后用到任何一种支持ES6的最新版浏览器上来练习一下就行。我们后面还会再继续讲ES6的。北大青鸟兰州优越校区，专注IT三十年（不好意思，是十年，学校今年已经成立十周年啦！），入学即签订就业协议，技能+学历+项目经验，有实力不怕找不到好工作，北大青鸟兰州优越校区为您重新插上梦想的翅膀！ 本文来源：https://www.wddqw.com/doc/cb8929079a6648d7c1c708a1284ac850ad0204ed.html