青岛理工大学web试题和答案

青岛理工大学web试题和答案

一、选择题（共15题，每题3分，共45分）1-HTML5中，用于定义页面头部区域的标签是？（A）A.header B.head C.title D.meta2-CSS中用于设置元素外边距的属性是？（A）A.margin B.padding C.border D.spacing3-JavaScript中向数组末尾添加元素并返回新长度的方法是？（A）A.push B.pop C.shift D.unshift4-HTTP请求中用于提交数据的方法是？（B）A.GET B.POST C.PUT D.DELETE5-以下不属于HTML5新增API的是（C）A.localStorage B.sessionStorage C.XMLHttpRequest D.Canvas6-CSS中控制元素显示隐藏且不占空间的属性是？（B）A.visibility:hidden B.display:none C.opacity:0D.hidden:true7-JavaScript中可将字符串转为数字的函数是？（D）A.Number B.parseInt C.parseFloat D.以上都是8-HTML中设置超链接目标URL的属性是？（A）A.href B.src C.link D.ref9-CSS中选择类名为active元素的选择器是？（A）A..active B.#active C.active D.[class=active]10-JavaScript中for...in循环通常遍历的数据类型是？（B）A.数组B.对象C.字符串D.数字11-HTTP状态码404表示什么含义（C）第1页共7页A.服务器错误B.请求成功C.资源未找到D.权限不足12-HTML5中定义音频的标签是？（A）A.audio B.video C.sound D.music13-CSS中设置背景图片的属性是？（A）A.background-image B.bg-image C.image D.background14-HTTP请求行包含的内容是？（A）A.请求方法、URL、协议版本B.请求头、请求体、协议版本C.状态码、状态短语、协议版本D.响应头、响应体、协议版本15-以下不属于前端构建工具的是？（D）A.Webpack B.Vite C.Babel D.Node.js

二、判断题（共15题，每题2分，请在括号内填写对或错，共30分）1-HTML是一种用于创建网页的编程语言（错）2-CSS中的!important声明可提高样式优先级（对）3-JavaScript中数组索引从1开始（错）4-HTTP请求分为请求行、请求头、请求体三部分（对）5-HTML5的Canvas用于绘制图形和图像（对）6-CSS中flex-direction:row是弹性盒模型默认排列方向（对）7-JavaScript的let和const具有块级作用域（对）8-HTTP是无状态协议（对）9-HTML的img标签alt属性用于设置图片标题（错）10-CSS中position:fixed相对浏览器窗口定位（对）11-JavaScript中this始终指向函数调用者（对）12-HTML5的localStorage数据关闭浏览器后清除（错）13-CSS的border-radius设置元素边框圆角（对）第2页共7页14-JavaScript的addEventListener用于绑定事件（对）15-HTTP状态码200表示请求成功（对）

三、填空题（共15题，每题2分，请填写正确内容，共30分）1-HTML中创建有序列表的标签是________（ol）2-CSS中color:red设置元素的________颜色（文本）3-JavaScript的document.getElementById返回指定________的第一个元素（id属性值）4-HTTP的GET方法数据附加在________部分（URL）5-HTML5定义表格主体的标签是________（tbody）6-CSS的________属性控制字体大小（font-size）7-JavaScript函数function suma,b{return a+b;}作用是计算两数的________（和）8-HTML中a标签target属性值________时新窗口打开（blank）9-CSS的________布局模型按文档流排列元素（标准流/普通流）10-JavaScript数组的________方法删除第一个元素（shift）11-HTTP响应消息第一行是________行（状态）12-HTML5定义视频的标签是_______（video）13-CSS的margin:auto实现元素________居中（水平）14-JavaScript中null表示________，undefined表示未定义（空值/不存在的值）15-HTML的________声明指定文档类型以标准模式解析（!DOCTYPEhtml）

