导图社区 前端基础核心知识
前端基础核心知识，该思维导图是专门为前端入门学习的朋友搭建的一个体系的知识框架，进行规律性的学习和总结、回顾。
社区模板帮助中心，点此进入>>
互联网9大思维
安全教育的重要性
组织架构-单商户商城webAPP 思维导图。
个人日常活动安排思维导图
域控上线
西游记主要人物性格分析
17种头脑风暴法
python思维导图
css
CSS
前端基础核心知识
HTML
div & span
h1-h6
a
属性
href
title
img
src
alt
列表
有序列表
ul
li
无序列表
ol
buttom
引入静态资源
link
script
结构类
header
footer
article
aside
section
表格相关
form
input
type
text
radio
checkbox
name
disable
redonly
textarea
select
DocType
引入方式
style
选择器
常见选择器
基础选择器
id
#id
类名
.className
标签
div
通用选择器
*
属性选择器
完全匹配
[type="text"]
属性开头
[class^="a"]
属性结尾
[href=$"doc"]
包含
[class*="-is-"]
组合
祖先
.parent.child
父子
.parent>.child
后一个
.a+.b
所有兄弟
.a~.b
同时满足
.a.b
伪类
移动上去
:hover
获得焦点
:focus
第一个
:first-child
最后一个
:last-child
第n个
:nth-child(1)
:nth-child(2)
:nth-child(2n+1)
第一个类型
:first-of-type
最后一个类型
:last-of-type
伪元素
::before
::after
优先级
解析规则
从右往左
样式规则
盒模型相关
box-sizing
值
content-box
border-box
display
block
inline
inline-block
flex
inline-flex
margin
10px 20px 30px 40px
10px
10px 20px
10px 30px 20px
auto
padding
width相关
width
min-width
max-height
height相关
height
max-width
flex相关
position相关
position
static
relative
absolute
fixed
sticky
top，bottom，left，right
z-index
边框
border
border-radius
outline
背景
background
background-repeat
background-position
background-color
background-size
字体
font
font-size
font-weight
color
font-style
文字
text-align
text-decoration
underline
显示
opacity
visible
效果
transform
渐变
动画
单位
大小
px
rem
vw
vh
颜色
#abcdef
#abc
white
rgb
rgba
布局
盒模型
哪些盒模型
BFC
IFC
Flex布局
水平或垂直方向
靠开始方向对齐
居中对象
靠结束方向对齐
flex-grow
Grid布局
定位布局
层叠上下文
响应式
viewport
媒体查询
rem + js
JavaScript
变量
定义
var
let
const
变量提升
求值过程
作用域
函数作用域
块作用域
流程控制
条件
if
假值
false
null 和 undefined
0
空字符串
switch
case
default
break
循环
while
continue
do while
数据类型
布尔值
转化成布尔值
!!
数字
方法
工具方法 Math
Math.abs
Math.round
Math.ceil
Math.floor
Math.random
浮点数精度
字符串
改
连接
+
concat
replace
spilt
查
includes
indexOf
substr
模板字符串
`${firstName}${lastName}`
数组
创建
[]
遍历
forEach
修改
splice
pop
push
shift
unshift
查询
find
findindex
filter
map
some
every
对象
获取属性
obj.a
obj[xx]
设置属性
obj.a = 3
for in
Object.keys
Object.value
合并
{...obj1,...obj2}
闭包
柯里化
场景
代码复用：一步步设值的过程
性能优化
缓存
延迟计算
继承
基于原型的继承
基于class的继承
this
改变 this
bind
call & apply
异步
实现方式
Promise
状态值
pedding
resolve
reject
多个串行
链式写法，返回 Promise 对象
多个并行
Promise.all
竞争（一个成功，其他取消）
Promise.race
Generator
async/await
setTimeout & setlnterval
宏任务 & 微任务
错误处理
try/catch
error 事件
...
内存泄露
网络
http
websocket
cookie
接口跨域
iframe 跨域
BOM
浏览器信息
ua
系统
location
存储
web
localStorge
sessionStorge
value
过期事件
domain
path
httpOnly
DOM
元素
新增
插入
插入子元素
元素之前 & 元素之后
document.querySelector
document.querySelectorAll
删除
获取
设置
样式
计算出来的样式
事件
事件模型
冒泡
捕获
事件类型
鼠标事件
click
dbclick
mousemove
键盘事件
页面生命周期
事件对象
事件冒泡
会冒泡的事件
阻止冒泡
事件的默认行为
点击提交按钮提交表单
组织事件的默认行为
