前端基础300题 · HTML CSS JS Vue

原始300题，保留15个分类。正面题目，背面答案；建议先复习HTML、CSS、JavaScript与Vue基础，再复习网络、工程化和项目场景。

【HTML与语义化】HTML语义化是什么？

用header、nav、main、article、section、footer等表达内容含义，有利于可访问性、SEO和维护；不是单纯换标签。

【HTML与语义化】DOCTYPE有什么作用？

声明文档类型，<!DOCTYPE html>让浏览器按标准模式解析；缺失可能进入怪异模式。

【HTML与语义化】meta viewport有什么作用？

例如width=device-width,initial-scale=1，控制移动端布局视口与初始缩放，支持响应式布局。

【HTML与语义化】defer和async脚本有什么区别？

两者下载都不阻塞HTML解析；async下载后尽快执行，顺序不保证；defer按文档顺序在解析结束后执行。

【HTML与语义化】script type=module有什么特点？

默认延迟执行、支持import/export、模块作用域、默认严格模式；跨域加载遵守CORS。

【HTML与语义化】strong和b有什么区别？

strong表达重要性语义，b仅吸引注意且不表示额外重要性；视觉默认都可能加粗。

【HTML与语义化】img的alt属性为何重要？

图片无法加载时可替代说明，读屏软件可理解内容；纯装饰图可用空alt。

【HTML与语义化】label如何关联表单控件？

label的for匹配input的id，或把input包进label，可扩大点击范围并提升可访问性。

【HTML与语义化】button的type默认是什么？

在表单关联环境中默认是submit；非提交按钮应显式写type="button"。

【HTML与语义化】GET与POST表单有什么区别？

GET通常把数据编码到URL查询串，适合检索；POST把数据放请求体，适合提交；安全性取决于HTTPS和服务端措施。

【HTML与语义化】本地存储在HTML中有哪些常见方式？

localStorage持久存储、sessionStorage按页面会话存储、Cookie随匹配请求发送；容量和安全属性不同。

【HTML与语义化】iframe有什么风险？

嵌入第三方内容可能有点击劫持等问题；可结合sandbox、CSP frame-ancestors及适当权限限制。

【HTML与语义化】什么是ARIA？

为辅助技术补充角色、状态、属性；优先使用原生语义元素，不要用ARIA替代能用的HTML控件。

【HTML与语义化】data-*属性适合做什么？

在DOM元素上存放自定义字符串元数据，可通过dataset读取；不要存秘密或大量业务状态。

【HTML与语义化】picture和srcset有什么作用？

提供响应式图片候选，让浏览器根据屏幕尺寸、分辨率或媒体条件选择合适资源。

【HTML与语义化】HTML中的表格何时使用？

适合有行列关系的数据；用caption、th、scope增强可访问性，不宜用于页面布局。

【HTML与语义化】什么是表单原生验证？

required、minlength、pattern、type等可进行客户端检查，但后端仍必须验证输入。

【HTML与语义化】DOMContentLoaded与load有什么区别？

DOMContentLoaded在HTML解析并处理相关defer/module脚本后触发；load还会等待图片等依赖资源。

【HTML与语义化】link preload和prefetch区别？

preload提示尽早获取当前页面需要的资源；prefetch提示可能用于后续导航的低优先级资源。

【HTML与语义化】SEO在前端有哪些基础做法？

语义结构、合理标题、meta描述、可抓取内容、页面性能、规范链接及站点地图；不保证排名。

【CSS布局与样式】CSS盒模型由什么组成？

content、padding、border、margin；默认width只算内容，border-box的width包含padding与border。

【CSS布局与样式】什么是BFC？

块级格式化上下文，内部布局相对独立；可用display:flow-root创建，常用于清除浮动和避免外边距折叠。

【CSS布局与样式】Flex和Grid适用场景？

Flex侧重单维行或列分布；Grid适合二维行列布局；实际可以嵌套配合。

【CSS布局与样式】flex:1通常表示什么？

