《人机交互界面技术》期末试卷

像污秽一样

于 2024-06-27 21:42:42 发布

阅读量1k

点赞数 22

文章标签：人机交互

本文链接：https://blog.csdn.net/m0_73302939/article/details/140022505

版权

一、单项选择题

1．以下不属于人机界面研究内容的是（）。

A．交互性界面设计

B．环境性界面设计

C．情感性界面设计

D．功能性界面设计

选A

解析：第一道题就让我绷不住，谁的人机交互还包含情感性界面设计的。但是到处查到的都是没有解释的选A。当定义死记了吧

2．以下说法中，错误的是（）。

A．获取 WWW 服务时，需要使用浏览器作为客户端程序。

B．WWW 服务和电子邮件服务是 Internet 提供的最常用的两种服务。

C．网站就是一系列逻辑上可以视为一个整体的页面的集合。

D．所有网页的扩展名都是 .html。

选D

解析：出了HTML以外，还有php、asp、jsp都是网页的拓展名

3．为了标识一个 HTML 文件应该使用的 HTML 标记是（）。

A．<p><／p>

B． <boby><／body>

C．<html><／html>

D．<table><／table>

选C

解析：A选项是段落标签，排除；B选项是写你正文的body；D选项是表格标签

只有C选项，你看见关键词html也该想着选它了

4. 下列选项中支持透明的图片文件格式是（）。

A．BMP

B．TIFF

C．GIF

D．JPG

选C

解析：其实TIFF也是可以支持透明背景的，但是它并不常用，权衡之下选C了（能不能把B选项换了）

5. 在 CSS 中 #menu 是( )选择器。

A．menu 是标签选择器

B．menu 是元素选择器

C．menu 是类选择器

D．menu 是 ID 选择器

选D

解析：#符号就是为了来选择ID的，

标签和元素选择器都是选中特定的，比如<p>；类选择器应该是用"."开头的

6．JavaScript 中，以下不是时间对象方法的是（）。

A. getDate

B. getDay

C. getFullYear

D. getElementById

选D

解析：翻译，通过ID获取元素，听着就跟时间没啥关系，秒了

7. 下面的元素中，( )不会从正常文档流中脱离。

A．浮动元素

B．相对定位元素

C．绝对定位元素

D．固定定位元素

选B

解析：脱离文档流就是指把元素从原本常规的按顺序的排序中抽出来单独排，而只有相对定位是自身相对于原本这个位置进行偏移。

