初级Web前端面试题及详细答案（真实面试版）

初级Web前端面试题及详细答案（真实面试版）本套面试题专为0-1年经验、应届生、转行初级前端岗位整理，贴合企业真实面试高频考点，内容通俗易懂、无套话空话，答案侧重实操理解和工作应用，适配初级前端面试场景。一、HTML基础面试题1.HTML5新增了哪些常用语义化标签？说说你的使用场景参考答案：常用语义化标签主要有：header、nav、main、section、article、aside、footer。使用场景：header：用于页面或模块的头部，存放logo、导航、标题等内容；nav：专门存放页面主导航、侧边导航等导航链接；main：页面核心主体内容，一个页面只能有一个main；section：页面分区块，比如产品介绍、新闻板块、服务模块；article：独立完整的内容模块，比如文章、帖子、商品卡片；aside：侧边栏、附属内容，比如热门推荐、广告、侧边菜单；footer：页面底部，存放版权信息、联系方式、备案号等。语义化标签的核心作用：让代码结构清晰，方便团队维护，同时利于搜索引擎抓取页面内容，提升SEO效果，也适配屏幕阅读器，提升页面无障碍性。2.行内元素、块级元素、行内块元素的区别？各自有哪些常用标签？参考答案：块级元素特点：独占一行，默认宽度100%父级宽度，可以设置宽、高、内外边距。常用标签：div、p、h1-h6、ul、li、ol、section、header等。行内元素特点：不独占一行，横向排列，宽高由内容撑开，无法设置宽高、上下边距，只能设置左右内外边距。常用标签：span、a、em、i、strong、u等。行内块元素特点：兼具行内和块级特性，横向排列，同时可以设置宽高、内外边距。常用标签：img、input、button、textarea。3.简述HTML中DOCTYPE的作用参考答案：DOCTYPE是文档类型声明，放在HTML文档最顶部，作用是告诉浏览器当前页面使用的HTML版本，让浏览器按照对应标准解析渲染页面。如果不写DOCTYPE，浏览器会进入怪异模式，页面样式会出现兼容错乱、布局错位等问题；写上DOCTYPE后，浏览器会以标准模式渲染页面，保证样式统一。HTML5的DOCTYPE声明非常简洁，无版本冗余代码。二、CSS基础面试题1.CSS选择器优先级顺序是什么？权重怎么计算？参考答案：优先级从高到低：!important>行内样式>ID选择器>类/伪类/属性选择器>标签选择器>通配符选择器>继承样式权重计算规则：!important：权重最高，强制覆盖所有样式（工作中尽量少用，难以维护）；行内样式：1000；ID选择器：100；类、伪类、属性选择器：10；标签、伪元素选择器：1；通配符、继承样式：0。权重数值越大，样式优先级越高，数值相同则后写的样式覆盖先写的。2.说说盒子模型？标准盒模型和怪异盒模型的区别参考答案：CSS盒子模型是页面布局的核心，所有元素都可以看成一个盒子，由内容区（content）、内边距（padding）、边框（border）、外边距（margin）四部分组成。标准盒模型（box-sizing:content-box）元素设置的width/height只代表内容区大小，盒子实际总宽度=width+padding+border+margin。是浏览器默认的盒模型。怪异盒模型（box-sizing:border-box）元素设置的width/height是盒子整体大小，包含内容、内边距、边框，盒子实际宽度=设定的width，margin单独计算。工作中基本都会统一设置border-box，方便布局计算尺寸，避免padding、border撑大盒子导致布局错乱。3.如何实现水平居中、垂直居中？写出常用方法参考答案：一、水平居中1.块级元素：给自身设置margin:0auto;（需设置固定宽度）2.行内/行内块元素：给父元素设置text-align:center;3.flex布局：父元素设置display:flex;justify-content:center;二、垂直居中1.flex布局（最常用）：父元素设置display:flex;align-items:center;2.单行文本：设置line-height=父元素高度3.定位居中：父元素相对定位，子元素绝对定位，top:50%;left:50%;transform:translate(-50%,-50%);适配不定宽高元素4.谈谈Flex布局的常用属性及使用场景参考答案：Flex是弹性布局，用来快速实现自适应、居中、均分布局，适配移动端和常规页面布局，兼容性良好。父容器常用属性：display:flex;开启弹性布局；justify-content：水平对齐（center居中、space-between两端对齐、space-around均分）；align-items：垂直对齐（center居中、stretch拉伸、top/bottom对齐）；flex-wrap:wrap;自动换行，避免元素挤压溢出；flex-direction：主轴方向，row横向、column纵向。子元素常用属性：flex:1;自动平分剩余空间；align-self：单独设置自身垂直对齐方式；order：调整元素排列顺序，数值越小越靠前。5.什么是BFC？触发条件和作用是什么？参考答案：BFC即块级格式化上下文，是浏览器的一块独立渲染区域，区域内部元素的布局不会影响外部元素，外部也不会影响内部。常见触发条件：元素设置浮动（float不为none）；设置overflow不为visible（常用overflow:hidden）；设置display为inline-block、flex、grid；设置绝对定位、固定定位。主要作用：清除浮动：解决父元素高度塌陷问题；解决外边距塌陷：相邻块级元素上下margin重叠问题；隔离布局：让内部元素和外部布局互不干扰。三、JavaScript基础面试题1.var、let、const的区别？参考答案：1.作用域不同：var是函数作用域，let、const是块级作用域（{}内部生效）；2.变量提升不同：var存在变量提升，可先使用后声明；let、const存在暂时性死区，声明前无法使用；3.重复声明：var允许重复声明变量；let、const不允许重复声明；4.赋值规则：var、let可修改值；const声明常量，必须初始化，基本类型不可修改，引用类型可修改内部属性；工作使用规范：优先使用const，需要修改变量时用let，基本不用var。2.说说JS的数据类型有哪些？如何判断数据类型？参考答案：JS一共有8种数据类型，分为基本类型和引用类型。基本类型（7种）：String、Number、Boolean、Undefined、Null、Symbol、BigInt引用类型（1种）：Object（包含数组、对象、函数、正则等）常用判断方法：typeof：可判断基本类型（null返回object是bug），无法精准判断数组、对象；Array.isArray()：专门判断是否为数组；Ototype.toString.call()：最精准，可判断所有数据类型。3.什么是闭包？闭包的作用和优缺点参考答案：闭包就是内层函数访问外层函数的变量，且外层函数执行结束后，内层函数依然可以保留外层变量的作用域，简单说：函数嵌套，内层引用外层变量，即为闭包。作用：保留私有变量，避免全局变量污染；让变量常驻内存，实现数据缓存；实现模块化思维，封装私有方法和属性。优缺点：优点：私有化变量、缓存数据、延长变量生命周期；缺点：变量常驻内存，容易造成内存堆积，使用过多会导致页面性能变差，需要手动释放。4.谈谈原型和原型链的理解参考答案：JS中每个函数都有prototype（原型对象），每个实例对象都有__proto__（原型指针），指向构造函数的prototype。原型作用：存放公共方法和属性，实现方法共享，节省内存，不用给每个实例单独创建方法。原型链：对象的__proto__层层向上查找，直到指向null，这条查找链路就是原型链。当访问对象的属性或方法时，会先在自身查找，找不到就沿着原型链向上查找，直到顶层Object原型，查找不到则返回undefined。5.什么是防抖和节流？工作中如何使用？参考答案：防抖和节流是用来限制高频事件触发的方法，减少浏览器重复渲染、请求发送，优化页面性能，常见于输入框输入、窗口resize、滚动、点击按钮等场景。防抖：触发事件后，延迟一段时间执行，如果期间再次触发，重新计时，只执行最后一次。适用场景：搜索框输入联想、窗口大小调整、表单输入校验。节流：固定时间内只执行一次事件，不管触发多少次，间隔时间到了才执行下一次。适用场景：页面滚动加载、高频点击提交、鼠标移动事件。6.简述AJAX的原理和使用步骤参考答案：AJAX是异步无刷新请求技术，核心作用是不刷新整个页面，局部更新页面数据，实现前后端数据交互。原生AJAX使用步骤：创建XMLHttpRequest实例对象；调用open()方法，配置请求方式、请求地址、是否异步；监听onreadystatechange状态变化事件，判断请求是否成功；调用send()方法发送请求；请求成功后，通过responseText获取后端返回数据，渲染页面。现在工作中基本使用axios封装请求，底层依然是基于AJAX原理实现。四、综合实操&面试常问软问题1.页面加载从输入网址到展示页面，全过程是什么？参考答案：DNS解析：将域名解析为服务器IP地址；TCP三次握手：建立客户端和服务器的连接通道；发送HTTP请求：客户端向服务器请求页面资源；服务器响应：服务器返回HTML、CSS、JS、图片等资源；页面解析渲染：浏览器解析HTML生成DOM树，解析CSS生成CSSOM树，合成渲染树；布局、绘制：计算元素位置大小，绘制页面像素；JS执行：加载执行JS代码，完成页面交互绑定；TCP四次挥手：断开网络连接。2.如何优化前端页面性能？参考答案：结合日常开发，常用优化方式分为几类：资源优化：压缩JS、CSS、图片，使用webp格式图片，懒加载图片和视频；代码优化：减少冗余代码，避免全局变量泛滥，合理使用防抖节流，减少DOM操作；加载优化：开启CDN加速，静态资源缓存，拆分打包文件，按需加载路由和组件；渲染优化：避免频繁重排重绘，使用flex、transform代替常规布局属性，减少嵌套层级；请求优化：合并接口请求，避免