前端知識點及面試題總結

時間 2019-11-08

標籤前端知識面試總結欄目快樂工作简体版

原文原文鏈接

一、前端性能優化、前端技術架構、調試、前端安全性問題、前端兼容性問題、nodejs、移動端開發、HTML5/CSS三、正則表達式、web前端的瓶頸（兼容性、組件（框架）不夠完善等）；javascript

二、getElementByTagName返回一個僞數組：HTML Collection；php

三、getElementById只能是document.getElementById,css

createElement只能是document.createElement;html

四、Nodelist也是一個僞數組；前端

五、getElementByClassName在IE8很差用；html5

四、正則表達式的兩種方式： a、var reg = /pattern/;java

b、 var reg = new RegExp('pattern');node

注意：第二種方式能夠傳變量，而第一種方式不行。jquery

五、constructor：構造器（String、Number...）:，也能夠獲得準確的構造函數。ios

Var a = 123;

a.constructor == Number 或者 typeof a == 「number」;

六、elem.setAttribute（name,value）;會在dom結構裏添加該屬性；而elem[「aa」] = ‘bb’,則只是存到內存裏，用property的方式獲取，或者elem.aa獲取

七、elem.CurrentStyle,是IE獲取樣式的方法；

document.defaultView.getComputedStyle(elem,false),標準瀏覽器下獲取樣式的方式。

八、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培訓資料）,如下同上;

九、（display：none；）與（visibility：hidden；position：absolute；）的效果同樣，空間都釋放了；而單獨使用visibility：hidden則只會隱藏，而不會釋放空間；

十、left:elem.style.left;

top:elem.style.top;

offsetLeft:相對於已定位的父元素的left(可能會用上offsetParent：已定位的父元素);

offsetTop:;

scrollLeft:帶有滾動條時纔有意義的一個屬性，指的是實際的left;

scrollTop:帶有滾動條時纔有意義的一個屬性，指的是實際的top;

十、pageX屬性是非IE的屬性，不符合W3C標準，;

clientX屬性各類瀏覽器都適用的;

offsetX是相對於目標元素來講的（IE下）

layerX是相對於目標元素來講的（非IE下）；

十一、獲取親爹：elem.parentNode;elem.offsetParent:表明最近的已定位的父元素，有多是親爹；

十二、Core DOM:;

XML DOM :;

HTML DOM:;

1三、元素節點（類型：1,沒有nodeValue）、屬性節點（類型：2，有nodeValue）、文本節點（類型：3，有nodeValue）、註釋節點；

1四、elem.childNodes會獲得元素的全部節點（空格也算）；

1五、Elem.children（不符合W3C標準，可是各個瀏覽器支持的很好）會獲得元素真正的孩子，不算空格；

1六、elem.firstChild（會計算上空格）與elem.firstElementChild(，不會計算上空格，之算上真正的元素IE8及如下不支持)；previousSiblings&&previousElementSibling,nextSiblings&&nextElementSibling;

1七、jQuery（「#div1」）.text()能夠獲取div1下的文本，包括div下子元素的文本均可以獲得；原生的innerText屬性在火狐（textContent能夠用）不適用，存在兼容性問題；

1八、事件：

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

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

1九、全部現代瀏覽器均支持 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的操做。

}

幾種狀態：

readyState

存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。

0: 請求未初始化

1: 服務器鏈接已創建

2: 請求已接收

3: 請求處理中

4: 請求已完成，且響應已就緒

status

200: "OK"

404: 未找到頁面

查找常見的狀態碼（status）？？？？？

20、在alt和title同時設置的時候，alt做爲圖片的替代文字出現，title是圖片的解釋文字。

2一、Arguments表明的是實參，等於該參數，且可讀可寫；fn.length等於該函數形參的個數；

2二、閉包（closure）：從表現來看,是在外部函數內有一個內部函數，且該內部函數調用了外部函數的局部資源，當外部函數執行後，該函數的局部資源不會被垃圾回收機制（GC）回收：

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

