WEB面试题.doc

[HTML && CSS]
1. Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
Doctype声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。该标签可声明三种DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种呈现模式：标准模式和混杂模式（quirks mode）。在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器（比如Microsoft IE 4和Netscape Navigator 4）的行为以防止老站点无法工作。
浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。对于HTML 4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。
2. 行内元素有哪些？块级元素有哪些？CSS的盒模型？
行内元素有：a b span I b em img input select strong
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
盒模型：margin border padding width
3. CSS引入的方式有哪些? link和@import的区别是?

1. 使用 LINK标签
将样式规则写在.css的样式文件中，再以<link>标签引入。
<link rel=stylesheet type="text/css" href="example.css">
2. 使用@import引入
跟link方法很像，但必须放在<STYLE>...</STYLE> 中
<STYLE TYPE="text/css">
<!--
　　@import url(css/example.css);
-->
</STYLE>
3. 使用STYLE标签
将样式规则写在<STYLE>...</STYLE>标签之中。
<STYLE TYPE="text/css">
<!--
body {color: #666;background: #f0f0f0;font-size: 12px;}
td,p {color:#c00;font-size: 12px;}
-->
</STYLE>
4. 使用STYLE属性
将STYLE属性直接加在个别的元件标签里，<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}
5. 使用<span></span>标记引入样式
<span style="font:12px/20px #000000;"></span>

两者区别：加载顺序的差别。当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。@import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，如：

main.css
———————-
@import “sub1.css”;
@import “sub2.css”;
这样做有一个缺点，会对网站服务器产生过多的HTTP请求，以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨慎使用。

4. CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？
l 通配选择符* { sRules }
l 类型选择符E { sRules }
td { font-size:14px; width:120px; }
l 属性选择符
E [ attr ] { sRules }
E [ attr = value ] { sRules }
E [ attr ~= value ] { sRules }
E [ attr |= value ] { sRules }
h[title] { color: blue; }/* 所有具有title属性的h对象 */
span[class=demo] { color: red; }
div[speed="fast"][dorun="no"] { color: red; }
a[rel~="copyright"] { color:black; }
l 包含选择符E1 E2 { sRules }
table td { font-size:14px; }
l 子对象选择符E1 > E2 { sRules }
div ul>li p { font-size:14px; }
l ID选择符 #ID { sRules }
l 类选择符E.className { sRules }
l 选择符分组
E1 , E2 , E3 { sRules }
l 伪类及伪对象选择符
E : Pseudo-Classes { sRules }
( Pseudo-Classes )[:link :hover :active :visited :focus :first-child :first :left :right :lang]
E : Pseudo-Elements { sRules }
( Pseudo-Elements )[:first-letter :first-line :before :after]
可以继承的有：font-size font-family color
不可继承的一般有：border padding margin background-color width height等
============================

关于CSS specificity
CSS 的specificity 特性或称非凡性，它是衡量一个衡量CSS值优先级的一个标准，既然作为标准，就具有一套相关的判定规定及计算方式，specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级。
选择符Specificity值列表：

规则：
1. 行内样式优先级Specificity值为1,0,0,0，高于外部定义。
如：<div style=”color: red”>sjweb</div>
外部定义指经由<link>或<style>标签定义的规则；
2.!important声明的Specificity值最高；
3.Specificity值一样的情况下，按CSS代码中出现的顺序决定，后者CSS样式居上；
4.由继续而得到的样式没有specificity的计算，它低于一切其他规则(比如全局选择符*定义的规则)。

算法：
当遇到多个选择符同时出现时候
按选择符得到的Specificity值逐位相加，
{数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0}
就得到最终计算得的specificity，
然后在比较取舍时按照从左到右的顺序逐位比较。

实例分析：
1.div { font-size:12px;}
分析：
1个元素{ div}，Specificity值为0,0,0,1

2.body div p{color: green;}
分析：
3个元素{ body div p }，Specificity值为0,0,0,3

3.div .sjweb{ font-size:12px;}
分析：
1个元素{ div }，Specificity值为0,0,0,1
1个类选择符{.sjweb}，Specificity值为0,0,1, 0
最终：Specificity值为 0,0,1,1

4.Div # sjweb { font-size:12px;}
分析：
1个元素{ div }，Specificity值为0,0,0,1
1个类选择符{.sjweb}，Specificity值为0,1,0, 0
最终：Specificity值为 0,1,0,1

5.html > body div [id=”totals”] ul li > p {color:red;}
分析：
6个元素{ html body div ul li p} Specificity值为0,0,0,6
1个属性选择符{ [id=”totals”] } Specificity值为0,0,1,0
2个其他选择符{ > > } Specificity值为0,0,0,0
最终：Specificity值为 0,0,1,6

!important 的优先级最高
使用!important可以改变优先级别为最高，其次是style对象，然后是id > class >tag ，另外在同级样式按照申明的顺序后出现的样式具有高优先级。

5. 前端页面由哪三层构成，分别是什么？作用是什么？
网页分成三个层次，即：结构层、表示层、行为层。
网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”
网页的表示层（presentation layer） 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。
网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。
6. css的基本语句构成是？
选择器{属性1:值1;属性2:值2;……}
7. 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？
IE内核浏览器：360，傲游，搜狗，世界之窗，腾讯TT
非IE内核浏览器：firefox opera safari chrome
1.就是ie6双倍边距的问题，在使用了float的情况下，不管是向左还是向右都会出现双倍，最简单的解决方法就是用display:inline;加到css里面去。
2.文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要，在高度上我们不能容忍1px 的差异。
3. ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。
4. 还讨论内容撑破容器问题，横向上的。如果float 容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义width。
5. 浮动的清除，ff下不清除浮动是不行的。
6. mirrormargin bug，当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-bottom:14px。padding也会出现类似问题，都是ie6下的特产，该类bug 出现的情况较为复杂，远不只这一种出现条件，还没系统整理。解决方案：外层元素设定border 或 设定float。
7. 吞吃现象，限于篇幅，我就不展开了。还是ie6，上下两个div，上面的div设置背景，却发现下面没有设置背景的div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。解决方案：使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。
8. 注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案，ie6的这个bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用“<!–[if !IE]> picRotate start <![endif]–>”方法写注释。
9. <li/>里加 float <div/>，这是一个典型的，棘手的兼容问题，希望引起大家正视 ，给li 不同的属性会有不同的解释效果，ff下的解释稍可理解，ie6下的解释会让你摸不着头脑，由于问题的复杂性，将另起一文专门讨论该问题。在《ul使用心得》一文里有相关成果，却没给出问题解决的过程。
10. img下的留白。解决方案：给img设定 display:block。
11. 失去line-height。<div style=”line-height:20px”><img />文字</div>，很遗憾，在ie6下单行文字 line-height 效果消失了。。。，原因是<img />这个inline-block元素和inline元素写在一起了。解决方案：让img 和文字都 float起来。
12. 链接的hover状态。a:hover img{width:300px} 我们想让鼠标hover时，链接里包含的图片宽度变化，可惜在ie6下无效，ie7、ff下有效。
13. 非链接的hover状态。div:hover{} 这样的样式ie6是不认的，在ie7、ff下才有效果。
14. ie下overflow:hidden对其下的绝对层position:absolute或者相对层position:relative无效。解决方案：给overflow:hidden加position:relative或者position:absolute。另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。
15. ie6下严重的bug，float元素如没定义宽度，内部如有div定义了height或zoom:1，这个div就会占满一整行，即使你给了宽度。float元素如果作为布局用或复杂的容器，都要给个宽度的。
16. ie6下的bug，绝对定位的div下包含相对定位的div，如果给内层相对定位的div高度height具体值，内层相对层将具有100%的width值，外层绝对层将被撑大。解决方案给内层相对层float属性。
17. ie6下的bug，<head></head>内有<base target=”_blank”/>的情况下，position:relative层下的float层内文字无法选中。
18. 终于来了个ff的缺点。width:100%这个东西在ie里用很方便，会向上逐层搜索width值，忽视浮动层的影响，ff下搜索至浮动层结束，如此，只能给中间的所有浮动层加width:100%才行，累啊。opera这点倒学乖了跟了ie。
8. 如何居中一个浮动元素?
设置容器的浮动方式为相对定位，然后确定容器的宽高，比如宽500 高 300 的层，然后设置层的外边距。
div{Width:500px;height:300px;Margin: -150px 0 0 -250px;position:relative;left:50%;top:50%;}
9. 有没有关注HTML5和CSS3?如有请简单说一些您对它们的了解情况！
HTML5标签的改变：<header>, <footer>, <dialog>, <aside>, <figure>, <section> 等
IE9以上开始支持
CSS3实现圆角，阴影，对文字加特效，增加了更多的CSS选择器。
10. 如果让你来制作一个访问量很高的大型网站，你会如何来管理所有CSS文件、JS与图片？
11. 你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？

.clear {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}

.clearfix:after {clear: both;content: '.';display: block;visibility: hidden;height: 0;}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

.clearfix{*zoom:1;}.clearfix:after{content:'\20';display:block;height:0;clear:both;}

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}/* Hides from IE-mac \*/
* html .clearfix{height:1%;}
.clearfix{display:block;}/* End hide from IE-mac */

