前端HTML5学习目标和学习线路图

掌握学习方法,不如会弯道超车

前端常见的开发岗位

 H5全栈开发工程师      H5开发工程师     Web前端开发工程师      Node.js开发工程师      微信小程序开发工程师     H5游戏开发工程师     移动WebApp开发工程师     网站开发工程师   


可以胜任300多个开发岗位,只要和Web相关的都高度匹配。
前端适合开发的软件类型

 网站开发     微信小程序开发     微信公众平台开发   
 网页游戏的     WebAPP   
 企业单页APP   
 企业官网     系统操作界面   


所有软件都离不开操作界面,界面开发都在用H5接术。
需要掌握的技术及需要掌握的程度

 HTML5技术     CSS3技术     JavaScript     ES6     DOM/BOM     Ajax     jQuery     BootStrap     flex     Webpack     Vue     React     WebStorm   


现在对前端要求越来越高, 技术更新迭代也很快。

前端的学习目标:

H5在狭义上指HTML(超文本标记语言)的第5个版本,在广义上包含了HTML5、CSS3、JavaScript等在内的所有应用场景, H5全栈开发课程旨在打造精通前端(HTML5、CSS3、JavaScript、JQuery)、后端(Node.js)、 移动跨平台(Android/IOS)App(Vue.js/Angular/React)、微信小程序开发的全栈型全能工程师。 结合BAT等一线互联网实际项目需求以及H5技术的飞速发展,在WebAPP开发、数据交互、游戏开发很多方面内容更,需要学习React.js课程,与Vue.js开发课程齐头并进,打造前端和WebAPP开发框架三剑客,形成覆盖式技能成长战略。 还要了解H5游戏AI智能算法,拓展自己在H5游戏开发相关就业新方向,掌握新加入完善的ES6/ES7语法结构,让JS编程更加简洁、爽快,6的飞起。另外更加注重H5应用在市场营销方面的应用,增加实战项目操作。

HTML5

HTML可以将不同格式的“内容”放到网页上

超文本标记语言(Hyper Text Markup Language),标准通用标记语言下的一个应用。HTML 不是一种编程语言,而是一种标记语言 (markup language),是网页制作所必备的。 “超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。超文本标记语言(或超文本标签语言)的结构包括“头”部分、和“主体”部分,其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。

Image placeholder
CSS3

CSS对网页上内容进行“美化”,配合HTML才能使用

CSS3是CSS(层叠样式表)技术的升级版本,,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 。 CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新,因此通过采用模块方法,CSS3规范里的元素能以不同速度向前发展,因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时间支持不同特性,这也让跨浏览器开发变得复杂 。

Image placeholder
页面布局

写页面就要会布局,布局的方式有很多

页面布局是对页面的文字、图形或表格进行格式设置。包括字体、字号、颜色纸张大小和方向以及页边距等。可以在WORD中使用。现在的布局不光网页布局,还有移动设置的布局, 布局的方式也很多, 表格布局、DIV+CSS布局、响应式布局, HTML5标记布局, 栅格布局, 弹性盒子布局, 还有针对一些单独类型的软件布局, 像微信公众号、小程序、 WebAPP等形式。

Image placeholder
JavaScript技术

前端开发主流语言, 让页面有特效,可操作

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。 学习JavaScript基础只能写一些简单的小特效, 必须要学习后面的DOM才能完成页面所有前端功能的编写, 所以学习JavaScript是学习前端的核心技术。

Image placeholder
DOM/BOM

DOM是一套对文档的内容进行抽象和概念化的方法

Javascript DOM(文档对象模型)是一个允许开发人员控制和管理页面内容、结构和样式的接口。是连接HTML页面和JS代码的桥梁 ,通过这个桥梁,js可以控制HTML元素,让他们按照自己的脚本动起来,换句话说,js脚本就是剧本。 任何一种支持DOM API的程序设计语言都可以去处理标记文档,但是在web领域,舍js其谁啊!