二、(function(index){

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

四、Alert(index);

};

})(i);

}

第四行中，index爲內部函數（第二行）的局部變量；每次該函數調用（該函數會被調用aLi.length次）完後，都不會釋放該函數的局部變量（index）；

缺點：內存泄露：

一、當頁面中元素被移除或替換時，若元素綁定的事件仍沒被移除，在IE中不會做出恰當處理，此時要先手工移除事件，否則會存在內存泄露。

.....

2三、跨域：（帶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>

function aa(str){

//這裏就能處理傳回來的數據了

}

</script>

}

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

<?php

$name = $_GET[‘name’];

$sayHello = $name.’,hello’;

＄callback = $_GET[‘callback’];

echo $callback.‘(「‘.$sayHello.’」)’;

2四、異步加載JS，使用defer或者async屬性,它會使瀏覽器在加載時略過（可是是在另外一個進程去加載）該文件去加載其餘的js文件；通常不能亂用，只有在該腳本計算量大且不着急用時才能用異步加載方式；

2五、js中的類

prototype：一個類的原始的對象，經過原型下添加的任何方法，都會被實例化的對象繼承；一個類中若是有this.sayHello方法，並且也有classA.prototype.sayHello。則會執行this.sayHello，這有關原型鏈在本類中找不到該方法，則一層一層網上找；

2六、js中的繼承

1）對象冒充：

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

this.color = sColor;

this.sayColor = function(){

alert(this.color);

};

}

function classB(sColor){

一、this.newMethod = classA;/*至關於this.newMethod = function(){

this.color = sColor;//這個時候this是classB,而語法.color至關於給this添加了一個屬性，這就至關於給classB添加了一個屬性；sayColor方法也是這樣添加到classB中了；

this.sayColor = function(){

alert(this.color);

};

}

;*/

二、this.newMethod(sColor);//調用以後纔是真正的完成繼承

三、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；

】

2七、call()和apply():只有函數纔有這兩個方法，與對象冒充等有關

2八、事件冒泡、時間委託、事件捕獲capture

javascript的typeof返回值有如下6種：

1.number（數字）;

2.string（字符串）;

3.boolean（布爾值）;

4.object（對象、數組和null）;

5.function（函數）;

6.undefined;

名稱	複雜度	說明	備註
冒泡排序 Bubble Sort	O(N*N)	將待排序的元素看做是豎着排列的「氣泡」，較小的元素比較輕，從而要往上浮
插入排序 Insertion sort	O(N*N)	逐一取出元素，在已經排序的元素序列中從後向前掃描，放到適當的位置	起初，已經排序的元素序列爲空
選擇排序	O(N*N)	首先在未排序序列中找到最小元素，存放到排序序列的起始位置，而後，再從剩餘未排序元素中繼續尋找最小元素，而後放到排序序列末尾。以此遞歸。
快速排序 Quick Sort	O(n *log2(n))	先選擇中間值，而後把比它小的放在左邊，大的放在右邊（具體的實現是從兩邊找，找到一對後交換）。而後對兩邊分別使用這個過程（遞歸）。
堆排序HeapSort	O(n *log2(n))	利用堆（heaps）這種數據結構來構造的一種排序算法。堆是一個近似徹底二叉樹結構，並同時知足堆屬性：即子節點的鍵值或索引老是小於（或者大於）它的父節點。	近似徹底二叉樹
希爾排序 SHELL	O(n1+￡) 0<￡<1	選擇一個步長(Step) ,而後按間隔爲步長的單元進行排序.遞歸,步長逐漸變小,直至爲1.
箱排序 Bin Sort	O(n)	設置若干個箱子，把關鍵字等於 k 的記錄全都裝入到第k 個箱子裏 ( 分配 ) ，而後按序號依次將各非空的箱子首尾鏈接起來 ( 收集 ) 。	分配排序的一種：經過" 分配 " 和 " 收集 " 過程來實現排序。
桶排序 Bucket Sort	O(n)	桶排序的思想是把 [0 ， 1) 劃分爲 n 個大小相同的子區間，每一子區間是一個桶。	分配排序的一種：經過" 分配 " 和 " 收集 " 過程來實現排序。

冒泡排序算法：

快速排序：

插入排序：

選擇排序：

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)

