HTML、CSS基础题、练习题、面试题三

1.两个上下排列的div元素。上面的div设置margin-bottom:130px;下面的div设置margin-top:50px; 那么这两个之间的间距为()
A 180px
B 130px
C 50px
D 80px
正确答案: B
解析:
bfc排版逻辑规定。同属一个bfc里面的两个相邻的子元素上下之间的margin值会按照最大值去设置

2.将鼠标样式为手型的属性是( )
A crosshair
B hand
C pointer
D move
正确答案: C
解析:
Cursor : pointer
pointer为兼容性属性值。hand属性值在高版本浏览器中是不解析的

3.图片间隙bug的解决方法是?( )
A 为img设置准确的宽高
B 为父元素添加overflow:hidden
C 父元素添加float:left;
D 为img 设置display : block;
正确答案: D
解析:
img标签的问题:在图片的默认情况下,img和文本一样,会在下方产生大约3像素的间距。这样把图片转成块状元素能解决此问题

4.以下哪些元素默认不带有边框: ( )
A fieldset
B table
C input
D 都不带边框
正确答案: B
解析:
html元素中,有默认边框的是fieldset,input,textarea,select,iframe等

5.设置弹性子元素缩小比例的属性是?( )
A flex-small
B flex-big
C flex-shrink
D flex-grow
正确答案: C
解析:
flex-small:无此属性,flex-big:无此属性,flex-shrink:弹性子元素缩小比例,flex-grow:子元素所占剩余空间比例

6.以下对order属性描述正确的是?( )
A 数值越小,排列越靠前
B 数值越大,排列越靠前
C order可以改变HTML结构顺序
D 以上描述都不正确
正确答案: A
解析:
数值越小,排列越靠前

7.align-items设置弹性盒子元素在侧轴居中属性值是?( )
A stretch
B flex-end
C center
D flex-start
正确答案: C
解析:
stretch侧轴中拉伸,flex-end弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界,center弹性盒子元素在该行的侧轴(纵轴)上居中放置,flex-start弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界

8.flex-direction设置子元素横向排列的属性是( )
A row
B row-rerse
C column
D column-reverse
正确答案: A
解析:
row横向排列,row-reverse横向翻转,column纵向排列,column-reverse纵向排列翻转

9.rgba 颜色模式中的a表示什么?( )
A a表示色调
B a表示饱和度
C a表示亮度
D a表示透明度
正确答案: D
解析:
a表示透明度

10.不属于Background-clip的属性值是?( )
A border-box
B padding-box
C content-box
D margin-box
正确答案: D
解析:
margin-box
background-clip 属性规定背景的绘制区域

11.盒子的阴影属性?( )
A text-shadow
B box-shadow
C shadow-box
D shadow-text
正确答案: B
解析:
box-shadow

12.从网页优化的角度上说,img标签必不可少的属性是()
A alt
B tiltle
C src
D 以上都是
正确答案: A
解析:
注意是网页优化的角度

13.单元格标题是()
A <title></title>
B <th></th>
C <caption></caption>
D <tr></tr>
正确答案: C

CSS是利用XHTML标签( )构建网页布局?
A
B


C

D
正确答案: B
解析:
div常用的布局标签

15.IE浏览器使用的内核是什么?( )
A Trident
B Gecko
C Presto
D Webkit
正确答案: A

16.关于表格的数据分组标签,说法正确的是 ( )?
A <thead><tbody><tfoot>分别表示表头,表格数据主体,表格尾部
B <thead>必须包含<th>表头标签
C <thead><tfoot>标签只能包含一行数据
D <thead><tbody><tfoot>由行组成,所以一般不包含<tr>标签
正确答案: A

17.以下属性写法不正确的有: ( )?
A padding:-10px;
B padding:10px;
C margin:10px
D margin:-10px;
正确答案: A
padding没有负值
18.下面的描述正确的是( )? <style type="text/css"> #menu{font-size:14px;} </style>
A menu是标签选择器
B menu是元素选择器
C menu是类选择器
D menu是ID选择器
正确答案: D

19.在HTML中,下面( )不属于HTML文档的基本组成部分?
A <head></head>
B <body></body>
C <html></html>
D <style></style>
正确答案: D

20.以下关于HTML当中常用的基本标签说法正确的是
A HTML共提供了6级标题,<h1>字号最小,<h6>字号最大
B 段落标签<p>中可以包含多行文字,文字内容将随浏览器窗口大小自动换行
C 水平线标签<br/>的作用是为了让版面更加清晰直观
D 标签<em>&hellip;&hellip;</em>的作用是使字体加粗并斜体显示
正确答案: B
解析:
HTML共提供了6级标题,<h1>字号最大,<h6>字号最小
水平线标签为<hr/>
标签<em>&hellip;&hellip;</em>的作用是使字体斜体并不能加粗

