做软件开发，是从事编程开发工作，必须先从语法基础开始学习，通过语法组成产品效果。

前端开发的基础语法，由HTML+CSS+JavaScript组成，这是前端开发最基本的3个语言。

网页布局基础：HTML+CSS

HTML就是超文本标记语言，组成网页内容的最基本语言。你可以直接说他是网页的骨架，网页的图片、文字、视频、音频、程序都需要他引入到网页中体现。

光是HTML做网页，只是有了内容，当然是远远不够的。因为只是HTML的话，只能用Table做布局才能勉强做出个成型的网页来。但是从Web2.0时代开始，都是盒子模型布局法了，也就是用DIV+CSS来实现布局了。

CSS就是层叠样式表。通过样式属性来对标签进行布局规范，在不再使用table布局的时候，只要CSS样式对网页标签进行对应的布局实现才是正确的开发方式了。

HTML(div)+CSS布局，是基础入门的基本步骤，在这个阶段，你需要学习的内容，包括有：

1.标签语义化，SEO

2.页面加载的流程和原理

3.网页结构

4.盒子模型（W3C盒子模型和IE盒子模型）

5.CSS选择器

6.CSS布局浮动、定位

在刚刚开始的阶段，大家学习的布局方式基本都是以px为单位的静态布局方法。熟悉好布局方法，先给自己一个小目标，做一个简单的电商网页的基本结构出来，不用特效，不需要交互。

浏览器脚本语言：JavaScript

JavaScript是我们学习前端开发中非常重要的一个内容，也是一个大家经常掉坑里的难点。JavaScript现在可以说是互联网时代使用率最高的脚本语言了，在网页中，所有的数据渲染，特效的交互都需要利用JavaScript，来影响浏览器的显示。

JavaScript不只是开发网页特效和渲染数据的重要内容，在学习前端开发的后期，大量使用算法和框架的时候，对JavaScript基础的考验也是很多的。

如果大家对编程，web前端感兴趣，想要学习，打算深入了解这个行业的朋友，可以加下我们的前端学习扣qun : 784783012 ，不论你是学生还是想转行的朋友，我都欢迎，每晚分享干货，整理的一份2019最新的web前端学习资料和0基础入门教程分享给大家

在基础阶段，我们学习JavaScript需要注意：

1.基本关键字指令

2.基本数据类型、数组

3.函数

4.面向对象编程

5.原型链、闭包

6.JSON

7.Ajax

8.DOM(文档对象模型 原生DOM操作)

9.事件捕获、冒泡、代理

10.常用函数方法

11.ES5、6、7

在JavaScript部分学习，主要还是要去理解好交互的原理，把原理分析清楚，真的理解语法，那写出多复杂的逻辑也是手到擒来。

JavaScript经典类库jQuery

说到学习JavaScript，很多小白同学肯定会很头痛他的原生写法。每次逻辑业务都需要手动写，也就是用一次就造一次轮子。觉得很麻烦。如果能简单一点就好了。

因为JavaScript有可以封装的特性，所以在后面也出现了很多用JavaScript封装的类库、插件。比如说最经典的类库就是jQuery了。

jQuery类库就是在类库里面封装好了很多JavaScript的事件方法。jQuery通过封装，减轻了遍历、对象选择等等很多的问题。把网页特效的实现变得简单化，通过调用方法就可以了。

在学习jQuery的时候，需要重点认识的有:

1.jQuery语法和JavaScript原生语法的差异

2.Dom对象和jQuery对象

3.jQuery的入口函数和JavaScript的入口函数的差异

4.jQuery事件的执行逻辑。

学习jQuery，最需要达到的效果就是能快速的完成网页的特效，比如说轮播图、手风琴菜单、旋转木马、放大镜等等这些特效。能完成一个电商网站的布局+特效开发是最基本的要求了。

这些就是零基础学习必备的一些基本内容，在入门前端开发最基本需要掌握的东西，把基础理解好，才能为后面的学习做更多的准备。

多终端进阶学习

除了基础的PC端，目前移动端可以说是非常火的了。

比PC端单一的网页不同，在移动端的技术可以应用到WEB-APP,小程序，Hybrid-App等等。

Web-App

也就是我们常见的浏览器（以及内置浏览器，比如微信）打开的大型移动端网页。比如我们常见的电商网站，功能性网站，管理网站，在布局和功能上都有APP的效果。

做好Web-App开发，最基本的很多人肯定会说响应式布局，但是前端开发是又5种布局法的，除了出名的响应式，还有在移动端最重要的弹性布局法，也就是很多人头疼的rem布局。

除了布局方法之外，在H5新特性和触屏事件和设备兼容性问题也是需要信手拈来。

小程序