排序法	平均時間	最差情形	穩定度	額外空間	備註
冒泡	O(n2)	O(n2)	穩定	O(1)	n小時較好
交換	O(n2)	O(n2)	不穩定	O(1)	n小時較好
選擇	O(n2)	O(n2)	不穩定	O(1)	n小時較好
插入	O(n2)	O(n2)	穩定	O(1)	大部分已排序時較好
基數	O(logRB)	O(logRB)	穩定	O(n)	B是真數(0-9)，R是基數(個十百)
Shell	O(nlogn)	O(ns) 1<s<2	不穩定	O(1)	s是所選分組
快速	O(nlogn)	O(n2)	不穩定	O(nlogn)	n大時較好
歸併	O(nlogn)	O(nlogn)	穩定	O(1)	n大時較好
堆	O(nlogn)	O(nlogn)	不穩定	O(1)	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

2九、解決跨域問題：第一題js跨域問題解決辦法：一、document.domain+iframe的設置；二、動態建立script；三、利用iframe和location.hash；四、window.name實現的跨域數據傳輸；五、使用HTML5 postMessage；六、利用flash；七、利用window剪貼板

30、說說nodejs的異步I/O是什麼？面對負責的業務需求，屢次回調的node代碼場景，你有什麼見解，如何讓代碼更好閱讀和維護？

1.簡單來說，nodejs中沒有多線程機制，那麼是如何實現高併發訪問的呢，正是因爲異步I/O，所謂異步I/O是指nodejs能夠以非阻塞的訪問去執行代碼，而後使用回調的方式來繼續完成代碼完成後續的工做。2.nodejs在複雜的業務狀況下，會大量的產生回調的代碼，而且一層層嵌套，會至關的複雜，難於維護，因此若是有可能應該儘量的多封裝一些通用好用的api接口，減小應用層開發者的回調函數數量，好比mongoose就是一個好的對native mongodb的封裝。

3一、爲知足商業項目的開發須要，你要從一堆的開源產品裏作技術選型，請問須要考慮哪些因素？

1.最重要的是要有豐富完善的開發文檔，若是沒有，你會很蛋疼

2.要有較多的成功案例，若是沒有，你可能會成爲小白鼠

3.要有活躍的社區，若是沒有，碰到問題沒人幫你，豈不很孤單？

4.要有大公司支持，這樣的話之後可能被收購，會有更強大的支持

3二、面向PC端和移動端的網頁性能優化技術有哪些異同：

改善網站性能的主要策略並無由於從PC變成手機或者平板設備而有變化，只是會參雜一些小的策略。不論在PC仍是在移動瀏覽器上，頁面展現須要的時間裏，只有20%是用來讀取頁面的HTML的。剩下的80%是用來加載額外的像樣式表、腳本文件、或者圖片這樣的資源和執行客戶端的程序。

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

•減小每一個頁面須要獲取額外資源的HTTP請求數

•減小每一個請求加載的大小

•優化客戶端執行的優先級和腳本執行的效率片這樣的資源和執行客戶端的程序。

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

•減小每一個頁面須要獲取額外資源的HTTP請求數

•減小每一個請求加載的大小

•優化客戶端執行的優先級和腳本執行的效率

因爲移動網絡一般比桌面機器的網絡慢，因此減小請求數和請求加載量是很是

重要的。因爲移動端的瀏覽器解析HTML和執行JavaScript的效率比桌面PC低，

因此優化客戶端程序也是很是關鍵的。另外，移動端瀏覽器的緩存大小比桌面PC低，因此須要有方法能重複利用本地的緩存資源。

3三、請描述用戶在瀏覽器中從輸入http://www.taobao.con開始發生了什麼？針對每一個過程咱們應該如何優化？

