# Web腾讯课堂 ## Part 0：开启你的Web前端之旅 ### 课前介绍 * 前言 * Next学位是什么？ * 参加Next学位你需要准备的 * 专业导师的要求 * 来自工程师的建议 * 不断迭代的Web技术 * Web的历史 * 概要: 概要 ### 学习计划 * 写下你的学习计划 ## Part 1：HTML 基础 ### 认识HTML * 前端开发第一课 * 认识HTML * HTML基础结构 * 深入了解head元素 ### HTML元素 * HTML 元素 * HTML注释 * HTML属性 * 常用基本元素 * [资料] HTML字符实体 * 块级元素和行内元素 ### 嵌套及HTML树 * HTML嵌套 * 树的结构特点 * HTML 树 ### 专业级开发环境 * 一线工程师的开发环境 * 编辑器 * 第一个html文件 * 浏览器 * [资料] 常用浏览器 * [资料] 路径指南 ## Part 2：CSS 基础 ### CSS 基础 * CSS第零课 * 认识CSS * CSS语法 * [资料] CSS 注释 * HTML中引入CSS * CSS调试 ### 选择器 * CSS选择器概述 * 基本选择器 * 选择器分组 * 关系选择器 * 伪类选择器 * 伪元素选择器 * [资料] 选择器指南 ### 属性和值 * 属性和值 * 单位 * [资料] 进一步探讨单位 * 颜色 * 记不住不要怕，可以查！ ### CSS 盒子 * 盒模型 * 盒模型相关属性详解 * 元素的显示隐藏 * 背景 * 雪碧图 * 渐变背景——线性 * 渐变背景——径向 ### 样式计算 * 样式的继承与层叠 * 样式优先级 * CSS 重置 ### 锻造利器——编辑器 * 打造高效编辑器 * [资料] Sublime 个性化配置 * [资料] Sublime 快捷键 * [资料] Sublime 安装插件 * [资料] Sublime 常用插件 * [资料] Sublime 定制主题 ## Part 3：HTML / CSS ### CSS布局 * HTML / CSS第零课 * CSS 布局简介 * HTML 语义化 * [资料] 深入理解 HTML 语义 * [资料] 让 IE 8 支持 HTML 5 新标签 * 显示类型—display * [资料] 视觉格式化模型 * [资料] 深入了解 inline-block * 元素浮动——float * [资料] 清除浮动详解 * float 布局 * 网格布局系统 * 元素位置——position * 元素层级——z-index * [资料] 深入了解 z-index * flexbox 基本概念 * flex container 相关属性 * flex item 相关属性 * flexbox 属性汇总 * flexbox 应用场景分析 * [资料] flexbox 剩余空间分配规则 * [资料] grids 布局系统 * [资料] 浏览器如何渲染 HTML & CSS * [资料] 重排与重绘 ### CSS动画 * 让人眼前一亮的动画 * CSS 动画简介 * transition 动画 * [资料] 动画必备属性 transform * 缓动函数 * animation 动画 * animation-fill-mode 解析 * 关键帧语法解析 * transiton 动画和 animation 动画的异同 * [资料] 常见 CSS 动画库 * [资料] 动画性能优化 ### 响应式 * 伴随着时代的响应式设计 * 响应式简介 * viewport * [资料] retina 显示屏 * 媒体查询（media queries） * 响应式布局 * 响应式图片 * [资料] 响应式资源参考 * [资料] 常见 CSS 框架 ### CSS预处理 * 预处理简介 * 嵌套 * 变量 * mixin * 循环 * [资料] Sass 资源参考 ## Part 4：JS 基础 ### JavaScript 语言基础 * JavaScript 引言 * 认识 JavaScript * JavaScript 引入 * 注释 * [资料] JSDoc 注释规范 * 变量 * [资料] 关键字和保留字 * 数据类型引言 * 数据类型简介 * Number 类型 * String 类型 * [资料] Number 类型与 String 类型之间的转换 * Boolean 类型 * Null 和 Undefined 类型 * Object 类型 * 数组简介 * 数组的简单方法 * [资料] 数组的常用方法 * 函数 * [资料] 函数表达式和函数声明的区别 * 作用域 * 算术运算符 * 赋值运算符 * 比较运算符 * 逻辑运算符 ### 流程控制 * 流程控制简介 * if 语句 * 三元运算符 * switch 语句 * 循环引言 * while 和 do-while 语句 * for 语句 * break 和 continue 语句 * for-in 语句 ### BOM * BOM 和 DOM * BOM 简介 * window 对象 * location 对象 * navigator 对象 * history 对象 ### DOM * DOM 简介 * DOM 节点 * 常用节点类型 * 常用节点类型之 Node 接口 * 常用节点类型之 Document * 常用节点类型之 Element * 常用节点类型 之 Text * DOM 查找 * DOM 新增和删除 * 新增 DOM 示例 * 使用 fragment 新增 DOM * 删除 DOM 示例 * property 和 attribute * DOM 修改样式 * DOM 修改内容 * DOM 遍历 * DOM 遍历示例 ### 事件 * 事件简介 * 事件模型 * 事件处理程序和事件对象 * [资料] 事件兼容性初探 * 事件类型 * [资料] 键盘事件 keypres ### jQuery 简单教程 * jQuery 简介 * 引入 jQuery * jQuery 中的 $ * 选择器 * 遍历 DOM 元素 * 添加和移除 DOM 元素 * jQuery 事件监听 * [资料] 事件代理 * [资料] jQuery 隐式迭代和链式调用 * jQuery 体系和文档 ## Part 5：JS 进阶 ### 创建对象 * 我们要开发游戏 * 对象和实例 * 引言 * 工厂模式 * 再说说函数 * 函数的 arguments * 函数的 this * 函数的方法 * 函数的属性 * 函数是 first class * 闭包 closure * 构造函数 * 构造函数的不足之处 * 原型 prototype * 原型详解 * 原型、构造函数和实例 * 共享的缺陷 * 构造函数结合原型 * [资料] 经典的面向对象 ### 继承 * 站在巨人的肩膀上 * 引言 * 什么是继承 * 原型链 * 原型链继承的不足 * 借用构造函数继承 * 组合继承 * 组合继承的不足 * 最佳实践 * [资料] ES6 中的继承 * Node 和 Element * 面向对象 ### canvas入门 * 每个程序员心里都有个游戏梦 * 画图利器 Canvas * 认识 Canvas 元素 * 矩形 * 线条 * [资料] 绘制圆弧 * 文本 * 给图形上色 * 修改线宽 * 擦除 Canvas ### Canvas进阶 * 加载图像 * [资料] 图像裁剪 * [资料] 认识 requestAnimationFrame * JS 里的动画 * 动画循环 * [资料] 键盘事件处理 * [资料] 碰撞检测 * [资料] 独自开启 Canvas 的 ## Part 6：性能与工程 ### 网络通路简介 * 收拾心情继续前进 * 网络通路 * 从输入地址到返回请求 * 网络体系结构 * 分组 * TCP * HTTP * HTTP 的报文结构 * [资料] 聊聊常见的状态码 * 浏览器的缓存 * 浏览器缓存相关的头字段 * 浏览器缓存的逻辑流程 * DNS * 不是结尾的结尾 ### 浏览器渲染简述 * 关于浏览器我们理应想的更多 * 浏览器和渲染引擎 * HTML 和 DOM 树构建 * 渲染过程概述 * DOM 树和渲染树 * 重排与重绘 * 从输入地址到页面渲染 ### 性能 * 性能比你想象的重要 * 为什么要关注性能？ * window.performance * [资料] performance 详解 * 性能衡量指标 * [资料] Date 类型，你得知道这些 * 白屏时间 * 首屏时间 * [资料] 业务中如何计算白屏和首屏时间 * 使用 network 分析页面 * 优化手段 * 减少请求数 * 减少资源体积 * 提高网络传输 * [资料] 对于 CDN 的疑问，都在这 ### nodejs简介 * Node 引言 * Node 安装 * NPM * 命令行工具 * 运行 Node.js 代码 ### 模块化 * 走进模块 * 模块引言 * 命名冲突和变量污染 * 命名空间 * 自执行函数实现模块 * [资料] 立即执行函数表达式 IIFE 详解 * 模块依赖 * 模块化规范 * 一切源自 CommonJS * AMD & RequireJs * [资料] CMD 和 SeaJs * [资料] ES6 模块标准 * r.js * 新时代模块化管理 ### 工程化 * 工程化的必然性 * 构建 * 常见构建工具对比 * webpack 安装 * webpack 简单使用 * webpack 配置文件 * webpack loader * webpack plugin * [资料] webpack html 模板插件 * webpack 自动刷新 ## Part 7：JS 应用开发 ### 正则表达式 * 昂首阔步，继续往前 * 正则是思维方式 * 一道面试题 * 什么是正则 * 基本语法 * 基本语法实战 * RegExp 对象 * flags * 重复（量词） * 重复（量词）实战 * 分组与捕获 * 引用和反向引用 * 贪婪匹配和惰性匹配 * 正向前瞻和负向前瞻 * 正向前瞻和负向前瞻实战 * String 对象 * 解题 ### Ajax * 终于到了 Ajax * Ajax 的威力 * 需要一个本地服务器 * XHR * [资料] JSON * [资料] jqXHR * 参数传递 * 同源策略 * CORS * JSONP * iframe 和 window.name * 借助 iframe 跨域 * 借助 iframe 跨域实战 ### 设计模式 * 设计模式 * 什么是模式 * 反模式 * 单例模式 * 适配器模式 * 装饰器模式 * [资料] ES7 decorator * 观察者模式 * MVC 模式 * MVC 模式实践 * MVVM 模式 * MVVM 模式实践 * [资料] 双向绑定实现原理 * 设计模式结语 ### React * React * React 简介 * 搭建React 开发环境 * JSX 函数与 render 函数 * 组件化 * 事件绑定 * 列表渲染 * props * 组件间通信 * refs 和 DOM * 生命周期 * [资料] React 体系 ## Part 8：项目中的测试 ### 基本概念 * 总是被忽略的测试 * 测试没那么神秘 * 断言 * 测试框架的起源 * 测试框架的结局 * TDD ### Jest * 流行的几个框架 * Jest 入门 * Jest 基本概念梳理 * Jest 配置 * Jest Matchers * 测试 DOM * 测试 DOM 原理 * 测试 Tab 组件 * 测试异步流程 * Jest Mocks * Jest Mocks 实战 * 测试 React 组件入门 * 代码覆盖率 * 代码覆盖率实战 * 因为测试，所以专业 ## Part 9：安全攻防战 > 笔记1 > 笔记2 ### Cookie * cookie 简介 * js 操作 cookie * js cookie 操作实战 * 使用 cookie 保存用户信息 * cookie 实现登录演示 ### XSS * 一个暗流涌动的世界 * web 安全 * 标志性的微博事件 * 演示项目说明 * XSS 简介 * 反射型 XSS * 存储型 XSS * DOM Based 型 XSS * XSS payload 和危害 * XSS 防御 - httpOnly * [资料] Web 相关编码 * XSS 防御 - 输入检查 * XSS 防御 - 输出检查 ### CSRF * cover 代码被删除事件 * 一个转账攻击 * CSRF 基本原理 * CSRF 防御 * CSRF 防御实操 * XSS 与 CSRF 的结合 * XSS 蠕虫 * XSS 蠕虫演示 ### 更多安全 * 闹事的 DDOS * [资料] DDOS 防范 * 运营商HTTP劫持 * HTTPS 简介 * HTTPS 原理 * [资料] 更多安全内容 ## Part 10：面经大放送 > 2018-06-12完成 ### [资料] jero 的面试经历 ### 前端就业市场分析 ### 积累经验，打造硬实力 ### 制作一份好的简历 ### 面试官如何出题 ### 如何应对强势的面试官 ### 面试也看缘分，要相信自己 ### [资料] 面试常考知识点 ### [资料] Top15 问题 ## 概要: 2018-06-12完成 *XMind: ZEN - Trial Version*