2023年6月21日发(作者：)
前端基础练习题菜鸟部分1. get，post区别2. 状态码说⼏个？3. Cookie、sessionStorage、localStorage，IndexedDB的区别，容量，查询索引，同步异步4. HTML5新特点 语义化，本地存储，多媒体，图形，3D的⽀持，离线应⽤5. es6新特点，扩展运算符,let const Symbol 箭头函数（Arrow Functions）有特别有⽤的解构 Promises 函数参数默认值 类，实际上是语法糖6. css3新特点，增添了border和background的属性，对图形操作的属性，动画，flex布局，还有新增了⼀些伪类7. 在地址栏⾥输⼊⼀个URL,到这个页⾯呈现出来，中间会发⽣什么？即树的解析，DOM，CSSOM，渲染树，在dom树的构建过程中如果遇到JS脚本和外部JS连接，则会停⽌构建DOM树来执⾏和下载相应的代码8. CSS盒模型？9. link标签和import标签的区别10. ⽔平居中的⽅法，垂直居中的⽅法，flex，绝对定位+transform，margin auto，display inline block，text-align center11. 了解重绘和重排吗？12. 使元素消失的⽅法有哪些？13. 说⼀下闭包14. 说⼀下类的创建和继承（ype = (ype);），原型链15. 异步，promise(then的链式写法)，async16. 前端的事件流，事件委托17. clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？18. apply，call，bind19. typeof，instantof，基本数据类型20. let，var，const，死区21. vue的⽣命周期，总共分为三个阶段：初始化、运⾏中、销毁。挂载数据，绑定事件等等，然后执⾏created函数，编译模板为虚拟dom进⾏渲染，渲染出真实dom，然后执⾏mounted钩⼦函数，当组件或实例的数据更改之后，会⽴即执⾏beforeUpdate，利⽤diff算法进⾏对⽐之后重新渲染，22. 操作DOM的必要基本函数 parentNode，contains()Array push() length 注意不是函数 pop()(2,0,“Lemon”,“Kiwi”); index, 要删除的多少个，后⾯的是要添加进去的，真奇怪(0) 浅拷贝数组 splice(0)清空原数组slice(start,end)：从已有的数组中返回选定的元素。括号内有两个参数，第⼀个参数为start，第⼆个参数为end。对原数组对象不产⽣任何影响。(arr2)bool indexOf(var) 不存在返回-123. 常⽤标签及其属性24. 常⽤css25. http发送报头与相应报头中期部分：26. 清除浮动的⽅法27. 两个动画的详细信息，要会写出来28. this，在JavaScript中，this通常指向的是我们正在执⾏的函数本⾝，或者是指向该函数所属的对象（运⾏时）29. ⼿写bind，返回⼀个函数，⾥⾯⽤()，也就是说，apply返回的是这个构造函数返回的obj，构造函数返回obj，或者说，该返回什么，就返回什么30. ⼿写new，分三步，创建⼀个{}，赋予__proto__，⽤constorucor的apply，返回31. ⼿写闭包，「函数」和「函数内部能访问到的变量」（也叫环境）的总和，就是⼀个闭包。那么这个代码区域执⾏完之前，外层的那个变量肯定不能被释放，其实很好写32. prototype JS中所有的东西都由Object衍⽣⽽来, 即所有东西原型链的终点指向ypeprototype实际上就是为了减少代码的33. js垃圾回收，内存泄漏⼤致了解，⼀般来说没有被引⽤的对象就是垃圾，就是要被清除， 有个例外如果⼏个对象引⽤形成⼀个环，互相引⽤，但根访问不到它们，这⼏个对象也是垃圾，也要被清除。⼀种算法是标记 标记-清除 算法34. websock⼤致了解，为什么是长连接的35. 强制缓存和协商缓存有什么区别？36. 事件循环机制Eventloop⼤致了解（1）所有同步任务都在主线程上执⾏，形成⼀个执⾏栈（execution context stack）。（2）主线程之外，还存在⼀个"任务队列"（task queue）。只要异步任务有了运⾏结果，就在"任务队列"之中放置⼀个事件。（3）⼀旦"执⾏栈"中的所有同步任务执⾏完毕，系统就会读取"任务队列"，看看⾥⾯有哪些事件。那些对应的异步任务，于是结束等待状态，进⼊执⾏栈，开始执⾏。（4）主线程不断重复上⾯的第三步。偏难怪：37. ⾃⼰实现⼀个vue38. redis39. 熟练运⽤localStorage，IndexedDB40. 有个特别的元素，⼀个是p⼀个是a，p是块元素，但是其不能包含除了它本⾝之外的任何块元素，a是内联元素，但是它可以包含除了它本⾝外的任意块元素冒泡事件很多，个⼈觉得记住常见的不⽀持冒泡事件就可以了有：①focus②blur③mouseenter④mouseleave⑤load⑥unload⑦resizeHTML⾏内元素你注意，label，select，textarea(多⾏⽂本框)HTML5 提供两种新对象，通过 javascript API 来存储本地数据，Web Storage实际上由两部分组成：sessionStorage与localStorage。sessionStorage⽤于本地存储⼀个会话（session）中的数据，这些数据只有在同⼀个会话中的页⾯才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是⼀种持久化的本地存储，仅仅是会话级别的存储。localStorage⽤于持久化的本地存储，除⾮主动删除数据，否则数据是永远不会过期的。什么是会话cookie,什么是持久cookie?1》会话cookie:是⼀种临时的cookie，它记录了⽤户访问站点时的设置和偏好，关闭浏览器，会话cookie就被删除了2》持久化cookie：存储在硬盘上，不同的操作系统，不同的浏览器存储的位置不⼀样，不管浏览器退出，或电脑重启，持久cookie都存在。持久cookie有过期时间。get、post的区别，此题⽐较简单，但⼀定要回答的全⾯最⼤的区别就是⽤法不同，get是获取数据，post是发送数据最⼤的不同是get传参⽅式是通过地址栏URL传递，是可以直接看到get传递的参数，post传参⽅式参数URL不可见，get把请求的数据在URL后通过？连接，通过&进⾏参数分割。post将参数存放在HTTP的包体内传递数据是通过URL进⾏传递，对传递的数据长度是受到URL⼤⼩的限制，URL最⼤长度是2048个字符。post没有长度限制请求的记录会留在历史记录中，post请求不会留在历史记录请求只URL编码，post⽀持多种编码⽅式后退不会有影响，post后退会重新进⾏提交请求可以被缓存，post不可以被缓存只⽀持ASCII字符，post没有字符类型限制你所知道的http的响应码及含义？此题有过开发经验的都知道⼏个，但还是那句话，⼀定要回答的详细且全⾯。1xx(临时响应)2xx(成功)3xx(重定向)4xx(请求错误)5xx(服务器错误)100: 请求者应当继续提出请求。101(切换协议) 请求者已要求服务器切换协议，服务器已确认并准备进⾏切换。2xx(成功)200：正确的请求返回正确的结果201：表⽰资源被正确的创建。⽐如说，我们 POST ⽤户名、密码正确创建了⼀个⽤户就可以返回 201。202：请求是正确的，但是结果正在处理中，这时候客户端可以通过轮询等机制继续请求。3xx(重定向)300：请求成功，但结果有多种选择。301：请求成功，但是资源被永久转移。303：使⽤ GET 来访问新的地址来获取资源。304：请求的资源并没有被修改过4xx(请求错误)400：请求出现错误，⽐如请求头不对等。401：没有提供认证信息。请求的时候没有带上 Token 等402：为以后需要所保留的状态码。403：请求的资源不允许访问。就是说没有权限。404：请求的内容不存在。5xx(服务器错误)500：服务器错误。501：请求还没有被实现。alt是html标签的属性，⽽title既是html标签，⼜是html标签属性。title标签这个不⽤多说，⽹页的标题就是写在这对标签之内的。title作为属性时，⽤来为元素提供额外说明信息。例如，给超链接标签a添加了title属性，把⿏标移动到该链接上⾯是，就会显⽰title的内容，以达到补充说明或者提⽰的效果。⽽alt属性则是⽤来指定替换⽂字，只能⽤在img、area和input元素中（包括applet元素），⽤于⽹页中图⽚⽆法正常显⽰时给⽤户提供⽂字说明使其了解图像信息。JSH5使⽤ getCurrentPosition() ⽅法来获得⽤户的位置 但是由于隐私设置你是没法在浏览器⾥直接测试的Date() 返回当⽇的⽇期和时间。 getDate() 从 Date 对象返回⼀个⽉中的某⼀天 (1 ~ 31)。 getDay() 从 Date 对象返回⼀周中的某⼀天(0 ~ 6)。 getYear() 从 Date 对象以四位数字返回年份。 getTime() 返回 1970 年 1 ⽉ 1 ⽇⾄今的毫秒数。oundColor = ‘red’; // 这是没问题的ound-color = ‘red’; // 这是错的，浏览器看不懂啊…[“background-color”] = ‘red’; // 这也是可以的export和export default的区别？使⽤上的不同export default xxximport xxx from ‘./’export xxximport {xxx} from ‘./’es6新特性let const Symbol 箭头函数（Arrow Functions）有特别有⽤的解构 Promises 函数参数默认值 类，实际上是语法糖var有⼀个问题，就是定义的变量有时候会成为全局变量。let所声明的变量，只在let所在的代码块内有效。const声明的变量是常量，不能被修改；类似于Java中的final关键字。因此⼀定要声明时赋值。在ES6中，为字符串扩展了⼏个新的APIincludes(“xxx”)：返回布尔值，表⽰是否包含xxxstartsWith(“xxx”)：返回布尔值，表⽰是否以xxx开头endsWith(“xxx”)：返回布尔值,表⽰是否以xxx结尾Promise所谓Promise，简单来说就是容器，⾥⾯保存着某个未来才会结束的事件（通常为异步操作）的结果。从语法上说，Promise是⼀个对象，它可以获取异步操作的消息。Promise提供统⼀的API，各种异步操作都可以⽤这样的⽅式进⾏处理。resolve, reject相当于return，⽤于then使⽤。const promise = new Promise(function (resolve, reject) { // 执⾏异步操作 if (/*异步操作成功*/){ // 调⽤resolve，代表Promise将返回成功的结果 resolve(value) }else { // 调⽤reject，代表Promise将返回错误的结果 reject(error) }})如果想⽤等到promise异步操作执⾏完成，做⼀些事情，可以通过promise的then()⽅法来实现：(function(value)){ // 异步执⾏成功后的回调}如果想要处理Promise异步执⾏失败的事件，还可以跟上catch：(function(value)){ // 异步执⾏成功后的回调}.catch(function(error)){ // 异步执⾏失败后的回调}Set和MapES6提供了Set和Map的数据结构。SetSet本质与数组类似。不同于Set中只能保存不同的元素，如果元素相同会被忽略。和Java中的Set集合⾮常相似。构造函数：let set = new Set();(1); // [1]let set2 = new Set([1,2,3,4,5]) // [1,2,3,4,5]⽅法：// 添加，元素内容不可重复，重复会被忽略()// 清空()// 删除指定元素，删除的是元素内容，⽽不是下标(value)// 判断指定元素是否存在(value)// 遍历h(function(){})// 元素个数pMap本质是与Object类似的结构。不同在于Object强制规定key值只能是字符串。⽽Map对象的key可以是任意对象：object是
body{ font:12px; width:100%;}
}
@media print {
body{ font:14px; width:595px;} /*
⽤于打印时将宽度设置为595px(A4) */
} css⽔平、垂直居中的写法，请⾄少写出4种？⽔平居中⾏内元素: text-align: center块级元素: margin: 0 automargin:0 auto=margin:0 auto 0 auto，表⽰上下为0，左右为auto；⾸先如果想要设置居中,width是必须设置的,如果不设置width元素,那么块级元素⼀定会占据100%的宽度，auto是指平分剩余空间,⽐如宽度为200,⽗元素的宽度为1000,那么auto就是指⽔平⽅向平分剩余的宽度(1000-200)/2，auto实际上是说，⾃动平均分配。margin-left: auto;就表⽰仅左边分配所有的剩余空间，也就是跑到右边去了，实现了float:left;的效果。垂直⽅向不可以margin: auto 0，margin:auto=margin:auto auto auto auto，即上下左右都automargin:0 auto=margin:0 auto 0 auto，表⽰上下为0，左右为auto；position:absolute +left:50%+ transform:translateX(-50%)绝对定位元素相对的元素是它最近的⼀个祖先，该祖先满⾜：position的值必须是：relative、absolute、fixed，若没有这样的祖先则相对于body进⾏定位。偏移值由其top、bottom、left、right值确定。translate()函数是css3的新特性.在不知道⾃⾝宽⾼的情况下，可以利⽤它来进⾏⽔平垂直居中.。 translate(-50%,-50%) 作⽤是，往上（x轴）,左（y轴）移动⾃⾝长宽的 50%，以使其居于中⼼位置。display:flex + justify-content: center⾸先flex是⽔平布局，另外jc这个能够区分开，嗯。垂直居中设置line-height 等于heightline-height是⼀个长度，⽽不同于top，当font-size等于line-height时，⾏距 = line-height - font-size = 0；⽽当font-size⼤于line-height时，则会出现⾏距为负值，则两⾏重叠，也就是说，line-height是有必要空⽩的height(因为包括⾏距)。在没有设置div的height属性时，div的⾼度根据line-height的⼤⼩⽽变化，且⽂字垂直居中。height = line-height时字体就会居中对齐。height>line-height时，字体上浮，可以理解为没有填充完，还有空位，height , ,
inline-table 此元素会作为内联表格来显⽰（类似），表格前后没有换⾏符。
table-row 此元素会作为⼀个表格⾏显⽰（类似 ）。
默认值： inline
继承： nooverflow 属性默认值： visible继承： novisible 默认值。内容不会被修剪，会呈现在元素框之外。hidden 内容会被修剪，并且其余内容是不可见的。scroll 内容会被修剪，但是浏览器会显⽰滚动条以便查看其余的内容。auto 如果内容被修剪，则浏览器会显⽰滚动条以便查看其余的内容。inherit 规定应该从⽗元素继承 overflow 属性的值。1rem、1em、1vh、1px各⾃代表的含义？remrem是全部的长度都相对于根元素元素。通常做法是给html元素设置⼀个字体⼤⼩，然后其他元素的长度单位就为rem。em⼦元素字体⼤⼩的em是相对于⽗元素字体⼤⼩元素的width/height/padding/margin⽤em的话是相对于该元素的font-sizevw/vh全称是 Viewport Width 和 Viewport Height，视窗的宽度和⾼度，相当于 屏幕宽度和⾼度的 1%，不过，处理宽度的时候%单位更合适，处理⾼度的 话 vh 单位更好。pxpx像素（Pixel）。相对长度单位。像素px是相对于显⽰器屏幕分辨率⽽⾔的。⼀般电脑的分辨率有{1920*1024}等不同的分辨率1920*1024 前者是屏幕宽度总共有1920个像素,后者则是⾼度为1024个像素transform: scale(0.5); 很明显是给⼀个div放缩⽤的。rotate(7deg);是旋转。盒模型是css中重要的基础知识，也是必考的基础知识盒模型的组成，由⾥向外content,padding,border,margin.在IE盒⼦模型中，width表⽰content+padding+border这三个部分的宽度在标准的盒⼦模型中，width指content部分的宽度box-sizing:border-box;表⽰将padding，border放⼊width中。BFC(Block Formatting Context)，块级格式化上下⽂，⼀个创建了新的BFC的盒⼦是独⽴布局的，盒⼦⾥⾯的⼦元素的样式不会影响到外⾯的元素。BFC是Web页⾯中盒模型布局的⼀种CSS渲染模式。它的定位体系属于 常规⽂档流。浮动元素和绝对定位元素，⾮块级盒⼦的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒⼦，都会为他们的内容创建新的BFC（块级格式上下⽂）。或者说，离经叛道的元素。完全不影响的话，你能够想象到该怎么的css。label标签主要是⽅便⿏标点击使⽤，扩⼤可点击的范围，增强⽤户操作体验。label标签常⽤于与checkbox或radio关联，以实现点击⽂字也能选中/取消checkbox或radio。如下图，点击⽂字和点击前⾯的单选框效果相同，即加⼤了控件的可点击区域较⼤，因为点击标签或控件都将激活控件，这对于复选框和单选框特别有⽤。label标签的关联⽅式主要有两种，显⽰关联和隐式关联：显式关联是通过label标签的for属性，显式与另⼀个表单控件关联。需要注意的是，for属性的值必须是与label标签在同⼀⽂档中的可标记表单元素的id，注意是id⽽不是name。
隐式关联是直接将表单控件放到label标签内，这种情况下，label标签只能包含⼀个表单元素，包含多个只对第⼀个有效。如下：遍历A节点的⽗节点下的所有⼦节点这题考查原⽣的js操作dom,属于⾮常简单的基础题，但长时间使⽤mvvm框架，可能会忘记浏览器渲染页⾯的⼀般过程：1.浏览器解析html源码，然后创建⼀个 DOM树。并⾏请求 css/image/js在DOM树中，每⼀个HTML标签都有⼀个对应的节点，并且每⼀个⽂本也都会有⼀个对应的⽂本节点。DOM树的根节点就是 documentElement，对应的是html标签。2.浏览器解析CSS代码，计算出最终的样式数据。构建CSSOM树。对CSS代码中⾮法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置 < ⽤户设置 < 外链样式 < 内联样式 < html中的style。 Tree + CSSOM --> 渲染树（rendering tree）。渲染树和DOM树有点像，但是是有区别的。DOM树完全和html标签⼀⼀对应，但是渲染树会忽略掉不需要渲染的元素，⽐如head、display:none的元素等。⽽且⼀⼤段⽂本中的每⼀个⾏在渲染树中都是独⽴的⼀个节点。渲染树中的每⼀个节点都存储有对应的css属性。4.⼀旦渲染树创建好了，浏览器就可以根据渲染树直接把页⾯绘制到屏幕上。以上四个步骤并不是⼀次性顺序完成的。如果DOM或者CSSOM被修改，以上过程会被重复执⾏。实际上，CSS和JavaScript往往会多次修改DOM或者CSSOM。CORS是⼀个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从⽽克服了AJAX只能同源使⽤的限制。CORS需要浏览器和服务器同时⽀持。⽬前，所有浏览器都⽀持该功能，IE浏览器不能低于IE10。整个CORS通信过程，都是浏览器⾃动完成，不需要⽤户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全⼀样。浏览器⼀旦发现AJAX请求跨源，就会⾃动添加⼀些附加的头信息，有时还会多出⼀次附加的请求，但⽤户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接⼝，就可以跨源通信。AJAX即“Asynchronous Javascript And XML”，是指⼀种创建交互式⽹页应⽤的⽹页开发技术。AJAX 是⼀种⽤于创建快速动态⽹页的技术。它可以令开发者只向服务器获取数据（⽽不是图⽚，HTML⽂档等资源），互联⽹资源的传输变得前所未有的轻量级和纯粹，这激发了⼴⼤开发者的创造⼒，使各式各样功能强⼤的⽹络站点，和互联⽹应⽤如⾬后春笋⼀般冒出，不断带给⼈惊喜。Ajax核⼼对象XMLHttpRequest.
2023年6月21日发(作者：)
前端基础练习题菜鸟部分1. get，post区别2. 状态码说⼏个？3. Cookie、sessionStorage、localStorage，IndexedDB的区别，容量，查询索引，同步异步4. HTML5新特点 语义化，本地存储，多媒体，图形，3D的⽀持，离线应⽤5. es6新特点，扩展运算符,let const Symbol 箭头函数（Arrow Functions）有特别有⽤的解构 Promises 函数参数默认值 类，实际上是语法糖6. css3新特点，增添了border和background的属性，对图形操作的属性，动画，flex布局，还有新增了⼀些伪类7. 在地址栏⾥输⼊⼀个URL,到这个页⾯呈现出来，中间会发⽣什么？即树的解析，DOM，CSSOM，渲染树，在dom树的构建过程中如果遇到JS脚本和外部JS连接，则会停⽌构建DOM树来执⾏和下载相应的代码8. CSS盒模型？9. link标签和import标签的区别10. ⽔平居中的⽅法，垂直居中的⽅法，flex，绝对定位+transform，margin auto，display inline block，text-align center11. 了解重绘和重排吗？12. 使元素消失的⽅法有哪些？13. 说⼀下闭包14. 说⼀下类的创建和继承（ype = (ype);），原型链15. 异步，promise(then的链式写法)，async16. 前端的事件流，事件委托17. clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？18. apply，call，bind19. typeof，instantof，基本数据类型20. let，var，const，死区21. vue的⽣命周期，总共分为三个阶段：初始化、运⾏中、销毁。挂载数据，绑定事件等等，然后执⾏created函数，编译模板为虚拟dom进⾏渲染，渲染出真实dom，然后执⾏mounted钩⼦函数，当组件或实例的数据更改之后，会⽴即执⾏beforeUpdate，利⽤diff算法进⾏对⽐之后重新渲染，22. 操作DOM的必要基本函数 parentNode，contains()Array push() length 注意不是函数 pop()(2,0,“Lemon”,“Kiwi”); index, 要删除的多少个，后⾯的是要添加进去的，真奇怪(0) 浅拷贝数组 splice(0)清空原数组slice(start,end)：从已有的数组中返回选定的元素。括号内有两个参数，第⼀个参数为start，第⼆个参数为end。对原数组对象不产⽣任何影响。(arr2)bool indexOf(var) 不存在返回-123. 常⽤标签及其属性24. 常⽤css25. http发送报头与相应报头中期部分：26. 清除浮动的⽅法27. 两个动画的详细信息，要会写出来28. this，在JavaScript中，this通常指向的是我们正在执⾏的函数本⾝，或者是指向该函数所属的对象（运⾏时）29. ⼿写bind，返回⼀个函数，⾥⾯⽤()，也就是说，apply返回的是这个构造函数返回的obj，构造函数返回obj，或者说，该返回什么，就返回什么30. ⼿写new，分三步，创建⼀个{}，赋予__proto__，⽤constorucor的apply，返回31. ⼿写闭包，「函数」和「函数内部能访问到的变量」（也叫环境）的总和，就是⼀个闭包。那么这个代码区域执⾏完之前，外层的那个变量肯定不能被释放，其实很好写32. prototype JS中所有的东西都由Object衍⽣⽽来, 即所有东西原型链的终点指向ypeprototype实际上就是为了减少代码的33. js垃圾回收，内存泄漏⼤致了解，⼀般来说没有被引⽤的对象就是垃圾，就是要被清除， 有个例外如果⼏个对象引⽤形成⼀个环，互相引⽤，但根访问不到它们，这⼏个对象也是垃圾，也要被清除。⼀种算法是标记 标记-清除 算法34. websock⼤致了解，为什么是长连接的35. 强制缓存和协商缓存有什么区别？36. 事件循环机制Eventloop⼤致了解（1）所有同步任务都在主线程上执⾏，形成⼀个执⾏栈（execution context stack）。（2）主线程之外，还存在⼀个"任务队列"（task queue）。只要异步任务有了运⾏结果，就在"任务队列"之中放置⼀个事件。（3）⼀旦"执⾏栈"中的所有同步任务执⾏完毕，系统就会读取"任务队列"，看看⾥⾯有哪些事件。那些对应的异步任务，于是结束等待状态，进⼊执⾏栈，开始执⾏。（4）主线程不断重复上⾯的第三步。偏难怪：37. ⾃⼰实现⼀个vue38. redis39. 熟练运⽤localStorage，IndexedDB40. 有个特别的元素，⼀个是p⼀个是a，p是块元素，但是其不能包含除了它本⾝之外的任何块元素，a是内联元素，但是它可以包含除了它本⾝外的任意块元素冒泡事件很多，个⼈觉得记住常见的不⽀持冒泡事件就可以了有：①focus②blur③mouseenter④mouseleave⑤load⑥unload⑦resizeHTML⾏内元素你注意，label，select，textarea(多⾏⽂本框)HTML5 提供两种新对象，通过 javascript API 来存储本地数据，Web Storage实际上由两部分组成：sessionStorage与localStorage。sessionStorage⽤于本地存储⼀个会话（session）中的数据，这些数据只有在同⼀个会话中的页⾯才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是⼀种持久化的本地存储，仅仅是会话级别的存储。localStorage⽤于持久化的本地存储，除⾮主动删除数据，否则数据是永远不会过期的。什么是会话cookie,什么是持久cookie?1》会话cookie:是⼀种临时的cookie，它记录了⽤户访问站点时的设置和偏好，关闭浏览器，会话cookie就被删除了2》持久化cookie：存储在硬盘上，不同的操作系统，不同的浏览器存储的位置不⼀样，不管浏览器退出，或电脑重启，持久cookie都存在。持久cookie有过期时间。get、post的区别，此题⽐较简单，但⼀定要回答的全⾯最⼤的区别就是⽤法不同，get是获取数据，post是发送数据最⼤的不同是get传参⽅式是通过地址栏URL传递，是可以直接看到get传递的参数，post传参⽅式参数URL不可见，get把请求的数据在URL后通过？连接，通过&进⾏参数分割。post将参数存放在HTTP的包体内传递数据是通过URL进⾏传递，对传递的数据长度是受到URL⼤⼩的限制，URL最⼤长度是2048个字符。post没有长度限制请求的记录会留在历史记录中，post请求不会留在历史记录请求只URL编码，post⽀持多种编码⽅式后退不会有影响，post后退会重新进⾏提交请求可以被缓存，post不可以被缓存只⽀持ASCII字符，post没有字符类型限制你所知道的http的响应码及含义？此题有过开发经验的都知道⼏个，但还是那句话，⼀定要回答的详细且全⾯。1xx(临时响应)2xx(成功)3xx(重定向)4xx(请求错误)5xx(服务器错误)100: 请求者应当继续提出请求。101(切换协议) 请求者已要求服务器切换协议，服务器已确认并准备进⾏切换。2xx(成功)200：正确的请求返回正确的结果201：表⽰资源被正确的创建。⽐如说，我们 POST ⽤户名、密码正确创建了⼀个⽤户就可以返回 201。202：请求是正确的，但是结果正在处理中，这时候客户端可以通过轮询等机制继续请求。3xx(重定向)300：请求成功，但结果有多种选择。301：请求成功，但是资源被永久转移。303：使⽤ GET 来访问新的地址来获取资源。304：请求的资源并没有被修改过4xx(请求错误)400：请求出现错误，⽐如请求头不对等。401：没有提供认证信息。请求的时候没有带上 Token 等402：为以后需要所保留的状态码。403：请求的资源不允许访问。就是说没有权限。404：请求的内容不存在。5xx(服务器错误)500：服务器错误。501：请求还没有被实现。alt是html标签的属性，⽽title既是html标签，⼜是html标签属性。title标签这个不⽤多说，⽹页的标题就是写在这对标签之内的。title作为属性时，⽤来为元素提供额外说明信息。例如，给超链接标签a添加了title属性，把⿏标移动到该链接上⾯是，就会显⽰title的内容，以达到补充说明或者提⽰的效果。⽽alt属性则是⽤来指定替换⽂字，只能⽤在img、area和input元素中（包括applet元素），⽤于⽹页中图⽚⽆法正常显⽰时给⽤户提供⽂字说明使其了解图像信息。JSH5使⽤ getCurrentPosition() ⽅法来获得⽤户的位置 但是由于隐私设置你是没法在浏览器⾥直接测试的Date() 返回当⽇的⽇期和时间。 getDate() 从 Date 对象返回⼀个⽉中的某⼀天 (1 ~ 31)。 getDay() 从 Date 对象返回⼀周中的某⼀天(0 ~ 6)。 getYear() 从 Date 对象以四位数字返回年份。 getTime() 返回 1970 年 1 ⽉ 1 ⽇⾄今的毫秒数。oundColor = ‘red’; // 这是没问题的ound-color = ‘red’; // 这是错的，浏览器看不懂啊…[“background-color”] = ‘red’; // 这也是可以的export和export default的区别？使⽤上的不同export default xxximport xxx from ‘./’export xxximport {xxx} from ‘./’es6新特性let const Symbol 箭头函数（Arrow Functions）有特别有⽤的解构 Promises 函数参数默认值 类，实际上是语法糖var有⼀个问题，就是定义的变量有时候会成为全局变量。let所声明的变量，只在let所在的代码块内有效。const声明的变量是常量，不能被修改；类似于Java中的final关键字。因此⼀定要声明时赋值。在ES6中，为字符串扩展了⼏个新的APIincludes(“xxx”)：返回布尔值，表⽰是否包含xxxstartsWith(“xxx”)：返回布尔值，表⽰是否以xxx开头endsWith(“xxx”)：返回布尔值,表⽰是否以xxx结尾Promise所谓Promise，简单来说就是容器，⾥⾯保存着某个未来才会结束的事件（通常为异步操作）的结果。从语法上说，Promise是⼀个对象，它可以获取异步操作的消息。Promise提供统⼀的API，各种异步操作都可以⽤这样的⽅式进⾏处理。resolve, reject相当于return，⽤于then使⽤。const promise = new Promise(function (resolve, reject) { // 执⾏异步操作 if (/*异步操作成功*/){ // 调⽤resolve，代表Promise将返回成功的结果 resolve(value) }else { // 调⽤reject，代表Promise将返回错误的结果 reject(error) }})如果想⽤等到promise异步操作执⾏完成，做⼀些事情，可以通过promise的then()⽅法来实现：(function(value)){ // 异步执⾏成功后的回调}如果想要处理Promise异步执⾏失败的事件，还可以跟上catch：(function(value)){ // 异步执⾏成功后的回调}.catch(function(error)){ // 异步执⾏失败后的回调}Set和MapES6提供了Set和Map的数据结构。SetSet本质与数组类似。不同于Set中只能保存不同的元素，如果元素相同会被忽略。和Java中的Set集合⾮常相似。构造函数：let set = new Set();(1); // [1]let set2 = new Set([1,2,3,4,5]) // [1,2,3,4,5]⽅法：// 添加，元素内容不可重复，重复会被忽略()// 清空()// 删除指定元素，删除的是元素内容，⽽不是下标(value)// 判断指定元素是否存在(value)// 遍历h(function(){})// 元素个数pMap本质是与Object类似的结构。不同在于Object强制规定key值只能是字符串。⽽Map对象的key可以是任意对象：object是
body{ font:12px; width:100%;}
}
@media print {
body{ font:14px; width:595px;} /*
⽤于打印时将宽度设置为595px(A4) */
} css⽔平、垂直居中的写法，请⾄少写出4种？⽔平居中⾏内元素: text-align: center块级元素: margin: 0 automargin:0 auto=margin:0 auto 0 auto，表⽰上下为0，左右为auto；⾸先如果想要设置居中,width是必须设置的,如果不设置width元素,那么块级元素⼀定会占据100%的宽度，auto是指平分剩余空间,⽐如宽度为200,⽗元素的宽度为1000,那么auto就是指⽔平⽅向平分剩余的宽度(1000-200)/2，auto实际上是说，⾃动平均分配。margin-left: auto;就表⽰仅左边分配所有的剩余空间，也就是跑到右边去了，实现了float:left;的效果。垂直⽅向不可以margin: auto 0，margin:auto=margin:auto auto auto auto，即上下左右都automargin:0 auto=margin:0 auto 0 auto，表⽰上下为0，左右为auto；position:absolute +left:50%+ transform:translateX(-50%)绝对定位元素相对的元素是它最近的⼀个祖先，该祖先满⾜：position的值必须是：relative、absolute、fixed，若没有这样的祖先则相对于body进⾏定位。偏移值由其top、bottom、left、right值确定。translate()函数是css3的新特性.在不知道⾃⾝宽⾼的情况下，可以利⽤它来进⾏⽔平垂直居中.。 translate(-50%,-50%) 作⽤是，往上（x轴）,左（y轴）移动⾃⾝长宽的 50%，以使其居于中⼼位置。display:flex + justify-content: center⾸先flex是⽔平布局，另外jc这个能够区分开，嗯。垂直居中设置line-height 等于heightline-height是⼀个长度，⽽不同于top，当font-size等于line-height时，⾏距 = line-height - font-size = 0；⽽当font-size⼤于line-height时，则会出现⾏距为负值，则两⾏重叠，也就是说，line-height是有必要空⽩的height(因为包括⾏距)。在没有设置div的height属性时，div的⾼度根据line-height的⼤⼩⽽变化，且⽂字垂直居中。height = line-height时字体就会居中对齐。height>line-height时，字体上浮，可以理解为没有填充完，还有空位，height , ,
inline-table 此元素会作为内联表格来显⽰（类似），表格前后没有换⾏符。
table-row 此元素会作为⼀个表格⾏显⽰（类似 ）。
默认值： inline
继承： nooverflow 属性默认值： visible继承： novisible 默认值。内容不会被修剪，会呈现在元素框之外。hidden 内容会被修剪，并且其余内容是不可见的。scroll 内容会被修剪，但是浏览器会显⽰滚动条以便查看其余的内容。auto 如果内容被修剪，则浏览器会显⽰滚动条以便查看其余的内容。inherit 规定应该从⽗元素继承 overflow 属性的值。1rem、1em、1vh、1px各⾃代表的含义？remrem是全部的长度都相对于根元素元素。通常做法是给html元素设置⼀个字体⼤⼩，然后其他元素的长度单位就为rem。em⼦元素字体⼤⼩的em是相对于⽗元素字体⼤⼩元素的width/height/padding/margin⽤em的话是相对于该元素的font-sizevw/vh全称是 Viewport Width 和 Viewport Height，视窗的宽度和⾼度，相当于 屏幕宽度和⾼度的 1%，不过，处理宽度的时候%单位更合适，处理⾼度的 话 vh 单位更好。pxpx像素（Pixel）。相对长度单位。像素px是相对于显⽰器屏幕分辨率⽽⾔的。⼀般电脑的分辨率有{1920*1024}等不同的分辨率1920*1024 前者是屏幕宽度总共有1920个像素,后者则是⾼度为1024个像素transform: scale(0.5); 很明显是给⼀个div放缩⽤的。rotate(7deg);是旋转。盒模型是css中重要的基础知识，也是必考的基础知识盒模型的组成，由⾥向外content,padding,border,margin.在IE盒⼦模型中，width表⽰content+padding+border这三个部分的宽度在标准的盒⼦模型中，width指content部分的宽度box-sizing:border-box;表⽰将padding，border放⼊width中。BFC(Block Formatting Context)，块级格式化上下⽂，⼀个创建了新的BFC的盒⼦是独⽴布局的，盒⼦⾥⾯的⼦元素的样式不会影响到外⾯的元素。BFC是Web页⾯中盒模型布局的⼀种CSS渲染模式。它的定位体系属于 常规⽂档流。浮动元素和绝对定位元素，⾮块级盒⼦的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒⼦，都会为他们的内容创建新的BFC（块级格式上下⽂）。或者说，离经叛道的元素。完全不影响的话，你能够想象到该怎么的css。label标签主要是⽅便⿏标点击使⽤，扩⼤可点击的范围，增强⽤户操作体验。label标签常⽤于与checkbox或radio关联，以实现点击⽂字也能选中/取消checkbox或radio。如下图，点击⽂字和点击前⾯的单选框效果相同，即加⼤了控件的可点击区域较⼤，因为点击标签或控件都将激活控件，这对于复选框和单选框特别有⽤。label标签的关联⽅式主要有两种，显⽰关联和隐式关联：显式关联是通过label标签的for属性，显式与另⼀个表单控件关联。需要注意的是，for属性的值必须是与label标签在同⼀⽂档中的可标记表单元素的id，注意是id⽽不是name。
隐式关联是直接将表单控件放到label标签内，这种情况下，label标签只能包含⼀个表单元素，包含多个只对第⼀个有效。如下：遍历A节点的⽗节点下的所有⼦节点这题考查原⽣的js操作dom,属于⾮常简单的基础题，但长时间使⽤mvvm框架，可能会忘记浏览器渲染页⾯的⼀般过程：1.浏览器解析html源码，然后创建⼀个 DOM树。并⾏请求 css/image/js在DOM树中，每⼀个HTML标签都有⼀个对应的节点，并且每⼀个⽂本也都会有⼀个对应的⽂本节点。DOM树的根节点就是 documentElement，对应的是html标签。2.浏览器解析CSS代码，计算出最终的样式数据。构建CSSOM树。对CSS代码中⾮法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置 < ⽤户设置 < 外链样式 < 内联样式 < html中的style。 Tree + CSSOM --> 渲染树（rendering tree）。渲染树和DOM树有点像，但是是有区别的。DOM树完全和html标签⼀⼀对应，但是渲染树会忽略掉不需要渲染的元素，⽐如head、display:none的元素等。⽽且⼀⼤段⽂本中的每⼀个⾏在渲染树中都是独⽴的⼀个节点。渲染树中的每⼀个节点都存储有对应的css属性。4.⼀旦渲染树创建好了，浏览器就可以根据渲染树直接把页⾯绘制到屏幕上。以上四个步骤并不是⼀次性顺序完成的。如果DOM或者CSSOM被修改，以上过程会被重复执⾏。实际上，CSS和JavaScript往往会多次修改DOM或者CSSOM。CORS是⼀个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从⽽克服了AJAX只能同源使⽤的限制。CORS需要浏览器和服务器同时⽀持。⽬前，所有浏览器都⽀持该功能，IE浏览器不能低于IE10。整个CORS通信过程，都是浏览器⾃动完成，不需要⽤户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全⼀样。浏览器⼀旦发现AJAX请求跨源，就会⾃动添加⼀些附加的头信息，有时还会多出⼀次附加的请求，但⽤户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接⼝，就可以跨源通信。AJAX即“Asynchronous Javascript And XML”，是指⼀种创建交互式⽹页应⽤的⽹页开发技术。AJAX 是⼀种⽤于创建快速动态⽹页的技术。它可以令开发者只向服务器获取数据（⽽不是图⽚，HTML⽂档等资源），互联⽹资源的传输变得前所未有的轻量级和纯粹，这激发了⼴⼤开发者的创造⼒，使各式各样功能强⼤的⽹络站点，和互联⽹应⽤如⾬后春笋⼀般冒出，不断带给⼈惊喜。Ajax核⼼对象XMLHttpRequest.
发布评论