东师《web前端开发基础》考试【标准答案】

东师《web前端开发基础》考试【标准答案】一、单项选择题（共15题，每题2分，总计30分）1.HTML文档的根标签是以下哪一项？A.<head>B.<body>C.<html>D.<!DOCTYPEhtml>答案：C解析：<!DOCTYPEhtml>是HTML5的文档类型声明，用于告知浏览器当前文档的HTML版本，不属于HTML标签；HTML文档的根标签为<html>，用于包裹所有HTML内容，其内部直接包含<head>（头部）和<body>（主体）两个子标签。2.下列HTML标签中，属于HTML5新增的语义化导航标签的是？A.<span>B.<nav>C.<a>D.<img>答案：B解析：<nav>是HTML5新增的语义化标签，专门用于定义页面的导航链接区域，提升页面结构的语义性；<span>、<a>、<img>均为HTML4版本就已存在的标签，且<nav>为块级元素，其余三个选项均为行内元素。3.下列CSS选择器中，优先级最高的是？A.类选择器B.ID选择器C.标签选择器D.通配符选择器答案：B解析：CSS选择器优先级从高到低排序为：!important声明>内联样式>ID选择器>类/伪类/属性选择器>标签/伪元素选择器>通配符选择器>继承样式>浏览器默认样式，因此ID选择器优先级高于其余选项。4.标准盒模型（content-box）下，元素实际占据的总宽度计算方式正确的是？A.width+左右padding+左右border+左右marginB.width+左右padding+左右borderC.width+左右marginD.仅为设置的width值答案：A解析：标准盒模型中，width属性仅表示内容区域的宽度，内边距（padding）、边框（border）、外边距（margin）会向外扩展，因此元素总占据宽度为内容宽度+内边距+边框+外边距的总和。5.下列数据类型中，不属于JavaScript基本数据类型的是？A.StringB.NumberC.ArrayD.Boolean答案：C解析：JavaScript基本数据类型包括String、Number、Boolean、Null、Undefined、Symbol、BigInt共7种；Array属于引用数据类型，本质是Object类型的实例，存储的是内存地址而非值本身。6.下列DOM方法中，能够通过id属性获取唯一页面元素的是？A.document.querySelector('app')B.document.getElementById('app')C.document.getElementsByClassName('app')D.document.getElementsByTagName('app')答案：B解析：getElementById方法通过元素的id属性获取唯一DOM元素，返回单个节点；A选项选择器语法错误，id选择器需加#前缀，正确写法为document.querySelector('#app')；C、D选项分别通过类名、标签名获取元素，返回的是HTMLCollection节点集合。7.下列JavaScript事件中，属于表单提交触发的事件是？A.onclickB.onloadC.onsubmitD.onchange答案：C解析：onsubmit是表单元素专属的提交事件，点击表单的提交按钮或按回车键时触发，可用于表单校验；onclick为通用点击事件，onload为页面/资源加载完成事件，onchange为元素内容改变事件。8.下列CSS属性中，能够清除浮动影响的是？A.float:leftB.clear:bothC.position:relativeD.display:inline答案：B解析：clear属性用于清除元素两侧的浮动影响，可选值包括left（清除左浮动）、right（清除右浮动）、both（清除左右两侧浮动），是解决浮动导致的父元素高度塌陷问题的常用方法之一。9.下列HTML列表标签中，用于定义无序列表的是？A.<ol>B.<ul>C.<li>D.<dl>答案：B解析：<ul>标签用于定义无序列表，列表项默认以项目符号开头；<ol>用于定义有序列表，列表项默认以数字序号开头；<li>是列表项标签，需嵌套在<ul>或<ol>内部；<dl>用于定义描述列表，包含<dt>（定义项）和<dd>（描述项）。10.下列JavaScript变量声明方式中，存在变量提升特性的是？A.letB.constC.varD.以上均无变量提升答案：C解析：var声明的变量存在变量提升，会将变量声明提升到当前作用域的顶部，仅提升声明不提升赋值；let和const存在块级作用域，无变量提升，存在暂时性死区，声明前访问会报错。11.下列CSS定位方式中，元素会脱离标准文档流的是？A.staticB.relativeC.absoluteD.以上均不脱离答案：C解析：absolute（绝对定位）和fixed（固定定位）会使元素完全脱离标准文档流，原位置不保留；static是默认定位方式，按文档流排列；relative（相对定位）不脱离文档流，原位置保留，仅基于原位置偏移。12.HTTP状态码中，404状态码的含义是？A.请求成功B.服务器内部错误C.请求的资源未找到D.页面重定向答案：C解析：HTTP状态码中，2xx表示请求成功（如200），3xx表示重定向（如301、302），4xx表示客户端错误（如404表示请求资源不存在、403表示无权限），5xx表示服务器端错误（如500表示服务器内部错误）。13.下列input标签的type属性值中，用于密码输入、内容会被掩码显示的是？A.textB.passwordC.emailD.number答案：B解析：type="password"的输入框会将输入内容以圆点或星号掩码显示，用于密码输入场景；type="text"是普通文本输入框，type="email"是邮箱格式输入框，type="number"是数字输入框。14.下列JavaScript数组方法中，能够在数组末尾添加元素并返回新数组长度的是？A.pop()B.push()C.shift()D.unshift()答案：B解析：push()方法向数组末尾添加一个或多个元素，返回修改后的数组长度；pop()删除数组末尾最后一个元素，返回被删除的元素；shift()删除数组开头第一个元素，返回被删除的元素；unshift()向数组开头添加元素，返回新数组长度。15.下列CSS长度单位中，相对于视口宽度计算的是？A.pxB.emC.vwD.rem答案：C解析：vw是视口单位，1vw等于视口宽度的1%；px是绝对像素单位；em是相对单位，相对于当前元素或父元素的字体大小计算；rem是相对单位，相对于根元素<html>的字体大小计算。二、多项选择题（共5题，每题3分，总计15分；多选、少选、错选均不得分）1.下列标签中，属于HTML5新增语义化标签的有？A.<header>B.<footer>C.<section>D.<div>答案：ABC解析：HTML5新增了一系列语义化标签用于明确页面结构，包括<header>（页头）、<footer>（页脚）、<section>（区块）、<article>（文章内容）、<aside>（侧边栏）、<nav>（导航）等；<div>是HTML4版本就存在的无语义块级容器标签。2.下列选择器中，属于CSS伪类选择器的有？A.:hoverB.:first-childC.::beforeD.:active答案：ABD解析：伪类选择器以单冒号开头，用于表示元素的某种状态或结构特性，:hover（鼠标悬停状态）、:active（激活状态）、:first-child（第一个子元素）均属于伪类选择器；::before是伪元素选择器，以双冒号开头，用于在元素内容前插入虚拟元素。3.下列关于JavaScript的描述中，正确的有？A.JavaScript是弱类型语言B.JavaScript既可运行在浏览器端，也可运行在服务端C.JavaScript的核心组成包括ECMAScript、DOM、BOM三部分D.JavaScript是编译型语言，运行前需要完整编译答案：ABC解析：JavaScript是弱类型解释型语言，变量的类型可以动态改变，运行时由JS引擎逐行解释执行，无需提前编译；Node.js为JS提供了服务端运行环境，因此JS可同时运行在浏览器端和服务端；JS的三大组成部分为ECMAScript（核心语法规范）、DOM（文档对象模型，操作页面元素）、BOM（浏览器对象模型，操作浏览器窗口）。4.下列CSS写法中，能够实现元素水平居中效果的有？A.有固定宽度的块级元素设置margin:0autoB.行内/行内块元素的父元素设置text-align:centerC.绝对定位元素设置left:50%配合transform:translateX(-50%)D.flex容器设置justify-content:center答案：ABCD解析：四种方式分别对应不同场景的水平居中实现：A选项适用于有明确宽度的块级元素，通过左右外边距自动平分实现居中；B选项通过文本对齐属性控制行内元素居中；C选项通过定位+位移实现，无需知道元素宽度；D选项为flex布局的对齐方式，控制主轴方向子元素居中。5.DOM标准事件流包含的阶段有？A.捕获阶段B.目标阶段C.冒泡阶段D.执行阶段答案：ABC解析：DOM2级事件规范定义事件流分为三个阶段：事件捕获阶段（从window对象自上而下向目标元素传播）、目标阶段（事件到达触发的目标元素本身）、事件冒泡阶段（从目标元素自下而上向window对象传播），默认事件处理函数在冒泡阶段触发。三、判断题（共10题，每题1分，总计10分；正确打√，错误打×）1.HTML标签不区分大小写，因此<HTML>和<html>的渲染效果完全一致。（√）解析：HTML语法对标签大小写不敏感，浏览器均可正常解析，但行业规范统一使用小写标签，提升代码可读性和可维护性。2.CSS的z-index属性可以用于所有定位方式的元素。（×）解析：z-index属性仅对设置了非static定位（relative/absolute/fixed/sticky）的元素生效，默认static定位的元素设置z-index无效。3.JavaScript中null和undefined的类型完全相同。（×）解析：typeofnull返回'object'（JS历史遗留bug），typeofundefined返回'undefined'，二者属于不同的基本数据类型，仅在宽松相等判断下null==undefined结果为true。4.块级元素可以设置宽高，行内元素设置宽高无效。（√）解析：块级元素默认独占一行，支持设置宽高、内外边距；行内元素默认与其他行内元素并排排列，宽高由内容撑开，设置width/height属性无效。5.localStorage存储的数据在浏览器关闭后会自动清除。（×）解析：localStorage是本地持久化存储，除非用户手动清除浏览器缓存或代码调用removeItem/clear方法删除，否则数据会永久保留；sessionStorage的数据才会在页面会话结束（关闭对应标签页）时清除。6.CSS的padding属性可以设置负值。（×）解析：padding（内边距）的取值只能为非负值，margin（外边距）可以设置负值，用于实现重叠、偏移等特殊布局效果。7.HTML的<a>标签target属性设为_blank时，会在当前窗口打开链接。（×）解析：target="_blank"表示在新窗口或新标签页打开链接，target="_self"是默认值，在当前窗口打开链接。8.JavaScript中数组的length属性是只读的，无法修改。（×）解析：JS数组的length属性是可写的，修改length值可以实现数组截断（length小于原长度）或扩容（length大于原长度），例如arr.length=0可以快速清空数组。9.标准盒模型和怪异盒模型的核心区别是元素宽高的计算范围不同。（√）解析：标准盒模型（content-box）的width仅包含内容区域，怪异盒模型（border-box）的width包含内容、padding和border，可通过box-sizing属性切换两种模式。10.DOM事件委托的原理是利用事件冒泡机制，将子元素的事件绑定到父元素上处理。（√）解析：事件委托（事件代理）通过将事件绑定在父元素，利用事件冒泡特性，在父元素的事件处理函数中通过event.target判断事件源，可减少事件绑定数量，提升性能，且适用于动态添加的子元素。四、填空题（共5题，每空1分，总计10分）1.CSS中，设置元素背景颜色的属性是______，设置文本字体颜色的属性是______。答案：background-color；color2.JavaScript中，用于在浏览器控制台打印调试信息的方法是______，用于弹出提示对话框的方法是______。答案：console.log()；alert()3.HTML5中，用于绘制2D图形的标签是______，用于播放视频的标签是______。答案：<canvas>；<video>4.CSSFlex布局中，控制主轴对齐方式的属性是______，控制交叉轴对齐方式的属性是______。答案：justify-content；align-items5.BOM对象中，获取当前页面URL的属性是______，用于刷新当前页面的方法是______。答案：location.href；location.reload()五、简答题（共3题，每题5分，总计15分）1.请简述HTML语义化的含义及核心优点。答案：HTML语义化是指在构建页面结构时，根据内容的语义和结构层级，选择对应语义的HTML标签进行编写，而非全部使用无语义的<div>、<span>等容器标签，使页面结构具备明确的含义和可读性。（1分）核心优点包括：（1）代码结构清晰，可读性强，便于开发团队的协作和后期维护；（1分）（2）有利于搜索引擎优化（SEO），搜索引擎爬虫可通过语义标签识别页面内容的层级和重要性，提升页面搜索排名；（1分）（3）提升无障碍访问性，屏幕阅读器等辅助设备可根据语义标签解析页面内容，为视障用户提供更好的访问体验；（1分）（4）在CSS加载失败时，页面仍能呈现清晰的结构层次，保证基础的内容可读性。（1分）2.请简述CSS盒模型的两种模式及核心区别。答案：CSS盒模型分为标准盒模型（W3C盒模型）和怪异盒模型（IE盒模型）两种模式，可通过box-sizing属性切换，默认值为content-box（标准盒模型），设置为border-box时为怪异盒模型。（1分）二者核心区别在于元素width属性的计算范围不同：（1）标准盒模型（content-box）：width属性仅表示内容区域（content）的宽度，元素实际占据的总宽度=内容宽度+左右padding+左右border+左右margin，内边距和边框会向外扩展，撑大元素总宽度；（2分）（2）怪异盒模型（border-box）：width属性包含内容区域、左右padding和左右border的总宽度，元素实际占据的总宽度=设置的width+左右margin，内边距和边框会向内挤压内容区域，不会撑大元素的总宽度。（2分）3.请简述事件冒泡和事件捕获的区别，并说明阻止事件冒泡的方法。答案：事件冒泡和事件捕获是DOM事件流的两个相反传播阶段，核心区别如下：（1）事件冒泡：事件从触发事件的目标元素开始，逐级向上传播到window对象的过程，即事件从最内层元素向外层元素传递，默认情况下事件处理函数在冒泡阶段触发。（2分）（2）事件捕获：事件从window对象开始，逐级向下传播到目标元素的过程，即事件从最外层元素向内层元素传递，需要在addEventListener的第三个参数设置为true时，才会在捕获阶段触发事件处理函数。（2分）阻止事件冒泡的方法：标准浏览器中调用事件对象的stopPropagation()方法，即e.stopPropagation()；IE低版本兼容写法为e.cancelBubble=true。（1分）六、实操题（共2题，每题10分，总计20分）1.请使用HTML和CSS实现一个宽度为300px的商品卡片，要求如下：（1）包含商品占位图、商品名称、商品价格、“立即购买”按钮四个部分；（2）商品名称为14号字、加粗，单行溢出显示省略号；（3）商品价格为16号字、红色；（4）按钮宽度100%、高度40px，背景色#ff6700，白色文字，圆角8px，鼠标悬停时背景色变为#ff4500；（5）卡片整体有1px灰色边框，内边距15px，水平居中显示，底部外边距20px。答案：```html<!--HTML结构（3分：结构完整、标签语义化）--><divclass="goods-card"><imgsrc="/270x180"alt="商品图片"class="goods-img"><h3class="goods-name">无线蓝牙耳机入耳式运动降噪超长续航</h3><pclass="goods-price">¥199.00</p><buttonclass="buy-btn">立即购买</button></div>``````css/*CSS样式（7分：按实现点计分）*/.goods-card{width:300px;border:1pxsolid#eee;/*1分*/padding:15px;/*1分*/margin:0auto20px;/*水平居中+下外边距1分*/box-sizing:border-box;/*内边距不撑宽卡片1分*/}.goods-img{width:100%;display:block;margin-bottom:12px;}.goods-name{font-size:14px;font-weight:bold;/*1分*/white-space:nowrap;overflow:hidden;text-overflow:ellipsis;/*单行溢出省略1分*/margin:0010px;}.goods-price{font-size:16px;color:#ff0000;/*红色价格0.5分*/margin:0012px;}.buy-btn{width:100%;height:40px;background-color:#ff6700;color:#fff;border:none;border-radius:8px;/*1分*/cursor:pointer;transition:background-colo