前端面试题

前端面试题集锦,用的着收藏。(更新中)作者: 王铎

HTML相关:

1.<!DOCTYPE>标签的定义与用法。

<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。<!DOCTYPE>从HTML4到HTML5有一定的改动,变得使用起来更加简单。

回答问题注意,在HTML4标准中,文档根元素分为HTML和XHTML,分别有三种文档类型,strict,traditional和frameset。在HTML5中,doctype只需声明根元素即可,简单便捷,参考地址:

HTML4 http://www.w3school.com.cn/tags/tag_doctype.asp

HTML5 http://www.w3school.com.cn/html5/html5_doctype.asp 

2.块级(block)元素和行内(内联inline)元素都有哪些?

首先需要了解块级元素和行内元素的区别:

1)块元素会顺序以每次另起一行的方式一直往下排,内联元素会放在一行上排列,可以使用CSS改变这种排布,只要display:block/inline。

2)其中块级元素可以设置高度,宽度,而行内元素不能控制宽度,随着行内内容变化。

3)除了块级元素和行内元素,还有一种根据上下文变化的可变元素,可变元素一旦确定其性质,需要遵守块级元素和行内元素的规则。

4)行内元素一般可以分为三种类型:对文字效果处理的,<i>等,输入信息的,input,img,textarea,还有其他的,span,code等。

所有的块级元素和行内元素总结可以自己google一下,参考地址:

http://www.w3cwhy.com/css-html/html-hkmarka.html 

3.你真的了解HTML吗? 雅虎面试题。(这个问题答案从网络寻找到的,不知道对不对,不过说的很厉害的养子)

有这么一段HTML,请挑毛病: 

  1. <P>  哥写的不是HTML,是寂寞。<br><br>  我说:<br>不要迷恋哥,哥只是一个传说

出这道题的动机是,太多人觉得HTML太简单,但它恰恰又是前端开发中最基础最重要的部分。HTML结构设计的合不合理,直接影响到代码易不易维护,灵不灵活,同时事关网页性能,协作效率。碰到不少人认为前端开发就是javascript开发,大错特错啊。javascript, html, css这三个前端开发的基础支柱,性质完全不同又紧密关联,对它们的正确理解,合理应用是专业与非专业的区别。有些后端工程师可以写出很漂亮的JS,但他们真的不懂怎么合理的把js, html, css结合起来应用。对html的准确把握,不像学一般的编程语言那样,而是建立在丰富实践经验和体会的基础上,是前端的工程师的基本功。 

这不是一道较真题或是装逼题,正经一道“画鸡蛋”的题,考的是基本功。代码如其人,对一行代码的理解足以反映出他的前端开发素养。 

言归正传。这道题的考点: 

考点1:html和 xhtml的区别 
这行代码在html 4.01 strict下是完全正确的,在xhtml 1.0 strict下是错误一堆的。所以明显是一个考点。在xhtml下所有标签是闭合的,p,br需要闭合, 标签不允许大写,P要小写。同时nbsp和br必须包含在容器里。html下这些都不是错。p在html里是可选闭合标签,是可以不用闭合的。 

这个考点告诉你xhtml是多么苛刻。这是基本考点,答对,你能拿到60分。 

考点2:考样式分离 
用nbsp控制缩进是不合理的。应该用CSS干这事。所以应该删掉nbsp 

考点3:合理使用标签 
br是强制折行标签,p是段落。原题用连续的br制造两个段落的效果,效果是达到了,但显然用的不合理,段落间距后期无法再控制。正确的做法是用两个p表现两个段落。“我说”后面是正常的文字折行用br是合理的。 

上面全答对,你就能拿到100分。 
对原题改进的结果: 
html 4.01:

1)<p>哥写的不是HTML,是寂寞。<p>我说:<br> 不要迷恋哥,哥只是一个传说

xhtml 1.0:

1)<p>哥写的不是HTML,是寂寞。</p><p>我说:<br /> 不要迷恋哥,哥只是一个传说</p>

加分:合理的用语义化标签 
在前面的基础上合理的用语义化标签,对内容进行必要的标记,是加分的。但过度的使用标签,就画蛇添足了。如“我说”的话,可以用q标签标注。

1)<p>哥写的不是HTML,是寂寞。

2)<p>我说:<br> <q>不要迷恋哥,哥只是一个传说</q>

我觉得这就够了,如果再进一步,“我”用cite标注,“HTML” 用abbr或acronym标注(至于再讨论abbr和acronym的区别就太较真了),也OK。再复杂就没必要了。

1)<p> 哥写的不是<abbr title=”Hyper Text Markup Language”>HTML</abbr>,是寂寞。

