前端笔试题Q&A
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端笔试题Q&A相关的知识，希望对你有一定的参考价值。
这是一篇前端岗位笔试题，我总结了相应的答案。如有疏漏和错误，欢迎指出。
一、HTML部分
1.Doctype作用？ 标准模式与兼容模式有什么区别?
<!DOCTYPE> 声明不是 html 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令，可以避免不同浏览器以不同的模式来呈现文档。
标准模式（严格模式）用于呈现遵循最新标准的网页。
兼容模式（怪异/松散模式）页面以宽松的向后兼容的方式显示。
2.HTML5为什么只需要写<!DOCTYPE HTML>？
HTML5之前是基于SGML的，需要对DTD进行引用。而HTML5并不基于SGML，所以不需要DTD进行引用，但需要doctype来规范浏览器的行为。
3.行内元素有哪些？块级元素有哪些？空元素有哪些？
（1）行内元素有：a span img input select strong等
（2）块级元素有：div ul ol li h1 p等
（3）空元素有：<br/><img/><hr/><link/><meta/><input/><source/><base/>等
4.页面导入样式时，使用link和import有什么区别？
（1）link属于XHTML标签，除了加载css外，还可以用于定义RSS，定义rel连接属性等作用，而@import是css提供的，只能用于加载css；
（2）页面被加载时，link就会被加载，而@import需要网页完全载入以后才会加载。
（3）link是XHTML标签，无兼容问题；@import在低版本的浏览器不支持。
（4）link支持使用javascript控制DOM去改变样式；而@import不支持。
5.html5有哪些新特性、移除了哪些元素？ 如何处理HTML5新标签的兼容问题？
主要是关于图像，位置，存储，多任务等功能的增加。绘画canvas；音视频元素audio和video；
本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；
sessionStorage的数据在浏览器关闭后自动删除；
增加语义化标签，如header,footer,nav,article,section等
增加了一些表单控件：calendar、date、time、email等
新的技术：webworker、websocket、Geolocation
html5移除了一些纯表现的元素：big、font、s、strike等；还移除了一些会影响性能的元素：frame、frameset。noframes
6.HTML5的离线缓存有哪些？
二、CSS部分
1.介绍一下CSS的盒子模型？
盒子模型（框模型）包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个元素。
它有两种模式，标准模式和怪异模式。
标准模式会被设置的padding撑开，而怪异模式则相当于将盒子的大小固定时，再将内容装入盒子，这样盒子的大小就不会被padding所撑开。
标准模式：盒子总宽度 = 内容区宽度 + padding + border + margin
怪异模式：盒子总宽度 = width + margin
2.CSS选择符有哪些？ 哪些属性可以继承？ 优先级算法如何计算？ CSS3新增伪类有哪些？
css选择符有如下：
1.元素选择符：*、类型选择符E、ID选择符E#id、类选择符E.class
2.关系选择符：包含选择符(E F)、子选择符(E>F)、相邻选择符(E~F)
3.属性选择符：E[att]、E[att=‘val‘]、E[~=‘val‘]、E[att^=‘val‘]、E[$=‘val‘]、E[*=‘val‘]、E[att|=‘val‘]
4.伪类选择符：E:link、E:visited、E:hover、E:active、E:focus、E:first-child、E:nth-child(n)等
5.伪对象选择符：E:first-letter、E:first-line、E:before、E:after、E::placeholder、E::selection
可以继承的样式有：font-size,font-family,color,text-indent
不可以继承的样式有：border,padding,margin,width,height
优先级算法：
1.就近原则，同权重情况样式定义最近者为准
2.载入样式以最后载入的样式为准
3.！important > id > class > tag
4.!important权重最高，其次内联样式，最后样式表样式
CSS3新增伪类有：
p:first-of-type p:only-of-type p:nth-child :enabled :checked等
3.如何居中div？ 如何居中一个浮动元素？
块级元素：
水平居中：设置宽度，左右外边距为auto
垂直居中：1.绝对定位法一：top:50%;margin-top:50%;
2.绝对定位法二：top:50%;transform:translate(-50%,-50%);
3.基于视口法： margin:50vh auto 0; transform: translateY(-50%);
4.弹性盒子法：父元素：display:flex; 子元素：margin:auto;
浮动元素：
1.计算法：啊哈，就是精确计算其外边距使其居中
2.包裹法：让一个div包裹该元素，然后让div居中
4.absolute的containing block计算方式跟正常流有什么不同？
absolute的包含快是离之最近的position属性非static的祖先元素
5.position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？
6.display:inline-block 什么时候会显示间隙？
两个inline-block元素水平呈现时，中间若有空格或换行就会造成元素间有一块间隙。这并非是bug而是符合规范的表现。
想查看去除这个空隙的方案，请戳这里 >> : chlick me!
三、JS部分
1.说几条写javascript的基本规范？
所有标签都应当闭合； 使用tab键来进行缩进； 减少全局变量； 变量声明写在对应作用域的顶部；
使用有意义的命名； 函数应该短小精悍，一个函数只做一件事； 学会写注释.........
推荐查看书籍：《clean code》
2.null和undefined的区别？
null是一个表示“无”的对象，转成数值时为0；undefined是一个表示“无”的原始值，转成数值时为NaN。
3.node.js的适用场景？
node.js拥有很强的处理并发的能力，但处理计算和逻辑的能力反而很弱。
所以node.js适用于需要对高并发进行高性能处理时的情景。例如实时聊天，本地化的音乐应用。
4.介绍js的基本数据类型？
js的数据类型分为基本类型和引用类型。
基本类型有：number、string、boolean、null、undefined
5.[‘1‘,‘2‘,‘3‘].map(parseInt) 答案是多少？
答案是 [1,NaN,NaN] 。
6.什么是闭包，为什么要用它？
闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见方式是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量，利用闭包可以突破作用域链，将函数内部的变量和方法传递到外部。
7.‘use strict’;是什么意思？使用它的好处和坏处分别是什么？
表示使用严格模式，通过严格模式，在函数内部选择进行较为严格的全局或局部的错误条件检测。
使用严格模式的好处是可以提早知道代码中存在的错误。
严格模式只有在js代码的第一行才会生效，多个js文件合并时可能会导致失效。
8.js延迟加载的方式有哪些？
1.使用setTimeout延迟方法的加载时间
2.将js文件放在页面的底部
3.在script标签中使用defer属性
4.在script标签中使用async属性
5.动态创建DOM方法
6.使用jquery的getScript()方法
9.如何解决跨域问题？
跨域问题：它是由于javascript语言安全限制中的同源策略造成的。
同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合
解决办法：
1.使用跨域资源共享（CORS）
2.使用jsonp
3.document.domain + iframe
4.使用window.name + iframe
5.使用window.postMessage方法
10.json对象转成json字符，json字符转换成json对象的实现方法？
1.JSON.parse(jsonstr); //可以将json字符串转换成json对象
2.JSON.stringify(jsonobj); //可以将json对象转换成json字符串
3.使用 eval(); 将字符串转换成json（慎用）
以上是关于前端笔试题Q&A的主要内容，如果未能解决你的问题，请参考以下文章