前端面试题目

腾讯实习生WEB前端笔试题（网摘）

**********************************************************************

一、 耐心填一填！（每空4分，共24分）
1. 为div设置类a与b,应编写HTML代码_

_________。
2. 设置CSS属性clear的值为_both___________时可清除左右两边浮动。
3. ____li________标签必须直接嵌套于ul、ol中。
4. CSS属性_____margin_______可为元素设置外补丁。
5. 设置CSS属性float的值为___none_________时可取消元素的浮动。
6. 文字居中的CSS代码是____text-align:center________。

二、 精心选一选！（每题4分，共16分）
1. 下列哪个样式定义后,内联(非块状)元素可以定义宽度和高度( C )
A. display:inline B. display:none C. display:block D. display:inheric

2. 选出你认为最合理的定义标题的方法( C )
A. 文章标题
B.

文章标题

C.

文章标题

D. 文章标题

3. br标签在XHTML中语义为( A )
A.换行 B.强调 C.段落 D.标题

4. 不换行必须设置( AC )
A.word-break B.letter-spacing C.white-space D.word-spacing

5. 在使用table表现数据时，有时候表现出来的会比自己实际设置的宽度要宽，为此需要设置下面哪些属性值( AD )
A. cellpadding=”0″ B. padding:0 C. margin:0 D. cellspacing=”0″


三、判断对或错！（每题4分，共24分）
1. CSS属性font-style 用于设置字体的粗细。 ( × )
2. CSS属性overflow用于设置元素超过宽度时是否隐藏或显示滚动条。 ( √ )
3. 在不涉及样式情况下,页面元素的优先显示与结构摆放顺序无关。 ( × )
4. 在不涉及样式情况下,页面元素的优先显示与标签选用无关。 ( √ )
5. display:inline兼容所有的浏览器。 ( √ )
6. input属于窗体元素,层级显示比flash、其它元素都高。 ( × )

四、用心想一想，你一定是生活中的智者！ （每题9分，共36分）

1. 写出ul、ol、dl三种列表的html结构。
答：

复制代码
2. 将以下CSS代码进行缩写，注意要符合缩写的规范。
a) 代码一：
border-width:1px;
border-color:#000;
border-style:solid;

复制代码
b) 代码二：
background-position:0 0;
background-repeat:no-repeat;
background-attachment:fixed;
background-color:#f00;
background-image:url(background.gif);

复制代码
c)代码三：
font-style:italic;
font-family:"Lucida Grande",sans-serif;
font-size:1em;
font-weight:bold;
font-variant:small-caps;
line-height:140%;

复制代

码
d) 代码四：
list-style-position:inside;
list-style-type:square;
list-style-image:url(image.gif);

复制代码
e)代码五：
margin-left:20px;
margin-right:20px;
margin-bottom:5px;
margin-top:20px;

复制代码
f)代码六：
color:#336699;
color:#ffcc00;

复制代码
答：
代码一：border:1px #000 solid;
代码二：background: #f00 url(background.gif) no-repeat fixed 0 0;
代码三：font:italic bold small-caps 1em/140% "lucida Grande",sans-serif;
代码四：list-style: url(image.gif) square inside;
代码五：margin:20px 20px 5px 20px;
代码六：color:#369;color:#fc0;

复制代码
3. 修改以下代码，使其结构更加合理以及符合W3C标准。（XHTML 1.0 Strict）
代码：

复制代码
答：


复制代码
4. 简述border:none以及border:0的区别，并给出使用建议。
答：border:none表示边框样式无,border:0表示边框宽度为0;当定义了border:none,即隐藏了边框的显示,实际就是边框宽度为0.
当定义边框时,必须定义边框的显示样式.因为边框默认样式为不显示none,所以仅设置边框宽度,由于样式不存在,边框的宽度也自动被设置为0.

