Web前端开发期末复习完全手册（完整版）_第1页
Web前端开发期末复习完全手册（完整版）_第2页
Web前端开发期末复习完全手册（完整版）_第3页
Web前端开发期末复习完全手册（完整版）_第4页
Web前端开发期末复习完全手册（完整版）_第5页
已阅读5页，还剩12页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

Web前端开发·期末复习完全手册（完整版）一、考试题型与分值分布（通用）题型题量分值主要考查范围策略选择题20-25题20-30分HTML标签语义、CSS选择器优先级、盒模型、JavaScript数据类型与类型转换、DOM方法、ES6特性辨析相近概念，熟记属性名和返回值填空题10-15题10-15分标签属性值、CSS属性名、JavaScript关键字、常用方法名、输出结果重点记忆常用属性和方法拼写判断题10题10分概念正误辨析，如事件冒泡与捕获、作用域链、闭包等注意绝对化表述简答题4-5题20-25分盒模型差异、响应式布局原理、原型链机制、Promise使用、前后端交互方式分点作答，必要时画简图程序阅读/编程题2-3题15-25分JavaScript手写代码（数组去重、深拷贝、防抖节流）、CSS布局实现、DOM操作掌握经典手写模板，注意边界条件二、HTML核心速查2.1文档结构与常用标签标签作用常用属性<html>根元素lang<head>头部信息<title>页面标题<meta>元数据charset="UTF-8",name="viewport",content="width=device-width,initial-scale=1.0"<link>引入CSSrel="stylesheet",href="路径"<script>引入JavaScriptsrc="路径",defer,async<h1>-<h6>标题<p>段落<a>超链接href="URL",target="_blank"<img>图片src="路径",alt="替代文本"<div>/<span>块/行内容器<ul>,<ol>,<li>列表<form>表单action,method="GET/POST"<input>输入框type="text/password/radio/checkbox/submit",placeholder,required<button>按钮type="submit/button"<table>表格配合<tr>,<td>,<th>2.2HTML5新特性语义化标签：<header>,<nav>,<main>,<article>,<section>,<aside>,<footer>

表单增强：<inputtype="email/date/number/range">,<datalist>,<output>

多媒体：<audio>,<video>Canvas和SVG

地理定位、WebStorage、WebSocket等API三、CSS核心速查3.1CSS引入方式与优先级引入方式写法优先级内联样式style="..."最高内部样式表<style>中外部样式表<linkrel="stylesheet"href="...">低浏览器默认—最低选择器优先级（从高到低）：!important>内联>ID选择器>类/属性/伪类>元素/伪元素>通配符。同等优先级下，后来者覆盖。3.2常用选择器选择器语法示例说明元素选择器div{}选择所有div类选择器.box{}选择类名为box的元素ID选择器#main{}唯一后代选择器divp{}div下所有p子元素选择器div>p{}直接子p群组选择器h1,h2{}伪类选择器a:hover{}状态伪元素p::before{}属性选择器[type="text"]{}3.3盒模型标准盒模型：width=content宽度

IE盒模型（怪异盒模型）：width=content+padding+border

使用box-sizing:border-box切换为IE盒模型。

组成部分：content→padding→border→margin3.4布局方式布局核心属性适用场景正常文档流+浮动float,clear传统多栏布局定位position:relative/absolute/fixed/sticky精确位置弹性布局（Flex）display:flex;justify-content,align-items一维布局网格布局（Grid）display:grid;grid-template-columns/rows,gap二维复杂布局3.5响应式设计视口设置：<metaname="viewport"content="width=device-width,initial-scale=1.0">

媒体查询：@mediascreenand(max-width:768px){...}

相对单位：rem,em,vw,vh,%

图片自适应：max-width:100%;height:auto;四、JavaScript核心速查4.1数据类型类型举例typeof返回值数字10,3.14,NaN"number"字符串"hello""string"布尔true,false"boolean"undefinedvara;"undefined"nullnull"object"（历史遗留）对象{}、数组、函数"object"/"function"SymbolSymbol()"symbol"BigInt123n"bigint"4.2变量声明关键字作用域提升可重复声明暂时性死区var函数作用域有可以无let块级无否有const块级无否（必须初始化）有4.3运算符与流程控制==会进行类型转换，===严格相等（推荐使用）。

