人机交互界面基础复习题

@keyframes colorChange {
    from { background-color: red; }
    to { background-color: blue; }
}

.animated-element {
    animation: colorChange 2s infinite;
}

这里就能看出animation和keyframes的关系了

11、在HTML中，通过( A )可以实现鼠标悬停在div上时，元素执行旋转135度效果。

A、div:hover{transform:rotale(135deg)}

B、div:hover{transform:skew(135deg)};

C、div:hover{transform:scale(1.5)}

D、div:hover{transform:tanslate(50px)}

解析：首先，hover就是悬停的意思，然后我们看里面的属性设置

B、skew(135deg) 用于将元素进行斜切变换，这里指定的是倾斜135度，跟旋转的意思肯定是不一样的

C、scale(1.5) 用于将元素按比例放大1.5倍，这是按比例伸缩，跟旋转沾不上边。

D、translate(50px) 用于将元素在水平方向上移动50像素，这是平移，和旋转也是沾不上边的

A、就是正确答案了，下面这段示例就是旋转效果的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            transition: transform 0.5s; /* 添加平滑过渡效果 */
        }
        div:hover {
            transform: rotate(135deg);
        }
    </style>
    <title>旋转示例</title>
</head>
<body>
    <div></div>
</body>
</html>

12、将元素加粗的正确 CSS 语法是以下哪个？（B）

A、p {text-size:bold} B、p {font-weight:bold}

C、<p style="font-size:bold"> D、<p style="text-size:bold">

解析：元素加粗，再怎么说你得选中font嘛，那AD就排除了，其次看属性，font-size是用于控制字体大小的 CSS 属性，而不是用于加粗字体，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        p {
            font-weight: bold;
        }
    </style>
    <title>加粗示例</title>
</head>
<body>
    <p>这是一个加粗的段落文本。</p>
</body>
</html>

13、下列哪种CSS样式定义的方式拥有最高的优先级（ C ）

A、嵌入 B、导入 C、行内 D、链接

解析：优先级就是

行内样式>嵌入式样式>外部样式(链接)>@import 导入的方式

嵌入：

<head>
    <style>
        p { color: red; }
    </style>
</head>

导入：

@import url("styles.css");

行内

<p style="color: red;">这是一个段落。</p>

链接：

<head>
    <link rel="stylesheet" href="styles.css">
</head>

13、一个盒子宽度为100px， padding为 10px，边框为10px，请问这个盒子实际的宽度的是（B）。

A、130px B、140px C、150px D、160px

解析：朴实无华的计算：100+10（padding左边的10px）+10（padding右边的10px）+10（边框左边的10）+10（边框右边的10）=140.。

14、下面关于盒子的说法不正确的是（ B ）

A、margin属性的属性值可以是像素

B、margin属性不能同时设置四个边的外边距

C、整个body可以作为一个盒子

D、padding属性的属性值可以是百分比

解析：B包错的

div {
    margin: 10px 15px 20px 25px; /* 上、右、下、左 */
}

这么写不就设置四个边了吗

如果四个边外边距相同还可以写成：

div {
    margin: 10px; /* 四个边的外边距都为10px */
}

15、相对定位与绝对定位说法正确的是（ C ）。

A、他们都相对于浏览器窗口定位

B、他们的原始位置都会丢失

C、他们都脱离了文档流

D、他们都相对于其直接父元素定位

解析：

A、错，只有绝对定位（position: absolute）在没有其他定位上下文时，才相对于浏览器窗口定位。而相对定位（position: relative）是相对于其正常位置进行偏移。

B、错，相对定位（position: relative）的元素仍然占据原始位置，只是显示位置相对于原位置偏移。而绝对定位（position: absolute）的元素会脱离文档流，其原始位置不再占据空间

D、错错错，绝对定位（position: absolute）的元素是相对于最近的定位祖先元素（即非 static 的祖先元素）进行定位。如果没有这样的祖先元素，则相对于浏览器窗口定位。相对定位（position: relative）的元素是相对于其自身的正常位置进行偏移，而不是相对于父元素。

C、

这是正确的。绝对定位（position: absolute）的元素脱离了文档流，不再占据原始位置的空间。虽然相对定位（position: relative）的元素仍然占据原始位置的空间，但由于它们的显示位置偏移，可以认为它们的实际显示位置脱离了文档流。

相对定位示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .relative {
            position: relative;
            top: 20px;
            left: 20px;
            background-color: lightblue;
        }
    </style>
    <title>相对定位示例</title>
</head>
<body>
    <div class="relative">相对定位</div>
    <p>相对定位元素仍然占据原始位置的空间。</p>