21.下列哪个属性是表格里合并单元格的间距属性
A cellspacing
B cellpadding
C rowspan
D colspan
正确答案: A
解析:
cellspacing单元格与单元格之间的间距
cellpadding 单元格与内容之间的间隙
rowspan 合并单元格行数
colspan 合并单元格列数

22.在HTML中,在网页中创建表单用
A input
B select
C table
D form
正确答案: D
解析:
form表单域
input,select为表单元素
table为表格标签

23.在HTML中引入css内部样式表使用
A style
B p
C link
D strong
正确答案: A
解析:
内部样式表的语法

<style  type="text/css">

</style>

24.下列css属性中,用于指定背景图片的是
A background-color
B background-image
C background-position
D background-repeat
正确答案: B
解析:
background-color 设置背景色属性,
background-image添加背景图属性,
background-position 设置背景图位置属性,
background-repeat 设置平铺属性。顾选择B

25.以下关于HTML中段落标签的说法错误的是
A 段落标签<p></p>可以成对出现,也可以单独出现在页面中。
B 一个段落中可以包含一行文字
C 一个段落中可以包含多行文字
D 如果一个段落中包含多行文字,文字内容将随浏览器窗口的大小自动换行
正确答案: A
解析:
p标签为常规标记,必须成对出现

26.在网页中有一个id为content的div,设置它的宽度为200像素,高度为100像素,并且向左浮动, 以下选项正确的是?
A #content{width:200px;height:100px;float:left;}
B #content{width:100px;height:200px;clear:left;}
C #content{width:200px;height:100;clear:left;}
D #content{width:100px;height:200px;float:left;}
正确答案: A
解析:
id的语法为#,宽度width高度height浮动float

27.关于背景图和img的说法正确的是
A 背景图和img一样,都是在网页中占空间的
B 背景图的显示需要根据其所在元素的区域显示
C 背景图和img都属于对页面样式的渲染
D img标签在页面中和背景图都是不占据空间的
正确答案: B
解析:
背景图属于css样式、img属于html结构。

28.在HTML中,将表单中input元素的TYPE属性值设置为什么,用于创建重置按钮
A set
B reset
C text
D button
正确答案: B
解析:
<input type="reset" />重置按钮

30.下面选项中( )可以设置网页中某个标签的右外边距为10像素?
A margin:0 10px;
B margin:10px 0 0 0;
C margin:0 10px 0 0px;
D padding-right:10px;
正确答案: C

二、多选题(共20题,每题2分)
得分:0分
1.表单验证中h5新增的属性有 ( )
A href
B autocomplete
C action
D novalidate
正确答案: B,D
解析:
h5新增属性:
autocomplete
autofocus
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max 和 step
multiple
pattern (regexp)
placeholder
required

2.关于盒子阴影的说法正确的是()
A 阴影可以添加内阴影,只需要加属性值inset即可
B 阴影大小是不占物理位置的
C 阴影大小是占物理位置的
D 阴影是css3新增属性,在老版本的浏览器中不兼容
正确答案: A,B,D
解析:
因为阴影大小是不占物理位置的,所以C项错误

3.以下关于弹性布局说法正确的是()
A 弹性布局什么浏览器都兼容
B 弹性布局非常适合书写移动端
C 弹性布局属于css2 版本
D 弹性父元素只能影响子元素,无法影响所有的后代元素
正确答案: B,D
解析:
弹性布局属于css3 只兼容高版本浏览器

4.关于网页优化的做法正确的是()
A 结构与样式分离
B 在写超链接时尽量使用纯文本,不要使用图片热点链接
C 在写超链接时尽量不要使用纯文本,使用图片热点链接
D 图片越大越清晰,所有图片越大越好
正确答案: A,B
解析:
优化网页需要机构样式分离 存文本超链接搜索引擎越喜欢 图片大小适中最好 越大打开页面越慢

5.关于背景的说法正确的是( )
A css3 背景可以设置多个
B 背景图大小是css2的属性
C 渐变属于背景的一种
D css3 背景图可以设置显示区域
正确答案: A,C,D
解析:
ACD

6.overflow属性的属性值有哪些()
A hidden
B visible
C scroll
D auto
正确答案: A,B,C,D
解析:
overflow属性的属性值有:hidden、visible、scroll、auto;选择A、B、C、D

