《网页设计与制作》期末试题试卷（带答案）

2025一2026学年下学期期末考试 《网页设计与制作》试题 适用：计算机专业 考试时间：60分钟 满分：100分 一、选择题（共20题，每题2分，共40分) 1、HTML是什么的缩写？（) A.Hyper Text Markup Language B.High Text Markup Language C.Hyper Tab Markup Language D.Home Tool Markup Language 2、在HTML中，用于定义最大标题（最重要）的标签是() A.<h6> B.<heading> C.<head> D.<h1> 3、以下哪个CSS属性用于设置文本颜色？( A.text-color B.background-color C.color D.font-color 4、在HTML中，插入图片使用的标签是( A.<td> B.<img> C.<pic> D.<src> 5、在HTML文档中，用来定义内部样式表的标签是（) A.<script> B.<style> C.<css> D.<link> 6、以下哪个CSS选择器用于选择所有的<p>元素？( A.#p B.p C.p D.*p 7、在HTML中，创建超链接使用的标签是() A.<a> B.<link> C.<href> D.<url> 8、CSS中的padding属性用于设置什么？( A.元素边框与内容之间的距离 B.元素与元素之间的距离 C.元素边框与外边界的距离 D,元素的宽度 9、下列哪个标签用于定义HTML文档中的无序列表？() A.<ul> B.<ol> C.<li> D.<list> 10、以下哪段CSS代码可以将段落文字大小设置为20像素？( ) A.font-size=20px;B.text-size:20px C.font-size:20px: D.size:20px; 11、在HTML中，用于表示换行的标签是( A.<br> B.<hr> C.<p> D.<wbr> 12、CSs中的background-.color属性用于设置() A.文字颜色 B.边框颜色 C.背景颜色 D.阴影颜色 13、下面哪个标签用于定义HTML表格中的一行？() 第1页，共4页 A.<td> B.<th> C.<tr> D.<tl> 14、以下哪个CSS属性可以改变文字的字体？（) A.font-style B.font-family C.font-weight D.text-font 15、要想让一个块级元素水平居中，通常需要设置（) A.margin:auto: B.padding:auto;C.text-align:center; D.display:center: 16、下列哪个是CSS中的类选择器写法？() A.#box B.box C.*box D.box 17、在HTML表单中，用于创建文本输入框的<input>:类型属性值是（) A.text B.password C.button D.submit 18、下列哪个CSS属性可以隐藏元素，且元素不再占用页面空间？() A.visibility:hidden: B.opacity:0: C.display:none; D.display:hidden: 19、在HTML中，以下哪个标签通常用于定义页面的头部信息（如标题、编码等）？() A.<body> B.<footer> C.<header> D.<head> 20、CSS中border-radius属性的作用是( A.设置边框宽度 B.设置边框颜色 C.设置圆角边框 D.设置边框阴影 二、填空题（共10空，每空1分，共10分) 1、HTML文档中，所有的内容都应该包含在①和②标签之间。 2、CSS中的基础选择器有：标签选择器、类选择器（以③符号开头）和id选择器。 3、在HTML中，表格的单元格标签是④，表头单元格标签是⑤。 4、设置CSS边框属性border::1 px solid black,:其中solid表示边框样式为⑥线。 5、为超链接添加target-="⑦”属性，可以让链接在新窗口或新标签页中打开。 6、CSS中设置文字粗细的属性是⑧。 7、在HTML中，注释的写法是⑨。 8、要实现鼠标悬停在元素上时改变样式，可以使用CSS的0伪类。 三、判断题（共10题，每题1分，共10分】 1、HTML标签对大小写不敏感，写<BODY>和<body>效果一样。() 2、CSS中可以使用/*注释内容*/添加注释。() 3、<br>标签必须写成<br/>才能正确换行。() 4、内部样式表的优先级高于外部样式表，但低于内联样式（写在标签stye属性中的样式）。() 第2页，共4页 5、在HTML中，<div>标签是一个块级元素，它会独占一行。（) 6、CSs的margin属性用于设置元素的内边距。() 7、给图片设置width:100%:可以让图片宽度占满父容器。() 8、<0>标签表示有序列表，列表项前面会显示数字或字母序号。() 9、所有CSS属性都必须以分号；结尾，否则样式无效。() 10、HTML中可以使用<center>标签来实现内容居中，这是目前最推荐的方法。() 四、简答题（共2题，每题10分，共20分） 1、请简述CS$的作用是什么？写出至少三种常用的CSS属性，并说明其作用。 2、简述块级元素与行内元素的区别（至少两点）。各举一个常用的HTML标签作为例子。 五、代码分析题（共2题，每题10分，共20分） 1、阅读以下代码片段，回答问题。 html <!DOCTYPE html> <html> <head> <style> .box width:200px: height:100px: background-color:lightblue: border:2px solid blue; text-align:center; line-height:100px: } box:hover background-color:orange; transform:scale(1.1): </style> </head> <body> <div class="box"> 鼠标悬停 </div> </body> </html> 问题： (1)当鼠标没有悬停时，<dv>的背景颜色是什么？文字在盒子中如何对齐？(4分) (2)当鼠标悬停在盒子上时，背景颜色会变成什么？盒子会发生什么变化？(3分) 第3页，共4页 (3)Iine-height:100px这条样式的作用是什么？(3分) 2、阅读以下代码片段，回答问题。 html <!DOCTYPE html> <html> <head> <style> .container display:flex: justity-content:space-around; } .item width:100px background-color:#fofof0; padding:10px; margin:10px: text-align:center; border-radius:8px: @media (max-width:600px){ container flex-direction:column: align-items:center; } </style> </head> <body> <div class="container"> <div class="item">产品1</div> <div class="item">产品2</div> <div class="item">产品3</div> </div> </body> </html> 问题： (1)在宽度大于600px的屏幕上，三个.item是如何排列的？(3分) (2)justify-content:space--around:的作用是什么？(3分) (3)当屏幕宽度小于600x时（比如在手机上），布局会发生什么变化？请具体描述。(4分) 第4页，共4页2025一2026学年下学期期末考试 《网页设计与制作》答题卡 得分 评卷人 总分 合分人 选择题（共20题，每题2分，共40分） 题号 3 4 5 6 8 9 10 . 答案 题号 11 12 13 14 15 16 17 18 19 20 答案 得分 评卷人 二、 填空题（共10题，每题1分，共10分） ① ② ③ ⑤ ⑥ ⑦ 8 ⑨ 10 得分 评卷人 救 三、 判断题（共10题，每题1分，共10分) 题号 1 2 3 4 5 6 7 8 9 10 答案 得分 评卷人 四、简答题（共2题，每题10分，共20分） 第1题 第1页，共2页 第2题 得分 评卷人 五、代码分析题（共2题，每题10分，共20分） 第1题 第2题 第2页，共2页2025一2026学年下学期期末考试 《网页设计与制作》参考答案及评分标准 一、选择题（每题2分，共40分) 题号 1 3 4 5 6 7 8 9 10 答案 A D C B B A A A C 题号 11 12 13 14 15 16 17 18 19 20 答案 C C B B A C D C 二、填空题（每空2分，共10分】 ①<html> ②</html> ③.（点） ④<td> ⑤<th> ⑥实 ⑦blank ⑧font-weight ⑨<！-注释内容-> 10:hover 三、判断题（每题1分，共10分) 题号 1 2 3 4 5 6 7 8 9 10 答案 四、简答题（每题10分，共20分) 第1题参考答案 CSS作用：控制网页的样式与布局，实现内容与表现分离。 常用属性示例（答出任意三个，每个2分）： color:文字颜色 font-size:文字大小 background-color:背景颜色 margin:外边距 padding:内边距 border:边框 第2题参考答案 区别（答出两点即可，每点3分）： 块级元素独占一行；行内元素不换行，与其他行内元素共行。 块级元素可设置宽高、上下边距；行内元素宽高无效，上下边距效果有限。 块级元素默认宽度100%，行内元素宽度由内容撑开。 举例：块级<div>,行内<span>(各2分)。 五、代码分析题（每题10分，共20分) 第1题参考答案 第1页，共2页 (1)背景颜色：lightblue(浅蓝色)。(2分) 文字水平居中(text-align:center）)且垂直居中(Iine-heig ht::10Opx)。(2分) (2)背景颜色变为orange(橙色)。(1分) 盒子放大到原来的1.1倍(transform:scale(1.1)。(2分) (3)line-height:100px:设置行高为100像素，使单行文字在高度为100px的盒子中垂直居 中。(3分) 第2题参考答案 (1)三个.item水平排列在一行，并且均匀分布在容器中（左右两端及中间间距相等）。(3 分) (2)space-.around使每个子元素左右两侧的间距相等，即元素之间的间距是两端间距的两倍 实现均匀分布。(3分) (3)当宽度小于600px时，flex-direction:column:使容器变为垂直排列，子元素从上到下排 成一列；align-items:center::使每个子元素在交叉轴上居中，即水平居中。(4分) 第2页，共2页