HTML5 试题解析（四）-CSDN博客

本文链接：https://blog.csdn.net/HAI6545/article/details/122012567

这是一份HTML5的考试题目集，包括单选题、多选题、填空题和简答题，涵盖了CSS样式、HTML标签、盒模型、CSS优先级等多个方面，旨在考察考生对HTML5及CSS的掌握程度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、单选题（共20题，每题2分）

1.下面选项中,可以设置页面中某个DIV标签当内容溢出的时候出现滚动条的是( )

A overflow:hidden

B display:block

C overflow:scroll

D display:scroll;

正确答案: C

解析:超出显示滚动条用的是overflow：auto或者scroll；

2.以下各选项描述正确的是( )

A 标题标签、段落标签、<span>标签都是块级元素

B <div>… …</div>标签是内联元素

C <div>标签可以包含于<p>标签中

D display属性可以控制块级元素和内联元素的显示方式

正确答案: D

解析:div是块元素 span是行内元素、p标签只能包行内元素和行内块元素

3.关于块状元素说法正确的是

A 块状元素在网页中是以块的形式显示,所谓块状就是元素显示为矩形区域,常用的块状元素包括div、img、input

B 块状元素都不会占据一行,通俗地说,两个相邻块状元素不会出现并列显示的现象,脱离文档流也不会

C 块状元素都不可以定义自己的宽度和高度

D 块状元素一般都作为其他元素的容器,它可以容纳其他内联元素和其他块状元素,我们可以把这种容器比喻为一个盒子

正确答案: D

解析:A项的img、input是行内块元素，B块元素会独占一行，它说不会是错的；C块元素可以定义自己的宽度和高度

4.以下哪个属性是属于盒模型里的属性?

A colspan

B border

C src

D valign

正确答案: B

解析:盒模型的组成部分是内容区、边框border、外边距margin、内填充padding

5.在HTML中,下面( )不属于HTML文档的基本组成部分

A <head></head>

B <body></body>

C <html></html>

D <sytyle></style>

正确答案: D

解析:HTML的基础组成部分 head body html

6.关于CSS优先级计算描述错误的是( )

A 如果优先级相同,则选择最后出现的样式

B 元素的优先级以最外层的为标准

C !important声明的样式优先级最高

D 继承得到的样式的优先级最低

正确答案: B

解析:CSS 优先规则1：最近的祖先样式比其他祖先样式优先级高。CSS 优先规则2："直接样式"比"祖先样式"优先级高。CSS 优先规则3：优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

7.我们想要让表格的边框在页面中一定不显示出来,用什么方法可以做到呢?( )

A bgcolor="white"

B bordercolor="white"

C border="1"

D border="0"

正确答案: D

解析:边框不显示，就是边框没有，border="0"；选项A，如果把页面的主色调更改的话仍然会显示

8.定义对象内第一行文本的样式的选择器是哪个

A ::after

B ::first-letter

C ::first-line

D ::before

正确答案: C

解析:

9.将鼠标样式为手型的属性是

A crosshair

B help

C pointer

D move

正确答案: C

解析:

10.以下关于透明度写法不正确的:

A opacity:0;

B opacity:100;

C opacity: 0.5;

D opacity: .5;

正确答案: B

解析:

11.以下关于:after伪类对象说法正确是

A :after 伪元素在元素内容之后添加内容

B :after 伪元素只能应用于超链接标签a

C 使用:after 伪元素可能导致浮动元素塌陷

D :after 不可以在元素之后添加指定链接的文件内容

正确答案: A

解析:

12.下面关于transition-delay的说法不正确的是

A transition-delay如果是0,那么可以省略不写

B transition-delay必须写在过渡的最后

C transition-delay是过渡的执行时间

D transition-delay是过渡的等待时间

正确答案: C

解析:

13.3D动画中,元素沿着X、Z轴旋转90deg的方法

A transform: scale3d(0,1,0,90deg);

B transform: scale3d(1,0,1,90deg);

C transform: rotate3d(0,1,0,90deg);

D transform: rotate3d(1,0,1,90deg);

正确答案: D

解析:

14.下面关于动画的说法正确的是

A 因为动画可以自动播放,所以不能放在hover里使用

B 动画一旦设置了无限循环播放就不能停止

C 不是所有的动画都支持正反交替播放

D 动画不用鼠标也能够使用

正确答案: D

解析:

15.在HTML中,关于下列代码说法错误的是 <a href="index.html" target="_blank">首页</a>

A 此标签用来创建一个超链接

B 目标窗口在当前窗口中打开

C 超链接的额连接地址是index.html

D 超链接的文字是"首页"

正确答案: B

解析:target="_blank"作用为在空白窗口打开

16.在CSS中,可用于设置文本的行高的属性是

A text-indent

B letter-spacing

C text-align

D line-height

正确答案: D

解析:text-indent：设置首行缩进 letter-spacing：设置字间距 text-align:设置文本水平对齐 line-height：设置行高，顾选D

17.下面选项中,可以设置页面中某个DIV标签相对页面水平居中的CSS样式是