</body>
</html>

绝对定位示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .absolute {
            position: absolute;
            top: 20px;
            left: 20px;
            background-color: lightcoral;
        }
    </style>
    <title>绝对定位示例</title>
</head>
<body>
    <div class="absolute">绝对定位</div>
    <p>绝对定位元素脱离文档流，不再占据原始位置的空间。</p>
</body>
</html>

16、以下哪个元素定义的下拉列表里的一个选项（ B ）。

A、select B、option C、value D、input

解析：

A、对于select，它是容器元素，包含一个或多个 <option> 元素。例如：

<select>
    <option value="1">选项1</option>
    <option value="2">选项2</option>
</select>

C、value 不是一个HTML元素，而是一个属性。它通常用在 <option>、<input>、<textarea> 和 <button> 等元素中，指定其值。例如：

<option value="1">选项1</option>

D、input用于定义不同类型的输入控件（如文本框、复选框、单选按钮等），但它不是用来定义下拉列表选项的。

<input type="text" name="username">

C、这就是单独的一个选项，从上面的select的示例代码当中我们也能看出他们之间的关系了。，甚至value和option的关系也能看出

17、在设置表格属性时，“100%的宽度”的意思是表格宽度为（C）

A、100像素 B、100厘米 C、始终占满浏览器窗口 D、固定值

解析：100%的宽度，意味着表格的宽度始终占满浏览器窗口的宽度，无论窗口大小如何变化。

18、( D )不是组成表格的最基本元素。

A、行 B、列 C、单元格 D、边框

解析：表格有行那就有列，AB排除，行和列就组成单元格了，C也排除

19、在JavaScript中，把字符串“123”转换为整型值123的正确方法是( C )。

A、 var str="123";var num=(int)str;

B、 var str="123";var num=str.parseInt(str);

C、 var str="123";var num=parseInt(str);

D、var str="123";var num=Integer.parseInt(str);

解析：parseInt将字符串转换成数字，所以A错，强制转换不是这么用的；B和D就是单纯的函数用错了。

20、Javascript代码：

var n=8;

var i = (++n)+(++n);

变量i的值是多少？（选19 ）

A、10 B、16 C、17 D、18

解析：第一次++n后n为9，第二次++n之后n为10，所以答案应该是19，然后我就去跑了一遍

21、下面有关数组叙述错误的是（ A ）

A、JavaScript数组中的元素默认索引从1开始，到length为止

B、push()可以想数组末尾添加多个元素。

C、pop可以删除数组最后一个元素。

D、JavaScript中的数组可以同时存储不同类型的数据。

解析：任何的数组的索引都是默认从0开始的好吧；其他都是对的

22、 Dom中，节点不包括（ D ）。

A、标签节点

B、属性节点

C、文本节点

D、符号节点

解析：Dom文档对象模型中，节点包括标签节点（元素节点）、属性节点、文本节点、注释节点；

所以直接选D了；定义问题，背；

23、在 DOM 对象模型中,下列选项中的 ( B ) 对象是 DOM 对象中最主要的对象。

A、history B、document C、button D、text

解析：DOM都叫文档对象了，那认定document为主要对象肯定没问题，它表示整个HTML或XML为文件，并且是访问和操作网页内容的入口点

24、以下是网页的页面元素的是( C )。

A、浏览器 B、用户界面 C、文字与图片 D、网页源文件

解析：网页的页面元素指的是实际显示在网页上的内容，浏览器是一个载体，排除，用户界面抽象了，排除；D、你在网页肯定不是为了看网页源文件的，也排除

所以最终只有文字和图片

基础知识（填空和判断的来源）

