web前端面试题总结

HTML+CSS

什么是web标准，起到些什么作用，如何理解W3C组织制定的标准

（1）web标准规范要求，书写标签必须闭合、标签小写、不乱嵌套，可提高搜索机器人对网页内容的搜索几率。--- SEO
（2）建议使用外链css和js脚本，从而达到结构与行为、结构与表现的分离，提高页面的渲染速度，能更快地显示页面的内容。
（3）样式与标签的分离，更合理的语义化标签，使内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件， 从而降低维护成本、改版更方便
（4）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性
遵循w3c制定的web标准，能够使用户浏览者更方便的阅读，使网页开发者之间更好的交流。

 

xhtml和html有什么区别

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言，更严谨更纯净的 HTML 版本（可扩展超文本标签语言）
最主要的不同：
XHTML 元素必须被正确地嵌套，必须被关闭，标签名必须用小写字母，必须拥有根元素（根元素中）。

 

Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? 
DOCTYPE（是Document Type文档类型的简写）是一组机器可读的规则，它们指示(X)HTML文档中允许有什么，不允许有什么，DOCTYPE正是用来告诉浏览器使用哪种DTD（文档类型定义）,一般放在(X)HTML文档开头声明）用以告诉其他人这个文档的类型风格。

区别：严格模式是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法，如
，混杂模式则是一种向后兼容的解析方法。

触发：根据不同的DTD触发，如果没有声明，那么默认为混杂模式。

 

行内元素有哪些?块级元素有哪些?CSS的盒模型?
块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容，border,margin，padding

 

什么是FOUC？如何避免？

Flash Of Unstyled Content：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再重新显示文档，造成页面闪烁。解决方法：把样式表放到文档的head里

 

CSS引入的方式有哪些? link和@import的区别是?

<link href="aa.css" rel="stylesheet"/>
内联样式（在 HTML元素内部）内嵌（位于标签内部）外链导入
区别：link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC

link无兼容性，@import CSS2.1以下浏览器不支持
Link 支持使用javascript改变样式，后者不可

 

CSS 属性选择器

优先级：！important>内联> Id>class>标签>继承

前端页面：结构层 Html表示层 CSS行为层 js

css的基本语句构成：选择器{属性1:值1;属性2:值2;……}

内核：Ie(Ie内核)火狐（Gecko）谷歌（webkit）Opera (Presto)

 

写出几种IE6 BUG的解决方法
1. 双边距BUG，当一个盒子右浮动的同时有一个向右的margin-right的时候，IE6也会把margin-right解析为原来的2倍。当有多个同行元素都浮动了，而且都有同方向的margin，则只有最靠近浮动方向的元素有双边距bug

给float的元素添加一个display：inline或ie6写一个hack，其值是正常值的一半，

2. 3像素问题使用单float引起的后面的元素也加上float样式

3. ie6如果不设置任何父标签a:hover{}则ie6就会停止对a的子标签hover解读

给父标签a:hover{}添加一些样式

4.Ie6/ie7如果只是对一个子元素设定z-index，这个值再高，也不能覆盖与父元素同级的其他元素。所以现在通用的解决方法是对子元素的父元素也定义一个z-index的值

5. PNG图片有灰底的 使用js代码(网上有)或者使用gif图片
6. 不支持Min-height最小高度利用IE6不识别!important来实现（height:auto!important; 

height:500px; min-height:500px; ）
7. IE6下，浏览器将select元素视为窗口级元素，这时DIV无论z-index设置的多高都是无法遮住select元素的，使用iframe（select同级别元素）嵌套，div里嵌套iframe可以将select遮住
8.为什么没有办法定义1px左右的高度容器（IE6默认的行高（默认字体大小）造成的，使用over:hidden）

9. IE5-8不支持opacity，解决办法：

.opacity {

   opacity: 0.4

   filter: alpha(opacity=60); /* for IE5-7 */

   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/

}

标签上title与alt属性的区别是什么?
Alt 当图片不显示是用文字代表。
Title 为该属性提供信息

 

.解释css sprites，如何使用。
Css 精灵是网页图片应用处理方式，把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

浏览器解析CSS的两种模式：

