html ,css基础题、练习题、面试题(1)

布满荆棘的人生 2022-10-02 10:51 1088阅读 0赞

1.下列哪个是HTML中的空格字符  
A div B p C b D    
正确答案: D  
解析:  
div 文档布局对象  
p 段落  
b 加粗  
  空格  
2.从优化的角度来说以下哪个img属性是优化比较好的  
A width B border C alt D height  
正确答案: C  
解析:  
alt为替换文本,当图片不显示的时候才会出现。也被称作图片名，方便SEO搜索  
3.在HTML中，使用标签插入图像，下列选项关于的src属性说法正确的是  
A 用来设置图片文件的格式  
B 用来设置图片文件所在的位置  
C 用来设置鼠标指向图片时显示的文字  
D用来设置图片周围显示的文字  
正确答案: B  
解析:

4.在HTML中,若实现点击超链接时,弹出一个新的网页窗口,下列的哪个选项符合要求  
A `<a href="right.html" target="_blank">节目</a>`  
B `<a href="right.html" target="_self">节目</a>`  
C `<a href="right.html" target="_parent">节目</a>`  
D `<a href="right.html" target="_top">节目</a>`  
正确答案: A  
解析:  
target="\_blank"新窗口打开  
target="\_self"当前窗口打开  
5.在HTML中，下面不属于HTML文档的基本组成部分的是  
A `<style></style>`  
B `<body></body>`  
C `<html></html>`  
D `<head></head>`  
正确答案: A  
解析:  
HTML的基本结构组成

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    	</body>
    </html>

6.下面HTML代码片段中，符合XHTML使用规范的是  
A `<input type="text" value="hello">`  
B `</br>`  
C `<br/>`  
D `<img src=" Welcome.jpg" alt="Welcome">`  
正确答案: C  
解析:  
单标签没有结束标记  
只在标签尾部加一个斜杠即可`<br />`  
7.下列哪个属性是表格里合并单元格的间距属性  
A cellspacing  
B cellpadding  
C rowspan  
D colspan  
正确答案: A  
解析:  
cellspacing单元格与单元格之间的间距  
cellpadding 单元格与内容之间的间隙  
rowspan 合并单元格行数  
colspan 合并单元格列数  
8.在CSS中样式表里优先级别最高的是哪个  
A 导入样式表  
B 外部样式表  
C 内联样式表  
D 内部样式表  
正确答案: C  
解析:  
当三个样式表同时存在时，内联样式表优先级别最高。  
9.能实现背景平铺效果，对应的CSS为  
A `div{backgroud-image:url(images/bg.gif);}`  
B `div{backgroud-image:url(images/bg.gif) repeat-x;}`  
C `div{backgroud-repeat:url(images/bg.gif) repeat-y;}`  
D `div{backgroud-repeat:url(images/bg.gif) no-repeat;}`  
正确答案: A  
解析:  
background-image属性后面只能添加图片路径的属性值，因为他不是复合式写法，不能同时添加平铺属性值。当只添加背景图时，背景图默认平铺。  
10.下面选项中，哪个属性值能将网页中某个标签的右外边距设置为10像素  
A margin:0 10px 0 0;  
B margin:0 0 0 10px;  
C margin:10px 0 0 0;  
D padding-right:10px;  
正确答案: A  
解析:  
首先是外边距，所以用到的肯定是margin属性，顾D选项排除，再根据margin属性值的设置方式 ，四个值时是上右下左的顺序，4个值上 右 下 左 （顺序依次为顺时针方向）所以选择A选项。  
11.在HTML中，关于CSS样式的说法错误的是  
A css样式无法实现页面的精确控制  
B 每条样式声明使用分号(;)隔开  
C css样式实现了内容与表现的分离，利于团队开发  
D css中属性和属性值用冒号连接  
正确答案: A  
解析:  
css可以实现精确的设置。B、D选项为CSS样式的使用规范，C是CSS的优点  
12.阅读下面HTML代码，段落标签

内文本最终显示的颜色是

A \#F00  
B \#00F  
C \#666  
D \#333  
正确答案: C  
解析:  
ID选择符权重大于class选择符权重。

13.在HTML中网页中，如果需要在CSS样式表中设置文本的字体是隶书，则需要设置文本的属性

