HTML5考试题（三）

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

1.以下哪个选择器可以对HTML根元素进行选择

A:root

B:empty

C.html

D#html

正确答案: A

解析:

2.图片间隙bug的解决方法是?

A为img设置准确的宽高

B为父元素添加overflow:hidden

C父元素添加float:left;

D为img设置display:block;

正确答案: D

解析:

3.以下关于div+p选择符说法正确是

A选择div里面的所有子元素p 标签

B选择紧位于div同级元素下的最近的p标签

C选择div的同级元素的所有的p标签

D选择div的父级元素p标签

正确答案: B

解析:

4.默认情况下1REM等于多少像素?

A20px

B12px

C16px

D9px

正确答案: C

解析:

5.以下关于div[class^="left"]说法正确是

A选择class的属性值带有left的所有div

B选择class的属性值中以left开头的div

C选择class的属性值中以left结束的div

D选择class的属性值中不带有left的div

正确答案: B

解析:

6.box-sizing 不包括

Acontent-box

Bborder-box

Cpadding-box

D以上都包括

正确答案: C

解析:

7.align-self设置弹性元素自身在侧轴居中的位置的属性值是?

Acenter

Bflex-middle

Cflex-center

Dmiddle

正确答案: A

解析:

8.以下对order属性描述正确的是

A数值越小,排列越靠前

B数值越大,排列越靠前

Corder可以改变HTML结构顺序

D以上描述都不正确

正确答案: A

解析:

9.align-items设置弹性盒子元素在侧轴居中属性是

Astretch

Bflex-end

Ccenter

Dflex-start

正确答案: C

解析:

10.CSS3结构性伪类选择器选择其父元素的首个子元素

AX:first-child

BX:nth-last-child(1)

CX:only-child

DX:nth-child(1)

正确答案: A

解析:

11.下面不是video标签支持的视频格式

Amp4

Bavi

Cogg

DwebM

正确答案: B

解析:

12.在div中插入img标签之后,默认状态下会有什么问题呢

A没有任何问题

B会把父元素高度撑大3~6像素

C会把父元素宽度撑大

D会把父元素宽度和高度都撑大

正确答案: B

解析:

13.关于BFC的规则的说法不正确的是

A子元素不会影响到外面的元素

BBFC计算高度时,浮动元素也参与计算

CBFC的区域与浮动区域重合

DBFC内部的Box会在垂直方向,一个接一个的放置.

正确答案: C

解析:

14.以下不属于H5标签的是

Aaside

Bthead

Carticle

Dsection

正确答案: B

解析:

15.表格边框合并的属性是

Aborder-spacing

Bborder-collapse

Ctable-layout

正确答案: B

解析:

16.以下哪些条件可以触发BFC

A将元素转换成display:inline-block或table-cell

B设置元素的position属性,任何属性值都可以

C设置元素的overflow属性,任何属性值都可以

D元素设置宽度高度及边框就可以

正确答案: A

解析:

17.下面关于过渡说法正确的是

A过渡animation需要鼠标的触发

B过渡transition不需要鼠标的触发

C过渡transition需要鼠标的触发

D过渡animation不需要鼠标的触发

解析:

18.下面哪一个才是正确的过渡

Atransition:all .5s;

Btranslate:all .5s;

Ctransform:all .5s;

Dtransform:translate(all .5s);

正确答案: A

解析:

19.下面哪个属性是不支持过渡的

Acolor

Bheight

Cmargin

Ddisplay

正确答案: D

解析:

20.下面选项中表示径向渐变的为

Aradial-gradient

Bgradient-radial

Clinear-gradient

Dgradient-linear

正确答案: A

解析:

21.以下选项中书写正确的是

Abackground-image:-webkit-linear-gradient(to top,red,yellow)

Bwebkit-background-image:linear-gradient(to top,red,yellow)

Cbackground-image:-mos-linear-gradient(to top,red,yellow)

Dmos-background-image:linear-gradient(to top,red,yellow)

正确答案: A

解析:

22.下面3D变形的写法错误的是

Atransform: translate3d(100px,100px,300px);

Btransform: rotate3d(0,1,0,90deg);

Ctransform: scale3d(1,2,1);

Dtransform: skew3d(30px,45px,60px);

正确答案: D

解析:

23.下面哪个是径向渐变的正确书写

