2026年前端基础面试速答含答案

2026年前端基础面试速答含答案一、单选题（每题2分，共10题）1.以下哪个HTML标签用于定义网页的标题？A.`<header>`B.`<title>`C.`<heading>`D.`<meta>`答案：B解析：`<title>`标签用于定义网页的标题，显示在浏览器标签页和搜索引擎结果中。`<header>`是容器标签，`<heading>`非标准标签，`<meta>`用于元数据。2.CSS中，哪个属性用于设置元素的外边距？A.`padding`B.`margin`C.`border`D.`spacing`答案：B解析：`margin`控制外边距，`padding`控制内边距，`border`控制边框，`spacing`非标准属性。3.JavaScript中，以下哪个方法用于将JSON字符串转换为对象？A.`JSON.parse()`B.`JSON.stringify()`C.`JSON.convert()`D.`JSON.toObject()`答案：A解析：`JSON.parse()`将字符串解析为对象，`JSON.stringify()`将对象转换为字符串，其他选项非标准方法。4.以下哪个CSS选择器具有最高的优先级？A.类选择器（`.class`）B.ID选择器（`#id`）C.标签选择器（`<tag>`）D.属性选择器（`[attribute]`）答案：B解析：ID选择器优先级最高（1000），类选择器（10），标签选择器（1），属性选择器介于两者之间。5.React中，以下哪个钩子用于在组件挂载后执行副作用？A.`useState`B.`useEffect`C.`useContext`D.`useReducer`答案：B解析：`useEffect`用于处理副作用（如API调用、DOM操作），`useState`管理状态，`useContext`获取上下文值，`useReducer`复杂状态管理。6.以下哪个HTTP方法用于安全地提交表单数据？A.`GET`B.`POST`C.`PUT`D.`DELETE`答案：B解析：`POST`用于提交数据并创建/更新资源，`GET`用于查询，`PUT`替换资源，`DELETE`删除资源。表单数据建议用POST加密传输。7.以下哪个CSS布局模型允许元素自由流动并适应容器？A.FlexboxB.GridC.FloatD.Position答案：A解析：Flexbox（弹性布局）用于一维布局（行/列），Grid（网格布局）用于二维布局，Float用于旧版布局，Position用于定位。8.JavaScript中，以下哪个运算符用于严格等于？A.`==`B.`===`C.`=`D.`!=`答案：B解析：`===`检查值和类型是否完全相等，`==`只比较值（类型自动转换），`=`赋值，`!=`不等于。9.以下哪个CSS属性用于实现响应式设计中的视口单位？A.`vw`B.`vh`C.`vm`D.`vmin`答案：A、B、D解析：`vw`（视口宽度1%）、`vh`（视口高度1%）、`vmin`（视口宽高最小值1%）均用于响应式设计，`vm`非标准单位。10.Vue中，以下哪个指令用于条件渲染元素？A.`v-if`B.`v-for`C.`v-bind`D.`v-on`答案：A解析：`v-if`控制条件渲染，`v-for`循环渲染，`v-bind`绑定属性，`v-on`绑定事件。二、多选题（每题3分，共5题）1.以下哪些属于CSS盒模型组成部分？A.内容（Content）B.边框（Border）C.外边距（Margin）D.位置（Position）E.内边距（Padding）答案：A、B、C、E解析：盒模型包含内容、内边距、边框、外边距，位置是定位属性，非盒模型部分。2.JavaScript中，以下哪些方法可以用于数组去重？A.`Set()`B.`filter()`+`indexOf()`C.`Map()`D.`reduce()`E.`unique()`答案：A、B、D解析：`Set()`、`filter()`+`indexOf()`、`reduce()`可用于去重，`Map()`用于键值对存储，`unique()`非标准方法。3.以下哪些属于HTTP响应状态码类别？A.200系列（成功）B.300系列（重定向）C.400系列（客户端错误）D.500系列（服务器错误）E.600系列（自定义）答案：A、B、C、D解析：HTTP状态码分为5类：200（成功）、300（重定向）、400（客户端）、500（服务器）、600（非标准）。4.React中，以下哪些钩子可以用于状态管理？A.`useState`B.`useReducer`C.`useContext`D.`useEffect`E.`useRef`答案：A、B解析：`useState`和`useReducer`用于状态管理，`useContext`获取上下文，`useEffect`处理副作用，`useRef`存储引用。5.以下哪些属于CSS预处理器？A.SassB.LessC.StylusD.CSS-in-JSE.PostCSS答案：A、B、C解析：Sass、Less、Stylus是预处理器，CSS-in-JS（如StyledComponents）和PostCSS是后处理器/工具。三、判断题（每题2分，共5题）1.`<a>`标签的`href`属性必须以`http://`或`https://`开头。答案：错解析：`href`可支持相对路径（如`/path`）、锚点（`#id`）或数据协议（`data:`）。2.CSS中，`display:flex;`的子元素默认垂直排列。答案：错解析：Flexbox默认沿主轴（水平）排列，可通过`flex-direction`设置垂直排列（`flex-direction:column`）。3.JavaScript中，`==`和`===`的行为完全相同。答案：错解析：`==`会进行类型转换，`===`不会，因此`0=='0'`为真，`0==='0'`为假。4.Vue中的`v-model`只用于输入框（`<input>`）。答案：错解析：`v-model`可用于`<input>`、`<select>`、`<textarea>`等表单元素。5.CSSGrid布局只能创建两维网格。答案：对解析：Grid布局天然支持行和列的二维布局，无法直接扩展到三维。四、简答题（每题5分，共4题）1.简述CSS中的盒模型及其组成部分。答案：CSS盒模型是网页布局的基础，每个元素被视为一个矩形盒子，包含：-内容（Content）：元素的实际内容区域。-内边距（Padding）：内容与边框之间的空白区域。-边框（Border）：包裹内边距和外边距的线条。-外边距（Margin）：元素与其他元素之间的空白区域。盒模型分为标准模型和IE模型（`box-sizing:border-box`）。2.解释JavaScript中的闭包（Closure）及其用途。答案：闭包是指函数可以访问其外部作用域的变量，即使外部函数已执行完毕。用途：-数据隐藏和封装：保护变量不被外部修改。-函数柯里化：将多参数函数转化为单参数函数。-实现模块化：如模块模式（自执行函数）。3.简述HTTP和HTTPS的区别。答案：-HTTP：明文传输，易被窃听，端口80。-HTTPS：加密传输（TLS/SSL），端口443，更安全，需证书。HTTPS通过SSL证书验证身份，防止中间人攻击。4.React中，`useState`和`useReducer`的区别是什么？答案：-`useState`：简单状态管理，适合轻量级状态（如UI显示）。-`useReducer`：复杂状态逻辑（多步骤更新、异步操作），代码更清晰。选择依据：状态逻辑简单用`useState`，复杂用`useReducer`。五、代码题（每题10分，共2题）1.用CSS实现一个自适应的卡片布局（宽度80%，居中，阴影效果）。答案：css.card{width:80%;margin:0auto;padding:20px;box-shadow:04px8pxrgba(0,0,0,0.1);border-radius:8px;background:white;}2