web前端基础面试题

目前在从事前端工作，特别总结写面试题知识供大家学习，需要前端面试题答案的同学，可以加我创建的前端群 937268047

一、选择题

1. HTTP是（）
   （A）文件传输协议 （B）超文本传输协议
   （C）可扩展文件传输协议 （D）高度文件传输协议

2. 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）

9. 若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>

12. 以下选项中，正确的“复选框”标签为？（A）
    （A）<input type="checkbox" /> （B）<input name="radio" / >
    （C）<input name="checkbox" /> （D）<input type="radio" />

13. 以下选项中，正确的“下拉列表”标签结构为？（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>

14. 提交按钮的type是？（C）
    （A）reset （B）button （C）submit （D）check

15. 把CSS用style标签对儿包裹，写在页面head里，这种写法我们叫做？（）
    （A）外链式 （B）行内式 （C）内嵌式 （D）导入式

16. 选择器#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%；

24. 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}