Abackground:linear-gradient(circle,#ff0,#0f0)

Bbackground:video-gradient(circle,#ff0,#0f0)

Cbackground:redio-gradient(circle,#ff0,#0f0)

Dbackground:radial-gradient(circle,#ff0,#0f0)

正确答案: D

解析:

24.下面选项中哪个可以使元素向右移动

Amargin-right:-200px;

Bright:200px;

Ctransform:translate(200px);

Dleft:-200px;

正确答案: C

解析:

25.3D变形不包含以下哪个选项

Askew

Btranslate

Cscale

Drotate

正确答案: A

解析:

26.实现元素水平向右移动的语句是

Atransform:translateY(-100px)

Btransform:translateX(-100px)

Ctransform:translate(100px)

Dtransform:translate(-100px)

正确答案: C

解析:

27.下面关于变形说法错误的是

Atranslate(100px,0)表示元素水平位移100px

Brotate(30deg)表示绕着中心点顺时针旋转30度

Cscale(2)表示元素放大2倍

Dskew(30deg)表示的X轴缩放

正确答案: D

解析:

28.下面哪个是定义逆时针旋转30度的正确写法

Arotate:30deg

Britate:-30deg

Ctransform:rotate(30deg)

Dtransform:rotate(-30deg)

正确答案: D

解析:

29.下面关于动画和过渡的说法正确的是

A动画没有延时属性

B过渡没有延时属性

C动画过渡都有延时属性

D过渡动画都没有延时属性

正确答案: C

解析:

30.动画是通过哪个属性来定义的

Amedia

Banimation

Cfontface

Dkeyframes

正确答案: D

解析:

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

1.以下可以将图片设置为圆形的有

Aborder-radius:50%

Bborder-radius:100%;

Cborder-radius:0;

Dborder-radius:none;

正确答案: A,B

解析:border-radius 设置半径 50% 100%都能设置为正圆

2.如何设置弹性盒子某个子元素在侧轴的对齐方式

Aalign-items:flex-start;

Balign-self:flex-start;

Calign-content:flex-start;

Djustify-content:flex-start

正确答案: B

解析:align-self

3.以下设置不正确的有

Apadding:-10px;

Bmargin-top:-10px;

Cz-index:-1;

Dtext-shadow:5px -5px -5px gray;

正确答案: A,D

解析:

4.以下设置能实现沿x轴旋转90度的有

Atransform:rotateX(90deg)

Btransform:rotate3d(1,0,0,90deg)

Ctransform:rotate(90deg)

Dtransform:rotatex(90deg);

正确答案: A,B,D

解析:

5.如何让一个宽为1000px的div在浏览器中水平居中

Adiv{margin:0 auto;}

B.body{display:flex; justify-content:center;}

C.body{text-align:center;}

Ddiv{text-align:center;}

正确答案: A,B

解析:

6..当给父元素设置了display:flex;后,子元素的哪些属性会失效

Afloat

Bclear

Cvertical-align

Dtext-align

正确答案: A,B,C

解析:

7.阅读下面HTML代码,若要使<dt>和<dd>标签在同一行显示,下面选项中的CSS书写正确的是( ). <dl> <dt>用户名:</dt> <dd><input type="text" name="userName" /></dd> </dl>

Adl dt { float:left;｝

Bdl dd { float:left;｝

Cdl dt, dl dd { float:left;｝

Ddl { display:inline;｝

正确答案: C

解析:

8.在html中,以下关于css样式中文本属性的说法,正确的是

Afont-size用来设置文本字体的大小

Bfont-family用来设置文本字体的类型

Cfont-color 用来设置文本字体的颜色

Dtext-align 用来设置文本的水平对齐方式

正确答案: A,B,D

解析:

9.网页中常见的三种图片格式为

Ajpg

Bpng

Cgif

Dpsd

正确答案: A,B,C

解析:

10.以下哪些设置可以去掉边框

Aborder:0

Bborder:no;

Cborder:none

Dborder:hidden;

正确答案: A,C

解析:

11.如何设置盒模型为怪异盒模型

Abox-sizing:border-box;

Bbox-sizing:content-box;

Cbox-sizing:padding-box;

Dbox-sizing:none

正确答案: A

解析:

12.以下设置背景图片不会发生变形的有

Abackground-size:100% 100%;

Bbackground-size:cover;

Cbackground-size:100%;

Dbackground-size:contain;

正确答案: B,D

解析:

13.关于盒模型的描述,正确的是

A标准盒模型的总宽度=width+左右padding+左右border+左右margin

B标准盒模型的总宽度=width+左右margin

C怪异盒模型的总宽度=width+左右padding+左右border

D怪异盒模型的总高度=height+上下margin

正确答案: A,D

解析:

14.css3背景属性background-size的哪个值既不会被裁切也不会变形

Acover

Bcontain

C100% auto

D100% 100%

正确答案: B

解析:

15.以下哪些是H5能支持的视频文件格式

Awebm

Bogg

CMPEG4

Davi

正确答案: A,B,C

解析:

16.以下代码 <div class="a"></div> <div class="b"></div> 其中css中定义如下 .a{width: 200px;height: 200px;background-color: #f00;float: left;} .b{width: 300px;height: 300px;background-color: #ff0;overflow: hidden;}

A两个盒子会发生重叠

B元素a在元素b上方

C两个元素不会重叠

D两个元素将左右排列

正确答案: C,D

解析:

17.以下能使表格实现偶数列变色的是

Atr:nth-child(2n){ }

Btr:nth-child(2n+1){ }

Ctr:nth-child(even){ }

Dtr:nth-child(odd){ }

正确答案: A,C

解析:

18.以下属于表格行分组的是

Acolgroup

Bthead

Ctbody

Dtfoot

正确答案: B,C,D

解析:

19.以下选项中的伪元素选择符有

A:active

B::after

C:visited

D::before

正确答案: B,D

解析:

20.css3中transform的可选属性值有哪些?

Atransition

Brotate

Ctranslate

Dscale

正确答案: B,C,D

解析: