前端学习路线

html笔记; 技术点关键词: DOM 标签元素 标签类型 节点 样式 属性 不同浏览器支持的差异性(很小一部分) 框架布局 弹窗 浮动 js笔记; 技术点关键词: 变量 方法 参数 对象 触发和调用 异步数据交互 css笔记; 技术点关键词: 下拉 隐藏 显示 像素 边距 边框 ----------------------------------------------------------------------------------------------------------------------------- 学习路线: 前端要学习三个部分：HTML，CSS，JavaScript（简称JS），因此首先明确三个概念： HTML是内容层，它的目的是表示一个HTML标签在页面里是个什么角色。 CSS是样式层，它的目的是表示一块内容以什么样的样式（字体、大小、颜色、宽高等）显示。 JS是行为层，它要做的是当用户触发某些行为时，会给内容和样式带来什么样的改变。 前辈写的总结: http://blog.163.com/html5_12/blog/static/21278902620121025868126/ 来源： oschina 链接： https://my.oschina.net/u/2464155/blog/544037

一、HTML、CSS基础、JavaScript语法基础。学完基础后，可以仿照电商网站（例如京东、小米）做首页的布局。 二、JavaScript语法进阶。包括：作用域和闭包、this和对象原型等。相信我，JS语法，永远是面试中最重要的部分。 三、jQuery、Ajax等。jQuery没有过时，它仍然是前端基础的一部分。 四、ES6语法。这部分属于JS新增的语法，面试必问。其中，关于promise、async等内容要尤其关注。 五、HTML5和CSS3。要熟悉其中的新特性。 六、canvas。面试时，有的公司不一定会问canvas，靠运气。如果时间不够，这部分的内容可以先不学。但如果你会，绝对属于加分项。 七、移动Web开发、Bootstrap等。要注意移动开发中的适配和兼容性问题。 八、前端框架：Vue.js和React。这两个框架至少要会一个。入门时，建议先学Vue.js，上手相对容易。但无论如何，同时掌握 Vue 和 React 才是合格的前端同学。 九、Node.js。属于加分项，如果时间不够，可以先不学，但至少要知道 node 环境的配置。 十、自动化工具：构建工具 Webpack、构建工具 gulp、CSS 预处理器 Sass 等。注意，Sass 比 Less 用得多，gulp 比 grunt 用得多。 十一、前端综合：HTTP协议、跨域通信、安全问题（CSRF、XSS）

前端工程师 的职责是制作标准优化的代码，并增加交互动态功能，开发 JavaScript 以及 Flash 模块 ，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。 前端工程师属于IT技术职业的一种，是近5年发展起来的职业，旧的体系将其定义为Web前端工程师，主要的技术包含：HTML、JavaScript、CSS。但IT技术属于变化比较快的领域，最近发生了很大的变革，新的体系下，前端工程师技术又增加了：nodejs、Hybrid App。 Node.js是一个Javascript运行环境(runtime)。实际上它是对Google V8引擎进行了封装。V8引 擎执行Javascript的速度非常快，性能非常好。Node.js对一些特殊用例进行了优化，提供了替代的API，使得V8在非浏览器环境下运行得更好。 Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。主要采用JavaScript语言作为中间语言开发。 因此，前端工程师所涵盖的职责范围，已经包含后端、跨平台等多种职能，不能简单地认为只是Web前端工程师。 前端工程师进阶之路： 摘自《尚硅谷》：http://web.atguigu.com/ 来源：

作者 | Jeskson 来源 | 达达前端小酒馆 下面小编专门为广大web前端开发职业者汇总了学习路线初级完整版，其实web前端开发工程师可算是高福利，高薪水的职业了，所以现在学习web前端开发的技术人员也是越来越多了，但是在学习web前端开发中去学习是应该要有一个完整的学习路线。 web页面制作基础 web简介，HTML语法基础，HTML基本结构，单双标签，标签属性，标签嵌套规则，注解，HTML文本图像元素，标题，段落，图像，HTML超链接元素，HTML列表元素，HTML表单表格元素，表单属性，表格结构。 css基础，基础语法和选择器，css引用方式，css属性，css背景色，背景图，字体，文字，列表，表格，内容，css盒子模型，盒子模型简介，块级元素和行内元素，盒子模型属性，css布局，布局基本概念思想，float属性使用，clear属性，overflow属性，定位（相对，绝对，固定），css兼容性处理。 HTML5和CSS3开发基础与应用 HTML5简介，HTML5新增元素，文档结构元素、文本格式化元素、页面增强元素、多媒体元素，表单控件新增属性 placeholder和required、 multiple、form、formaction、 formmethod、formenctype、 formtarget、autocomplete、 autofocus、pattern

不废话，直接干货 学习前端的几个阶段： 一阶段：html标签、html5新增标签、css样式、css3样式、媒体查询等 二阶段：JavaScript、jQuery、ajax、面向对象、http传输协议等 三阶段：canvas、js高级应用、JS-SDK、H5新增技术 四阶段：node.js、vue.js 第一阶段——HTML的学习 超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架，无论是静态网页还是动态网页，最终返回到浏览器端的都是HTML代码，浏览器将HTML代码解释渲染后呈现给用户。因 此，我们必须掌握HTML的基本结构和常用标记及属性 HTML 的学习是一个记忆和理解的过程，在学习过程中可以借助Dreamweaver的“拆分”视图辅助学习。在“设计”视图中看效果，在“代码”视图中学本质， 将各种视图的优势发挥到极致，这种对照学习的方法弥补了单纯识记HTML标签和属性的枯燥乏味，想必对各位初学的小盆友们来说，必定是极好的! 在学习了HTML之后，我们只是掌握了各种“原材料”的制作方法，要想盖一幢楼房就还需要把这些“原材料”按照我们设计的方案组合布局在一起并进行一些样式的美化。 第二个阶段——CSS的学习 CSS是英文Cascading Style Sheets的缩写，叫做层叠样式表