标准模式(strict mode按W3C标准解析执行代码)和怪异模式(quirks mode使用浏览器自己的方式解析执行代码)与你网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，默认怪异模式

http://www.w3.org/TR/html4/loose.dtd">

IE6不认识!important声明，IE7、IE8、Firefox、Chrome等浏览器认识；而在怪异模式中，IE6/7/8都不认识!important声明

 

你如何对网站的文件和资源进行优化？

1、   文件合并（目的是减少http请求）：合并JavaScript和CSS文件、CSS Sprites、图像映射 （Image Map）和使用Data URI来编码图片，某些大众的js，可以直接用官网的链接来访问，而不是根目录，如jquery.js

2、   文件压缩：减少文件下载的体积，优化图片质量jpg,压缩js和css代码（GZIP 压缩你的 JS 和 CSS 文件，服务器脚本）, 删除不必要的空格、注释,将inline的script和css移到外部文件

3、   使用 CDN （内容分发网络）来托管资源；源站内容发布到最接近用户的边缘节点，使用户可就近取得所需内容，提高用户访问的响应速度和成功率

4、   缓存的使用（并且多个域名来提供缓存）

5. 优化页面元素加载顺序, 首先加载页面最初显示的内容和与之相关的JavaScript和CSS然后加载DHTML相关的东西,像什么不是最初显示相关的图片、flash、视频等很肥的资源就最后加载

6.优质代码，不要使用嵌套tables布局，结构清晰

display: block;和display:inline;的区别

block元素特点：

1.处于常规流中时，如果width没有设置，会自动填充满父容器

2.可以应用margin/padding

3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素

4.处于常规流中时布局时在前后元素位置之间（独占一个水平空间）

5.忽略vertical-align

 

inline元素特点

1.水平方向上根据direction依次布局

2.不会在元素前后进行换行

3.受white-space控制

4.margin/padding在竖直方向上无效，水平方向上有效

5.width/height属性对非替换行内元素无效，宽度由元素内容决定

6.非替换行内元素的行框高由line-height确定，替换行内元素的行框高由height,margin,padding,border决定

6.浮动或绝对定位时会转换为block

7.vertical-align属性生效

 

Line-height的百分比是针对当前字体的大小来设置的

 

Javascript

JavaScript中function定义函数的几种方法

用Function构造函数定义的函数，代码如下：

var multiply = new Function('x', 'y', 'return x * y;');

函数声明，这种方式也是最为常见的一种：

function multiply(x, y) {   return x * y; }

函数表达式，声明为匿名函数然后赋值给一变量，很常见的方式：

var multiply = function(x, y) {   return x * y; }

函数表达式，但是函数声明为命名函数再赋值给一变量

var multiply = function multi(x, y) {   return x * y; }

函数声明方式的函数可以在函数定义之前就调用

 

javascript的typeof返回哪些数据类型
Object number function boolean underfind

.例举3种强制类型转换和2种隐式类型转换?
强制（parseInt,parseFloat,number）
隐式（== – ===）

 

事件绑定和普通事件有什么区别

普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定（addEventListener）方式添加事件可以添加多个

事件模型:

捕获型事件

目前除IE浏览器外，其它主流的Firefox, Opera, Safari都支持标准的DOM事件处理模型（通过元素的addEventListener方法注册，该方法既支持注册冒泡型事件处理，又支持捕获型事件处理，但是捕获型事件先发生）

.ajax请求的时候get和post方式的区别
一个在url后面（注意缓存问题）一个放在虚拟载体里面
有大小限制
安全问题
应用不同一个是论坛等只需要请求的，一个是类似修改密码的

js 中的函数其实是对象，函数名是对 Function 对象的引用。

 

call和apply的区别
都可以用来代替另一个对象调用一个方法，但传入的参数列表形式不同

只是：如 func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3])

func来替换 func1，即执行func函数，参数是var1,var2,var3

ajax解析JSON数据

格式为{“name“: “value“,...}

eval() 函数可计算某个字符串，并执行其中的的 JavaScript代码