HTML ：HTML(Hypertext Markup Language)，超文本标记语言，HTML利用各种标记来标识文档的结构以及标识超链接的信息。它是从SGML(Standard Generalized Markup Language，标准通用标识语言)中的一个子集演变而来的。
超连接中，鼠标移上去，能浮现提示信息的属性是title.
列表可以分为无序、有序、自定义三类。
URL:统一资源定位器。每一个网页的唯一地址。
网页是由文字、图像、链接、多媒体等组成。
在谷歌浏览器中，默认的字体大小为16px。
OGG、AVI、MOV、MP4是一种视频格式。
在表格标签中， cellspacing属性用于设置单元格之间的间距；cellpadding属性用于设置文本与边框之间的间距。
表单是Web服务端和web客户端之间实现信息交流和传递的桥梁。
text-indent属性可用于设置段落文本缩进。
CSS代码根据书写位置的不同可以分为行内式、内嵌式、外链式三种。
CSS语法是由选择器、属性和值三部分构成。
外部样式表的引入使用link标签实现。
文本域中，textarea标签的rows属性表示文本区内的可见行数，cols属性表示文本区内的可见宽度。
无序列表、有序列表、定义列表间可以相互嵌套，但嵌套时不能交叉。
在定义单选按钮时，必须为同一组中的选项指定相同的name值，这样单选才会生效，也可以对单选按钮应用checked属性，指定默认选中项。
float属性可以设置top值。
固定定位是一种相对浏览器窗口发生便宜的定位方式。 ( )
CSS是Cascading Stylesheets的缩写，中文意思是层叠样式表。
在JavaScript中，typeof用于数据类型。
事件的三要素分别是事件源、事件类型和事件处理程序。
arguments是个比较特殊的对象，使用者无需明确指出参数名即可访问到它们。
事件句柄又称事件处理函数。
在HTML中，标记可以拥有多个属性。
图像可以作为超链接的起始对象。
在HTML中，常用li标签来承载导航栏二级菜单的内容。
JavaScript通过setTimeout_延迟指定时间后，去执行某程序。
JavaScript弹出对话框常用的三个命令alert()、 promot()、 confirm()。
在HTML页面上按下键盘上任意一个键时都会触发JavaScript的onkeyDown事件。
JavaScript是一门脚本语言，诞生于1995年。
HTML文档每个换行<br>都是一个文本节点。
在HTML DOM中，所有事物都是节点。DOM是被视为节点树的HTML

重要概念（简答）

1. 人机交互。

答：人机交互技术是指通过计算机输入、输出设备，以有效的方式实现人与计算机对话的技术。它包括机器通过输出或显示设备给人提供大量有关信息及提示请示等，人通过输入设备给机器输入有关信息及回答等，人机交互技术是计算机用户界面设计中的重要内容之一。它与认知学、人机工程学、心理学等领域有密切的联系。

2．前端的三次结构。

结构层：由HTML负责，负责搭建页面的结构

表示层：由CSS负责，负责页面的样式、布局等

行为层：由JavaScript负责，负责页面的交互效果。

3．CSS3选择器。

答：（1）标签选择器，也称元素选择器。其基本形式如下：tagName{property:value}，其中tagName是标签名称，property是css的属性。

（2）类选择器。是用来为一系列标签定义相同的呈现方式，常用的语法是 .classValue{property:value}。其中classValue是类选择器的名称，这是由css编写者自己命名。(所有浏览器都支持类选择器，但多类选择器(.className1.className2)不被ie6支持。)

（3）ID选择器。定义的是某一个特定的html元素，一个网页中只有一个标签或元素使用某一ID的属性值。其基本语法格式如下：#idValue{property:value}。其中idValue是ID选择器的名称，可以由CSS编写者自己编写。(所有浏览器都支持)

（4）全局选择器。即对所有的htmlz元素起作用。其语法格式为是 *{propery:value}。其中*表示对所有元素起作用，property表示css的属性，value表示属性值。

（5）复合选择器。将多种选择器进行搭配，可构成一种复合选择器，也称为组合选择器。

（6）继承选择器。是子标签在未定义的情况下，继承父标签的选择器;当子标签重复定义了父标签的声明时，执行子标签选择器。

（7）伪类选择器。主要应用在标签上，它有四种状态：未访问链接(link)、已访问链接(visited)、激活链接(active)、鼠标停留在连接上(hover)。

4. animation的概念及属性。

答：animation-name 指定要绑定到选择器的关键帧的名称，告诉系统需要执行哪个动画

animation-duration 动画指定需要多少秒或毫秒完成，告诉系统动画持续的时长

animation-timing-function 设置动画将如何完成一个周期，告诉系统动画执行的速度

linear 动画从头到尾的速度是相同的。

ease 默认。动画以低速开始，然后加快，在结束前变慢。

ease-in 动画以低速开始。

ease-out 动画以低速结束。

ease-in-out 动画以低速开始和结束。

cubic-bezier(n,n,n,n) 在cubic-bezier函数中自己的值。可能的值是从0到1的数值。

animation-delay 设置动画在启动前的延迟间隔。

animation-iteration-count定义动画的播放次数。即动画需要执行几次

n 一个数字，定义应该播放多少次动画

infinite 无限次往返执行

animation-direction 指定是否应该轮流反向播放动画。

normal 默认的取值, 执行完一次之后回到起点继续执行下一次

alternate 往返动画, 执行完一次之后往回执行下一次

reverse 反向执行

animation-fill-mode 规定当动画不播放时，要应用到元素的样式.

none: 不做任何改变

forwards: 让元素结束状态保持动画最后一帧的样式

