前端开发试卷及详解

前端开发试卷及详解一、单项选择题（共10题，每题1分，共10分）下列HTML标签中，属于语义化标签的是（）A.<div>B.<span>C.<article>D.<style>答案：C解析：<article>是HTML5新增的语义化标签，用于定义独立的文章内容，搜索引擎和屏幕阅读器可直接识别其内容类型；而<div>和<span>是通用容器标签，无明确语义；<style>是样式定义标签，不属于内容语义化标签。CSS选择器中，优先级最高的是（）A.类选择器（如.class-name）B.ID选择器（如id-name）C.元素选择器（如div）D.属性选择器（如[type="text"]）答案：B解析：CSS选择器的优先级规则中，ID选择器的优先级（权重为100）高于类选择器（10）、属性选择器（10）和元素选择器（1），因此在其他选择器均生效时，ID选择器的样式会被优先应用。JavaScript中，使用var声明的变量，在声明前输出该变量的结果是（）A.undefinedB.语法错误C.nullD.变量值答案：A解析：var声明的变量存在变量提升机制，变量声明会被提升至作用域顶部，而赋值操作仍保留在原位置，因此在声明前访问变量时，变量会处于未赋值状态，输出undefined。下列HTTP响应头中，用于实现强缓存控制的是（）A.Cache-ControlB.ETagC.Last-ModifiedD.If-None-Match答案：A解析：Cache-Control是HTTP1.1引入的强缓存控制头，可直接指定资源的缓存时长、缓存范围等；而ETag和Last-Modified属于协商缓存的标识头，If-None-Match是协商缓存的请求头，均不属于强缓存机制。在Flex布局中，用于设置项目在交叉轴上对齐方式的属性是（）A.justify-contentB.align-itemsC.flex-directionD.flex-wrap答案：B解析：align-items用于控制Flex项目在垂直交叉轴上的对齐方式（如flex-start顶部对齐、center居中对齐）；justify-content控制主轴对齐，flex-direction控制项目排列方向，flex-wrap控制项目是否换行。JavaScript中，用于获取文档中第一个匹配指定选择器的元素的方法是（）A.getElementsByClassNameB.querySelectorC.childNodesD.parentNode答案：B解析：querySelector方法接收一个CSS选择器，返回匹配该选择器的第一个元素；getElementsByClassName返回的是所有匹配的元素集合，childNodes返回元素的所有子节点，parentNode返回元素的父节点，均不符合要求。下列前端本地存储方案中，容量最大且支持持久化存储的是（）A.sessionStorageB.localStorageC.cookieD.IndexedDB答案：D解析：IndexedDB是浏览器提供的非关系型数据库，支持大容量（通常百MB到GB级）的持久化存储，且没有过期时间；sessionStorage随会话结束消失，localStorage容量仅约5MB，cookie容量仅约4KB，均不符合要求。下列单位中，属于相对视口高度的响应式单位是（）A.remB.emC.vhD.px答案：C解析：vh是ViewportHeight的缩写，代表视口高度的1/100，会随设备视口高度变化而自适应；rem是相对于根元素字体大小，em是相对于父元素字体大小，px是绝对单位，均不符合要求。Promise对象的状态不包含以下哪个选项（）A.pendingB.fulfilledC.rejectedD.resolved答案：D解析：Promise对象的状态有三种，分别是pending（等待）、fulfilled（成功）、rejected（失败）；resolved是fulfilled的别名，并非独立的状态类型，因此不属于Promise的状态。下列属于XSS攻击常用手段的是（）A.注入恶意脚本代码到页面B.向数据库注入恶意SQL语句C.伪造用户请求访问页面D.泄露用户的敏感信息答案：A解析：XSS攻击全称跨站脚本攻击，核心手段是向页面注入恶意脚本代码，在用户浏览器中执行窃取信息或篡改页面；向数据库注入SQL是SQL注入，伪造请求是CSRF攻击，泄露信息是攻击结果而非手段。二、多项选择题（共10题，每题2分，共20分）下列属于HTML5新增API的有（）A.localStorageB.fetchC.querySelectorD.innerHTML答案：ABC解析：localStorage是HTML5新增的本地存储API，fetch是新增的网络请求API，querySelector是新增的DOM选择API；innerHTML是原有DOM元素属性，并非HTML5新增。在Flex布局中，flex-direction属性的取值用于控制项目排列方向，属于垂直方向的取值有（）A.columnB.column-reverseC.rowD.row-reverse答案：AB解析：flex-direction的column表示项目垂直排列（从上到下），column-reverse表示垂直反向排列（从下到上）；row和row-reverse属于水平方向的排列取值，不符合要求。JavaScript中实现异步编程的常用方式有（）A.回调函数B.PromiseC.async/awaitD.同步循环答案：ABC解析：回调函数是最基础的异步实现，Promise和async/await是ES6及以后引入的现代异步解决方案；同步循环是同步执行，不会实现异步逻辑，不符合要求。浏览器内核的核心组成部分包括（）A.渲染引擎B.JavaScript引擎C.文件系统D.数据库答案：AB解析：浏览器内核的核心是渲染引擎（负责解析HTML、CSS并渲染页面）和JavaScript引擎（负责解析执行JavaScript代码）；文件系统和数据库不属于浏览器内核的核心组成部分。下列属于前端性能优化手段的有（）A.压缩CSS、JS、图片等资源B.实现图片懒加载C.减少HTTP请求数量D.内联所有JavaScript代码答案：ABC解析：压缩资源、图片懒加载、减少请求数都是前端性能优化的常规手段；内联所有JS代码会大幅增加首屏资源体积，延长加载时间，不属于优化手段。下列属于前端本地存储方案的有（）A.sessionStorageB.localStorageC.cookieD.WebSQL答案：ABCD解析：sessionStorage、localStorage是WebStorageAPI的存储方案，cookie是传统的客户端存储，WebSQL是废弃的关系型数据库存储方案，均属于前端本地存储范畴。下列属于CSS伪类选择器的有（）A.:hoverB.:first-childC.::afterD..active答案：AB解析：:hover（悬停状态）和:first-child（第一个子元素）属于伪类选择器，用于匹配元素的特定状态或位置；::after是伪元素选择器，.active是类选择器，均不符合要求。事件委托的优点包括（）A.减少事件注册的数量B.动态生成的元素仍能触发事件C.减少内存消耗D.直接操作DOM元素答案：ABC解析：事件委托利用事件冒泡，仅需给父元素注册一次事件，减少内存消耗；动态生成的子元素无需重新注册事件，仍可触发；直接操作DOM不是事件委托的优点，不符合要求。HTTP请求方法中属于幂等方法的有（）A.GETB.POSTC.PUTD.DELETE答案：ACD解析：幂等方法指多次请求相同资源的结果与单次请求相同，GET获取资源、PUT更新资源、DELETE删除资源均为幂等方法；POST用于新增资源，多次POST会生成不同资源，不属于幂等方法。HTML5语义化标签的优势包括（）A.利于搜索引擎优化（SEO）B.提升代码可读性C.加快页面加载速度D.利于屏幕阅读器解析答案：ABD解析：语义化标签能帮助搜索引擎识别页面结构，提升开发人员的代码可读性，还能帮助屏幕阅读器为残障用户解析页面；语义化标签不影响页面加载速度，不符合要求。三、判断题（共10题，每题1分，共10分）HTML中所有标签必须成对出现，不能使用自闭合标签。答案：错误解析：HTML中存在自闭合标签，如<img>、<input>、<br>等，无需成对编写，仅需在标签结尾添加/即可（部分场景下可省略/，但本质为自闭合），并非所有标签必须成对。CSS中，ID选择器的优先级高于类选择器。答案：正确解析：CSS选择器的优先级规则中，ID选择器的权重为100，类选择器的权重为10，因此ID选择器的优先级高于类选择器，这是CSS的基础优先级规则。JavaScript中，使用let声明的变量存在变量提升机制。答案：错误解析：var声明的变量存在变量提升，而let和const声明的变量不存在变量提升，必须在声明后才能使用，否则会触发暂时性死区错误。HTTP的GET请求可以携带请求体参数。答案：错误解析：HTTP的GET请求参数通常放在URL中，无请求体部分；POST、PUT等请求可以携带请求体参数，GET请求不规范携带请求体，服务器会忽略该部分。CSS的box-sizing:border-box表示元素的宽高包含边框和内边距。答案：正确解析：box-sizing:border-box是盒模型的一种，元素的width和height属性包含边框（border）和内边距（padding），不会超出设定的宽高范围，避免布局溢出。DOM节点中，元素节点的nodeType值为1，文本节点的nodeType值为2。答案：错误解析：DOM节点的nodeType属性中，元素节点的值为1，文本节点的值为3，属性节点的值为2，因此文本节点的nodeType并非2，表述错误。HTTP的Cache-Control:no-cache表示页面完全不被浏览器缓存。答案：错误解析：Cache-Control:no-cache表示浏览器需先向服务器验证资源的有效性，并非完全不缓存；若要完全不缓存，需使用no-store指令。使用HTML5的<header>标签可以增强页面的语义性。答案：正确解析：<header>是HTML5新增的语义化标签，用于定义页面或区域的头部内容，如标题、导航栏等，符合语义化原则，提升页面的可访问性和SEO效果。JavaScript中，箭头函数的this指向自身，普通函数的this指向调用者。答案：错误解析：箭头函数的this指向定义时的外层作用域，而非自身；普通函数的this指向调用该函数的对象，两者的this规则差异较大，表述错误。前端开发中，无需考虑浏览器兼容问题，所有浏览器均支持相同的前端特性。答案：错误解析：不同浏览器（如Chrome、Firefox、Safari）对前端特性的支持存在差异，部分新特性需要兼容性处理，如CSS前缀、JSAPI的兼容等，必须考虑浏览器适配。四、简答题（共5题，每题6分，共30分）简述HTML5语义化标签的核心优势。答案：第一，利于搜索引擎优化（SEO），搜索引擎可通过语义化标签更准确识别页面内容结构，提升页面排名；第二，提升代码可读性，开发者能快速理解标签对应的内容类型，降低协作成本；第三，支持无障碍访问，屏幕阅读器可通过语义化标签为残障用户清晰解析页面结构；第四，规范开发习惯，统一的标签使用规则减少不规范代码的出现。解析：语义化标签的核心价值在于将内容的含义与HTML标签的结构对应，以上四点是其在实际开发中的主要优势，需结合开发场景说明，而非单纯罗列。简述CSSFlex布局针对容器和项目的常用属性各2例。答案：第一，针对Flex容器的常用属性：justify-content，设置项目在主轴的对齐方式，如center居中、space-between两端对齐；align-items，设置项目在交叉轴的对齐方式，如flex-start顶部对齐、stretch拉伸占满容器；第二，针对Flex项目的常用属性：flex-grow，设置项目的放大比例，控制剩余空间的分配；flex-shrink，设置项目的缩小比例，控制空间不足时的收缩规则。解析：Flex布局分为容器和项目两个维度，需分别说明两类属性的作用，结合具体的属性值示例，让答案更贴合开发实际。简述JavaScript异步编程的主要实现方式。答案：第一，回调函数，将异步操作后的逻辑作为参数传入，待操作完成后执行，是最基础的异步实现；第二，Promise，ES6引入的异步解决方案，解决回调地狱问题，提供链式调用处理异步结果；第三，async/await，基于Promise的语法糖，用同步的写法实现异步逻辑，提升代码可读性；第四，事件监听，通过绑定事件处理函数，待特定事件触发后执行异步逻辑，常用于浏览器DOM操作。解析：每种异步方式需说明核心特点，如回调函数的嵌套问题、Promise的链式调用、async/await的语法优势，让答题者理解不同方式的适用场景。简述前端性能优化的主要核心方向（至少列出4个）。答案：第一，资源压缩，使用工具压缩CSS、JS、图片等资源，减少传输体积，如使用Terser压缩JS、使用ImageOptim压缩图片；第二，资源懒加载，实现图片、视频等资源的延迟加载，仅在用户需要时加载，减少初始加载时间；第三，减少HTTP请求，合并多个文件、使用雪碧图等方式降低请求数量，提升加载速度；第四，缓存优化，合理配置HTTP缓存头，利用浏览器缓存减少重复请求；第五，代码优化，减少不必要的DOM操作、优化JS执行逻辑，避免页面重排重绘。解析：每个优化方向需结合具体做法，如工具名称、实现方式，让答案具有可操作性，而非空泛的概念。简述HTTP状态码404和500的含义及核心区别。答案：第一，含义：404是客户端错误状态码，代表服务器无法找到请求的资源，通常由URL错误、资源被删除或路径错误导致；500是服务器错误状态码，代表服务器在处理请求时遇到了未预期的错误，无法完成请求；第二，核心区别：触发主体不同，404的问题出在客户端（或资源不存在），500的问题出在服务器内部；解决方式不同，404需检查URL或资源是否存在，500需排查服务器代码或配置；影响范围不同，404多为单个资源问题，500可能影响整个请求的处理。解析：需明确两者的定义，从触发主体、解决方式、影响范围三个核心维度说明区别，让答题者清晰区分两个状态码的应用场景。五、论述题（共3题，每题10分，共30分）结合实例论述CSS的BEM命名规范在团队开发中的优势。答案：首先，论点：BEM命名规范通过结构化的类名设计，解决团队开发中的命名冲突问题，提升代码可维护性。BEM的格式为块__元素--修饰符，块（block）是独立的组件，元素（element）是组件的子部分，修饰符（modifier）是组件的状态或变体。论据：在多人协作开发中，若不使用规范，不同开发者可能编写同名类，导致样式覆盖；而BEM通过块的前缀保证组件类名的唯一性。实例：开发电商商品列表组件，块名为product-list，列表项元素为product-list__item，选中状态的修饰符为product-list__item--selected；同时开发购物车组件，块名为cart，购物车项元素为cart__item，选中状态为cart__item--selected，即使都有item和selected，也不会出现命名冲突，避免样式覆盖。结论：BEM命名规范让类名语义化、结构化，降低团队开发的沟通成本，便于后期维护和迭代。解析：论述题需包含论点、论据、实例和结论，结合具体的组件开发场景，说明规范解决的实际问题，而非单纯罗列规则。结合实例论述JavaScript的事件委托原理及应用场景。答案：首先，论点：事件委托利用DOM事件的冒泡机制，将子元素的事件绑定委托给父元素，减少事件注册，优化性能，同时支持动态元素。原理：DOM事件触发时会冒泡到父元素，直到根节点，父元素可通过event.target获取实际触发事件的子元素，从而处理对应逻辑，无需给每个子元素单独绑定事件。论据：每个事件绑定会占用内存，大量子元素单独绑定事件会增加页面内存消耗，而委托仅需给父元素注册一次，减少内存占用。实例：开发可动态添加的任