五、勇气拼一拼，让你超越别人的加分题目来了！ （不限于一种方法，共30分）
使用重构的方式制作出一个如下图的水平、垂直都居中短边为50px，长边为150px的红色十字架。
2012-3-5 15:36 上传
下载附件 (10.97 KB)
腾讯实习生网页重构组招聘公开试题（含答案）



要求：
1.使用2个div完成
2.使用3个div完成
3.使用5个div完成

答案：
1.使用2个div完成

复制代码
2.使用3个div完成

















********************************************************************


远大心胸（医院）集团（心蕊网络）面试题 （亲生经历，有点难度，但其实网上搜搜都有）


************************************************************************
一、写出几种IE6 BUG的解决方法。
这里能写多少是多少，最好把自己遇到的全写出来。可以借鉴https://www.doczj.com/doc/74245833.html,/ 问题和经验列表，里面应有尽有。写几个常见的：
1.解决IE6及更早浏览器浮动时产生双倍边距的BUG
display:inline

2.如何解决IE6下的文本溢出BUG(行业内称：多出一只猪)
删除2个div之间所有的注释；
不设置浮动；
调整2个div的宽度，比如将宽度调整为更小一点，刷新页面看效果。

3.DIV浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距. #box{ float:left; width:800px;} #left{ float:left; width:50%;}

#right{ width:50%;} *html #left{ margin-right:-3px; //这句是关键}

4.css hack

5.如果这道题出的不是IE6 而是让你列举各浏览器之间的兼容

性解决方法，就要写死了。。太多太多


二、如果让一个div在页面中垂直居中（动动脑子，其实方法很多，各有利弊）

1.绝对定位法

2.单行垂直居中（重点是里面的文字是单行）
div {
height:25px;
line-height:25px;
overflow:hidden;
}

3.多行未知高度文字的垂直居中

div {
padding:xxpx; （谁都会吧）
}

4.多行文本固定高度的垂直居中 （IE6不能正确地理解display:table和display:table-cell，所以要用css hack，想知道为什么这样做，可以参考https://www.doczj.com/doc/74245833.html,/chuncn/archive/2008/10/09/1307321.html，）

div#wrap父容器 {
display:table;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
}
div#subwrap子容器 {
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content内容 {
_position:relative;
_top:-50%;
}


三、如何让2个并列的div自动等高（不设高度）
注：如果能写出3种常见方法固然最好，但最好写一下各自优缺点，否则面试时肯定会问你为什么这样写

1、背景模拟法（假高度），按照尺寸制作背景，平铺，当内容增多时，背景就会向下纵向重复，看起来就向左右两个div都自动向下延伸了一样。

2、表格嵌套法（不难理解，表格都是等高的，就是在div中嵌套表格）


3、内外补丁法（最推荐的方法，因为只用css实现的，但初学者不易理解）
* { margin:0; padding:0; }
#wrap {
overflow:hidden; (这行代码是重点，否则你会看到页面很长很长)
padding:0;
padding-left:180px;（内补丁）
}
#left,#right {
height:auto;
margin-bottom:-10000px;（外补丁）
padding-bottom:10000px;（内补丁）
}
#left {
display:inline;
float:left;
width:180px;
margin-left:-180px;（外补丁）
background: #0CF;
}
#right{
float:right;
width:100%;
background: #FC6;
}

这里说一下内外补丁，其实也没那么难理解，我的理解就是相互抵消。多用用margin负值，你会了解这个原理的。



四、宽度自适应三栏的布局方式
三种方法：
1、绝对定位法（最易理解）
左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。

html,body{margin:0; height:100%;}
#left,#right{position:absolute; top:0; width:200px; height:100%;}
#left{left:0; background:#a0b3d6;}
#right{right:0; background:#a0b3d6;}
#main{margin:0 210px; background:#ffe6b8; height:100%;}






2、margin负值

法（不易理解）

html,body{margin:0; height:100%;}
#main{width:100%; height:100%; float:left;}
#main #body{margin:0 210px; background:#ffe6b8; height:100%;}
#left,#right{width:200px; height:100%; float:left; background:#a0b3d6;}
#left{margin-left:-100%;}
#right{margin-left:-200px;}