1.瀏覽器查找域名的IP地址, 減小DNS查詢

2.瀏覽器給web服務器發送一個HTTP請求，減小http請求數量

3.服務器「處理」請求，服務器端應儘量優化來提升處理和響應速度，好比數據庫訪問

4.服務器發回一個HTML響應，避免返回特別大的數據

5.瀏覽器開始顯示HTML，將影響見面渲染速度的代碼，若是加載的js，放在html的結束等

3四、//在網頁開發過程當中，每每須要進行調試工做，假如一個線上地址（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出現問題，咱們能夠用代理的方式，將遠程的文件代

理到本地來實現遠程映射調試。其實除了這個功能，還能夠做爲抓包工具，這

在移動端是很重要的。

3五、clearfix什麼意思？

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

b、clear

c、clearfix

對比：clearfix 主要是用在浮動層的父層，而 clear主要是用在浮動層與浮動層之間，和浮動層同一級，若是想要撐開父層的高度，clear 就要放在最後。

<body>

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

</div>

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

</div>

</body>

3六、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瀏覽器內核，並且支持IE六、七、8等多個版本的IE瀏覽器，谷歌這個牆角挖的真給力！

Canvas

Canvas是一種標籤，與其餘標籤不一樣的是，它用 JavaScript 在網頁上繪製圖像。其背景默認是透明的；

beginPath()與closePath()能夠分割線條不一樣的狀態（起點、終點、線條顏色、線條寬度等）；可獲得多種狀態的線條;

畫動畫的步驟：一、準備畫布；二、清空畫布（清空上一次的軌跡）；三、繪製圖形；四、開啓定時器並在定時器中調用相對應的API；五、重複二、3；

基本複習：

瀏覽器底層（原生的）->核心框架(jquery、dojo、YUI等)->框架組件->應用層（根據項目需求開發組件）

瀏覽器底層的問題：一、js核心語法層面薄弱（不夠全面，會借用jQuery框架來補足）；二、js原生API很差用（cookie（只有document.cookie）、ajax(基本代碼太多，繁雜了)等）；三、瀏覽器兼容性問題（js、css上的）；

Less：優勢：網站的重構對前端工程師的壓力會減低，不過這也造成的缺點，在less的嵌套下，一旦dom結構發生變化，則less也會產生很大的變化；

Css命名衝突的解決：設置命名空間（設定限制（相似於功能_content）、使用派生選擇器（父級選擇器子選擇器））；

Js命名衝突：js經過匿名空間（匿名函數）隔開共有私有；

頁面處理文件的問題(能夠用sea.js（遵循的是CMD規範）或者require.js遵循AMD規範)：一、手動處理組件間的依賴關係；二、加載項太多，破壞頁面的整潔度(粒度越小（功能越細緻越單一），可複用性強，加載的文件就多)；

Require.js中要暴露的文件用關鍵字define，而不須要暴露的文件用require，替代define的位置；

自定義事件：用底層的事件（DOM事件：click、mousedown、focus等；BOM事件：resize、storage等）去模擬自定義事件。自定義事件是基於觀察者模式的（observe model，是一種設計模式），優勢：跳出原生事件的限制，提升封裝的抽象層級；【須要有自定義事件的緣由：底層的事件可能不太知足業務需求（經過盒子的打開和關閉舉例：只關心盒子的打開和關閉，可是底層的事件沒有能知足這個open和close的事件，因此會須要自定義事件）；自定義事件的原理：會有三個方法（註冊事件on：會爲當前的元素的某一個類型的事件綁定多個事件；取消事件off：去檢測在註冊事件裏是否存在，若存在，則刪除；觸發事件fire：循環該類型的處理函數，挨個循環執行；）；執行和調用過程：主要是何時觸發：全部自定義的事件都是瀏覽器根據底層事件來調用的】；舉例：

Function類：原生function類的問題（一、全部類繼承自Object；二、object提供的幫助太少）

jQuery中繼承是用$.extend(obj1,obj2)來實現

