前端面试题大汇总一

最新推荐文章于 2026-06-28 21:24:42 发布

原创最新推荐文章于 2026-06-28 21:24:42 发布 · 484 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

前端

前端面试题

面试

前端面试题大汇总

我将为你呈现 300 道前端面试题中的前 150 道，这些题目涵盖了 HTML、CSS、JavaScript、DOM 与 BOM、前端工程化、Vue 框架等多个核心领域，能帮助你全面梳理前端知识体系。

一、HTML 基础（30 题）

本章节涵盖HTML语义化、标签使用、表单处理、HTML5新特性等基础知识

什么是语义化 HTML？有哪些常用的语义化标签？
HTML5 新增了哪些语义化标签？它们的使用场景分别是什么？
DOCTYPE 的作用是什么？不同 HTML 版本的 DOCTYPE 有何区别？
简述 HTML 中 src 和 href 的区别，举例说明使用场景。
img 标签的 alt 属性有什么作用？为什么重要？
HTML 中的块级元素和行内元素有哪些区别？如何相互转换？
简述 label 标签的作用及使用方式。
HTML5 的 localStorage 和 sessionStorage 有什么区别？使用场景分别是什么？
iframe 标签有哪些优缺点？如何解决 iframe 的跨域问题？
HTML 中的 form 表单提交方式有哪些？如何阻止默认提交行为？
HTML5 的 input 标签新增了哪些类型？举例说明其用途。
简述 HTML 中的 meta 标签的常见属性及作用。
什么是 SVG？它与 Canvas 有什么区别？
HTML 中的注释方式是什么？注释会被浏览器解析渲染吗？
简述 HTML 的文档结构，包括 DOCTYPE、html、head、body 的作用。
什么是 HTML 实体？常见的 HTML 实体有哪些（如空格、小于号）？
HTML 中的 a 标签的 target 属性有哪些取值？分别表示什么含义？
简述 HTML5 的拖放 API 的基本使用步骤。
HTML 中的 table 标签的基本结构（thead、tbody、tfoot）及作用是什么？
什么是 ARIA？它在 HTML 中的作用是什么？
HTML 中的 script 标签的 defer 和 async 属性有什么区别？
简述 HTML 中的 link 标签的 rel 属性的常见取值及作用。
HTML5 中的 video 标签支持哪些视频格式？如何实现视频的自动播放？
简述 HTML 中的语义化对 SEO 和可访问性的影响。
HTML 中的 div 和 span 标签有什么区别？使用场景分别是什么？
什么是 HTML 的严格模式和混杂模式？如何触发这两种模式？
HTML5 中的 canvas 标签如何绘制基本图形（如矩形、圆形）？
简述 HTML 中的 form 表单的 enctype 属性的作用及取值。
HTML 中的 button 标签和 input 标签的 button 类型有什么区别？
什么是 Web Components？它包含哪些核心技术（如 Custom Elements）？

二、CSS 基础（30 题）

本章节涵盖CSS盒模型、选择器、布局方式、响应式设计等样式相关知识

简述 CSS 的盒模型（标准盒模型和 IE 盒模型）的区别。
CSS 中如何设置元素的盒模型为标准盒模型或 IE 盒模型？
CSS 选择器有哪些类型？优先级如何计算？
简述 CSS 中的层叠（Cascade）、继承（Inheritance）和特异性（Specificity）的含义。
CSS 中的 display 属性有哪些常见取值？分别表示什么布局行为？
如何实现元素的水平居中？请列举至少 3 种方法。
如何实现元素的垂直居中？请列举至少 3 种方法。
CSS 中的 position 属性有哪些取值？分别有什么特点？
简述 CSS 中的 float 属性的作用及清除浮动的方法。
CSS 中的 z-index 属性的作用是什么？它的生效条件是什么？
简述 CSS 中的 Flex 布局的基本概念（容器和项目的属性）。
Flex 布局中如何实现项目的水平均匀分布？如何实现项目的垂直对齐？
CSS 中的 Grid 布局与 Flex 布局有什么区别？使用场景分别是什么？
简述 CSS 中的响应式布局的实现方式（如媒体查询、rem、vw/vh）。
CSS 中的媒体查询（Media Query）的基本语法及作用是什么？
什么是 CSS 预处理器（如 Sass、Less）？它们有哪些优势？
CSS 中的变量（–var）如何定义和使用？有什么作用？
简述 CSS 中的过渡（transition）和动画（animation）的区别及使用场景。
CSS 中如何实现元素的隐藏？display:none 和 visibility:hidden 有什么区别？
CSS 中的 opacity 属性和 rgba () 函数有什么区别？
简述 CSS 中的 BFC（块级格式化上下文）的概念及触发条件。
BFC 有哪些应用场景（如解决浮动塌陷、margin 重叠）？
CSS 中的选择器 “+”“~”“>” 分别表示什么含义？举例说明。
简述 CSS 中的伪类（如:hover、:active）和伪元素（如::before、::after）的区别。
CSS 中如何设置元素的背景（背景色、背景图、背景大小、背景位置）？
简述 CSS 中的字体相关属性（font-family、font-size、font-weight）的使用。
CSS 中的 line-height 属性有什么作用？如何设置行高使其垂直居中？
什么是 CSS 的重置（Reset）和 - normalize.css？它们的区别是什么？
CSS 中如何实现文字溢出显示省略号（单行和多行）？
简述 CSS 中的 transform 属性的常见取值（如 translate、scale、rotate）及作用。