Image placeholder
后端技术

学习前端也要有后端的配合,程序员的技术才算完整

前端工程师可以和所有后端语言进行配合, 都配合的非常好。 这部分要了解ES6和JS的关系, 掌握ES6的基础用法和兼容性, 熟练掌握ES6的核心语法, 熟练使用ES6实现前端模块化开发。 够使用 Node.js或PHP 进行 Web 服务端开发; 能够掌握 JavaScript 异步编程模型; 能够掌握 JavaScript 模块化编程方式。能够使用 Node.js 操作 MongoDB 数据库。能够理解 HTTP 协议,能够独立开发基于后台接口的动态网站、Ajax 数据交互的项目, 能够独立完成企业网站从前台到后台的基本开发工作。

Image placeholder
Ajax/jQuery/BootStrap

前端开发最常用的三种开发技术框架

AJAX 是与服务器交换数据并更新部分网页的艺术。 jQuery 是一个 JavaScript函数库,极大地简化了 JavaScript 编程。jQuery 是目前最流行的 JS 框架,而且提供了大量的扩展。 Bootstrap是最受欢迎的HTML、CSS和JS框架,用于开发响应式布局、移动设备优先的Web项目,用于开发响应式布局,是一套用于 HTML、CSS 和 JS 开发的开源工具集。

Image placeholder
Vue框架

帮助你创建可维护性和课测试性更强的代码库

Vue是一款有好的、多用途且高性能的JavaScript框架,它能够帮助你创建可维护性和课测试性更强的代码库,vue是渐进式的JavaScript框架, 也就是说如果你已经有一个现成的服务端应用你可以将vue作为该应用的一部分嵌入其中,带来更加丰富的交互体验或者如果你希望将更多的业务逻辑放到前端来实现那么vue的核心库机器生态系统也可以满足你的各式需求。   与其他框架相同,vue允许你讲一个网页分割成可复用的组件,每个组件都包含属于自己的HTML、CSS、JavaScript以用来渲染网页中相应的地方。

Image placeholder
React框架

React框架的出现,意味着前端进入了一个新的时代

React实现了分和合的高境界,所谓的分是组件化的思维,所谓合是前端技术栈的开发方式之合。组件化的思维其实很早就出现,但是没有很好的实现, 知道React的出现,把其推向的高潮。而与此同时迎着组件化的浪潮,我们的开发方式也是把原来的html、css、js全都柔和在了一次开发,组件作为单体是合,作为一个更大的整体的一部分又是分。而这使得复用性、开发效率大大提升。

Image placeholder
APP和小程序开发

WebAPP和小程序的开发需求近两年在暴增

需要我们能够掌握小程序的开发基础,能够独立开发小程序项目,能够掌握 Canvas 的使用,能够掌握小程序的部署与发布。还要能够掌握小程序开发框架 mpvue 的使用,掌握第三方 AI 平台的使用。 最好可以够掌握小游戏开发基础,能够独立开发小游戏项目,也能够掌握小游戏的部署与发布。还要能够独立使用 React Native 开发原生 App。

Image placeholder

学习路径

一门技术想学成, 达到可以工作的目的, 内容的确不少, 也不是三五日可以速成的,需要一个长期积累的过程。 但掌握好的学习方法及学习路径也是可以事半功倍的。 对于零基础小白最大的痛点就是不知到学什么,也不知道从哪里开始学。一门技术虽然相关联的内容很多,但学习猿地有大牛帮你找出常用的30%的内容学习,能开发90%以上的软件, 技术的版本更新迭代的速度也很快,不同版本之间差距比较大, 学习正确的版本也可以节省精力的。按学习猿地推荐的学习线路图学习, 即有学习顺序,又都是重点实用的内容,技术版本也是精心挑选过的。

加群主微信
购买后
拉进交流群
学习交流
¥2048元 立即购买
¥4096元 立即购买