正則表達式：兩種方式（一、var pattern = /pattern/;二、

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分割的數組;

3七、cookie:是指web瀏覽器存儲的少許數據，在javascript中，cookie用於保存狀態以及可以爲web瀏覽器提供一種身份識別機制。可是使用cookie不會採用任何加密機制，所以它們是不安全的。cookie默認的有效期是很短暫的；它只能持續在web瀏覽器的繪畫期間，一旦用戶關閉瀏覽器，cookie保存的數據就丟失了。Cookie的有效期和整個瀏覽器進程的有效期一致；若是想要延長cookie的有效期，能夠經過設置max-age屬性；且cookie對同目錄下的文件均可見；

cookie 和session 的區別：

一、cookie數據存放在客戶的瀏覽器上，session數據放在服務器上。

二、cookie不是很安全，別人能夠分析存放在本地的COOKIE並進行COOKIE欺騙
考慮到安全應當使用session。

三、session會在必定時間內保存在服務器上。當訪問增多，會比較佔用你服務器的性能
考慮到減輕服務器性能方面，應當使用COOKIE。

四、單個cookie保存的數據不能超過4K，不少瀏覽器都限制一個站點最多保存20個cookie。

五、因此我的建議：
將登錄信息等重要信息存放爲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>標籤內有個外部樣式文件要加載

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 標籤進行模塊加載

二、文件依賴

三、命名衝突，可是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地址和提供主機配置參數。) - 針對動態尋址

搜索引擎的基本工做原理包括以下三個過程：首先在互聯網中發現、蒐集網頁信息；同時對信息進行提取和組織創建索引庫；再由檢索器根據用戶輸入的查詢關鍵字，在索引庫中快速檢出文檔，進行文檔與查詢的相關度評價，對將要輸出的結果進行排序，並將查詢結果返回給用戶。

總結：

一、對前端的見解：首先，前端對於網站來講，一般是指網站的前臺部分，包括網站的表現層和結構層。所以前端技術通常分爲前端設計和前端開發，前端設計通常能夠理解爲網站的視覺設計，前端開發則是網站的前臺代碼實現，包括基本的HTML和CSS以及JavaScript/ajax，如今最新的高級版本是HTML五、CSS3，以及SVG等。隨着互聯網產業的爆炸式增加，與之伴生的Web前端技術也在歷經洗禮和蛻變。尤爲是近幾年隨着移動終端的發展，愈來愈多的人開始投身或轉行至新領域，這更爲當今的IT產業注入了新的活力。一下這幾方面是須要快速學習的：a、web移動終端開發；b、javascript的其餘技術：backbone.js、node.js、zepto.js等；c、各類類庫和框架的封裝與開發；d、web前端開發規範；雖然如今國內幾乎沒有學校專門開設有關前端的課程，可是因爲本身不當心的踏入，致使如今的深深的迷戀，探索的道路辛苦，可是並不枯燥，我本身也很難相信會在這條路上堅持不間斷的瞭解它長達一年多時間，這也正是前端的魅力所在。

二、對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庫，可能會發生衝突。

三、瀏覽器渲染頁面的過程：爲了要在瀏覽器中顯示頁面結構的HTML。

（1）.客戶端瀏覽器開始從用戶向服務器發出請求，服務器響應的將如上的HTML返回給請求的客戶端瀏覽器中。（2）.加載從<html>標籤開始，並發現<head>標籤內有個外部樣式文件要加載

（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>爲止。

注意：從上述簡單的說了下瀏覽器加載HTML頁面原理後，會明白不少時候頁面打開慢的緣由。頁面中向服務器請求的次數多會影響到打開速度，從新渲染局部的次數量也會影響到頁面打開的速度，固然這只是有時候頁面打開速度慢一部分緣由。對於這種來回渲染，內行叫爲reflow，reflow幾乎是沒法避免的，咱們不能由於怕會從新渲染而去丟掉一些頁面效果。可是reflow是能夠優化的，好比圖片在css.css樣式文件中就定義好圖片的高度，這要會減小從新渲染的次數。另外還有一次詞叫repaint，叫重繪，repaint若是隻是改變如背景顏色或者文字的顏色，repaint的速度要比reflow的速度明顯快的多。

