Web前端知识点总结(持续更新中...)
HTML
学习HTML 排版、媒体、链接 等基础标签，完成 基础网页 的开发
1. 排版标签：
• 标题h系列、段落p、换行br、水平线hr
2. 文本格式化标签：
• 加粗strong、下划线ins、倾斜em、删除线del
3. 图片标签：
• img标签 + src属性 + alt属性 + title属性 + width属性 + height属性
4. 路径：
• 相对路径：同级目录 + 下级目录 + 上级目录
5. 音频标签、视频标签：
• audio标签、 video标签 + src属性 + controls属性
6. 链接标签：
• a标签 + href属性 + target属性
能够使用 表单相关标签和属性，实现网页中表单类网页结构搭建
1. input系列标签
( value属性是给button命名)
(单选功能默认选中 并且提交需要name属性)
常用的属性
placeholder 提示用户输入的文本类型
checked 默认选中
select下拉菜单标签( option属性就是下拉的每个内容 selected下拉默认选中)
Textarea 文本域标签 ( cols文本域可见宽度 rows本文与可见行数 )
lable 标签 可以使单选框点字也可以选中 需要写在lable里面
2. button按钮标签
3. select下拉菜单标签
4. textarea文本域标签
5. label标签
包裹单选框实现点文字选中
有语义的布局标签（了解）
列表标签
无序列表
有序列表
自定义列表
表格标签
标题与表头
单元格合并
常见字符实体
HTML的空格合并现象
如果在html代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格
场景：在网页中展示特殊符号效果时，需要使用字符实体替代
文档类型声明 告诉浏览器网页的HTML版本
标识网页使用的语言 en代表英文
Utf-8 代表的是网页的编码
css
CSS引入方式
基础选择器
字体和文本样式
字体样式和文本样式
字体样式
字体大小: font-size (取值px)
字体粗细: font-weight (取值400正常 取值700 加粗)
字体样式: font-style (em 斜体 i 也是斜体 italic倾斜)
字体类型: font-family ( 宋体)
字体类型: font属性连写(复合属性)
文本样式
文本缩进: text-indent (取值em或 px 一般用em 一个字为1em)
文本水平对齐: text-align (取值 左对齐:left 右对齐:right 居中对齐:center)
文本修饰a标签: text-decoration (underine 下划线 line-through 删除线 none去掉)
标签水平居中: margin: 0 auto (标签水平居中)
line-height 行高
让单行文字垂直居中可以设置line-height:文字父元素高度
网页精准布局的时候,会设置line-height: 1 取消上下的间距
选择器进阶
后代选择器: 空格 (所有的孩子)
div p {
color:red
}
子代选择器: > (只选中孩子,不会选孙子)
div > a{
color:red
}
并集选择器: , (多组的标签 设置相同,选择多个标签,设置不同的样式)
P , h1 , div ,span {
color:red
}
交集选择器: 紧挨着
p.box{
color:red
}
伪类选择器: :hover
a:hover{
color:red
}
背景的相关属性
背景颜色: background-color (bgc)
背景图片: background-image (bgi)
背景平铺: background-repeat (bgr) [取值有:repeat 默认值 水平垂直都平铺 no-repeat 不平铺 repeat-x X轴平铺 repeat-Y Y轴平铺 ]
背景位置: background-position (bgp) (水平方向位置,垂直方向位置)
背景图片大小: background-size: 宽度, 高度 取值:[1.数字+px 2.百分比 3.contain背景图片比例缩放 4. cover 覆盖,将背景图片等比例缩放 填满盒子 ]
背景相关属性连写: 这几个属性连着写
元素的显示模式
块级元素:宽度是父元素的宽度,高度内容撑开,独占一行,可以设置宽高.例div, p, h
行内元素: 内容撑开,一行显示多个,不可以设置宽高. 例: a, span, b ,u ,i
行内块元素: 一行显示多个 可以设置宽高 例:input button select
显示模式转换
display: block 转换成块级元素
display: inine-block 转换成行内块元素
display:inine 转换成行内元素
HTML嵌套规范
块级元素一般作为大容器 可以嵌套文本 块级元素 行内元素 行内块等
但是 p 标签不可嵌套 div p h 块级元素
a标签可以嵌套任意元素
但是不能嵌套a 标签
css优先级
CSS 三大特性: 继承性 层叠性 优先级
优先级的排列: 继承 < 通配符 < 标签选择器 < 类选择器< id选择器 < 行内样式 < !important
!important写在属性的后面 分号前面
!important不能提升继承的优先级 只要是继承优先级最低
实际开发不建议使用!important
盒子模型border
border-width 边框粗细
border-style 边框样式 实线solid 虚线dashed 点线dotted
border-color 边框颜色 颜色取值
复合属性: border: 1px solid #000
1.加了border的盒子会把盒子模型变大 需要使用css3的特性 內减 box-sizing : border-box
2.清除默认的内外边距
* {
margin: 0
padding: 0
}
去掉列表小圆点
ul {
list-style: none
}
盒子模型的塌陷问题
场景 :互相嵌套的两个块级元素 子元素的margin-top会作用在父元素上
结果 :导致父元素一起往下移动
解决办法 :
1.给父元素设置overflow-hidden(解决外边距塌陷：父级元素内部有子元素，如果给子元素添加margin-top样式，那么父级元素也会跟着下来，造成外边距塌陷。)
2.转成行内块元素
3.设置浮动float-left
4.给父元素添加boeder属性
5. 调用clearfix
行内标签
如果想要通过margin或 padding 改变行内标签的垂直位置无法生效
行内标签的margin-top和bottom不生效
padding-top 或bottom不生效
就需要加行高了 line-height: 100px
哪些情况需要清除浮动？
父级无高度（带来高度塌陷问题）；
子盒子浮动了（因为脱标问题）；
影响下面的布局（因为脱标问题）；
什么是高度塌陷？
父元素高度自适应，子元素添加浮动后，造成父元素高度为0，称为高度塌陷问题。
为什么会脱标？
因为所有元素本都是在标准流里布局，即块元素独占一行、行内元素从左到右排列；被添加浮动效果后，不再属于标准流且会脱离标准流（脱标），此元素的位置将不再保留。此时，本被布局在下面的块元素会往上移动，排在右边的行内元素会向左边移动，导致整个布局发生改变。
怎么解决问题？ 清除浮动即可！
方案一：给父元素设定高度；
做法：在属性中直接给出宽度、高度；
优点：简单快捷；
缺点：不便于后期增加内容后修改，不灵活；
方案二：给父元素添加overflow
做法：在父元素属性中添加overflow，属性设置为：hidden/auto 都可；
优点：简单快捷，可以在后面添加内容；
缺点：当子元素有定位属性且超出了盒子范围内时，盒子以外的部分会无法显示；
方案三：额外标签法（隔墙法）clear:both
做法：在子元素的末尾添加一个空的 div ，并添加以下属性；
优点：简单快捷，兼容性极强（所有浏览器都支持）且添加浮动的溢出部分可以正常显示；
缺点：容易造成代码冗余，只适用于块级元素；
- 方案四：伪元素清除浮动
做法：在父元素添加伪元素，添加内容如下：
优点：不会造成代码冗余,需要时引用即可，推荐使用；
- 方案五：双伪元素清除浮动
做法：给父元素添加以下代码；
优点：不会造成代码冗余,需要时引用即可，推荐使用；
css布局
结构伪类选择器
- 作用: 根据元素在HTML中的结构关系查找元素
- 优势: 减少对HTML中类的依赖 有利于保持代码的整洁
- 场景: 用于查找父级选择器的子元素
E:first-child{} 匹配父元素的第一个子元素 并且是E 元素
E:last-child{} 匹配父元素的最后一个子元素 并且是E 元素
E:nth-child(n){} 匹配父元素第N个元素 并且是E 元素
E:nth-last-child(n){} 匹配父元素中倒数第N个子元素 并且是E 元素
( ) 查找偶数 2n 查找奇数 2n+1 前五个 -n +5 第五个往后 n+5
伪元素
伪元素: 非主体内容可以使用伪元素
::before 在父元素内容最前面添加一个伪元素
::after 在父元素内容最后添加一个伪元素
Css 的书写顺序 定位>浮动>display>margin>padding
伪元素常用于给在某个元素之前添加图片，例如想在某个dom之前添加图片，却不想在html结构写img标签，就可以在style样式中使用::before添加伪元素。
标准流: 就是标签默认的排列规则
浮动
浏览器解析行内块或行内标签的时候,如果标签换行了会产生一定的间距
- 去除回车
- 使用浮动
浮动特点 : 一行可以显示多个 可以设置宽高
清除浮动影响: 如果子元素浮动了,此时子元素不能撑开标准流的块级元素
原因: 子元素浮动脱标-->不占位置
目的: 需要父元素有高度,从而不影响其他网页元素的布局
清除浮动
情况: 父子级标签,子级浮动,父级没有高度,后面的标准流盒子会受影响显示到上面(脱标 )
处理:
1.直接加高度
2. 父级最后添加一个块级标签设置css属性 clear: both
3. 单伪元素去除浮动
4. 双伪元素清除(项目使用给标签添加)
5. overflow: hidden(给父级添加)
清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题(脱标)
伪元素清除法
什么是塌陷
场景:互相嵌套的块级元素,子元素的margin-top会作用在父元素上
结果:导致父元素一起往下移动
解决办法 :
1.给父元素设置overflow-hidden
2.转换成行内块元素
3.设置浮动
定位
项目中会遇到user头像文字不居中: 使用vertical - align : middle (图文垂直居中)
定位常见的类型
注意同时设置left right 执行left 同时设置top bottom执行top
让一个盒子居中
绝对定位的盒子要想水平垂直居中 就需要使用left 50% top50% 盒子向左移动盒子宽度的一半
标准流的话直接 nargin: 0 auto
就业班会使用位移(transform : translate(-50%, -50%))
绝对定位到底相对于谁进行偏移
默认情况下,定位的盒子,显示后来者居上 z-index:整数 取值越大 显示的顺序越靠上
层级属性 z-index:1 必须配合定位才生效
绝对定位的盒子显示模式具备行内块的特点 加宽加高生效 没有宽度没有内容的话 盒子的尺寸就是0 不显示
溢出显示效果: overflow: hidden溢出部分隐藏 scroll 无论是否溢出都显示滚动条 auto 根据是否溢出 自动显示或隐藏滚动条
隐藏效果: display:none(不占位置)
元素透明: opacity 属性0-1 1: 表示完全不透明 0: 表示完全透明
设置鼠标光标在元素上显示的形式
光标类型: cursor 常见的属性值: default 默认值 箭头 pointer(小手的形状) text (工字形) move(十字光标 提示用户可以移动)
边框圆角: border-radius 常见的取值是百分比或者px
精灵图
精灵图的使用步骤
精灵图:使用的是背景图 创建一个盒子 将精灵图设置为盒子的背景
第一步 插入背景图
第二部 使用属性分别取负值 background-poslition: x , y 单位px
过渡属性 transition: all 3s 配合hover属性使用
盒子阴影
文字阴影
过渡 只有添加过渡才有动画效果
头部文件
SEO搜索引擎优化
作用:让自己的网站在引擎上的排名靠前
提升SEO 的常见方法: 竞价排名 网页html后缀 标签语义化
项目结构
iconfont的使用
没有的相关icon字体图标处理
平面转换
需要配合transition: all 2s 使用 谁变话加谁身上
位移
Translate 属性实现位移的效果
语法: transform : translate(水平移动,垂直移动) 取值正整数 或者百分比
如果translate只写了一个值 表示X轴方向移动
旋转
属性: roate transfrom : roate (360deg) 取值正负
取值为正, 则顺时针旋转 Ø 取值为负, 则逆时针旋转
多重转换: 案例轮胎
使用多重转换 必须先写位移再写旋转
缩放
transfrom: scale(X轴缩放的倍数 , Y轴缩放的倍数)
transfrom: scale(缩放的倍数) ---工作用 等比例缩放 取值大于1 为放大 小于1 为缩小
透明度的属性: opacity: 0完全全透明 1 不透明 取小数就是朦胧状态
渐变
background-image : liner=gradient(
transparent,
rgba(0,0,0, .6)
);
空键转换 和平面转换一样使用属性 transfrom
空间位移
transfrom:translate3d(x , y, z) 取值百分比或者像素单位
transfrom:translateX()
transfrom:translateY()
transfrom:translateX()
注意: 配和z轴的效果要想看到 需要配合perspective属性 高属性添加到父元素
空间旋转
transform: rotateZ(值)
transfrom: rotateX(值)
transfrom: rotateY(值)
动画
使用animation属性
先定义动画: @keyfremes change{
From{
Width:200px
}
To{
Width:600px
}
}
父级使用动画: annimation : change 1s
移动端布局
对于PC端的开发 如果要兼容ie低版本 不适合用flex布局 如果使用移动端 可以随意使用
浏览器meta参数
Flex布局
center 主轴居中
space-around 分在盒子两侧(间距添加在子级两侧)
space-between 分在相邻盒子之间 两边贴边对齐
space-evenly 容器之间 所有的地方间距相等
侧轴对齐方式: align - items 取值
center 居中
stretch默认值拉伸铺满
改变主轴方向: flex-direction: cloum
弹性盒子要想换行排 需要使用属性:flex - wrap:wrap 默认属性不换行
调节对齐方式:
align - content : center
align - content: space-around
align-content: space-between
Flex:1 占用父级剩余尺寸的份数
单行文字溢出 显示省略号
text-overflow: ellipsis
white-space: nowrap
overflow: hidden
移动适配
Less
less语法
定义less变量
less禁止导出
vw / vh
使用vw 宽68px 高29px使用vw书写 vw(是除以宽度) vh(是除以高度)
js基础
var、let、const 之间的区别（必会）
区别
var 声明变量可以重复声明，而 let 不可以重复声明
var 是不受限于块级的，而 let 是受限于块级
var 可以在声明的上面访问变量，而 let 有暂存死区，在声明的上面访问变量会报错
const 声明之后必须赋值，否则会报错
const 定义不可变的量，改变了就会报错
变量命名规则与规范
转换为数字型
前面加" + "
转换为字符型
答案: 7
比较运算符
逻辑运算符
&& 逻辑与 一假则假 全真才真 前面是假的后面不执行
|| 逻辑货 一真则真 前面是真的后面不执行
! 逻辑非 取反
优先级 先算 && 再算 || ! 优先级最高
有五个值当 false 来看: false 0 ‘ ’ undefined null
switch语句
三元运算符
循环退出
能说出continue和break的区别
数组的操作Array
arr = [123,432,123,453,63]
添加:
Arr. push(333) //数组的最后添加
Arr.unshift(333) //数组的最前面添加
删除:
arr.pop 删除最后一个
Arr.shift 删除第一个
Arr.splice(起始位置,删除几个)
函数的作用域
变量的作用域
立即执行函数
内置对象 Math
随机数
Web API 基本认知
什么是DOM
DOM树
为什么不建议在JS中使用innerHTML？
通过innerHTML修改内容，每次都会刷新，因此很慢。在innerHTML中没有验证的机会，因此更容易在文档中插入错误代码，使网页不稳定。
定时器-间歇函数
事件
环境对象
排他思想
DOM节点
查找节点
增加节点
实例化
获取当前系统时间 toLocalString()
时间戳
重绘和回流
获取事件对象
事件流
阻止事件流动
阻止默认行为
事件委托
scroll家族
offset家族
BOM
延迟函数
JS 执行机制
同步和异步
navigator对象
本地存储
作用域
函数作用域
块作用域
作用域链
闭包
闭包就是一个作用域有权访问另外一个作用域的局部变量
闭包的优点: 延长外部函数局部变量的生命周期
闭包的缺点: 优点也是缺点,本应该销毁的变量 因为闭包的原因没有被销毁 长期存在 会出现内存泄露
JavaScript 中的作用域、预解析与变量声明提升？
预解析过程：
- 把变量的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值
2.把函数的声明提升到当前作用域的最前面，只会提升声明，不会提升调用
3.先提升 var，在提升 function
变量提升：
定义变量的时候，变量的声明会被提升到作用域的最上面，变量的赋值不会提升
函数提升：JavaScript 解析器首先会把当前作用域的函数声明提前到整个作用域的最前面
剩余参数
箭头函数
解构赋值
这样写很繁琐，那么我们有没办法既声明，又赋值，更优雅的写法呢？肯定是有的，那就是解构赋值，解构赋值，简单理解就是等号的左边和右边相等。
数组解构赋值只可以用[] 对象只可以用{}
扩展运算符
面试回答堆与栈的区别：
Array
String
jQuery
事件绑定
链式编程
这段代码中为.text这个标签绑定了2个事件，上一节使用的就是这样的写法，功能可以实现，但是有重复的部分。这部分内容如果用链式编程怎么写呢？ 
我们再绑一个事件，让他看起来更像练字，内容改变事件还记得怎么写吗？nice，change事件，直接在失去焦点后面用点语法写上去，里面也输出一些内容，内容改变。保存之后切换到浏览器测试一下，点进去，在点出来、哎呀，怎么change不触发呢？change事件的触发条件可不仅仅是失去焦点哦，内容要不要改变呀？对啦，需要改变的，我们这次写点内容。点进去，打字，点出来，怎么样没有任何问题吧，所以刚刚触发不了并不是我们语法写错了，而是没有满足触发条件 
内容操纵
首先测试赋值,我们使用html方法为box1赋值,内容就设置为黑马程序员,接下来用text方法为box2赋值,内容也写成黑马程序员,保存之后大伙觉着结果是否相同?对啦,肯定是一样的,因为这一次设置的内容中并没有标签.
接下来测试设置标签,我们传入一个a标签的文本进去,大伙觉着哪个方法会解析标签呢?nice,就是html方法.保存之后,1,2,3走你,和我们猜测的结果一样把!
计数器
样式操纵
属性操纵
操纵value
-查找方法
我们传入选择器bj，把他的背景色改成粉色,123走你，类名叫做的bj的li标签的背景色就改变啦！
接下来测试一下兄弟元素
所以调用siblings方法的时候获取到的是元素的兄弟，并不包含他自己哦
广州,我们传入他的类名,把他的背景色改了把，改成粉色.
操纵类名
事件进阶
账号和安全登录切换
事件参数
判断键盘按键 
阻止冒泡
节点 - 新增
ajax
jQuery中的Ajax
Get请求
Post
axios
同源策略
防抖和节流
HTTP请求消息
关于更多请求头字段的描述，可以查看 MDN 官方文档：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers
HTTP响应消息
关于更多响应头字段的描述，可以查看 MDN 官方文档：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers
HTTP响应状态码
完整的 HTTP 响应状态码，可以参考 MDN 官方文档 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status
ES6模块化与异步编程高级用法
EventLoop
宏任务和微任务
为什么要学习webpack
Vue基础
修改端口
处理eslint代码检查
单vue文件讲解
Vue基础-插值表达式
Vue指令-v-bind
Vue指令-v-on
Vue指令-v-on事件对象
Vue指令-v-on修饰符
更多修饰符: https://cn.vuejs.org/v2/guide/events.html
Vue指令-v-model修饰符
Vue指令-v-text和v-html
Vue指令-v-show和v-if
Vue指令-v-for
v-for更新监测
动态class
动态style
过滤器_定义使用
计算属性_computed
计算属性_完整写法
侦听器_watch
侦听器_深度侦听和立即执行
组件内的scoped是如何工作的?
父传子
子组件
父组件
父向子-配合循环
子传父
-EventBus
钩子函数
axios使用
axios使用_传参
axios使用-发布书籍
axios全局配置
$refs和$nextTick使用
Vue-异步更新DOM
使用下面解决
动态组件
组件缓存
组件激活和非激活
组件插槽
组件进阶 - 插槽默认内容
组件进阶 – 具名插槽
作用域插槽
自定义指令_注册
自定义指令_传值
Vue-Router
声明式导航
声明式导航 - 跳转传参
重定向和模式
路由 - 404
路由 - 模式设置
编程式导航
编程式导航 -跳转传参
声明式导航 – 类名区别
路由嵌套
全局前置守卫
移动端适配方案
移动端你们一般采用什么布局？移动端设计稿是多大的尺寸？
定宽布局
一般移动端设计稿是640或者750的尺寸
移动布局自适应不同屏幕的几种方式
（1）响应式布局
（2）100%布局（弹性布局）
（3）等比缩放布局（rem）
第一种：rem实现原理
rem是一个倍数单位，它是基于html的font-size的倍数。只要我们在不同的设备上设置一个合适的初始值，当设备发生变化font-size就会自动等比适配大小，从而在不同的设备上表现统一。
比如说：移动端设计稿一般会以750px进行交付，而手机实际像素可能是375px。那么一般我们会以设备宽度的1/10作为初试html的font-size大小，当然这个值是动态的，在不同设备上得到的值不同。
比如有的设备宽度是375px，那么html初始font-size就是37.5px，如果设备宽度是300px，那么font-size就是30px。 因为内容都是rem基于font-size的倍数，所以不同宽度的设备上都是等比显示的。
注意：这个font-size基数到底是不是设备的1/10是没有统一论调的，你可以用1/n任意定义。关键是理解rem适配的原理是元素等比缩放。
第二种： vw/vh方案
vw 是相对单位，1vw 表示屏幕宽度的 1%。需要缩放的元素采用vw，不需要的采用px。
具体实现方法与rem类似，至于转换问题也可以参考rem的插件形式。
第三种： 媒体监听
媒体监听通过@media实现。注意：媒体监听不是等比缩放！！！是同一块内容在不同设备上有合理的表现。
比如在PC端一行能同时展示4个元素块，而在移动端只能一行展示1个或者2个元素块(要不看不清)。
那么就可以通过监听媒体宽度，给元素设置不同的宽度，从而有合理的表现。
px rpx em rem vw
px: 绝对单位，页面按精确像素展示
rpx：小程序中的单位，在爱疯6中 1px=2rpx，整个页面有750rpx
em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。1em=16px
em特征：1、em值并不固定；2、em会继承父级元素的字体大小。
rem：相对单位，可理解为" root em "，相对根节点html的字体大小来计算，css3新加属性。假设html的字体为10px，那么1rem=10px。
vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%；100vw=相对于视窗宽度
Vant组件适配
两步
