目前在从事前端工作,特别总结写面试题知识供大家学习,需要前端面试题答案的同学,可以加我创建的前端群 937268047
一、选择题
-
HTTP是()
(A)文件传输协议 (B)超文本传输协议
(C)可扩展文件传输协议 (D)高度文件传输协议 - HTML是()
(A)超文本标记语言 (B)结构化数据标记语言
(C)可扩展标记语言 (D)文件标识语言
3.CSS是()
(A)层叠式样式表 (B)嵌套式样式表
(C)结构化样式表 (D)继承式样式表
4.下列说法正确的是()
(A)在XHTML中,不能使用b、u、i等标签
(B)XHTML是和HTML完全不同的两门语言
(C)XHTML要求所有的标签名必须用小写字母,所有属性都要用引号括
(D)我们做网站时通常使用XHTML1.0 strict版,因为它最为严格
5.表示有序列表语义的标签是()
(A)ol (B)list (C)ul (D)dl
6.可以自己嵌套自己的标签()
(A)b (B)p (C)div (D)h1
7.正确的插入图片的语句是()
(A)<img src="image/1.jpg"></img>
(B)<img scr="image/1.jpg" />
(C)<img src="image/1.jpg" /></img>
(D)<img src="image/1.jpg" />
8.在新窗口中打开超级链接,应该设置a标签的什么属性和值()
(A)target="_blank" (B)_target="blank"
(C)blank="_target" (D)_blank="target"
*请注意,下面9~11题的选项,均为:
(A) (B) (C) (D)
- 若HTML代码如下,显示效果为何?(B)
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td colspan="2">3</td>
</tr>
</table>
10.若HTML代码如下,显示效果为何?(A)
<table>
<tr>
<td colspan="2">1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
</tr>
</table>
11.若HTML代码如下,显示效果为何?(C)
<table>
<tr>
<td rowspan="2">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
-
以下选项中,正确的“复选框”标签为?(A)
(A)<input type="checkbox" /> (B)<input name="radio" / >
(C)<input name="checkbox" /> (D)<input type="radio" /> -
以下选项中,正确的“下拉列表”标签结构为?(B)
(A)<option><select></select><select></select><option>
(B)<select><option></option><option></option></select>
(C)<swicth><option></option><option></option></swicth>
(D)<option><swicth></swicth><swicth></swicth><option> -
提交按钮的type是?(C)
(A)reset (B)button (C)submit (D)check -
把CSS用style标签对儿包裹,写在页面head里,这种写法我们叫做?()
(A)外链式 (B)行内式 (C)内嵌式 (D)导入式 - 选择器#box p,下列说法中正确的是?()
(A)选择的是id为box的元素的第一个后代元素p
(B)选择的是id为box的元素的所有后代元素p
(C)选择的是id为box的元素的第一个子元素p
(D)选择的是id为box的元素的所有子元素p
17.页面上有两个#box选择器,如下:()
#box{
font-size:20px;
font-weight:bold;
}
#box{
font-size:30px;
}
下面说法正确的是:
(A)#box字号30px,不加粗 (B)#box字号50px,加粗
(C)#box字号30px,加粗 (D)#box字号20px,加粗
18.下列哪个CSS属性不可继承? ()
(A)font-style (B)color (C)width (D)text-align
19.阅读下面CSS代码,试问此盒模型真实占有的宽度是多少?()
div{
width:120px;
height:120px;
border-left-width:30px;
border:20px solid red;
padding:30px 40px 50px;
padding-right:60px;
}
(A)210px; (B)250px; (C)260px; (D)270px;
20.关于行内元素和块级元素,下面说法唯一正确的是?()
(A)只有块级元素才能设置border属性
(B)行内元素不能设置宽度、高度,也不能设置padding
(C)固定定位的元素,必须刻意写width:100%;否则是不能自动撑满父亲的
(D)固定了的元素,将不再区分行内元素和块级元素,具有“行块二像性”
21.关于浮动,下面说法唯一错误的是?()
(A)浮动的元素不能被内部文字撑高 (B)浮动的元素也可以有相对定位
(C)浮动的元素不区分行块了 (D)浮动的元素脱离标准流
22.设置a标签的伪类,我们必须按照一定的顺序来设置,正确的顺序是?()
(A)a:visited ,a:active ,a:hover ,a:link
(B)a:visited ,a:link ,a:hover ,a:active
(C)a:hover ,a:visited ,a:link ,a:active
(D)a:link ,a:visited ,a:hover ,a:active
23.图片尺寸为200px200px,盒子尺寸为800px800px,则语句background-position:center center;等价于:()
(A)background-position:300px 300px;
(B)background-position:200px 200px;
(C)background-position:37.5% 37.5%;
(D)background-position:25% 25%;
- div[class |= “haha”]可以选中下面哪个元素()
(A)<div class=”1-haha”></div> (B)<div class=”haha1”></div>
(C)<div class=”haha 1”></div> (D)<div class=”haha-1”></div>
25.无换行空格的字符实体是?()
(A)&nbps; (B)&nsbp; (C)&nspb; (D)
二、简答题
1.CSS属性默写:①设置文本下划线 ②设置文本斜体 ③段首2个文字空格
1 text-decoration:underline;
2 font-style:italic;
3 text-indent:2em;
2.书写只有IE6,7浏览器显示“您的浏览器版本太低,请升级!”的html hack。
1 <!--[if lt IE 8]>
2 <p>您的浏览器版本太低,请升级!</p>
3 <![endif]-->
3.简述前端页面有哪三层构成,分别是什么?作用是什么?
1结构层 作用:从html角度搭建网页
2样式层 作用:从美化角度书写样式
3行为层 作用:从交互的角度描述我们的页面行为
4.简述绝对定位的元素的参考点是什么?请分类阐述。
答案: ①body。
有top参与,参考点是左上角或者是右上角。
有bottom参与,参考点是首屏的左下角或右下角
②距离最近,同时有定位的祖先元素。
5.如何设置垂直居中、水平居中的绝对定位的元素?用代码示例简述。
答案:方法一:
1 div{
2 width: 400px;
3 height: 400px;
4 border:1px solid #ddd;
5 position: relative;
6 }
7 div p{
8 position: absolute;
9 background: pink;
10 width: 100px;
11 height: 40px;
12 left:50%;
13 top:50%;
14 margin-left:-50px;
15 margin-top:-20px;
16 }
方法二:
1 div p{
2 position: absolute;
3 background: pink;
4 width: 100px;
5 height: 40px;
6 left:50%;
7 top:50%;
8 transform:translate(-50%,-50%);
9 }
6.请看下面的HTML结构和对应的CSS,试问文字的颜色为何?请简述原因。
<div id="box1" class="div1">
<div id="box2" class="div2">
<div id="box3" class="div3">
<p>试问文字的颜色为何?</p>
</div>
</div>
</div>
CSS如下:
#box p{color:blue;}
.div1 div.div2 .div3 p{color:blue;}
div.div1 #box2 p{color:green;}
.div1 .div2 p{color:pink;}
1正确答案:green
1首先他们都选中了目标元素,所以看权重,因为绿色的权重(1,1,2)高。
7.请看下面的HTML结构和对应的CSS,试问文字的颜色为何?请简述原因。
<div id="box1" class="div1">
<div id="box2" class="div2">
<div id="box3" class="div3">
<p>我是段落</p>
</div>
</div>
</div>
CSS如下:
.div1 .div3{color:blue;}
#box1 #box2{color:red;}
正确答案:蓝色blue。因为都没有选中,所以看距离远近。
8.设置一个div从右下角到左上角的一个渐变,颜色从红色到绿色。红绿颜色比是6:4。用代码表示
2div{
3 width: 200px;
4 height: 200px;
5 background-image: -webkit-linear-gradient(bottom right,red 60%,green);
6} 7
9.定义一个动画(动画效果是一直匀速旋转。一次动画完成时间是1秒动画),并调用。只写关键性语句
1/定义动画/
2@-webkit-keyframes zhuan{
3 from{
4 transform:rotate(0deg);
5 }
6 to{
7 transform:rotate(360deg);
8 }
9}
10/调用动画/
11-webkit-animation:zhuan 1s linear 0s infinite;
10.清除浮动有哪几种方式?各自的优缺点为何?请画出类似这样的图示并辅为简单文字描述即可:
答案:设置父盒子高度。
1div{height:200px}
②外墙法:在俩个父盒子中间加一堵有高度,清除了浮动的墙
1.cl{
2 clear:both;
3 height:10px;
}
③内墙法:加在浮动元素的最低部
1cl{clear:both}
④overflow:hidden
⑤after伪类:(内墙法)
1div::after{
2 content:””;
3 display:block;
4 clear:both;
5}