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

男娘i 2022-01-07 07:05 2136阅读 0赞

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

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共提供了６级标题，`<h1>`字号最小，`<h6>`字号最大  
B 段落标签`<p>`中可以包含多行文字，文字内容将随浏览器窗口大小自动换行  
C 水平线标签`<br/>`的作用是为了让版面更加清晰直观  
D 标签`<em>……</em>`的作用是使字体加粗并斜体显示  
正确答案: B  
解析:  
HTML共提供了６级标题，`<h1>字号最大，<h6>字号最小`  
水平线标签为`<hr/>`  
标签`<em>……</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  
解析:  
内部样式表的语法

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.如下代码

![Image 1][] ![Image 1][]

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

[Image 1]: