前端学习路线

前端学习是一个循序渐进的过程，需要按照合理的步骤逐步深入。首先要从基础开始打牢，然后再向进阶知识和实战经验积累迈进。

前端学习路线

• 基础知识
  • HTML+CSS
    • 学习HTML标签语义化，SEO，页面加载的流程和原理，网页结构，盒子模型，CSS选择器，CSS布局浮动、定位
      • HTML标签语义化
        • HTML语义化定义
          • 从代码展示页面结构而非视觉展示
        • HTML语义化优点
          • 对机器友好，适合搜索引擎爬虫爬取有效信息，有利于SEO
          • 支持读屏软件，根据文章可以自动生成目录
            • HTML学习
              • HTML标签语义化
                • 学习HTML的标签使用、排版
            • CSS学习
              • CSS布局
                • 掌握CSS布局、样式美化和浏览器兼容性
              • SEO优化
                • 学习SEO优化知识
            • JavaScript学习
              • 学习JavaScript的基本语法、条件、语句和循环
            • 前端工具学习
              • 学习常见的前端工具，如Webstrom、崇高、Dreamweaver等
          • 构建良好的HTML结构，增强可读性，利于团队开发、维护
        • 常用语义化标签
          • h1 ~ h6 标题标签, p, table, thead, tbody, td, th, caption
          • HTML5新增语义化标签: header, nav, article, section, aside, details, summary, dialog, footer
      • SEO
        • HTML语义化有利于SEO
          • HTML+CSS基础知识
            • HTML
              • HTML概述、W3C概述、B/S架构系统原理、table、背景色与背景图片、超链接、列表、表单、框架等知识点
            • CSS
              • 层叠样式表(CSS)是一种用来表现HTML或XML等文件样式的计算机语言
              • CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力
          • SEO基础知识
            • SEO是Search Engine Optimization的缩写，意为搜索引擎优化
            • SEO的主要目的是提升网站在搜索引擎中的排名，从而吸引更多的访问者
            • SEO包括关键词优化、网站结构优化、外部链接建设等多个方面
      • 页面加载流程
        • script标签的defer和async属性可以异步加载外部的JS脚本文件，不会阻塞页面的解析
      • 网页结构
        • 使用HTML语义化标签构建网页结构
      • 盒子模型
        • 未在搜索结果中找到相关信息
      • CSS选择器及布局
        • 未在搜索结果中找到相关信息
    • 熟悉媒体查询和响应式设计，基础CSS的格式和CSS盒模式，网页间是如何链接的、如何设计多列布局，如何创建和浏览一个基本的网页
      • HTML+CSS基础知识
        • HTML基础
          • HTML文档结构
            • 基于UI设计草案的HTML静态页面生成
            • 开发基本的网页，并且可以看懂别人编写的HTML页面
          • HTML全称为超文本标签语言，是一种标识性的语言
          • HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等
          • HTML基础语法，内容主要包括:HTML概述、W3C概述、B/S架构系统原理、table、背景色与背景图片、超链接、列表、表单、框架等知识点
        • CSS基础
          • CSS全称为层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言
          • CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化
          • CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力
          • CSS基础，内容主要包括:层叠样式表的概念、选择器、属性、值、优先级等
      • 响应式设计
        • 响应式设计概念
        • 媒体查询
  • JavaScript
    • 学习JavaScript基本关键字指令，基本数据类型、数组，函数，面向对象编程，原型链、闭包，JSON，Ajax，DOM，事件捕获、冒泡、代理，ES5、6、7
      • 基础知识
        • HTML
          • HTML不是一门编程语言，但它是构建网页的基础
        • CSS
          • CSS用于设计和布局网页
      • JavaScript核心概念
        • JavaScript概述
          • JavaScript是一种轻量级，解释型或即时编译型的编程语言，能够增强用户与Web站点和Web应用程序之间的交互
        • JavaScript简单编程实例
          • JavaScript可以直接写入在html文件中，也可以通过script标签引入JavaScript文件
        • JavaScript基础语法知识
          • JavaScript使用关键字let、const和var定义变量
          • const和let的作用域是一致的，不同的是const变量一旦被赋值，就不能再改变了
    • 熟悉JavaScript基础，DOM+BOM，网页特效与进阶，jQuery
      • JavaScript基础
        • JavaScript基础知识
          • JavaScript基础
            • 语法基础
              • 变量、数据类型、运算符、表达式
              • 条件语句、循环语句
              • 函数定义、调用、作用域、闭包
            • 对象和数组
              • 创建、访问、遍历、方法
              • 原型链、构造函数、ES6类
              • 错误处理和调试
          • DOM/BOM操作
            • DOM操作
              • 获取DOM元素
              • 操作DOM元素
            • BOM操作
              • 事件绑定、事件委托
              • 键盘鼠标常用事件
              • js同步异步、js执行队列
          • 网页特效
            • 常见网页特效，比如轮播图，tab栏切换等
            • 移动端如何制作网页特效
        • JavaScript语法基础
          • JavaScript基础
            • 语法基础
              • 变量、数据类型、运算符、表达式
              • 条件语句、循环语句
              • 函数定义、调用、作用域、闭包
            • 对象和数组
              • 创建、访问、遍历、方法
              • 原型链、构造函数、ES6类
              • 错误处理和调试
          • DOM/BOM操作
            • DOM操作
              • 获取DOM元素
              • 操作DOM元素
              • DOM操纵
            • BOM操作
              • BOM操作
              • 事件，事件对象，事件委托
              • JS执行队列，定时器
          • 网页特效
            • 常见网页特效，比如轮播图，tab栏切换等
            • 移动端如何制作网页特效
        • 数据类型
        • 控制结构
      • DOM/BOM操作
        • DOM操作
          • 获取DOM元素
          • 操作DOM元素
          • DOM操作方法
        • BOM操作
          • BOM操作
          • 事件绑定、事件委托
          • 键盘鼠标常用事件
          • js同步异步
          • js执行队列
      • 网页特效
        • 常见网页特效，比如轮播图，tab栏切换等
        • 移动端如何制作网页特效
• 进阶知识
  • NodeJS
    • 学习NodeJS的安装和使用，创建服务、响应请求
      • 前端学习路线
        • Node.js与AJAX学习
          • AJAX编程
            • AJAX的作用
              • NodeJS
                • NodeJS基础
                  • Node.js环境安装
                  • 如何用node.js运行代码
                  • Commonjs
                  • 模块化
                  • 模块与包
                  • NPM
                  • CNPM和Yarn
                  • 核心模块使用
                  • 第三方模块使用
                  • RESTFulAPI
                • 服务端开发(Node.js)
                  • 静态和动态网站
                  • http模块使用
                  • 请求响应原理
                  • HTTP协议
                  • 处理页面请求
                  • 处理表单
                  • 会话技术(Cookie、Session)
                • MySQL
                  • MySQL的概念
                  • MySQL安装
                  • 建库和建表
                  • 增删改查语句
                  • Node.js操纵MySQL
                • Express
                  • express的概念
                  • express的安装
                  • 后端路由
                  • 静态资源托管
                  • 中间件的原理
                  • 常用中间件
                  • 模板引擎
                  • 异常处理
                  • Express常用API
              • AJAX
                • AJAX编程
                  • AJAX的作用
                  • 原生AJAX
                  • 同步与异步
                  • http协议
                  • AJAX的封装
                  • jQuery的AJAX
                  • 缓存问题及解决方案
                  • 跨域请求及解决方案
                  • 前端模板引擎
                • git
                  • git历史
                  • git与svn
                  • git基本使用
                  • git分支
                  • git远程仓库
                  • git冲突及解决方案
                • ES6
                  • es6简介
                  • 新增语法
                  • 内置对象扩展
                  • Promise
                  • Async函数
                  • 解构
                  • 展开运算
            • 原生AJAX
            • 同步与异步
            • http协议
            • AJAX的封装
            • jQuery的AJAX
            • 缓存问题及解决方案
            • 跨域请求及解决方案
            • 前端模板引擎
          • Node.js基础
            • node.js环境安装
            • 如何用node.js运行代码
            • Commonjs
            • 模块化
            • 模块与包
            • NPM
            • CNPM和Yarn
            • 核心模块使用
            • 第三方模块使用
            • RESTFulAPI
          • 服务端开发(Node.js)
            • 静态和动态网站
            • http模块使用
            • 请求响应原理
            • HTTP协议
            • 处理页面请求
            • 处理表单
            • 会话技术(Cookie、Session)
          • MySQL
            • MySQL的概念
            • MySQL安装
            • 建库和建表
            • 增删改查语句
            • Node.js操纵MySQL
          • Express
            • express的概念
            • express的安装
            • 后端路由
            • 静态资源托管
            • 中间件的原理
            • 常用中间件
            • 模板引擎
            • 异常处理
            • Express常用API
      • NodeJS进阶知识
        • Node.js基础
          • Node.js是一个基于ChromeV8引擎的JavaScript运行环境
          • Node.js内置API模块(fs、path、http等)
          • 第三方API模块(express、mysql等)
        • Node.js应用开发
          • Node.js应用程序是用JavaScript编写的，可以在MacOSX、Windows和Linux上的Node.js运行时中运行而无需更改
          • Node.js应用程序旨在最大限度地提高吞吐量和效率，使用非阻塞I/O和异步事件
  • Vue
    • 学习Vue的数据驱动视图、模块化、组件化、单向数据流、双向绑定等，实现基本的操作，如弹出菜单、轮播图、折叠菜单、弹出、DOM节点的crud等
      • 组件通信
        • 父子组件通信
          • 使用props和emit实现数据传递和事件触发
        • 兄弟组件、跨级组件通信
          • 使用Vuex进行状态管理，或者使用事件总线(Event Bus)进行组件之间的通信
      • 路由管理
        • 使用Vue Router构建单页面应用程序(SPA)的前端路由
      • 状态管理
        • 使用Vuex进行集中式的状态管理
      • 表单数据绑定和验证
        • 使用v-model指令实现表单数据的双向绑定，使用表单验证库进行表单验证
      • 过渡和动画
        • 使用过渡类名、过渡钩子函数以及Vue.js的过渡组件实现各种动画效果
      • 自定义指令
        • 创建自定义指令，用于在DOM元素上添加特定的行为和功能
      • 混入(Mixins)
        • 使用混入在多个组件中共享代码和逻辑
      • 服务器端渲染
        • 配置和使用Vue.js的服务器端渲染
      • Render函数
        • 使用Render函数生成组件的虚拟DOM树，实现更高级的组件渲染逻辑
      • 自定义过滤器
        • 创建全局和局部的自定义过滤器，对数据进行处理和展示
      • 插件开发
        • 编写和使用Vue.js插件，为应用程序提供更多的功能和便利
      • 异步组件
        • 使用动态组件和异步组件，使应用程序更灵活和高效
      • TypeScript集成
        • 将TypeScript集成到Vue.js中，进行类型检查和更好的开发体验
      • 性能优化
        • 学习如何识别和解决性能瓶颈，使用Vue.js提供的优化技巧
      • 单元测试和端到端测试
        • 使用单元测试框架和端到端测试工具来测试Vue.js应用程序的各个方面
