Web面试题总结

1、你经常去的技术网站有哪些？如何获取技术方面的知识？

CSDN，Google，Baidu，开源中国社区，w3cschool，Google代码库,stackoverflow

2、html中的几种定位？

   1、static(默认) 。当你没有为一个元素(例如div)指定定位方式时，默认为static，也就是按照文档的流式(flow)定位，将元素放到一个合适的地方。所以在不同的分辨率下，采用流式定位能很好的自适合，取得相对较好的布局效果。一般来说，我们不需要指明当前元素的定位方式是static——因为这是默认的定位方式。

   2、relative(相对定位)。在static的基础上，如果我想让一个元素在他本来的位置做一些调整(位移)，我们可以将该元素定位设置为relative，同时指定相对位移(利用top,bottom,left,right)。有一点需要注意的是，相对定位的元素仍然在文档流中，仍然占据着他本来占据的位置空间——虽然他现在已经不在本来的位置了。

  3、absolute(绝对定位)。如果你想在一个文档(Document)中将一个元素放至指定位置，你可以使用absolute来定位，将该元素的position设置为absolute，同时使用top,bottom,left,right来定位。绝对定位会使元素从文档流中被删除，结果就是该元素原本占据的空间被其它元素所填充。

  4、fixed(固定定位)。我们知道absolute定位的参照物是“上一个定位过的父元素(static不算)”，那么如果我想让一个元素定位的参照物总是整个文档(viewport)，怎么办呢？答案是使用fixed定位，fixed定位的参照物总是当前的文档。

  5、float(浮动)

*浮动会将元素从文档流中删除，他的空间会被其它元素补上。

*浮动的参数物是父元素，是在父元素这个容器中飘。

*为了清除浮动造成的对浮动元素之后元素的影响，我们在浮动元素之后加一个div，并将这个div的clear设置为both。

*如果两个元素都设置了浮动，则两个元素并不会重叠，第一个元素占据一定空间，第二个元素紧跟其后。如果不想让第二个元素紧跟其后，可以对第二个浮动的元素使用clear。

3、IE和FireFox的事件绑定一样吗？

  不一样。

  IE： element.attachEvent(“onclick”, function) 

       element.detachEvent(“onclick”, function)

  FF：element.addEventListener(“click”, function, true)

      element.removeEventListener(“click”, function, true)

4、IE和FF的事件处理机制方式不同？

不一样，具体参考http://younglab.blog.51cto.com/416652/274132

5、javascript继承的实现

    三种方法。参看http://www.jb51.net/article/19629.htm

   

6、js处理网站设计中的跨域问题?jsonp

  Jsonp参考：http://blog.csdn.net/b10090120/article/details/8945304  

  跨域问题参考：http://blog.csdn.net/b10090120/article/details/8945320

7、浮动的作用及其用法

     在传统的印刷布局中，文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”。在网页设计中，应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样。浮动的元素仍然是网页流的一部分。这与使用绝对定位的页面元素相比是一个明显的不同。绝对定位的页面元素被从网页流里面移除了，就像印刷布局里面的文本框被设置为无视页面环绕一样。绝对定位的元素不会 影响其它元素，其它元素也不会影响它，无论它是否和其它元素挨着。

参看文档：http://www.bobd.cn/design/web/htmlcss/200909/35195.html

8、javascript实现图片放大的功能

代码参考：http://www.blueidea.com/tech/web/2009/7087.asp

步骤主要有四步：

1、将原始图片的width和height同比例放大，显示在放大框中(当然放大框中不能显示出图片的全貌，只能显示出左上角的部分)

2、计算鼠标的x,y值

3、计算浏览框的top和left属性（this指代的是原始图片）

top:pos.y - this.offsetTop - parseInt(this.getElementsByTagName('div')[0].style.height) / 2

left:pos.x - this.offsetLeft - parseInt(this.getElementsByTagName('div')[0].style.width) / 2        

4、设置放大图片的top和left值

 'top' : - (parseInt(this.getElementsByTagName('div')[0].style.top) * magnifier.m.scale) + 'px',

 'left' : - (parseInt(this.getElementsByTagName('div')[0].style.left) * magnifier.m.scale) + 'px'     

5、其他细节处理   

9、Javascript中原型protype使用

参考文档：http://www.jb51.net/article/23052.htm

10、微博中@功能实现

    参考文档：http://blog.csdn.net/b10090120/article/details/8946464

IE、FF下面CSS的解释区别、IE、FF下面脚本的区别

1.png透明背景，FF下面没有问题，IE需要用滤镜通道。

2.z-index在IE、FF下面的解释问题，IE会认为第一个z-index=0。