常展开为flex:1 1 0%，允许元素伸缩并按剩余空间分配；具体尺寸还受min-width等约束。

【CSS布局与样式】如何让Flex子元素正确省略长文本？

常需给子项min-width:0，并设置overflow:hidden;text-overflow:ellipsis;white-space:nowrap。

【CSS布局与样式】justify-content和align-items区别？

前者沿主轴对齐；后者沿交叉轴对齐，方向由flex-direction决定。

【CSS布局与样式】position的五种常见取值？

static、relative、absolute、fixed、sticky；定位参照与是否脱离文档流各不同。

【CSS布局与样式】absolute相对谁定位？

通常相对最近的建立定位包含块的祖先；某些transform等属性也会创建包含块。

【CSS布局与样式】fixed为什么可能不相对视口？

祖先的transform、filter等属性可能建立固定定位的包含块。

【CSS布局与样式】sticky为什么不生效？

检查top等阈值、滚动容器、祖先overflow、可滚动空间及元素尺寸。

【CSS布局与样式】什么是CSS层叠优先级？

先看来源与重要性、层叠层和作用域，再比较选择器优先级与源码顺序；不是只看!important。

【CSS布局与样式】选择器优先级如何比较？

一般比较ID、类/属性/伪类、元素/伪元素层级；:where()优先级为0，:is()按参数计算。

【CSS布局与样式】margin重叠何时发生？

正常块布局中某些相邻垂直margin会折叠；Flex/Grid项的margin通常不折叠。

【CSS布局与样式】rem、em、vw和px区别？

rem相对根字体；em用于font-size时相对父字体、其他属性常相对自身字体；vw相对视口宽度；px为CSS像素。

【CSS布局与样式】移动端适配有什么方案？

优先响应式布局、媒体查询、相对单位、灵活图片；必要时使用容器查询和断点设计。

【CSS布局与样式】如何实现水平垂直居中？

父元素display:grid;place-items:center，或Flex的justify-content与align-items均设center。

【CSS布局与样式】伪类和伪元素区别？

:hover、:focus等描述状态；::before、::after等表示生成内容或元素的一部分。

【CSS布局与样式】什么是层叠上下文？

独立的z-index绘制排序环境，由定位z-index、transform、opacity等创建；z-index不能无条件跨层叠上下文比较。

【CSS布局与样式】CSS动画和transition区别？

transition响应属性状态变化；animation配合@keyframes定义可重复、多阶段动画。

【CSS布局与样式】如何避免动画性能问题？

尽量动画transform和opacity，减少频繁改变布局属性，注意will-change不可滥用。

【JavaScript基础】JS有哪些基本数据类型？

undefined、null、boolean、number、bigint、string、symbol七种原始类型；对象object是引用类型。

【JavaScript基础】null与undefined区别？

undefined常表示缺失或未赋值；null通常由程序员明确表示空值；typeof null结果是object，这是历史遗留行为。

【JavaScript基础】==与===区别？

===不进行宽松的类型转换；==按抽象相等规则转换，容易产生意外，通常优先===。

【JavaScript基础】NaN有什么特点？

代表不是有效数值，typeof为number，NaN不等于自身；用Number.isNaN判断。

【JavaScript基础】var、let、const区别？

var函数作用域且可重复声明；let和const块级作用域并存在暂时性死区；const禁止重新赋值但不冻结对象。

【JavaScript基础】什么是作用域链？

访问标识符时从当前词法作用域逐层向外查找，直到找到绑定或报错。

【JavaScript基础】什么是闭包？

函数保留对定义时词法环境的访问；用于私有状态、回调等，长期持有大对象可能造成额外内存占用。

【JavaScript基础】this由什么决定？

普通函数多由调用方式决定；箭头函数捕获外层this；new、call/apply/bind会改变相关绑定规则。

【JavaScript基础】箭头函数与普通函数主要差异？

箭头函数没有自身this、arguments、prototype，不能作构造函数；适合回调但不适合依赖动态this的方法。

