复习笔记Html/Css/JavaScript基础面试题-《b站小鹿线，2022年最全，最卷，必刷前端高频面试题》

Html面试题

1.行内元素有哪些？块级元素有哪些？哪些是空元素？

行内元素: a、b、span、img、input、strong、select、label、em、button、textarea
块状元素: div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：  br、meta、hr、link、input、img

2.页面导入样式时，使用link和@import有什么区别？

a. link是html标签，@import是css语法，link的兼容性更好
b. 浏览器会优先加载link

3. title与h1的区别，b与strong的区别，i和em的区别？

title和h1的区别:
定义：
     title: 概括了网站的信息，可以告诉搜索引擎或者用户关于这个网站的内容主题是什么
     h1:    文章主题内容，告诉蜘蛛网站内容是什么
区别：
     title是显示网页标题上，h1显示在网页内容上
     title比h1更加重要
场景： 网站的logo一般使用h1包裹

b与strong的区别
定义： 
     b: 实体标签，用来给文字加粗的
     strong: 逻辑标签，用来加强字符语气的。
区别:
     b标签只有加粗的样式，没有实际含义，strong表示标签内字符比较重要，用于强调的。
     为了符合css规范，b标签尽量少用

i和em的区别：
定义：
    i: 实体标签，用来做文字倾斜的
    em： 逻辑标签，用来强调文字内容的
区别：
    i只是一个倾斜标签，没有实际含义
    em表示标签内容重要，用以强调的
场景：
   i更多用在字体图标，em用在术语上

4. img的title和alt属性的区别？

区别一：
    title: 是鼠标移入到图片上显示的
    alt:    图标无法加载时显示的
区别二：
    在seo的层面，蜘蛛抓取不到图片的内容，所以在写img标签是为了增加seo效果会加上alt属性来描述图片。

5.png、jpg、gif这些图片格式解释一下，分别什么时候使用？

png： 无损压缩，尺寸体积要比jpg/gif的大，适合做小图标
jpg： 采用压缩的算法，有点失真，比png体积小，适合做中大图片。
gif： 一般是动图。
webp： 同时支持有损或者无损压缩，相同质量的图片，webp具有更小的体积，但兼容性不是很好

CSS

1. 介绍一下盒模型

盒模型分为：标准盒模型和怪异盒模型
区别：
  标准盒模型： margin,border,padding,content
  怪异盒模型： margin,content(border+padding+content)
转换：
  box-sizing: content-box; //标准盒模型
  box-sizing: border-box; //怪异盒模型

2. line-height和height的区别？

line-height是每一行文字的高度，如果文字换行，则盒子的高度会增大（行数*行高）
height是一个死值，就是这个盒子的高度

3.css选择符有哪些？哪些属性可以继承？