JSON字符串:var str1 = '{ "name": "cxh","sex": "man" }';

    JSON对象: varstr2 = { "name": "cxh", "sex": "man" };

   JSON字符串转换为JSON对象

   1.var obj = eval('('+ str + ')');

   2.var obj =str.parseJSON();

  3.var obj =JSON.parse(str);鉴于安全性考虑使用parse更靠谱

 

作用域:封闭的，不影响外部的空间。不过在 JavaScript函数可以嵌套，也就是说作用域是可以嵌套的。而为了更好也把使用域联系起来，它使用了一个在多数现代码语言中都实行的理念——闭包。如果用一句话来解析闭包——外部不能访问内部变量，内部可以外部变量,在 JavaScript有两种形式的使用域——全局/函数级使用域。换句话说，除了全局作用域，只有函数级作用域，像 if 、while、for...in等代码块是不会创建作用域的

1.       console.log(typeof sofish);// 1___

2.       console.log(momo);// 2___

3.       function sofish(){

4.         var ciaocc ='a beauty';

5.       };

6.       sofish();

7.       var momo;

8.       console.log(ciaocc);// 3___

函数和变量在代码解析的时候，会提到作用域的最顶端（这叫声明提前，变量只是定义声明提前了，即不会报错，但是值不会提前）代码，执行的时候机器看到的代码是其实是这样的：

1.       //函数和变量被提到最顶端

2.       function sofish(){

3.         var ciaocc='a beauty';

4.       };

5.       var momo;

6.        

7.       console.log(typeof sofish);// 1___

8.       console.log(momo);// 2___

9.        

10.    sofish();

11.    console.log(ciaocc);// 3___

第 1个输出的是 'function'，第 2个输出的是 undefined，但为什么最后一个是 Error —— ReferenceError:ciaocc is not defined

弹出undefined,变量i在one函数里声明提前，但是没有同仁，弹出undefined,内部作用域能找到变量，即不会再外部作用域里寻找。

js用currentStyle和getComputedStyle获取css样式（非行间）

用js的style属性可以获得html标签的样式，但是不能获取非行间样式。那么怎么用js获取css的非行间样式呢？在IE下可以用currentStyle，而在火狐下面我们需要用到getComputedStyle。

1.   xmlns="http://www.w3.org/1999/xhtml">  

2.   

3.   http-equiv="Content-Type" content="text/html; charset=utf-8" />  

4.   

5.   type="text/css">  

6. #div1{width:100px; height:100px; background:red;}  

7.    

8.  type="text/javascript">  

9.  function getStyle(obj, attr)  

10.{  

11.     if(obj.currentStyle)  

12.    {  

13.         return obj.currentStyle[attr];  

14.    }  

15.     else  

16.    {  

17.         return getComputedStyle(obj,false)[attr];  

18.    }  

19. }  

20.window.onload=function()  

21. {  

22.    var oDiv=document.getElementById('div1');  

23.     alert(getStyle(oDiv,'width'))  

24.}  

25.   

26.  

27.    

28.  

29.  id="div1">

  

30.  

 

 

事件委托是什么

让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！

.bind()只能给调用它的时候已经存在的元素绑定事件，不能给未来新增的元素绑定事件。jQuery 1.3新增的.live()方法代替.bind()方法。live()方法会把click事件绑定到$(document)对象，生成不必要的jQuery对象，导致性能损失；(function($){$("#info_table td").live("click",function(){/*显示更多信息*/}); })(jQuery);使用叫做“早委托”的hack，在整个dom元素加载之前调用live可以减少jquery对象的生成，解决上述缺点。(function($){...})(jQuery)是一个“立即执行的匿名函数”，这时候刚好document元素可用，而整个DOM还远未生成。

jQuery从1.4开始支持在使用.live()方法时配合使用一个上下文参数：

$("td",$("#info_table")[0]).live("click",function(){/ 显示更多信息 /});“受托方”就从默认的$(document)变成了$("#info_table")[0]，节省了冒泡的旅程。只能放在直接选择的元素后面，不能在连缀的DOM遍历方法后面使用，即$("#info_table td").live...可以，但$("#info_table").find("td").live...不行；

为了突破单一.bind()方法的局限性，实现事件委托，jQuery 1.3引入了.live()方法。后来，为解决“事件传播链”过长的问题，jQuery 1.4又支持为.live()方法指定上下文对象。而为了解决无谓生成元素集合的问题，jQuery 1.4.2干脆直接引入了一个新方法.delegate()

