面试题

1、Doctype标准（严格）模式(Standards Mode)、怪异(混杂)模式(Quirks Mode) 如何触发，区分他们有何意义？

http://wenku.baidu.com/view/e908f0826529647d2728520e.html

http://www.cnblogs.com/yuzhongwusan/archive/2012/02/17/2355695.html

区别：严格模式是浏览器根据规范去显示页面；混杂模式是以一种向后兼容的方式去显示

意义：决定浏览器如何渲染网站（浏览器使用那种规范去解析网页）

触发：浏览器根据doctype是否存在和使用的是那种dtd来决定。

2、img标签中title和alt的区别？

　1、含义不同

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

　2、在浏览器中的表现不同

　3、对于网站seo优化来说，title与alt还有最重要的一点：

　　搜索引擎对图片意思的判断，主要靠alt属性。所以在图片alt属性中以简要文字说明，同时包含关键词，也是页面优化的一部分。条件允许的话，可以在title属性里，进一步对图片说明。

3、iframe和frameset的区别？

一: <Frameset>为框架标记，说明该网页文档为框架组成，并设定文档中组成框架集的框架的布局，用来划分框架，每一个框架由<Frame></Frame>标记。

<Frame>用以设置组成框架集中各个框架的属性。<Frame></Frame>必须在<Frameset></Frameset>之内使用。

注意：<Frame></Frame>标记的框架顺序为从左至右或从上到下。

二: Iframe是Inline Frame的缩写，称为内联框架，它和frame如同兄弟。frame是帧标记，Iframe叫浮动帧标记，它不同于Frame标记最大的特征即这个标记所引用的HTML文件不是与另外的HTML文件相互独立显示，而是可以直接嵌入在一个HTML文件中，与这个HTML文件内容相互融合，成为一个整体；因为它可以多次在一个页面内显示同一内容，而不必重复写内容，所以人们形象称这种效果为“画中画”。

1、JS中深度克隆对象的方法？

前端开发分为哪3部分？为什么这样分？网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”

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

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

网页的表示层和行为层总是存在的，即使我们未明确地给出任何具体的指令也是如此。此时， Web 浏览器将把它的默认样式和默认事件处理函数施加在网页的结构层上。例如，浏览器会在呈现“文本段”元素时留出页边距，有些浏览器会在用户把鼠标指针悬停在某个元素的上方时弹出一个显示着该元素的 title 属性值的提示框，等等。

在所有的产品设计活动中，选择最适用的工具去解决问题是最基本的原则。具体到网页设计工作，这意味着：

使用 (X)HTML 去搭建文档的结构。
使用 CSS 去设置文档的呈现效果。
使用 DOM 脚本去实现文档的行为。

不过，在这三种技术之间存在着一些潜在的重叠区域，如：DOM 技术可以用来改变网页的结构。在 CSS 身上也可以找到这种技术相互重叠的例子。诸如 :hover 和 :focus 之类的预定义符号（伪 class 属性）使我们可以根据用户触发事件来改变呈现效果。改变元素的呈现效果当然是表示层的“势力范围”，但对用户触发事件做出反应却是行为层的领地。表示层和行为层的这种重叠形成了一个灰色地带。

伪 class 属性是 CSS 正在深入 DOM 领地证据，但 DOM 在这方面也不是毫无作为。我们完全可以利用 DOM 技术把样式信息施加在 HTML 元素身上。

分离的效果要做到即使去掉表示层和行为层，文档的内容也依然可以访问，因为“内容才是一切”。而且网页的行为层 (javascript) 与其结构 (XHTML) 是彼此互不干扰的，不能混杂在一起。还要给行为层“预留退路”，要考虑到如果你的用户禁用了 Javascript 会怎样？是不可网页还可以正常运作。

额？说了半天发现都是些理论的东西，算是些基本的思想吧，具体的大家要在不断的实践过程中去慢慢体会。

总之，这三种技术就像是一个凳子的三条腿，要想成为一名技能全面的 Web 技术师，就必须熟练掌握这三种技术，并知道每种技术最适用于哪一类问题。

2、设计一个web版的邮箱，要考虑到页面加载响应速度，同时还有大量的用户访问，也要考虑到响应速度，谈谈你的设计方案及原因？

3、

background-color:#000;

background-position:50% 0;

background-image:url(1.png);

background-repeat:no-repeat;

background-attachment:scroll;

将上述属性合并成一条background的写法？

答案如下：

background:#000 url(1.png) 50% 0 scroll no-repeat;

² 顺序可随意变动

扩展：

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

所有浏览器都支持 background-attachment 属性。

注释：任何版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

9、

border-top:1px solid #000;

border-right:2px solid #000;