其实与web相关的书籍还是很多的，因为web的领域就是比较广的，因为有过web开发经验的都知道，web，就开发语言就有php，jsp，asp，.net等多种语言，那么这些语言对应的后台开发就有对应的书籍，所以今天小编就主要推荐与web基础相关的书籍。因为相比之下web前端还是比较轻松入门的。 HTML相关： 《Web标准实战》 比较简单，适合基础学习 《Web标准设计》 《深入浅出HTML》 CSS相关 《CSS设计彻底研究》 视频教程很好，书本我并没有详细研究，不好说建议。 《CSS网站布局实录》 CSS的书我看得比较少，这本算是看得比较全了。 javascript相关： 《精通JavaScript》 《JAVASCRIPT语言精髓与编程实践》 这本书对原型和继承做了非常精辟的解释，网上大部分关于原型的文章都是参考此书的。这里，推荐我们的web前端学习秋秋裙767，web前端中间的数字是273，web前端最后是102 。7年全栈工程师，根据这些年从事开发经验，整理了一份最适合2020年学习的web前端干货 《悟透javascript》 这本书第一章是介绍原型和继承的，第三章也介绍了跨域的一个解决方法，还有就是作者对程序和人生的理解哲学很有深度。 《JavaScript权威指南》 《高性能网站建设指南 》 这类书有两本不同版本，都是关于web性能优化的

史上最全的WEB前端开发程序员学习清单！ 今天为什么要给大家分享这篇文章呢，我发现最近来学前端的特别多，群里面整天都有人问：前端好找工作吗？前端要怎么学啊？前端工资怎么样？前端XX，前端XXX，虽然我回答过无数次这种问题了，但是问这个的还是有很多，今天我就给大伙分享一下前端学习路线，当然不是我自己总结的，毕竟没有那么厉害，就借用腾讯大佬的给大家学习下吧！ 推荐下我自己的前端学习群：618522268，不管你是小白还是大牛，小编我都挺欢迎，不定期分享干货，包括我自己整理的一份2018最新的前端资料和零基础入门教程，欢迎初学和进阶中的小伙伴。 正文开始： 最后在对刚刚入门学习的程序员提点建议： 君子生非异也，善假于物也”，在学习的过程中还要多浏览一些优秀的网站，善于分析借鉴其设计思路和布局方法，见多方能识广，进而才可以融会贯通，取他人之长为我所用。 同时还要善于使用Firebug这个利器。Firebug一方面可以在我们学习过程中帮助我们调试自己的页面，另一方面我们可以使用Firebug方便地查看、分析别人网站的源代码，“偷”也是一种技能! 今天为什么要给大家分享这篇文章呢，我发现最近来学前端的特别多，群里面整天都有人问：前端好找工作吗？前端要怎么学啊？前端工资怎么样？前端XX，前端XXX，虽然我回答过无数次这种问题了，但是问这个的还是有很多，今天我就给大伙分享一下前端学习路线

第一阶段： HTML+CSS: HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础： Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。 JS基本特效： 常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。 JS高级特征： 正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、 JQuery：基础使用 悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。 第二阶段：HTML5和移动Web开发 HTML5： HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、Web Socket、Canvas. CSS3: CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。 Bootstrap: 响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。 移动Web开发： 跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem

大前端完整学习路线（详解） 第一阶段： HTML+CSS: HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础： Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。 JS基本特效： 常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。 JS 高级特征： 正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、 JQuery：基础使用 悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。 第二阶段：HTML5和移动Web开发 HTML5： HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、Web Socket、Canvas. CSS3: CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。 Bootstrap: 响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。 移动Web开发： 跨终端WEB和主流设备简介、视口

Rebecca Murphey是来自于 Bazaarvoice 的一位软件工程师。今年早些时候，她发布了一篇博客文章“ 前端（JS）开发者的基本素质之2015版 ”，为JavaScript开发者在进行客户端web开发时使用的工具与开发方式提出了一些建议。她在文章的总结中写道： 学习 ECMAScript 2015 ，推荐的参考资料有： 《Understanding ES6》 、 ES6 Rocks 以及 BabelJS 。我们在此还要加上一条，即Axel Rauschmayer的著作《 探索ES6 》。考虑到在当前这个时间点上似乎还没有必要了解ECMAScript 2015的所有细节，Murphey建议开发者更深入地了解如何使用异步调用、回调以及promise。 使用模块 。Murphey相信，模块毫无疑问应当作为客户端web应用程序的构建块。她最近在使用 webpack 以实现模块化的效果，但她希望让每个人都能够使用ECMAScript标准模块的那一天能够早日到来。 测试你的代码 。在Murphey看来，为你的代码编写测试，并且保证代码的可测试性是至关重要的。虽然她对于 Intern “非常中意”，但出于习惯，她还是坚持使用 Mocha 。关于这一方面，她也强烈推荐Michael Feathers的著作《 修改代码的艺术 》。 实现流程自动化 。Murphey曾经尝试使用