绪论 单元测试

1、判断题:
设计网页既要合理安排内容,又要美观精致,在前端开发中页面布局总是最开始的工作。( )。A.1B.2C.3D.4
选项:
A:错
B:对
答案: 【

2、单选题:
下列那个不是语义化标签( )。
选项:
A:header
B:aside
C:nav
D:Top
答案: 【Top

3、多选题:
可以包含在 HTML 网页 head 标签中的有( )。
选项:
A:<meta>
B:<script>
C:<div>
D:<title>
答案: 【<meta>;
<script>;
<title>

4、单选题:
如何利用CSS为所有的<h1>元素添加背景颜色?( )
选项:
A:h1{background-color:#FFFFFF}
B:all.h1{background-color:#FFFFFF}
C:h1 background-color:#FFFFFF
D:h1.all{background-color:#FFFFFF}
答案: 【h1{background-color:#FFFFFF}

5、单选题:
CSS中的注释为( )。
选项:
A:/* */
B:<% %>
C:<!-- -->
D://
答案: 【/* */

第一章 单元测试

1、单选题:
在这一章节中一共将整体布局分为了( )部分( )。
选项:
A:4
B:2
C:1
D:3
答案: 【4

2、单选题:
CSS 中 position 属性用于设置HTML元素定位,以下哪项用于绝对定位( )。
选项:
A:relative
B:absolute
C:fixed
D:static
答案: 【absolute

3、多选题:
<li>标记可以被设置的CSS属性有( )。
选项:
A:padding
B:height
C:margin
D:width
答案: 【padding;
height;
margin;
width

4、判断题:
【display:inline-block】和【float:left】在实际使用时没有区别。( )
选项:
A:错
B:对
答案: 【

5、判断题:
通过鼠标指针移动到指定位置然后显示弹窗的操作是通过伪类选择器【:active】实现的。( )
选项:
A:错
B:对
答案: 【

6、多选题:
雪碧图(Sprite)是一种网页图像优化的技术,对它描述正确的有( )
选项:
A:通过 position 属性来显示所需的图像部分
B:主要用于减少网页加载时间
C:这种方法可以减少HTTP请求的次数
D:将多个小图像合并到一个较大的图像文件中
答案: 【主要用于减少网页加载时间;
这种方法可以减少HTTP请求的次数;
将多个小图像合并到一个较大的图像文件中

7、单选题:
想要让文本内容剧中则应该使用以下哪个CSS设置( )
选项:
A:text-align: right;
B:text-align: center;
C:text-align: left;
D:text-align: middle;
答案: 【text-align: center;

8、单选题:
如果只对 <img>标记设置 width属性则( )。
选项:
A:图片只改变宽度
B:图片的高度会等比改变
C:图片因为改变宽度不显示
D:图片没有变化
答案: 【图片的高度会等比改变

9、判断题:
border-radius 属性用于设置元素边框圆角( )。
选项:
A:错
B:对
答案: 【

10、单选题:
【margin:0px 10px 20px 30px】其中10px 用于设置 ( )
选项:
A:设置右侧外边距 10 像素
B:设置顶部外边距 10 像素
C:设置顶部内边距 10 像素
D:设置右侧内边距 10 像素
答案: 【设置右侧外边距 10 像素

11、判断题:
【z-index】属性用于控制元素的层叠顺序,它设置的值越高显示的优先级越低( )
选项:
A:错
B:对
答案: 【

12、判断题:
默认情况下<span>标记可以设置宽度和高度属性( )
选项:
A:对
B:错
答案: 【

13、单选题:
本章节中鼠标悬停在“更多”时显示更多区域是通过哪个伪类选择器( )
选项:
A::active
B::hover
C::visited
D::link
答案: 【:hover

14、判断题:
本章节中“百度热搜”和“关于百度”在鼠标指针悬停时变色的CSS工作原理是一样的:( )
选项:
A:错
B:对
答案: 【

15、单选题:
“搜索框”输入搜索内容的标记使用的是:( )
选项:
A:<input>
B:<p>
C:<span>
D:<div>
答案: 【<input>

第二章 单元测试

1、单选题:
以下哪个属性用于设置弹性容器的主轴方向?( )
选项:
A:flex-direction: row;
B:flex: 1;
C:display: flex;
D:order: 1;
答案: 【flex-direction: row;

2、单选题:
关于 flex: 1; 的含义,以下哪项正确?( )
选项:
A:禁止子项收缩
B:等同于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%;
C:弹性子项按 1:1 的比例分配剩余空间
D:弹性子项宽度固定为 1px
答案: 【等同于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%;

3、多选题:
以下哪些属性可以改变弹性项的视觉顺序?( )
选项:
A:align-items: center
B:order: 1
C:flex-wrap: wrap
D:flex-direction: row-reverse
答案: 【order: 1;
flex-direction: row-reverse

4、单选题:
<video> 标签中的 controls 作用描述正确的是:( )
选项:
A:用于隐藏视频播放器控件,使界面更简洁
B:用于自定义视频播放器的样式和功能
C:用于显示默认的视频播放器控件(如播放/暂停、进度条、音量等)
D:用于禁用视频的自动播放功能
答案: 【用于显示默认的视频播放器控件(如播放/暂停、进度条、音量等)

5、单选题:
video 标签中的 autoplay 作用描述正确的是?( )
选项:
A:静音状态下自动播放视频
B:自动循环播放视频
C:视频加载后自动开始播放
D:自动加载视频但不播放
答案: 【视频加载后自动开始播放

6、判断题:
:nth-child() 只能用于<li>元素。 ( )
选项:
A:错
B:对
答案: 【

7、判断题:
:nth-child(odd) 会选择所有偶数位置的子元素。 ( )
选项:
A:错
B:对
答案: 【

8、判断题:
Bootstrap的巨幕(Jumbotron)是一个轻量级、灵活的组件,用于突出显示页面上的重要内容(如标题、简介等),通常以灰色背景和大内边距呈现,起到视觉聚焦的作用。 ( )
选项:
A:对
B:错
答案: 【

9、判断题:
在 Bootstrap 中,要让图标持续旋转,可以使用 class="spinner"(适用于加载动画)或 class="spin"(部分版本支持)。但更通用的方法是使用 class="bi-arrow-repeat spin" 或直接引入 CSS 动画。 ( )
选项:
A:错
B:对
答案: 【