HTML+CSS+JS 前端高频面试题及详细答案（实战向）

HTML+CSS+JS前端高频面试题及详细答案（实战向）一、HTML面试题1.说说HTML5新增的常用语义化标签及作用答案：语义化标签的核心作用是：让页面结构清晰、利于搜索引擎抓取、方便开发者维护、适配无障碍阅读设备。日常开发最常用的新增标签如下：<header>：页面或区块的头部区域，用于存放标题、导航、logo等内容<nav>：专门用于导航链接区域，区分普通文本链接<main>：页面核心主体内容，一个页面只能有一个main<section>：文档中的独立区块，用于划分主题内容模块<article>：独立的完整内容块，比如文章、帖子、评论，可单独复用<aside>：侧边栏、辅助信息区域，和主体内容关联但独立<footer>：页面或区块底部，存放版权、备案、联系方式等<figure>/<figcaption>：包裹图片、图表等媒体内容，搭配标题说明2.行内元素、块级元素、行内块元素的区别答案：（1）块级元素（block）独占一行，默认宽度100%父级宽度可以设置宽、高、内外边距常见：div、p、h1-h6、ul、li、section（2）行内元素（inline）同行排列，不独占行宽高无效，仅左右内外边距生效，上下无效常见：span、a、em、i、label（3）行内块元素（inline-block）兼具两者特性：同行排列，不独占行可以设置宽高、全部内外边距常见：img、input、button3.HTML中href和src的区别答案：src：是资源引入，用于替换当前标签内容。浏览器会解析、加载资源，替换标签本身，属于嵌入资源。常用于img、script、iframe。href：是资源链接，用于建立当前页面和目标资源的关联关系，不会替换当前内容。常用于a、link引入样式表。简单总结：src是「拿资源进来用」，href是「和资源建立关联」。4.什么是DOCTYPE？作用是什么？答案：DOCTYPE是文档声明，位于HTML文档最顶部，不属于HTML标签。核心作用：告诉浏览器当前页面使用的HTML版本，让浏览器用对应标准渲染页面。如果省略DOCTYPE，浏览器会触发怪异模式，导致样式布局错乱、兼容性问题。HTML5声明极简：<!DOCTYPEhtml>。二、CSS面试题1.CSS选择器优先级规则答案：优先级从高到低排序，权重不可叠加，高权重直接覆盖低权重：!important（最高，不推荐滥用）行内样式style=""ID选择器#id类、伪类、属性选择器.class、:hover、[type]标签选择器div、p、span通配符*、继承样式（最低）优先级相同时，后写的样式覆盖先写的。2.盒模型详解、标准盒模型和IE怪异盒模型区别答案：CSS盒模型由四部分组成：内容区(content)、内边距(padding)、边框(border)、外边距(margin)。（1）标准盒模型（w3c）box-sizing:content-box;

设置的width/height仅为内容区尺寸，padding、border会撑大盒子，实际盒子宽度=width+padding+border。（2）怪异盒模型（IE）box-sizing:border-box;

设置的width/height是盒子总尺寸，包含content、padding、border，padding和border不会撑大盒子，内容区会自动缩小。

日常开发统一使用border-box，布局更可控。3.垂直居中的常用方法（实战常用）答案：（1）Flex居中（最常用，推荐）父元素设置：display:flex;justify-content:center;align-items:center;

优点：代码简洁、适配所有子元素、响应式友好。（2）绝对定位+transform父：position:relative;

子：position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);

优点：不脱离文档流影响其他元素，适配不定宽高元素。（3）绝对定位+宽高固定居中子元素固定宽高，设置left/right/top/bottom为0，margin:auto;实现居中。4.BFC是什么？触发条件和作用答案：BFC（块级格式化上下文）是浏览器的独立渲染区域，内部元素布局不会影响外部，外部也不会影响内部。触发BFC常用条件：根元素htmlfloat不为noneoverflow为hidden、auto、scrolldisplay为inline-block、flex、gridposition为absolute、fixedBFC核心作用：解决margin塌陷（上下边距重叠）清除浮动，解决父元素高度塌陷阻止浮动元素覆盖普通元素5.浮动的问题及清除浮动的方法答案：浮动特性：元素脱离普通文档流，同行排列。

