标签：des   style   blog   http   color   io   os   使用   java   

1、前端性能优化、前端技术架构、调试、前端安全性问题、前端兼容性问题、nodejs、移动端开发、HTML5/CSS3、正则表达式、web前端的瓶颈（兼容性、组件（框架）不够完善等）；

2、getElementByTagName返回一个伪数组：HTML Collection；

3、getElementById只能是document.getElementById,

createElement只能是document.createElement;

4、Nodelist也是一个伪数组；

5、getElementByClassName在IE8不好用；

4、正则表达式的两种方式： a、var reg = /pattern/;

b、 var reg = new RegExp(‘pattern‘);

注意：第二种方式可以传变量，而第一种方式不行。

5、constructor：构造器（String、Number...）:，也可以得到准确的构造函数。

Var a = 123;

a.constructor == Number 或者 typeof a == “number”;

6、elem.setAttribute（name,value）;会在dom结构里添加该属性；而elem[“aa”] = ‘bb’,则只是存到内存里，用property的方式获取，或者elem.aa获取

7、elem.CurrentStyle,是IE获取样式的方法；

document.defaultView.getComputedStyle(elem,false),标准浏览器下获取样式的方式。

8、Height：元素内容的高度；

Widht:元素内容的宽度；

fullHeight:获取元素完整的高度，包含：获取元素(不论是隐藏还是显示的元素)完整的高度，包含：内容的高度和border-width，padding-top、padding-bottom；

fullWidth:获取元素(不论是隐藏还是显示的元素)完整的宽度，包含：内容的宽度和border-width，padding-right、padding-left；

offsetWidth：包含内容的宽度和border-width、padding-right、padding-left，但是不能得到隐藏元素的宽度；这个属性并不是W3C的标准，但是浏览器对它支持的很好；

offsetHeight：包含内容的高度和border-width、padding-top、padding-bottom，但是不能得到隐藏元素的宽度；

clientWidth:(可视区域的宽度)document.documentElement.clientWidth或者document.body.clientWidth(IE下适用)；注意：document.documentElement是获取HTML根元素的；

clientHeight：可视区域（不包含滚动条，但包含padding）的高度；

innerWidth:可视区域的宽度;

outerHeight：？？？；

windowWidth:可视区域的宽度;

windowHeight:可视区域的高度;

scrollWidth：内容的实际宽度（可能带有滚动条，也会把真个内容的高度计算上）；

scrollHeight：内容的实际高度（可能带有滚动条，也会把真个内容的高度计算上）；

蓝色代表属性，黑色代表自己封装的方法（wichung-1.0.js:D:\wichung培训资料）,以下同上;

9、（display：none；）与（visibility：hidden；position：absolute；）的效果一样，空间都释放了；而单独使用visibility：hidden则只会隐藏，而不会释放空间；

10、left:elem.style.left;

top:elem.style.top;

offsetLeft:相对于已定位的父元素的left(可能会用上offsetParent：已定位的父元素);

offsetTop:;

scrollLeft:带有滚动条时才有意义的一个属性，指的是实际的left;

scrollTop:带有滚动条时才有意义的一个属性，指的是实际的top;

10、pageX属性是非IE的属性，不符合W3C标准，;

clientX属性各种浏览器都适用的;

offsetX是相对于目标元素来说的（IE下）

layerX是相对于目标元素来说的（非IE下）；

11、获取亲爹：elem.parentNode;elem.offsetParent:代表最近的已定位的父元素，有可能是亲爹；

12、Core DOM:;

XML DOM :;

HTML DOM:;

13、元素节点（类型：1,没有nodeValue）、属性节点（类型：2，有nodeValue）、文本节点（类型：3，有nodeValue）、注释节点；

14、elem.childNodes会得到元素的所有节点（空格也算）；

15、Elem.children（不符合W3C标准，但是各个浏览器支持的很好）会得到元素真正的孩子，不算空格；

16、elem.firstChild（会计算上空格）与elem.firstElementChild(，不会计算上空格，之算上真正的元素IE8及以下不支持)；previousSiblings&&previousElementSibling,nextSiblings&&nextElementSibling;

17、jQuery（“#div1”）.text()可以获取div1下的文本，包括div下子元素的文本都可以得到；原生的innerText属性在火狐（textContent可以用）不适用，存在兼容性问题；

18、事件：

a) 、标准下：addEventListener（‘click’,function(){},false）;removeEventListener（）为移除事件；

IE下：attachEvent(‘onclick’,function(){})，但是attach下的this不是指定的元素，而是window;detachEvent（）为移除事件；

19、所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

GET方式：

xmlhttp.open("GET","demo_get.asp",true);

xmlhttp.send();

POST方式（以下方式是在提交表单数据时常用的，也可以写成上面get方式的形式）：

