2023前端面试题及答案汇总HTML.docx

《2023前端面试题及答案汇总HTML.docx》由会员分享，可在线阅读，更多相关《2023前端面试题及答案汇总HTML.docx（11页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、2023前端面试题及答案汇总1、什么是盒子模型？在网页中，一个元素占有空间G大小由几个部分构成，其中包括元素G内容（content）, 元素G内边距（padding）,元素内边框（border）,元素G外边距（margin）四个部分。 这四个部分占有内空间中，有G部分可以显示相应O内容，而有G部分只用来分隔相邻（D区 域或区域。4个部分一起构成了 css中元素内盒模型。2、行内元素有哪些？块级元素有哪些？空（void）元素有那些？行内元素：a b、span img input、strong select、labeL em、button textar ea块级元素：div uk li、dk dt

2、 dd、p、hl-h6、blockquote空元素：即系没有内容G HTML元素，例如：br、meta、hr、link、input、img3、CSS实现垂直水平居中一道经典内问题，实现方法有许多种，以下是其中一种实现：HTML结构：CSS：.wrapperposition:relative;.contentbackground-color:#6699FF;width:200px;7、请描述一下 cookies, sessionstorage localstoragesessionStorage用于本地存储一个会话（session）中O数据，这些数据只有在同一个会 话中G页面才能访问并且当会话结

3、束后数据也随之俏毁。因此sessionstorage不是一种 长久化G本地存储，仅仅是会话级别G存储。而localstorage用于长久化G本地存储，除 非主动删除数据，否则数据是恒久不会过期内,web storage 和 cookie G 区分Web Storage 0）概念和cookie相像，区分是它是为了更大容量存储设计Cookie 0 大小是受限并且每次你恳求一个新内页面G时候Cookie都会被发送过去，这样无形中 奢侈了带宽，另外cookie还须要指定作用域，不行以跨域调用。除此之外，Web Storage 拥有 setitem,getltem,removeitem,clear 等方

4、法，不像 co Okie须要前端开发者自己封装setCookie, getCookie。但是Cookie也是不行以或缺小 Cookie G作用是与服务器进行交互，作为 规范G一部分而存在，而Web Storage 仅仅是为了在本地存储数据而生。8、手写数组快速排序关于快排算法G具体说明，可以参考阮一峰老师G文章快速排序快速排序切思想很简洁，整个排序过程只须要三步：（1）在数据集之中，选择一个元素作为基准（pivot）。（2）全部小于基准切元素，都移到基准g左边；全部大于基准切元素，都移到基准 G右边。（3）对基准左边和右边G两个子集，不断重复第一步和其次步，直到全部子集只剩下一 个元素为止。9

5、统计字符串aaaabbbccccddfgh中字母个数或统计最多字母数。var str = aaaabbbccccddfgh;2345678910van obj = ;for(var i-0;i.testcolor:red;/ 2、属性 Hack.test(color:#0909; /* For IE8+ */*color:#f00; /* For IE7 and earlier */_color/* For IE6 and earlier */)/ 3、选择符Hack* html .testcolor:#090;/* For IE6 and earlier */* + html .testco

6、lor:#ff0;/* For IE7 */6、简述同步和异步区分同步是堵塞模式，异步是非堵塞模式。同步就是指一个进程在执行某个恳求G时候，若该恳求须要一段时间才能返回信息，那么这 个进程将会始终等待下去，直到收到返回信息才接着执行下去；异步是指进程不须要始终等下去，而是接着执行下面内操作，不管其他进程G状态。当有消 息返回时系统会通知进程进行处理，这样可以提高执行G效率。7、px和em 区分px和em都是长度单位，区分是，pxG值是固定以指定是多少就是多少，计算比较简洁。 em得值不是固定并且em会继承父级元素0字体大小。阅读器O默认字体高都是16px。所以未经调整G阅读器都符合：lem =

7、 16pxo那么12P x=0.75emz 10px=0.625em8、什么叫优雅降级和渐进增加？渐进增力口 progressive enhancement：针对低版本阅读器进行构建页面，保证最基本G功能，然后再针对高级阅读器进行效果、交 互等改进和追加功能达到更好G用户体验。优雅降级 graceful degradation：一起先就构建完整G功能，然后再针对低版本阅读器进行兼容。区分：a.优雅降级是从困难G现状起先，并试图削减用户体验G供应b.渐进增加则是从一个特别基础能够起作用O版本起先，并不断扩充，以适应将来环 境G须要c.降级（功能衰减）意味着往回看；而渐进增加则意味着朝前看，同时保

8、证其根基处于平 安地带9、阅读器内内核分别是什么？IE: trident 内核Firefox： gecko 内核Safari： webkit 内核Opera：以前是 presto 内核，Opera 现一改用 Google Chrome O Blink 内核Chrome： Blink（基于 webkit, Google 与 Opera Software 共同开发）avaScript 部分1、怎样添加、移除、移动、复制、创建和查找节点？1)创建新节点createDocumentFragmentO 创建一个 DOM 片段createElement() 创建一个具体内元素createTextNode(

9、) 创建一个文本节点2)添加、移除、替换、插入appendChild() 添加removeChild() 移除replaceChild() 替换insertBefore() 插入3)查找getElementsByTagName() 通过标签名称getElementsByName() /通过元素 Name 属性值getElementById() 通过元素 Id,唯性2、实现一个函数clone,可以对JavaScript中内5种主要数据类型(包 括 Number、String、Object、Array Boolean)进行值复制。(Obj ect.prototype.toStTing.call()

10、方法及面试应用)/*对象克隆*支持基本数据类型及对象*递归方法*/1 function done(obj) var o;switch (typeof obj) case undefined: break;case -string: o = obj + break;case nunber:o obj - 0;break;case boolean: o = obj;break;case object:二二分两汽比f 修 二”二，丞处if (obj = null) o = null; else if (Object.prototype.toString.call(obj).slice(8, -1)

11、= Array) o = ；for (var i = 0; i obj.length; i+4) o.push(done(obji);) else 。=； for (var k in obj) ok done(objk);)3132break;default:33 o - obj;34 break;35 )36 return o;37 )3、如何消退一个数组里面重复0）元素?van arrl =1,2,2,2,3,3,3,4,5,6, arr2 ;for(var i - 0,len - arrl.length; i len; i+) if(arr2.indexOf(arrli) 0)arr2.

