前端学习路线
-
第一章：认识网站前端
- 前端工作前景
- 前端目前人才需求巨大，真正会的人甚少，大学毕业都是菜鸟，愿意继续学习的人又很少，导致人才匮乏，工作待遇高涨。前端目前待遇普通在6K-20K之间，优秀更高。
- 前端岗位及工作内容
- 岗位名称：WEB前端工程师 ，任务：提升互联网产品的用户体验！
- 如今的前端今非昔比，PC网站开发，手机端网站开发，网页游戏开发等等，前端工程师一般需要熟悉至少一种后台开发技术(例如:PHP首选)
- 本班课程设计及目标
- 紧紧围绕社会发展需求，培养专业级实战人才。所有毕业同学均包就业。
- 2
第二章：HTML5从入门到精通
- 系统精讲HTML4.01常用所有标签
- html, body, head, meta, title 等固定结构标签
- div,h1-h6, p, ul, ol, dl,iframe 等几十种布局标签
- a,img,span,b,strong, link, script 等几十种内容型标签
- form表单专题精讲
- table表格专题精讲
- 多媒体音视频处理专题精讲
- 系统精讲HTML5新增所有常用标签
- header, section, nav, footer, article, aside 等新增布局型语义标签精讲
- form表单新特性精讲
- audio,video等新增多媒体标签精讲
- canvas专题精讲
- html综合实战与考核
- 老师带领使用html标签布局一个完整网页
- 学员独立完成使用html标签(手写)完成一个完整网页
- 3
第三章：PhotoShop切图精讲
- 资源准备
- 有老师提供一套网站PSD设计源文件
- 老师带队演示PS切图技术和注意事项
- 切图实战考核
- 每位同学可以网上下载一套psd设计源文件，完成切图任务
- 学完CSS后进一步对此技术进行强化训练
- 4
第四章（上）：CSS 精讲
- CSS快速入门
- CSS快速入门示例，CSS选择器，行内，页级，外联，导入(link,import)精讲
- HTML所有常用标签默认值特性专题
- 边框与边距
- 实战演示+系统精讲border,margin,padding各种应用
- 背景与背景定位
- 实战演示+系统精讲background-*背景颜色，背景图片及定位，各种应用场景
- 文本特性与列表样式
- 超级链接css特性，img的css兼容特性
- 文本粗细，颜色，行间距，字间距，字体，对齐模式等精讲
- 各种list列表的css特性与实战演练
- 尺寸与常用单位精讲
- 宽度(最大宽度，最小宽度，百分比宽度，定值宽度)，高度(同前)
- px, em, pt, n%, hex 及特殊字符串描述
- 5
第四章（下）：CSS 难点精讲
- 布局精讲
- 浮动原理，左右浮动，清除浮动,浮动对块状元素，行内块状元素，行内元素的影响精讲
- "行内，块状，行内块状，表格模式" 元素类型的自由转换
- 元素的隐藏与显示
- 定位精讲
- 通过实战精通绝对定位
- 通过实战精通相对定位
- 通过实战精通固定定位
- 定位与浮动的区别专题
- 表格与表单CSS专题精讲
- 表单css精讲，表单元素CSS默认值特性，不识别特性
- 表格css特性，充分利用可以把很多计算问题简单化
- HTML+CSS综合实战
- 老师带队做好一个完整网页前后台页面（要尽可能全面的充分利用所学知识），并通过所有主流浏览器兼容测试
- 毕业设计：学生独立完成网站网页前后台页面，并通过所有主流浏览器兼容测试
- 制作标准
- 以BAT产品为样板，唯美或质感，误差2像素内容，代码精炼，结构清晰合理，html与css要完全分离，符合W3C标准，利于SEO，利于程序员使用，注释规范明确。
- 6
第五章(上)：CSS3对css2的基本拓展一
- CSS3快速入门
- 通过示例快速解说CSS3
- CSS3主流浏览器兼容问题,浏览器内核前缀介绍
- CSS3新增几十种选择器精讲
- css3文本新特性精讲
- text-shadow 实战应用精讲
- 文本方向，自定义字体等文本新特性精讲
- 新增颜色模式精讲
- rgba 色彩渐变，透明度应用广泛
- Hsl
- 在css2基础上新增UI特性
- 新圆角，图像边框，线性渐变，径向渐变，多重背景，遮罩等
- 7
第五章(中)：CSS3 新盒子模型与响应式布局专题精讲
- 盒新模型精讲
- CSS3 分栏布局精讲
- CSS3 响应式布局精讲
- 8
第五章(下)：CSS3 过渡/Animate动画/2D/3D变换/ - 注：此部分可以在js基础学完后学习
- Transition过渡动画精讲
- Transition过渡动画精讲及实战
- Animate关键帧动画精讲
- Animate关键帧动画精讲及案例实战
- 2D变换
- transform旋转，斜切，平移，缩放
- 2D变换实战案例
- 3D变换
- transform旋转，斜切，平移，缩放
- 3D变换实战案例
- 9
第六章(上)：JavaScript基本语法精讲
- JS快速入门
- 快速入门示例，js各种嵌入到html文件的方法。注释，标记，变量，数据类型
- 数组精讲
- 一位，二维，多维数组定义，排序，切分等各种场景使用精讲。
- 函数精讲
- 函数定义，执行环境，作用域，匿名函数，回调，递归，闭包精讲
- 字符串处理精讲
- 字符串处理函数，正则表达式精讲
- 系统常用函数
- setTimeout, setInterval，日期时间函数，数学函数精讲
- 认识对象
- js对象定义，构造函数，原型精讲
- 10
第六章(下)：BOM/DOM模型/事件模型
- BOM模型精讲
- Navigator, Location, Window, Screen, history对象精讲
- DOM模型
- 节点查找，类型判断，创建，添加，删除，修改等
- 事件模型
- 冒泡型，捕获型，事件绑定的3种方法精讲
- 事件类型
- 鼠标事件，键盘事件，UI事件精讲
- 事件对象精讲
- 各种不同事件类型的事件对象精讲
- 11
第七章(上)：jQuery 精讲一
- jQuery快速入门
- 快速入门示例，jQuery 选择器
- 常用函数实战
- 属性编辑函数，元素筛选函数
- 节点处理
- jQuery对DOM模型的处理的二次封装
- CSS处理
- jQuery对css处理的二次封装
- jQuery事件处理
- jQuery对事件处理的二次封装与事件对象
- jQuery动画效果
- 淡入淡出，隐藏显示，animate动画等
- 12
第七章(下)：jQuery 高级精讲
- jQuery 队列精讲
- queue，dequeue，delay，stop等核心函数用法精讲，使用队列完成动画
- jQuery插件开发
- jQuery插件开发精讲，插件开发实战
- Ajax应用专题精讲
- Ajax应用专题精讲
- jQuery实战考核
- 使用 jQuery分别完成，完整网页(各种常见特效制作)，业务逻辑运算，数据交换，网页游戏实现等。
- 13
第八章：jQuery UI精讲二
- jQuery UI精讲二
- 有了jQuery UI 很多常用特效和功能都轻松搞定...
- 14
第九章：手机网站制作专题精讲
- 手机网站实战专题
- 手机网站实战专题
- 15
第十章：Ajax、JSON、XML、Canvas 专题精讲
- Ajax精讲
- 原生Ajax精讲， XMLHttpRequest对象与 "jQuery Ajax" 实战对比
- JSON、XML 精讲
- JSON、XML 精讲、微信公众平台案例
- Canvas 精讲
- Canvas 绘图，通过程序也能轻松创建，修改图片了...
- 16
第十一章：JavaScript 原生高级编程精讲
- JS 复制继承，原型链继承等
- JS 复制继承，原型链继承等精讲具体见课堂讲义...
- JS对象继承
- JS对象继承在框架开发中应用实例精讲，更佳的封装和重用你的代码。
- 17
第十二章：其他拓展进阶学习
- 延伸学习 - 前端布道师
- 为完成多人合作的大型WEB前端项目，确保代码的可用型，高性能，易拓展等问题，有一系列解决方案。这些方案都建立在精通以上基础之上。
- 更多框架库学习
- SeaJS、Angular、Bootstrap、React, NodeJS(服务器端平台)等等
- SVN, 模块化开发, CMA, AMD, 构建工具, http协议
- 新框架和新名称由来的原因
- 新框架和名词层出不穷（无数前端框架，无数新名称，学习原则不变：一精多能), 大多来自BAT, 谷歌, Yahoo, FaceBook, Twitter等等国际一流IT相关公司.
- 之所以会出现很多新产品，不如说是出现很多解决方案，是在这些公司的应用程序规模很庞大时候需要寻找一种有效的管理办法最终找到一种解决方案，并很快被其他人认可和接受。
- 18
请继续学习：PHP网站开发高级工程师第二部后台部分
原文地址：https://www.cnblogs.com/fengyongxian/p/6472425.html