四、盒模型：盒子模型有兩種，分別是 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+"盒子模型");......

五、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標準。

六、ECMAScript標準：ECMAScript其實是一種腳本在語法和語義上的標準；ECMAScript是一種由Ecma國際（前身爲歐洲計算機制造商協會）經過ECMA-262標準化的腳本程序設計語言，這種語言在萬維網上應用普遍，它每每被稱爲JavaScript或JScript，但實際上後二者是ECMA-262標準的實現和擴展。ECMA-262規定了這門語言的組成部分：語法、類型、語句、關鍵字、保留字、操做符、對象；

七、同步、異步、阻塞與非阻塞：

同步：函數沒有執行完不返回，線程被掛起；阻塞：沒有收完數據函數不返回，線程也被掛起；異步：函數當即返回，經過事件或是信號通知調用者；非阻塞：函數當即返回，經過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，並一直處於執行狀態；

八、canvas:canvas 元素用於在網頁上繪製圖形。canvas 元素自己是沒有繪圖能力的。全部的繪製工做必須在 JavaScript 內部完成;getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。(看時鐘的代碼：file:///D:/wichung培訓資料/html5/clock.html)

八、對語義化的理解：分爲html標籤的語義化和css命名的語義化，幾點好處：a、手持移動設備的無障礙閱讀（手持移動設備如PDA、智能手機等可能對CSS的解析能力較弱，這時可能就須要更語義的標籤來體現一個頁面的易讀性）；b、盲人等一些障礙人士的更好地閱讀（屏幕閱讀器對不一樣標籤所發出的聲音是不一樣的，使用更語義的標籤以能傳達不一樣信息的重要性）；c、搜索引擎的友好收錄（雖然各大搜索引擎的排名規則不斷的再變化，但規則裏的正則始終是要匹配標籤的，若是能用更語義的標籤，蜘蛛爬行可以根據標籤的使用來肯定上下和各關鍵字的權重。）；d、技術趨勢所趨
（正如html誕生時的初衷那樣，各個標籤的本義就是但願能在特定的地方使用合適的標籤，而不是去用樣式來表現一個不語義的標籤。html5新增了更多的語義化的標籤）；本來用來實現的結構，經過html5的標籤咱們能夠更完美的表現。e、便於團隊項目的可持續運做及維護（語義化的命名可以使咱們在多人協做一個項目時更加有序和快捷，而不須要去糾結另外一位夥伴的CSS命名是什麼意思。若是是我的項目，也便於後期其餘同事的修改，語義化的命名時一個項目的可讀性更高。）；

十、常見的行級元素和塊級元素：塊級元素（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 - 客戶端腳本）

十一、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格式代碼。從某種意義上來講，格式代碼對關鍵詞來講都是噪聲，精簡代碼就是提升信噪比。）

十二、ＤＴＤ（Document Type Definition ）：可經過比較文檔和文檔類型定義文件來看文檔是否符合規範，元素和標籤使用是否正確。DOCTYPE聲明必須放在文檔最頂部，在全部代碼和標識之上，DOCTYPE聲明是必不可少的關鍵組成部分。DTD語法要求DOCTYPE必需要大寫，並且DOCTYPE和元素之間必需要有空格隔開。如在以上代碼中DOCTYPE和根元素root之間要有空格隔開。

1三、CSS Hack：針對不一樣的瀏覽器去寫不一樣的CSS，讓它可以同時兼容不一樣的瀏覽器，能在不一樣的瀏覽器中也能獲得咱們想要的頁面效果。分類：條件hack（

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 */

）；

1六、基本兼容問題：

（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時有時會出現頁面閃動

1七、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。若是這個過渡或動畫效果是必須，能夠考慮使用真實對象。

1八、media query：經過不一樣的媒介類型和條件定義樣式表規則，能夠很方便的在不一樣的設備下實現豐富的界面；若是是大型的網站或項目，咱們講爲各種型的移動終端獨立編寫css樣式文件，此時的使用方式以下：

注意倆點，一是圖片，在移動設備上，要作一些特定適合的小圖片來匹配，若是單純使用壓縮的圖片會失真，影響用戶體驗；二是在頭部加入以下代碼，目的是聲明在移動設備上設置原始大小顯示和是否縮放

最後說下IE瀏覽器，由於他不支持media Queries的，使用時須要引用一個Media Query Javascript解決，以下：

<!–[if lt IE 9]>

<![endif]–>

1九、響應式設計：能夠爲不一樣終端的用戶提供更加溫馨的界面和更好的用戶體驗，解決移動互聯網瀏覽；

優勢：面對不一樣分辨率設備靈活性強；可以快捷解決多設備顯示適應問題；

缺點：兼容各類設備工做量大，效率低下；代碼累贅，會出現隱藏無用的元素，加載時間加長；其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果；必定程度上改變了網站原有的佈局結構，會出現用戶混淆的狀況；

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或其餘工具測量計算每個背景單元的精確位置；

2二、定位（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爲定位對象，按照瀏覽器窗口進行定位，即便拖動滾動條，其位置也不會改變；

2三、各個瀏覽器內核：

IE->Trident

Mozilla:Gecko

Chrome:Webkit

Opera:Presto;

2四、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

2五、Bootstrap2 與 Bootstrap3:

Bootstrap3之於Bootstrap2最大的變化是移動優先、扁平化設計（這個概念最核心的地方就是放棄一切裝飾效果，諸如陰影，透視，紋理，漸變等等能作出3D效果的元素一律不用。全部的元素的邊界都乾淨利落，沒有任何羽化，漸變，或者陰影。）、以及瀏覽器兼容性（Bootstrap2能夠兼容IE六、七、8；而Bootstrap3最低兼容IE8）方面。
再見，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，速度確定更快了.

五、更優秀的組件:兩個新的組件：List Group 和 Panels;新的 Modal，更加簡單好用;沒了@blue, @orange之類的，取而帶之的說@brand-primary, @brand-success語義化;增長對視網膜屏幕的支持，如retina image mixin.

2六、js常見兼容：

補充：

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

2七、原型鏈：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; }}