这个也不用多说，现在可以说是非常火的，各大平台都有在做自己的小程序，各种砍价，抢票，电商，游戏都有运用。这个以微信小程序为例，主要是微信团队基于前端基础来做的封装语法，主要的还是ES语法。小程序目前很多公司都是招聘前端开发，目前还没有独立的小程序开发工程师，所以小程序可以说是前端工程师高薪就业的加分技能，换句话说就是成熟开发必备了。

Hybrid-App

又称混合式APP，可能听说的人很少，但是18年是越来越多人去开发了，这种是能直接产出下载到终端的APP的，在体验感上可以说已经具备传统APP的大部分功能了。这种开发门槛较低，也就是前端开发就可以完成。多数都是大包平台就能做，这个你可以后面了解一下。

前端主流技术框架

前面的都是基础东西，现在去就业前端开发，不是只靠个基础东西，搞个移动端页面就可以算成熟了。前端3大框架，VUE、Angular、React这3个可以说是现在非常火热的了。

基础语法都可以写的前端，为什么还要框架？

很多小白朋友是不懂什么是框架的，只听过jQuery这些东西，以为就是框架。或者认为框架就是加速开发，觉得这些库、插件就能完成框架的工作了。

其实框架的出现，是改变前端地位的重要标志。最重要的表现，就是前后端分离，在前后端分离之前，很多后端开发都是又当爹又当妈的，效果不好效率也不高，我就是在后端出身，深知痛苦。

现在的前端项目，比以前是更加复杂化、多样化了。项目复杂了，问题也多了。

那框架到底解决了什么问题？

解决重复引用外部js，以用jQuery开发为例，很多时候都是不能单一完成一个项目的，还需要引用很多的第三方插件和库，导致会一个项目引入很多外部JS文件。

这样不仅让代码变得杂乱，而且很影响打开速度。但是用框架呢，以VUE为例，一般会和构建工具配合，然后就是一个入口文件就可以完成了，在运行时候就在入口引入一次，一劳永逸。

使用组件化开发，组件是前端框架里非常强大的功能之一，它可以扩展你的HTML，封装可以重用的代码块，比如你的轮播图、tab切换、页面头部、页面底部等等。

这种独立的组件具有了结构（html），表现（css）和行为（js）完整的功能，很大程度的节省了代码量，提高了代码的复用性。特别是团队合作的时候，可以很好的提高使用效率。

减少开发周期，如果你觉得jQuery可以减少开发周期了，那其实框架可以比库更快。比如说使用jQuery开发的时候，很多时候是需要频繁去操作DOM，每次效果都要去查找DOM，这样就显得很繁琐了。使用框架的时候，很多功能都得到了封装，比如说很多指令都有数据绑定，数据格式化这些功能。这样更多时候，我们开发的时候只需要关注数据的逻辑就行了。

最后

这些也就是我们学会网页制作，web app开发，学习前端开发必备的一些知识点了。学习路线放一下给大家。

Web前端是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲，Web前端工程师使用HTML、CSS、Java等专业技能和工具将产品UI设计稿实现成网站产品，涵盖用户PC端、移动端网页，处理视觉和交互问题。从广义上来讲，所有用户终端产品与视觉和交互有关的部分，都是Web前端工程师的专业领域。

就目前Web前端开发可能涉及的语言来讲，有PHP语言、JavaScript、Ruby、HTML5、Java和Python。当然并不是说以上这些语言前端开发工程师都必须掌握，其实只选择一两门熟练掌握即可。下面我们跟着我一起来看看这些Web前端开发语言的具体介绍和自身的优势。　

1、JavaScript

JavaScript是一种属于网络的脚本语言，被广泛用于Web应用开发。作为一种动态编程语言，它主要用于增添网站的交互性。作为运行在浏览器中的解释型的编程语言，它的优势也是显而易见的，比如可以轻松实现跨平台、跨浏览器驱动网页以及与用户交互的功能。同时，JavaScript还能开发很多Web框架，如Angular.js、Ember.js以及Javascript MVC等。

2、PHP语言

常常听说PHP是世界第一的语言，其实这种说法也有一定道理。作为Web架构开发常用语言，PHP开发了很多Web框架，有Zend framework、CakePHP、ThinkPHP等等。PHP独特的语法混合了C、Java、Perl 以及 PHP 自创新的语法。目前，PHP主要用在服务器端上用于Web开发。

PHP语言的优势在于可以更快速的执行动态网页，而且功能强大，支持几乎所有流行的数据库以及操作系统，还可以用C、C++进行程序的扩展！另外，PHP提供了几个框架，比如Laravel和Drupal，帮助开发人员更快地构建应用程序，拥有更高的可扩展性和可靠性。PHP拥有最简单的学习曲线、廉价的托管环境、丰富的学习资源和相对容易的开发环境。这对初学者来说是个不错的选择。

