前端的的技术一直在变化,更新和变革,现在基本是三驾马车(vue,angualr,react)主导整个前端框架,但是无论对于新人或者有经验的程序员,这些知识在必须掌握

前端必会技能

上图罗列了整个前端的一些技术架构,可能有些东西已经过时了,但是以下这些东西必须得了解和掌握。

  1. html的语法、格局,常用的标签极端作用,了解标签的嵌套。

  2. 学习运用firefox+firebug或许chrom的调试工具,可以运用这些工具调试html、css、js、断点调试、抓包 2.怎么引入css、js。

  3. 了解id、class属性的区别,学会css的常用选择器,了解盒子模型(padding,margin,border,width,height,),css坐标系,css布局(position的absolute、relative 、fixed、static),css浮动(float:left、right )和清除浮动clear),display:inline、block、inline-block、flex 3。

  4. 了解掌握js的执行顺序,基本的编程基础(变量、运算、流程操控、数组、调用函数、自定义函数、对象)、json、js的dom操作、js的事件机制(委托、绑定、监听,冒泡和阻挠冒泡,兼容性),了解ajax的xmlhttprequest及其创建办法(多浏览器兼容)、跨域,明白其作业原理。

  5. 熟悉http协议对web开发的方方面面都有不少帮助,比如了解及运用ajax,比如调试程序、抓取数据等等,不过http是一个很杂很细的东西,内容很多,我建议也囫囵吞枣式地学习,先了解、熟悉简略的,今后在项目中遇到深化点的再进一步学习。

  6. 树立服务器,弄个傻瓜服务器比如wamp,phpstudy等软件,可以一键树立一个apache+php+mysql的服务器,前期可以把你的静态页发布到本地服务器,运用本地服务器配合ajax学习。

  7. 熟悉或者至少了解node的基本语法和用法,在现在流行的手脚架配置都离不开node,而且node可以启动服务器,正真做一个全栈工程师。

  8. 最后推荐一下我的前端教程学习群640633433,如果你想制作酷炫的网页,想学习前端知识,小编欢迎你的加入。小编会在群中不定期分享学习干货、趣味源码,包括我精心整理的一份前端零基础教程。欢迎各位小伙伴来一起学习!

  9. vue,angular,react至少精通其中之一,了解内部运行机制,至少熟读源码。

2018年web前端学习路线图的更多相关文章

  1. 2015 WEB前端学习路线图

    2015 WEB前端学习路线图,欢迎小伙伴补充 @落雨

  2. 2020年全新web前端学习路线图,学完就业20K!

    第一阶段:HTML5+css 配套学习视频: 前端小白零基础入门HTML5+CSS3 第二阶段:移动web网页开发 移动web进阶教程 第三阶段:JavaScript网页编程 前端与移动开发基础入门到 ...

  3. 2020年最新版Web前端学习路线图-前端小白入门必读-pink老师推荐

    Hello,大家好,相信很多学习前端的小伙伴,会有很多的疑惑: 我要学习那些技术? 我要到哪里去学习这些技术呢? 学习这些技术的目的对就业有什么帮助呢? 我学到什么程度可以胜任工作? ... 这里,p ...

  4. Web 开发者学习路线图

      2017 Web 开发者学习路线图(头图源自谷歌) 本文是源自 Github 上 Kamran Ahmed 建立的一个仓库.在文中,作者为他的老教授分享了一组成为前端与后端开发者以及 Devops ...

  5. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  6. 【web前端学习部落22群】分享 碰撞的小球开源小案例

    对于课程中的疑问,大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦,群里还有不少技术大拿.行业大牛 可以一起探讨问题,我们也会安排专业的技术老师为大家 ...

  7. web前端学习部落22群开源分享 左边菜单导航

    有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 <!DOCTYPE html> <html lang ...

  8. 【前端】Web前端学习笔记【2】

    [2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...

  9. 立方体旋转 【web前端学习部落22群120342833】

    效果: HTML部分: <body class="body"> <div class="rect-wrap">   <!-- // ...

随机推荐

  1. BASIC-2 01字串

      基础练习 01字串   时间限制:1.0s   内存限制:256.0MB        问题描述 对于长度为5位的一个01串,每一位都可能是0或1,一共有32种可能.它们的前几个是: 00000 ...

  2. 实战经验分享之C#对象XML序列化

    .Net Framework提供了对应的System.Xml.Seriazliation.XmlSerializer负责把对象序列化到XML,和从XML中反序列化为对象.Serializer的使用比较 ...

  3. android官网文档学习笔记

    1.android的四大组件的了大概功能 activity:负责显示界面,和用户交互. service:运行在后台. content provider:为程序app之间的数据访问提供接口. broad ...

  4. zz:linux下rz,sz的安装方法

    zz:http://xukaizijian.blog.163.com/blog/static/1704331192011611104631875/ wget http://ohse.de/uwe/re ...

  5. npm package.json文件解读

    每个Nodejs项目的根目录下面,一般都会有一个package.json文件.该文件可以由npm init生成,定义了项目所需要的各种模块,以及项目的配置信息(比如名称.版本.许可证等元数据). pa ...

  6. 高通平台的bootloader过程【转】

    ====================基本知识=======================LK是(L)ittle (K)ernel的缩写.高通平台android普遍采用LK作为其bootloade ...

  7. atom编辑器启动后文件不能编辑的解决办法

    今天更新了atom,并且安装了很多插件,突然发现所有页面不能编辑了,如图 这个光标块会自动跳到单词后面,后来发现按一下键盘的字母a就变成正常光标了,至于原因,折腾了一个小时也没发现,后来百度到用Ctr ...

  8. MkDocs项目文档生成器

    简介 安装 我的配置 Chocolatey 简介 - Windows的包管理器 官方网址 安装 注意事项 Python 简介 安装 Pip 简介-Python的包管理器 升级 MkDocs的安装 使用 ...

  9. x64_dbg破解64位WinSnap4.5.6图文视频教程

    一.软件简单介绍: WinSnap是一个轻巧.快速.简单.友好的截图工具,提供屏幕截图和图像编辑功能.和其它截图软件相比其最大亮点在于WinSnap可以捕获或去除Win7的 Aero玻璃效果.WinS ...

  10. bzoj 1935: [Shoi2007]Tree 园丁的烦恼

    Description 很久很久以前,在遥远的大陆上有一个美丽的国家.统治着这个美丽国家的国王是一个园艺爱好者,在他的皇家花园里种植着各种奇花异草.有一天国王漫步在花园里,若有所思,他问一个园丁道: ...