2)<p><cite> 我</cite>说:<br> <q>不要迷恋哥,哥只是一个传说</q>

 

CSS相关:

 1.介绍所知道的CSS hack技巧(如:_, *, +, \9, !important 之类)

background-color:blue; 各个浏览器都认识,这里给firefox用;

 

  background-color:red\9;\9所有的ie浏览器可识别;

 

  background-color:yellow; 是留给ie8的,最新版opera也认识,后面自有hack写了给opera认的,所以,我们就认为是给ie8留的;

 

  +background-color:pink; + ie7定了;

 

  _background-color:orange; _专门留给神奇的ie6;

 

  :root #test { background-color:purple\9; } :root是给ie9的,网上流传了个版本是 :root #test { background- color:purple;},这个,新版opera也认识,所以经笔者反复验证最终ie9特有的为:root 选择符 {属性\9;}

 

  @media all and (min-width:0px){ #test {background-color:black;} } 这个是老是跟ie抢着认的神奇的opera,必须加个,不然firefox,chrome,safari也都认识。。。

 

  @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。

还有important可以结合使用,使用时需要注意使用顺序,参考地址:

http://baike.baidu.com/view/1119452.htm 写的非常好。

2.介绍CSS盒模型。

 通俗理解盒子模型(box model)的概念就是网页中每个元素都像一个盒子一样。有高height,宽width,有盒子的厚度border,内边距就像盒子内填充物,防止物品损伤一样padding,与外面盒子的距离margin等,如果用过firebug肯定看过这张图,很像一个盒子:

深入了解盒子模型可以帮助认知盒子的最终宽度和高度。

宽度 = 自身宽度+左内边距+右内边距+左边框+右边框

高度 = 自身高度+上内边距+下内边距+上边框+下边框

还有浏览器的默认行为:

如果未声明 padding 或者 border,那他们或者值为零(使用 css reset 时),或者为浏览器的默认值(很可能不是零,尤其是那些通常没有重置的表单元素)一般在设置CSS的reset时候最好把margin和padding初始化为零,防止浏览器默认行为后期影响页面布局。

如果未声明宽度,并且盒子是静态或者相对定位的,宽度会保持 100%的 宽度,padding 和 border 会向内推动,而不是向外扩展。

但是,如果明确设置盒子的宽度为 100%,那么 padding 就会向外延展。

参考地址:

http://www.jzxue.com/wangyesheji/css/201103/22-6826.html 写的很深入。

3.CSS层叠是什么?介绍一下。

CSS层叠通俗理解可以把每个元素理解为一个个纸板,你可以根据层叠顺序把纸板放在其他纸板上,遮住下面的纸板。z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

z-index属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。

因为Z-index只能工作在被明确定义了absolute,fixed或relative 这三个定位属性的元素中,这个条件却使得很多开发人员陷入混论,所以z-index并不是那么容易使用,需要看看下面的文章,仔细了解其中原理才可以正确的使用,其中还包括一些堆叠造成的浏览器兼容问题以及解决,我不幸的又看到了老古董IE6,伤不起,

参考地址 http://www.cnblogs.com/gisdream/archive/2010/06/10/1755891.html 

4.列举一些浏览器兼容问题。

这个问题完全看平时做兼容性调整的时候积累,可以看一下网上整理的通用问题。

参考地址:http://hi.baidu.com/yqlxl/item/0926b3d9a0cde82e49e1dd22 浏览器兼容小问题集合。

http://www.douban.com/group/topic/4629864/

 

5.有时会被问到些刁钻点的题,比如position值都有哪些,CSS3都有哪些新内容,看看平时自己的积累了。

6.CSS的引入方式有几种。

1)<link rel = “stylesheet” type=”text/css” href=”mycss.css”>,由link引入的css会在加载的页面的同时加载。

2)@import 可以引入多个css文件,@import引入的文件需要在页面加载完毕后才会进行加载。

 7.CSS sprites理解、

CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题。

8.css优先级

一般情况下: 