【JavaScript基础】浅拷贝和深拷贝区别？

浅拷贝只复制顶层属性，内部对象仍共享引用；深拷贝递归复制可支持的结构，structuredClone有类型限制。

【JavaScript基础】展开运算符能深拷贝吗？

不能；{...obj}和[...arr]通常只复制一层。

【JavaScript基础】数组map、forEach、filter区别？

map返回映射结果数组；forEach遍历且返回undefined；filter返回通过条件的元素新数组。

【JavaScript基础】reduce适合什么场景？

把数组累计成单个结果或新结构，如求和、分组；需要理解初始值及空数组情况。

【JavaScript基础】如何判断数组？

Array.isArray(value)；typeof []的结果是object。

【JavaScript基础】Object.keys、values、entries区别？

分别返回对象自身可枚举字符串键、对应值以及键值对数组。

【JavaScript基础】Set和Map用途？

Set用于唯一值集合，Map用于任意键类型到值的映射；两者维护插入迭代顺序。

【JavaScript基础】什么是解构赋值？

从数组或对象按结构提取变量，可配合默认值、别名和剩余参数。

【JavaScript基础】?.与??有什么区别？

?.在null/undefined时安全停止访问；??仅在值是null或undefined时使用右侧默认值。

【JavaScript基础】||与??用于默认值的差异？

||把0、false、空字符串都视为应回退；??只处理null和undefined。

【JavaScript基础】如何避免浮点数精度坑？

JS Number采用IEEE754双精度；金额常用整数最小单位或可靠十进制库，比较可按业务容差处理。

【JavaScript进阶】原型和原型链是什么？

对象通过内部[[Prototype]]关联其他对象；属性不存在时沿原型链查找直到null。

【JavaScript进阶】new操作符做了什么？

创建对象并链接构造函数prototype，以新对象作this调用函数；构造函数返回对象时可能覆盖结果。

【JavaScript进阶】class和原型是什么关系？

class是建立在原型机制上的语法结构，支持继承等特性，并带有自己的语义限制。

【JavaScript进阶】call、apply、bind区别？

call立即调用并逐个传参；apply立即调用并传数组类参数；bind返回绑定this及部分参数的新函数。

【JavaScript进阶】什么是高阶函数？

接收函数作为参数或返回函数的函数，如map、debounce工厂。

【JavaScript进阶】函数柯里化是什么？

把多参数函数拆成逐步接收参数的函数，便于复用和部分应用。

【JavaScript进阶】防抖和节流区别？

防抖在连续触发停止一段时间后执行；节流限制一段时间内执行频率。

【JavaScript进阶】如何实现基础防抖？

每次调用清除上次定时器并重新setTimeout；还需按需求处理this、参数和取消功能。

【JavaScript进阶】如何实现基础节流？

用时间戳或定时器限制执行频率，注意首次执行和最后一次补执行的需求。

【JavaScript进阶】事件循环是什么？

JS运行时协调调用栈、任务队列与微任务；浏览器一次任务执行后通常清空微任务再进入后续渲染机会。

【JavaScript进阶】Promise.then与setTimeout谁先？

同一次任务中已就绪的Promise回调是微任务，通常先于setTimeout回调执行。

【JavaScript进阶】async/await原理是什么？

async函数总返回Promise；await等待值转换为Promise后的结果，并将后续执行安排为异步继续。

【JavaScript进阶】Promise.all与allSettled区别？

all遇到任一拒绝就拒绝；allSettled等待全部完成并返回每个结果状态。

【JavaScript进阶】Promise.race与any区别？

race采用最先落定的结果（成功或失败）；any采用最先成功的结果，全失败则AggregateError。

【JavaScript进阶】如何处理Promise异常？

使用.catch、try/catch配合await或明确返回失败；避免遗漏异步拒绝。

【JavaScript进阶】生成器Generator是什么？

function*返回迭代器，调用next逐步执行并通过yield暂停，可用于惰性序列。