四、简答题（共5题，每题5分，共25分）1-简述HTML语义化标签的作用，并列举3个常见标签第3页共7页答案作用提高代码可读性、利于SEO、增强可访问性；常见标签header、nav、main（或article、section、footer）2-对比CSS的box-sizing:content-box和border-box答案content-box（默认）width/height仅含内容区；border-box width/height含内容区+padding+border；后者便于控制元素总尺寸3-解释JavaScript事件委托及其优势答案事件委托利用事件冒泡将子元素事件绑定到父元素；优势减少内存占用、动态添加子元素无需重绑事件、降低冲突风险4-描述HTTP请求完整过程（从输入URL到页面显示）答案:DNS解析→TCP连接→发送HTTP请求→服务器处理→返回响应→浏览器解析渲染→关闭连接5-前端工程化的主要内容和意义答案内容模块化、构建工具、代码规范、自动化测试、CI/CD；意义提高效率、提升代码质量、增强可维护性、支持大型项目开发

五、编程题（共2题，每题15分，共30分）1-用HTML+CSS创建个人名片页面宽300px高400px，白色卡片（280px×380px，10px内边距，2px灰边框，border-radius:8px），含圆形头像（80px×80px，居中）、姓名（h2居中）、职业（p居中）、联系信息（ul列表，li含图标）答案HTML divclass=card-containerdiv class=cardimgsrc=avatar.jpg alt=头像class=avatarh2张三/h2p前第4页共7页端开发/pulli zhangsan@example.com/lili13800138000/li/ul/div/divCSS.card-container{width:300px;height:400px;background:#f5f5f5;display:flex;justify-content:center;align-items:center;}.card{width:280px;height:380px;background:white;padding:10px;border:2px solid#ddd;border-radius:8px;text-align:center;}.avatar{width:80px;height:80px;border-radius:50%;margin:15px auto;display:block;}2-用JavaScript实现待办事项列表输入框+添加按钮+列表，输入非空添加列表项，勾选复选框加删除线，点击列表项文字变灰答案HTML inputtype=text id=inputbutton id=add添加/buttonul id=list/ulCSS#list li{padding:8px;margin:5px0;cursor:pointer;}#listli.completed{text-decoration:line-through;color:#888;}JS document.getElementByIdadd.addEventListenerclick,={let val=document.getElementByIdinput.value;ifval{letli=document.createElementli;li.innerHTML=inputtype=checkbox${val};document.getElementByIdlist.appendChildli;document.getElementByIdinput.value=;li.querySelectorinput.第5页共7页addEventListenerchange,e={e.target.closestli.classList.togglecompleted;};}};

六、综合应用题（共1题，20分）设计响应式学生成绩查询页面

1.语义化结构（header/main/footer）；

2.查询区下拉菜单（年级）+学号输入框+查询按钮，空学号提示；

3.结果区5门课程表格（课程名称/成绩/学分），成绩≥60分黑字，60分红字；

4.响应式屏幕768px时表格横向滚动，查询条件垂直排列答案HTML核心headerh1成绩查询/h1/headermaindivclass=queryselectoption2025级/option/selectinputtype=text placeholder=学号button查询/button/divdiv class=resulttabletheadtrth课程/thth成绩/thth学分/th/tr/theadtbodytrtd高数/tdtd92/tdtd5/td/tr/tbody/table/div/mainCSS核心@mediamax-width:768px{.query{flex-direction:column;}.result{overflow-x:auto;}}JS核心document.querySelectorbutton.addEventListenerclick,={if!input.valuealert输入学号;else{result.style.display=block;rows.forEachr=r.querySelectortd.style.color=r.textContent=60black:red;}};第6页共7页答案汇总选择题答案

1.B

2.A

3.A

4.B

5.C

6.B

7.D

8.A

9.A

10.B

11.C

12.A

13.A

14.A

15.D判断题答案

1.错

2.对

3.错

4.对

5.对

6.对

7.对

8.对

9.错

10.对

11.对

12.错*

13.对

14.对

15.对填空题答案

1.ol

2.文本

3.id属性值

4.URL

5.tbody

6.font-size*

7.和

8._blank

9.标准流/普通流

10.shift

11.状态

12.video

13.水平

14.空值/不存在的值

15.!DOCTYPE html简答题答案（按题目顺序）见上述简答题内容编程题答案（按题目顺序）见上述编程题内容综合应用题答案见上述综合应用题内容第7页共7页。