[内联样式 [1.0.0.0] > [4位特殊性标志] > 声明先后顺序 
内联样式     >    ID选择器   >   类,属性,伪类 选择器  >   元素标签,伪元素 选择器 
[1.0.0.0]         [0.1.0.0]        [0.0.1.0]                 [0.0.0.1] 

!important > [ id > class > tag ]  

但是需要注意一些特殊情况:

参考如下:http://blog.sina.com.cn/s/blog_64d8a1d00100iu0j.html

 

9.清除浮动的方法有哪几种?

(1)添加clear:both元素。

(2)使用clearfix:after方法。

(3)使用layout方法,即zoom和overflow结合使用。

具体参见http://positioniseverything.net/easyclearing.html

 

10.前端页面有哪三层构成,分别是什么?作用是什么?

最准确的网页设计思路是把网页分成三个层次,即:结构层、表示层、行为层。

网页的结构层(structural layer)由 HTML 或 XHTML 之类的标记语言负责创建。标签,也就是那些出现在尖括号里的单词,对网页内容的语义含义做出了描述,但这些标签不包含任何关于如何显示有关内容的信息。例如,P 标签表达了这样一种语义:“这是一个文本段。”

网页的表示层(presentation layer) 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。

网页的行为层(behavior layer)负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

JavaScript相关:

1.HTTP协议的状态消息都有哪些?

HTTP状态消息也叫做错误码,可以分为五类:

① 客户方错误
  100  继续
  101  交换协议
② 成功
  200  OK
  201  已创建
  202  接收
  203  非认证信息
  204  无内容
  205  重置内容
  206  部分内容
③ 重定向
  300  多路选择
  301  永久转移
  302  暂时转移
  303  参见其它
  304  未修改(Not Modified)
  305  使用代理
④ 客户方错误
  400  错误请求(Bad Request)
  401  未认证
  402  需要付费
  403  禁止(Forbidden)
  404  未找到(Not Found)
  405  方法不允许
  406  不接受
  407  需要代理认证
  408  请求超时
  409  冲突
  410  失败
  411  需要长度
  412  条件失败
  413  请求实体太大
  414  请求URI太长
  415  不支持媒体类型
⑤ 服务器错误
  500  服务器内部错误
  501  未实现(Not Implemented)
  502  网关失败
  504  网关超时
  505 HTTP版本不支持

 2.AJAX是什么? AJAX的交互模型(流程)? AJAX跨域的解决办法?

AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML)。

AJAX采用原有的技术实现网页部分刷新功能,给用户带来更好的用户体验。

 

首先创建一个XHR(XMLHttpRequest)对象,然后发送请求,等待客户点的请求,然后调用回调函数,部分的刷新页面功能。

 关于ajax跨域问题解决,可以参考:

http://it.china-b.com/itwy/732757.html

 

3. 简述JavaScript封装。

Javascript的封装的意思,也就是用javascript实现类的方法。

我们都知道Javascript为弱类型语言,但是可以使用function函数来模拟实现类的定义和实现。

function student(){

    var _this = this;//解决function嵌套问题引起的this引用问题。

    var i = 1;//var定义的变量相当于私有的,不能被直接访问。

    this.m =1;//this定义的变量时可以直接访问的访问方法如下:var s = new student(); var k = s.m;

    this.getI() = function(){ //function在Javascript中是继承自object,也可以当成一个变量来定义,模仿方法。

       return i;

    }

    var init = function(){//构造函数,var定义的方法是私有的,不能被访问,直接在方法中调用,相当于构造函数

        i=1;//访问私有属性,直接写变量名即可

        _this .m=2;//访问公有属性,需要在变量名前加上this.

    }

    init();

}

s.count=0;//定义一个静态属性count,这个属性是属于类的,不是属于对象的。
s.staticMethod=function(){};//定义一个静态的方法

更加复杂的模拟实现参考资料:http://www.cnitblog.com/CoffeeCat/archive/2008/02/25/40138.html

4.JavaScript继承有哪两种形式形式,进行描述。

 

使用Javascript实现类的封装方法在上个问题已经提到了,那么类的继承实现有如下两种方法:

1)对象冒充

function A(name){

    this.name = name;

    this.sayHello =function(){

        alert(this.name+” say Hello!”);

    };

}

function B(name,id){

    this.temp = A;

    this.temp(name); //相当于new A();

    deletethis.temp; //防止在以后通过temp引用覆盖超类A的属性和方法

    this.id = id;

    this.checkId =function(ID){

         alert(this.id==ID)

    };

}

 当构造对象B的时候,调用temp相当于启动A的构造函数,注意这里的上下文环境中的this对象是B的实例,所以在执行A构造函数脚本时,所有A的变量和方法都会赋值给this所指的对象,即B的实例,这样子就达到B继承了A的属性方法的目的。之后删除临时引用temp,是防止维护B中对A的类对象(注意不是实例对象)的引用更改,因为更改temp会直接导致类A(注意不是类A的对象)结构的变化。 

此种方法中,可以简单的调用JS最新更新引入的两个方法,call或者apply方法使用。它们的原理是一样的,只是参数不同的版本罢了(一个可变任意参数,一个必须传入数组作为参数集合)。这里就以call为例子,解释一下用call实现的对象冒充继承。 