A margin:0 auto

B padding:0 auto

C text-align:center

D vertical-align:middle

正确答案: A

解析:margin：0 auto；设置元素水平居中对齐。padding没有auto属性值，text-align是设置文本对齐方式的，vertical-align是设置垂直对齐方式的，所以选择A选项。

18.在CSS中ID选择器的权重是多少

A 100

B 10

C 1

D 0

正确答案: A

解析:ID选择符权重为0100

19.在HTML中引入css内部样式表使用

A style

B p

C link

D strong

正确答案: A

解析:内部样式表的语法 <style type="text/css"> </style>

20.下面关于外部样式表的说法错误的是

A 文件扩展名为 .cs

B 外部样式表内容不需要使用<style>标签

C 使用<link>标签引入外部样式

D 使用外部样式表可以使网站更加简洁,风格保持统一

正确答案: A

解析:文件扩展名为 .css

二、多选题(不定项选择)（共10题，每题2分）

1.隐藏元素的方法有

A overflow:hidden;

B display:none;

C visibility:hidden;

D display:hidden;

正确答案: B,C

解析:overflow:hidden;不是隐藏元素而是隐藏元素溢出的部分

2.如何让元素高度自适应?(父元素的高度由内容撑开)

A 给元素设置height:100%

B 给元素设置height:auto

C 高度不写

D 给元素设置height:content;

正确答案: B,C

解析:height:auto或者高度不写，父元素的高度由内容撑开

3.给元素设置透明度,可以用哪些方法设置,下面那个是正确的?(背景透明和元素透明都算)

A opacity:100;

B opacity:0.5;

C background:rgba(255,255,255,0.5);

D background:rgba(255,255,255,100);

正确答案: B,C

解析:opacity的取值为0-1，background：rgba（255,255,255,0.5）;rgba透明度取值为0-1，属性之间;隔开

4.以下选项中是position定位的属性值的选项有哪些

A static

B auto

C fixed

D relative

正确答案: A,C,D

解析:auto不是position的值

5.以下哪些为行内元素(内联元素)元素?

A a

B i

C span

D table

正确答案: A,B,C

解析:table不是行内元素

6.能够触发元素改变成块级元素的方法是

A float:left

B float:none

C position:absolute

D position:fixed

正确答案: A,C,D

解析:

7.下列设置边框线border的属性有

A border-style

B border-width

C border-size

D border-color

正确答案: A,B,D

解析: border为复合属性，由border-width,border-style,border-color组成

8.选出你认为最合理的定义标题的方法

A <span class=""heading"">文章标题</span>

B <h2>文章标题</h2>

C <h3>文章标题</h3>

D <strong>文章标题</strong>

正确答案: B,C

解析:h1-h6文本标题标签

9.下列属于input标签的属性有

A name

B selected

C rows

D value

正确答案: A,D

解析:AD

10.以下属于css中的控制文本或字体的属性有:

A float

B margin

C color

D font-weight

正确答案: C,D

解析:color文本颜色 font-weight文本加粗

三、填空题（共10题，每题2分）

1.margin的重叠的是怎样造成的

正确答案:(1) 当两个元素垂直排列,第一个元素设置margin-bottom,第二个设置margin-top,这两个值会合并为较大的值,而不会相加

解析:

2.有两个div标签,第一个div设置margin-bottom:30px,第二个div设置margin-top:30px,那么两个div之间的距离是多少:

正确答案:(1) 30px

解析:

3.给元素设置了定位,不会影响原来的页面布局

正确答案:(1) position:relative

解析:

4.利用 css属性改变元素的定位方式

正确答案:(1) position

解析:

5.如果视口宽度是750, 100vw = .

正确答案:(1) 750px

解析:

6.媒体查询的关键字是?

正确答案:(1) @media

解析:

7.火狐浏览器transform兼容写法是

正确答案:(1) -moz-transform

解析:

8.写出css3新增的属性选择器

正确答案:
(1) E[arr*="value"];E[arr^="value"];E[arr$="value"]

解析:

9.HTML5中属性可以实现类似历史记录功能;

正确答案:(1) autocomplete

解析:

10.表格标题标签;表格列标题标签

正确答案:(1) <caption></caption>(2) <th>

解析:

四、简答题（共1题，每题10分）

1.一个100*100的块级元素,执行transform: rotate(45deg) translate(100px, 100px);和transform: translate(100px, 100px) rotate(45deg) ;最后的显示结果一样吗?解释说明一下为什么?

正确答案:不一样，当旋转45度后，元素的整个坐标系都旋转了45度

解析:

五、编程题（共1题，每题10分）

1.写出三栏布局,左侧固定宽度100px,右侧固定宽度200px,中间宽度自适应浏览器窗口

正确答案:

<div class="div">
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="center">center</div>
</div>
<style>
html,body{
height:100%
}
.div{
height:100%
}
.left{
width:100px;
bgckground:#000;
float:left
}
.right{
width:200px;
background:red;
float:right;
}