【前端基础总结】

Web前端参考手册

【前端引入】

【HTML】

【1】web服务端本质

• 软件开发架构
• HTTP协议
• HTML简介
• HTML注释语法
• HTML文档结构
• HTML标签分类
• head常用标签
• body常用标签
• 块级标签/行内标签

【2】HTML补充

• 表格标签
• form表单

【CSS】

【3】CSS

• CSS简介
• 注释语法
• 语法结构
• 引入方式
• 基本选择器
• 组合选择器
• 属性选择器

【4】CSS进阶

• 分组与嵌套
• 伪类选择器
• 伪元素选择器
• 选择器优先级
• CSS属性
• 盒子模型
• 浮动

【5】CSS终章

• 浮动带来的影响及解决办法
• 溢出属性
• 定位
• 浮动和定位是否脱离文档流
• z-index模态框
• 透明度opacity

【6】CSS案例

【JavaScript】

【1】JavaScript引入

• 什么是JavaScript
• 注释语法
• 引入方式
• 语法结构
• 变量
• 常量

【2】JavaScript初识

• 变量命名规范
• 数据类型
• 布尔类型
• null 和 undefined
• 对象
• 运算符
• 流程控制
• 函数

【3】JavaScript进阶

• 自定义对象
• 日期对象Date
• JSON对象
• 正则对象RegExp
• 正则的BUG
• math对象

【4】JavaScript之DOM/BOM

• 什么是DOM/BOM
• Window对象
• Window子对象
• 弹出框
• 定时器
• 查找标签
• 节点操作
• 获取值操作
• 属性操作
• 事件

【5】JavaScript之JS事件案例

• 开关灯
• input框获取/失去焦点
• 实时展示当前时间
• 省市联动

【阶段性复习】

• HTML
• CSS
• JavaScript

【jQuery】

【1】jQuery之引入

• jQuery简介
• 引入方法
• 基本语法
• 与原生JS比较
• 基本选择器
• 组合选择器
• 分组与嵌套
• 基本筛选器
• 属性筛选器
• 表单筛选器

【2】jQuery之进阶

• 操作标签

• 操作CSS

• 链式操作

• 位置操作

• 尺寸操作

• 文本操作

• 属性操作

• 针对checked的特殊方法(Prop方法)

• 文档处理

【3】jQuery之jQuery事件

• 绑定事件的两种方式
• 克隆事件
• 自定义模态框
• 左侧菜单
• 返回顶部
• 自定义登录校验
• input框实时监控
• hover事件
• 键盘按键监控事件

【4】jQuery之jQuery补充

• 组织标签后续执行
• 组织事件冒泡
• 事件委托
• 页面加载
• jQuery中的动画效果

【Bootstrap】

【1】Bootstrap框架简介

• bootstrap简介
• 引入方法
• 布局容器
• 栅格系统
• 栅格参数
• 列偏移
• 排版
• 表单标签
• 按钮组
• 图片
• 图标

【2】bootstrap参考网站总结

• 官方文档
• 图标样式
• 弹框样式

【补充】

【补充】 HTTP协议

【补充】 URL编码

• URL解码/编码简介
• URL基本组成
• Python实现URL编码/解码

【补充】动静态网页

• 静态网页
• 动态网页
• 动态网页制作

【补充】纯手撸Web框架

• 基于socket简单版本
• 借助 wsgiref 模块
• 分层架构

【补充】初识模版语法

• jinjia2模块