function Rect(width, height){

    this.width = width;

    this.height = height;

    this.area =function(){

        returnthis.width*this.height;

    };

}

function myRect(width, height, name){

    Rect.call(this,width,height);

    this.name = name;

    this.show =function(){

        alert(this.name+” with area:”+this.area());

     }

}

 关于Call方法,官方解释:调用一个对象的一个方法,以另一个对象替换当前对象。 

2)原型方式 
第二种继承方式是原型方式,所谓原型方式的继承,是指利用了prototype或者说以某种方式覆盖了prototype,从而达到属性方法复制的目的。其实现方式有很多中,可能不同框架多少会有一点区别,但是我们把握住原理,就不会有任何不理解的地方了。看一个例子(某一种实现): 

function Person(){

    this.name = “Mike”;

    this.sayGoodbye =function(){

        alert(“GoodBye!”);

    };

}

Person.prototype.sayHello =function(){alert(”Hello!”);};

function Student(){}

Student.prototype =new Person();

 

最后一句发生的效果就是将父类所有属性和方法连接到子类的prototype域上,这样子类就继承了父类所有的属性和方法,包括name、sayGoodbye和sayHello。这里与其把最后一句看成一种赋值,不如理解成一种指向关系更好一点。这种原型继承的缺陷也相当明显,就是继承时父类的构造函数时不能带参数,因为对子类prototype域的修改是在声明子类对象之后才能进行,用子类构造函数的参数去初始化父类属性是无法实现的

 5.Javascript闭包机制,如何结局等。

“官方”的解释是:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。

传统上的闭包很难看懂,原理上就是变量的作用域,在其他函数中去的另一个函数的私有变量的意思就是一个闭包。

闭包的两个用途:访问函数的私有变量;使变量始终保存在内存之中。

具体可以参考:http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html,写的很容易理解。

6.在JS中this关键字的使用场合和用法

 

 在内联中,函数内,css的expression内。闭包中和类的定义等,使用,

具体参见:http://www.cnblogs.com/birdshome/archive/2005/03/07/95931.html 

7.简述下cookie的操作,还有cookie的属性都知道哪些。

 一个域名存储的cookie总大小不能超过4096byte。这个大小的限制,包含所有的cookie名称和值在内。大多数浏览器限制一个域名不超过20个cookie

 

 

cookie操作:增加,删除,修改

 cookie属性:path指定可访问cookie的路径;等等:如下图:

 需要注意的地方:

1, 设置多个Cookie的时候必须按照上面的设置,不能”TestCK=Name1=1&Name2=2; TestCK_2=1″这样赋值
2, 如果要删除Cookie,可以设置expires属性为过期的时间,例如”document.cookie = TestCK_2=1;expires = 过期时间”
3, 对于在客户端设置的expires..这些属性,在服务器端获取不到,只能获取Value和Values属性(至于为什么会这样我也没有弄明白?)

 不管在服务器端和客户端都要注意对domain,path,httponly…. 这些的设置,在没有特殊需求的时候,别去设置他们,否则可能会造成Cookie遗失.

 8.IE与FF的JS兼容性都知道哪些。

找到了个帖子,自己可以看看,都是细节。

http://www.cnblogs.com/hemood/archive/2011/05/26/2057806.html

 

 

9.javascript中创建节点修改节点删除节点方法。

javascript中创建节点可以通过create***方法进行创建,也可以用cloneNode方法。

create***方法:

1)createElement()方法用于在HTML中创建新的元素。

2)createTextNode()方法用于创建一个文本节点。

3)createDocumentFragment()方法用于创建一个文本片段(DocumentFragment),在文档片段中可以添加各种节点,最后一次性添加到html页面中。使用这种编程模式可以减少页面更新的次数,提高页面显示的效率。

是遇到比较复杂的网页这样的添加方法使得代码特别难以维护和复杂。所有可以使用cloneNode方法来复制HTML中已有的节点。对于在网页中创建多个类似节点的情况,可以准备一个模板节点,创建新节点时首先用cloneNode方法获得模板节点副本,然后根据实际应用的需要对该副本节点进行局部内容的修改。使用cloneNode方法是一种非常高效的创建节点的方式,特别是对于复杂的页面。

DOM中可以使节点发生变化的常用方法如下:

appendChild:为当前节点新增一个新的节点,并且作为最后一个子节点。

insertBefore:为当前节点新增一个子节点,将其插入到指定子节点之前。

replaceChild:将当前节点的某个子节点替换为其他节点。

removeChild:删除当前节点的某个子节点。

所以对于删除和修改如上例子所示写就可以啦。

 

 

 

 

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s