backwards: 让元素等待状态的时候显示动画第一帧的样式

both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式

animation-play-state 告诉系统当前动画是否需要暂停

running: 执行动画

paused: 暂停动画。

5. 盒子模型。

答：（定义）盒子模型本质上是一个盒子，封装周围的HTML元素。它包含：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性（组成），分为标准模型和IE模型，标准模型的宽度不包括内边距，IE模型的宽度要包括内边距。

content：即实际内容，显示文本和图像；

border：即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色等组成；

padding：即内边距，即content域边框的距离区域，是透明的，取值不能为负，受盒子的background属性影响；

margin：即外边距，在元素外创建格外的空白，空白通常指不能放其他元素的区域。

6.外边距合并。

答：（1）相邻块元素垂直外边距的合并。当上下相邻的2个块元素相遇时，如果上面的标签有下外边距margin-button,下面的标签有上外边距margin-top,则它们之间的垂直间距。不是margin-button和margin-top之和，而是两者中的较大者这种现象。

（2）嵌套块元素垂直外边距的塌陷。对于两个嵌套关系（或父子关系）的块元素，父元素有上外边距，同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

7.外边距塌陷问题的解决办法

（1）相邻块元素垂直外边距的合并。

解决方案：尽量给一个盒子添加margin值。

（2）嵌套块元素垂直外边距的塌陷。

解决方案：

给父元素定义边框。

可为父元素定义上边距或上内边距。

可为父元素添加overflow:hidden。

其他方法：如浮动、固定，绝对定位等

8.几种定位方式

position：absolute、relative、fixed、static

绝对定位：是相对于其包含块进行定位的，包含块就是离当前元素最近且开启相对定位的祖先块元素

相对定位：是相对于元素本身的原始位置进行定位

固定定位：永远参照于浏览器的视口进行定位，固定定位的元素不会随着网页的滚动而进行滚动

9.浮动的清除方式。

（1）第一种方式:给父级盒子添加高度

//造成高度塌陷的原因就是父盒子没有高度

 .father {

        width: 100%;

        border: 2px solid red;

        height: 300px;

      }

（2）第二种方式:额外标签法

此法会在浮动元素末尾添加一个空标签。并给这个标签（必须是块级元素）设置clear属性。

  .clear {

        clear: both;

 }

（3）第三种方式：给父级添加 overflow 属性

此方法是向浮动元素的父级盒子添加overflow：hidden属性，这样可达到清除浮动的效果

.father {

        width: 100%;

        border: 2px solid red;

        overflow: hidden;

      }

（4）第四种方式:给父级添加after伪元素

.clearfix::after {

        content: "";/生成内容作为最后一个元素/

        display: block;/使生成的元素以块级元素显示,占满剩余空间/

        height: 0;/避免生成内容破坏原有布局的高度/

        clear: both;/清除浮动元素对当前元素的影响/

        visibility: hidden;/使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互/

      }

      .clearfix {

        *zoom: 1;

      }

10.表格的基本结构。

答：表格的基本结构如下：

<table>

       <tr>

<th></th>

<th></th>

…

</tr>

<tr>

<td></td>

<td></td>

…

</tr>

<tr>

</tr>

…

</table>

其中，table代表表格，td代表单元格，th表示表头，tr表示行。

11.单元格合并的步骤

(1)先确定是跨行还是跨列合并。

(2)找到目标单元格. 写上合并方式= 合并的单元格数量。比如:<td colspan=“2”></td>。

(3)删除多余的单元格。

12.表单的组成。

答：表单的三个核心元素分别为表单标签(form)、表单域(input)、表单按钮(button),具体说明如下:

表单标签:这里包含了处理表单数据所用的CGI程序的URL以及数据提交到服务器的方法。

表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的 CGI 脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。

13.JavaScript组成？

答：主要分为以下三种：

ECMAScript: 核心，即JavaScript代码的书写规范。

DOM : 文档对象模型，即让JavaScript有能力与网页进行对话（大小、位置、颜色等）

BOM : 浏览器对象模型，即让JavaScript有能力与浏览器进行对话（弹出框、控制浏览器跳转、获取分辨率等）。

14、函数调用的四种方式之间的区别？

答：直接调用：函数调用语句占单独一行，比较适合没有返回值的函数。

表达式调用：一般适用于有返回值的函数

在事件响应中调用：即在网页的页面加载、用户单击HTML元素、移动光标时通过调用js函数的方式来对产生的事件进行响应或处理。

通过链接调用：在HTML元素<a>标签的href属性的值可以是已定义的JS函数或JS代码。

像污秽一样

关注

23
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