前端面试题含答案精华版.docx

前端面试题含答案精华版

选择题

1.下列哪个选项是HTML5新增的语义化标签？

A.`div`

B.`header`

C.`table`

D.`font`

答案：B

解析：`header`是HTML5中新增的语义化标签，用于定义页面的头部内容。其他选项中，`div`是通用容器标签，`table`用于定义表格，`font`是早期HTML用于定义字体样式的标签，已在HTML5中废弃。

2.下列哪个方法可以用来检测一个变量是否为数组？

A.`typeof`

B.`instanceof`

C.`Array.isArray()`

D.`constructor`

答案：C

解析：`Array.isArray()`是ES5中新增的方法，专门用于检测一个变量是否为数组。`typeof`对于数组会返回`object`，`instanceof`可以检测实例是否属于某个构造函数，`constructor`属性返回创建对象的原型函数。

填空题

1.在CSS中，用于设置元素边框宽度的属性是______。

答案：borderwidth

解析：`borderwidth`是CSS属性，用于设置元素的边框宽度。可以单独设置上、右、下、左边框的宽度。

2.在JavaScript中，用于获取当前日期和时间的内置对象是______。

答案：Date

解析：JavaScript中的`Date`对象用于处理日期和时间。可以通过`newDate()`创建一个表示当前日期和时间的`Date`对象。

判断题

1.在HTML中，`script`标签可以放在`head`和`body`中的任意位置。

答案：正确

解析：`script`标签可以放在`head`或`body`中，但需要注意其加载和执行的顺序可能会影响页面的渲染。

2.CSS中的`flex`布局只能用于水平排列元素。

答案：错误

解析：`flex`布局不仅可以用于水平排列元素，还可以用于垂直排列，甚至可以进行复杂的布局控制，具有很高的灵活性。

解答题

1.请解释什么是事件冒泡和事件捕获，并举例说明。

答案：

事件冒泡：事件冒泡是指事件从最具体的元素（触发事件的元素）开始，逐级向上传播到较为抽象的元素（如`document`）。

事件捕获：事件捕获是指事件从最抽象的元素（如`document`）开始，逐级向下传播到最具体的元素（触发事件的元素）。

举例：

```html

divid=parent

buttonid=childClickme/button

/div

script

document.getElementById(parent).addEventListener(click,function(){

console.log(Parentclicked);

},false);//默认为事件冒泡

document.getElementById(child).addEventListener(click,function(){

console.log(Childclicked);

},false);

//输出顺序：ChildclickedParentclicked

/script

```

如果将`addEventListener`的第三个参数设置为`true`，则表示使用事件捕获：

```javascript

document.getElementById(parent).addEventListener(click,function(){

console.log(Parentclicked);

},true);

document.getElementById(child).addEventListener(click,function(){

console.log(Childclicked);

},true);

//输出顺序：ParentclickedChildclicked

```

2.请简述CSS盒模型，并说明如何计算一个元素的宽度和高度。

答案：

CSS盒模型：CSS盒模型描述了元