前端（HTML,CSS,JS）面试题

坠入昏云间

已于 2023-05-12 15:01:27 修改

阅读量810

点赞数

文章标签：前端 css html javascript

于 2023-05-12 14:56:48 首次发布

本文链接：https://blog.csdn.net/qq_56842011/article/details/130583214

版权

CSS

1.定位

static: 默认值没有定位，元素出现在正常的流中
relative(相对定位):生成相对定位的元素,相对于其正常（原先本身）位置进行定位
absolute（绝对定位):生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位
fixed（固定定位）:生成绝对定位的元素，相对于浏览器窗口进行定位
sticky 粘性定位当前元素设置了粘性定位，滚动到顶部就会吸附顶部，往下滑还回到原来位置。

2.flex弹性布局实现居中

        display: flex;//设置弹性布局
        justify-content: center;//水平居中
        align-items: center;//垂直居中

3.请解释rem,px,em区别

一、px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
二、em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。
三、em是相对于其父元素来设置字体大小的，一般都是以<body>的“font-size”为基准。这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而Rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值。

4.HTML5新增标签

语义化标签：header、footer、section、nav、aside、article
增强型表单：input 的多个 type calendar、date、time、url、search、tel、file、number 新增表单属性：placehoder、required、min 和 max
音频视频：audio、video
canvas 画布
kan wa si 地理定位（Geolocation）
拖拽释放：拖拽是一种常见的特性，即抓取对象以后拖到另一个位置，在HTML5中，
本地存储： localStorage 没有时间限制的数据存储； sessionStorage， session 的数据存储，当用户关闭浏览器窗口后，
数据会被删除新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
WebSocket：建立持久通信协议，新的技术：webworker、websocket、Geolocation

5.什么是响应式布局？有哪些实现方式？实现响应式布局的原理有哪些？

响应式布局:可以自动识别屏幕宽度，并做出相应调整的网页设计，布局和展示的内容可能会                    有所改变;

实现方式：

1、媒体查询

css3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的高度和宽度重新渲染页面；

2、百分比布局
通过百分比单位，可以使得浏览器中组件的宽高随浏览器的高度的变化而变化，从而实现响应式的效果，Bootstrap里面的栅格系统就是利用百分比来定义元素的宽高，css3支持最大和最小高，可以将百分比和max(min)一起结合使用定义元素在不同设备下的宽高

3、rem响应式布局

    一般不要给元素设置具体的高度，但是对于一些小图标可以设定具体的宽度值
    高度值可以设置为固定值，设计稿有多大，就设置为多大
    所有设置的固定值都用rem做单位（首先在html总设置一个基准值：px和rem的对应比例，然后在效果图上获取px的值，布局的时候转换为rem值）
    js获取真实屏幕的宽度，让其除以设计稿的高度，算出比例，把之前的基准值按照比例重新设定，这样项目就可以在移动端自适应了

4、视口单位
css3中引入一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口的高度，除了vw和vh外，还有vmax和vmin两个相关的单位

6.前端中大概有几种布局方式？

1.浮动布局
2.定位布局
3.弹性布局
4.栅格布局
5.响应式布局

7.CSS3中新增了那些特征