【JavaScript进阶】迭代器与可迭代对象区别？

可迭代对象实现Symbol.iterator；迭代器实现next并返回{value,done}。

【JavaScript进阶】WeakMap和Map区别？

WeakMap键必须是对象或非注册Symbol，键弱持有且不可枚举；适合关联对象元数据。

【JavaScript进阶】什么是垃圾回收？

运行时回收不可达对象占用的内存；引用仍存在时可能导致不必要的内存保留。

【JavaScript进阶】structuredClone有哪些限制？

可深拷贝很多内建类型和循环引用，但不能复制函数、DOM节点等不可克隆值；原型等细节需注意。

【浏览器与DOM】浏览器输入URL后发生什么？

大致经历URL解析、缓存/域名解析、建立连接、HTTP请求响应、解析构建DOM/CSSOM、布局绘制与合成；实际可并行。

【浏览器与DOM】DOM和BOM区别？

DOM描述文档节点及操作接口；BOM泛指window、location、history、navigator等浏览器环境API。

【浏览器与DOM】重排与重绘区别？

重排涉及几何尺寸或位置重新计算；重绘更新视觉像素但不一定改变布局；合成可独立处理部分层。

【浏览器与DOM】如何减少布局抖动？

批量读写DOM、缓存布局测量结果、减少同步读取尺寸导致的强制布局。

【浏览器与DOM】事件捕获与冒泡顺序？

事件沿祖先捕获到目标，再从目标向祖先冒泡；具体取决于事件是否冒泡。

【浏览器与DOM】事件委托是什么？

将监听器绑定到共同祖先，利用冒泡和event.target识别子项，适合动态列表。

【浏览器与DOM】stopPropagation和preventDefault区别？

前者阻止事件继续传播；后者阻止事件默认行为，但不会自动阻止传播。

【浏览器与DOM】addEventListener的once和passive用途？

once自动执行一次后移除；passive声明不会preventDefault，利于某些滚动优化。

【浏览器与DOM】localStorage、sessionStorage区别？

localStorage通常跨同源页面和浏览器会话持久；sessionStorage按源和顶层页面会话隔离。

【浏览器与DOM】Cookie有哪些关键属性？

Expires/Max-Age、Path、Domain、Secure、HttpOnly、SameSite；涉及会话、安全与跨站发送策略。

【浏览器与DOM】为什么不建议localStorage放长期登录令牌？

一旦发生XSS，JS可能读取令牌；应综合评估HttpOnly Cookie、CSRF保护和业务架构。

【浏览器与DOM】什么是同源策略？

协议、主机和端口一致才同源；浏览器限制跨源脚本读取等行为，跨源请求是否允许读取取决于CORS等。

【浏览器与DOM】CORS是什么？

服务器通过Access-Control-Allow-Origin等响应头声明哪些跨源请求可被浏览器脚本访问。

【浏览器与DOM】什么情况触发CORS预检？

非简单跨源请求通常先发OPTIONS检查方法和头是否允许；不代表所有跨源请求都预检。

【浏览器与DOM】如何理解浏览器缓存？

强缓存可直接使用新鲜资源；协商缓存通过ETag/If-None-Match等验证，可能返回304。

【浏览器与DOM】ETag与Last-Modified区别？

ETag是实体标识符，Last-Modified是修改时间；前者往往能更准确区分资源版本。

【浏览器与DOM】什么是Service Worker？

在受控上下文代理网络请求与缓存的后台脚本，可用于离线体验和PWA；需要HTTPS等条件。

【浏览器与DOM】MutationObserver用途？

异步观察DOM结构、属性或文本变化，较频繁轮询更适合观察节点变更。

【浏览器与DOM】IntersectionObserver用途？

异步观察元素与视口或根容器的交叉情况，常用于懒加载、曝光统计。

【浏览器与DOM】什么是XSS？

攻击者让恶意脚本在用户浏览器中以可信站点上下文执行；防护包括上下文转义、避免危险HTML插入和CSP。