HTML
行内元素块级元素空元素
行内元素：span img input...
块级元素: div footer header section p h1...h6 ...
空元素：br hr ...
元素之间的转换
<html>
<head>
<style>
div{
display:inline; //转换为行内元素 不独占一行，且不能设置宽高的
display:inline-block;//转换为行内块级元素 不独占一行 ，可以设置宽高
display:block;//转换为块级元素 独占一行，可以设置宽高
}
</style>
</head>
</html>
link和@import区别
区别一：link先有，后有@import （兼容性link比@import兼容）
区别二：加载顺序，浏览器先加载标签link后加载@import
<html>
<head>
<link>
<style>
@import "a.css";
</style>
</head>
</html>
标签之间的区别
title和h1的区别：
定义：
title：概括了网站信息，可以告诉搜索引擎或者用户关于这个网站的内容主题是什么
h1：文章主题内容，告诉搜索引擎我们网页内容最主要是什么
区别：
title是显示在网页的标题上，h1是显示在网页内容上
title比h1添加的重要对于seo的了解 （网站的logo都是用h1包裹的）
b与strong的区别：
定义：
b：实体标签，用来给文字加粗的
strong：逻辑标签，用来加强字符语气
区别：b标签只有加粗的样式，没有实际含义
strong表示标签内字符比较重要，用以强调
i与em的区别：
定义：
i：是一个实体标签，用来做文字倾斜的
em：是逻辑标签，用来强调文字内容的
区别：
i只是一个倾斜标签，没有实体含义 （i大多数用于字体图标上）
em表示标签内字符重要，用于强调 （em则用于专业术语上如医药、生物）
img中title和alt区别：
定义：
title：鼠标移入到图片显示的值
alt：图片无法加载显示的值
区别：
在seo的层面上，搜索引擎抓取不到图片的，所以前端在写img标签的时候，为了增加seo的效果，增强alt属性来描述图片的主题内容。
png、jpg、git这些图片格式什么时候用
定义：
png：无损压缩，尺寸体积要比jpg/jpen的大，适合做小图标
jpg：采用压缩算法，有一点失帧，比png体积小（用于中大型图片）
git：一般做动图的
webp：同时支持有损或无损压缩，相同质量的图片，webp具有更小的体积，兼容性不好
<html>
<head>
<style></style>
</head>
<body>
<img title="这是一张图片" alt="这是alt">
</body>
</html>
CSS
CSS盒子模型
css盒子模型有：标准盒子模型、IE盒子模型
css的盒子模型区别：
标准盒子模型：margin、border、padding、content
IE盒子模型：margin、content（border+padding+content）
如何转换盒子模型：
通过css来进行转盒子模型
*{
box-sizing:border-box;//IE盒子模型
box-sizing:content-box;//标准盒子模型
}
line-height和height的区别
line-height是每一行文字的高，如果文字换行则整个盒子高度会增大（行数*行高）
height是一个死值，就是这个盒子的高度
CSS选择器
CSS选择符：
通配（*）
id选择器（#）
类选择器（.）
标签选择器（div、p、sapn...）
相邻选择器（+ 下一个兄弟）
后代选择器（ul li）选中ul的所有li元素
子元素选择器（>）
属性选择器（div[background:red]）
*{
ul li + li{//这是排除第一个li元素，选择剩下的所有li元素
background:red;
}
}
CSS属性继承
文字系列：font-size、color、line-height、text-aling...
不可继承属性：border、padding、margin...
CSS优先级算法如何计算
优先级比较：@important>内联样式>id>class>标签>通配
CSS权重计算：
第一：内联样式style 权重值：1000
第二：id选择器 权重值：100
第三：类选择器 权重值：10
第四：标签&伪元素 权重值：1
第五：统配、>、+ 权重值：0
CSS画个三角形
用border来画
transparent :颜色透明
div{
width:0;
height:0;
border-left:100px solid #ccc;
border-right:100px solid transparent;
border-top:100px solid transparent;
border-bottom:100px solid transparent;
}
三角形在那哪个方向哪个方向就不透明
盒子垂直居中
<div class="container">
<div class="main"></div>
</div>
第一种方法：flex布局来实现
.container{
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height:300px;
border: 1px solid black;
}
.main{
background: red;
}
第二种方法：
.container{
position: relative;
width: 300px;
height:300px;
border: 1px solid black;
}
.main{
background: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
display有哪些值
none：隐藏元素
block:将元素转换为块元素
inline：将元素转换为内联元素
inline-block：建元素转换为行内块级元素
table：将元素用表格的形式来显示
BFC规范
BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响外面的元素
1.BFC：就是块级格式化上下文
2.BFC原则：如果一个元素具有BFC，那么内部元素在怎么弄，都不会影响外面的元素。
3.如何触发BFC：
float的值为非none
overflow的值为非visible
display的值为：inline-block、table-cell...
position的值为：absoute，fixed
清除浮动的方式
1.触发BFC来请除浮动（overflow:hidden）
2.多创建一个盒子，添加样式：clear:both;
3.通过伪元素来实现：after
div:after{
content:"";
display:block;
clear:both;
}
CSS定位
通过position属性来定位
static：没有定位
fixed：固定定位，相对于浏览器窗口进行定位
relative：相对于自身定位，不脱离文档流
absolute：相对于第一个有relative的父元素定位，脱离文档流
relative和absolute区别
1.relative不脱离文档流 ，absolute脱离文档流
2.relative相对于自身定位，absolute相对于第一个有relative的父元素
3.relative如果有left、right、top、bottom只有left、top存在
absolute如果有left、right、top、bottom都可以存在
双飞翼布局
定义：左右
<html>
<head>
<style>
*{
margin:0;
padding:0;
}
.container{
width:100vw;
height:100vh;
}
.container>div{
float:left;
}
.left{
margin-left:-100%;
width:200px;
height:100vh;
background:red;
}
.conter{
width:100%;
background:pink;
}
.right{
margin-left:-200px;
width:200px;
height:100vh;
background:blue;
}
</style>
</head>
<body>
<div class="container">
<div class="conter"> conter</div>
<div class="left"> left</div>
<div class="right"> right</div>
</div>
</body>
</html>
CSS reset
reset.css 是一个css文件，用来重置css样式
Normalize.css 为了增强跨浏览器渲染的一致性，重置css样式
CSS sprite
1.是什么
把多个小图标合并成一个大图片
2.优缺点
优点：减少了http请求的次数，提升了性能；
缺点：维护比较差（例如图片位置进行修改或者宽高进行修改）
display:none and visibility:hidden
display:none:是不占用位置的
visibility：hidden ；虽然隐藏了但是占用位置
opacity和rgba
共同性：实现透明效果
1.opacity 取值范围是0到1之间，0表示完全透明，1表示不透明
2.rgba r代表红色，g表示绿色，b表示蓝色，a也是0-1之间
区别：opacity会继承父元素的opacity属性，而RGBA设置的元素的后代元素不会继承不透明的属性
JavaScript
JS延迟加载
async defer
<script async type="" src="1.js"></script>
<script defer type="" src="1.js"></script>
defer:等html全部解析完成，才会加载js代码，顺序执行js脚本。
async：async是和html解析同步完成的，不是顺序执行js脚本，谁先加载完成谁先执行。
JS数据类型
基本类型：String、number、boolean、undefined、null、symbol、bigint
引用类型：object （array function object）
NaN 是一个数值类型 具体不知道 如 undefined+1 就是 NaN
null和undefined的区别
1.作者在设计js的时候先设计了null（最初设计js的时候借鉴了java）
2.null会被隐试转换为0，很不容易发现错误
3.先有null后有undefined。出来undefined是为了填补之前的错误
具体的区别：javascript的最初版本是这样区分的：null是一个表示“无”的对象（空对象指针），转为数值为0，undefined是一个表示“无”的原始值，转换为数值是NaN。
==和===区别
==：比较的是值
string==number||boolean||number||...都会隐式转换
通过valueOf转换（valueOf()方法通常由JavaScript在后台自动调用）
===：比较的是值和类型
JS微任务和宏任务
1.js是单线程的语言。
2.js代码执行流程：同步任务执行完==》事件循环
事件循环（微任务、宏任务）
同步的任务都执行完了，才会执行事件循环里面，进入事件循环：请求、定时器、事件...
微任务：promise.then
宏任务：setTimeout..
要执行宏任务的前提是清空了微任务。
setTimeout(function(){
console.log(5)
},1000)
new Promose((reslove)=>{
console.log(2)
reslove()
}).then(()=>{
console.log(3)
}).then(()=>{
console.log(4)
})
console.log(1);
打印结果是：2 1 3 4 5
JS作用域
1.除了函数外，js是没有块级作用域
2.作用域链：内部可以访问外部的变量，外部不可以访问内部的变量。
变量优先访问内部变量，内部没有在向外找。
3.注意声明变量是var还是没有写如（b=0 =》window.b=0）
4.js有变量提升的机制（变量悬挂声明）
5.优先级：声明变量》声明普通函数》参数》变量提升
function fun(a){
var a=10;
function a(){}
console.log(a); //打印的值是 10
}
function c(){
var b = 1;
function a(){
console.log(b);
var b= 2;
console.log(b);
}
a();
console.log(b);
}
c();
执行结果：undefined 2 1
随机数
//生成n位数字字符串
function randomNum(n){
let res = ''
for(let i=0;i<n;i++){
res += Math.floor(Math.random()*10);
}
return res;
}
//生成n位数字字母混合得字符串
function generateMixed(n){
let chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
let res = '';
for(let i=0;i<n;i++){
let id = Math.floor(Math.random()*36);
res += chars[id]
}
return res;
}
闭包
闭包：本质就是上级作用域内变量的生命周期，因为被下级作用域内引用，而没有被释放。就导致上级作用域内的变量，等到下级作用域执行完以后才正常得到释放。
优点：
可以访问外部函数的局部变量
缺点：
变量会驻留内存中，造成内存损耗问题
内存泄漏【ie】
function fun(){
let a =10;
return function(){
console.log(a)
}
}
fun()();
原型链+this指向
function Foo(){
getName = function(){console.log(1)}//注意是全局 window.
return this;//this是指向window
}
Foo.getName = function(){console.log(2)}
Foo.prototype.getName = function(){console,log(3)}
var getName = function(){console,log(4)}
function getName(){
console.log(5)
}
Foo.getName(); //2
getName(); //4
Foo().getName();//1
//这里调用了顶掉了var getName 。。。
//getName = function(){console.log(1)}//注意是全局 window.
getName();//1
new Foo().getName();//3
-------------------------------------------------
var o ={
a:10,
b:{
fn:function(){
console.log(this.a);//undefine
console.log(this)//指向b
}
}
}
o.b.fn();
JS判断是不是数组
let a= [1,2,3]
let b= "124"
1.通过 isArray 来判断
console.log(Array.isArray(a)) //true
console.log(Array.isArray(b)) //false
2.通过 instanceof
console.log(a instanceof Array) //true
3.通过原型
console.log(Object.prototype.toString.call(a).indexOf('Array')>-1)//true
4.isPrototypeof
console.log(Array.prototype.isPrototypeof(a))//true
5.constructor
console.log(a.constructor.toString().indexOf('Array')>-1)//true
slice是干嘛的，splice会不会改变原数组
1.slice 是用来截取数组的但是不会改变原数组
const arr = ['a', 'b', 'c', 'd', 'e', 'f'];
arr.slice(); // 无参数时，截取所有的元素。
arr.slice(2); // 从第二个值开始提取，直到末尾
arr.slice(-2); // 提取最后两个元素 负数会将其与长度相加，-2+6=4
arr.slice(2, 4); // 提取从第二个到第四个之间的元素（不包括第四个元素）
arr.slice(4, 2); // 空
2.splice:功能有：插入、删除、替换 （会改变原数组）
返回删除的数组
var arr1 = ['a', 'b', 'c', 'd', 'e', 'f'];
arr1.splice(1); //从第index为1的位置开始，删除元素
arr2.splice(-2); //删除最后两个元素，和slice同样的思想。
arr3.splice(1, 3); //从第index为1的位置开始删除元素,一共删除三个元素
// 增加系列
arr4.splice(1,0,'g','h') //纯增加情况
//变更的情况就是 先删除再增加，即替换
arr4.splice(1, 3, 'js', 'vue');//删除+增加 == 更改
数组去重
var arr = [1,1,2,2,3,3]
1.new Set()
console.log(Array.from(new Set(arr)))
console.log([new Set(arr)])
2.indexOf
function unqiue(arr){
var array=[];
for(let i =0;i<arr.length;i++){
if(array.indexOf(arr[i])==-1){
array.push(arr[i])
}
}
return array;
}
多维数组找最大值
let arr =[
[3,2,5,2],
[36,5,3,0],
[36,58,2]
]
function funAarry(arr){
var ar = [];
arr.forEach((item,index)=>{
ar.push(Math.max(...item))
})
return ar;
}
给字符串新增方法
String.prototype.addPrefix = function(str){
return str+this
}
console.log("world".addPrefix('hello'))//helloworld
找出字符串出现最多次数字符
let str = 'aabbccddsssssaaassss'
var obj = {};
for(let i =0;i<str.length;i++){
let char = str.charAt(i);//charAt方法可返回指定位置的字符。
if(obj[char]){
obj[char]++;
}else{
obj[char]=1;
}
}
var max =0;
for(let key in obj){
if(max<obj[key]){
max = obj[key]
}
}
for(let key in obj){
if(obj[key]==max){
console.log("出现最多的字符是"+key)
console.log("出现的次数是"+max)
}
}
new操作符具体做了什么
1.创建了一个空的对象
2.将空对象的原型，指向于构造函数的原型
3.将空对象作为构造函数的上下文（改变this的指向）
4.对构造函数有返回值的处理判断
function create(fn,...args){
//创建一个空对象
let obj={}
//将空对象的原型，指向于构造函数的原型
Object.setPrototypeOf(obj,fn.prototype)
//将空对象作为构造函数的上下文 改变this指向
let result = fn.apply(obj,args);
//对构造函数有值返回处理判断
return result instanceof Obejct ? result :obj;
}
原型链
1.原型可以解决什么问题
对象属性共享和共享方法
2.谁有原型
函数有：prototype
对象拥有：_proto_
3.对象查找属性或者方法的顺序
先在对象本身找-》构造函数中找=》对象的原型=》构造函数的原型中=》当前原型的原型中查找
4.原型链
就是把原型串联起来，原型链的最顶端是null
继承
1.ES6继承
class Parent{
constructor(){
this.age=18;
}
}
class Child extends Parent{
constructor(){
super();//继承要添加这不然会报错
this.name="kun"
}
}
let k = new Child()
console.log(k,k.name,k.age)
2.原型链继承
function Parent(){
this.age =20
}
function Child(){
this.name="kun"
}
Child.prototype = new Parent();
let k = new Child();
console.log(k,k.name,k.age)
3.借用构造函数
function Parent(){
this.age =20
}
function Child(){
this.name="kun"
Parent.call(this)
}
let k = new Child();
console.log(k,k.name,k.age)
call、apply、bind区别
共同的：功能一样 改变函数体内this指向
语法：函数.call()、函数.apply、函数.bing()
区别：
1.call、apply会立即执行，bing返回的是一个函数需要加（）来执行
2.参数不同：apply第二个参数是数组，call和bing有多个参数需要挨个写 （fn.call(obj,1,2) fn.apply(obj,[1,2])）
场景：
1.let arr =[1,2,3,500,56,5]
console.log(Math.max.apply(null,arr))
2.
sort
定义:针对于数组的元素进行排序，并返回数组，默认排序是根据字符串unicode码点
let arr = [12,2,'13',11,111,24]
let arr1 = arr.sort(function(a,b){
return a-b;//数组从小到大排序
return b-a;//数组从大到小排序
})
let arr = [
{name:123,age:1},
{name:321,age:3},
{name:153,age:2},
]
function compare(age){
return function(a,b){
let v1 =a[age]
let v2 = b[age]
return v1-v2
}
}
let k2 =arr.sort(compare('age')) //对其从大到小排序
深拷贝和浅拷贝
共同点：复制
1.浅拷贝：只复制引用，而未复制真正的值 （共用同一个地址）
//浅拷贝
let arr1=[1,2,3,5,4,6,5]
let arr2= arr1;
console.log(arr1,arr2)
arr1[0]=0;
arr2[1]=0;
console.log(arr1,arr2)
一个数组发生改变，则另一个数组也会发生改变
let obj1={a:1,b:2}
let obj2= Object.assign(obj1)
2.深拷贝：是复制真正的值 互不干扰
let obj1 ={
a:1,
n:2
}
let obj2 = JSON.parse(JSON.stringify(obj1))
JSON.parse(JSON.stringify(obj))深拷贝的问题
1、如果obj里面存在时间对象,JSON.parse(JSON.stringify(obj))之后，时间对象变成了字符串。
2、如果obj里有RegExp、Error对象，则序列化的结果将只得到空对象。
3、如果obj里有函数，undefined，则序列化的结果会把函数， undefined丢失。
4、如果obj里有NaN、Infinity和-Infinity，则序列化的结果会变成null。
5、JSON.stringify()只能序列化对象的可枚举的自有属性。如果obj中的对象是有构造函数生成的， 则使用JSON.parse(JSON.stringify(obj))深拷贝后，会丢弃对象的constructor。
6、如果对象中存在循环引用的情况也无法正确实现深拷贝。
3.递归实现深拷贝：
function copyObj(obj){
if(Array.isArray(obj)){
let newObj=[]
}else{
let newObj={}
}
for(let key in obj){
if(typeof obj[key]=="object"){
newObj[key]=copyObj(obj[key])
}else{
newObj[key] = obj[key]
}
}
return newObj;
}
localStorage、sessionStorage、Cookie
localStorage.setItem("kun",123);
sessionStorage.setItem("kun",123);
let date = new Date();
let time = 1000*60*60*24;
time = date.getTime()+time
document.cookie='name=kun;expires='+date.toUTCString()+"" //expires是设置过期时间
共同点：在客户端存放数据
区别：
1.数据存放有效期
sessionStorage:浏览器当前窗口有效，关闭当前页面就失去数据
localStorage:一直保存在浏览器中，不会因为页面关闭而失去数据，也叫持久化存储
cookie：只在设置的cookie过期时间之前有效。即使浏览器窗口关闭也有效
2.sessionStorage、localStorage 不可以设置过期时间
3.存储大小的限制：
cookie存储不能超过4k
sessionStorage、localStorage不能超过5M
浏览器的不同也会有一些变化
H5/C3面试题
什么是语义化标签
::before和:after中双冒号和单冒号的区别
伪类
伪类是添加到选择器的关键字，用于指定所选元素的特殊状态，修改特殊状态下的样式。
这是MDN文档对伪类的定义。
比如设置鼠标悬浮在按钮元素上时，设置背景色为红底白字。
button:hover{
background:red;
color:white
}
伪元素
伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。
如何关闭IOS键盘首字母自动大写
在input的输入筐添加属性
怎么让Chrome支持小于12px文字
Chrome的默认字体大小是16px 每个浏览器的字体大小都不一样
可以通过css3 缩放来实现
div span{
display:inline-block;
-webkit--transform:scale(0.8)
}
rem和em区别
IOS系统中元素被触摸时产生的半透明灰色遮罩去除
通过css
表单输入框placeholder的颜色修改
禁止ios长按触发系统的菜单，禁止长按下载图片
禁止用户选中文字
自适应
rem只是一个单位不属于自适应的核心
单纯的使用rem是没有用的
自适应最终就是改变html的font-size来使得页面自适应
方案：
1.淘宝无限适配【移动端】：淘宝无限适配+布局单位使用rem
function flexible(){
window.onresize=function(){ //监听页面放大缩小
///获取当前可视页面的宽度
let doc = document.documentElement;
let w= doucument.documentElement.clientWidth/10
doc.style.fontSize = w+"px";
}
}
响应式
1.是什么
一个URL可以响应多端
通过媒体查询来调整页面的内容和一些布局
@media only screen and (max-width:1000px){ //大于1000px
ul li:last-child{
display:none;
}
}
only:可以排除不支持媒体查询的浏览器
screen：设备类型
max-width|max-height
min-width|min-height
2.响应式图片 （性能优化）
<picture>
<source srcset="2.jpg" media="(min-width:1000px)" >
<source srcset="3.jpg" media="(min-width:700px)" >
<img srcset="1.jpg">
</picture>
网页布局方案
1.什么情况下采用响应式布局
数据不是特别大，用户量不是特别大，纯展示类的项目适合响应式布局
列如：公司官网、专题页面
特别追求性能的，不太适合响应式
2.pc+移动端应该做什么样的布局方案
注意：访问量还可以或者比较大，类似于淘宝网
移动端是一套，会使用自适应的布局方式
PC是一套，会加一点响应式
3.PC的设计图
ui：1980
笔记本电脑：1280
ui图的宽度和电脑的宽度不对应怎么办？
1.把ui图进行等比缩放，缩放成和电脑一样的尺寸
2.换个1980的电脑
4.移动端的设计图
宽度：750
因为750的设计图/2就是375，正好是iphone6的尺寸，我们要把iphone6的尺寸作为基准点
ES6
var、let 、const
共同的：都是可以声明变量的
区别一：
var 具有变量提升的机制
let和const没有变量提升机制
区别二：
var可以多次声明同一个变量
let和const不可以多次声明同一个变量
区别三：
var、let声明变量
const声明常量
var和let声明的变量可以再次赋值，但是const不可以再次赋值了
区别四：
var声明的变量没有自身的作用域
let和const声明的变量有自身的作用域
作用域考题
console.log(str)//undefined
var str ='hello'
console.log(num) //报错
let num =10
---。
function demo(){
var n=2;
if(true){
var n =3;
}
console.log(n)//2
}
---。
const obj ={
a:123
}
obj.a=111
console.log(obj) // {a:111}
可以修改里面的值
对象合并
const a ={a:1,b:3}
const b ={b:2,c:4}
方式一：
let obj = Object.assign(a,b);//{a:1,b:2,c:4}
方式二：
let obj = {...a,...b}////{a:1,b:2,c:4}
方式三：
function extend(target,soure){
for(var key in soure ){
target[key] = soure[key]
}
return target
}
箭头函数和普通函数区别
1.this指向问题
箭头函数中的我this只在箭头函数定义时就决定的，而且不可修改的（call,apply,bing）
箭头函数的this指向定义时候，外层第一个普通函数的this
2.箭头函数不能new（不能当作构造函数）
3.箭头函数prototype是undefined
4.箭头函数是没有arguments
Promise有几种状态
1.三种状态：
1.pending 进行中
2.fulfilled 已成功
2.rejected 已失败
2.Promise的含义：是异步编程的一种解决方案，解决了回调地狱的问题
3.
Promise.resolve('foo').then(ress=>{
console.log(res);
}).then(()=>{
console.log(1)
}).then(()=>{
console.log(2)
}).then(()=>{
console.log(3)
}).then(()=>{
console.log(4)
}).then(()=>{
console.log(5)
})
结果：foo 1 2 3 4 5
4.async await
function getData(){
return new Promise((resolve,reject)=>{
resolve("1")
})
async function(){
let a= await getData();
console.log(a) // 1
}
function();
}
find和filter的区别
1.返回的内容不同
filter返回是新数组
find 返回具体的内容
2.
find:匹配到第一个即返回
filter:返回一个整体（每一个匹配到的都返回）
some和every的区别
let arr =[6,4,3,5,2]
let a = arr.some(val=>{
return val>4
})
let a = arr.every(val=>{
return val>4
})
console.log(a,b)// true false
some==>如果有一项匹配则返回true
everr==》全部匹配才返回true
Vue
vue2生命周期
1.有哪些生命周期
系统自带：
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestory
destoryed
2.一旦进入到页面或者组件，会执行哪些生命周期：
beforeCreate
created
beforeMount
mounted
3.那个阶段有$el,在哪个阶段有$data
beforeCreate 啥也没有
created 有data没有el
beforeMount 有data没有el
mounted 都有
4.如果加入了keep-alive会多两个生命周期
activated deactivated
5.如果加入了keep-alive,第一次进入组件会执行哪些生命
6.如果加入了keep-alive，第二次或者第n次入组件会执行哪些生命
