2020前端面试题 前端HTML CSS JavaScript

查看完整版

1、解释html语义化？

回答：用正确的标签做正确的事情。html语义化让页面的内容结构化、结构更清晰、便于对浏览器、搜索引擎解析；

即使在没有css样式的情况下，也以一种文档格式显示，并且是容易阅读的；

搜索引擎的爬虫也依赖于html标记来确定上下文和各个关键字的权重，利于SEO;

使阅读代码的人对网站更容易对网站分块，便于阅读维护理解。

2、块级元素与行内元素的区别？各自有哪些？

回答：css规范规定，每个元素都有一个display属性,确定该元素的类型，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。

区别：第一：块级元素会独占一行，其宽度自动填充父元素宽度；行内元素不会独占一行，相邻的行内元素会排列在一行里，直到一行拍不下，才会换行。

第二：块级元素可以设置width、height，行内元素设置无效。（块级元素即使设置了width宽度，也是独占一行）。

第三：块级元素可以设置margin、padding，行内元素水平方向有效，竖直方向无效。（例如：margin-left,margin-right、padding-left、padding-right有效）。

块级元素：div、ul、li、ol、dl、dt、dd、h1、h2、h3、h4…p、table form fieldset dir-目录列表 menu

行内元素：a b span img strong select label sub sup textarea input

空元素：br hr img input link meta

3、DOCTYPE的作用？标准模式和兼容模式各有什么区别？为什么html5只需要写?

回答：（1）、声明位于html文档中的第一行，处于标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或者格式不正确会导致文档以兼容模式呈现。

（2）、标准模式的排版和js运作模式都是以该浏览器支持的最高标准运行；在兼容模式下，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。

（3）、HTML不基于SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照他们应该的方式来运行）；

而html4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

4、link和@import的区别？

回答：（1）、link属于xhtml标签，除了加载css之外，还能用于定义rss,定义rel连接属性等作用；而@import是css提供的，只能用于加载css;

（2）、页面被加载时，link会同时被加载；而@import引用的css会等到页面被加载完后再加载。

（3）、@import是css2.1提出的，只有在IE5以上才能被识别，而link是xhtml标签，无兼容问题。

5、HTML5有哪些新特性？移除了哪些元素？如何处理html5新标签的浏览器兼容问题？如何区分html和html5?

回答：（1）、h5不是SGML的子集，主要是关于图像、位置、存储、多任务等功能的增加。

绘画canvas；用于媒介回放的video和audio元素；语义化更好的内容元素：article、footer、header、nav、section；本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；sessionStorage的数据在浏览器关闭后自动删除；表单控件增添calendar、date、time、email、url、search;新的技术Webworker,Websocket,Geolocation。

（2）、移除的元素：纯表现的元素：basefont\big\center\font\s\u;对可用性产生负面影响的元素：frame\frameset\noframes;

（3）、处理和html5新标签的浏览器兼容问题：

当在页面中使用html5新标签时，可能得到三种不同的情况：

1>结果1：新标签被当做错误处理并且忽略，在DOM构建时会当作这个标签不存在；

2>结果2：新标签当作错误处理，并在DOM构建时，这个新标签会被构造成行内元素；

3>结果3：新标签被识别为html5标签，然后用DOM节点对其进行替换。

不能识别html5标签而不能使用，解决办法如下：

1>方法1：实现标签被识别

通过document.creatElement(tagname)方法让浏览器识别新标签，浏览器支持标签后，还可以为新标签增添css样式。

2>方法2：javascript解决方案

a)使用html5shim:

在head中调用一下代码：(也可以下载到自己的网站上进行调用，但是必须在head中)

b)使用kill IE6

在之前调用以下代码：

（4）、区分html和html5:doctype声明、新增的结构元素|功能元素。

6、css选择符？优先级算法？哪些属性可以继承？

回答：（1）、id选择器；（2）、类选择器；（3）、标签选择器；（4）、相邻选择器（h1+p）;（5）、子选择器（ul>li）;（6）、后代选择器（li a）；（7）、通配符选择器（*）；（8）、属性选择器（a[rel=“external”]）;（9）、伪类选择器（a:hover）;

可继承的属性：font-size/font-family/color/UL LI Dl DD DT;

不可继承的样式：border/margin/padding/height/width/display/position/float/left…;

优先级：！important>id>class>tag>*; !important比内联优先级高；内联样式表（标签内部）>嵌入样式表（当前文件中）>外部样式表（外部文件中）

7、描述cookies,sessionStorage,localStorage的区别？

回答：（1）、cookie是网站用于标识用户的身份而储存在用户本地终端（client side）上的数据（通常经过加密）；cookie数据始终在同源的http中携带（即使不需要），即会在浏览器和服务器间来回传递；（2）、sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