border-bottom:1px solid #000;

border-left:2px solid #FF0000;

如何将上述属性合写？

答案如下：

border-1px 2px ;
border-style:solid;
border-color:#000 #000 #000 #FF0000;

10、用浮动和定位的方法实现1-2-1布局，居上面30px，居下面10px，左边宽150px，右边宽高自适应。

11、除了ul , ol 还用什么写列表？Dt dd

12、用JS创建一个a标签，在body中显示，点击在新窗口中打开。

13、头部声明短写法和长写法区别？

短的兼容ie

<!DOCTYPE html>
等于
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

可以看作是简写。

第一种简便写法就是为了解决各IE版本的兼容性的（使网页兼容IE6/IE7）。

第二种是最常见的，其实这种是遵循w3c标准走的，也是最权威的。

详细答案：

由于万恶的IE（尤其指IE6和IE7），我们在页面重构时不免要对其进行各种bug修复及差异化处理。在标准浏览器中可实现的效果在IE里却有各种离奇问题，例如IE6、IE7不能良好应对的inline-block和.clearfix问题.
所以就加入了IE版本区分代码，就是第一种的代码声明方式，主要还是解决IE版本兼容性问题。

14、HTML5的优缺点？

优点：

1）提高可用性和改进用户的友好体验；�

2）有几个新的标签，这将有助于开发人员定义重要的内容；�

3）可以给站点带来更多的多媒体元素(视频和音频)；

4）可以很好的替代FLASH和Silverlight；

5）当涉及到网站的抓取和索引的时候，对于SEO很友好；�

6）将被大量应用于移动应用程序和游戏。

缺点：

它新并不表示它安全

HTML5所构建的网页和其他语言编写的网页一样容易泄露一些敏感数据。欧洲网络信息安全机构（European Network and Information Security Agency ENISA）已经警告说HTML5可能并不够安全。2013年3月HTML5编程语言的一个漏洞被发现：它允许网站利用数GB垃圾数据对用户展开轰炸�甚至会在短时间内将硬盘塞满，多款主流浏览器均会受此影响。

15、你如何优化你的页面？

在书写HTML代码的时候，遵循标签语义化的要求，根据标签的语义性进行选择，如布局使用div、标题使用h系列标签、段落使用p标签等。
HTML代码要合理嵌套，一般情况下，行元素当中不能包含块元素，除了段落、标题类型的块元素当中，既能够包含块元素，也能够包含行元素，而段落或标题类的块元素只能够包含文字或行元素。table元素只能够直接包含thead、tbody、tfoot、caption等元素；ul/ol元素只能直接包含li元素；dl元素当中只能直接包含dt和dd元素；form表单当中只能直接包含filedset和legend，不能直接包含input元素。
使用外部引入样式表和JS行为代码，实现结构、样式和行为的相分离，降低模块间的耦合度。
CSS规则命名中，一律采用小写加中划线的方式，不使用下划线或大写字母，命名采用更简明有语义的英文单词进行组合，进行合理的缩写
CSS代码的书写顺序遵循CSS样式的渲染顺序：显示属性-自身属性-文本属性-其他
在上线之前进行CSS文件压缩
在CSS代码当中，尽量的规避掉不同浏览器的兼容问题，如果实在避免不了，也需要进行合理解决，同时尽可能的少使用hack
尽量不在代码中出现没有意义的空标签，对于可以采用空标签清除浮动的代码，可以用其他方法解决，如after伪元素
1. 使用背景图合并技术，将多张背景图合并到一张图片上，从而降低页面与服务器之间的请求次数。
2. 权衡嵌套层级以及扩展性等多个方面后，在适当位置使用三层嵌套技术。
3. 合理的填写html文件中的title、meta等内容，合理书写a标签的title、img标签的title和alt，提升网站的SEO
4. 制作网站中的404页面
5. 合理控制JS文件的引入位置，提升网站的加载速度。
6. 避免class与id重名，对于id名遵循小驼峰命名法。
7. 利用对象命名空间、匿名函数、协同命名等方法，尽量避免团队合作时产生的命名冲突。
8. 合理利用window.onload或jquery中的$(document).ready，尽量避免全局作用域被污染。
9. 合理书写代码注释
10. 对于功能类似的代码，进行函数的封装，可以使用面向对象的书写方法，提升代码的复用性和扩展性。
11. 合理利用图片预加载和图片懒加载。
12. 在DOM节点相关操作上进行优化，如利用变量存储查找到的元素，从而防止每次查找时进行页面重绘、利用文档碎片等。
13. jQuery等插件的合理引用，处理常见的浏览器兼容问题，在标签查找方式上，采用更快的查找方法，如id>标签名>类名的查找。
14. 对于AJAX的异步加载，提供加载的相关提醒。
15. 在js代码上线之前，后台人员进行相应的JS代码压缩。
什么是JSON，JSON的格式?    json就是用【JavaScript语法】写的一个【特殊】的标记【字符串】json的作用