三、JavaScript 基础（50 题）

本章节涵盖JS数据类型、作用域、闭包、原型链、异步编程等核心概念

JavaScript 的数据类型有哪些？基本数据类型和引用数据类型的区别是什么？
如何判断一个变量的数据类型？typeof、instanceof、Object.prototype.toString () 的区别是什么？
简述 JavaScript 中的变量提升（Hoisting）现象，函数声明和变量声明的提升优先级有何不同？
什么是作用域？JavaScript 中的作用域类型（全局作用域、函数作用域、块级作用域）有哪些？
什么是闭包？闭包的形成条件是什么？有哪些应用场景和潜在问题？
简述 JavaScript 中的 this 关键字的指向规则（全局、函数、对象方法、构造函数、箭头函数）。
如何改变 this 的指向？call、apply、bind 的区别是什么？
什么是原型（Prototype）？简述 JavaScript 的原型链机制。
构造函数、原型对象、实例对象之间的关系是什么？
什么是继承？JavaScript 中实现继承的方式有哪些（如原型链继承、构造函数继承、组合继承）？
ES6 中的 class 关键字如何实现继承？与 ES5 的继承方式有什么区别？
简述 JavaScript 中的垃圾回收机制（GC），常见的垃圾回收算法有哪些？
什么是内存泄漏？JavaScript 中常见的内存泄漏场景有哪些（如未清理的定时器、闭包）？
简述 JavaScript 中的事件流（捕获阶段、目标阶段、冒泡阶段）的概念。
如何阻止事件冒泡和事件默认行为？分别使用什么方法？
JavaScript 中的事件委托（事件代理）是什么？有什么优势？如何实现？
简述 JavaScript 中的异步编程模式，常见的异步方式有哪些（如回调函数、Promise、async/await）？
什么是 Promise？Promise 的三种状态（pending、fulfilled、rejected）及状态变化规则是什么？
Promise 的 then、catch、finally 方法的作用是什么？它们的返回值是什么？
如何实现 Promise 的串行和并行执行？（如 Promise.all、Promise.race）
async/await 是什么？它如何简化 Promise 的异步代码？使用时需要注意什么？
简述 JavaScript 中的定时器（setTimeout、setInterval）的工作原理，它们的精度受哪些因素影响？
如何清除定时器？setTimeout 和 setInterval 的清除方法有什么区别？
什么是宏任务（Macro Task）和微任务（Micro Task）？它们的执行顺序是什么？
常见的宏任务和微任务有哪些？（如 script、setTimeout、Promise.then）
简述 JavaScript 中的数组的常用方法（如 push、pop、shift、unshift、slice、splice、map、filter）。
数组的 map、filter、reduce 方法的作用是什么？它们的返回值是什么？举例说明。
如何实现数组的去重？请列举至少 3 种方法。
如何实现数组的扁平化（将多维数组转为一维数组）？请列举至少 2 种方法。
简述 JavaScript 中的对象的常用方法（如 Object.keys、Object.values、Object.assign、Object.freeze）。
如何实现对象的深拷贝和浅拷贝？它们的区别是什么？
JavaScript 中的字符串的常用方法有哪些（如 indexOf、slice、substring、replace、split）？
什么是正则表达式？简述正则表达式的常见元字符（如 ^、$、.、*、+）及作用。
正则表达式的 test 和 exec 方法有什么区别？
简述 JavaScript 中的类型转换规则（强制转换和隐式转换），如数字转字符串、字符串转数字。
== 和 === 的区别是什么？在什么情况下 == 会返回 true？
什么是 NaN？如何判断一个值是否为 NaN？
undefined 和 null 的区别是什么？它们的使用场景分别是什么？
简述 JavaScript 中的函数参数的特性（如 arguments 对象、默认参数、剩余参数）。
箭头函数与普通函数有什么区别？（如 this 指向、arguments、构造函数）
什么是立即执行函数（IIFE）？它的作用是什么？
简述 JavaScript 中的模块化发展（如 CommonJS、AMD、ES6 Module）。
ES6 Module 的 import 和 export 有哪些用法？（如默认导出、命名导出、动态 import）
什么是防抖（Debounce）和节流（Throttle）？它们的区别是什么？如何实现？
简述 JavaScript 中的 JSON 对象的常用方法（JSON.parse、JSON.stringify）及注意事项。
如何判断一个对象是否为空对象（不包含可枚举属性）？
简述 JavaScript 中的 for 循环的几种形式（for、for…in、for…of、forEach）及区别。
什么是柯里化（Currying）？它的作用是什么？如何实现函数柯里化？
简述 JavaScript 中的生成器函数（Generator）的概念及使用方式（yield、next 方法）。
什么是 Proxy 和 Reflect？它们的作用是什么？举例说明 Proxy 的使用场景。