（3）、存储大小：cookie数据大小不能超过4k;sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

（4）、有效时间：localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

sessionStorage数据在当前浏览器关闭后删除；

cookie 设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭。

8、javascript有几种数据类型？划一下他们的内存图？

回答： 栈:原始数据类型（number、string、Boolean、null、undefined）;

堆：引用数据类型（对象、数组、和函数）；

两种类型的区别：存储位置不同：原始数据类型存储在栈中的简单数据段，占据空间小，大小固定，属于被频繁使用数据，所以放入栈中存储；

引用数据类型存储在堆中的对象，占据空间大，大小不固定。如果存储在栈中将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。

9、href和src的区别？

回答：(1)、href表示超文本引用，用于建立当前元素和文档之间的链接。常用的有link、a上使用，当前文档和引用资源之间确立联系，并行下载资源。

(2)、src是sourse的缩写，src指向的文档会嵌入到文档中当前标签所在的位置。主要是引入，常用与img,script等元素上，替换当前元素，当浏览器解析该元素时，会暂停其他资源的下载和处理，直到完毕。

10、javascript中call()和apply()方法的区别？

回答：ECMAScript规范给所有函数都定义了这两个方法call()和apply()。

call()方法定义：调用一个对象的一个方法，以另一个对象替换当前对象。

apply()方法定义：应用某一对象的一个方法，用另一个对象替换当前对象。

两者的区别在与参数：call()和apply()的第一个参数都是要调用的函数的对象，call()的剩余参数是传递给要调用的函数的值，而apply()只有两个参数，第一个是对象，第二个是数组，这个数组就是该函数的参数。

11、javascript原型？原型链？以及如何实现继承？

回答：每个对象都会在内部初始化一个属性，就是prototype（原型），当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里面找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，就是原型链的概念。

如何实现继承：

1》构造继承：比如：现在有一个”动物“对象的构造函数

function Animal(){
　　　　this.species = “动物”;
　　}
还有一个”猫“对象的构造函数

function Cat(name,color){
　　　　this.name = name;
　　　　this.color = color;
　　}

”猫“继承”动物“

构造函数绑定：使用call()或者apply()方法，将父对象的构造函数绑定在子对象上，即在子对象构造函数中加一行：

复制代码
　function Cat(name,color){
　　　　Animal.apply(this, arguments);
　　　　this.name = name;
　　　　this.color = color;
　　}
　　var cat1 = new Cat(“大毛”,“黄色”);
　　alert(cat1.species); // 动物
复制代码
2》原型继承：如果”猫“的prototype对象，指向一个animal的实例，那么所有猫的实例就可以继承animal了。

Cat.prototype = new Animal();
　　Cat.prototype.constructor = Cat;
　　var cat1 = new Cat(“大毛”,“黄色”);
　　alert(cat1.species); // 动物
3》实例继承：

4》拷贝继承：

原型prototype机制或apply和call方法去实现比较简单，建议使用构造方式和原型混合方式。

复制代码
function Parent(){
this.name = ‘wang’;
}

 function Child(){
     this.age = 28;
 }
 Child.prototype = new Parent();//继承了Parent，通过原型

 var demo = new Child();
 alert(demo.age);
 alert(demo.name);//得到被继承的属性

复制代码
12、前端性能优化的方法？

回答：（1）、当需要设置的样式很多时设置className而不是直接操作style。

（2）、避免在页面的主题布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。

（3）、用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

（4）、减少http请求次数：CSS Sprites，JS、CSS源码压缩，图片大小控制合适；网页GZIP压缩，CDN托管，data缓存，图片服务器。

（5）、图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳。

（6）、前端模板 JS+数据，减少由于html标签导致的贷款浪费，前端用变量保存AJAX请求结果，每次操作本地数据，减少请求次数。

（7）、少用全局变量，缓存DOM节点查找的结果。减少IO（输入/输出）读取操作。

（8）、避免使用CSS Expression(css 表达式)又称动态属性（Dynamic properties）。

（9）、减少DOM操作；部署前，图片压缩、代码压缩；优化js代码结构，减少冗余代码；减少http请求，合理设置http缓存；使用内容分发cdn加速；静态资源缓存；图片延迟加载；

13、介绍一下标准的CSS的盒子模型？低版本的IE的盒子模型有什么不同？

回答：（1）、有两种：IE盒子模型、w3c盒子模型；（2）、盒模型：content(内容)、padding（内边距）、margin（外边距）、 border（边框）；（3）：区别：IE的content把padding和border计算了进去。

14、如何居中div?

