前言

假如有那么残酷的一天，我不小心喝错了一瓶药，一下子抹掉了我这十多年的编程经验，把我变成了一只小白。我想自学前端，并且想要找到一份工作，我预计需要 6 个月的时间，前提条件是每天都处于高效率的学习状态当中，并且每天的学习时间至少在 12 个小时以上。

即便是这样，我敢肯定，找到的工作肯定不会太好，勉强能够维持生活吧，毕竟是零基础入门啊。

如果想更进一步，真正成为一名不可或缺的高级前端工程师，时间需要更久，两年、三年、五年，直到秃的那天。

想着想着，我就觉得有必要为那一天做点准备，以备不时之需。

学习建议

在你开始入手学习前，有一些小的建议。根据我自己学习的经验发现，这些建议在现在乃至我以后的岗位生涯里都是有很大帮助的。还有就是开始学习前，建议可以先花几天时间，查找一些如何入门的文章，通过对许多文章及前人的建议。整理出适合自己学习的一套完整计划，然后在学习过程中，在自己对前端更加了解之后，做出一些计划的调整。
比如先根据一份思维导图学习，再根据自己实际情况制定路线

我相信，在这样的计划学习之下比一来就开始学习具体知识要快速有效得多。

1、建议的学习步骤

（1）HTML标签（网页结构标记语言） +CSS样式（网页样式语言）。它们是实现静态Web应用最基础的语言，掌握好它们，你可以编写出一个简单的模块（如导航等）甚至一个完整的静态网页。

（2）Jquery库（Javascript编程语言的一个必须掌握的库）。它可以让你之前做的静态网页“动起来”，比如（下拉二级菜单、网页右侧工具导航的展开等等交互特效）。

（3）建议花时间看看《DOM编程艺术》这本书，或这类书籍。它是关于Javascript编程语言在网页开发上面的运用，跟着这本书走下来，你可以编写一个简单的具有交互效果的网站了。

以上几点就是小白最开始入门学习的东西，建议按照顺序学好这三种语言。可以使用sublime编辑器进行动手编写。当你根据学习步骤
完成一个小小的网站时，你会觉得很有成就感，后续的学习也就信心百增，兴趣百倍。

2.完善我们的基础知识

（1）HTML5，更高级的标记语言，功能更加丰富多彩。新增许多标签，比如：canvas、video等，可以自己实现更多的动画，炫酷的特效或者播放视频等等。

（2）CSS3，更高级的样式语言。你可以实现丰富多彩的页面动画，不必要每次都是用js，使用CSS3就可以轻松便捷的实现一些想要的网页交互。

比如用CSS为女朋友画个爱心，友谊长长久久~

（3）重中之重，javascript编程语言。这是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

（4）开始学会使用一些前端的框架，这里我是指前端的UI框架，它们可以帮助我们快速高效的开发一个网站，并且界面风格也好不错。比如PC端的Bootstrap，其实它是响应式的框架，也可以用在移动端H5页面，或者AmazeUi，这是一款专注于移动端的框架。你可以百度也可以在对应框架的官网查看文档，当你学会使用某个框架的时候，其他的n+1个各种各样的前端UI框架，你也会信手拈来。

（5）还有一种前端框架，如layui这类的，算是工具类框架。它里面包含了分页效果、弹窗效果、日期选择控件等等内容。当你学习到这个时候或者更后面的学习里，你可以去学习如何使用，能够更高效的帮助你完成项目的开发。

（6）通过百度，可以找到许多网页交互特效的插件，如二级菜单下拉特效、手风琴菜单、图片轮播、弹窗效果等等。下载它们源码及示例，动手学习使用或模仿它们的效果，可以帮助我们快速实现一些比较复杂的交互特效。现在有非常多的免费开源插件，让我们不用再重复造轮子，直接使用就很方便。当然，我的建议是当你学会使用某个特效插件时，你可以学习它的源码，看看效果究竟是如何实现的。这也是巩固学习javascript语言的好方法，你值得拥有哦。

当你可以完成一个基本的带有交互效果的页面之后，参加工作中进一步提升自己就是需要掌握一些流行的前端开发JS框架及高效流行的开发模式。相信到了这一步，你已经成功迈入了前端的大门，接下来就是为了如何成为工作中的主力前端工程师而修行了。

四.常用的一些前端JS框架建议

（1）vue.js，一款偏向于移动端的JS框架，轻量级。数据驱动交互，学习起来非常容易，它可以不依赖与Jquery框架独立使用帮助你开发一个友好的移动端界面。一个前端开发必要掌握的技能，一款流行的JS框架。关于如何使用掌握它，你可以百度，还可以去它的官网学习官方文档，或者是菜鸟网站也有介绍。