$("#info_table").delegate("td","click",function(){/*显示更多信息*/});

使用.delegate()有如下优点（或者说解决了.live()方法的如下问题）：

直接将目标元素选择符（"td"）、事件（"click"）及处理程序与“受拖方”$("#info_table")绑定，不额外收集元素、事件传播路径缩短、语义明确；

支持在连缀的DOM遍历方法后面调用，即支持$("table").find("#info").delegate...，支持精确控制；

jQuery 1.7为了解决.bind()、.live()和.delegate()并存造成的不一致性问题，将会增加一对新的事件方法：.on()和.off()：

$(elems).on(events, selector, data, fn);

$(elems).off(events, selector, fn);

闭包是什么，有什么特性，对页面有什么影响
闭包就是能够读取其他函数内部变量的函数。

即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。也就是说，内部函数会在外部函数返回后被执行。而当这个内部函数执行时，它仍然必需访问其外部函数的局部变量、参数以及其他内部函数。这些局部变量、参数和函数声明（最初时）的值是外部函数返回时的值，但也会受到内部函数的影响。-----个人理解就是：闭包是能够读取其他函数内部变量的函数，即在外面可以调用函数中的函数的变量，其实他就是将函数内外部连接起来的桥梁。

如下面例子4：

这段代码有以下两个特点：

     1、函数b嵌套在函数a内部；2、函数a返回函数b；

引用关系如下图：

         

     这样在执行完var c = a()后，变量c实际上是指向了函数b，b中用到了变量i，再执行c()后就会弹出一个窗口显示i的值(第一次为1)。这段代码其实就创建了一个闭包，为什么？因为函数a外的变量c引用了函数a内的函数b，就是说：

  当函数a的内部函数b被函数a外的一个变量引用的时候，就创建了一个我们通常所谓的“闭包”。

     当函数b执行的时候亦会像以上步骤一样。因此，执行时b的作用域链包含了3个对象：b的活动对象、a的活动对象和window对象，如下图所示：

         

如图所示，当在函数b中访问一个变量的时候，搜索顺序是：

1.    先搜索自身的活动对象，如果存在则返回，如果不存在将继续搜索函数a的活动对象，依次查找，直到找到为止。

2.    如果函数b存在prototype原型对象，则在查找完自身的活动对象后先查找自身的原型对象，再继续查找。这就是Javascript中的变量查找机制。

3.    如果整个作用域链上都无法找到，则返回undefined。

三、闭包的用途及优势

（一）、用途

    1、闭包可以读取函数内部变量    2、将函数内部变量的值始终保存在内存中

例子5：

     这个例子中的result实际上就是闭包函数b，他一共运行两次，第一次值99，第二次值为100，这就说明i一直在内存中，而不是在第一次a函数调用之后就自动清除。另外还需注意iAdd=function(){i++;}，这里iAdd是全局变量，且它的值为匿名函数，其实也是一个闭包。

（二）、优势

 1、保护函数内的变量安全。以最开始的例子为例，函数a中i只有函数b才能访问，而无法通过其他途径访问到，因此保护了i的安全性。

 2、在内存中维持一个变量。依然如前例，由于闭包，函数a中i的一直存在于内存中，因此每次执行c()，都会给i自加1。

 3、通过保护变量的安全实现JS私有属性和私有方法（不能被外部访问）。

函数a的内部函数b被函数a外的一个变量引用的时候，就创建了一个闭包。

 

如何阻止事件冒泡和默认事件
canceBubble return false

添加删除替换插入到某个接点的方法
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild

解释jsonp的原理，以及为什么不是真正的ajax

  $.ajax({

        //timeout: 3000, //超时时间设置，单位毫秒

        url: "/Ajax/AjaxHandler?callback=" + callback +"?",

        dataType: "jsonp",

         async: false, 

        data: paramsJson, //传入参数

        jsonpCallback: callback, //异步执行成功后，回调函数

success: function(json){

                 alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');

             },

        error: OnError     //异步执行失败后，回调函数

});

但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加