重点是第一个div是中间的main，且必须套一个容器。


3、浮动法（最常见）

html,body{margin:0; height:100%;}
#main{height:100%; margin:0 210px; background:#ffe6b8;}
#left,#right{width:200px; height:100%; background:#a0b3d6;}
#left{float:left;}
#right{float:right;}





重点是中间的main要放在标签最后，缺点是需要用clear:both


五、一小张效果图，大致内容是一个图片列表，ul内边距左：10px 右：10px。ul中的li右边距30px，但最后一个li距离ul只有10px，也就是ul有边框，里面的li图片列表也有边框。（这些属性是定死的，你不能修改，要求写出这段css代码）

这道题，其实也是考你的内外补丁掌握，大致方法是，ul设置左右内边距后，设置li的margin负值，这样li在ul的框里就居中了。还有一种比较傻瓜的办法，设置li的margin-right:30px的后，最后一个li需要改class，把margin-right清掉。


六、谈谈你对WEB标准以及W3C的理解与认识。
这题网上随便找找都有，大致要点:标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

*******************************************************************

上海柯慧网络科技有限公司（比较囧，我当初准备了很多自适应和等高的题目，都没考，题目较简单，全都是xhtml和css基础）

*******************************************************************

1、什么是HTML
超文本标记语言，即HTML（Hypertext Markup Language），是用于描述网页文档的一种标记语言。

2、
声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。没有结束标签。

3、META元素的作用（当时是选择题，选项记不清了）
META元素对访问者本人是不可见的(除非分析HTML源文件)，它对浏览器和一些搜索引擎是可见的，用来描述文档特性，也就是说能够更

容易让搜索引擎搜索到。

4、若干一大堆超简单的html和css选择题，稍微有点基础的人5秒钟内就能选出来


5、css代码优化。（给了一大堆重复写的css代码，让你缩写）
margin-top:20px;
margin-right:5px;
margin-left:5px;
margin-bottom:20px;
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
color:#336699;

答案:
margin:20px 5px;
font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
color:#369;
如果面试官问你，为什么要进行优化。答：减少页面请求和css解析次数，提高页面响应速度。


6、.test {
height:25px;
line-height:25px;
}
问：这段代码在IE和火狐浏览器中高度显示是否一样？如果不一样，请写出他们的实际高度。

答：（别上了“写出他们实际高度”这个提示的当）
这道题是考兼容性，你只要写出，IE浏览器是内容撑开高度，比如文字高度是30,那么最终IE里的高度就是30。而火狐浏览器是内容一超过高度，高度就会被撑破，导致错位。

如果这道题目让你解决兼容性，你可以用min-height的方法加上csshack（IE6不认识min-height）去解决。


7、img中的alt和title有什么区别

1、含义不同
　alt是当图片不存在时的替代文字; title是对图片的描述与进一步说明

2、在浏览器中的表现不同
在firefox和ie8中，当鼠标经过图片时title值会显示，而alt的值不会显示; 只有在ie6中，当鼠标经图片时title和alt的值都会显示。对于网站seo优化来说，title与alt还有最重要的一点：搜索引擎对图片意思的判断，主要靠alt属性。所以在图片alt属性中以简要文字说明，同时包含关键词，也是页面优化的一部分。条件允许的话，可以在title属性里，进一步对图片说明。



8、列举html中的行元素和块元素（不用写的很全，除非面试官真的很苛刻）
块：address blockquote center dir div dl fieldset form h1-h6 hr isindex input prompt
menu noframes frames ol p pre table ul applet button del iframe ins map object - object script
行：a abbr acronym b bdo big br cite code dfn em font i img input kbd label
q s samp select small span strike strong sub sup textarea tt u var


9、div和span的区别（我当时的感觉是，刚考过行和块，怎么又来了，所以写了一些运用方面的区别）

div:可定义文档中的分区或节，