（2）react.js，比较起vue，它更复杂一点，重量级一点，但是实现大型的项目也很快速便捷。掌握它也成了诸多公司入职要求，相信学习过vue这类数据驱动框架，在学习起这个就会容易很多。比起平常jQuery开发项目，vue和react开发关键是思想会有所转变，掌握面向对象和数据驱动交互，会让你感到开发的更加容易和友好。如何掌握它，百度、菜鸟网站、官网文档都是不错的选择。

2、比较流行的开发模式建议

（1）vue + webpack集成开发

（2）react + webpack集成开发

（3）node.js学习及应用，一款可以使用javascript语言开发后台的工具

（4）weex + webpack集成开发，目前很少看到公司使用

（5）angular.js，和vue.js这些差不多，但目前也很少看到使用了

以上的开发框架及开发模式（1）（2）（3），是比较多的互联网公司团队，都会采用的。值得去深入学习，并且当你掌握后，你会发现开发前端项目原来可以这么简单。

保持学习状态不断进步

以上的文章都是一些建议。当然贯穿你学习中和以后的工作中，你可能还学要掌握一些其他的必备技能。如：

（1）学会百度很重要。

（2）学会UI设计文件PSD切图（必备技能，学会看UI设计交付给你的设计图）。

（3）学会使用谷歌或火狐浏览器的F12开发者模式，在开发过程中快速调试找到问题。

（4）学会与后台配合进行数据接口的调试，及解决一些跨域的问题（如：nginx的配置使用）。

（5）学会不同项目使用不同最佳的开发工具（sublime、editplus、hbuilder、vsCode等等）。

（6）学会使用版本控制工具（如：svn），你与团队紧密配合的好工具。

学好这些，你就可以刷一下大厂面试题，比较热门的面试题

前端web开发培训，HTML表格标签，先收藏了相关推荐

2018年20种最佳前端Web开发工具
有许多前端开发工具可以加速Web开发.以下是包含主要功能和下载链接的顶级工具的精选列表. 1)Npm: Npm是JavaScript的Node包管理器.它有助于发现可重用代码的包并以强大的新方式组装它 ...
2019年20种程序员必备前端Web开发工具
许多前端开发工具可以加速Web开发.以下是包含主要功能和下载链接的顶级工具的精选列表. 1)Npm: Npm是JavaScript的Node包管理器.它有助于发现可重用代码的包并以强大的新方式组装它们 ...
2020 前端必看 20个最好的前端 Web开发工具
引言市面上有许多前端开发工具可以加速 Web 开发工作.本文是对一些顶级 Web 开发工具的一次精选汇总,分别介绍了每款工具的关键特性,并已附上下载链接. 1. Novi Builder Novi ...
前端基础：通过HTML表格标签布局《餐饮菜谱》
前端基础:通过HTML表格标签布局<餐饮菜谱> 布局,是前端工作的第一步,也是前端页面能够得到展示的技术手段.对于表格式布局是简单的页面布局的基础,它是无法解决浏览器兼容性问题,因此这种布 ...
css 所有字体大小,前端Web开发人员的CSS相对字体大小
在本文中,我们将看几种不同的方式,前端Web开发人员可以使用CSS操作其网页的字体. 网页设计中最大的混乱之一是由font-size属性造成的. 在CSS中,可以使用多个单元,这只会导致设计人员额外头 ...
跨行合并居中html标记语言,[前端Web]HTML语法最全解-建议收藏
原标题:[前端Web]HTML语法最全解-建议收藏 1. 标签全解 1.1 文件标记作用:文档声明标签.定义该文档是html5的文档,位于标签前面详解: HTML总共有很多的版本,那么浏览器怎么知 ...
web前端开发最佳实践_学习前端Web开发的最佳方法
web前端开发最佳实践为什么要进行网站开发? (Why web development?) Web development is a field that is not going anywhere ...
玩转HTML5+跨平台开发[4] HTML表格标签
表格标签在过去表格标签用的非常非常的多, 绝大多数的网站都是使用表格标签来制作的, 也就是说表格标签是一个时代的代表 http://2004.sina.com.cn 作用:以表格形式将数据显示出来, ...
前端web开发——有梦想就看过来！！
史上最详细web前端开发入门指南一--有梦想就来看看吧! 最近几天,本博主迷恋上了前端开发, 本着一颗探索的精神开始了.在学习的过程中呢.遇到了许多困难,也收获了许多,在此写一篇博客记录自己的学习过程 ...
移动web开发，day1,字体标签、平面位移、渐变总结
移动web开发第一天内容分为三大块:字体标签iconfont, 平面转换渐变background-image:linear-gradient 字体图标: 字体图标iconfont(必须在html里 ...

前端web开发培训，HTML表格标签，先收藏了

前言

学习建议

四.常用的一些前端JS框架建议

更多面试题

前端web开发培训，HTML表格标签，先收藏了相关推荐

最新文章

热门文章