A font-family  
B font-size  
C font-style  
D face  
正确答案: A  
解析:  
font-family 设置文本字体属性。  
font-size 设置文本文字大小  
font-style 属性定义字体的风格（斜体）  
14.下列css属性中,用于指定背景图片的是  
A background-color  
B background-image  
C background-position  
D background-repeat  
正确答案: B  
解析:  
background-color 设置背景色属性，  
background-image添加背景图属性，  
background-position 设置背景图位置属性，  
background-repeat 设置平铺属性。  
15.下列CSS代码中有几处语法错误 &td\{font-size:12px , color:666666; \}  
A 1  
B 2  
C 3  
D 4  
正确答案: C  
解析:  
css语法：选择器\{属性：属性值；\}  
正确的为：td\{font-size:12px ； color:\#666666 \}  
16.为了让以下id为container的div能够水平居中，需要的CSS样式是  
A \#container\{width:880px; padding:0px auto;\}  
B \#container\{width:880px;padding:auto 0px;\}  
C \#container\{width:880px;margin:auto 0px;\}  
D \#container\{width:880px;margin:0px auto;\}  
正确答案: D  
解析:  
块元素的居中方式为margin:任何值 auto;  
17.下列关于CSS中盒子模型说法错误的是  
A 盒子模型是页面布局的基础，它包括外边距、边框、内边距以及元素的宽高等属性  
B border(边框)代表盒子外壳的边框  
C margin(外边距)  
D padding(内边距)代表盒子与其他盒子之间的距离  
正确答案: D  
解析:  
padding(内边距)代表盒子与内部元素之间的距离  
18.若要使用CSS控制字体的大小，则应该设置  
A font-size  
B font-weight  
C font-style  
D font-family  
正确答案: A  
解析:  
font-weight加粗font-style倾斜font-family字体  
19.CSS盒子模型中表示内容与边框间的距离的属性为  
A padding  
B margin  
C border  
D cellpadding  
正确答案: A  
解析:  
margin为外边框border为边框cellpadding为表格的内容到边框之间的距离。  
20.关于HTML中超链接伪类的描述不正确的是  
A a:link表示未单击访问时的超链接样式  
B a:visited表示单击访问后的超链接样式  
C a:hover表示鼠标悬浮其上的超链接样式  
D a:active表示鼠标单击并释放的超链接样式  
正确答案: D  
解析:  
a:active表示超链接被激活时的状态  
21.阅读以下设置页面背景图片的CSS代码，下列说法正确的是 background:link(images/new.gif) left no-repeat;  
A link应该改为src  
B link应该改成url  
C no-repeat 应该改成no\_repeat  
D 无语法错误  
正确答案: B  
解析:  
background:url() left no-repeat  
22.在HTML中，关于下列代码说法错误的是 `<a href="index.html" target="_blank">首页</a>`  
A 此标签用来创建一个超链接  
B 目标窗口在当前窗口中打开  
C 超链接的额连接地址是index.html  
D 超链接的文字是"首页“  
正确答案: B  
解析:  
target="\_blank"作用为在空白窗口打开  
23.关于CSS控制字体样式说法错误的是  
A font:bold 12px “宋体”，指定了字体为加粗的12px大小的宋体  
B font-type属性用于指定字体的类型，如宋体、黑体等  
C font-size属性用于指定字体的大小  
D font-weight属性可指定字体的粗细  
正确答案: B  
解析:  
font 文本文字设置的简写模式  
font-type:没有这个属性  
24.下列说法错误的是  
A 密码框需要设置input标签type=“password”  
B 提交按钮需要设置input标签type=“reset”  
C 空按钮的input的type值为button  
D value属性表示初始值，可能会随着用户的操作而改变,以提交时为准  
正确答案: B  
解析:  
提交按钮需要设置input标签type=“submit”  
25.下列哪个不是边框的线型  
A background  
B solid  
C dashed  
D double  
正确答案: A  
解析:  
border为边框的属性  
26.阅读以下HTML代码，选出显示效果为“1.春天 2.夏天 3.秋天 4.冬天”的是( 列表的符号为数字 )？  
A `<ol><li>春天</li><li>夏天</li><li>秋</li><li>冬天</li></ol>`  
B `<ul><li>春天</li><li>夏天</li><li>秋天</li><li>冬天</li></ul>`  
C `<ol><li>春天</li><li>夏天</li><li>秋天</li><li>冬天</li></ul>`  
D `<ul><li>春天</li><li>夏天</li><li>秋天</li><li>冬天</li></ol>`  
正确答案: A  
解析:  
有序列表的组成是`<ol><li></li></ol>`  
无序列表的组成是`<ul><li></li></ul>`  
27.在HTML页面中，调用外部样式表的方法是  
A `<style rel="stylesheet" type="text/css" href="外部样式表地址" />`  
B `<link rel="stylesheet" type="text/css" href="外部样式表地址" />`  
C `<style rel="stylesheet" type="text/css" link="外部样式表地址" />`  
D `<link rel="stylesheet" type="text/css" style="外部样式表地址" />`  
正确答案: B  
解析:  
外部样式表的连接方法：

28.下列哪个是可以实现网页中的版权图片效果  
A >  
B <  
C ©  
D    
正确答案: C  
解析:  
>大于号  
<小于号  
©版权符  
 空格  
29.在HTML中，以下能够实现表格列合并的是  
A colspan属性  
B rowspan属性  
C colspan标签  
D rowspan标签  
正确答案: A  
解析:

colspan为并单元格的列数  
30.HTML中哪个标签是无序列表  
A div  
B dl  
C ul  
D ol  
正确答案: C  
解析:  
ul 无序列表  
ol有序列表  
二、多选题（共20题，每题2分）  
1.下列属于a标签的属性有  
A title  
B target  
C src  
D href  
正确答案: A,B,D  
解析:  
src为图片的属性  
2.下列元素中，为单标记的是  
A br  
B span  
C strong  
D hr  
正确答案: A,D  
解析:  
  
3.以下属于css中的控制文本或字体的属性有:  
A float  
B margin  
C color  
D font-weight  
正确答案: C,D  
解析:  
color文本颜色 font-weight文本加粗  
4.以下声明可将背景颜色设为red的有  
A color:red;  
B background:red;  
C background-color:red;  
D font-color:red;  
正确答案: B,C  
解析:  
背景的属性为background  
5.默认加粗的元素有  
A b  
B strong  
C u  
D i  
正确答案: A,B  
6.以下属性写法正确的有  
A padding:-10px  
B padding:10px  
C margin:10px  
D margin:-10px  
正确答案: B,C,D  
解析:  
padding不能写负值，margin可以写负值  
7.属于表格元素的有  
A table  
B hr  
C select  
D tr  
正确答案: A,D  
8.设置合并表格的属性有  
A cellspacing  
B colspan  
C cellpadding  
D rowspan  
正确答案: B,D  
9.设置可以插入背景图片的属性有  
A background-image  
B background-repeat  
C background-attachment  
D background  
正确答案: A,D  
10.下列css选择器的优先级正确的有  
A id:0100  
B class:0001  
C 标记选择器：0010  
D class:0010  
正确答案: A,D  
11.下列属性值属于清除浮动clear的是  
A left  
B right  
C both  
D center  
正确答案: A,B,C  
解析:  
12.定义网页内容的标题标签都有哪些  
A h1  
B title  
C h6  
D h7  
正确答案: A,C  
13.下列哪些属性可以设置表格table水平对齐或垂直对齐  
A cellspacing  
B align  
C colspan  
D valign  
正确答案: B,D  
14.可以在新窗口中打开链接  
A `<a href=“www.baidu.com”target=“self”>我是文字 </a>`  
B `<a href=“http://www.baidu.com”target=“_blank” >我是文字</a>`  
C `<a href=“images/logo.jpg” target=“_blank”>我是文字</a>`  
D `<a href=“images/logo.jpg” target=“_self”>我是文字</a>`  
正确答案: B,C  
15.下列在定义段落的字体的样式和大小，格式为其正确的是  
A p \{font-size：14px；font-family：”宋体”； \}  
B p \{font-family：“宋体”；font-size：14px； \}  
C p \{font-size：“宋体”；font-family：14em； \}  
D p \{font-family：800；font-size：14em； \}  
正确答案: A,B  
16.`<a></a>`的伪类选择符不包括  
A a:link  
B a:onfouce  
C a:visited  
D a:onclick  
正确答案: B,D  
17.HTML中列表包括  
A 有序列表  
B 无序列表  
C 自定义列表  
D 公用列表  
正确答案: A,B,C  
解析:  
HTML中的列表有三种，有无序列表ul>li，有序列表ol>li及自定义列表`<dl><dt></dt><dd></dd></dl>`  
18.下列设置边框线border的属性有  
A border-style  
B border-width  
C border-size  
D border-color  
正确答案: A,B,D  
解析:  
border为复合属性，由border-width,border-style,border-color组成  
19.想要实现一段文字加粗的效果，下面哪个方法是可以的  
A `<b>我是文字文字文字</b>`  
B font-weight:800;  
C font-weight:300px;  
D `<i>我是文字文字文字</i>`  
正确答案: A,B  
20.以下代码 `<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;}` 以下说法正确的是（）  
A 两个盒子会发生重叠  
B 元素a在元素b上方  
C 元素b在元素a上方  
D 两个元素将左右排列  
正确答案: A,B  
解析:  
float:left原理 添加float:left的元素会把右侧的空间做“预留”，等待下个添加浮动的元素的站位