回答：（1）、水平居中：给DIV设置一个宽度，然后添加margin:0 auto属性。

div{
width:200px;
margin:0 auto;
}
（2）、让绝对定位的div居中：

复制代码
div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: pink; /* 方便看效果 */
}
复制代码
（3）、水平垂直居中一：

复制代码
确定容器的宽高 宽500 高 300 的层
设置层的外边距

div {
position: relative; /* 相对定位或绝对定位均可 /
width:500px;
height:300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -250px; / 外边距为自身宽高的一半 /
background-color: pink; / 方便看效果 */

}
复制代码
（4）、水平垂直居中二：

复制代码
未知容器的宽高，利用 transform 属性

div {
position: absolute; /* 相对定位或绝对定位均可 /
width:500px;
height:300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink; / 方便看效果 */

}
复制代码
（5）、水平垂直居中三：

复制代码
利用 flex 布局
实际使用时应考虑兼容性

.container {
display: flex;
align-items: center; /* 垂直居中 /
justify-content: center; / 水平居中 */

}
.container div {
width: 100px;
height: 100px;
background-color: pink; /* 方便看效果 */
}
复制代码
15、position的值定位原点是？

回答：（1）、absolute：生成绝对定位的元素，相对于值不为static的第一个父元素进行定位。

（2）、relative：生成相对定位的元素，相对于元素正常位置进行定位。

（3）、fixed（老IE不支持）：生成绝对定位的元素，相对于浏览器窗口进行定位。

（4）、static：默认值，没有定位，元素出现在正常的流中。

（5）、inherit:规定从父元素继承position的值。

16：清除浮动的几种方式？为什么要清除浮动呢？

回答：（1）、添加新的元素，应用clear:both;（额外标签法）

.clear{clear:both; height: 0; line-height: 0; font-size: 0}
　　　　（2）、父级div定义overflow:auto;

（3）、使用：after方法，作用与浮动元素的父元素。（伪元素）

复制代码
　.clearfix:after{

content:"";//设置内容为空

height:0;//高度为0

line-height:0;//行高为0

display:block;//将文本转为块级元素

visibility:hidden;//将元素隐藏

clear:both//清除浮动

}

.clearfix{

zoom:1;为了兼容IE(触发IE的haslayout属性) 　　　
　}
复制代码
　　　　（4）、使用双伪元素

复制代码
.clearfix:before,.clearfix:after {

              content: "";

              display: block;

              clear: both;

        }

        .clearfix {

              zoom: 1;

        }

复制代码
原因：如果一个盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中设置了浮动，那么将来父盒子的高度就是0，下面的元素就会自动部位。（所以可以给父级DIV定义height；也可以父级DIV一起浮动）。

（当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。）

17、css定义的权重？

回答：权重的规则：标签的权重为1，class的权重为10，id的权重为100，如下所示：（ps:如果权重相同，则最后定义的样式会起作用，但是要避免这样的情况）

复制代码
/权重为1/
div{
}
/权重为10/
.class1{
}
/权重为100/
#id1{
}
/权重为100+1=101/
#id1 div{
}
/权重为10+1=11/
.class1 div{
}
/权重为10+10+1=21/
.class1 .class2 div{
}
复制代码
18、javascript作用域和闭包？

回答：变量作用域：包括全局变量和局部变量（函数内部可以直接读取全局变量&函数外部自然不能读取函数内部的局部变量）。

（1）、函数作用域：函数的局部变量仅对函数内部可见。

（2）、词法作用域：函数的嵌套关系是定义的时候决定的，而不是调用的时候决定的，即嵌套关系是词法分析时确定的，而非运行时决定。

（3）、全局作用域：在最外层定义的变量，全局对象的变量，任何地方隐匿定义的变量。

（4）、没有块级作用域。

闭包：就是能够读取其他函数内部变量的函数。也可以理解成”定义在一个函数内部的函数”；

闭包的用途就是一可以读取函数内部的变量，二就是让这些变量的值始终保存在内存中。（内存会消耗过大，所以不能滥用闭包）。

简单的闭包例子：

复制代码
　function f1(){
　　　　var n=999;
　　　　function f2(){
　　　　　　alert(n);
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999
复制代码
19、AJAX的步骤？

回答：（1）、创建ajax对象；（2）、发出HTTP请求；（3）、接收服务器传回的数据；（4）、更新网页数据。

20、一个页面上两个div左右铺满整个浏览器，要保证左边的div一直为100px，右边的div跟随浏览器大小变化（比如浏览器为500，右边就为400；如果浏览器为900，右边为800）？

回答：（1）、浮动布局：

复制代码

left sidebar

Main Content