&&和||具有短路特性，可用来设置默认值：letname=input||'guest';4.4函数函数声明：functionfn(){}

函数表达式：constfn=function(){};

箭头函数：constfn=()=>{};没有自己的this、arguments，不能用作构造函数。

参数：可设置默认值，使用剩余参数...args接收不定参数。4.5对象与数组对象字面量：{key:value}，访问：obj.key或obj['key']。

数组常用方法：分类方法说明增删push(),pop(),unshift(),shift(),splice()改变原数组遍历forEach(),map(),filter(),reduce()不改变原数组搜索find(),indexOf(),includes()排序sort(),reverse()数组去重：[...newSet(arr)]4.6字符串模板字符串：`你好，${name}`，支持多行。

常用方法：split(),slice(),replace(),trim(),toUpperCase()。4.7DOM操作获取元素：document.getElementById(),querySelector(),querySelectorAll()

内容：innerHTML（含标签）,innerText,textContent

属性：getAttribute(),setAttribute()，或直接操作元素属性

样式：element.style.color='red'；操作类名：classList.add/remove/toggle/contains

创建与添加：document.createElement('div'),parent.appendChild(child)4.8事件三种绑定方式：HTML属性onclick="func()"；DOM属性btn.onclick=func；事件监听btn.addEventListener('click',func)

事件流：捕获阶段→目标阶段→冒泡阶段（默认冒泡）

事件对象event：target（触发元素）,currentTarget（绑定监听元素）

阻止冒泡：event.stopPropagation()；阻止默认行为：event.preventDefault()4.9异步编程Promise：三种状态（pending,fulfilled,rejected）。then/catch/finally，静态方法：Promise.all(),Promise.race()。