这个clearfix的CSS使用了after这个伪对象，它将在应用clearfix的元素的结尾添加content中的内容。 在这里添加了一个句号"."，并且把它的display设置成block；高度设为0；clear设为both；visibility设为隐藏。这样就达到了撑开容器的目的。要让IE也完美显示，则必须在clearfix这个CSS定义的后面加上一些专门为IE设定的HACK。

一、单项选择题（ccdba）
1.光标移动文本框上方时，文本框边框的颜色就改变，这是因为激发了下列的事件。
A.onFocus
B.onMouseUp
C.onMousrOver
D.onMousMOve

2.下列属性哪一个能够实现层的隐藏？
A.display:false
B.display:hidden
C.display:none
D.display:" "

3.下列选项中，不属于文本属性的是
A.font-size B.font-style C.text-align D.font-color

4.页面上有一个按钮btn，同时定义好了一个类样式（按钮图片样式表btnPic），那么使用（）就可以实现背景图片的改变。
A.onMouseOver="className=btnPic"
B.onMouseOver="this.className=btnPic"
C.onMouseOver="this.style.className=btnPic"
D.this.btn.style.className="btnPic"

5.下列语句描述正确的是
A.当页面有多个层堆叠时，按照料z-index的数值升序先后排列每个层
B.当页面有多个层堆叠时，按照料z-index的数值降序先后排列每个层
C.设置层的显示属性中inline意味着按块显示，换行显示
D.设置层的显示属性中block意味着的按行显示，和其它元素同一行显示
6．CSS是什么的缩写
A.Computer Style Sheets
B.Cascading Style Sheets
C.Creative Style Sheets
D.Colorful Style Sheets