xmlhttp.open("POST","ajax_test.asp",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("fname=Bill&lname=Gates");

当readyState发生变化时，则会触发这个事件：

xmlhttp.onreadystatechange=function()

  {

  if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {

Data = xmlhttp.responseText;

//下面则进行对返回的数据data的操作。

    }

  }

几种状态：

查找常见的状态码（status）？？？？？

20、在alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字。

21、Arguments代表的是实参，等于该参数，且可读可写；fn.length等于该函数形参的个数；

22、闭包（closure）：从表现来看,是在外部函数内有一个内部函数，且该内部函数调用了外部函数的局部资源，当外部函数执行后，该函数的局部资源不会被垃圾回收机制（GC）回收：

1、For(var i=0;i<aLi.length;i++){

   2、(function(index){

   3、aLi[index].onclick = function(){

   4、Alert(index);

};

})(i);

}

第四行中，index为内部函数（第二行）的局部变量；每次该函数调用（该函数会被调用aLi.length次）完后，都不会释放该函数的局部变量（index）；

缺点：内存泄露：

1、当页面中元素被移除或替换时，若元素绑定的事件仍没被移除，在IE中不会作出恰当处理，此时要先手工移除事件，不然会存在内存泄露。   

.....

23、跨域：（带src属性（script、img、link）的都可以加载外部资源，利用这个属性的特点去实现跨域）；

{主域与子域之间的跨域：在子域里document.domain = “qq.com(主域)”;}

{不同域之间的跨域(以下也称ＪＳＯＮＰ（ｊｓｏｎ　ｐａｄｄｉｎｇ填充）,需求：第三方平台)：

在a域名下有一个文件现在向b域名（IP：192.168.25.78）请求数据：

{<script src=”http://192.168.25.78/test/test.php？name:lisi&age:23＆callback=aa”></script>

<script>

function aa(str){

//这里就能处理传回来的数据了

}

</script>

}

在b域名下的test项目下的test.php文件：

<?php

$name = $_GET[‘name’];

$sayHello = $name.’,hello’;

＄callback = $_GET[‘callback’];

echo $callback.‘(“‘.$sayHello.’”)’;

?>

24、异步加载JS，使用defer或者async属性,它会使浏览器在加载时略过（但是是在另一个进程去加载）该文件去加载其他的js文件；一般不能乱用，只有在该脚本计算量大且不着急用时才能用异步加载方式；

  <script src=”aa.js” async></script>

25、js中的类

prototype：一个类的原始的对象，通过原型下添加的任何方法，都会被实例化的对象继承；一个类中如果有this.sayHello方法，而且也有classA.prototype.sayHello。则会执行this.sayHello，这有关原型链在本类中找不到该方法，则一层一层网上找；

26、js中的继承

1）对象冒充：

function classA(sColor){//var classA = function(sColo){

this.color = sColor;

this.sayColor = function(){

alert(this.color);

};

}

function classB(sColor){

1、this.newMethod = classA;/*相当于this.newMethod =  function(){

this.color = sColor;//这个时候this是classB,而语法.color相当于给this添加了一个属性，这就相当于给classB添加了一个属性；sayColor方法也是这样添加到classB中了；

this.sayColor = function(){

alert(this.color);

};

}

;*/

2、this.newMethod(sColor);//调用之后才是真正的完成继承

3、delete this.newMethod;//这个时候已完成继承，所以newMethod已经没有作用了，就给删了

this.name = name;

}

上面第一二三行==classA.call(this,sColor);

2）prototype:prototype 对象是个模板，要实例化的对象都以这个模板为基础。总而言之，prototype 对象的任何属性和方法都被传递给那个类的所有实例。两种用途：一个是给类添加方法；另一个是继承【

classB.prototype = new ClassA();

classB.prototype.constructor = ClassB;//不写这句话则会导致classB实例化的对象的constructor成为classA；

】

27、call()和apply():只有函数才有这两个方法，与对象冒充等有关

28、事件冒泡、时间委托、事件捕获capture

javascript的typeof返回值有以下6种：

1.number（数字）;

2.string（字符串）;

3.boolean（布尔值）;

4.object（对象、数组和null）;

5.function（函数）;

6.undefined;

冒泡排序算法：

 function bubbleSort(arr){        var n=arr.length; //获取数组的长度，即有n个数在排序        var temp=null; //定义一个临时变量，交换数据用        for(var i=0; i<n-1; i++){ //外层循环n-1次            for(var j=0; j<n-1-i; j++){ //内层每次循环n-1-i次，每次循环完，都能从剩下的数当中找出一个最大的放在n-1-i的位置                if(arr[j]>arr[j+1]){ //如果a[j]>a[j+1]则交换位置                    temp=arr[j];                    arr[j]=arr[j+1];                    arr[j+1]=temp;                }            }        }        return arr; //返回排好序的数组    }

快速排序：

   function quickSort(arr){        var len=arr.length;//获取arr的长度        if(len<=1){//如果arr的长度小于等于1则直接返回arr            return arr;        }        var pIndex=Math.floor(len/2);//获取基准点的索引下标        var pivot=arr.splice(pIndex,1);//用splice方法获取基准点pivot=[arr[pIndex]],此时的arr为去除第pIndex项之后的剩余项;        var left=[];        var right=[];        for(var i=0; i<arr.length; i++){            if(arr[i]<pivot[0]){//如果小于基准点就放到数组l中                left.push(arr[i]);            }else{//如果大于等于基准点就放到右边数组中                right.push(arr[i]);            }        }        return quickSort(left).concat(pivot,quickSort(right));//递归不断重复整个过程    }

插入排序：

 function insertSort(arr){        var temp=null;//定义一个临时变量保存要插入元素的值        for(var i=1; i<arr.length; i++){//从索引位置1开始遍历数组            if(arr[i]<arr[i-1]){//只有要插入的元素小于已排好序的最大元素的时候才需要进行下面的操作                temp=arr[i];//把要插入的元素赋给一个临时变量                var p=i-1;//已排好序的数组的最后一项索引为i-1                while(temp<arr[p] && p>=0){//如果要插入的元素小于已排好序的元素并且没有到已排好数组的开始位置                    arr[p+1]=arr[p];//把大于要插入元素(temp)的已排好序元素位置往后挪一位                    p--;//从后往前遍历已经排好序的元素                }                arr[p+1]=temp;//把要插入的元素插入到已排好序的数组中,索引位置为p+1            }         }        return arr;//返回已排好序的数组    }

选择排序：

function selection_sort(unsorted){

    for (var i = 0; i < unsorted.length; i++){

        var min = unsorted[i], min_index = i;

        for (var j = i; j < unsorted.length; j++) {

            if (unsorted[j] < min){

                min = unsorted[j];

                min_index = j;

            }

        }

        if (min_index != i){

            var temp = unsorted[i];

            unsorted[i] = unsorted[min_index];

            unsorted[min_index] = temp;

        }

    }

    return unsorted;

}

希尔排序：

#include <stdio.h>#include <stdlib.h>void swap(int *p1, int *p2){      int temp;      temp=*p1;      *p1=*p2;      *p2=temp;}void shell(int *a,int d,int len){       int i,j;              for(i=d+1;i<len;i++)       {              for(j=i+d;j>=i && j<len;j--)            {                 if(a[j]<a[j-d])                      swap(&a[j],&a[j-d]);            }          }}void shellSort(int *a,int d,int len){       while(d>=1)       {            shell(a,d,len);            d=d/2;       }}

归并排序：

int merge(int start, int mid, int end)
{
    int num1[mid - start + 1];
    int num2[end - mid];    
    int i = start;
    int j = mid + 1;
    while(i <= mid){
        num1[i - start] = num[i];    
        i ++;
    }
    while(j <= end){
        num2[j - mid - 1] = num[j];
        j ++;    
    }
    
    i = 0; 
    j = 0; 
    int k = start; 
    while(i < mid - start + 1 && j < end - mid){
        if(num1[i] < num2[j]){
            num[k ++] = num1[i];    
            i ++;
        }    
        else{
            num[k ++] = num2[j];    
            j ++;
        }
    }
    while(i < mid - start + 1){
        num[k ++] = num1[i ++];    
    }
    while(j < end - mid){
        num[k ++] = num2[j ++];    
    }
}

void mergesort(int start, int end)
{
    if(start < end){
        int mid = (start + end) / 2;
        mergesort(start, mid);
        mergesort(mid + 1, end); 
        merge(start, mid, end);    
    }
    return ;
}

归并排序：O(n)

二叉树遍历：

先序遍历：

例如：遍历已知二叉树结果为：A->B->D->G->H->C->E->F

中序遍历：（左大子的左子：从上往下写->左大子的右子：从上往下写->根节点->右大子的左子：从上往下写->右大子的右子：从上往下写）

例如遍历已知二叉树的结果：B->G->D->H->A->E->C->F

后序遍历：

例如遍历已知二叉树的结果：G->H->D->B->E->F->C->A

层次遍历：

从上到下，从左到右遍历二叉树的各个结点(实现时需要借辅助容器)；

例如遍历已知二叉树的结果：A->B->C->D->E->F->G->H

29、解决跨域问题：第一题js跨域问题解决办法：1、document.domain+iframe的设置；2、动态创建script；3、利用iframe和location.hash；4、window.name实现的跨域数据传输；5、使用HTML5 postMessage；6、利用flash； 7、利用window剪贴板

30、说说nodejs的异步I/O是什么？面对负责的业务需求，多次回调的node代码场景，你有什么看法，如何让代码更好阅读和维护？

1.简单来讲，nodejs中没有多线程机制，那么是如何实现高并发访问的呢，正是由于异步I/O，所谓异步I/O是指nodejs可以以非阻塞的访问去执行代码，然后使用回调的方式来继续完成代码完成后续的工作。2.nodejs在复杂的业务情况下，会大量的产生回调的代码，并且一层层嵌套，会相当的复杂，难于维护，所以如果有可能应该尽可能的多封装一些通用好用的api接口，减少应用层开发者的回调函数数量，比如mongoose就是一个好的对native mongodb的封装。

31、为满足商业项目的开发需要，你要从一堆的开源产品里做技术选型，请问需要考虑哪些因素？

1.最重要的是要有丰富完善的开发文档，如果没有，你会很蛋疼

2.要有较多的成功案例，如果没有，你可能会成为小白鼠

3.要有活跃的社区，如果没有，碰到问题没人帮你，岂不很孤单？

4.要有大公司支持，这样的话以后可能被收购，会有更强大的支持

32、面向PC端和移动端的网页性能优化技术有哪些异同：

改善网站性能的主要策略并没有因为从PC变成手机或者平板设备而有变化，只是会参杂一些小的策略。不论在PC还是在移动浏览器上，页面展示需要的时间里，只有20%是用来读取页面的HTML的。剩下的80%是用来加载额外的像样式表、脚本文件、或者图片这样的资源和执行客户端的程序。

三个主要的改善性能的策略是：

•减少每个页面需要获取额外资源的HTTP请求数

•减少每个请求加载的大小

•优化客户端执行的优先级和脚本执行的效率片这样的资源和执行客户端的程序。

三个主要的改善性能的策略是：

•减少每个页面需要获取额外资源的HTTP请求数

•减少每个请求加载的大小

•优化客户端执行的优先级和脚本执行的效率

由于移动网络通常比桌面机器的网络慢，所以减少请求数和请求加载量是非常

重要的。由于移动端的浏览器解析HTML和执行JavaScript的效率比桌面PC低，

所以优化客户端程序也是非常关键的。另外，移动端浏览器的缓存大小比桌面PC低，所以需要有方法能重复利用本地的缓存资源。

33、请描述用户在浏览器中从输入http://www.taobao.con开始发生了什么？针对每个过程我们应该如何优化？

1.浏览器查找域名的IP地址, 减少DNS查询

2.浏览器给web服务器发送一个HTTP请求，减少http请求数量

3.服务器“处理”请求，服务器端应尽可能优化来提高处理和响应速度，比如数据库访问

4.服务器发回一个HTML响应，避免返回特别大的数据

5.浏览器开始显示HTML，将影响见面渲染速度的代码，如果加载的js，放在html的结束等

34、//在网页开发过程中，往往需要进行调试工作，假如一个线上地址（http://testcdn.com/index/index.js）出现了问题，请列出你所知道的几种快速进行调试的方式，边谈谈这几种方式的原理和优缺点？

// 1. 利用alert和console.log函数，优点简单，最简单的环境下也可以使用，缺

// 点效率低，不能深度跟踪

// 2. 利用chrome webdev和firefox firebug，优点简单强大

// 3. 利用webstrom这样的开发工具中的调试工具，优点强大，缺点对工具要

// 求较高

// 网络答案：

// 五种前端开发必备的调试技术。

// Weinre移动调试

// 优点：实现pc和手机的socket通信，从而实现实时调试。

// 缺点：每次都要在调试的页面引入js，安装麻烦

// DOM 断点

// 优点：DOM断点是一个Firebug和chrome DevTools提供的功能，当js需要操作打

// 了断点的DOM时，会自动暂停，类似debugger调试。

// 缺点：Firebug中，DOM断点可以在Script> Breakpoints里面看到

// chrome DevTools中，需要在Elements面板的DOM Breakpoints中看到

// debugger断点

// 需要调试js的时候，我们可以给需要调试的地方通过debugger打断点，代码执

// 行到断点就会暂停，这时候通过单步调试等方式就可以调试js代码

// native方法hook

// 缺点：这种方法不保证在所有浏览器中有效，比如ios的safari隐私模式下，我

// 们就不可以修改localStorage方法

// 远程映射本地调试

/*

优点：当线上某个js/css出现问题，我们可以用代理的方式，将远程的文件代

理到本地来实现远程映射调试。其实除了这个功能，还可以作为抓包工具，这

在移动端是很重要的。

*/

35、clearfix什么意思？

清除浮动的方式：a、overflow：hidden；

b、clear

c、clearfix

对比：clearfix 主要是用在浮动层的父层，而 clear主要是用在浮动层与浮动层之间，和浮动层同 一级，如果想要撑开父层的高度，clear 就要 放在最后。

<body>

    <h2>用 clear 清除浮动</h2>

    <div class="demo">

        <div class="fl item1"></div>

        <div class="fl item2"></div>

        <div class="clear"></div>

    </div>

    <h2>用 clearfix 清除浮动</h2>

    <div class="clearfix demo">

        <div class="fl item1"></div>

        <div class="fl item2"></div>

    </div>

</body>

36、img 属性tppabs代表什么？

解答：是离线浏览器下载完整个网页后，在图片或超级链接标签内加入的标签，以记录该图片或超级链接指向的原始地址。因为这个标签不是合法 标签，所以普通浏览器会忽略它。

37X-UA-Compatile:<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">:这是个是IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式，以此来解决部分兼容问题，例如模拟IE7的具体方式如下：<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />但令我好奇的是，此处这个标记后面竟然出现了chrome这样的值，难道IE也可以模拟chrome了？迅速搜索了一下，才明白原来不是微软增强了IE，而是谷歌做了个外挂：Google Chrome Frame（谷歌内嵌浏览器框架GCF）。这个插件可以让用户的IE浏览器外不变，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核，而且支持IE6、7、8等多个版本的IE浏览器，谷歌这个墙角挖的真给力！

Canvas

Canvas是一种标签，与其他标签不同的是，它用 JavaScript 在网页上绘制图像。其背景默认是透明的；

beginPath()与closePath()可以分割线条不同的状态（起点、终点、线条颜色、线条宽度等）；可得到多种状态的线条;

画动画的步骤：1、准备画布；2、清空画布（清空上一次的轨迹）；3、绘制图形；4、开启定时器并在定时器中调用相对应的API；5、重复2、3；

基本复习：

浏览器底层（原生的）->核心框架(jquery、dojo、YUI等)->框架组件->应用层（根据项目需求开发组件）

浏览器底层的问题：1、js核心语法层面薄弱（不够全面，会借用jQuery框架来补足）；2、js原生API不好用（cookie（只有document.cookie）、ajax(基本代码太多，繁杂了)等）；3、浏览器兼容性问题（js、css上的）；

Less：优点：网站的重构对前端工程师的压力会减低，不过这也形成的缺点，在less的嵌套下，一旦dom结构发生变化，则less也会产生很大的变化；

Css命名冲突的解决：设置命名空间（设定限制（类似于功能_content）、使用派生选择器（父级选择器 子选择器））；

Js命名冲突：js通过匿名空间（匿名函数）隔开共有私有；

页面处理文件的问题(可以用sea.js（遵循的是CMD规范）或者require.js遵循AMD规范)：1、手动处理组件间的依赖关系；2、加载项太多，破坏页面的整洁度(粒度越小（功能越细致越单一），可复用性强，加载的文件就多)；

Require.js中要暴露的文件用关键字define，而不需要暴露的文件用require，替代define的位置；

自定义事件：用底层的事件（DOM事件：click、mousedown、focus等；BOM事件：resize、storage等）去模拟自定义事件。自定义事件是基于观察者模式的（observe model，是一种设计模式），优点：跳出原生事件的限制，提高封装的抽象层级；【需要有自定义事件的原因：底层的事件可能不太满足业务需求（通过盒子的打开和关闭举例：只关心盒子的打开和关闭，但是底层的事件没有能满足这个open和close的事件，所以会需要自定义事件）；自定义事件的原理：会有三个方法（注册事件on：会为当前的元素的某一个类型的事件绑定多个事件；取消事件off：去检测在注册事件里是否存在，若存在，则删除；触发事件fire：循环该类型的处理函数，挨个循环执行；）；执行和调用过程：主要是什么时候触发：所有自定义的事件都是浏览器根据底层事件来调用的】；举例：

function Obserable(){this.handlers={};//持有事件处理函数}
Obserable.prototype={//重写EventTarget的原型对象
constructor:EventTarget,
on:function(type,handler){//对应于观察者模式-在相应的被观察者注册观察者
            //handlers中是否已有针对此事件类型的数组
    //没有创建一个空数组
            //把这个处理函数推入对应的handlers[type]数组，
if(typeof this.handlers[type]=="undefined"){this.handlers[type]=[];}
this.handlers[type].push(handler);},
fireEvent:function(event){if(!event.target){event.target=this;}
  if(this.handlers[event.type] instanceof Array){
                var handlers=this.handlers[event.type];//检出被观察者注册的观察者
for(var i=0;len=handlers.length;i++){handlers[i]();//回调函数执行，也就是观察者更新自己}
}}};
function handlerMessage(event){alert("处理函数被回调");}
var ob=new Obserable();ob.on(‘message‘,handlerMessage);
    ob.fireEvent({type:‘message‘});
最后，不难发现，原生态的事件，是在某一个特殊时刻（单击，获得焦点等等）发生时，由游览器把这一特殊时刻的一些信息，譬如事件类型，和其他的一些必要信息封装成event对象，触发事件处理程序时把这个event对象作为实参传入，而我们自定义的事件，当然只能由我们自己触发，传入的实参event也是我们自己传入的（这个event，想封装什么就封装什么，需要什么就封装什么）.

Function类：原生function类的问题（1、所有类继承自Object；2、object提供的帮助太少）

jQuery中继承是用$.extend(obj1,obj2)来实现

正则表达式：两种方式（1、var pattern = /pattern/;2、

Var a = ‘string’;

var reg = new RegExp(‘a’ + a +’b’）；）

正则的执行语法：

reg.test(str);

reg.exec(要匹配的字符串);-->返回一个数组，第一个代表整个字符串，第二个开始代表第一个子正则表达式匹配的结果；主要是用于有子正则的时候；如果没有子正则，则考虑用match();str.match(reg)会返回一个数组，该数组包括每个匹配的结果；str.replace(reg,string|callback);

str.search(reg)->返回该匹配的结果所对应的index与indexOf（）方法类似，只是search可以接收正则表达式;

Str.split(string\reg,howmany)->返回一个被string/reg分割的数组;

37、cookie:是指web浏览器存储的少量数据，在javascript中，cookie用于保存状态以及能够为web浏览器提供一种身份识别机制。但是使用cookie不会采用任何加密机制，因此它们是不安全的。cookie默认的有效期是很短暂的；它只能持续在web浏览器的绘画期间，一旦用户关闭浏览器，cookie保存的数据就丢失了。Cookie的有效期和整个浏览器进程的有效期一致；如果想要延长cookie的有效期，可以通过设置max-age属性；且cookie对同目录下的文件都可见；

cookie 和session 的区别：

1、cookie数据存放在客户的浏览器上，session数据放在服务器上。

2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
   考虑到安全应当使用session。

3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
   考虑到减轻服务器性能方面，应当使用COOKIE。

4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

5、所以个人建议：
   将登陆信息等重要信息存放为SESSION
   其他信息如果需要保留，可以放在COOKIE中

nodejs

Nodejs是一个让javascript运行在服务器端的开发平台；最大的特点就是采用异步I/O（nodejs使用的是单线程模型，对于所有I/O都采用异步式请求方式，避免了频繁的切换，nodejs在执行的过程中会维护一个事件队列，程序在执行时进入事件循环等待下一个时间到来，每个异步I/O请求完成后会被推送到事件队列，等待程序进程进行处理），与事件驱动、非阻塞式；其内建了一个HTTP服务器，就可直接运行；同步式I/O是高并发多线程的方式，通过时间片的切换实现，会使得CPU性能损失较大；

安装nodejs->安装npm(node package management)：；.......。。。。。。。

运行node.js文件：进入当前项目的目录，然后运行需运行的文件：node hello.js就能在控制台输出hello.js里的信息；

模块是nodejs的组成部分；nodejs提供了exports和require两个对象，其中exports是模块公开的接口，require用于从外部获取一个模块的对象；nodejs核心模块：http（其中封装了一个高效的HTTP服务器和一个简易的HTTP客户端。http.Server是一个基于事件的HTTP服务器，它的核心由Node.js下层C++部分实现，而接口由JavaScript封装，兼顾了高性能与简易性。http.request则是一个HTTP客户端工具，用于向HTTP服务器发起请求。var http = require(‘http‘);

http.createServer(function(req, res) {res.writeHead(200, { ‘Content-Type‘: ‘text/html‘});

res.write(‘<h1>Node.js</h1>‘);

res.end(‘<p>Hello World</p>‘);}).listen(3000);

console.log("HTTP server is listening at port 3000.");

）、events（Node.js本身架构就是事件式的，而它提供了唯一的接口，所以堪称Node.js事件编程的基石。events模块不仅用于用户代码与Node.js下层事件循环的交互，还几乎被所有的模块依赖。events 模块只提供了一个对象： events.EventEmitter。EventEmitter 的核心就是事件发射与事件监听器功能的封装。 ）、js（提供了对文件与目录的创建、删除、权限设置，并以及文件的打开、读写与关闭。 ）、util（提供常用函数的集合，用于弥补核心 JavaScript 的功能过于精简的不足。 ）等；常用框架：express、mongoose、body-parser等~

HTML在浏览器里的渲染原理：页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。

1.客户端浏览器开始从用户向服务器发出请求，服务器响应的将如上的HTML返回给请求的客户端浏览器中。 

2.加载从<html>标签开始，并发现<head>标签内有个外部样式文件要加载 

<link href="../css/css.css" rel="Stylesheet" type="text/css" />

3.这时客户端浏览器又向服务器发出一个请求加载css.css文件，服务器响应。 

4.此时客户端浏览器继续加载html文件里<body>里的标签，在css.css文件加载完后，同时开始渲染页面。 

5.客户端浏览器在<body>里的标签中发现一个<img>标签并且引用了服务器进而的一张名为test.jpg的图片.客户端浏览器又向服务器发出一次请求。而浏览器不会因为此时正在加载<img>标签里的图片而停止等待图片加载完，浏览器继续渲染还未完成的部分。 

6.<img>标签里的图片加载完了，则要显示出来，同时图片会占有一定的面积，又会影响到后面的布局，浏览器不得不又回来重新渲染一次这部分。 

7.总算把body里的标签加载及渲染完后，浏览器又发现了一段代码：

8.浏览器又立刻向服务器发出请求加载js.js文件，服务器响应。 

9.浏览器又在js.js文件中发现了一段代码是让<div>标签隐藏的代码，此时浏览器又要重新去渲染被隐藏的<div>部分。 

10.最后到浏览器发现了</html>为止。

  对于这种来回渲染，内行叫为reflow，reflow几乎是无法避免的，我们不能因为怕会重新渲染而去丢掉一些页面效果。但是reflow是可以优化的，比如图片在css.css样式文件中就定义好图片的高度，这要会减少重新渲染的次数。另外还有一次词叫repaint，叫重绘，repaint如果只是改变如背景颜色或者文字的颜色，repaint的速度要比reflow的速度明显快的多。

百度搜索怎么处理汉字搜索？：我的看法：其实在百度搜索框里，当输入英文字符和中文字符的结果是一样的，只是由于一开始输入的信息字符较少，而且显示在输入框里的并非是中文字符，所以一开始搜索引擎是去庞大的数据索引库（我觉得应该是在排名较前的英文库）里匹配对应输入的字符，当在英文库不能找到时，则试着去搜索排名高的中文索引库的某个字段里查找对应输入的信息，所以能实时的返回可能的结果~

seajs的原理（define(factory) 中的 factory 函数。原理是，当将 js 文件加载回来后，执行的仅是 define(factory) 函数，factory 则还未执行。执行 define 时，会扫描 factory.toString() 方法，得到当前模块依赖的文件，下载完好，再执行 factory 函数， 这样就实现了提前并行加载，但执行时看起来是同步的。 ）

1. sea.js 是怎样解决 模块加载(这里说的模块其实就是js文件加载)，

2. sea.js 是怎样解决 模块依赖

3. sea.js 是怎样解决 命名冲突

1.模块加载

　　其实，原理很简单，和手动引入js文件是一样的。

　　就是当调用有加载功能的函数 如 seajs.use 、 require 、require.async 时，

　　其内部代码会创建一个script标签，把src设置成你要引入的js文件，然后append到DOM文档中进行加载，

　　当加载完毕后，再把这个script标签移除掉，所以当我们审查元素时看不到有那个<script>标签，

但因为文件已经引入了，即使把这个script移除也不会影响代码使用.就是利用 script 标签进行模块加载

就是利用 script 标签进行模块加载

2、文件依赖

3、命名冲突，但是sea.js是用define( fn )函数来定义模块的，里面的变量都是局部的

Sea.js 与 require.js的不同：

RequireJS 遵循 AMD（异步模块定义）规范，Sea.js 遵循 CMD （通用模块定义）规范。规范的不同，导致了两者 API 不同。Sea.js 更贴近 CommonJS Modules/1.1 和 Node Modules 规范。 SeaJS只会在真正需要使用(依赖)模块时才执行该模块
SeaJS是异步加载模块的没错, 但执行模块的顺序也是严格按照模块在代码中出现(require)的顺序, 这样才更符合逻辑吧! 你说呢, RequireJS?
而RequireJS会先尽早地执行(依赖)模块, 相当于所有的require都被提前了, 而且模块执行的顺序也不一定100%就是先mod1再mod2；

而SeaJS一样是并行加载所有依赖的模块, 但不会立即执行模块, 等到真正需要(require)的时候才开始解析。

seajs优点：兼容性强，可运用在任何浏览器下；模块化开发，关注结构拆分，可提供粒度小复用性大的模块；

在 TCP/IP 中包含一系列用于处理数据通信的协议：

（1）TCP (传输控制协议：TCP是面向连接的通信协议，通过三次握手建立连接，通讯完成时要拆除连接，由于TCP是面向连接的所以只能用于端到端的通讯。TCP提供的是一种可靠的数据流服务，采用“带重传的肯定确认”技术来实现传输的可靠性。) - 应用程序之间通信 

（2）UDP (用户数据包协议：UDP是面向无连接的通讯协议，UDP数据包括目的端口号和源端口号信息，由于通讯不需要连接，所以可以实现广播发送。UDP通讯时不需要接收方确认，属于不可靠的传输，可能会出现丢包现象，实际应用中要求程序员编程验证。) - 应用程序之间的简单通信 

（3）IP (网际协议：IP层接收由更低层（网络接口层例如以太网设备驱动程序）发来的数据包，并把该数据包发送到更高层---TCP或UDP层；相反，IP层也把从TCP或UDP层接收来的数据包传送到更低层。IP数据包是不可靠的，因为IP并没有做任何事情来确认数据包是否按顺序发送的或者有没有被破坏，IP数据包中含有发送它的主机的地址（源地址）和接收它的主机的地址（目的地址）) - 计算机之间的通信 

（4）ICMP (因特网消息控制协议：ICMP与IP位于同一层，它被用来传送IP的控制信息。它主要是用来提供有关通向目的地址的路径信息。) - 针对错误和状态 

（5）DHCP (动态主机配置协议:为互联网上主机提供地址和配置参数。DHCP是基于Client/Server工作模式，DHCP服务器为需要为主机分配IP地址和提供主机配置参数。) - 针对动态寻址 

搜索引擎的基本工作原理包括如下三个过程：首先在互联网中发现、搜集网页信息；同时对信息进行提取和组织建立索引库；再由检索器根据用户输入的查询关键字，在索引库中快速检出文档，进行文档与查询的相关度评价，对将要输出的结果进行排序，并将查询结果返回给用户。

总结：

1、对前端的看法：首先，前端对于网站来说，通常是指网站的前台部分，包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本是HTML5、CSS3，以及SVG等。随着互联网产业的爆炸式增长，与之伴生的Web前端技术也在历经洗礼和蜕变。尤其是近几年随着移动终端的发展，越来越多的人开始投身或转行至新领域，这更为当今的IT产业注入了新的活力。一下这几方面是需要快速学习的：a、web移动终端开发；b、javascript的其他技术：backbone.js、node.js、zepto.js等；c、各种类库和框架的封装与开发；d、web前端开发规范；虽然现在国内几乎没有学校专门开设有关前端的课程，但是由于自己不小心的踏入，导致现在的深深的迷恋，探索的道路辛苦，但是并不枯燥，我自己也很难相信会在这条路上坚持不间断的了解它长达一年多时间，这也正是前端的魅力所在。

2、对javascript的理解：a、它是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言；它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。然而现在JavaScript也可被用于网络服务器，如Node.js。组成部分是：（1）ECMAScript，描述了该语言的语法和基本对象。（2）文档对象模型（DOM），描述处理网页内容的方法和接口。（3）浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。基本特点：（1）是一种解释性脚本语言（代码不进行预编译）；（2）主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。（3）可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。虽然它的特点很多，但是也会有一些缺点，由于javascript是运行中浏览器上的，所以安全性是一个很大的问题，但是现在可以用javascript来编写运行在服务器端的脚本--nodejs。

优点：（1）由于JavaScript运行在客户端，节省了web服务器的请求时间和带宽；（2）轻量级的脚本语言，比较容易学习；（3）运行在用户机器上，运行结果和处理相对比较快。（3）可以使用第三方附加组件来检查代码片段。

缺点：（原生：（1）安全问题：由于JavaScript在客户端运行，可能被用于黑客目的。（2）渲染问题：在不同浏览器中的处理结果可能不同。）

JQuery：

优点： （1）jQuery消除了JavaScript跨平台兼容问题。（2）相比其他JavaScript和JavaScript库，jQuery更容易使用。（3）jQuery有一个庞大的库/函数。（3）jQuery有良好的文档和帮助手册。（4）jQuery支持AJAX。

缺点： （1）不能向后兼容其他版本。（2）项目中需要包含jQuery库文件。如果包含多个版本的jQuery库，可能会发生冲突。

3、浏览器渲染页面的过程：为了要在浏览器中显示页面结构的HTML。 

（1）.客户端浏览器开始从用户向服务器发出请求，服务器响应的将如上的HTML返回给请求的客户端浏览器中。（2）.加载从<html>标签开始，并发现<head>标签内有个外部样式文件要加载 

<link href="css.css" rel="Stylesheet" type="text/css" />

（3）这时客户端浏览器又向服务器发出一个请求加载css.css文件，服务器响应。（4）此时客户端浏览器继续加载html文件里<body>里的标签，在css.css文件加载完后，同时开始渲染页面。（5）客户端浏览器在<body>里的标签中发现一个<img>标签并且引用了服务器进而的一张名为test.jpg的图片.客户端浏览器又向服务器发出一次请求。而浏览器不会因为此时正在加载<img>标签里的图片而停止等待图片加载完，浏览器会继续渲染还未完成的部分。（6）<img>标签里的图片加载完了，则要显示出来，同时图片会占有一定的面积，又会影响到后面的布局，浏览器不得不又回来重新渲染一次这部分。（7）.总算把body里的标签加载及渲染完后，浏览器又发现了一段代码： 

<script type="text/javascript" src="js/js.js"></script>

（8）浏览器又立刻向服务器发出请求加载js.js文件，服务器响应。（9）浏览器又在js.js文件中发现了一段代码是让<div>标签隐藏的代码，此时浏览器又要重新去渲染被隐藏的<div>部分。（10）最后到浏览器发现了</html>为止。 

  注意： 从上述简单的说了下浏览器加载HTML页面原理后，会明白很多时候页面打开慢的原因。页面中向服务器请求的次数多会影响到打开速度，重新渲染局部的次数量也会影响到页面打开的速度，当然这只是有时候页面打开速度慢一部分原因。对于这种来回渲染，内行叫为reflow，reflow几乎是无法避免的，我们不能因为怕会重新渲染而去丢掉一些页面效果。但是reflow是可以优化的，比如图片在css.css样式文件中就定义好图片的高度，这要会减少重新渲染的次数。另外还有一次词叫repaint，叫重绘，repaint如果只是改变如背景颜色或者文字的颜色，repaint的速度要比reflow的速度明显快的多。

4、盒模型：盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。

从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

那应该选择哪中盒子模型呢？当然是“标准 W3C 盒子模型”了。怎么样才算是选择了“标准 W3C 盒子模型”呢？很简单，就是在网页的顶部加上 DOCTYPE 声明。如果不加 DOCTYPE 声明，那么各个浏览器会根据自己的行为去理解网页，即 IE 浏览器会采用 IE 盒子模型去解释你的盒子，而 FF 会采用标准 W3C 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。反之，如果加上了 DOCTYPE 声明，那么所有浏览器都会采用标准 W3C 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。可以用下面语法检测：

....

var sBox = $.boxModel ? "标准W3C":"IE";
document.write("您的页面目前支持："+sBox+"盒子模型");......

5、W3C标准:W3C已发布了200多项影响深远的Web技术标准及实施指南，如广为业界采用的超文本标记语言（标准通用标记语言下的一个应用）、可扩展标记语言（标准通用标记语言下的一个子集）以及帮助残障人士有效获得Web内容的信息无障碍指南（WCAG）等，有效促进了Web技术的互相兼容，对互联网技术的发展和应用起到了基础性和根本性的支撑作用。[1]万维网联盟（外语缩写：W3C）标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。

6、ECMAScript标准：ECMAScript实际上是一种脚本在语法和语义上的标准；ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会）通过ECMA-262标准化的脚本程序设计语言，这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的实现和扩展。ECMA-262规定了这门语言的组成部分：语法、类型、语句、关键字、保留字、操作符、对象；

7、同步、异步、阻塞与非阻塞：

同步：函数没有执行完不返回，线程被挂起；阻塞：没有收完数据函数不返回，线程也被挂起；异步：函数立即返回，通过事件或是信号通知调用者；非阻塞：函数立即返回，通过select通知调用者。

I/O的阻塞与非阻塞
阻塞模式的I/O会造成应用程序等待，直到I/O完成。同时操作系统也支持将I/O操作设置为非阻塞模式，这时应用程序的调用将可能在没有拿到真正数据时就立即返回了，为此应用程序需要多次调用才能确认I/O操作完全完成。

I/O的同步与异步
I/O的同步与异步出现在应用程序中。如果做阻塞I/O调用，应用程序等待调用的完成的过程就是一种同步状况。相反，I/O为非阻塞模式时，应用程序则是异步的。

异步I/O与轮询技术

当进行非阻塞I/O调用时，要读到完整的数据，应用程序需要进行多次轮询，才能确保读取数据完成，以进行下一步的操作。
轮询技术的缺点在于应用程序要主动调用，会造成占用较多CPU时间片，性能较为低下。现存的轮询技术有以下这些：read、select、poll、epoll、pselect

、kqueue；在文件I/O这一块与普通的业务逻辑的回调函数不同在于它不是由我们自己的代码所触发，而是系统调用结束后，由系统触发的。 ，以在Windows平台下的实现中，启动Node.js时，便创建了一个基于IOCP的事件循环loop，并一直处于执行状态；

8、canvas:canvas 元素用于在网页上绘制图形。canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成;getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。(看时钟的代码：file:///D:/wichung培训资料/html5/clock.html)

8、对语义化的理解：分为html标签的语义化和css命名的语义化，几点好处：a、手持移动设备的无障碍阅读（手持移动设备如PDA、智能手机等可能对CSS的解析能力较弱，这时可能就需要更语义的标签来体现一个页面的易读性）；b、盲人等一些障碍人士的更好地阅读（屏幕阅读器对不同标签所发出的声音是不同的，使用更语义的标签以能传达不同信息的重要性）；c、搜索引擎的友好收录（虽然各大搜索引擎的排名规则不断的再变化，但规则里的正则始终是要匹配标签的，如果能用更语义的标签，蜘蛛爬行能够根据标签的使用来确定上下和各关键字的权重。）；d、技术趋势所趋
（正如html诞生时的初衷那样，各个标签的本义就是希望能在特定的地方使用合适的标签，而不是去用样式来表现一个不语义的标签。html5新增了更多的语义化的标签）；原本用来实现的结构，通过html5的标签我们可以更完美的表现。e、便于团队项目的可持续运作及维护（语义化的命名能够使我们在多人协作一个项目时更加有序和快捷，而不需要去纠结另一位伙伴的CSS命名是什么意思。如果是个人项目，也便于后期其他同事的修改，语义化的命名时一个项目的可读性更高。）；

10、常见的行级元素和块级元素：块级元素（address - 地址； blockquote - 块引用； center - 举中对齐块；dir - 目录列表；div - 常用块级容易，也是css layout的主要标签； dl - 定义列表；fieldset - form控制组；form - 交互表单；h1 - 大标题；h2 - 副标题 ；h3 - 3级标题； h4 - 4级标题； h5 - 5级标题； h6 - 6级标题； hr - 水平分隔线；  menu - 菜单列表； noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容；noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）； ol - 排序表单； p - 段落； pre - 格式化文本； table - 表格； ul - 非排序列表）；行级元素（a - 锚点； abbr - 缩写； acronym - 首字； b - 粗体(不推荐)； bdo - bidi override； big - 大字体； br - 换行； cite - 引用； code - 计算机代码(在引用源码的时候需要)； dfn - 定义字段； em - 强调； font - 字体设定(不推荐)； i - 斜体； img - 图片； input - 输入框； kbd - 定义键盘文本； label - 表格标签； q - 短引用； s - 中划线(不推荐)； samp - 定义范例计算机代码； select - 项目选择；small - 小字体文本； span - 常用内联容器，定义文本内区块； strike - 中划线； strong - 粗体强调； sub - 下标；sup - 上标；textarea - 多行文本输入框；tt - 电传文本；u - 下划线；var - 定义变量）；可变元素 （可变元素为根据上下文语境决定该元素为块元素或者内联元素；applet - java applet；button - 按钮；del - 删除文本 ；ins - 插入的文本；map - 图片区块(map) ；object - object对象；script - 客户端脚本）  

11、SEO：seo是指在了解搜索引擎自然排名机制的基础上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中关键词的自然排名，获得更多流量，吸引更多目标客户，从而达到网络营销及品牌建设的目标。可以从网站结构和网页信息两方面进行优化：1.网站结构方面

①避免链接无法被搜索引擎爬行，即防止蜘蛛陷阱。（JavaScript链接、flash链接等搜索引擎蜘蛛一般不能跟踪爬行。 要引擎蜘蛛能够爬到网站，要求网站要有良好的结构，符合逻辑，并且所有页面可以通过可爬行的普通HTML链接达到 ）；

③URL设计要规范化（URL越短越好；避免太多参数；目录层次尽量少；文件及目录名具描述性；URL中包含关键词）

④建立网站地图。（HTML网站地图sitemap；XML网站地图Sitemap：使用站长工具后台提交网站地图文件；使用robots文件制定网站地图文件位置）

⑤内部链接权重分配。（要想使重点内页获得高权重，最简单方法是首页直接加上几个重点内页的链接，甚至可以在侧栏推荐、促销部分加上全站链接。 ）

2.页面优化方面

①页面标题，语义化、关键词组合。

②<meta>描述标签，关键词标签。

③H标签、ALT属性的权重分配。（H标签相当于正文标题，是关键词优化的另一个页面元素，通常认为重要性仅次于页面Title；SEO中H3以下层次权重已经很低了；替换文字，可以提高可访问性，同时今年ALT文字SEO重要程度有所提高。 ）

④正文中关键词词频，文内锚链接。

⑤精简代码，提高信噪比。（精简HTML代码，使真正的文字内容比例提高，尽量减少HTML格式代码。从某种意义上来说，格式代码对关键词来说都是噪声，精简代码就是提高信噪比。 ）

12、ＤＴＤ（Document Type Definition ）：可通过比较文档和文档类型定义文件来看文档是否符合规范，元素和标签使用是否正确。DOCTYPE声明必须放在文档最顶部，在所有代码和标识之上，DOCTYPE声明是必不可少的关键组成部分。DTD语法要求DOCTYPE必须要大写，而且DOCTYPE和元素之间必须要有空格隔开。如在以上代码中DOCTYPE和根元素root之间要有空格隔开。

13、CSS Hack：针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。分类：条件hack（<!--[if <keywords>? IE <version>?]>HTML代码块<![endif]-->

Keywords:是否(“”)、大于(gt)、大于或等于(gte)、小于(lt)、小于或等于(lte)、非指定版本(!)

Version:IE6 ......

）、属性级hack(_：

选择IE6及以下。连接线（中划线）（-）亦可使用，为了避免与某些带中划线的属性混淆，所以使用下划线（_）更为合适。

*：

选择IE7及以下。诸如：（+）与（#）之类的均可使用，不过业界对（*）的认知度更高

\9：

选择IE6+

\0：

选择IE8+和Opera

[;property:value;];：

选择webkit核心浏览器（Chrome,Safari）。IE7及以下也能识别。中括号内外的3个分号必须保留，第一个分号前可以是任意规则或任意多个规则

[;color:#f00;]; 与 [color:#f00;color:#f00;]; 与 [margin:0;padding:0;color:#f00;]; 是等价的。生效的始终是中括号内的最后一条规则，所以通常选用第一种写法最为简洁。

注意：上述Hack均需运行在标准模式下，若在怪异模式下运行，这些Hack将会被不同版本的IE相互识别，导致失效。

)、选择符hack（

<hack> selector{ sRules }

* html .test{color:#090;}       /* For IE6 and earlier */* + html .test{color:#ff0;}     /* For IE7 */.test:lang(zh-cn){color:#f00;}  /* For IE8+ and not IE */.test:nth-child(1){color:#0ff;} /* For IE9+ and not IE */

）；

16、基本兼容问题：

（1）如何在IE6及更早浏览器中定义小高度的容器？

方法：

#test{overflow:hidden;height:1px;font-size:0;line-height:0;}

说明：IE6及更早浏览器之所以无法直接定义较小高度的容器是因为默认会有行高

（2）如何解决IE6及更早浏览器浮动时产生双倍边距的BUG？

方法：

#test{display:inline;}

说明：当在IE6及更早浏览器中出现浮动后margin值解析为双倍的情况，设置该元素的display属性为inline即可。

（3）如何在IE6及更早浏览器下模拟min-height效果？

方法：

#test{min-height:100px;_height:100px;}

注意此时#test不能再设置overflow的值为hidden，否则模拟min-height效果将失效

（4）如何解决按钮在IE7及更早浏览器下随着value增多两边留白也随着增加的问题？

方法：

input,button{overflow:visible;}

（5）如何解决IE7及更早浏览器下当li中出现2个或以上的浮动时，li之间产生的空白间隙的BUG？

方法：

li{vertical-align:top;}

说明：除了top值，还可以设置为text-top | middle | bottom | text-bottom，甚至特定的<length>和<percentage>值都可以

（6）如何解决IE6及更早浏览器下的3像素BUG？

方法：

.a{color:#f00;}.main{width:950px;background:#eee;}.content{float:left;width:750px;height:100px;background:#ccc;_margin-right:-3px;}.aside{height:100px;background:#aaa;} <div class="main"> <div class="content">content</div> <div class="aside">aside</div></div>

在IE6及更早浏览器下为.content设置margin-right:-3px；也可以设置.aside为浮动

（7）如何解决IE6下的文本溢出BUG（江湖匪号：“谍影重重”或“一只猪的故事”）？

BUG重现：

.test{zoom:1;overflow:hidden;width:500px;}.box1{float:left;width:100px;}.box2{float:right;width:400px;} <div class="test"> <div class="box1"></div> <!-- 注释 --> <div class="box2">↓这就是多出来的那只猪</div></div>

运行如上代码，你会发现文字发生了溢出，在IE6下会多出一只“猪”。造成此BUG的原因可能是多重混合的，如浮动，注释，宽高定义等等。并且注释条数越多，溢出的文本也会随之增多。

列举几个解决方法： 
　删除box1和box2之间所有的注释； 
　不设置浮动； 
　调整box1或box2的宽度，比如将box的宽度调整为90px

（8）如何解决IE6使用滤镜PNG图片透明后，容器内链接失效的问题？

方法：

div{width:300px;height:100px;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘*.png‘);}a{_position:relative;}

解决方法是为容器内的链接定义相对定位属性position的值为relative

（9）如何解决IE6无法识别伪对象:first-letter/:first-line的问题？

方法1：

p:first-letter {float:left;font-size:40px;font-weight:bold;}p:first-line {color:#090;}

增加空格：在伪对象选择符:first-letter/:first-line与包含规则的花括号"{"间增加空格。

方法2：

p:first-letter{float:left;font-size:40px;font-weight:bold;}p:first-line{color:#090;}

换行：将整个花括号"{"规则区域换行。细节参见E:first-letter和E:first-line选择符

（10）如何解决IE8会忽略伪对象:first-letter/:first-line里的!important规则的问题？

BUG重现：

p:first-letter {float:left;font-size:40px;font-weight:bold;color:#f00!important;color:#090;}

如上代码，在IE8下color定义都会失效，原因就是因为有color使用了!important规则。鉴于此，请尽量不要在:first-letter/:first-line里使用!important规则。

（11）如何解决IE6会忽略同一条样式体内的!important规则的问题？

BUG重现：

div{color:#f00!important;color:#000;}

如上代码，IE6及以下浏览器div的文本颜色为#000，!important并没有覆盖后面的规则，也就是说!important被忽略了。解决方案是将该样式拆分为2条，细节参见!important规则

（12）如何解决IE6及更早浏览器下当li内部元素是定义了display:block的内联元素时底部产生空白的问题？

BUG重现：

a,span{display:block;background:#ddd;} <ul> <li><a href="http://css.doyoe.com/">CSS参考手册</a></li> <li><a href="http://blog.doyoe.com/">CSS探索之旅</a></li> <li><a href="http://demo.doyoe.com/">web前端实验室</a></li> <li><span>测试li内部元素为设置了display:block的内联元素时底部产生空白</span></li></ul>

如上代码，IE6及更早浏览器每个li内部的内联元素底部都会产生空白。解决方案是给li内部的内联元素再加上zoom:1

（13）如何解决IE6及更早浏览器下未定义宽度的浮动或绝对定位元素会被内部设置了zoom:1的块元素撑开的问题？

BUG重现：

#test{zoom:1;overflow:hidden;border:1px solid #ddd;background:#eee;}#test h1{float:left;}#test .nav{float:right;background:#aaa;}#test .nav ul{zoom:1;overflow:hidden;margin:0;padding:0;list-style:none;}#test .nav li{float:left;margin:0 5px;} <div id="test"> <h1>Doyoe</h1><div class="nav"> <ul> <li><a href="http://css.doyoe.com/">CSS参考手册</a></li> <li><a href="http://blog.doyoe.com/">CSS探索之旅</a></li> <li><a href="http://demo.doyoe.com/">web前端实验</a></li> </ul></div></div>

如上代码，IE6及更早浏览器div.nav会被设置了zoom:1的ul给撑开。

列举几个解决方法： 
　设置ul为浮动元素； 
　设置ul为inline元素； 
　设置ul的width

（14）如何解决IE7及更早浏览器下子元素相对定位时父元素overflow属性的auto|hidden失效的问题？

BUG重现：

div{overflow:auto;width:260px;height:80px;border:1px solid #ddd;}p{position:relative;margin:0;} <div> <p>如果我是相对定位，我的父元素overflow属性设置为auto|hidden将失效。如果你使用的是IE及更早浏览器，你将可以看到这个BUG</p> <p>如果我是相对定位，我的父元素overflow属性设置为auto|hidden将失效。如果你使用的是IE及更早浏览器，你将可以看到这个BUG</p></div>

如上代码，在IE7及更早浏览器下你会看到div的滚动条将无法工作。解决方案是给div也设置相对定位position:relative

（15）如何解决Chrome在应用transition时页面闪动的问题？

方法：

-webkit-transform-style:preserve-3d;或-webkit-backface-visibility:hidden;

在Chrome下，使用过渡效果transition时有时会出现页面闪动

17、Css技巧和经验（在standard mode下）：

（1）如何清除图片下方出现几像素的空白间隙？

方法1：

img{display:block;}

方法2：

img{vertical-align:top;}

除了top值，还可以设置为text-top | middle | bottom | text-bottom，甚至特定的<length>和<percentage>值都可以

方法3：

#test{font-size:0;line-height:0;}

#test为img的父元素

（2）如何让文本垂直对齐文本输入框？

方法：

input{vertical-align:middle;}

（3）如何让单行文本在容器内垂直居中？

方法：

#test{height:25px;line-height:25px;}

只需设置文本的行高等于容器的高度即可

（4）如何让超链接访问后和访问前的颜色不同且访问后仍保留hover和active效果？

方法：

a:link{color:#03c;}a:visited{color:#666;}a:hover{color:#f30;}a:active{color:#c30;}

按L-V-H-A的顺序设置超链接样式即可，可速记为LoVe（喜欢）HAte（讨厌）

（5）为什么Standard mode下IE无法设置滚动条的颜色？

方法：

html{ scrollbar-3dlight-color:#999; scrollbar-darkshadow-color:#999; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eee; scrollbar-arrow-color:#000; scrollbar-face-color:#ddd; scrollbar-track-color:#eee; scrollbar-base-color:#ddd;}

将原来设置在body上的滚动条颜色样式定义到html标签选择符上即可

（6）如何使文本溢出边界不换行强制在一行内显示？

方法：

#test{width:150px;white-space:nowrap;}

设置容器的宽度和white-space为nowrap即可，其效果类似<nobr>标签

（7）如何使文本溢出边界显示为省略号？

方法（此方法Firefox5.0尚不支持）：

#test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

首先需设置将文本强制在一行内显示，然后将溢出的文本通过overflow:hidden截断，并以text-overflow:ellipsis方式将截断的文本显示为省略号。

（8）如何使连续的长字符串自动换行？

方法：

#test{width:150px;word-wrap:break-word;}

word-wrap的break-word值允许单词内换行

（9）如何清除浮动？

方法1：

#test{clear:both;}

#test为浮动元素的下一个兄弟元素

方法2：

#test{display:block;zoom:1;overflow:hidden;}

#test为浮动元素的父元素。zoom:1也可以替换为固定的width或height

方法3：

#test{zoom:1;}#test:after{display:block;clear:both;visibility:hidden;height:0;content:‘‘;}

#test为浮动元素的父元素

（10）如何定义鼠标指针的光标形状为手型并兼容所有浏览器？

方法：

#test{cursor:pointer;}

若将cursor设置为hand，将只有IE和Opera支持，且hand为非标准属性值

（11）如何让已知高度的容器在页面中水平垂直居中？

方法：

#test{position:absolute;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;}

Know More：已知高度的容器如何在页面中水平垂直居中

（12）如何让未知尺寸的图片在已知宽高的容器内水平垂直居中？

方法：

#test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}#test p{*position:absolute;*top:50%;*left:50%;margin:0;}#test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}

#test是img的祖父节点，p是img的父节点。Know More：未知尺寸的图片如何水平垂直居中

（13）如何设置span的宽度和高度（即如何设置内联元素的宽高）？

方法：

span{display:block;width:200px;height:100px;}

要使内联元素可以设置宽高，只需将其定义为块级或者内联块级元素即可。所以方法非常多样，既可以设置display属性，也可以设置float属性，或者position属性等等。

（14）如何给一个元素定义多个不同的css规则？

方法：

.a{color:#f00;}.b{background:#eee;}.c{background:#ccc;} <div class="a b">测试1</div><div class="a c">测试2</div>

多个规则之间使用空格分开，并且只有class能同时使用多个规则，id不可以

（15）如何让某个元素充满整个页面？

方法：

html,body{height:100%;margin:0;}#test{height:100%;}

（16）如何让某个元素距离窗口上右下左4边各10像素？

方法：

html,body{height:100%;margin:0;}html{_padding:10px;}#test{position:absolute;top:10px;right:10px;bottom:10px;left:10px;_position:static;_height:100%;}

（17）如何去掉超链接的虚线框？

方法：

a{outline:none;}

IE7及更早浏览器由于不支持outline属性，需要通过js的blur()方法来实现，如<a onfocus="this.blur();"...

（18）如何容器透明，内容不透明？

方法1：

.outer{width:200px;height:200px;background:#000;filter:alpha(opacity=20);opacity:.2;}.inner{width:200px;height:200px;margin-top:-200px;} <div class="outer"><!--我是透明的容器--></div><div class="inner">我是不透明的内容</div>

原理是容器层与内容层并级，容器层设置透明度，内容层通过负margin或者position绝对定位等方式覆盖到容器层上

方法2：

.outer{width:200px;height:200px;background:rgba(0,0,0,.2);background:#000\9;filter:alpha(opacity=20)\9;}.outer .inner{position:relative\9;} <div class="outer"> <div class="inner">我是不透明的内容</div></div>

高级浏览器直接使用rgba颜色值实现；IE浏览器在定义容器透明的同时，让子节点相对定位，也可达到效果

（19）如何让整个页面水平居中？

方法：

body{text-align:center;}#test2{width:960px;margin:0 auto;text-align:left;}

定义body的text-align值为center将使得IE5.5也能实现居中

（20）为什么容器的背景色没显示出来？为什么容器无法自适应内容高度？

方法：

清除浮动，方法请参考本页第9条

通常出现这样的情况都是由于没有清除浮动而引起的，所以Debug时应第一时间想到是否有未清除浮动的地方

（21）如何做1像素细边框的table？

方法1：

#test{border-collapse:collapse;border:1px solid #ddd;}#test th,#test td{border:1px solid #ddd;} <table id="test"> <tr><th>姓名</th><td>Joy Du</td></tr> <tr><th>年龄</th><td>26</td></tr></table>

方法2：

#test{border-spacing:1px;background:#ddd;}#test tr{background:#fff;} <table id="test" cellspacing="1"> <tr><th>姓名</th><td>Joy Du</td></tr> <tr><th>年龄</th><td>26</td></tr></table>

IE7及更早浏览器不支持border-spacing属性，但是可以通过table的标签属性cellspacing来替代。

（22）如何使页面文本行距始终保持为n倍字体大小的基调？

方法：

body{line-height:n;}

注意，不要给n加单位。Know More：如何使页面文本行距始终保持为n倍字体大小的基调

（23）标准模式Standard mode和怪异模式Quirks mode下的盒模型区别？

方法：

标准模式下：Element width = width + padding + border怪异模式下：Element width = width

相关资料请参阅CSS3属性box-sizing

（24）以图换字的几种方法及优劣分析

思路1：使用text-indent的负值，将内容移出容器

.test1{width:200px;height:50px;text-indent:-9999px;background:#eee url(*.png) no-repeat;} <div class="test">以图换字之内容负缩进法</div>

该方法优点在于结构简洁，不理想的地方：1.由于使用场景不同，负缩进的值可能会不一样，不易抽象成公用样式；2.当该元素为链接时，在非IE下虚线框将变得不完整；3.如果该元素被定义为内联级或者内联块级，不同浏览器下会有较多的差异

思路2：使用display:none或visibility:hidden将内容隐藏；

.test{width:200px;height:50px;background:#eee url(*.png) no-repeat;}.test span{visibility:hidden;/* 或者display:none */} <div class="test"><span>以图换字之内容隐藏法</span></div>

该方法优点在于兼容性强并且容易抽象成公用样式，缺点在于结构较复杂

思路3：使用padding或者line-height将内容挤出容器之外；

.test{overflow:hidden;width:200px;height:0;padding-top:50px;background:#eee url(*.png) no-repeat;}.test{overflow:hidden;width:200px;height:50px;line-height:50;background:#eee url(*.jpg) no-repeat;} <div class="test">以图换字之内容排挤法</div>

该方法优点在于结构简洁，缺点在于：1.由于使用场景不同，padding或line-height的值可能会不一样，不易抽象成公用样式；2.要兼容IE5.5及更早浏览器还得hack

思路4：使用超小字体和文本全透明法；

.test{overflow:hidden;width:200px;height:50px;font-size:0;line-height:0;color:rgba(0,0,0,0);background:#eee url(*.png) no-repeat;} <div class="test">以图换字之超小字体+文本全透明法</div>

该方法结构简单易用，推荐使用

（25）为什么2个相邻div的margin只有1个生效？（行级元素的边距会合并）

方法：

.box1{margin:10px 0;}.box2{margin:20px 0;} <div class="box1">box1</div><div class="box2">box2</div>

本例中box1的底部margin为10px，box2的顶部margin为20px，但表现在页面上2者之间的间隔为20px，而不是预想中的10+20px=30px，结果是选择2者之间最大的那个margin，我们把这种机制称之为“外边距合并”；外边距合并不仅仅出现在相邻的元素间，父子间同样会出现。

简单列举几点注意事项: 
　外边距合并只出现在块级元素上； 
　浮动元素不会和相邻的元素产生外边距合并； 
　绝对定位元素不会和相邻的元素产生外边距合并； 
　内联块级元素间不会产生外边距合并； 
　根元素间不会不会产生外边距合并（如html与body间）； 
　设置了属性overflow且值不为visible的块级元素不会与它的子元素发生外边距合并；

（26）如何在文本框中禁用中文输入法？

方法：

input,textarea{ime-mode:disabled;}

ime-mode为非标准属性，写该文档时只有IE和Firefox支持

（27）如何解决列表中list-style-image不能精准定位的问题？

方法：

不使用list-style-image来定义列表项目标记符号，而用background-image来代替，并通过background-position来进行定位

（28）如何解决伪对象:before和:after在input标签上的怪异表现的问题？

现象：

在编写本条目时，除了Opera，在所有浏览器下input标签使用伪对象:before和:after都没有效果，即使Opera的表现也同样令人诧异。大家可以试玩一下。浏览器版本：IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51

（29）如何解决伪对象:before和:after无法在Chrome,Safari,Opera上定义过渡和动画的问题？

现象：

在编写本条目时，除了Firefox，在所有浏览器下伪对象:before和:after无法定义过渡和动画效果。浏览器版本：IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51。如果这个过渡或动画效果是必须，可以考虑使用真实对象。

18、media query：通过不同的媒介类型和条件定义样式表规则，可以很方便的在不同的设备下实现丰富的界面；如果是大型的网站或项目，我们讲为各类型的移动终端独立编写css样式文件，此时的使用方式如下：

<link rel=”stylesheet” type=”text/css” media=”only screen and (max-device-width:480px)” href=”small_screen480.css”>

注意俩点，一是图片，在移动设备上，要做一些特定适合的小图片来匹配，如果单纯使用压缩的图片会失真，影响用户体验；二是在头部加入如下代码，目的是声明在移动设备上设置原始大小显示和是否缩放

<meta name=”viewport” content=”width=device-width; initial-scale=1.0″>

最后说下IE浏览器，因为他不支持media Queries的，使用时需要引用一个Media Query Javascript解决，如下：

<!–[if lt IE 9]>

<script src=”../../css3-mediaqueries.js”></script>

<![endif]–>

19、响应式设计：可以为不同终端的用户提供更加舒适的界面和更好的用户体验，解决移动互联网浏览；

优点：面对不同分辨率设备灵活性强；能够快捷解决多设备显示适应问题；

缺点：兼容各种设备工作量大，效率低下；代码累赘，会出现隐藏无用的元素，加载时间加长；其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果；一定程度上改变了网站原有的布局结构，会出现用户混淆的情况；

19：em和px：

关键点：1. IE无法调整那些使用px作为单位的字体大小;
　　2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位;
　　3. Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器(或内核)。

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

em有如下特点：1. em的值并不是固定的;2. em会继承父级元素的字体大小。

在写CSS的时候，需要注意两点：1. body选择器中声明Font-size=62.5%;
2. 将你的原来的px数值除以10，然后换上em作为单位；

20、css sprite:是一种网页图片应用处理方式;将网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

优点：(1)利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能;(2)CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。(3)解决了网页设计师在图片命名上的困扰;

缺点：（1）在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；（2）CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。（3）CSS Sprites在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置；

22、定位（4种）：

（1）static

默认值.无特殊定位,遵循HTML定位规则.

注意:当position为static时,定义top,left,bottom,right是不起作用的.

（2）absolute

将对象从文档流中拖出,不再占据元素在文档中的正常位置.

使用top,left,bottom,right等属性相对于其最接近的一个有定位设置的父对象进行绝对定位.

注意:a.相对于最接近的父对象;b.有定位设置的父对象.

（3）relative:

对象不可层叠,而且元素占据着元素自身原来的位置.

根据top,left,bottom,right在文档流中进行正常的偏移.

注意:相对偏移,此处的相对,是相对的对象自身.

例如:原来对象的位置是在(100,100),那么偏移之后,是在(100,100)的基础上进行偏移.

（4）fixed：

Fixed是特殊的absolute，它是以body为定位对象，按照浏览器窗口进行定位，即使拖动滚动条，其位置也不会改变；

23、各个浏览器内核：

IE->Trident

Mozilla:Gecko

Chrome:Webkit

Opera:Presto;

24、github常见操作：

git remote add upstream https://github.com/winterIce/testTitle.git(别人的repository)    // 新建分支用于存放别人的repository

git clone https://github.com/winterIce/testTitle.git  克隆到本地

git fetch branch2//更新信息

git merge branch2/master    //merge本地信息

git add . //添加新文件或者更改新文件

git remove  ** //删除文件

git commit -m ‘by who do what‘  //提交文件到本地

git push  push到服务器上

git pull origin master 从服务器上拉取信息

git remote  查看repository上的所有分支

git branch -a  查看所有分支

git branch -r 查看远程分支

git branch -d *** //删除分支

git branch *** //新建分支

git checkout ***//切换分支

git status //查看状态

git log //查看提交修改记录

Create a new repository on the command line

touch README.mdgit initgit add README.mdgit commit -m "first commit"git remote add origin git@github.com:qingjoin/TestProject.gitgit push -u origin master

Push an existing repository from the command line

git remote add origin git@github.com:qingjoin/TestProject.gitgit push -u origin master

25、Bootstrap2 与 Bootstrap3:

1. Bootstrap3之于Bootstrap2最大的变化是移动优先、扁平化设计（这个概念最核心的地方就是放弃一切装饰效果，诸如阴影，透视，纹理，渐变等等能做出3D效果的元素一概不用。所有的元素的边界都干净利落，没有任何羽化，渐变，或者阴影。 ）、以及浏览器兼容性（Bootstrap2可以兼容IE6、7、8；而Bootstrap3最低兼容IE8）方面。
2. 再见，IE7！最低从IE 8开始支持。而且因为设计已经变成移动优先，所以对IE8的支持也需要respond.js

3.更小的文件体积，Bootstrap.min.css的体积减少了40%以上。
在OS X系统上：旧的压缩后的Bootstrap.min.css和bootstrap-responsive.min.css是 106Kb + 17Kb = 123Kb。

新的Bootstrap.min.css将响应式栅格融入了进去，也就是不再区分Bootstrap.min.css和bootstrap-responsive.min.css，只有一个bootstrap.min.css 体积是67Kb;

4.且有了CDN，速度肯定更快了.

5、更优秀的组件:两个新的组件：List Group 和 Panels;新的 Modal，更加简单好用;没了@blue, @orange之类的，取而带之的说@brand-primary, @brand-success语义化;增加对视网膜屏幕的支持，如retina image mixin.

26、js常见兼容：

补充：

if(evt.ctrlKey && (key == 13 || key == 10)){ //同时按下了Ctrl和回车键
//do something;}

27、原型链：prototype是所有函数都有的一个属性，但是对象是没有这个属性的，它使您有能力向对象添加属性和方法。在每个使用每个对象的属性或方法时，js会按照原型链的顺序查找属性，直到找到。

可以这样说：有一个Person类，p是它的对象；则p的内部原型(_proto_)是Person.prototype；Person的内部原型是Function.prototype;Person.的原型是Person.prototype（所有对象的__proto__都指向其构造器的prototype ，仔细理解）；

_proto_是对象的内部原型；prototype是构造函数的原型；所有构造器/函数的__proto__都指向Function.prototype；Function.prototype的__proto__是Object.prototype；

所有对象的__proto__都指向其构造器的prototype ，但是使用对象直接量方式定义的对象其构造器（constructor）指向的是根构造器Object，使得（

function Person(name) { 

this.name = name 

} 

// 重写原型 

Person.prototype = { 

getName: function() {} 

} 

var p = new Person(‘jack‘) 

console.log(p.__proto__ === Person.prototype) // true ；这个不管怎么样都会相等

console.log(p.__proto__ === p.constructor.prototype) // false ,因为这个时候p.constructor变成了Object；

）；__proto__目前在IE6/7/8/9中都不支持。IE9中可以使用Object.getPrototypeOf(ES5)获取对象的内部原型。 

instanceof是一个二元运算符，如：A instanceof B. 其中，A必须是一个合法的JavaScript对象，B必须是一个合法的JavaScript函数 (function).

下面的代码用js模拟了new操作：

function newObj(Fun,arguments) {    var o = {};    if (Fun && typeof Fun === "function") {        o.__proto__ = Fun.prototype;        Fun.apply(o, arguments);        return o;    }}

28、OSI七层协议：

每一层都有相关、相对应的物理设备，比如常规的路由器是三层交换设备，常规的交换机是二层交换设备。

（1）物理层：主要定义物理设备标准，如网线的接口类型、光纤的接口类型、各种传输介质的传输速率等。它的主要作用是传输比特流(就是由1、0转化为电流强弱来进行传输，到达目的地后再转化为1、0，也就是我们常说的数模转换与模数转换)。这一层的数据叫做比特。

（2）数据链路层：定义了如何让格式化数据以进行传输，以及如何让控制对物理介质的访问。这一层通常还提供错误检测和纠正，以确保数据的可靠传输。

（3）网络层：在位于不同地理位置的网络中的两个主机系统之间提供连接和路径选择。Internet的发展使得从世界各站点访问信息的用户数大大增加，而网络层正是管理这种连接的层。

（4）传输层：定义了一些传输数据的协议和端口号(WWW端口80等)，如：TCP(传输控制协议，传输效率低，可靠性强，用于传输可靠性要求高，数据量大的数据)，UDP(用户数据报协议，与TCP特性恰恰相反，用于传输可靠性要求不高，数据量小的数据，如QQ聊天数据就是通过这种方式传输的）。 主要是将从下层接收的数据进行分段和传输，到达目的地址后再进行重组。常常把这一层数据叫做段。

（5）会话层：通过传输层(端口号：传输端口与接收端口)建立数据传输的通路。主要在你的系统之间发起会话或者接受会话请求(设备之间需要互相认识可以是IP也可以是MAC或者是主机名)。

（6）表示层：可确保一个系统的应用层所发送的信息可以被另一个系统的应用层读取。例如，PC程序与另一台计算机进行通信，其中一台计算机使用扩展二一十进制交换码(EBCDIC)，而另一台则使用美国信息交换标准码（ASCII）来表示相同的字符。如有必要，表示层会通过使用一种通格式来实现多种数据格式之间的转换。

（7）应用层：是最靠近用户的OSI层。这一层为用户的应用程序(例如电子邮件、文件传输和终端仿真)提供网络服务。

29、前端安全性问题：

（1）对于有些情况，只单独的进行js的判断，而不在后台进行判断，会给网站带来不安全性，在团购网站上出现过问题；

（2）eval()函数的善用也容易造成安全性问题；

（3）同源策略（它规定不同域的客户端脚本在没明确授权的情况下，不能读写对方的资源）就是对安全性作出的措施；

（4）web上有很多资源，有些可读可写，有些只可读。。这样区分也是为了安全性考虑，比如document.cookie就是可读可写；而HTTP请求头的Referer（表示请求资源）只可读；

30、三次握手（所谓三次握手就是对每次发送的数据量是怎样跟踪进行协商使数据段的发送和接收同步，根据所接收到的数据量而确定的数据确认数及数据发送、接收完毕后何时撤消联系，并建立虚连接。为了提供可靠的传送，TCP在发送新的数据之前，以特定的顺序将数据包的序号，并需要这些包传送给目标机之后的确认消息。TCP总是用来发送大批量的数据。当应用程序在收到数据后要做出确认时也要用到TCP。）

第一次握手：建立连接时，客户端发送syn包（syn=j）到服务器，并进入SYN_SENT状态，等待服务器确认；SYN：同步序列编号（Synchronize Sequence Numbers） 

第二次握手：服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态；

第三次握手：客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=k+1），此包发送完毕，客户端和服务器进入ESTABLISHED状态，完成三次握手。

完成三次握手，客户端与服务器开始传送数据，

30、HTTP协议、响应头、请求头：

HTTP协议（HyperText Transfer Protocol，超文本传输协议）是用于从WWW服务器传输超文本到本地浏览器的传送协议。它可以使浏览器更加高效，使网络传输减少。它不仅保证计算机正确快速地传输超文本文档，还确定传输文档中的哪一部分，以及哪部分内容首先显示(如文本先于图形)等 。

HTTP是一个应用层协议，由请求和响应构成，是一个标准的客户端服务器模型。HTTP是一个无状态(无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大)的协议。

HTTP请求类型有八种：

OPTIONS - 返回服务器针对特定资源所支持的HTTP请求方法。

HEAD- 向服务器索要与GET请求相一致的响应，只不过响应体将不会被返回。这一方法可以在不必传输整个响应内容的情况下，就可以获取包含在响应消息头中的元信息。

GET - 向特定的资源发出请求。

POST - 向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。

DELETE - 请求服务器删除Request-URI所标识的资源。

TRACE- 回显服务器收到的请求，主要用于测试或诊断。

CONNECT - HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。

PATCH - 用来将局部修改应用于某一资源，添加于规范RFC5789。

主要是GET和POST方式：它们二者的区别是：（1）使用GET请求时，参数在URL中能显示出来；而POST请求则不显示；前者可能存在安全性问题；（2）使用GET请求发送数据量小，POST则发送请求量大；（3）GET请求发送请求后会被缓存，POST则为never cached;

响应头

设置响应头最常用的方法是HttpServletResponse的setHeader，该方法有两个参数，分别表示应答头的名字和值。

响应头第一行也称为状态行，格式如下：

HTTP-Version 空格 Status-Code 空格 Reason-Phrase CRLF

HTTP- Version表示HTTP版本，例如为HTTP/1.1。Status- Code是结果代码，用三个数字表示。Reason-Phrase是个简单的文本描述，解释Status-Code的具体原因。Status-Code用于机器自动识别，Reason-Phrase用于人工理解。Status-Code的第一个数字代表响应类别，可能取5个不同的值。后两个数字没有分类作用。Status-Code的第一个数字代表响应的类别，后续两位描述在该类响应下发生的具体状况，具体请参见：HTTP状态码 。

Status-Code的第一个数字定义响应的类别，后两个数字没有分类的作用。第一个数字可 能取5个不同的值： 
1xx:信息响应类，表示接收到请求并且继续处理 
2xx:处理成功响应类，表示动作被成功接收、 理解和接受 
3xx:重定向响应类，为了完成指定的动作，必须接受进一步处理 
4xx:客户端错误，客户请求包含语法错 误或者是不能正确执行 
5xx:服务端错误，服务器不能正确执行一个正确的请求 

响应头域

服务器需要传递许多附加信息，这些信息不能全放在状态行里。因此，需要另行定义响应头域，用来描述这些附加信息。响应头域主要描述服务器的信息和Request-URI的信息。

请求头：HTTP客户程序（例如浏览器），向服务器发送请求的时候必须指明请求类型（一般是GET或者POST）。如有必要，客户程序还可以选择发送其他的请求头。大多数请求头并不是必需的，但Content-Length除外。对于POST请求来说Content-Length必须出现。最常用的请求头有：Cookie：这是最重要的请求头信息之一；Accept-Charset：浏览器可接受的字符集；Host：初始URL中的主机和端口；User-Agent：浏览器类型，如果Servlet返回的内容与浏览器类型有关则该值非常有用。

31、LESS：一种 动态 样式 语言。LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承，运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。

在服务器端的语法：

$lessc style.less

或者保存到一个文件中：$lessc style.less > style.css

32、前端MVC：backbone+underscore+jquey+mustache是前端MVC比较经典的组合；

33、

不同类型间的比较，规律如下

自身做布尔运算的时候的转换

1、如果+（加号）两边都是数字，则肯定是加法运算

2、如果+两边有boolean、number类型或null值的某一个，则是加法运算，比如：1+true是2，true+true也是2,null+false是0，1+null是1

3、如果加号两边有最少一边是字符串，则是字符串拼按，比如1+”abcd”

4、如果加号两边最少有一边是是对象类型，这个对象先对象它的toString方法，然后再做字符串拼接，比如：（这些涉及到一些对象的原理性的东西，先做简单了解，以后会讲）
5+[1,2,3,4]  是51,2,3,4   比如({}+{})是 "[object Object][object Object]"

5、数字、布尔、null和undefined做加运算的结果是NaN；

前端知识点总结

标签：des   style   blog   http   color   io   os   使用   java   

原文地址：http://www.cnblogs.com/sheting/p/3967901.html