7.以下哪些元素是置换元素()
A input
B a
C span
D img
正确答案: A,D
解析:
置换元素元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,且display值为inline-block,input和img的display的属性值都为inline-block,选A、D
得分:0分
8. z-index结以下哪些选项一起使用有效()
A position:absolute
B position:fixed
C position:static
D position:relative
正确答案: A,B,D
解析:
定位position的属性值一共有四个,position:absolute、绝对定位,position:fixed、固定定位,position:relative相对定位都可以设置z-index属性

9.以下不是伪元素选择符的选项是()
A :first-letter
B :hover
C :focus
D :link
正确答案: B,C,D
解析:
CSS2中的伪元素大家以前看过::first-line,:first-letter,:before,:after;那么在CSS3中,他对伪元素进行了一定的调整,在以前的基础上增加了一个“:”也就是现在变成了“::first-letter,::first-line,::before,::after”另外他还增加了一个“::selection”,题目中问的不是伪元素选择符,所以选择BCD。

10.下面选项中对替换元素描述正确的是()
A 元素本身拥有固有尺寸,宽度,高度,宽高比
B 都带有边框
C 浏览器根据元素的属性,来决定元素的具体显示内容
D 元素会将内容直接表现给用户端
正确答案: A,C
解析:
替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。替换元素是其内容不受CSS视觉格式化模型控制的元素,也叫置换元素,浏览器会根据元素的标签类型和属性来显示这些元素。替换元素也在其显示中生成了框。所以,替换元素通常有其固有的尺寸:一个固有的宽度,一个固有的高度和一个固有的比率例如img , input , textarea , select , object都是替换元素 ,所以选择AC
得分:0分
11.以下选项中,语法正确的是()
A div:after{content:”xxx”}
B div:before{content:url(./img/1.jpg)}
C div:first-letter{display:block;}
D div::active{color:#f00}
正确答案: A,B,C
解析:
:after 与content属性一起使用,定义在对象后的内容,如果对象的内容引入的图片可以不需要添加双引号。
:before 与content属性一起使用,定义在对象前的内容,如果对象的内容引入的图片可以不需要添加双引号。
:first-letter 定义对象内第一个字符的样式,注:该伪元素只能用于块元素
:first-line 定义对象内第一行的样式,注:该伪元素只能用于块元素,ie6以下版本浏览器不支持伪对象选择符,CSS2中的伪元素大家以前看过::first-line,:first-letter,:before,:after;那么在CSS3中,他对伪元素进行了一定的调整,在以前的基础上增加了一个“:”也就是现在变成了“::first-letter,::first-line,::before,::after”另外他还增加了一个“::selection”。选择项D,active是伪类选择器
伪类选择器只有一个冒号,不存在双冒号的写法。所以最终的答案是ABC。

12.以下属于css中的控制文本或字体的属性有:
A float
B margin
C color
D font-weight
正确答案: C,D
解析:
color文本颜色 font-weight文本加粗

13.属于表格元素的有
A table
B hr
C select
D tr
正确答案: A,D
解析:

14.下列可以设置内容大小写的属性有
A text-transform
B word-spacing
C text-indent
D font-variant
正确答案: A,D
解析:

15.下列css选择器的优先级正确的有
A id:0100
B class:0001
C 标记选择器:0010
D class:0010
正确答案: A,D
解析:

16.下列属于input标签的属性有
A name
B selected
C rows
D value
正确答案: A,D
解析:

17.<a>的伪类选择符不包括
A a:link
B a:onfouce
C a:visited
D a:onclick
正确答案: B,D
解析:

18.关于样式表的优先级说法正确的是
A 直接定义在标记上的css样式级别最高
B 内部样式表次之
C 外部样式表级别最低
D 同一个选择器中,设置样式时,设置相同的属性,后设的属性值起作用
正确答案: A,D
解析:
样式表优先级
得分:2分
19.块状元素的特征有哪些()
A 可以设置宽度和高度
B 一般作为容器使用
C 此元素会独占一行,自动换行
D 默认情况下,可以和其他标签在一行内逐个显示
正确答案: A,B,C
解析:
块状元素的特征有:可以设置宽度和高度,一般作为容器使用,此元素前会独占一行,自动换行;选择A、B、C

20.如下代码

两张图片之间会产生左右间距,如何解决()
A *{padding:0;margin:0;}
B img{overflow:hidden;}
C img{float:left}
D img的html代码不换行
正确答案: C,D
解析:
默认情况下img的display的属性值为inline( inline-block ); 两张图片之间会产生间距
解决方法:
给图片转成块状元素然后添加浮动
图片之间不存在回车键

猜你喜欢

转载自blog.csdn.net/ZHANGJIN9546/article/details/93622185