7．下列HTML引用样式表的方式哪种正确
A.<stylesheet>mystyle.css</stylesheet>
B. <style src="mystyle.css">
C.<link rel="stylesheet" type="text/css" href="mystyle.css">

8．在HTML内部定义样式用下列哪个标签
A.<style> B.<css> C.<script>

9．下面的CSS语法哪一个正确？
A.body:color=black
B.{body;color:black}
C.body {color: black}
D.{body:color=black(body}

10.在CSS中怎样插入注释
A.// this is a comment //
B.// this is a comment
C./* this is a comment */
D.' this is a comment

11.下面哪一个属性用来更换背景颜色
A.background-color: B.bgcolor: C.color:

12.怎样给DOM中的所有h1标签增加一个背景色
A.all.h1 {background-color:#FFFFFF}
B.h1 {background-color:#FFFFFF}
C.h1.all {background-color:#FFFFFF}

13．怎样改变标签元素中文本的颜色
A.text-color= B.fgcolor: C.text-color: D.color:

14．下面的CSS属性当中哪一个是控制字体大小的
A.text-size B.font-size C.text-style D.font-style

15.下面哪一个是给所有p标签元素字体加粗的语法
A.<p style="text-size:bold">
B.<p style="font-size:bold">
C.p {text-size:bold}
D.p {font-weight:bold}
16.怎样设置可以使超链接没有下划线
A.a {text-decoration:no underline}
B.a {underline:none}
C.a {decoration:no underline}
D.a {text-decoration:none}
17.怎样使一段文本中的所有单词的首字母大写
A.text-transform:uppercase
B.text-transform:capitalize
C.You can't do that with CSS

18.怎样使文本加粗
A.font-weight:bold B.style:bold C.font:b
19.定义边框与内容之间的空隙用padding，请问padding允许用负值对吗？
A.对 B.错

20.怎么定义列表的项目符号为实心矩形
A.list-type: square
B.type: 2
C.type: square
D.list-style-type: square

二、多项选择题
1.在CSS语言中下列哪些选项是背景图像的属性
A.背景重复 B.背景附件 C.纵向排列 D.背景位置

2.CSS选择器包括
A.超文本标记选择器
B.类选择器
C.标签选择器
D.ID选择器

3.CSS文本属性中，文本对齐的取值有
A.auto B.justify C.center D.right E.left
4.CSS中BOX的padding属性包括的属性有
A.填充 B.上填充 C.下填充 D.左填充 E.右填充

5.CSS中盒子模型的属性包括
A.font B.margin C.padding D.visible E.border

6.下面关于CSS的说法正确的有
A.CSS可以控制网页背景图片
B.margin属性的属性值可以是百分比
C.整个BODY可以作为一个BOX
D.对于中文可以使用word-spacing属性对字间距进行调整
E.margin属性不能同时设置四个边距

7.边框的样式可以包含的值包括
A.粗细 B.颜色 C.样式 D.长短

Web前端开发面试题附答案
第一部分：用CSS实现布局
让我们一起来做一个页面
首先，我们需要一个布局。
请使用CSS控制3个div，实现如下图的布局。

第二部分：用javascript优化布局
由于我们的用户群喜欢放大看页面
于是我们给上一题的布局做一次优化。
当鼠标略过某个区块的时候，该区块会放大25%，
并且其他的区块仍然固定不动。

提示：
也许，我们其他的布局也会用到这个放大的效果哦。可以使用任何开源代码，包括曾经你自己写的。
关键字：javascript、封装、复用
第三部分：处理紧急情况
好了，我们的页面完成了。
于是我们将页面发布上网。
突然，晴天霹雳，页面无法访问了，这时候，你会怎么做？
面试题到此为止，你是否能够对答如流呢，仔细想一下，然后在翻页看一下答案。
答案部分
第一题：主要考虑几个问题：1. IE6 的 3 像素 BUG；2. 清楚浮动；
CSS代码：
div{background:#CCCCCC;}  
#first{float:left;width:100px; height:150px}  
#second{clear:left;float:left;margin-top:10px;width:100px;height:150px}  
#third{zoom:1; width:200px;margin-left:110px;_margin-left:107px; height:310px}  
XML/HTML代码
<div id="first"></div>     
<div id="second"></div>     
<div id="third"></div> 
 第二题：用javascript优化布局
提示：
也许，我们其他的布局也会用到这个放大的效果哦。
可以使用任何开源代码，包括曾经你自己写的。
关键字：javascript、封装、复用
惭愧啊，用上边那个布局我怎么也没把它优化出来，硬这头皮用绝对定位改了布局；
所以样式改成了这样：
body{ margin:0; padding:0}  
div{background:#CCCCCC; position:absolute}  
#first{width:100px; height:150px}  
#second{top:160px;width:100px;height:150px}  
#third{ width:200px; height:310px; left:110px} 
javascript 要考虑封装、复用
function zoom(id,x,y){ // 设置缩放函数参数：容器id、横向缩放倍数、纵向缩放倍数（等比例缩放时也可以设定一个参数）  
var obj=document.getElementById(id); // 获取元素对象值  
var dW=obj.clientWidth; // 获取元素宽度  
var dH=obj.clientHeight; // 获取元素高度  
//var oTop=obj.offsetTop;  
//var oLeft=obj.offsetLeft;  
obj.onmouseover=function(){ // 鼠标移入  
this.style.width=dW*x+"px"; // 横向缩放  
this.style.height=dH*y+"px"; // 纵向缩放  
this.style.backgroundColor="#f00″; // 设置调试背景  
this.style.zIndex=1; // 设置z轴优先  
}  
obj.onmouseout=function(){ // 鼠标移出，设回默认值  
this.style.width="";  
this.style.height="";  
this.style.padding="";  
this.style.backgroundColor="";  
this.style.zIndex="";  
}  
}  
zoom("first",1.25,1.25);  
zoom("second",1.25,1.25);  
zoom("third",1.25,1.25); 
第三题也许是JS代码没有放在页面的后面，加载速度慢尚未显示出来。或者是页面地址出错了。
1、 IE6的双倍边距BUG指的是什么？怎么解决？
答案：在IE6中，一个居左（或居右）浮动的元素放置进一个容器盒(box)，并在浮动元素上使用了左边距(或右边距) 在ie6内便产生双倍边距。
解决方法是：设置display：inline；

2、 web标准中定义id与class有什么区别吗 ？
答案：web标准中是不容许重复ID的,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以 使用class

3、 使用CSS如何让一个div水平居中？
答案：设置div的左右边距为auto，上下边距任意，代码如：{margin:20px auto;}

4、 标记br和p有什么区别?
答案：标记br和p都可以用来换行，但是二者是有区别的。<br>标记使当前行强行中断而另起一行，但是新行与原来的行保持相同的属性，即新行与原来的行属于同一段落，而<p>标记在换行的时候另起了一新的段落；<br>标记无对应的结束标记</br>，而 <p>标记必须和</p>配合使用，不能省略</p>。
5、如何用DIV+CSS设计下图

6、jQuery获得form中第二个input元素的方法？
答案：$(“form input”).eq(1)；
7、如何选中一个table中索引值为奇数的tr？如果为偶数的呢？
答案：奇数:$("tr:odd")；偶数：$("tr:even")；
8. ajax是什么? ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?
9. 你知道哪些JS插件，说说它们的实现原理。