web前端经典面试题及答案.docx

web前端经典面试题及答案

选择题

1.以下哪个是HTML5中的新元素？

A.`div`

B.`section`

C.`header`

D.`table`

答案：B.`section`

解析：`section`是HTML5中新增的元素，用于表示文档中的一个区域或章节。

2.以下哪个属性用于定义CSS3中的动画？

A.`animationname`

B.`animationduration`

C.`animationdelay`

D.所有以上选项

答案：D.所有以上选项

解析：`animationname`定义动画的名称，`animationduration`定义动画持续的时间，`animationdelay`定义动画开始前的延迟时间。

填空题

3.HTML文档的根元素是______。

答案：`html`

解析：`html`元素是HTML文档的根元素，包含了整个页面的内容。

4.在CSS中，用来选择所有class属性为myclass的元素的属性选择器是______。

答案：`.myclass`

解析：在CSS中，点号（`.`）用于选择class属性。

判断题

5.在JavaScript中，变量声明使用`var`、`let`和`const`。`const`声明的变量可以被重新赋值。(判断对错)

答案：错误

解析：使用`const`声明的变量是常量，其值不能被重新赋值。

6.在HTML中，`br`标签是双标签。(判断对错)

答案：错误

解析：`br`是单标签，用于在文本中插入换行。

解答题

7.请解释一下什么是事件冒泡以及事件捕获？

答案：

事件冒泡和事件捕获是描述事件在DOM中传播的两种机制。

事件冒泡：当一个事件发生后，会从最深的节点开始，然后逐级向上传播到较为顶层的节点。

事件捕获：与事件冒泡相反，事件捕获是从最顶层的节点开始，然后逐级向下传播到最深的节点。

在JavaScript中，可以使用`addEventListener`方法的第三个参数来设置事件是在冒泡阶段还是捕获阶段被处理。

8.请简述如何使用CSS实现水平垂直居中。

答案：

实现水平垂直居中的方法有多种，以下是一些常见的方法：

使用Flexbox：

```css

.container{

display:flex;

justifycontent:center;

alignitems:center;

}

```

使用Grid：

```css

.container{

display:grid;

placeitems:center;

}

```

使用定位和Transform：

```css

.container{

position:relative;

}

.centered{

position:absolute;

top:50%;

left:50%;

transform:translate(50%,50%);

}

```