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

2025年网页制作期中考试试卷附答案一、单项选择题（每题2分，共20分）1.以下哪项是HTML5新增的语义化标签？A.`<div>`B.`<section>`C.`<span>`D.`<strong>`2.CSS中，设置元素背景颜色为半透明红色（透明度0.5）的正确写法是？A.`background-color:rgba(255,0,0,0.5)`B.`background-color:ff000050`C.`background-color:hsla(0,100%,50%,0.5)`D.以上均正确3.关于Flex布局，以下说法错误的是？A.父容器设置`display:flex`后，子元素默认水平排列B.`justify-content:space-around`会使子元素之间的间距相等，首尾间距为中间间距的一半C.`align-items:center`用于控制子元素在交叉轴上的居中对齐D.子元素设置`flex:1`表示占据父容器剩余空间的1/34.响应式设计中，媒体查询`@media(max-width:768px)`的作用是？A.当屏幕宽度大于768px时应用样式B.当屏幕宽度小于等于768px时应用样式C.仅在平板设备上应用样式D.仅在横向屏幕时应用样式5.JavaScript中，`letarr=[1,2,3];arr.push(4)`执行后，`arr`的值是？A.`[1,2,3,4]`B.`[4,1,2,3]`C.`[1,2,4,3]`D.`[1,4,2,3]`6.以下哪项不是CSS盒模型的组成部分？A.内容区域（content）B.内边距（padding）C.滚动条（scrollbar）D.边框（border）7.HTML中，设置图片无法加载时的替代文本应使用哪个属性？A.`title`B.`alt`C.`src`D.`href`8.关于CSS选择器优先级，以下从高到低排列正确的是？A.行内样式>ID选择器>类选择器>标签选择器B.ID选择器>行内样式>类选择器>标签选择器C.类选择器>ID选择器>行内样式>标签选择器D.标签选择器>类选择器>ID选择器>行内样式9.JavaScript中，`document.getElementById('box')`返回的是？A.所有id为“box”的元素数组B.第一个id为“box”的元素C.一个HTML元素对象D.字符串“box”10.以下哪种方式可以实现CSS元素的水平垂直居中？A.`position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)`B.`margin:0auto;`C.`text-align:center;vertical-align:middle`D.`display:flex;justify-content:flex-start;align-items:flex-end`二、填空题（每题3分，共15分）1.HTML5中用于定义页面导航区域的语义化标签是__________。2.CSS中，`box-sizing:border-box`表示盒模型的宽度包含__________、__________和内容区域。3.JavaScript中，`const`声明的变量不可重新__________，但对象属性可以修改。4.响应式设计中，常用的断点（breakpoint）768px通常对应__________设备的屏幕宽度。5.CSS中，使用__________属性可以为元素添加过渡动画（至少写出属性名）。三、判断题（每题2分，共10分）1.所有HTML元素都需要闭合标签（如`</p>`）。（）2.CSS中，`!important`规则可以覆盖行内样式的优先级。（）3.JavaScript的`addEventListener`默认在事件冒泡阶段触发回调。（）4.移动端网页设计中，`viewport`元标签的`initial-scale=1`表示页面初始缩放比例为100%。（）5.Flex布局中，子元素设置`flex-shrink:0`表示该元素不可收缩。（）四、简答题（每题5分，共25分）1.简述HTML5语义化标签的作用（至少列出3点）。2.说明CSS中`flex`属性的简写形式及各值的含义（如`flex:12300px`）。3.比较响应式设计（ResponsiveDesign）与自适应设计（AdaptiveDesign）的核心区别。4.列举JavaScript中数组的5种常用方法（如`push`），并说明其功能。5.解释CSS中“层叠”（Cascade）的含义，并举例说明优先级冲突时的解决规则。五、操作题（共30分）题目：制作一个响应式导航栏要求：（1）使用HTML5语义化标签（如`<nav>`）；（2）包含Logo区域（文本“Logo”）、主导航链接（“首页”“产品”“关于”“联系”）、搜索框（输入框+搜索按钮）；（3）PC端（≥768px）导航链接水平排列，搜索框位于右侧；（4）移动端（<768px）导航链接折叠为汉堡菜单（三横线图标），点击后展开/收起；（5）使用CSSFlex布局实现主体结构；（6）添加基础样式（如背景色、内边距、字体大小）；（7）用JavaScript实现汉堡菜单的交互功能。参考答案一、单项选择题1.B2.D3.D4.B5.A6.C7.B8.A9.C10.A二、填空题1.`<nav>`2.边框（border）、内边距（padding）3.赋值（或“重新赋值”“修改指向”）4.平板（或“移动端平板”）5.`transition`（或`transition-property`等具体属性）三、判断题1.×（如`<img>`、`<br>`等空元素无需闭合）2.×（行内样式优先级高于`!important`，除非行内样式也使用`!important`）3.√（默认冒泡阶段，可通过第三个参数`{capture:true}`改为捕获阶段）4.√5.√四、简答题1.作用：①提升页面可访问性（屏幕阅读器更易解析）；②优化搜索引擎SEO（明确内容结构）；③提高代码可维护性（语义化标签更易理解）；④减少冗余的CSS类名（通过标签本身传递结构信息）。2.`flex`属性是`flex-grow`、`flex-shrink`、`flex-basis`的简写。示例`flex:12300px`中，`1`为放大比例（子元素分配剩余空间的比例），`2`为缩小比例（空间不足时的收缩比例），`300px`为基准宽度（元素在分配空间前的初始大小）。3.核心区别：响应式设计通过媒体查询和弹性布局，使同一套代码适配不同屏幕（“一套代码多端显示”）；自适应设计则针对不同设备（如PC、平板、手机）提供多套独立的代码或样式（“多套代码按需加载”）。4.示例：①`pop()`：删除数组最后一个元素并返回；②`shift()`：删除数组第一个元素并返回；③`map()`：遍历数组并返回新数组（每个元素经函数处理后的值）；④`filter()`：返回符合条件的元素组成的新数组；⑤`reduce()`：累加数组元素，返回最终计算结果。5.层叠指当多个CSS规则作用于同一元素的同一属性时，浏览器按优先级选择最终样式的机制。优先级规则：行内样式（1000）>ID选择器（100）>类/属性/伪类选择器（10）>标签/伪元素选择器（1）>通配符（0）；若优先级相同，后定义的规则覆盖先定义的；`!important`可提升规则优先级（但低于行内样式的`!important`）。例如：`.box{color:red;}`与`p.box{color:blue;}`作用于`<pclass="box">`时，后者优先级更高（标签+类=11>类=10），文字显示蓝色。五、操作题（代码示例）HTML部分：```html<navclass="navbar"><divclass="logo">Logo</div><divclass="nav-links"id="navLinks"><ahref="">首页</a><ahref="">产品</a><ahref="">关于</a><ahref="">联系</a></div><divclass="search-box"><inputtype="text"placeholder="搜索..."><button>搜索</button></div><buttonclass="menu-btn"id="menuBtn">☰</button></nav>```CSS部分：```css.navbar{display:flex;align-items:center;justify-content:space-between;padding:1rem2rem;background:2c3e50;color:white;}.logo{font-size:1.5rem;font-weight:bold;}.nav-links{display:flex;gap:2rem;margin:01rem;}.nav-linksa{color:white;text-decoration:none;}.search-box{display:flex;gap:0.5rem;}.search-boxinput{padding:0.3rem0.5rem;border:none;border-radius:4px;}.search-boxbutton{padding:0.3rem1rem;background:3498db;border:none;border-radius:4px;color:white;cursor:pointer;}.menu-btn{display:none;background:none;border:none;color:white;font-size:1.5rem;cursor:pointer;}/移动端样式/@media(max-width:768px){.nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:2c3e50;padding:1rem;gap:1rem;}.nav-linksa{padding:0.5rem;border-bottom:1pxsolid455a64;}.search-box{display:none;/移动端可隐藏或调整搜索框位置，此处简化处理/}.menu-btn{display:block;}.nav-links.active{display:flex;}}```JavaScript部分：```javascriptconstmenuBtn=document.getElementById('menuBtn');constnavLinks=document.getElementById('navLin