在准备前端面试之前，了解一些常见问题及其答案是非常重要的。这些问题可以帮助你更好地理解前端开发以及相关的技术和概念。下面是一些常见的前端面试问题及其答案。
HTML 相关问题
1. 什么是语义化的 HTML？
语义化的 HTML 是指使用恰当的 HTML 标签来描述网页内容，使得代码结构清晰、易于理解和维护。例如，使用 <h1> 到 <h6> 标签来表示标题，<p> 标签表示段落，<ul> 和 <li> 标签表示无序列表等。
2. 如何在 HTML 中引入 CSS 和 JavaScript？
可以使用 <link> 标签将外部 CSS 文件引入到 HTML 中，例如：
<link rel="stylesheet" href="styles.css">
可以使用 <script> 标签将外部 JavaScript 文件引入到 HTML 中，例如：
<script src="script.js"></script>
3. 什么是自定义属性 (data attribute)？
自定义属性是指以 data- 前缀命名的 HTML 属性，用于保存与元素相关的自定义数据。这些属性对于 JavaScript 操作非常有用，例如用于存储各种配置参数或标记特定的元素。
<div data-name="John Doe" data-id="123"></div>
可以使用 dataset 属性或 .getAttribute() 方法来访问自定义属性的值。
4. <div> 和 <span> 之间有什么区别？
<div> 和 <span> 都是无语义的容器标签。<div> 通常用于定义（块级）区域，而 <span> 主要用于设置（行内）文本样式或作为其他元素的容器。
CSS 相关问题
1. 什么是盒模型？
盒模型是指在 CSS 中，每个元素都被表示为一个矩形的“盒子”，由内容区域、内边距、边框和外边距组成。它规定了元素在页面上的布局和尺寸。
2. 什么是 CSS 选择器？
CSS 选择器用于选择要应用样式的 HTML 元素。常见的 CSS 选择器包括标签选择器、类选择器、ID 选择器、伪类选择器和属性选择器。
3. 什么是层叠样式表（CSS）？
层叠样式表是一种用于描述页面样式的语言。它通过选择器选择特定的 HTML 元素，并为其应用样式规则。CSS 可以用于控制元素的尺寸、颜色、字体、布局等。
4. 如何垂直居中一个元素？
可以使用以下三种方法之一垂直居中一个元素：
- 使用
position和transform属性：
.parent {
display: flex;
justify-content: center;
align-items: center;
}
.child {
position: relative;
top: 50%;
transform: translateY(-50%);
}
- 使用
position和calc()函数：
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
- 使用
display和margin属性：
.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
JavaScript 相关问题
1. 什么是 JavaScript？
JavaScript 是一种用于创建交互式网页的脚本语言。它可以与 HTML 和 CSS 结合使用，对网页进行动态操控和交互。
2. 什么是闭包（Closure）？
闭包是指函数能够访问外部函数作用域内的变量。它可以实现私有变量和数据封装。在 JavaScript 中，每当创建一个函数时，就会创建一个闭包。闭包可以通过返回函数、嵌套函数等方式来实现。
3. 什么是事件冒泡（Event Bubbling）和事件捕获（Event Capturing）？
事件冒泡是指当一个元素上触发了某个事件时，该事件会向上冒泡传递给它的父级元素，一直到根元素。事件捕获是指当一个元素上触发了某个事件时，该事件会从根元素开始一直向下捕获传递给目标元素。
4. null 和 undefined 有什么区别？
null 和 undefined 都表示“无值”，但它们有一些区别。null 是一个表示为空的特殊值，可以显式地赋给一个变量。而 undefined 是一个表示未赋值的默认值，当一个变量声明但没有赋初值时，它的默认值就是 undefined。
总结
这些是一些常见的前端面试问题及其答案。准备过程中，可以根据需要进一步扩展答案，并进行相关的代码练习和实践。记住，在面试过程中，关键是清晰地表达你的知识和思考过程，展示你的能力和潜力。祝你面试顺利！
本文来自极简博客，作者：紫色迷情，转载请注明原文链接：前端面试必备：常见问题及答案