带来的问题：父元素高度塌陷、元素重叠、布局错乱。常用清除浮动方法：伪类清除（推荐）：给父元素添加clearfix类，通过::after伪类设置content:'';display:block;clear:both;触发父级BFC：父元素设置overflow:hidden;空标签清除：浮动元素末尾加空div，设置clear:both;（代码冗余，不推荐）三、JavaScript面试题（高频核心）1.var、let、const的区别答案：作用域不同：var是函数作用域；let、const是块级作用域（{}内有效）变量提升：var存在变量提升，可先使用后声明；let、const存在暂时性死区，声明前无法使用重复声明：var允许重复声明；let、const不允许赋值规则：var、let可修改值；const声明后不可修改（引用类型可改属性）开发规范：优先使用const，变量需要修改用let，废弃var。2.暂时性死区是什么答案：在代码块中，使用let/const声明的变量，在声明之前的区域，无法访问、无法赋值，这个区间就是暂时性死区。目的是解决var变量提升带来的逻辑混乱，让变量必须先声明后使用，代码更严谨。3.数据类型有哪些？基本类型和引用类型的区别答案：JS8种数据类型：基本类型：String、Number、Boolean、Null、Undefined、Symbol、BigInt

引用类型：Object（包含对象、数组、函数、正则等）核心区别：存储位置：基本类型存在栈内存；引用类型栈存地址，堆存真实数据赋值方式：基本类型赋值是值拷贝，互不影响；引用类型赋值是地址拷贝，修改一个会影响另一个比较规则：基本类型比较值；引用类型比较内存地址4.深拷贝和浅拷贝的区别及实现方式答案：浅拷贝：只拷贝对象第一层属性，多层引用类型依然共享地址，修改嵌套属性会影响原对象。

常用方式：Object.assign()、扩展运算符...、数组slice()深拷贝：完全拷贝所有层级数据，新旧对象完全独立，互不影响。

常用实现：简单场景：JSON.parse(JSON.stringify(obj))（缺点：无法拷贝函数、undefined、Symbol）完整场景：手写递归深拷贝、使用lodash的cloneDeep5.原型和原型链的理解答案：原型（prototype）：每个函数都有prototype属性，是一个对象，用来存放实例共享的方法和属性，节省内存。原型链（__proto__）：每个实例对象都有__proto__属性，指向构造函数的prototype。当访问对象属性/方法时，自身没有就会顺着__proto__向上查找，直到Ototype，这条查找链条就是原型链。顶端：Ototype.__proto__===null。6.this指向问题（最常考五种场景）答案：普通函数调用：this指向window（浏览器）/global（node），严格模式下为undefined对象方法调用：this指向调用该方法的对象构造函数调用：this指向new出来的实例对象箭头函数：没有自己的this，继承外层作用域的this，且无法修改call/apply/bind：手动修改this指向，call、apply立即执行，bind返回新函数7.闭包是什么？作用和优缺点答案：闭包定义：内层函数访问外层函数的变量，且内层函数被外部引用，就会形成闭包。核心作用：保存私有变量，实现变量私有化延长变量生命周期实现模块化、防抖节流、柯里化等功能优缺点：优点：私有化变量、避免全局污染；

缺点：变量常驻内存，容易造成内存堆积，滥用会导致页面性能变差，需手动释放。8.事件循环机制（浏览器）答案：JS是单线程语言，为了实现异步，依靠事件循环执行代码，执行顺序：先执行同步代码执行完毕后，清空微任务队列（Promise.then、async/await、queueMicrotask）再执行宏任务队列（setTimeout、setInterval、ajax、DOM事件）一轮循环结束，重复上述步骤核心优先级：同步代码>微任务>宏任务9.async/await和Promise的理解答案：Promise是异步解决方案，解决回调地狱问题，三种状态：pending（等待）、fulfilled（成功）、rejected（失败），状态一旦改变不可逆。async/await是Promise的语法糖，让异步代码写法同步化，代码更简洁易懂