前端知识框架总结分享
2022-10-26 17:42:44 0 举报AI智能生成
前端知识框架总结分享
作者其他创作
大纲/内容
注意
目前不考虑兼容性，请使用谷歌浏览器
代码编写规范
推荐使用小写元素名
关闭所有 HTML 元素
关闭空的 HTML 元素
使用小写属性名
HTML5 属性值可以不用引号，推荐使用引号
图片通常使用 alt 属性。 在图片不能显示时，它能替代图片显示。
HTML 注释
命名不要随意，见名知意。
为id或class命名时，多单词以“-”连接，如：demo-one
空格与缩进
HTML5
目标
文档类型
DOCTYPE
理解HTML文档流
head标签里面各种标签含义作用
meta
chartset
......
文档元数据
如：meta里的chartset等（chartset为元数据类型）
文档主体（重点内容）
文字形式
语义标签——用正确的标签做正确的事情，html语义化让页面的内容结构化，结构更清晰。准确使用语义标签，不要滥用
行内元素与块级元素的区别
空元素
嵌入内容
引入CSS的三种常用方式以及优先级
Linking（外部引用式）——link 与 @import的区别
Embedding（嵌入式）
Inline（内联式）
嵌入图片等
交互元素
表格
表单
表单元素
表单属性
Input类型
字符实体
拖放（JS阶段）
画布 与 SVG（JS阶段）
事件（JS阶段）
存储（JS阶段）
应用缓存（PHP阶段，JS阶段可以了解）
地理位置（JS阶段）
何时
14天
学习
实践
考核
如何
学习网站
菜鸟教程：http://www.runoob.com/
W3school ：http://www.w3school.com.cn/index.html
推荐网站：MDN Web文档 https://developer.mozilla.org/zh-CN/
考核例子：具有CSS3动画效果的静态网站(至少6个页面)
注：HTML5与CSS3 为同一阶段
CSS3
目标
语法规则
字体
Border
outline
display 与 visibility
选择器
id和class选择器
元素选择器
例：p, div
伪对象选择器（伪元素选择器）
例：:first-line
伪类选择器
例：a:hover, li:nth-child
属性选择器
例：a[rel = "external"]
关系选择器
后代选择器
子代选择器（子元素选择器）
相邻兄弟选择器
取值单位
长度
绝对长度：px
相对长度：em ,rem
颜色
颜色的几种表示方法
颜色名
十六进制
RGB
RGBA
HSL（了解）
HSLA（了解）
属性
用户界面
显示样式
颜色
背景
盒子模型
标准盒子模型(W3C盒子模型)
IE盒子模型
位置
定位（position）
static
fix
relative
absolute
附：css position基础 https://segmentfault.com/a/1190000003702416
浮动
产生浮动的原因
清除浮动的方法
z-index
属性
何时用
如何用
状态
变换
动画
过渡
打印（了解）
布局
flex布局（flexbox弹性盒子）—— 一维布局
Grid 布局(网格布局)——二维布局
常用布局
单列布局
多列布局
float+margin
position+margin
三栏布局
圣杯布局（float+position+负margin+padding）
双飞翼布局（float+负margin）
常用居中
水平居中
垂直居中
响应式布局
网状布局
多列
列表
表格
媒体查询
何时
14天
学习
实践
考核
如何
学习网站
菜鸟教程：http://www.runoob.com/
W3school ：http://www.w3school.com.cn/index.html
考核例子：具有CSS3动画效果的静态网站(至少6个页面)
推荐网站：MDN Web文档 https://developer.mozilla.org/zh-CN/
注：HTML5与CSS3 为同一阶段
JavaScript
目标
基础知识
数据类型
函数
JS作用域
正则表达式
对象
事件
鼠标事件
表单事件
事件处理/监听函数
窗口事件
Event对象
事件流
按键事件
客户端存储
web存储
json与xml
web SQL数据库 （了解）
cookie
DOM操作
DOM节点操作
样式操作
脚本化文档
附一篇个人博客：JS DOM操作及扩展 http://blog.csdn.net/qq_33430445/article/details/76977623
BOM
JavaScript特效
JS闭包
插件的使用（自己写个插件，最好自己封装一下）
Ajax（JQuery阶段，原生ajax也要学习）
何时
14天
学习
实践
考核
如何
推荐书籍：《JavaScript高级程序设计》/《JavaScript权威指南》（这两本书用来提高，也可作为新手入门）
学习网站：菜鸟教程或W3school
考核例子：具有JS动画效果的高质量静态网站
JQuery与BootStrap
目标
JQuery语法
Ajax与原生Ajax
BootStrap的使用
何时
3天
如何
JQuery：菜鸟教程或W3school
BootStrap：https://v4.bootcss.com/
Web安全
XSS、CSRF、Cookie劫持
传输安全
Oauth
服务器端常识
Linux
数据库
关系型数据库（MySql）
json数据库（MongoDB）
内存数据库（Redis）
Node
框架
应用场景
项目部署
pm2
Nginx
Docker+自动化
PHP
软件工程
需求分析
项目分解
代码测试
代码管理
bug追踪
敏捷开发
网络协议
HTTP
TCP/UDP
IP
编译原理
词法分析AST
代码生成
代码转换
设计模式
单例模式
装饰器模式
代理模式
观察者模式
发布订阅模式
算法、数据结构
数据结构
数组、字符串、队列、堆栈、链表
二叉树
图
算法
排序，搜索，遍历
贪婪算法
动态规划
自动化测试
单元测试
性能测试
安全测试
功能测试
多端应用
小程序
微信小程序（云开发）
支付宝小程序
头条小程序
百度小程序
App
React-Native
Weex
Flutter
多端融合
Uni-app
mpvue
Chameleon
Taro
工程化
webpack
loader
plugin
gulp
grunt
Jenkins
浏览器
渲染机制
dom树
CSSOM
render tree
缓存机制
输入url发生了什么
同源策略
图形学
小游戏
可视化
canvas（echarts）
svg（D3）
WebGL（three.js）
PS切图
TypeScript
React
高阶组件
组件化
Fiber
Hooks
生命周期
源码
全家桶
redux
React-router
SSR/Next.js
性能优化
雅虎军规
重绘回流
缓存
前端监控
性能监控
错误监控
Vue
组件化设计及通信
生命周期
源码
Vue全家桶
Vuex
Vue-router
SSR/Nuxt.js
CSS
盒模型
怪异盒模型
标准盒模型
CSS规范
CSS hack
BFC、IFC、FFC、GFC
CSS3 动画
CSS 分层
SMACSS<br>
BEM
SUIT
ACSS
ITCSS
CSS 矩阵
HTML
语义化标签
多媒体标签
JavaScript
数据类型及转换
面向对象
作用域闭包
异步
模块化
ES6
函数式编程
0 条评论
下一页
