前端面试题总结（2）

比眉伴天荒 2022-10-07 10:52 785阅读 0赞

### 文章目录 ###

*   *   *  一、题目
         *  二、解答
         *   *  1、C
             *  2、B
             *  3、B
             *  4、A
             *  5、B
             *  6、B
             *  7、CD
             *  8、D
             *  9、b和strong
             *  10、4、4
             *  11、C
             *  12、AD
             *  13、BC
             *  14、BD
             *  15、ABCD
             *  16、D

### 一、题目 ###

1、下列哪个样式定义后,内联(非块状)元素可以定义宽度和高度

A、display:inline B、display:none C、display:block D、display:inherit

2、新窗口打开网页，用到以下哪个值（）。

A、`_self` B、`_blank` C、`_top` D、`_parent`

3、元素的alt和title有什么异同，选出正确的说法？

A、不同的浏览器，表现一样

B、alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字

C、alt和title同时设置的时候，title作为图片的替代文字出现，alt是图片的解释文字

D、以上说法都不正确

4、下面有关浏览器中使用js跨域获取数据的描述，说法错误的是？

A、域名、端口相同，协议不同，属于相同的域

B、js可以使用jsonp进行跨域

C、通过修改document.domain来跨子域

D、使用window.name来进行跨域

5、下面有关javascript系统方法的描述，错误的是？

A、parseFloat方法：该方法将一个字符串转换成对应的小数

B、isNaN方法：该方法用于检测参数是否为数值型，如果是，返回true，否则，返回false。

C、escape方法： 该方法返回对一个字符串编码后的结果字符串

D、eval方法：该方法将某个参数字符串作为一个JavaScript执行

6、下面有关JavaScript中 call和apply的描述，错误的是？

A、call与apply都属于Function.prototype的一个方法，所以每个function实例都有call、apply属性

B、两者传递的参数不同，call函数第一个参数都是要传入给当前对象的对象，apply不是

C、apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入

D、call传入的则是直接的参数列表。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

7、下述有关border:none以及border:0的区别，描述错误的是？ 【不定项】

A、border:none表示边框样式无

B、border:0表示边框宽度为0

C、当定义了border:none，即隐藏了边框的显示，实际就是边框宽度为0

D、当定义边框时，仅设置边框宽度也可以达到显示的效果

8、下面关于 HTML 的描述正确的一项是 ( )

A、HTML5 中的所有标签都必须写结束标签

B、DOCTYPE 的设置不会影响页面的展示效果

C、HTML5 中的属性名对大小写敏感

D、HTML5 中可以使用 data-\* 自定义属性

9、产生粗体字的 HTML 标签：

10、运行以下程序

y和z的最终结果为:

11、以下不属于空元素（void elements）的是：

A、embed B、img C、address D、wbr

12、以下哪些选项可以获取ID为a的DOM元素？

A、document.getElementById(‘a’)

B、document.getElementById(’\#a’)

C、document.querySelector(‘a’)

D、document.querySelector(’\#a’)

13、下面不属于JavaScript的基本数据类型的是( )

A、String B、Function C、Integer D、undefined

14、如何阻止IE和各大浏览器默认行为（ ）

A、window.event.cancelBubble = true;

B、window.event.returnValue = false;

C、event.stopPropagation();

D、event.preventDefault();

15、请选出所有的置换元素（）

A、img B、input C、textarea D、select

16、以下可将一对象的背景色透明度改为80%的声明是（ ）

A、filter:alpha:(opacity=80);

B、filter:alpha: opacity=80;

C、filter:alpha:(opacity:80);

D、filter:alpha(opacity=80);

### 二、解答 ###

#### 1、C ####

内联元素加上display：block;后被块级化。块级元素一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。因此，可以定义其宽度和高度。

<table> 
 <thead> 
  <tr> 
   <th align="left">值</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">none</td> 
   <td align="left">此元素不会被显示。</td> 
  </tr> 
  <tr> 
   <td align="left">block</td> 
   <td align="left">此元素将显示为块级元素，此元素前后会带有换行符。</td> 
  </tr> 
  <tr> 
   <td align="left">inline</td> 
   <td align="left">默认。此元素会被显示为内联元素，元素前后没有换行符。</td> 
  </tr> 
  <tr> 
   <td align="left">inline-block</td> 
   <td align="left">行内块元素。（CSS2.1 新增的值）</td> 
  </tr> 
  <tr> 
   <td align="left">list-item</td> 
   <td align="left">此元素会作为列表显示。</td> 
  </tr> 
  <tr> 
   <td align="left">run-in</td> 
   <td align="left">此元素会根据上下文作为块级元素或内联元素显示。</td> 
  </tr> 
  <tr> 
   <td align="left">compact</td> 
   <td align="left">CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。</td> 
  </tr> 
  <tr> 
   <td align="left">marker</td> 
   <td align="left">CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。</td> 
  </tr> 
  <tr> 
   <td align="left">table</td> 
   <td align="left">此元素会作为块级表格来显示（类似 ），表格前后带有换行符。 
    <table></table></td> 
  </tr> 
  <tr> 
   <td align="left">inline-table</td> 
   <td align="left">此元素会作为内联表格来显示（类似 ），表格前后没有换行符。 
    <table></table></td> 
  </tr> 
  <tr> 
   <td align="left">table-row-group</td> 
   <td align="left">此元素会作为一个或多个行的分组来显示（类似 </td> 
  </tr> 
 </tbody> 
 <tbody></tbody> 
 <tbody> 
  <tr> 
   <td align="left">table-header-group</td> 
   <td align="left">此元素会作为一个或多个行的分组来显示（类似 </td> 
  </tr> 
 </tbody> 
 <thead></thead> 
 <tbody> 
  <tr> 
   <td align="left">table-footer-group</td> 
   <td align="left">此元素会作为一个或多个行的分组来显示（类似 </td> 
  </tr> 
 </tbody> 
 <tfoot></tfoot> 
 <tbody> 
  <tr> 
   <td align="left">table-row</td> 
   <td align="left">此元素会作为一个表格行显示（类似 </td> 
  </tr> 
  <tr></tr> 
  <tr> 
   <td align="left">table-column-group</td> 
   <td align="left">此元素会作为一个或多个列的分组来显示（类似 </td> 
  </tr> 
 </tbody>  
 <tbody> 
  <tr> 
   <td align="left">table-column</td> 
   <td align="left">此元素会作为一个单元格列显示（类似 </td> 
  </tr> 
 </tbody>    
 <tbody> 
  <tr> 
   <td align="left">table-cell</td> 
   <td align="left">此元素会作为一个表格单元格显示（类似 </td> 
   <td> 和 </td> 
   <th>）</th> 
  </tr> 
  <tr> 
   <td align="left">table-caption</td> 
   <td align="left">此元素会作为一个表格标题显示（类似 </td> 
  </tr> 
 </tbody>  ）  
 <tbody> 
  <tr> 
   <td align="left">inherit</td> 
   <td align="left">规定应该从父元素继承 display 属性的值。</td> 
  </tr> 
 </tbody> 
</table>

）。）。）。）。）。）

#### 2、B ####

例如`<a href="/XXXX" target="_blank" >打开新的网页</a>`

在html中通过标签打开一个链接，通过 `<a>`标签的 target 属性规定在何处打开链接文档。

如果在标签`<a>`中写入target属性，则浏览器会根据target的属性值去打开与其命名或名称相符的 框架`<frame>`或者窗口.

在target中还存在四个保留的属性值如下，

**属性值**

<table> 
 <thead> 
  <tr> 
   <th align="left">值</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">_blank</td> 
   <td align="left">在新窗口中打开被链接文档。</td> 
  </tr> 
  <tr> 
   <td align="left">_self</td> 
   <td align="left">默认。在相同的框架中打开被链接文档。</td> 
  </tr> 
  <tr> 
   <td align="left">_parent</td> 
   <td align="left">在父框架集中打开被链接文档。</td> 
  </tr> 
  <tr> 
   <td align="left">_top</td> 
   <td align="left">在整个窗口中打开被链接文档。</td> 
  </tr> 
  <tr> 
   <td align="left"><em>framename</em></td> 
   <td align="left">在指定的框架中打开被链接文档。</td> 
  </tr> 
 </tbody> 
</table>

这些 target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略，因此，不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。

#### 3、B ####

alt是html标签的属性，而title既是html标签，又是html属性。  
title标签这个不用多说，网页的标题就是写在`<title></title>`这对标签之内的。  
title作为属性时，用来为元素提供额外说明信息。例如，给超链接标签a添加了title属性，把鼠标移动到该链接上面是，就会显示title的内容，以达到补充说明或者提示的效果。  
而alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。

#### 4、A ####

只要 协议 、 域名 、 端口 有任何一个 不同, 都被当作是 不同 的域。

**1.CORS**

CORS（Corss-Origin Resource Sharing,跨资源共享），基本思想是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应的成功或失败。即给请求附加一个额外的Origin头部，其中包含请求页面的源信息（协议、域名和端口），以便服务器根据这个头部决定是否给予响应。

**2.document.domain**

将页面的document.domain设置为相同的值，页面间可以互相访问对方的JavaScript对象。

注意：

不能将值设置为URL中不包含的域；

松散的域名不能再设置为紧绷的域名。

**3.图像Ping**

var img=new Image();
    
    img.onload=img.onerror=function(){
    
    ... ...
    
    }
    
    img.src="url?name=value";

请求数据通过查询字符串的形式发送，响应可以是任意内容，通常是像素图或204响应。

图像Ping最常用于跟踪用户点击页面或动态广告曝光次数。

缺点：

只能发送GET请求；

无法访问服务器的响应文本，只能用于浏览器与服务器间的单向通信。

**4.Jsonp**

var script=document.createElement("script");
    
    script.src="url?callback=handleResponse";
    
    document.body.insertBefore(script,document.body.firstChild);

JSONP由两部分组成：回调函数和数据

回调函数是接收到响应时应该在页面中调用的函数，其名字一般在请求中指定。

数据是传入回调函数中的JSON数据。

优点：

能够直接访问响应文本，可用于浏览器与服务器间的双向通信。

缺点：

JSONP从其他域中加载代码执行，其他域可能不安全；

难以确定JSONP请求是否失败。

**5.Comet**

Comet可实现服务器向浏览器推送数据。

Comet是实现方式：长轮询和流

短轮询即浏览器定时向服务器发送请求，看有没有数据更新。

长轮询即浏览器向服务器发送一个请求，然后服务器一直保持连接打开，直到有数据可发送。发送完数据后，浏览器关闭连接，随即又向服务器发起一个新请求。其优点是所有浏览器都支持，使用XHR对象和setTimeout()即可实现。

流即浏览器向服务器发送一个请求，而服务器保持连接打开，然后周期性地向浏览器发送数据，页面的整个生命周期内只使用一个HTTP连接。

**6.WebSocket**

WebSocket可在一个单独的持久连接上提供全双工、双向通信。

WebSocket使用自定义协议，未加密的连接时ws://；加密的链接是wss://。

var webSocket=new WebSocket("ws://");
    
    webSocket.send(message);
    
    webSocket.onmessage=function(event){
    
    var data=event.data;
    
    ... ....
    
    }

注意：

必须给WebSocket构造函数传入绝对URL；

WebSocket可以打开任何站点的连接，是否会与某个域中的页面通信，完全取决于服务器；

WebSocket只能发送纯文本数据，对于复杂的数据结构，在发送之前必须进行序列化JSON.stringify(message))。

优点：

在客户端和服务器之间发送非常少的数据，减少字节开销。

#### 5、B ####

NaN,即非数值（Not a Number）是一个特殊的数值，这个数值用来表示一个本来要返回数值的操作数未返回数值的情况（这样就不会抛出错误了）。

针对NaN的特点，ECMAScript定义了isNaN（）函数。这个函数接受一个参数，该参数可以是任何类型，而函数会帮我们确定这个参数是否“不是数值”。isNaN（）在接受一个值后，会尝试将这个值转换为数值。某些不是数值的值会直接转换为数值，例如字符串“10”或Boolean值。而任何不能被转换为数值的值都会导致这个函数返回true。

eval：返回字符串表达式中的值

unEscape：返回字符串ASCI码

escape：返回字符的编码

#### 6、B ####

*  call()
    
     *  语法: call(fn, obj, …args)
     *  功能: 执行fn, 使this为obj, 并将后面的n个参数传给fn(功能等同于函数对象的call方法)
 *  apply()
    
     *  语法: apply(fn, obj, args)
     *  功能: 执行fn, 使this为obj, 并将args数组中的元素传给fn(功能等同于函数对象的apply方法)
 *  bind()
    
     *  语法: bind(fn, obj, …args)
     *  功能: 给fn绑定this为obj, 并指定参数为后面的n个参数 (功能等同于函数对象的bind方法)

call（）方法和apply（）方法的作用相同，他们的区别在于接收参数的方式不同。对于call（），第一个参数是this值没有变化，变化的是其余参数都直接传递给函数。（在使用call（）方法时，传递给函数的参数必须逐个列举出来。使用apply（）时，传递给函数的是参数数组）如下代码做出解释：

function add(c, d){ 
    	return this.a + this.b + c + d; 
    } 
    var o = {a:1, b:3}; 
    add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16 
    add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

**相同点:两个方法产生的** **作用是完全一样的**

**不同点:方法传递的参数不同**

call, apply方法它们除了第一个参数,即执行时上下文对象相同外,call方法的其它参数将依次传递给借用的方法作参数,而apply就两个参数,第二个参数为一个数组传递

#### 7、CD ####

C:当定义border:none时，表示无边框样式，浏览器并不会对边框进行渲染，也就没有实际的宽度；

D:定义边框时，除了设置宽度外，还必须设置边框的样式才能显示出来。

区别

（1）性能差异

border:0;浏览器对border-width、border-color进行渲染，占用内存。

border:none;浏览器不进行渲染，不占用内存。

Chrome：

border:none;>> border:initial none initial;

border:0;>> border:0 initial initial ;

Firefox、360：

border:none; >>border:medium none;

border:0;>> border:0 none;

计算出的样式：

**border:0px none 元素color属性值;**

（2）浏览器兼容

IE7-不支持border:none;

W3C提示：请始终把border-style属性声明到border-color属性之前，元素必须在改变颜色之前获得边框。

#### 8、D ####

不是所有标签都需要结束标签，例如-；doctype类型会影响；HTML标签对大小写不敏感，为了规范，推荐小写。

## h5的data-*属性
    1. h5中新增了data-*属性，data-之后的属性是开发者自定义的属性名称，里面可以放置想存储的数据，然后通过数据集dataset来使用
    1.1 var id=document.getElementsByClassName('one')[0].dataset.id;
    // 如果浏览器不支持dataset属性,可以通过setAttribute方法获取
    1.2 var id=document.getElementsByClassName('one')[0].getAttribute('data-id')
     
    2. 可以在列表li中使用data-id,然后每个元素使用方法传递event的时候就会自动传递自己的id，方便选择
    3. 如果是触发事件(常问的事件委托应用，通过给ul绑定点击事件，可以确定点击的是哪个li元素)
        想要获取ul>li的索引知道点击了哪个li元素，那就先给每个li添加data-index属性，然后通过e.target.dataset.index来获取

#### 9、b和strong ####

#### 10、4、4 ####

1.  在Function类型里，函数是对象，函数名是指向函数对象的指针， **没有重载** ！
2.  当声明了多个同名函数时， **后面的函数会覆盖前面的函数** ，所以在题目中，事实上只有后面的add(n)起了作用，因此，两个结果都为4。
3.  补充一点：个人感觉这里有一点 **函数声明和函数表达式** 的区别需要特别注意！解析器在向执行环境中加载数据时，会率先读取函数声明，并使其在执行任何代码之前可用。也就是先读取function函数的声明，再读取函数表达式y = add(m);语句 和 z = add(m);语句， 所以 y = add(m);语句虽然在函数声明之前，但依然应用了函数。

js里面没有函数重载的概念，在其他语言中（如java）java中，可以存在同名函数，  
只要传入的参数数量或者类型不同即可。在js中，定义了两个同名函数后，  
后面的函数会覆盖前面定义的函数。结合这道题来说，由于函数声明提升，  
所以函数声明会提前，由于存在同名函数，后面的add函数将覆盖第一个add函数，  
所以两次调用add()返回的值是相同的。也就是y,z都为`4`.

#### 11、C ####

address用于定义文档或文章的作者/拥有者的联系信息。

embed 标签定义嵌入的内容，比如插件。

wbr 元素来添加 Word Break Opportunity（单词换行时机）。

一个\*\*空元素（empty element）\*\*可能是 HTML，SVG，或者 MathML 里的一个不可能存在子节点（例如内嵌的元素或者元素内的文本）的[element][]。

[HTML][]，[SVG][] 和 [MathML][] 的规范都详细定义了每个元素能包含的具体内容（define very precisely what each element can contain）。许多组合是没有任何语义含义的，比如一个  元素嵌套在一个  元素里。

在 HTML 中，通常在一个空元素上使用一个闭标签是无效的。例如，`<input type="text"></input>` 的闭标签是无效的 HTML。

在 HTML 中有以下这些空元素：

<area><base><br><col><colgroup> when the span is present
    <command><embed><hr><img><input><keygen><link>
    <meta><param><source><track><wbr>

#### 12、AD ####

1.  A. getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。  
    语法：`document.getElementById(id)`  
    参数为id值。
2.  D.querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。  
    所以要获取ID为a的DOM元素，需要加上\#+id名。也就是`document.querySelector("#a");`

#### 13、BC ####

JavaScript 有七种内置数据类型，包括基本类型和对象类型。

基本类型分为以下六种：

*  string（字符串）
 *  boolean（布尔值）
 *  number（数字）
 *  symbol（符号）
 *  null（空值）
 *  undefined（未定义）

1.  string 、number 、boolean 和 null undefined 这五种类型统称为**原始类型**
2.  ymbol是ES6中新增的数据类型，symbol 表示独一无二的值
3.  null 和 undefined 通常被认为是特殊值，这两种类型的值唯一，就是其本身。

#### 14、BD ####

阻止默认事件：

e.preventDefault()

e.returnValue = false (IE)

阻止冒泡：

e.stopPropagation()

e.cancelBubble = true (IE)

#### 15、ABCD ####

⼀个内容不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本⾝⼀般拥有固有尺⼨（宽度，⾼度，宽⾼⽐）的元素，被称之为置换元素。  
除了置换元素其他的都是非置换元素。  
对于⾏内级⾮置换元素，宽度设置是不适⽤的；  
对于⾏内级置换元素来说，其宽度的设置需遵循以下⼏点：  
1.若宽⾼的计算值都为auto且元素有固有宽度，则width的使⽤值为该固有宽度；典型的例⼦是：拥有默认宽⾼的input当宽度的计算值为auto时，则宽度使⽤值为其默认的固有宽度  
2.若宽度的计算值为auto且元素有固有宽度，则width的使⽤值为该固有宽度；例⼦同上  
3.若宽度的计算值为auto且⾼度有⾮auto的计算值，并且元素有固有宽⾼⽐，则width的使⽤值为⾼度使⽤值 \* 固有宽⾼⽐

例如：你写的标签变成了你引入的资源，比如img，其实是把图片拿来放在了你写img的位置，所以像是置换了一样。

a) 置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。  
例如：浏览器会根据`<img>`标签的src属性的 值来读取图片信息并显示出来，而如果查看(x)html代码，则看不到图片的实际内容；`<input>`标签的type属性来决定是显示输入 框，还是单选按钮等。 (x)html中 的`<img>、<input>、<textarea>、<select>、<object>` 都是置换元素。这些元素往往没有实际的内容，即是一个空元素。

置换元素在其显示中生成了框，这也就是有的内联元素能够设置宽高的原因。

b) 不可替换元素：(x)html 的大多数元素是不可替换元素，即其内容直接表现给用户端（如浏览器）。

例如： `<label>label中的内容</label>` 标签`<label>`是一个非置换元素，文字label中的内容”将全被显示。

#### 16、D ####

[element]: https://developer.mozilla.org/en-US/docs/Glossary/element
[HTML]: http://www.w3.org/html/wg/drafts/html/CR/
[SVG]: http://www.w3.org/TR/SVG2/
[MathML]: http://www.w3.org/Math/draft-spec/