3、HTML5

HTML是超级文本标记语言，是为“网页创建和其他可在网页浏览器中看到的信息”设计的语言。HTML5是由万维网发布的最新的语言规范，是开放的Web网络平台的奠基石，所以做Web前端，精通HTML5是必须要掌握的一项技能。

4、Ruby（与Ruby on Rails一起使用）

Ruby是一种纯粹的面向对象编程语言。Ruby 的特性与 Smalltalk、Perl 和 Python 类似。Perl、Python 和 Smalltalk 是脚本语言。Smalltalk 是一个真正的面向对象语言。Ruby，与 Smalltalk 一样，是一个完美的面向对象语言。使用 Ruby 的语法比使用 Smalltalk 的语法要容易得多。ruby是一种优秀的纯面向对象的编程语言，学习它可以很好理解面向对象的编程，其次ruby的开发效率也很高。ruby在国内不常用的原因是因为ruby在国际上没有大厂商的支持，所以在国内一般就不怎么用，但是还有很多网站使用ruby开发的。总之，学习不同语言都能帮助自己更好的理解编程。这不是前端必须的，学有余力可以去学习。

5、Java语言

Java是一门面向对象的编程语言，在电子商务领域以及网站开发领域占据了重要的地位。之所以把它列为Web前端开发语言之一，是因为开发人员可以运用很多不同的框架来创建Web项目，如SpringMVC，Struts2.0以及frameworks等，即使是简单的servlet、jsp和以struts为基础的网站在政府项目中也经常被用到，疗救护、保险、教育、国防以及其他的不同部门网站也都是以Java为基础来开发的。

6、Python

Python是一种解释型的脚本语言，它非常适合用来做Web开发。它的优势也是显而易见的，比如开发效率高，有上百种Web开发框架，有很多成熟的模板技术，如Django、flask等，选择Python开发Web应用。不但开发效率高，而且运行速度快。

总结一下，Web前端开发语言主要就是以上这些，关于他们各自的优势相信大家已经基本了解了。我介绍了这么多的语言，大家都掌握其中多少语言呢？当然了，学习在精不在多，只要熟练掌握一两门，就能大大提高Web前端开发能力。

介绍
web开发的三大基本语言包括：HTML、CSS和JavaScript（其中HTML是web开发的关键）。

从上图可以看出HTML的作用，它处在web开发的核心位置。简单概括的话：HTML为web开发提供了内容；CSS控制如何展示内容；而JS更多的集中在控制逻辑和实现交互上。如果你还不是很清楚它们的作用，通过下面三张图片就能一目了然。

第二张图移除CSS后，使页面丑化了不少，而第三张图移除HTML后，内容都消失了，就甭提页面美化和丑化的问题了。当然你也可以移除JavaScript试试，只不过效果看不太明显，建议你可以去秒秒学的界面尝试一下。

HTML在web开发上的优势
我们知道HTML是一种标记语言，下面我们来总结一下HTML在web开发方面有什么优势：

1. 编码正确的HTML文档能提高文档的可读性。（怎么也比txt文档读起来舒服吧。）
2. 鲜明地表达文档的结构及结构中内容之间的关系。（和word类似，有标题，内容，图表等，甚至可以添加按钮。从而可以鲜明的展示。）
3. 允许用户链接到其他的网页。（点击->跳转）
4. HTML通过标记标签来描述网页如何与其它页面上的内容相关联。（标签就是告诉浏览器，内容是什么类型，比如<h1>标签，就是告诉浏览器“我是标题1“。标签还可以告诉浏览器“我是内容”，“我是表格”等内容。只有正确使用标签，浏览器才能正确的显示内容。）

HTML标签实例
HTML是一种标记语言，因此我们不得不提到它的标记，我们称HTML标记为标签。标签涉及到具体的HTML代码，而不是从网页界面直接看到的东西，下面我们看一个常用的p元素（段落标签）是如何构成的。

下面我们在HTML文件中写一个简单的p元素，来看看在浏览器中它会以什么样的方式呈现。

大牛推荐的学习网站
除了段落标签，还有各式各样其他的标签，这些标签都可以在w3c上轻松找到。下图中推荐了几个网站给大家：

我还是贴心地帮你们抠出来吧：
http://www.w3.org/TR/HTML5/
https://HTML.spec.whatwg.org/multipage/
https://developer.mozilla.org/zh-CN/
https://www.webplatform.org/

个人觉得学习HTML，基本就是在学习各种标签的使用，较容易学习，而且有一大堆的资料可以参考。所以如果你想学习web开发，花半天或一天认真学习一下HTML是很有必要的。