8．给所有的<h1>标签添加背景颜色为白色的样式设置（）。
A. .h1 { background-color:#ffffff; }
B. h1 { background-color; #ffffff; }
C. h1.all { background-color:#ffffff; }
D. #h1 { background-color:#ffffff; }
选B

解析：标签选择器就是没有任何特殊开头的，直接写标签名任何设置属性即可

9. CSS3 基本选择器优先级正确的是（）。
A. 标签选择器>类选择器>ID 选择器
B. 标签选择器>ID 选择器>类选择器
C. 类选择器>标签选择器>ID 选择器
D. ID 选择器>类选择器>标签选择器
选D

解析：

ID 选择器具有最高的优先级，因为它们唯一标识页面中的特定元素。（最特殊）

类选择器次之，它们用于选择具有相同类的一组元素。（有复用）

标签选择器的优先级最低，它用于选择特定类型的元素（如 div、p 等）。（最普遍）

就按特殊性这么排序下来

10．页面链接外部 JavaScript 文件时，使用的标签是（）。
A．scripts B．script C．links D．link

选B

解析：引入外部JS样式时就用script；

AC直接排，多个s就是语法错误

D选项是链接外部CSS（层叠样式表）的。

11．关于 CSS3 边框，以下描述错误的是（）。
A. border-radius: 用于创建圆角
B. border-image:使用图片创建边框
C. box-shadow:用来添加盒子阴影
D. text-shadow:用来添加盒子阴影

选D

解析：把几个选项都相互对照一下，你就会发现CD是冲突的吧，D选项的text明显是文本吧，秒了

12．以下关于 JavaScript 数组的说法正确的是（）。
A. JavaScript 数组可以存储多个元素，且元素类型可以不一致。
B. JavaScript 数组元素都有一个索引，索引号从 1 开始。
C. JavaScript 数组的命名可以用数字开头。
D. JavaScript 数组通过 len 属性获取元素个数。
选A

解析：B、数组从0开始，排除；C、所有编程语言（我知道的）设置变量都是不允许数字开头的；D、应该是length而不是len；

13．以下关于 CSS3 过渡动画的说法正确的是（）。
A. CSS3 过渡动画是元素从一种样式逐渐改变为另一种样式的效果。
B. CSS3 过渡动画是元素从一种样式直接改变为另一种样式的效果。
C. CSS3 过渡动画用来改变整个页面的样式。
D. CSS3 过渡动画和 CSS3 帧动画是一样的。

选A

解析：题干都说了过渡动画，哪可能是直接改变，B错；C、过渡动画是作用于单个元素的；

D、帧动画是通过关键帧来定义动画效果的，跟过渡动画的原理不同。

14．以下变量名是非法的是（）。

A. num_1

B. 2num

C. sum

D. de2$f

选B

解析：数字开头，大忌，秒了

15. 在 JavaScript 中，运行以下代码后的返回值是（）。
var flag=true;
document.write(typeof(flag));(试卷上这里甚至打印错误)
A. undefined B. null C. number D. boolean

选D

解析:首先true/false就是布尔类型的数值。typeof返回的是你当前变量的数据类型。

A、如果flag没赋值的话，就是undefined

B、给flag赋值null的时候就是选B

C、赋值数字的时候就选C

16．以下有关 JavaScript 的说法中，正确的是（）。
A. 定义 JavaScript 变量时不区分大小写。
B. JavaScript 变量既可以在声明时赋值，也可以在声明之后赋值。
C. JavaScript 运算符都必须使用 2 个操作数。
D. 在创建数组时，必须指明数组的长度。
选B

解析：A、myVar 和 MyVar 是不同的变量。

C、递增运算符 ++就只有一个呀

D、JS的数组实际上是可以动态添加或删除数组元素的

17．以下 JavaScript 表达式中能得到 false 的是（）。
A. 1 == true
B. 1 == '1'
C. 0 == false
D. 1 === true
选D

解析：其实初看会觉得选B，但其实JS里面存在类型转换后比较的，”1“会转换成数字1，所以B是true

A、数字1会转换成布尔的true，没话说；

C、跟A是一个原理，C语言大家都学过，1为真0为假

18．JavaScript 创建函数，应该使用（）。
A．function
B．main
C．var
D．class
选A

解析：关键字都叫function函数了；

B不解释；

C是定义变量的

D是定义类的

19．关于 flex 属性说法错误的是（）。
A. flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
B. flex 属性是 flex-grow，flex-shrink 和 flex-basis 属性的简写属性。
C. 其默认值是 0 1 auto。
D. 只要是块级元素，都可以设置其 flex 实现空间的弹性分配。
选D

解析：A选项就是flex的正确的用途描述

C选项就是默认不放大、可缩小、基础值自动计算的意思

D、只有被设置为 display: flex 或 display: inline-flex 的元素才可以成为弹性容器

看见只要……都这么绝对我闭着眼睛都要选的

20．下列哪个 JavaScript 代码可以创建一个数组（）。
A. var arr = {};
B. var arr = ();
C. var arr = [];
D. var arr = “”;

选C

解析：A其实是创建一个空的对象，不是数组

B、语法就是错的

D、定义的是字符串，排除

二、判断题

1. 所有的 JavaScript 变量名字都必须是小写字母。（）

答案：×

解析：包错的，哪有不让你大写的

2. 用 H1 标记符修饰的文字通常比用 H6 标记符修饰的要小。（）

答案：×

解析：H1~H6的大小实际上是从大到小的，一级标题和三级标题的区别总分得出来吧

3. 指定 line-height 属性时，既可以使用一个整数，也可以使用百分比。（）

答案：√

解析：给整数就是给倍数，百分比跟小数能转换嘛

4. GIF 格式的图像最多可以显示 256 种颜色。（）

答案：√

解析：GIF 格式使用的是8位的颜色深度，2^8=256；

5. JavaScript 函数的参数只能有一个。（）

答案：×

解析：拿膝盖想都知道错

6. HTML 表格内容的垂直对齐方式默认为垂直居中。（）

答案：×

解析：表格内容的垂直对齐方式默认为垂直顶部对齐，示例：

<table>
  <tr>
    <td valign="middle">This is vertically centered.</td>
    <td valign="top">This is aligned to the top.</td>
  </tr>
</table>

7. JavaScript 的时间对象通过 new Now() 创建。（）

答案：×

解析：JavaScript 的时间对象是通过 new Date() 创建的，而不是 new Now()

8. JavaScript 文件后缀名是 java。（）

答案：×

解析：后缀名是Js

9. display 属性设置为 inline-block 时，元素将显示为行内块元素。

答案：√

解析：

10. JavaScript 变量可以在声明时赋值，也可以在声明之后再赋值。（）

答案：√

解析：

三、填空题

1.JavaScript 中，用于表示数组的对象是 _______，表示时间对象的是_________。

答案：Array，Date

解析：数组别记成list了

2. CSS 定位属性 position 的取值包括：static、_____ 、absolute 和 fixed。

答案：relative

3.CSS 选择符有 id 选择符、________选择符和___________选择符。

答案：类、标签

4.HTML 中，列表有_________列表、____________列表和定义列表。

答案：有序、无序

5.JavaScript 中 10||0 的结果为______ ；10&&0 的结果为______ ； !10 的结果为__________________。

答案：10，0，false

解析：注意单个|的时候是按位或，两个是逻辑或

四、简答题

1. 写出 JavaScript 常用的事件及其作用。（至少写出 3 个）

答案：

（1）click，点击事件。
（2）mouseover，鼠标触碰事件。
（3）mouseout 或者 mouseleav 鼠标离开事件。
（4）keydown 键盘按下事件。

2. 简述 JavaScript 中语句 break、continue 和 return 有什么区别?

（1）break：跳出整个循环，继续执行循环后面的代码。

（2）continue：跳出本次循环，继续下一次循环。

（3）return：直接返回值到程序头。

3. 我们学习的表单元素有哪些? （至少写出 6 个）

文本输入框 (<input type="text">)：
- 用于单行文本输入。
- 示例：
```
<input type="text" name="username">
```
密码输入框 (<input type="password">)：
- 用于密码输入，输入的文本会被隐藏。
- 示例：
```
<input type="password" name="password">
```

单选按钮 (<input type="radio">)：

用于选择一个选项（多选一）。

示例：

<input type="radio" name="gender" value="male"> Male <input type="radio" name="gender" value="female"> Female

复选框 (<input type="checkbox">)：

用于选择多个选项（多选多）。

示例：

<input type="checkbox" name="hobby" value="reading"> Reading <input type="checkbox" name="hobby" value="sports"> Sports

下拉列表 (<select>)：

用于选择一个或多个选项。

示例：

<select name="country"> <option value="usa">USA</option> <option value="canada">Canada</option> <option value="uk">UK</option> </select>

文本区域 (<textarea>)：
- 用于多行文本输入。
- 示例：
```
<textarea name="message" rows="4" cols="50"></textarea>
```

按钮 (<button> 或 <input type="button">)：

用于提交表单或触发 JavaScript 事件。

示例：


<button type="submit">Submit</button> <input type="button" value="Click me" onclick="alert('Button clicked!')">

4. 盒子模型的属性有哪几个?它们的作用分别是什么?

Content：定义内容区域的宽度和高度。
- 示例：width: 100px; height: 50px;
Padding：定义内容区域与边框之间的距离。
- 示例：padding: 10px; 或 padding-top: 10px; padding-right: 5px;
Border：定义边框的宽度、样式和颜色。
- 示例：border: 1px solid black; 或 border-width: 1px; border-style: solid; border-color: black;
Margin：定义边框与其他元素之间的距离。
- 示例：margin: 20px; 或 margin-top: 10px; margin-right: 15px;

5. 清除浮动的方法有哪几种?分别如何实现? （至少写出 3 种）

答案：

（1）浮动元素后面加空 div

（2）设置父元素的高度

（3）父级添加 overflow 属性

（4）父级添加伪类

五、程序题

1. 已知页面效果如图所示（其中的细线效果为一像素粗细，颜色为灰色），请填写以下 html 代码中留下的空白。

<form>
<table border bgcolor="#eeeeee">
<tr><td (1) align=center><b>情况登记</b>
<tr><td>姓名：<td> (2)
<tr><td>密码：<td><INPUT size="20" (3) value="pwd">
<tr><td> 性别： <td><INPUT name="sex" type=radio> 男 <INPUT name="sex"
type=radio>女
<tr><td> <td><INPUT (4) value=" 提交 "> <INPUT type="reset"
(5) >
</table>
</form>
答案：

（1）colspan="2"

（2）<input size="20" value="name">

（3）type="password"

（4）type="submit"

（5）value="重写"

2.阅读下列 CSS 代码的一部分，回答以下提问。

（1）第 1 行代码的作用是什么？
（2）第 4 行中的:hover 的作用是什么？
（3）第 6 行代码的作用是什么？
（4）第 7 行代码设置的是什么？
（5）第 13 行代码的作用是什么？

答案：

（1）设置整个页面的字体为“宋体”，字号大小为 12 像素。
（2）设置鼠标悬停在超链接上的样式：出现下划线。
（3）设置#siderbar 为右浮动。
（4）设置#siderbar 的内边距上下为 20 像素，左右为 10 像素。

（5）设置 footer 中文本水平居中。

3. 使用 JavaScript 编程实现查询语文成绩的效果。

需求说明：给定四名同学，分别是小平、小李、小黄、小黑，语文成绩分别 98 分、95 分、96 分、100 分。使用多分支语句实现用户在弹出框中输入同学名字，如果有就弹出该同学的语文成绩，如果该同学不存在就弹出“没有此同学”的效果。参考效果如下图。

答案：

<script type="text/javascript">
var name=prompt("请输入要查询成绩的同学名字：","");
if(name=="小平"){
alert("小平的语文成绩是 98 分");
}else if(name=="小李"){
alert("小李的语文成绩是 95 分");
}else if(name=="小黄"){
alert("小黄的语文成绩是 96 分");
}else if(name=="小黑"){
alert("小黑的语文成绩是 100 分");
}else {
alert("没有此同学");
}
</script>

像污秽一样

关注

22
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
《人机交互界面技术》期末试卷

1．以下不属于人机界面研究内容的是（）。A．交互性界面设计B．环境性界面设计C．情感性界面设计D．功能性界面设计选A解析：第一道题就让我绷不住，谁的人机交互还包含情感性界面设计的。但是到处查到的都是没有解释的选A。当定义死记了吧2．以下说法中，错误的是（）。A．获取 WWW 服务时，需要使用浏览器作为客户端程序。B．WWW 服务和电子邮件服务是 Internet 提供的最常用的两种服务。C．网站就是一系列逻辑上可以视为一个整体的页面的集合。D．所有网页的扩展名都是 .html。
复制链接

扫一扫