3.长字符串，word-wrap:break-all可以解决IE，但是FF需要overflow:hidden才行。

1、IE有outerHTML，FF没有。
2、页面元素id，IE可以直接取，FF必须document.getElementById()。
3、Ajax里边FF是new XMLHttpRequest，而IE是try new ActiveXObject(’Msxml2.XMLHTTP’) try new ActiveXObject(’Microsoft.XMLHTTP’)

4、window.event：表示当前的事件对象，IE有这个对象，FF没有，FF通过给事件处理函数传递事件对象。

5、获取事件源：IE用srcElement获取事件源，而FF用target获取事件源

6、添加，去除事件

　　 IE：element.attachEvent(“onclick”, function) element.detachEvent(“onclick”, function)

     FF：element.addEventListener(“click”, function, true)        element.removeEventListener(“click”, function, true)

7、获取标签的自定义属性

　　IE：div1.value或div1[“value”]

　　FF：可用div1.getAttribute(“value”)

8、document.getElementByName()和document.all[name]

　　IE;document.getElementByName()和document.all[name]均不能获取div元素

　　FF：可以

9、input.type的属性

　　IE：input.type只读

　　FF：input.type可读写

10、 innerText textContent outerHTML

　　IE：支持innerText, outerHTML

　　FF：支持innerText

FF下面实现outerHTML

function getOutter(ele){

     var child =  document.getElementById(ele);

     var newNode = document.createElement("div");

 newNode.appendChild(child);

 //document.body.appendChild(newNode);

 return newNode.innerHTML;

  }

web前端技术的展望
答：javascript ajax；flash AS；Flex；Sliveright

设置文字居中：center;text-align：-moz-center

父级绑定事件，利用事件冒泡

var ul = document.getElementById(“a”);

Ul.onclick = function(e){

e = e || event ;

var target = e.srcElement || e.target ;

if(target.tagName == ‘li’ ){}  

}

对String进行扩展，使其具有删除前后空格的功能

String.prototype.trim = function(){

   return this.repalce(/(^\s*)|(\s*$)/g,’’);

}

浏览器进行判断

var MSIE = navigator.userAgent.indexOf('MSIE') !== -1;     //如果是真，则为IE浏览器

不同的布局方式及其优缺点

一、 TABLE方式

优点：

1、简单易用：比较适合入门级的用户操作，用户可直接利用Dreamweaver（以下简写为“DW”）工具栏插入表格，设置长宽、对齐方式、属性等。

2、所见即所得：当用户插入一个TABLE的时候就可立即看到效果。
3、可读性好：语句编写较为简便，主要代码就是<TABLE></TABLE>、<TR></TR>、<TD></TD>等语句。

4.开发速度较快：新建网站时，从DW中直接拖入TABLE比编写DIV要快速很多。

5.兼容性较强：TABLE设计由来已久，得到浏览器的广泛支持，故显示效果很好，不会出现错位情况。

缺点：

1、代码冗余，<TABLE><TR><TD><TD></TR></TABLE>这是构成一个表格的最基本元素（此为一行一列的表格），相对<DIV></DIV>编写来说，代码繁多。

2、网页打开速度较慢：后台代码太多，导致网站打开速度慢。

二、 DIV+CSS方式

优点：

1. 标准化的页面结构：DIV+CSS是行业标准，是WEB发展的趋势。

2、代码简洁：<DIV></DIV>较TABLE来说代码精简许多。

3、页面浏览速度较快： 对于同一个页面视觉效果，采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。

4、页面布局灵活：DIV+CSS使得页面布局方便操作灵活，改版时只需改CSS样式即可实现页面重新布局，而不用改动程序，从而降低了网站改版的成本。页面效果丰富，包括视觉效果和用户体验比如拖拉。

缺点：

1、可观性差：用户在编辑的时候并不能立即看到编辑效果，需要预览才可看到。

2、操作繁琐：相对于入门级的用户或是对代码不是很了解的人来说，操作起来很是麻烦。

3、兼容性较差：DIV＋CSS设计的网站在IE浏览器里面正常显示，到火狐浏览器（FireFox ）中有可能面目全非，故设计时需要把不同浏览器样式都考虑进去。

     以上简单介绍了一下TABLE与DIV+CSS的优缺点。其实页面布局采用哪种排版都可以，如果是初入门的新手，需要从TABLE入手，待对html语言有所了解时再接触DIV+CSS；或者有的客户强调的是网站开发制作的速度，那html语言排版就可以；如果对html语言已经很了解，或者需要进行SEO优化，想做关键词推广、那最好是用DIV＋CSS来实现，这样网站的流量和页面浏览速度会快一些。