2八、OSI七層協議：

每一層都有相關、相對應的物理設備，好比常規的路由器是三層交換設備，常規的交換機是二層交換設備。

（1）物理層：主要定義物理設備標準，如網線的接口類型、光纖的接口類型、各類傳輸介質的傳輸速率等。它的主要做用是傳輸比特流(就是由一、0轉化爲電流強弱來進行傳輸，到達目的地後再轉化爲一、0，也就是咱們常說的數模轉換與模數轉換)。這一層的數據叫作比特。

（2）數據鏈路層：定義瞭如何讓格式化數據以進行傳輸，以及如何讓控制對物理介質的訪問。這一層一般還提供錯誤檢測和糾正，以確保數據的可靠傳輸。

（3）網絡層：在位於不一樣地理位置的網絡中的兩個主機系統之間提供鏈接和路徑選擇。Internet的發展使得從世界各站點訪問信息的用戶數大大增長，而網絡層正是管理這種鏈接的層。

（4）傳輸層：定義了一些傳輸數據的協議和端口號(WWW端口80等)，如：TCP(傳輸控制協議，傳輸效率低，可靠性強，用於傳輸可靠性要求高，數據量大的數據)，UDP(用戶數據報協議，與TCP特性偏偏相反，用於傳輸可靠性要求不高，數據量小的數據，如QQ聊天數據就是經過這種方式傳輸的）。主要是將從下層接收的數據進行分段和傳輸，到達目的地址後再進行重組。經常把這一層數據叫作段。

（5）會話層：經過傳輸層(端口號：傳輸端口與接收端口)創建數據傳輸的通路。主要在你的系統之間發起會話或者接受會話請求(設備之間須要互相認識能夠是IP也能夠是MAC或者是主機名)。

（6）表示層：可確保一個系統的應用層所發送的信息能夠被另外一個系統的應用層讀取。例如，PC程序與另外一臺計算機進行通訊，其中一臺計算機使用擴展二一十進制交換碼(EBCDIC)，而另外一臺則使用美國信息交換標準碼（ASCII）來表示相同的字符。若有必要，表示層會經過使用一種通格式來實現多種數據格式之間的轉換。

（7）應用層：是最靠近用戶的OSI層。這一層爲用戶的應用程序(例如電子郵件、文件傳輸和終端仿真)提供網絡服務。

2九、前端安全性問題：

（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:服務端錯誤，服務器不能正確執行一個正確的請求

101

Switching Protocols

切換協議。服務器根據客戶端的請求切換協議。只能切換到更高級的協議，例如，切換到HTTP的新版本協議

200	OK	請求成功。通常用於GET與POST請求
304	Not Modified	未修改。所請求的資源未修改，服務器返回此狀態碼時，不會返回任何資源。客戶端一般會緩存訪問過的資源，經過提供一個頭信息指出客戶端但願只返回在指定日期以後修改的資源
404	Not Found	服務器沒法根據客戶端的請求找到資源（網頁）。經過此代碼，網站設計人員可設置"您所請求的資源沒法找到"的個性頁面
500	Internal Server Error	服務器內部錯誤，沒法完成請求

響應頭域

服務器須要傳遞許多附加信息，這些信息不能全放在狀態行裏。所以，須要另行定義響應頭域，用來描述這些附加信息。響應頭域主要描述服務器的信息和Request-URI的信息。

請求頭：HTTP客戶程序（例如瀏覽器），向服務器發送請求的時候必須指明請求類型（通常是GET或者POST）。若有必要，客戶程序還能夠選擇發送其餘的請求頭。大多數請求頭並非必需的，但Content-Length除外。對於POST請求來講Content-Length必須出現。最經常使用的請求頭有：Cookie：這是最重要的請求頭信息之一；Accept-Charset：瀏覽器可接受的字符集；Host：初始URL中的主機和端口；User-Agent：瀏覽器類型，若是Servlet返回的內容與瀏覽器類型有關則該值很是有用。

3一、LESS：一種動態樣式語言。LESS 將 CSS 賦予了動態語言的特性，如變量，繼承，運算，函數. LESS 既能夠在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也能夠藉助Node.js或者Rhino在服務端運行。

在服務器端的語法：

$lessc style.less

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

3二、前端MVC：backbone+underscore+jquey+mustache是前端MVC比較經典的組合；

3三、

不一樣類型間的比較，規律以下

類型	類型	規律	其它說明
對象	對象	比較是否是同一個內存地址
對象	字符串	對象先轉化爲字符串，而後作比較
對象	布爾類型	兩邊都要先轉爲數字（false是0，true是1）。是對象類型先隱式調用toString方法，而後再Number()	alert([]==false); alert([]==0) alert([1]==1); alert([1]==true) alert([2]==true)
對象	數字	對象要轉爲數字，再進行比較(對象先隱式調用toString方法轉化爲字符串，而後再把這個字符串輪化爲數字，至關於把這個字符串放到Number這個方法中)
數字	布爾	是進行的數字的比較
數字	字符串	把字符串轉化爲數，再比較
布爾		把兩邊都要轉化爲數字再進行比較
null	undefined	true
null,undefined	和其它類型	null和undefined和其它類型比較都是false(這兩個對象沒toString方法)	alert(null==false) alert(null==0) alert(null=="");;

自身作布爾運算的時候的轉換

類型	規律	示例
object	都是true	alert(!![])
number	只是0和NaN是false	alert(!!0);
string	只有空字符串是false（不是空格字符串）	alert(!!"");
function	都是ture
null,undefined	都是false