通配 (*)
id选择器 (#)
类选择器 (.)
标签选择器 (div,p，h1..)
相邻选择器 (+)
后代选择器 (ul li) (ul li +li 后代排除第一个子元素的选择)
子元素选择器 >
属性选择器 (div[attr])

css属性哪些可以继承:
 文字系列：font-size,color,line-height,text-align...
 
不可继承： border,padding,margin...

4.css优先级算法如何计算？

优先级： !important > 内联样式 > id > class > 标签 > 通配
权重计算： 
    内联样式（style）   权重： 1000
    id选择器：          权重： 100
    类选择器：          权重： 10
    标签&伪元素选择器   权重： 1
    通配, > , +        权重：0

5. 画一个三角形

.trancle{
    width: 0;
    height: 0;
    padding-top: 50px solid red;
    padding-left: 50px solid transparent;
    padding-right: 50px solid transparent;
    padding-bottom: 50px solid transparent;
}

6.一个盒子不给宽高，如何实现居中

方式一：父元素设置样式： 
    display: flex; justify-content: center; align-items:center;
方式二：
    父元素设置定位： postition:relative;
    子元素： position:absolute; left:50%; top: 50%; transform: translate(-50%, -50%);

7.display有哪些值，分别有啥作用

none 隐藏元素
block 块状
inline-block 行内块
inline  行内元素
flex 弹性盒

8.bfc的理解

bfc就是页面上一个隔离的独立容器，容器里的子元素不会影响到外面的元素
1. bfc: 块级格式化上下文
2. bfc的原则：容器里的子元素不会影响到外面的元素
3. 触发bfc：
    float的值不是none;
    overflow的值非visible;
    display的值为inline-block,table-cell
    position的值为：absolute, fiexd;

9.清除浮动的方式有哪些？

1. 触发bfc
2. 多创建一个盒子，添加样式 clear:both;
3. 给父元素添加 ul:after{content: '';display: block;clear: both;}

10. 网页中应该使用奇数还是偶数字体，为什么？

偶数：让文字在浏览器中表现的更好看
另外：ui设计的图一般都是偶数的，这样不管是布局，转换px也好，方便一些。

11. position有哪些值，分别根据什么定位？

static (默认) 没有定位
fixed 固定定位 相对于浏览器窗口定位
relative 相对定位 相对于自身定位，不脱离文档流
absolute 绝对定位 相对于最近的有relative定位的父元素，脱离文档流

relative和absolute的区别
1.relative不脱离文档流，absolute脱离文档流
2.relative相对于自身，absolute相对于第一个有relative的父元素
3.relative如果有left,top,right,bottom -> 生效的只有left和top;
  absolute如果有left,top,right,bottom -> 都会生效

12. 双飞翼布局（左中右占满屏幕，其中左右固定宽度，中间自适应，要求中间先加载）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .body{
            width: 100vw;
            height: 100vh;
        }
        .container >div{
            float: left;
            height: 100vh;
        }
        .main{
            padding: 0 200px;
        }
        .c{
            width:100%;
            background: pink;
        }
        .l{
            width: 200px;
            height:100%;
            background: red;
            margin-left: -100%;
        }
        .r{
            width: 200px;
            height: 100%;
            margin-left: -200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="c">
            <div class="main">
               中
            </div>
        </div>
        <div class="l">左</div>
        <div class="r">右</div>
    </div>
</body>
</html>

13. 什么是css reset？

reset.css 是一个css文件，用来重置css样式
Normalize.css 为了增强跨浏览器渲染的一致性，css重置样式库。

14.css-sprite是什么？有什么优缺点？

把多个小图标合并成一个大图片。
  background: url('./xxx.png') no-repeat;
  background-position: -23px-88px;
优点：
   1. 减少了http请求的次数，提升了性能。
缺点：
   维护比较差，内容，宽高修改等都需要对应调整

15. display:none和visibility:hidden的区别？

1.占用位置的区别：
    display:none  不占用位置；
    visibility:hidden 虽然隐藏了，但是占用位置
2. 重绘和回流的问题：
   visibility: hidden, display: none; 都会产生重绘
   display: none; 还会产生一次回流
   
   产生回流一定会造成重绘，但是重绘不一定造成回流
   
   产生回流的情况： 改变元素的位置（定位，），元素隐藏显示...
   产生重绘的情况： 改变样式（颜色等）

16. opacity和rgba的区别？

共同点： 实现透明效果

1.opacity 取值范围0到1之间，0表示完全透明，1表示完全不透明。
2.rgba    r红色， g绿色，b蓝色；取值可以在正整数或者百分数; a表示透明度，取值0到1.

区别：
   opacity会继承父元素的opacity属性；rgba设置的后代子元素不会继承不透明属性

JS

1.延迟加载js有哪些方式？

async： async和html解析是同步的，不是顺次执行js脚本的（谁先加载完谁先执行）
defer： 等html全部解析完成才会执行js代码，并且是顺次执行js脚本的。

2. js数据类型

基本数据类型：string、number、boolean、undefined、null、symbol、bigint
引用数据：objec(array,function)

考题： 
console.log(true + 1) // 2
console.log('name' + true) //'nametrue'
console.log(undefined + 1) // NaN typefo NaN -> number
console.log(typeof null) //object

3. null和undefined的区别？

1. 作者在设计时最早只设计了一个null,(借鉴了java)
2. null会被隐式转换为0，很不容易发现
3. 先有null后有undefined是为了填补之前的坑。

具体区别：JavaScript的最初版本是这样区别的： null是一个表示“无”的对象（空对象指针），
         转为数值时为0，undefined是一个表示“无”的原始值，转为数值时为NaN.

4. ==和===有什么不同

== : 比较值
    null == undefined -> true
    string == number string会转成number
    boolean == number  boolean转成bumber
    object == string || number...  object转成基本类型  [1, 2] == '1,2'
    
    string == number || number || boolean...都会隐式转换，通过valueOf转换（valueOf() 方法通常有javaScript在后台自动调用）
    
===： 比较值和类型

5.js宏任务和微任务

1. js是单线程的语言，同一时间只能做一件事。
2. js执行代码流程： 同步执行完成 => 事件循环
     同步的任务都执行完成了，才会执行事件循环的内容，进入事件循环： 请求，定时器，事件...
3. 事件循环包含：【微任务，宏任务】
  微任务：promise.then
  宏任务：setTimeout,setInterval
  
  要执行宏任务的前提是，清空了所有的微任务

6.js作用域考题

1. 除了函数外，js是没有块级作用域
2. 作用域链： 内部可以访问外部的变量，但是外部不能访问外部的变量。
    注意： 如果内部有，优先查找到内部，如果内部没有就查找外部的。
3.注意声明变量使用var还是没有写（window.）
    考题：
    (function () {
       var a = b = 10;
    });
    console.log(a); // 报错；
    console.log(b); // 10， 此时b是全局变量 window.b
4. 注意：js有变量提升的机制【变量悬挂声明】
考题二：
function c() {
     var b = 1;
     function a () {
         console.log(b); // undefined
         var b = 2;
         console.log(b); // 2
     }
     a();
     console.log(b); // 1
 }
 c();
 
 注意：
    1. 先要在本层作用域有没有变量【变量提升】; 
    2. 注意js除了函数外，没有块级作用域。
    3. 普通声明函数是不看写函数的顺序
 
 考题三：
 var name = 'world';
 (function() {
    if(typeof name === 'undefined'){
        var name = 'jack'; //变量提升
        console.log('goodbye' + name);  //goodbye jack
    } ekse {
        console.log('hello' + name);
    }  
 })();
 
 5. 注意优先级: 声明变量 > 声明普通函数 （不看顺序）> 参数 > 变量提升
 考题四：
 function fun () {
   var a = 10;
   function a(){
   }
   console.log(a); //10
 }


 function fun () {
   var a = 10;
   function a(){
   }
   console.log(a); //10
 }
 fun(100)

7.js对象考题

js对象注意点：
1.js对象是通过new操作符创建的，所以对象之间不相等（除了引用类型）。
2.注意引用类型（共同一个地址）
3.对象的key都是字符串类型
4.对象查找方法或者属性： 
 先从本身查找（obj） --> 去构造函数中Fun --> 去对象原型中（obj.__proto__） --> 去构造函数原型中（Fun.prototype） --> 对象上一层原型中查找
考题一：
var a = {};
var b = {key: 'b'};
var c = {key：'c'};
a[b] = '123';
a[c] = '456';
console.log(a[b])  //456； 对象作为key会被转成字符串

考题2：
function Fun () {
    this.a = '在Fun函数中添加的';
}
Fun.protortype.a = 'Fun原型添加的';
let obj = Fun();
obj.a = '对象自身';
obj.__proto__.a = '对象原型中添加'；
console.log(obj.a); //此时找的是对象本身；

8.js作用域+this指向+原型

考题1：
function Foo () {
    getName () {
        cosole.log(1) //没有this.是全局的window
    }
    return this;
}
Foo.getName = function(){console.log(2)};
Foo.prototype.getName = function () {console.log(3)}
var getName = function () {console.log(4)};
function getName = function(){
    console.log(5);
}
Foo.getName();   // 2 先找函数本身，可以执行
getName();       // 4  声明变量 > 普通函数声明
Foo().getName(); // 1 等同于window.getName
getName();       // 1
new Foo().getName(); // 3 //本身->构造函数 -> 本身原型 -> 构造函数原型

考题2
var o = {
    a: 10,
    b: {
        fn: function() {
            console.log(this.a);
            console.log(this);
        }
    }
}
o.b.fn(); 此时fn中的this指向b，this.a === undefined this === o.b

考题3：
window.n = 11;
function A = {
    this.n = 22;
}
A.prototype.getA = function() {
    console.log(this);
    return this.n + 1
}

let a = new A();
let funC = a.getA 等价于
let funC = function() {
    console.log(this); //此时this指向window
    return thsis.name + 1; 
};
funC();

var len = 10;
function fn () {
    return this.len + 1;
}
var obj = {
    len: 5, 
    test1: function () {
        return fn();
    }
}
obj.test2 = fn;
console.log(obj.test1()) // 11
console.log(fn() === obj.test2())  //false
console.log(obj.test1 == obj.test2()); //false

9.js判断变量是否为数组的方法

let arr = [1,2,3]
方式一： Array.isArray(arr)； //true
方式二： arr instanceOf Array // true
方式三： Object.prototype.toString.call(arr).indexOf('Array') > -1; //true
方式四： Array.prototype.isPrototypeOf(arr) // true
方式五： arr.constructor === Array  //true

10.slice是干嘛的，splice是否会改变原数组

slice 截取
    参数可以些slice(1), slice(1,2), slice(-3)
    返回一个新数组，不改变原数组
splice 删除，插入，修改
    返回删除的元素
    改变原数组

复习其他的数组方法

11.js数组去重

方式一： new Set();
 let arr = [1, 2, 1, 3]; 
 console.log([...new Set(arr)]);
 console.log(Array.from(new Set(arr))
方式二： indexOf
方式三： sort
let arr = [1, 2, 1, 3]; 
function unique () {
  arr = arr.sort();
  var brr = [];
  console.log(brr = [[arr[0]]];
  for (var i =0 ;i< arr.length;i++) {
      if (arr[i] !== arr[i-1]){
          brr.push(arr[i]);
      }
  }
  return brr;
}

12.找出多为数组最大值

function fnArr(arr) {
    var newArr = [];
    arr.forEach(item => {
        newArr.push(Math.max(...item));
    });
    return newArr;
}

13.给字符串新增方法实现功能

String.prototype.addPrefix = function (str) {
    return str + this;
}

14.找出字符串出现最多次数的首字符以及次数

var str = 'aaabbbcccccdddd';
var obj = {};
for (var i = 0; i< str.length; i++ ) {
   var char = str.charAt(i);
   if (obj[char] ) {
       obj[char]++;
   } else {
       obj[char] = 1;
   }
}
var max = Math.max(...Object.values(obj));
for (var key in obj) {
    if (obj[key] === max) {
        console.log('最多字符是' + key + '出现了' + max + '次')
    }
}

15.new操作符具体干了什么

1. 创建了一个空的对象；
2. 将空对象的原型，指向构造函数的原型 Foo.prototype === new Foo().__proto__
3. 将空对象作为构造函数的上下文（改变this指向）
4. 对构造函数有返回值的处理判断(基本类型，忽略返回值)、

自己实现
function Create(fn, ..args) {
    var obj = {}; //创建一个对象
    Object.setPrototypeOf(Obj, fn.prototype); 将空对象的原型，指向构造函数的原型 
    var result = fn.apply(obj, args); 将空对象作为构造函数的上下文
    return result instanceOf Object ? result : obj;   回值的处理判断
}

16.闭包

1.闭包是什么
    闭包是一个函数加上到创建函数的作用的作用域链接，闭包关闭了函数的自由变量。
2.闭包可以解决什么问题
    内部函数可以访问到外部函数的局部变量；
3，闭包的缺点
    变量会驻留在内存中，造成内存损耗没问题; 把闭包的函数变量设置为null;
    ie<内存泄漏>

17.原型链

1. 原型可以解决什么问题
    对象共享属性和方法
2. 谁有原型
   函数 prototype
   对象 __prototype
3.属性和方法的查找顺序： 
     先在自身查找 -> 构造函数中查找 ->  当前原型中查找 -> 构造函数的原型中查找 -> 构造函数的原型的原型中查找
4. 原型链：
   就是把原型串联起来
   原型链的最顶端是null;

18.js继承有哪些方式

方式一： es6的类继承
class Person () {
    constructor (age) {
        this.age = age;
    }
}

class child extends Person {
    constructor (age, name) {
        super();
        this.name = name;
    }
}

const o = new Child();
console.log(o.age, o.name);

方式二： 原型链继承
function Parent () {
    this.age = 20;
}
function Child () {
    this.name = '张三';
}
Child.prototype = new Parent();

方式三： 借用构造函数的形式
function Parent () {
    this.age = 20;
}
function Child () {  
    this.name = '张三';
    Parent.call(this);
}


方式四： 组合式继承
function Parent () {
    this.age = 20;
}
function Child () { 
     Parent.call(this);
     this.name = '张三';
}
Child.prototype = new Parent();

19.call,apply,bind区别

共同点： 功能一致，可以改变函数体内this的指向
区别： 
1， call,apply会立即执行，bind不会立即执行，它返回的是一个函数。
2.  参数不同：apply第二个参数是数组，call和bind有多个参数需要一个一个的写。

20.sort背后原理是什么

sort对数组的元素进行配置，并返回新的数组， 默认根据字符串的Unicode码点排序。
    a - b //从小到大
    b - a //从大到小
        V8引擎 sort函数只给出了两种排序：InsertionSort 在数组长度小于 10， 在大于10时使用QuickSort
        
     之前是插入排序，现在是冒泡排序

21. 深拷贝和浅拷贝

共同点： 复制
1. 浅拷贝： 只是复制引用，并没有复制真正的值。
2. 深拷贝： 复制真正的值；(不同引用，不同值)
JSON.parse(JSON.stringify(obj));
function deepClone (obj) {
    if (typeof obj !== 'object' || obj == null) return obj;
    const res = Array.isArray(obj) ? [] : {}
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            res[key] = deepClone(obj[key])
        }
    }
    return res;   
}

22. localStorage,sessionStorage,cookie的区别

公共点： 在客户端存放数据
区别：
1. 数据存放有效期：
    sessionStorage： 仅在当前浏览器口关闭之气那有效。（关闭浏览器就没有了）
    localStorage: 始终有效，窗口或者浏览器关闭也一直保存，所以叫持久存储。
    cookie: 只在设置的cookie过期时间之前有效，即使窗口或者浏览器关闭也有效。
2. localStorage/sessionStorage不可以设置过期时间
   cookie有过期时间，可以设置过期时间（把时间调整到之前的时间，就过期了）
3. 存储大小限制：
   cookie存储量不能超过4k;
   localStorage和sessionStorage存储量不超过5M;
   
   根据不同的浏览器存储大小是不同的。

H5/CSS3面试题

1.什么是语义化标签

1.易读性和维护性更好；
2. seo成分会更好，蜘蛛抓取会更好；
3. ie8不兼容html5标签，使用html5dshiv.js处理

2. before和after中双冒号和单冒号有什么区别？解释一下这两个伪元素？

1. : 伪类
  :: 伪元素
2. before 之前 after 之后
作用： 清除浮动， 样式布局也有作用

3. 如何关闭ios键盘首字母大写

  <input type="text" autocapitalize="off">

4. 怎么让chrome支持小于12px的文字？

chrome字体大小为12px;
不同的浏览器的默认字体大小不同

-webkit-transform:scale(0.6);

5. rem和em的区别

相对于font-size
em: 针对于父元素的font-size
rem：针对根元素(html)的font_size

6.ios系统中元素被触摸时产生的半透明灰色遮罩层怎么去掉

a,button,input,textarea{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

7.webkit表单输入框的placeholder的颜色可以修改吗？

inpt::-webkit-input-placeholder{
    color: red;
}

8.禁止ios和android用户选中文字

html,body{
    user-select: none;
    -webkit-user-select: none;
}

9.自适应

淘宝无限适配【移动端】：淘宝无限适配 + 布局单位使用rem
<script>
function flexible () {
    let doc = document.documentElement.clientWidth;
    let w = doc.clientWidth / 10;
    doc.style.fontSize = w + 'px'
  
}
flexible();
window.onresize = function () {
    flexible();
}
</script>

10.响应式

1. 什么是响应式： 一个url可以响应多端
2.语法
    @media only screen and (max-width: 1000px) {

    }
    @media only screen and (max-width: 1000px) {

    }

only 可以排除不支持媒体查询的浏览器
screen: 设备类型
max-width | max-height
min-width | min-height

3.响应式图片【性能优化】
    <picture>
      <source srcset="1.png" media='(min-width:1000px)'>
      <source srcset="2.png" media='(min-wdith: 700px)'>
      <img srcset="3.png">
    </picture>

11.网页布局方案

1.什么情况采用响应式布局
  数据不是特别多，用户量不是特别大，纯展示类的项目适合响应式布局
  例如：公司官网，专题网页
  特别追求性能的项目，不太适合响应式，如果添加了很多响应式就会造成加载速度变慢。

2. pc + 移动端应该做什么样的布局
    访问量还可以或者特别大，类似于淘宝网
    pc一套：会加入一点点响应式
    移动端一套：会使用自适应的布局方式
3. pc的设计图
    ui:1980
    笔记本： 1280
    UI图的宽度和电脑的宽度不对应该怎么办？
      1.把ui图进行等比缩放，缩放成和电脑一样的尺寸
      2.换1980的电脑
 
4.移动端的设计图
 宽度750
 换成iphone6的尺寸，750/2

12.禁止IOS长按时触发系统的菜单，禁止IOS和android长按时下载图片

html,body{
    touch-callout: none;
    -webkit-touch-callout:none;
    
    user-select: none;
    -webkit-user-select:none;
}