（A）简化用JavaScript定义对象的方式
（B）也能用在AJAX中，做为数据载体之一

3、json的语法作用

（A）一个对象用{}表示
（B）一对属性之间，使用:来分隔，属性结束后，使用,来分隔，最后一个除外
（C）一个数组，使用[]符号



10、两栏自适应布局？一个大的div里面套2个小div，这2个小div是左右布局，左边div宽高固定，右边div宽高都不定，且宽度跟着它外面那个div宽走，如何实现？

11、与后台交互，除了AJAX还有什么？$http

12、表格的意义，表格的语义？

20、$(document).ready()与window.onload的区别？

1）执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

2）编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行

3）简化写法
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});

另外，需要注意一点，由于在 $(document).ready() 方法内注册的事件，只要 DOM 就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片有关的 html 下载完毕，并且已经解析为 DOM 树了，但很有可能图片还没有加载完毕，所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题，可以使用 Jquery 中另一个关于页面加载的方法 ---load() 方法。 Load() 方法会在元素的 onload 事件中绑定一个处理函数。如果处理函数绑定给 window 对象，则会在所有内容 ( 包括窗口、框架、对象和图像等 ) 加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。
Jquery 代码如下：
$(window).load(function (){
      // 编写代码
});

等价于 JavaScript 中的以下代码：
window.onload = function (){
      // 编写代码
}
21、IE和FF中JS常见bug？

22、页面重构？网站重构到底是什么

网站重构不是一种技术，不是css+div，更不是标准，网站重构是一种思想，是一种理念。

引用WebReBuild.ORG 的话：当前国内的同行普遍的认为：所谓的网站重构就是“DIV+CSS”，想法固然极度局限。但也不是另一部分的人认为是“XHTML+CSS”，因为“XHTML+CSS”只是页面重构。真正的网站重构理应包含结构、行为、表现三层次的分离以及优化，行内分工优化，以及以技术与数据、人文为主导的交互优化等。

网站重构到底要多久

重构网站先重构人，重构你的理念，不要光光追求技术，追求还原设计稿，追求浏览器的兼容性，重要的是基础和理念。当你真正了解什么是网站重构的时候网站重构也就真正开始了。

22、input中disable与readonly的区别？Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而 readonly会将该值传递出去(这种情况出现在我们将某个表单中的textarea元素设置为disabled或readonly，但是submit button却是可以使用的)。

23、如何实现图片延迟加载？

24、什么是MVC？

25、滚动条滚到最底部时加载下一页？

26、什么是冒泡和捕获？

27、闭包（至少提出4个问题）

28、听过事件驱动编程吗？

事件驱动编程：为需要处理的事件编写相应的事件处理程序。代码在事件发生时执行。

29、如何优化你的代码？

30、HTML5都有哪些新特性？你用过哪些？

31、你用过哪些CSS框架？ionic   bootstrap

大家比较熟悉的是js框架，例如prot

   otype、jQuery呀。其实XHTML+CSS也是有框架的，最著名的可能就是YUI了，是yahoo开发小组的。但是那个稍微有点庞大，而且牵扯到一些的JS框架。所以刚开始研究的时候可能稍微有点累。而这个yaml就比较单纯了。可能是现在还在发展初期所以框架很简单，东西不多，对XHMTL+CSS框架感兴趣的可以去看看哦。在国内好像还没有那个朋友在做这个东西，如果你有兴趣，自己钻研一下说不定中国的CSS框架之祖就是你了哦。
网址：http://www.yaml.de/en/ 里面有源码，开发文档以及一些使用此框架搭建的页面实例。

什么是框架？框架是一种你能够使用在你的web项目中概念上的结构。CSS框架一般是CSS文件的集合，包括基本风格的字体排版，表单样式，表格布局等等，比如：
    * typography.css 字体排版规则
    * grid.css 表格布局
    * layout.css 布局
    * form.css 表单
    * general.css CSS常规设置
下面是一些不错的CSS框架，推荐。

1）YAML CSS Framework

Dirk Jesse的能够对(X)HTML/CSS 框架扩展，支持复杂web项目。YAML基于web标准和支持各种流行浏览器，尤其支持所有IE版本包括从 5.x/Win 到 7.0.

2）Blueprint CSS

Blueprint是一个CSS框架，它的目标是减少你的CSS开发时间。它提供给你强大的CSS基础来创建你的项目，包括易于使用的grid，有效的字体排版，以及可打印的stylesheet .