• 多终端开发
  • Web-App
    • 学习H5新特性和触屏事件和设备兼容性问题
      • 多终端开发
        • HTML5和CSS3开发基础与应用
          • HTML5简介，HTML5新增元素，文档结构元素、文本格式化元素、页面增强元素、多媒体元素，表单控件新增属性
          • CSS3新增选择器，兄弟选择器、属性选择器、伪类选择器、伪元素选择器，CSS3新增属性
        • JavaScript程序设计
          • 轻量级框架开发应用
      • Web-App
        • HTML5和CSS3开发基础与应用
          • HTML5简介，HTML5新增元素，文档结构元素、文本格式化元素、页面增强元素、多媒体元素，表单控件新增属性
          • CSS3新增选择器，兄弟选择器、属性选择器、伪类选择器、伪元素选择器，CSS3新增属性
        • JavaScript程序设计
          • 轻量级框架开发应用
      • H5新特性及设备兼容性
        • HTML5和CSS3开发基础与应用
          • HTML5简介，HTML5新增元素，文档结构元素、文本格式化元素、页面增强元素、多媒体元素，表单控件新增属性
          • CSS3新增选择器，兄弟选择器、属性选择器、伪类选择器、伪元素选择器，CSS3新增属性
        • JavaScript程序设计
          • 轻量级框架开发应用
  • 小程序
    • 学习微信小程序的开发，主要是微信团队基于前端基础来做的封装语法，主要的还是ES语法
      • 多终端开发
        • App开发
          • 主要集中在iOS和Android两大平台
          • iOS开发工具是Xcode，开发语言包括Objective-C和Swift
          • Android开发工具主要是Android Studio
          • 可以使用React Native进行跨平台移动应用开发
        • Web前端开发
          • 使用HTML，CSS，JavaScript进行开发
          • 可以使用Vue，React等框架
      • 微信小程序开发
        • 微信小程序是在HTML，CSS，JavaScript基础上做的二次封装
        • 开发者可以通过本地调试来学习小程序开发
        • 适合做毕业设计，课程设计作业
  • Hybrid-App
    • 学习Hybrid-App的开发，可以直接产出下载到终端的APP
      • 前端开发
        • 基础知识
          • HTML、CSS、JavaScript等前端技术
        • 实践
          • 使用上述技术进行网页设计和开发
      • Hybrid-App开发
        • 概念
          • Hybrid App是混合型的APP应用开发，结合了Native App和Web App的特点
        • 开发工具
          • PhoneGap等移动Hybrid应用开发框架
        • 实践
          • 使用HTML5进行界面布局，本地能力通过Native桥接为JS函数在HTML5页面中调用
      • 多终端应用
        • 优势
          • Hybrid App具有跨平台开发的优势，可以用较少的成本达到跨平台开发移动应用的目的
        • 实践
          • 根据需求规划，哪些业务是H5负责，哪些是原生端负责
• 主流技术框架
  • 学习前端主流技术框架，如React等
    • Angular
      • 由Misko Hevery等人于2009年创建，后被谷歌收购
      • 是一种用于创建单一应用程序界面的前端框架
      • 具有模块功能强大，拥有自定义命令等优点
    • React
      • Facebook出品，正式版推出于2013年
      • 采用声明范式，可以轻松描述应用
      • 通过对DOM的模拟，最大限度地减少与DOM的交互
    • Vue
      • 2014年推出，借鉴了Angular和React的特点
      • 是一套用于构建用户界面的渐进式JavaScript框架
      • 核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合