Web基础高频面试题及详细答案（真实面试版）

Web基础高频面试题及详细答案（真实面试版）本套面试题聚焦前端Web基础核心知识点，涵盖HTML、CSS、JavaScript三大模块，均为企业初级前端岗位高频面试题型，答案贴合真实面试口述逻辑，简洁易懂、干货落地，无冗余套话。一、HTML基础面试题1、HTML5新增了哪些常用语义化标签？有什么作用？答案：常用语义化标签：header、nav、main、section、article、aside、footer。核心作用：1.结构清晰：让页面代码层级分明，开发者一眼能看懂页面模块划分，提升代码可读性和可维护性；2.利于SEO：搜索引擎爬虫可以精准识别页面各个模块的功能和权重，提升网页搜索排名；3.适配设备：方便屏幕阅读器等辅助设备识别页面结构，提升网页无障碍访问体验；4.替代传统div布局：摒弃全是div的混乱结构，标准化页面布局。2、行内元素、块级元素、行内块元素的区别？答案：块级元素：独占一行，默认宽度100%父级宽度，支持宽、高、内外边距、margin，常见标签：div、p、h1-h6、ul、li。行内元素：同行显示，宽度由内容撑开，不支持宽高、上下margin、上下padding，仅支持左右内外边距，常见标签：span、a、em、i。行内块元素：兼具两者优点，同行显示，同时支持宽高、内外边距、margin，常见标签：img、input、button。3、img标签的alt和title属性区别？答案：alt：图片加载失败时显示的替代文本，核心作用是辅助设备识别、SEO优化，属于必填属性；title：鼠标悬浮在图片上时显示的提示文字，仅用于提升用户体验，非必填。4、HTML中href和src的区别？答案：src：用于引入外部资源，是替换当前标签内容，浏览器会直接加载、解析资源（图片、js、视频），会阻塞页面渲染；href：用于建立链接关联关系，多用于超链接、引入css样式表，不会阻塞页面渲染，仅建立资源关联。二、CSS基础面试题1、CSS选择器优先级排序规则是什么？答案：优先级从高到低：!important>行内样式>ID选择器>类、伪类、属性选择器>标签选择器>通配符选择器>继承样式。补充规则：1.优先级就近原则，同权重下，后写的样式覆盖先写的；2.优先级只看权重叠加，不看层级深浅；3.!important优先级最高，开发中尽量少用，避免样式难以维护。2、盒子模型有哪些？区别是什么？答案：盒子模型分为标准盒模型（W3C）和怪异盒模型（IE），由content、padding、border、margin四部分组成。1.标准盒模型（box-sizing:content-box）：元素设置的宽高仅为内容区尺寸，最终元素总宽度=width+padding+border+margin；2.怪异盒模型（box-sizing:border-box）：元素设置的宽高包含内容、内边距、边框，最终元素总宽度=设定width+margin，日常开发首选此模式，方便尺寸计算。3、CSS垂直居中的常用方法？答案：分享3种项目最常用、兼容性较好的方法：1.Flex居中（最简常用）：父元素设置display:flex;justify-content:center;align-items:center;适配所有场景，移动端、现代项目首选；2.定位居中：父元素相对定位，子元素绝对定位，设置top:50%;left:50%;transform:translate(-50%,-50%);无需固定子元素宽高；3.table-cell居中：父元素设置display:table-cell;vertical-align:middle;适合简单文本、图片居中，兼容性极佳。4、浮动的作用、副作用及清除浮动的方法？答案：浮动作用：实现元素横向排列，早期用于页面多列布局。浮动副作用：子元素浮动后脱离文档流，导致父元素高度塌陷，后续正常文档流布局会错乱。清除浮动常用方法：1.伪类清除（项目最常用）：给父元素添加clearfix伪类，代码简洁、无冗余结构；2.父元素设置overflow:hidden;简单粗暴，适合简单布局；3.新增空标签，设置clear:both;会增加冗余DOM结构，不推荐。5、flex常用属性有哪些？分别作用是什么？答案：父容器属性：1.display:flex;开启弹性布局；2.flex-direction：设置主轴方向（行、列、反向行、反向列）；3.justify-content：主轴对齐方式（居中、两端对齐、均分等）；4.align-items：侧轴对齐方式；5.flex-wrap：是否自动换行。子元素属性：1.flex-grow：元素放大比例，默认0；2.flex-shrink：元素缩小比例，默认1；3.flex-basis：元素基础尺寸；4.align-self：单独设置自身侧轴对齐方式。三、JavaScript基础面试题1、JS的基本数据类型有哪些？答案：ES6之后共7种基本数据类型（原始类型）：String、Number、Boolean、Null、Undefined、Symbol、BigInt；1种引用数据类型：Object（包含对象、数组、函数、正则等）。补充：Null代表空对象，Undefined代表未定义；Symbol用于定义唯一不重复的值，解决对象属性名冲突问题；BigInt用于处理超大整数，避免精度丢失。2、let、const、var的区别？答案：1.变量提升：var存在变量提升，声明前可访问，值为undefined；let、const无变量提升，存在暂时性死区，声明前访问会报错；2.块级作用域：var只有函数、全局作用域，无块级作用域；let、const拥有块级作用域（{}内部生效）；3.重复声明：var允许重复声明变量；let、const不允许重复声明；4.修改规则：var、let声明的变量可修改值；const声明的常量不可修改（引用类型可修改内部属性，地址不变即可）；日常开发：优先使用const，变量需要修改时用let，禁用var。3、==和===的区别？答案：==是宽松相等，会自动隐式转换数据类型，仅对比值是否相等；===是严格相等，不做类型转换，必须类型、值全部一致才返回true。举例：1=='1'结果为true，1==='1'结果为false；开发规范：优先使用===，避免隐式转换带来的逻辑bug。4、什么是闭包？闭包的作用和优缺点？答案：闭包定义：内层函数访问外层函数的变量，且内层函数被外部引用，就会形成闭包。简单说：函数嵌套，内部函数使用外部变量，即为闭包。作用：1.保护私有变量，实现变量私有化，避免全局变量污染；2.延长变量的生命周期，让函数执行结束后，变量不被销毁；3.实现模块化、柯里化等功能。优缺点：优点：私有化变量、保留上下文状态；缺点：变量常驻内存，无法及时释放，容易造成内存占用过高，严重时会导致内存泄漏，使用后需手动释放引用。5、JS中this的指向规则？答案：this指向由函数调用方式决定，和定义位置无关：1.全局调用：this指向window（浏览器环境）；2.对象方法调用：this指向调用该方法的对象；3.构造函数调用：this指向new创建的实例对象；4.箭头函数：无独立this，继承外层作用域的this；5.call、apply、bind：手动修改this指向，指向传入的第一个参数。6、数组常用的遍历和操作方法？答案：遍历方法：for循环、forEach、for...of、map、filter、some、every、reduce。常用操作方法：1.增删改：push、pop、unshift、shift、splice；2.查询：indexOf、includes、find、findIndex；3.转换排序：join、reverse、sort；4.迭代处理：map（返回新数组）、filter（筛选数组）、reduce（累加计算）。7、什么是原型和原型链？答案：原型：每个函数都有prototype（显式原型），每个对象都有__proto__（隐式原型），对象的__proto__指向构造函数的prototype，原型上存放公共方法和属性，实现方法复用。原型链：对象查找属性和方法的机制。当访问对象属性时，先在自身查找，找不到就顺着__proto__向上查找原型，层层向上直到Ototype，最终指向null，这条查找链路就是原型链。核心作用：实现继承、复用代码，减少内存占用。8、同步和异步的区别？JS为什么需要异步？答案：同步：代码自上而下依次执行，上一段代码执行完毕，才会执行下一段，会阻塞后续代码；异步：代码执行不会等待耗时操作完成，直接执行后续代码，耗时任务后台执行，完成后再回调执行，不会阻塞主线程。需要异步的原因：JS是单线程语言，如果所有代码同步执行，网络请求、定时器、文件操作等耗时任务会阻塞页面渲染，导致页面卡顿、无响应，异步可以完美解决阻塞问题，提升页面流畅度。四、综合基础面试题1、页面从输入网址到展示页面的完整流程？答案：1.DNS解析：将域名转换为服务器IP地址；2.TCP三次握手：建立客户端与服务器的稳定连接；3.发送HTTP请求：客户端向服务器请求页面资源；4.服务器处理请求：返回对应的HTML、CSS、JS、图片等资源；5.浏览器解析渲染：解析HTML生成DOM树，解析CSS生成CSSOM树，结合生成渲染树；6.页面布局、绘制：根据渲染树计算元素位置大小，绘制页面像素；7.JS执行：执行页面脚本，完成页面交互逻辑；8.TCP四次挥手：断