async/await：基于Promise的语法糖，await等待Promise结果，用try/catch处理错误。五、ES6+常用新特性速查特性说明箭头函数简洁语法，不绑定this模板字符串反引号`````，变量嵌入${}解构赋值const{a,b}=obj;const[x,y]=arr;展开运算符...用于数组、对象、函数参数模块化export/importclass类语法糖，本质还是原型继承Promise异步解决方案Map/Set新的数据结构，Set自动去重六、前端工程化与Vue/React基础速查6.1模块化与打包CommonJS：require/module.exports（Node.js）

ESModule：import/export（现代浏览器和框架）

打包工具：Webpack,Vite等6.2Vue基础概念说明声明式渲染{{message}}插值，v-bind绑定属性指令v-if,v-show,v-for,v-on,v-model组件化单文件组件(.vue)，props父传子，$emit子传父生命周期created,mounted,updated,destroyed等响应式原理Vue2使用Object.defineProperty，Vue3使用Proxy6.3React基础概念说明JSX在JavaScript中编写类似HTML的语法组件函数组件（推荐，配合Hooks）或类组件StateuseStateHook管理组件内部状态Props父子组件数据传递常用HookuseState,useEffect七、高频选择题题库（50题完整版）模块一：HTML（1-5题）题号题目ABCD答案1以下哪个标签用于定义段落<div><p><span><h1>B2<a>标签中，用于在新窗口打开链接的属性是target="_self"href="#"target="_blank"rel="noopener"C3HTML5中用于绘制图形的元素是<svg><canvas><img>以上均可D4设置视口宽度的meta标签属性是charsetnamecontentviewport（name="viewport"）D5以下哪个是HTML5新增的语义化标签<div><span><article><table>C模块二：CSS（6-15题）题号题目ABCD答案6box-sizing:border-box的作用是宽度不包含padding和border宽度包含padding和border只包含padding只包含borderB7下列选择器优先级最高的是div.class#id*C8实现响应式布局常用的CSS规则是@font-face@media@keyframes@importB9在Flex布局中，设置主轴方向为垂直的属性是flex-direction:rowflex-direction:columnalign-items:centerjustify-content:centerB10CSS中，让元素隐藏但仍占据空间的属性是display:nonevisibility:hiddenopacity:0position:absoluteB11设置元素背景颜色为红色，正确写法bgcolor="red"background-color:redcolor:redbg-color:redB12以下哪个CSS属性用于控制文字大小font-sizetext-sizefont-familytext-styleA13CSSFlex中，justify-content:space-between的效果是子元素两端对齐，中间等分间距子元素居中子元素左对齐子元素右对齐A14媒体查询@media(min-width:768px)表示当屏幕宽度≥768px时应用小于768px时应用仅印刷时应用横屏时应用A15当元素的position设置为absolute时，定位参照物是浏览器窗口最近的定位祖先直接父元素bodyB模块三：JavaScript基础（16-25题）题号题目ABCD答案16typeofnull的结果是"null""object""undefined""boolean"B17声明一个常量使用的关键字是letvarconststaticC18将字符串"123"转换为数字123，应使用parseInt("123")Number("123")+"123"以上均可D19以下哪个是数组的实例方法forEach()on()click()log()A20JavaScript中，'2'+2的结果是4'22'22NaNB21检查一个变量是否为数组用typeofisArrayinstanceofArrayB或CD22下面哪个是正确的箭头函数()=>{returna}=>afunction()=>=>{a}A23Atotype.map()方法的返回值是undefined原数组新数组返回的长度C24下面哪种方式可以在JavaScript中创建对象{}newObject()Object.create()以上均可D25在ES6中，可以使用哪个数据结构存储不重复的值ArraySetMapObjectB模块四：DOM与事件（26-32题）题号题目ABCD答案26获取页面上第一个类名为box的元素，用getElementByIdgetElementsByClassNamequerySelectorquerySelectorAllC27事件传播的三个阶段是捕获→目标→冒泡冒泡→目标→捕获目标→捕获→冒泡冒泡→捕获→目标A28阻止事件冒泡的方法stopImmediatePropagationpreventDefaultstopPropagationB和CC29给元素绑定点击事件，正确的方法是onClickaddEventListener('click')click()attachB30阻止表单默认提交行为应调用stop()preventDefault()stopPropagation()returnfalseB31下面哪个操作可以正确获取输入框的当前值element.valueelement.innerHTMLelement.textelement.valA32event.target指向的是绑定事件的元素触发事件的元素父元素documentB模块五：异步与ES6（33-38题）题号题目ABCD答案33Promise对象的最终状态可以是pendingfulfilledrejectedB和CD34async函数返回的是undefined普通值Promise回调函数C35以下用于解构数组的语句是const{a,b}=arrconst[a,b]=arrconsta=arr[0]consta,b=arrB36以下哪个特性不能直接实现模块化CommonJSAMDCSSESModuleC37Promise.all的行为是只要一个reject整体就reject全部成功才成功哪个快返回哪个A和BD38将伪数组转换为真数组可以用Array.from()...展开Atotype.slice.call()以上均可D模块六：Vue/React基础（39-44题）题号题目ABCD答案39Vue中实现双向数据绑定的指令是v-bindv-ifv-modelv-forC40React中，函数组件内管理状态应使用this.stateuseStatesetStatestatehookB41Vue组件中，父组件传给子组件的数据通过什么接收propsstatedatamethodsA42React中，用于处理副作用的Hook是useStateuseEffectuseRefuseMemoB43Vue中，条件渲染指令哪个有更高的切换开销v-ifv-showv-forv-bindA44React中，JSX语法里插入JavaScript表达式需要用{{}}{}<%%>无B模块七：综合（45-50题）题号题目ABCD答案45下列HTTP状态码表示"资源未找到"的是200301404500C46使用localStorage存储数据，数据有效期是浏览器关闭即清除除非手动删除，否则永久保存会话期间一天B47关于JSON，描述正确的是是一种JavaScript语法是一种轻量级数据交换格式只能包含数组不能嵌套B48使用fetch发送请求，获取响应数据通常调用.text().json().blob()以上都可以D49以下哪个不是CSS伪类:hover:before:focus:first-childB50调试JavaScript代码常用的方法是console.logalertdebugger以上均可D八、填空题高频考点（直接背诵）1.HTML5的文档类型声明为________。<!DOCTYPEhtml>2.CSS中，使文本居中的属性是________。text-align:center3.JavaScript中，检查变量类型的操作符是________。typeof4.声明一个块级作用域变量的关键字是________和________。let,const5.将字符串转为整数，可使用________函数。parseInt()6.数组arr添加一个元素到末尾使用________方法。push()7.获得id为"demo"的元素用________。document.getElementById("demo")8.在事件处理中，阻止事件冒泡的方法是________。event.stopPropagation()9.CSSFlex布局中，定义主轴方向的属性是________。flex-direction10.Promise的最终成功状态是________。fulfilled11.async函数内部使用________等待异步操作。await12.Vue中的双向绑定指令是________。v-model13.React函数组件中，使用________Hook来定义状态。useState14.使用媒体查询判断屏幕最大宽度为768px的写法：@media(max-width:________)。768px15.CSS中，将元素变为绝对定位使用position:________。absolute16.HTML中，引入外部JavaScript文件使用________标签。<scriptsrc="..."></script>17.在JS中，获取数组的长度使用________属性。length18.转换为JSON字符串用________方法。JSON.stringify()19.在flex容器中，控制子元素在交叉轴对齐方式用________属性。align-items20.阻止超链接默认跳转行为，在事件处理函数中调用________。event.preventDefault()九、判断题速记（20题）序号题目答案1<div>是行内元素。错（块级）2CSS中，类选择器用.开头。对3var声明的变量具有块级作用域。错（函数作用域）4NaN===NaN的结果为true。错（false）5addEventListener可以给同一元素绑定多个事件处理函数。对6display:none和visibility:hidden都会让元素不可见且不占空间。错（visibility占空间）7position:fixed是相对于浏览器窗口定位。对8箭头函数有自己的this绑定。错（继承外层）9Vue中，v-if和v-show的行为完全相同。错（v-if条件为假时不渲染元素）10React组件必须以大写字母开头。对（JSX规范）11媒体查询可以用来给不同设备编写特定样式。对12Promise.all只要有一个Promise被reject，整体就会reject。对13在HTML中，<img>标签需要闭合标签。错（自闭合）14const声明的对象，其属性不可修改。错（对象属性可以改）15Flex布局中，默认主轴方向是水平方向。对16localStorage中存储的数据会在浏览器关闭后被清除。错（持久化）17JavaScript中，0==false返回true。对18JSON.parse()用于将对象转为字符串。错（相反）19CSSGrid布局中，fr单位表示剩余空间的等分。对20event.target总是指向绑定事件的元素。错（指向触发事件的元素）十、名词解释高频考点名词定义盒模型CSS中，每个元素被看作一个矩形盒子，由内容(content)、内边距(padding)、边框(border)、外边距(margin)组成。DOM文档对象模型，HTML/XML的编程接口，将页面结构表示为节点树，可用JS操作。事件冒泡事件从最具体的元素向上传播到最外层元素的过程。闭包函数能够访问其外部作用域中变量的现象，即使外部函数已执行完毕。Promise表示异步操作的最终完成或失败及其结果值，解决回调地狱。响应式设计使网页在不同设备上都能良好显示的网页设计方法。Flex布局CSS3引入的弹性盒子布局，可方便地控制元素的对齐、方向和顺序。虚拟DOMReact/Vue等框架中用JS对象模拟真实DOM，通过diff算法最小化更新真实DOM。SPA单页应用，只有一个HTML页面，通过动态更新内容提升用户体验。模块化将程序按功能拆分成独立模块，便于维护和复用，ES6中通过import/export实现。十一、简答题高频考点速记1.简述标准盒模型与IE盒模型的区别。标准盒模型宽度只包括内容；IE盒模型宽度包括内容、内边距和边框。可通过box-sizing切换，border-box为IE模型。2.什么是事件委托？有什么优点？利用事件冒泡，将事件监听器添加到父元素上，通过event.target判断实际触发源。优点：减少内存消耗，动态元素自动绑定事件。3.解释Promise的三种状态及变化。pending（待定）→fulfilled（已兑现）或rejected（已拒绝）。状态一旦改变不可逆。通过then/catch处理结果。4.说明箭头函数与普通函数的区别。箭头函数没有自己的this，this继承自外层作用域；不能用arguments；不能作为构造函数；写法更简洁。5.简述前端优化性能的常用手段。减少HTTP请求（合并文件、雪碧图）；压缩资源；使用懒加载和预

人人文库> 全部分类> 教育资料 > 考试试卷

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论