2025年《网页制作》期中考试试卷附答案

2025年《网页制作》期中考试试卷附答案一、单项选择题（本大题共20小题，每小题2分，共40分。在每小题列出的四个备选项中只有一个是最符合题目要求的，请将其代码填写在题后括号内）1.以下HTML标签中，属于HTML5新增语义化标签的是（）A.<div>B.<span>C.<article>D.<p>2.若要设置元素的背景颜色为半透明的红色（透明度0.5），正确的CSS代码是（）A.background-color:rgba(255,0,0,0.5);B.background-color:ff000050;C.background-color:hsla(0,100%,50%,0.5);D.以上均可3.关于JavaScript事件冒泡的描述，错误的是（）A.事件会从最内层元素向外层元素传播B.可以通过event.stopPropagation()阻止冒泡C.所有事件都会触发冒泡机制D.父元素绑定的事件可能因子元素事件冒泡而被触发4.下列CSS选择器中，优先级最高的是（）A..header-navB.divlogoC.[type="text"]D.p:first-child5.要实现当鼠标悬停在图片上时，图片顺时针旋转30度的效果，应使用的CSS属性是（）A.transform:rotate(30deg);B.transition:rotate0.3s;C.animation:rotate0.3s;D.transform:scale(1.1)rotate(30deg);6.关于HTML表单验证，以下说法正确的是（）A.required属性仅适用于<input>标签B.pattern属性可以通过正则表达式自定义验证规则C.浏览器默认的验证提示信息无法修改D.type="email"会验证输入内容是否包含@符号和.符号7.若要让一个div元素在页面中水平垂直居中，且父元素高度不确定，最合理的CSS方案是（）A.margin:0auto;top:50%;left:50%;B.position:absolute;transform:translate(-50%,-50%);C.display:flex;justify-content:center;align-items:center;D.float:left;margin:50%0050%;8.以下JavaScript代码执行后，控制台输出的结果是（）```javascriptletarr=[1,2,3];arr[10]=10;console.log(arr.length);```A.3B.11C.10D.49.关于CSS盒模型的描述，错误的是（）A.标准盒模型的width属性仅包含内容区域B.border-box盒模型的width包含内容、内边距和边框C.margin属性的百分比值相对于父元素的高度计算D.padding属性不能设置负值10.要为页面中所有class为"card"的div元素绑定点击事件，最简洁的JavaScript代码是（）A.document.querySelector('.card').addEventListener('click',func);B.document.getElementsByClassName('card').addEventListener('click',func);C.document.querySelectorAll('.card').forEach(item=>item.addEventListener('click',func));D.document.getElementsByClassName('card')[0].addEventListener('click',func);11.以下HTML结构中，能正确实现图片与文字同行显示且文字环绕图片的是（）A.<imgsrc="pic.jpg"style="float:left;"><p>文字内容</p>B.<imgsrc="pic.jpg"style="display:inline;"><p>文字内容</p>C.<divstyle="display:flex;"><imgsrc="pic.jpg"><p>文字内容</p></div>D.以上均可12.若要限制输入框只能输入1-100之间的整数，应设置的input属性是（）A.type="number"min="1"max="100"B.type="text"pattern="[1-9]\d?|100"C.type="tel"maxlength="3"D.以上A和B均可13.以下CSS代码中，能实现元素从左侧滑入动画的是（）A.@keyframesslideIn{from{transform:translateX(-100%);}to{transform:translateX(0);}}B.@keyframesslideIn{from{margin-left:-100%;}to{margin-left:0;}}C.@keyframesslideIn{from{left:-100%;}to{left:0;}}D.以上均可14.关于JavaScript中this指向的描述，错误的是（）A.全局作用域中的this指向window对象（非严格模式）B.对象方法中的this指向该对象C.箭头函数中的this继承自外层作用域D.使用call()调用函数时，this指向第一个参数以外的参数15.要实现响应式布局中，当屏幕宽度小于768px时隐藏导航栏，应使用的媒体查询是（）A.@media(max-width:768px){.nav{display:none;}}B.@media(min-width:768px){.nav{display:none;}}C.@media(orientation:portrait){.nav{display:none;}}D.@media(device-width:768px){.nav{display:none;}}16.以下HTML标签中，用于定义表格标题的是（）A.<th>B.<caption>C.<thead>D.<tfoot>17.若要禁止文本输入框被用户调整大小，应设置的CSS属性是（）A.resize:none;B.overflow:hidden;C.white-space:nowrap;D.text-overflow:ellipsis;18.以下JavaScript代码执行后，变量x的值是（）```javascriptletx=0;for(leti=0;i<5;i++){if(i%2===0)continue;x+=i;}```A.6B.4C.3D.519.关于CSS变量的使用，正确的代码是（）A.:root{--main-color:ff0000;}.box{color:var(--main-color);}B.:root{main-color:ff0000;}.box{color:main-color;}C.:root{--main-color:ff0000;}.box{color:--main-color;}D.:root{$main-color:ff0000;}.box{color:$main-color;}20.要实现点击按钮后，页面平滑滚动到指定锚点的效果，需要使用的CSS属性或JavaScript方法是（）A.scroll-behavior:smooth;B.element.scrollIntoView({behavior:'smooth'});C.window.scrollTo({top:offset,behavior:'smooth'});D.以上均可二、填空题（本大题共10小题，每小题2分，共20分。请将答案填写在题中横线上）1.HTML文档的根元素是__________。2.CSS中用于设置元素透明度的属性是__________（不考虑rgba）。3.JavaScript中用于获取当前页面URL的对象属性是__________。4.要实现元素在页面滚动时固定在顶部，应设置的CSS属性是__________。5.HTML5中用于绘制图形的标签是__________。6.CSSFlexbox布局中，控制子元素换行方式的属性是__________。7.JavaScript中用于阻止事件默认行为的方法是__________。8.要设置段落首行缩进2个字符，应使用的CSS属性是__________。9.HTML表单中，用于隐藏字段的输入类型是__________。10.CSS中，相邻兄弟选择器使用的符号是__________。三、判断题（本大题共10小题，每小题1分，共10分。正确的打“√”，错误的打“×”）1.所有HTML标签都必须有闭合标签。（）2.CSS的!important规则可以覆盖内联样式。（）3.JavaScript的var声明的变量具有块级作用域。（）4.响应式设计中，viewport元标签的作用是设置页面在移动设备上的初始缩放比例。（）5.伪类:visited可以修改链接访问后的字体颜色、背景颜色等所有样式。（）6.在CSS中，margin属性可以设置负值。（）7.JavaScript的数组可以通过length属性动态调整大小。（）8.HTML5的<video>标签必须包含<source>子标签才能指定视频源。（）9.CSSGrid布局适用于一维布局，Flexbox适用于二维布局。（）10.JavaScript中，使用===进行比较时会同时比较值和类型。（）四、简答题（本大题共5小题，每小题6分，共30分）1.简述HTML语义化的作用，并列举3个HTML5新增的语义化标签。2.比较CSS中Flexbox布局和Grid布局的主要区别及适用场景。3.说明JavaScript中事件委托（事件代理）的原理及优势。4.列举至少4种实现CSS垂直居中的方法，并说明各自的适用场景。5.解释响应式设计的核心思想，并说明实现响应式布局的3种主要技术手段。五、操作题（本大题共2小题，每小题20分，共40分。请根据要求编写代码或描述实现步骤）1.请使用HTML、CSS和JavaScript实现一个响应式导航栏，要求：（1）包含Logo区域（文本“MyLogo”）、5个导航链接（首页、产品、案例、关于、联系）、搜索框；（2）PC端（屏幕宽度≥768px）导航栏水平排列，Logo在左侧，导航链接居中，搜索框在右侧；（3）移动端（屏幕宽度<768px）导航栏变为垂直排列，导航链接默认隐藏，点击“菜单”按钮后展开；（4）搜索框支持输入内容，点击搜索图标（可用文字“搜索”代替）后弹出提示框显示输入内容。2.请编写代码实现一个动态加载图片的功能，要求：（1）页面初始加载时显示3张默认图片（路径自定）；（2）页面底部有“加载更多”按钮，点击后异步加载2张新图片（使用模拟数据）；（3）当没有更多图片可加载时，按钮变为“已加载所有图片”并禁用；（4）使用JavaScript的fetchAPI模拟数据请求（假设接口返回{code:200,data:[{url:'img4.jpg'},{url:'img5.jpg'}]}格式）；（5）图片加载过程中显示“加载中...”提示，加载完成后隐藏。参考答案一、单项选择题1-5:CDBBA6-10:CCBCC11-15:DDADA16-20:BADAD（注：第15题正确选项为A，第20题正确选项为D）二、填空题1.<html>2.opacity3.window.location.href4.position:fixed5.<canvas>6.flex-wrap7.event.preventDefault()8.text-indent:2em9.type="hidden"10.+三、判断题1.×2.×3.×4.√5.×6.√7.√8.×9.×10.√四、简答题（要点）1.作用：提升可访问性、利于SEO、代码可维护性。新增标签：<header>、<footer>、<nav>、<article>、<section>（任意3个）。2.区别：Flexbox是一维布局（单行/列），Grid是二维布局（行列组合）。适用场景：Flexbox适合线性排列（导航、表单），Grid适合复杂网格（页面布局、图片墙）。3.原理：利用事件冒泡，将事件监听器绑定到父元素，通过e.target判断目标元素。优势：减少事件监听器数量、动态添加的子元素自动生效、提高性能。4.方法：（1）Flexbox：父元素display:flex+align-items:center（适用块级容器）；（2）绝对定位+transform：position:absolute+top:50%+transform:translateY(-50%)（父元素有定位）；（3）行高法：line-height等于容器高度（单行文本）；（4）表格布局：父元素display:table-cell+vertical-align:middle（兼容旧浏览器）。5.核心思想：一个页面适配多种设备。技术手段：媒体查询（@media）、弹性布局（百分比/Flexbox/Grid）、图片响应（srcset/sizes）、视口设置（viewport元标签）。五、操作题（示例代码）1.响应式导航栏实现：```html<navclass="navbar"><divclass="logo">MyLogo</div><divclass="nav-links"><ahref="">首页</a><ahref="">产品</a><ahref="">案例</a><ahref="">关于</a><ahref="">联系</a></div><divclass="search-box"><inputtype="text"placeholder="搜索..."><buttonclass="search-btn">搜索</button></div><buttonclass="menu-btn">菜单</button></nav><style>.navbar{padding:1rem2rem;display:flex;align-items:center;justify-content:space-between;background:fff;border-bottom:1pxsolideee;}.nav-links{display:flex;gap:2rem;}.search-box{display:flex;gap:0.5rem;}.menu-btn{display:none;}@media(max-width:768px){.navbar{flex-direction:column;align-items:flex-start;}.nav-links{display:none;flex-direction:column;gap:1rem;margin:1rem0;}.search-box{display:none;flex-direction:column;width:100%;}.menu-btn{display:block;position:absolute;top:1rem;right:2rem;}.nav-links.active,.search-box.active{display:flex;}}</style><script>constmenuBtn=document.querySelector('.menu-btn');constnavLinks=document.querySelector('.nav-links');constsearchBox=document.querySelector('.search-box');menuBtn.addEventListener('click',()=>{navLinks.classList.toggle('active');searchBox.classList.toggle('active');});document.querySelector('.search-btn').addEventListener('click',()=>{constkeyword=document.querySelector('input').value;alert(`搜索内容：${keyword}`);});</script>```2.动态加载图片功能实现：```html<divclass="image-container"><imgsrc="img1.jpg"alt="图片1"><imgsrc="img2.jpg"alt="图片2"><imgsrc="img3.jpg"alt="图片3"></div><divclass="loading-tip"style="display:none;">加载中...</div><buttonid="loadMore">加载更多</button><script>letcurrentPage=1;consttotalPages=2;//假设最多2页（初始3张+2页×2张=7张）constimageContainer=document.querySelector('.image-container');constloadMoreBtn=document.getElementById('loadMore');constl