1、颜色：新增RGBA、HSLA模式
2、文字阴影：（text-shadow）
3、边框：圆角（border-radius）边框阴影：box-shadow
4、盒子模型：box-sizing
5、背景：background-size,background-origin background-clip(削弱)
6、渐变：linear-gradient(线性渐变):
eg: background-image: linear-gradient(100deg, #237b9f, #f2febd);
radial-gradient (径向渐变)
7、过渡：transition可实现动画
8、自定义动画： animate@keyfrom
9、媒体查询：多栏布局@media screen and (width:800px)
10、border-image
11、2D转换:transform:translate(x,y) rotate(x,y)旋转 skew(x,y)倾斜 scale(x,y)缩放
12、3D转换
13、字体图标：font-size
14、弹性布局：flex

JavaScript（面试重点）

1.JS中的基本数据类型

Null,undefined,String,Boolean,Number（ES6新增Symble表示独一无二的值）

2.请解释"=="和"==="的区别

"=="进行比较时会进行一个类型的转换，转换之后在进行值比较

"==="要求数据类型相同，值相同

3.JavaScript的作用域和作用域链

作用域

1、全局作用域(全局变量)：在函数外部定义的变量或在函数内部没有使用var声明的变量。在浏览器页面没有关闭之前一直占用内存空间。比较耗费内存。在浏览器页面关闭时才释放内存
2、局部作用域(局部变量)：在函数内部用var关键字定义的变量。只在函数内部起作用，函数调用结束后，局部变量所占的内存就会被释放。

作用域链

作用域链只能向上查找，最终找到全局。不能同级(局部)或者向下查找
    var a = 'jack';
    var b = 'andy';
    function fn() {
        var a = 'frank';
        console.log(a);
        console.log(b);
    }
    fn();
    console.log(a);
//分别输出 frank
          andy
          jack

4.防抖和节流

防抖就是防止抖动，避免事件的重复触发

防抖怎么做

节流就是某个操作希望上一次的完成后再进行下一次，或者希望隔一段时间触发一次。

节流怎么做

5.请解释什么是深拷贝，什么是浅拷贝

深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。

浅拷贝：

        浅拷贝是会将对象的每个属性进行依次复制，但是当对象的属性值是引用类型时，实质复制的是其引用，当引用指向的值改变时也会跟着变化。
        可以使用 for in、 Object.assign、扩展运算符 ... 、Array.prototype.slice()、Array.prototype.concat() 等

深拷贝：

        深拷贝和浅拷贝是针对复杂数据类型（对象及数组）来说的，浅拷贝只拷贝一层，而深拷贝是层层拷贝。

        深拷贝复制变量值，对于非基本类型的变量，则递归至基本类型变量后，再复制。深拷贝后的对象与原来的对象是完全隔离的，互不影响，对一个对象的修改并不会影响另一个对象。

6.什么是arguments，谈谈你对arguments的理解

1.arguments 对象是所有 (非箭头) 函数中都可用的局部变量.

2.arguments 对象不是一个 Array ,它类似于 Array 它拥有索引元素和 length 属性,可以被转换成一个真正的 Array

arguments 在函数中主要有两个用途:

用来判断有多少个参数传入函数, 还可以用来指代未命名的参数
除了数组元素和 length 属性, 还可以通过 callee 属性解除函数体内的代码与函数名的耦合状态

7.this的指向问题

普通函数：关于this，谁调用就指向谁，没有调用者，就指向全局对象window。

箭头函数：箭头函数的this指向于函数作用域所用的对象。

8.闭包的概念

闭包是指有权访问另一个函数作用域中的变量的函数。

闭包的形成：

1. 在函数内容部,返回一个引用类型(数组,对象,函数,以函数为主)
2. 返回的引用类型(数组,对象,函数,以函数为主),使用函数中的局部作用域变量
3. 在函数的外部,有变量来引用引用类型

闭包的优缺点：

1, 函数关联的活动对象不会被销毁

   优点: 空间中的内容,永远存在

   缺点: 会占用大量的内存空间,造成内存泄露

2, 可以从函数外部调用,使用函数内部的数据

   优点: 调用数据更加方便

   缺点: 容易泄露数据信息,不安全

3, 保护私有变量(减少全局变量的使用)

   优点: 私有变量,不会被销毁

   缺点: 私有变量存储占用空间

9.call，apply，bind的区别

1.call（a, b, c）方法接收三个参数，第一个是this指向，第二个，三个是传递给函数的实参，可以是数字，字符串，数组等类型的数据类型都可以。

2.apply(a, [b])和call基本上一致，唯一区别在于传参方式，apply把需要传递给fn()的参数放到一个数组（或者类数组）中传递进去，虽然写的是一个数组，但是也相当于给fn()一个个的传递。

3.bind（a, b, c）：语法和call一模一样，区别在于立即执行还是等待执行，bind不兼容IE6~8

bind是创建一个新的函数，而call和aplay是用来调用函数

10.BOM浏览器对象模型

BOM提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window.

1，windows对象

    指的是当前浏览器窗口，它是JS中的顶级对象
    1.特点
        (1).所有的全局变量都是window对象的属性：最顶级的对象
        (2).只要是window的属性和方法，在使用的时候都可以省略window
            window.alert() 可以省略window写成alert()
            window.document 可以省略window写成document
        (3).window对象有一个特殊属性叫做name，它永远都是一个字符串，无论给他赋什么值
    2.两个常用方法
        open()：打开一个新窗口
            window.open('https://www.baidu.com', '_blank', 'top=100,left=100,width=500,height=300', true );
        close()：关闭一个窗口
            window.close(要关闭的window对象)
            野路子，自己关闭自己:window.open(" ","_self").close();
    3.三个事件
        window.onload:界面上所有的内容加载完毕之后才触发这个事件
        window.onbeforeunload:界面在关闭之前会触发这个事件
        window.onunload:界面在关闭的那一瞬间会触发这个事件

2.location对象

    location对象：包含当前页面的URL信息
        url = 协议名（http） + ip地址（域名） + 端口号 + 资源路径

    三个常用方法

        window.location.assign(’

        http://www.itheima.com

        ');
            打开新网页，会留下历史记录（可以回退）





window.location.replace(’

        http://www.itcast.com

        ');
            打开新网页，不会留下历史记录（不能回退）

        window.location.reload();
            刷新当前网页,相当于按了F5刷新当前网页

3.history对象

    history对象主要用于记录你当前窗口的历史记录
    主要作用就是前进和后退网页（相当于浏览器的左上角前进后退按钮功能）
        history.forword():前进
        history.back():后退

4.navigator对象

    navigator对象：包含当前浏览器的信息
    工作中应用场景：用户信息统计（统计我这个网站平台的用户群体分布，什么浏览器，windows什么版本等）
    navigator.appVersion 当前浏览器版本信息
    navigator.platform 当前浏览器的硬件平台
    navigator.userAgent 当前浏览器信息

5.screen对象

    非常的不常用，获取电脑屏幕像素
        console.log(screen.width);//1920
        console.log(screen.height);//1080

11.DOM文档对象模型

DOM 表示由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。

12.cookies，sessionStorage 和 localStorage 的区别?

首先先区分cookie和session的区别：

1.数据存储位置上的区别：cookie保存在浏览器端，session保存在服务器端！

2.使用方式的区别：

cookie机制

如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。

Cookie是服务器发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都会带上它！

session机制

当服务器收到请求需要创建session对象时，首先会检查客户端请求中是否包含sessionid。如果有sessionid，服务器将根据该id返回对应session对象。如果客户端请求中没有sessionid，服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端。

3.存储大小的区别

cookie ：单个cookie保存的数据不能超过4kb

session：session大小没有限制

sessionStorage与localStorage的区别

1.localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。

sessionStorage的生命周期是在仅在当前会话下有效。

2.

localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。

sessionStorage：敏感账号一次性登录；

3.localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。

13.ES6新特性

1.let 和 const 声明变量的方式，取代了 var 关键字。

2.箭头函数（Arrow Function），简化了函数的书写方式。

3.模板字符串（Template String），允许在字符串中使用变量和表达式，而不需要使用字符串连接符号。

4.解构赋值（Destructuring Assignment），允许从数组和对象中提取值并赋值给变量。

5.默认参数（Default Parameter），在定义函数时可以给参数设置默认值。

6.扩展操作符（Spread Operator），可以在函数调用时展开数组或对象。

14.箭头函数

ES6中允许使用=>来定义函数。箭头函数相当于匿名函数，并简化了函数定义。

箭头函数的特点：

1.箭头函数中没有prototype,因此箭头函数中没有this指向；

2.箭头函数不会创建自己的this，如果存在外层第一个普通函数，在定义的时候会继承它的this；

3.箭头函数的this是继承而来的永远不会变，call/apply/bind也无法改变；

4.箭头函数的this指向全局，使用arguments会报未声明的错误；

5.箭头函数不能构造函数，不能new.target，不能new，没有constructor

15.简述let const var 的区别以及使用场景

var：var定义得变量没有函数作用域概念，在函数外定义是全局变量，在函数内定义是局部变量，拥有变量提升，可以重复声明，后面会将前面得覆盖
let：定义的变量有块级作用域概念，所声明得变量只在let命令所在得代码块有效，没有变量提升，不能够重复声明
const：定义常量、基本上和let一样，是块级作用域，没有变量提升，不能够重复声明，可以修改属性，但是不可以改成新的对象 ,因为它是常量

16.原型和原型链（重点）

在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象。
function Person(age) {
    this.age = age       
}
Person.prototype.name = 'kavin'
var person1 = new Person()
var person2 = new Person()
console.log(person1.name) //kavin
console.log(person2.name)  //kavin
这是每个对象(除null外)都会有的属性，叫做__proto__，这个属性会指向该对象的原型。

原型又分为显式原型和隐式原型：

显式原型：每个函数function都有一个prototype，也就是显式原型

隐式原型：每个实例对象都有一个__proto__，也就是隐式原型

读取对象的属性值时：会自动到原型链当中查找
设置对象的属性值时：不会查找原型链，如果当前对象没有此属性，直接添加此属性并设置其值
方法一般定义在原型中，属性一般通过构造函数定义在对象本身上

17.数组的常用方法

1、sort( )：sort 排序 如果下面参数的正反 控制 升序和降序 ，返回的是从新排序的原数组
2、splice( )：向数组的指定index处插入 返回的是被删除掉的元素的集合，会改变原有数组；截取类 没有参数，返回空数组，原数组不变；一个参数，从该参数表示的索引位开始截取，直至数组结束，返回截取的 数组，原数组改变；两个参数，第一个参数表示开始截取的索引位，第二个参数表示截取的长度，返回截取的 数组，原数组改变；三个或者更多参数，第三个及以后的参数表示要从截取位插入的值。会改变原数据
3、pop( )：从尾部删除一个元素 返回被删除掉的元素，改变原有数组。
4、push( )：向数组的末尾追加 返回值是添加数据后数组的新长度，改变原有数组。
5、unshift( )：向数组的开头添加 返回值是添加数据后数组的新长度，改变原有数组。
6、shift( )：从头部删除一个元素 返回被删除掉的元素，改变原有数组。
7、reverse( )： 原数组倒序  它的返回值是倒序之后的原数组
8、concat( )：数组合并。
9、slice( )：数组元素的截取，返回一个新数组，新数组是截取的元素，可以为负值。从数组中截取，如果不传参，会返回原数组。如果只传入一个参数，会从头部开始删除，直到数组结束，原数组不会改变；传入两个参数，第一个是开始截取的索引，第二个是结束截取的索引，不包含结束截取的这一项，原数组不会改变。最多可以接受两个参数。
10、join( )：讲数组进行分割成为字符串  这能分割一层在套一层就分隔不了了
11、toString( )：数组转字符串；
12、toLocaleString( )：将数组转换为本地数组。
13、forEach( )：数组进行遍历；
14、map( )：没有return时，对数组的遍历。有return时，返回一个新数组，该新数组的元素是经过过滤(逻辑处理)过的函数。
15、filter( )：对数组中的每一运行给定的函数，会返回满足该函数的项组成的数组。
16、every( )：当数组中每一个元素在callback上被返回true时就返回true。（注：every其实类似filter，只不过它的功能是判断是不是数组中的所有元素都符合条件，并且返回的是布尔值）。
17、some( )：当数组中有一个元素在callback上被返回true时就返回true。（注：every其实类似filter，只不过它的功能是判断是不是数组中的所有元素都符合条件，并且返回的是布尔值）。
18、reduce( )：回调函数中有4个参数。prev（之前计算过的值），next（之前计算过的下一个的值），index，arr。把数组列表计算成一个

改变数组本身的方法：

pop()

push()

shift()

unshift()

sort([...])

reverse()

splice()

18.js中有哪些循环，遍历的方法

for循环

for in

map

forEach

filter

19.URL由什么组成

一个完整的URL的组成由于：通信协议（scheme）、主机（host）、端口号（port）、路径（path）、查询（query）、信息片段（fragment）组成。

scheme：通信协议，常用的协议http，ftp等。
host：主机，服务器（计算机）域名系统（DNS），主机名或IP地址。
port：端口号，整数，可选，省略时是默认端口，如http的默认端口是80。
path：路径，由零或多个‘/’隔开的字符串，一般用来表示主机上的一个目录或者文件地址。
query：查询，可选，用于给动态网页传递参数，可有多个参数，用“&”号隔开，每个参数的名和值用“=”号隔开。如：name=zs。
fragmeng：信息片段，字符串，锚点。

20.常见的跨域方式有哪些？

JSONP

CORS

中间代理器

21.http常见的响应状态码

1XX：消息状态码。
2XX：成功状态码。
3XX：重定向状态码。
4XX：客户端错误状态码。
5XX：服务端错误状态码。

22.常见的http请求有哪些，它们的区别是什么?

最常用的四种请求方法：GET, POST, PUT, DELETE

1、get请求：

get：可以理解为取的意思，对应select操作
用来获取数据的，只是用来查询数据，不对服务器的数据做任何的修改，新增，删除等操作。
说明：
get请求会把请求的参数附加在URL后面，这样是不安全的，在处理敏感数据时不用，或者参数做加密处理。
get请求其实本身HTTP协议并没有限制它的URL大小，但是不同的浏览器对其有不同的大小长度限制

2、post请求：

post 可以理解为贴的意思
数据发送到服务器以创建或更新资源，侧重于更新数据，对应update操作
说明：
post请求的请求参数都是请求body中

3、put请求：

put：可以理解为放的意思
数据发送到服务器以创建或更新资源，侧重于创建数据，对应insert操作

 4、delete请求：

delete：字面意思删除，即删除数据，对应delete操作
用来删除指定的资源，它会删除URI给出的目标资源的所有当前内容