一、基础问题说明本部分考察前端开发最核心的HTML、CSS和JavaScript语言的基础概念、语法和常见用法是后续所有高级主题的基石。️ 1.1 HTMLHTML5 新标签有哪些问题说明HTML5引入了大量语义化新标签如header、footer、section等旨在更好地描述文档结构。了解这些标签有助于编写语义清晰、利于SEO和维护的代码。canvas、svg、webGL 分别是什么有什么区别和应用场景问题说明这三者都是Web图形技术但原理和用途不同。Canvas提供像素绘图APISVG是基于XML的矢量图形WebGL用于高性能3D/2D图形。理解其区别能帮助在数据可视化、游戏、交互图形等场景做出正确选择。你是如何理解 HTML 语义化的有什么好处问题说明HTML语义化指使用恰当的标签表达内容含义而非仅用于样式。其好处包括提升可访问性屏幕阅读器、利于SEO搜索引擎理解结构、代码更易读和维护。前端需要注意哪些 SEO问题说明前端SEO优化涉及页面结构、内容、性能等多方面。关键点包括使用语义化HTML、合理的标题和元标签、优化页面加载速度、确保内容可被爬虫抓取等直接影响网站在搜索引擎中的排名。manifest、worker、socket问题说明这三项是HTML5提供的增强Web应用能力的重要API。Application Cache (manifest) 用于离线应用Web Worker实现多线程WebSocket支持全双工通信。理解它们有助于构建更强大、响应更快的现代Web应用。input 和 textarea 的区别问题说明input 和 textarea 都是表单输入元素但 input 通常用于单行文本而 textarea 用于多行文本。理解它们的区别有助于根据输入需求选择合适的元素并正确处理表单数据。用一个 div 模拟 textarea 的实现问题说明用 div 模拟 textarea 可以实现更灵活的自定义样式和交互例如实现提及、自动增高等功能。此问题考察对内容可编辑属性、事件处理和样式控制的理解。 1.2 CSSCSS3 有什么新特性浏览器支持怎么样问题说明CSS3引入了众多新特性如圆角、阴影、渐变、动画等极大地增强了样式表现力。了解其特性及浏览器支持情况是编写现代、兼容性好的前端样式的基础。伪类是什么有哪些会有哪些兼容性问题如何处理问题说明伪类用于选择元素的特定状态如:hover、:focus。不同浏览器对某些伪类如:focus-visible支持度不同需了解兼容性差异并采取降级方案。CSS 预处理器知道吗用过哪些有什么优劣后处理器知道吗问题说明CSS预处理器如Sass、Less和后处理器如PostCSS是提升CSS开发效率的重要工具。考察对其原理、优劣及适用场景的理解以选择合适的技术栈。盒模型有哪几种怪异模式和标准模式问题说明盒模型是CSS布局的基础标准模型与IE怪异模型在宽度计算上不同。理解其区别及浏览器模式的影响对于实现精准布局和解决兼容性问题至关重要。less、sass、postcss、prefix问题说明此问题涉及主流CSS工具链。Less/Sass是预处理器PostCSS是后处理器prefix通常指自动添加浏览器前缀。了解它们能帮助构建高效、兼容的样式工作流。层叠优先级问题说明CSS层叠优先级决定了当多个规则应用于同一元素时哪个规则最终生效。理解选择器权重、!important、来源顺序等规则对于解决样式冲突至关重要。圣杯、双飞燕布局问题说明圣杯布局和双飞翼布局是两种经典的三栏布局实现方式都要求中间栏优先渲染且宽度自适应。考察对传统CSS布局技巧的理解。float 清除浮动问题说明浮动元素会脱离文档流导致父元素高度塌陷。清除浮动是CSS布局中的常见问题需要掌握多种清除方法及其适用场景。flex 布局、grid 布局、table 布局问题说明现代CSS提供了多种布局方案。Flex适合一维布局Grid适合二维布局Table布局虽传统但在某些场景仍有价值。了解各自特点能选择最佳布局方案。CSS 以及中轴旋转、动画变换问题说明CSS变换和动画是现代交互设计的基础。理解2D/3D变换、过渡、关键帧动画等特性能创建更丰富的视觉效果。绘制三角形、矩形、菱形、梯形奇巧淫技可以不问问题说明通过CSS技巧绘制基本几何图形考察对边框、伪元素、变换等特性的深入理解。虽为技巧题但能反映CSS功底。sprite 图雪碧图知道吗svg 雪碧图了解吗问题说明雪碧图是将多个小图标合并为一张大图以减少HTTP请求的技术。SVG雪碧图是矢量版本具有缩放不失真的优势。px、em、rem、vw、vhrem 的根节点样式在什么时候设置问题说明CSS单位各有用途px是绝对单位em/rem是相对单位vw/vh是视口单位。理解它们的区别对于实现响应式设计很重要。position 有哪些他们的定位原点是什么问题说明position属性有static、relative、absolute、fixed、sticky等值各自有不同的定位原点和行为特点。媒体查询用 CSS 好还是用 JS 好问题说明媒体查询主要用于响应式设计。CSS媒体查询性能更好JS媒体查询更灵活。需要根据具体场景选择合适方案。link 和 import 的区别问题说明两者都用于引入外部CSS但link是HTML标签import是CSS规则。它们在加载时机、兼容性、DOM操作支持等方面有差异。响应式布局的原理问题说明响应式布局通过媒体查询、弹性布局、相对单位等技术使网页在不同设备上都能良好显示。理解其原理是前端开发的基本功。CSS 低版本浏览器兼容问题额外需要什么后缀来声明浏览器兼容问题说明不同浏览器对CSS特性的支持度不同常需要添加浏览器前缀如-webkit-、-moz-或使用polyfill来保证兼容性。!important 意义是否应当规避使用问题说明!important用于提高样式规则的优先级。虽然能解决某些样式冲突但过度使用会导致代码难以维护应当谨慎使用。BFC 块级上下文、IFC实现双栏高度对齐问题说明BFC和IFC是CSS布局中的重要概念。BFC可以用于清除浮动、防止margin重叠等IFC用于处理行内元素的布局。BEM 命名法有什么优势有什么劣势问题说明BEM是一种CSS命名方法论通过Block-Element-Modifier的结构使类名更具语义性和可维护性但可能导致类名较长。1px 边框问题问题说明在高清屏上1px的物理边框可能显示为多个像素导致边框过粗。需要特殊技巧实现真正的1像素边框。水平居中有哪些实现方式、垂直居中有哪些实现方式问题说明元素居中一直是CSS布局的常见需求。水平居中和垂直居中各有多种实现方式需要根据具体情况选择合适方案。⚙️ 1.3 JavaScriptypeof 以及弱类型转换规则NaN、undefined、null问题说明JavaScript是弱类型语言类型转换规则复杂。理解typeof操作符、类型转换规则以及特殊值NaN、undefined、null的区别很重要。DOM 的节点操作能够背 API 还是知道 API问题说明DOM操作是前端开发的基础。不仅要记住API更要理解DOM树的结构、节点类型以及操作性能优化。Ajax 是什么知道底层实现原理吗知道 fetch 吗自己封装过吗问题说明Ajax是实现异步数据请求的技术。了解XMLHttpRequest原理、fetch API以及如何封装通用的请求函数是必备技能。GET、POST 意义RESTful 架构下还有别的什么请求OPTION 请求是什么问题说明HTTP方法各有语义。GET用于获取资源POST用于创建资源。RESTful架构还使用PUT、DELETE、PATCH等。OPTIONS用于预检请求。事件冒泡和事件捕获是怎样的对应的默认方法有什么一般在什么情况使用问题说明DOM事件有冒泡和捕获两种传播方式。理解事件流、事件委托以及如何阻止默认行为或事件传播是事件处理的基础。call、apply、bind问题说明这三个方法都用于改变函数执行时的this指向但使用方式和返回值不同。理解它们的区别对于掌握JavaScript函数调用机制很重要。如何判断数据类型问题说明除了typeof还有instanceof、Object.prototype.toString.call()等多种判断数据类型的方法各有适用场景和局限性。hoisting 是什么具体表现是怎样的问题说明变量提升是JavaScript编译阶段的特性函数声明和变量声明会被提升到作用域顶部但赋值操作不会提升。匿名函数是什么函数表达式和函数声明的区别问题说明匿名函数没有名称标识符。函数表达式和函数声明在提升、命名、使用场景等方面有重要区别。let、const 暂时性锁区知道吗表现是怎样的问题说明let和const存在暂时性死区在声明前访问会报错。这与var的变量提升行为不同是ES6引入的重要特性。严格模式是什么有什么好处use strict问题说明严格模式消除了JavaScript的一些不安全操作使代码更安全、更优化。了解其限制和好处对于编写高质量代码很重要。arguments 是什么类型callee 和 caller 有什么区别问题说明arguments是函数内部的类数组对象包含所有传入参数。callee指向当前函数caller指向调用当前函数的函数。Date.format 实现过吗思路是怎样的问题说明JavaScript的Date对象没有内置的format方法需要自己实现或使用第三方库。考察对日期处理和字符串格式化的理解。动画setTimeout 何时执行requestAnimationFrame 的优点问题说明setTimeout的执行时间不确定可能被延迟。requestAnimationFrame与浏览器刷新率同步更适合动画场景。你知道 new 一个对象有几步吗问题说明new操作符创建对象的过程包括创建新对象、设置原型链、绑定this、执行构造函数、返回对象。理解这个过程有助于掌握原型继承。