12、push(arrli);)document.write(arr2);4、想实现一个对页面某个节点O拖曳？如何做？（运用原生JS）。留意：为了让元素可拖动，须要运用HTML5 draauable展性。提示：链接和图片默认是可拖动不须要draggable属性。在拖放G过程中会触发以下事务：在拖动目标上触发事务（源元素）： ondragstart -用户起先拖动元素时触发 ondrag -元素正在拖动时触发 ondragend -用户完成元素拖动后触发 释放目标时触发O事务： ondragenter -当被鼠标拖动G对象进入其容器范围内时触发此事务 ondragover -当某被拖动G对象在另一对象

13、容器范围内拖动时触发此事务 ondragleave -当被鼠标拖动对象离开其容器范围内时触发此事务 ondrop -在一个拖动过程中，释放鼠标键时触发此事务1 2 3 4 5 vtltleAondrag相关事件“title6 7 .droptarget 8 float: left;9 width: 106px;18height: 35px;11 nargin: ISpx;12 padding: 10px;13 border: Ipx solid ffaaaaaa;14 )15 16 17 18 19 |fiz(Wji! 2。 21 22p 5ty】ec】ear:both;注意：Internet

14、 Explorer 8 及更早 IE 版本或 Safari 5.123 24 2S /*拖功赳制武、，26 docUMcnt. addEvcntListcncr(draRstart*, funct ion(0vcnt) 272n寸所.、方建设ft#撵岸 “ 三,28 event.dataTransfer.setData(*Texfevent.target.id);29 /掩昉p吃麦腔/出若丈丁30 document .get ElementBy Id (demo*). innerHTML-开始拖动 p 元素.“；31 ”槎杀毡汕八U的透明设32 event-target.style.opaci

15、ty - *0.4*;34 俄同K.改变崎出文本的35 docuoent.addEventListener(drag, function(event) 36 document.getElementById(*deoM).style.color -red;37 )；38 : 尾冷元奏随出一*文本元W诩嘀度39 document.addEventListener(dragendw, function(event) 40document.getEleentById(*deoM). InnerHTML - 完成 p 元素的拖动七41event.target.style.opac1ty 1;S );43

16、/而为2位京Z云/44，为:索为入dgp-e9t.尊弟Nv的边e”式45 document.addEventListener(dragenter- function(event) 46 if ( event.target.classNaae droptarget ) 47event .target.style.border - 3px dotted red;48)49 )；se /取认慵况,下*软*无奈不Ht在MH元承中也攸。冬造止元赛二51 document. addEvtLlstener(dragover- afunction(event) 52 vent.prvontDcfault();

17、53 ；修 ”打母龙蟀尤JF加VWroptoeet，的边修出K55 document.addEventListenerCdragleave* function(event) S6if ( event.target.classNaoe - droptarget ) 57event.target.style.border -58)59 )；60 7于d2P.防止*莫鑫第断(比d2P中*g是默认打开)61 I 了一第 一 ,.： JVP?/S2 I/Lgef8t“J /f63 ，一分f 留65 document.addEventListener(drop, functicxi(event) 66ev

18、ent.preventDefault();67 if ( event.target.className droptarget* ) 68document .getElement8yId(*deno,*) . style-color - *;69event.target.style.border - *;70var data - event .dataTransf er. getData(*Text* );71event target - appendCbiId(document, getElementByld(data);7273 )；74 75 76 5、在Javascript中什么是伪数组

19、？如何将伪数组转化为标准数组?伪数组（类数组）：无法干脆调用数组方法或期望length属性有什么特别内行为，但仍可 以对真正数组遍历方法来遍历它们。典型G是函数G argument参数，还有像调用getEI ementsByTagName,document.childNodes 之类它们都返回 NodeList 对象都属于 伪数组。a.运用 Array.prototype.slice.call();1 Array.prototype.siice.cal1(2 0:Mlikeke,31：12,42:true, 5 length:36 )； 7b.运用.slice.call（）, 了解js原型链G都知道，事实上这种方法和第中方法是样（D,但 上面第一种方式相对效率更高。.slice.call( 0:likeke 1:12, 2:true, length:3)；c运用ES6中Array.from方法;Array.from(3456781:12, 2:2013,3：“长安大学”, length:4)；6、Javascript 中 callee 和 caller （D作用？caller是返回个对函数G引用，该函数调用了当前函数;callee是返回正在被执行（D function函数，也就是所指定（7） function对象（7）正文。