3）Elements CSS Frameworks

Elements 是一个基础CSS框架，它用来帮助设计者书写CSS更加快捷简单。它不仅是一个框架，它拥有自己的工作流。它拥有你需要完成项目的各种元素，查看介绍：Overview .

4）YUI Grids CSS

很不错的框架，基础的YUI Grids CSS提供4种页面宽度，6种边框模板，以及控制行列能力。4kb文件提供了超过1000个页面布局，点击这里查看更多： Other features include:

32、JS中typeof与instanceof的区别？

http://blog.sina.com.cn/s/blog_532751d90100iv1r.html

JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空，或者是什么类型的。但它们之间还是有区别的：

typeof 是一个一元运算，放在一个运算数之前，运算数可以是任意类型。

它返回值是一个字符串，该字符串说明运算数的类型。typeof 一般只能返回如下几个结果：

number,boolean,string,function,object,undefined。我们可以使用 typeof 来获取一个变量是否存在，如 if(typeof a!="undefined"){alert("ok")}，而不要去使用 if(a) 因为如果 a 不存在（未声明）则会出错，对于 Array,Null 等特殊对象使用 typeof 一律返回 object，这正是 typeof 的局限性。

a instanceof b?alert("true"):alert("false"); //a是b的实例？真:假

instanceof 用于判断一个变量是否某个对象的实例，如 var a=new Array();alert(a instanceof Array); 会返回 true，同时 alert(a instanceof Object) 也会返回 true;这是因为 Array 是 object 的子类。再如：function test(){};var a=new test();alert(a instanceof test) 会返回

33、什么是框架编程？

框架编程概述

一个HTML页面可以这些子框架以<iframe>来标记，用来显示一个独立的HTML页面。这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问，例如从一个框架中引用另一个框架中的JavaScript变量、调用其他框架内的函数、控制另一个框架中表单的行为等。

34、对frameset、iframe、frame的js操作

http://blog.sina.com.cn/s/blog_532751d90100m1ws.html

<frameset cols="20%,80%">

      <frame src="link.html" name="link" />

      <frame src="show.html" name="show" />

</frameset>

35、jQuery能干什么？（尽量多说）

36、JS中获取、设置标签的属性是什么？

给js中的Element动态添加添加属性

setAttribute(string name,string value)增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值

getAttribute()获取指定元素的属性值

例子：var span=document.createElement("");//span为element

     span.setAttribute("id","span1");//设置属性<span id="span1"></span>

37、最新版JQ新增了哪些东西？（可实现HTML5跨平台的）

38、知道排序算法吗？

所谓排序，就是使一串记录，按照其中的某个或某些关键字的大小，递增或递减的排列起来的操作。

排序(Sorting) 是《计算机程序设计—数据结构常用算法应用指导》中的一种重要操作，它的功能是将一个数据元素（或记录）的任意序列，重新排列成一个关键字有序的序列。

排序的算法有很多，对空间的要求及其时间效率也不尽相同。下面列出了一些常见的排序算法。这里面插入排序和冒泡排序又被称作简单排序，他们对空间的要求不高，但是时间效率却不稳定；而后面三种排序相对于简单排序对空间的要求稍高一点，但时间效率却能稳定在很高的水平。基数排序是针对关键字在一个较小范围内的排序算法。

插入排序

冒泡排序

选择排序

快速排序

堆排序

归并排序

基数排序

希尔排序

39、有一个n行n列的表格，使用JQ如何实现当单击某一个td时，是该td所在的那行td和那列td都变成红色？

$('td').click(function(){

    $(this).parent().children().css('background','red');

    for(var i=0;i<$('tr').length;i++){

        $('tr').eq(i).children().eq($(this).index()).css('background','red');

    }

})

40、如何实现alert中的文本换行呢？

<script language="javascript">

    alert('你好！是不是这样？');

</script>

43、常见浏览器的兼容性问题有哪些？

44、如何解决命名冲突？

45、大学期间主修过哪些学科？

46、用过的编辑器？EditPlus/sublime/xCode/Espresso

47、背景图合并是怎么实现的？（了解CSS Sprites 图片整合技术吗？ / css中用一张背景图做页面的技术有什么优势？）http://uicss.cn/css-sprites/

CSS Sprites 的优点：当用户往U盘中拷200张图片，会等很久。但是如果弄成一个文件，再拷贝就会快很多。

CSS Sprites目的：通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。

实现方法：

1       首先将小图片整合到一张大的图片上

2       然后根据具体图标在大图上的位置，给背景定位。background-position:-8px -95px;

上山不易，只有坚持才能看到好风光。