摘要：元素的位置通過以及屬性進(jìn)行規(guī)定。請求會向指定資源提交數(shù)據(jù)，請求服務(wù)器進(jìn)行處理。無狀態(tài)通信的會話狀態(tài)應(yīng)該全部由客戶端負(fù)責(zé)維護(hù)。

文件類型聲明（）僅有一型：。

新的解析順序：不再基于SGML。

繪畫 canvas;

用于媒介回放的 video 和 audio 元素;

語意化更好的內(nèi)容元素:article、footer、header、nav、section;

表單控件:calendar、date、time、email、url、search;

input元素的新類型：date, email, url等。

新的技術(shù):webworker, websocket, Geolocation;

新的屬性：ping（用于a與area）, charset（用于meta）, async（用于script）。

全域?qū)傩裕篿d, tabindex, repeat。

新的全域?qū)傩裕篶ontenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。

新應(yīng)用程序接口:

HTML Geolocation

HTML Drag and Drop

HTML Local Storage

HTML Application Cache

HTML Web Workers

HTML SSE

HTML Canvas/WebGL

HTML Audio/Video

移除的元素：

純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u;

對可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；

Web Worker的基本原理就是在當(dāng)前javascript的主線程中，使用Worker類加載一個javascript文件來開辟一個新的線程，起到互不阻塞執(zhí)行的效果，并且提供主線程和新線程之間數(shù)據(jù)交換的接口： postMessage和onmessage。

JS : worker.js

var math =function(n) {
   //肥腸復(fù)雜的數(shù)學(xué)計算
};
onmessage =function(evt) {
    var d = evt.data;
    postMessage(d);
};

HTML:

button

checkbox

file

hidden

image

password

radio

reset

submit

text

IE 盒子模型、W3C 盒子模型；

區(qū) 別： IE的content部分把 border 和 padding計算了進(jìn)去;

布局所占寬度Width：

Width = width + padding-left + padding-right + border-left + border-right

布局所占高度Height:

Height = height + padding-top + padding-bottom + border-top + border-bottom

布局所占寬度Width：

Width = width(包含padding-left + padding-right + border-left + border-right)

布局所占高度Height:

Height = height(包含padding-top + padding-bottom + border-top + border-bottom)

static：默認(rèn)的屬性值，按照標(biāo)準(zhǔn)流（包括浮動方式）進(jìn)行布局。

relative:稱為相對定位，使用相對的盒子的位置常以標(biāo)準(zhǔn)量的排版方式為基礎(chǔ)，然后使盒子相對于它在原本的標(biāo)準(zhǔn)位置偏移指定的距離.相對定位仍在標(biāo)準(zhǔn)流中，它對父塊和兄弟塊盒子沒有任何影響。

absolute:絕對定位，盒子的位置以它的包含框為基準(zhǔn)進(jìn)行偏移。絕對定位從標(biāo)準(zhǔn)流中脫離，并且以它最近的一個已經(jīng)定位的祖先元素為基準(zhǔn)進(jìn)行定位。沒有已經(jīng)定位的祖先元素，則以瀏覽器窗口為基準(zhǔn)進(jìn)行定位。

inherit:規(guī)定從父元素繼承 position 屬性的值。

fixed:固定定位，與絕對定位類似，以瀏覽器窗口為基準(zhǔn)進(jìn)行定位，拖動瀏覽器窗口的滾動條時，位置保持不變。

fixed實例

HTML:

CSS:

#a{
    height: 300px;
    width: 500px;
    background-color: #7c82ab;
  }
#c{
    width:500px;
    height:auto;
    background-color:#ccc;
    postion:fixed;
    bottom:0px;
}

block 像塊類型元素一樣顯示。

none 缺省值。象行內(nèi)元素類型一樣顯示。

inline-block 像行內(nèi)元素一樣顯示，但其內(nèi)容象塊類型元素一樣顯示。

list-item 像塊類型元素一樣顯示，并添加樣式列表標(biāo)記。

table 此元素會作為塊級表格來顯示

inherit 規(guī)定應(yīng)該從父元素繼承 display 屬性的值

HTML:

    
1
    
2
    
3

CSS:

.over-flow{
    overflow: auto;
    zoom: 1; /*zoom: 1;for IE6/7 Maxthon2*/
}

div{
    float:left;
    clear:both;
}

.outer {
    zoom:1; /*zoom: 1;for IE6/7 Maxthon2*/
}
.outer :after {
    clear:both;
    content:".";
    display:block; /*for FF/chrome/opera/IE8*/
    width: 0;
    height: 0;
    visibility:hidden;
    }

id選擇器（ # myid）

類選擇器（.myclassname）

標(biāo)簽選擇器（div, h1, p）

相鄰選擇器（h1 + p）

子選擇器（ul > li）

后代選擇器（li a）

通配符選擇器（ * ）

屬性選擇器（a[rel = "external"]）

偽類選擇器（a: hover, li:nth-child）

CSS3新增偽類：

p:first-of-type 選擇屬于其父元素的首個p元素的每個p元素。

p:last-of-type 選擇屬于其父元素的最后p元素的每個p元素。
p:only-of-type 選擇屬于其父元素唯一的p元素的每個p元素。

p:only-child 選擇屬于其父元素的唯一子元素的每個p元素。
p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個p元素。
:enabled :disabled 控制表單控件的禁用狀態(tài)。
:checked 單選框或復(fù)選框被選中。

Meta標(biāo)簽定義

使用 viewport meta 標(biāo)簽在手機(jī)瀏覽器上控制布局

通過快捷方式打開時全屏顯示

隱藏狀態(tài)欄

iPhone會將看起來像電話號碼的數(shù)字添加電話連接，應(yīng)當(dāng)關(guān)閉

使用Media Queries適配對應(yīng)樣式

常用于布局的CSS Media Queries有以下幾種：

設(shè)備類型(media type):

all所有設(shè)備；

screen 電腦顯示器；

print打印用紙或打印預(yù)覽視圖；

handheld便攜設(shè)備；

tv電視機(jī)類型的設(shè)備；

speech語意和音頻盒成器；

braille盲人用點字法觸覺回饋設(shè)備；

embossed盲文打印機(jī)；

projection各種投影設(shè)備；

tty使用固定密度字母柵格的媒介，比如電傳打字機(jī)和終端。

設(shè)備特性(media feature):

width瀏覽器寬度；

height瀏覽器高度；

device-width設(shè)備屏幕分辨率的寬度值；

device-height設(shè)備屏幕分辨率的高度值；

orientation瀏覽器窗口的方向縱向還是橫向，當(dāng)窗口的高度值大于等于寬度時該特性值為portrait，否則為landscape；

aspect-ratio比例值，瀏覽器的縱橫比；

device-aspect-ratio比例值，屏幕的縱橫比。

設(shè)置多種視圖寬度

@media only screen and (min-width:768px)and(max-width:1024px){}

@media only screen and (width:320px)and (width:768px){}

百分比布局

寬度不固定，可以使用百分比

#head{width:100%;}
#content{width:50%;}

響應(yīng)式圖片

#wrap img{
  max-width:100%;
  height:auto;
}

字體設(shè)置

一個響應(yīng)式的字體應(yīng)關(guān)聯(lián)它的父容器的寬度，這樣才能適應(yīng)客戶端屏幕。css3引入了新的單位叫做rem,和em類似但對于Html元素，rem更方便使用。em是相對于根元素的，需重置根元素字體大?。?/p>

html{font-size:100%;}
完成后，可以定義響應(yīng)式字體：
@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:2rem;}}

relative

生成相對定位的元素，通過top,bottom,left,right的設(shè)置相對于其正常位置進(jìn)行定位。可通過z-index進(jìn)行層次分級。

定位為relative的元素脫離正常的文本流中，但其在文本流中的位置依然存在。

relative定位的層總是相對于其最近的父元素，無論其父元素是何種定位方式。

absolute

生成絕對定位的元素，相對于static定位以外的第一個父元素進(jìn)行定位。元素的位置通過"left","top","right"以及"bottom"屬性進(jìn)行規(guī)定?？赏ㄟ^z-index進(jìn)行層次分級。

定位為absolute的層脫離正常文本流，但與relative的區(qū)別是其在正常流中的位置不在存在。

對于absolute定位的層總是相對于其最近的定義為absolute或relative的父層，而這個父層并不一定是其直接父層。如果其父層中都未定義absolute或relative，則其將相對body進(jìn)行定位。

overflow

opacity

visibility

display

postion

clip/clip-path

z-index

200 - 請求成功

301 - 資源（網(wǎng)頁等）被永久轉(zhuǎn)移到其它URL

404 - 請求的資源（網(wǎng)頁等）不存在

500 - 內(nèi)部服務(wù)器錯誤

1** 信息，服務(wù)器收到請求，需要請求者繼續(xù)執(zhí)行操作

2** 成功，操作被成功接收并處理

3** 重定向，需要進(jìn)一步的操作以完成請求

4** 客戶端錯誤，請求包含語法錯誤或無法完成請求

5** 服務(wù)器錯誤，服務(wù)器在處理請求的過程中發(fā)生了錯誤

GET：GET是http的默認(rèn)請求方式， 一般用來獲取數(shù)據(jù)。

HEAD：HEAD方法與GET方法一樣，都是向服務(wù)器發(fā)出指定資源的請求。但是，服務(wù)器在響應(yīng)HEAD請求時不會回傳資源的內(nèi)容部分，即：響應(yīng)主體。這樣，我們可以不傳輸全部內(nèi)容的情況下，就可以獲取服務(wù)器的響應(yīng)頭信息。HEAD方法常被用于客戶端查看服務(wù)器的性能。

POST：POST請求會向指定資源提交數(shù)據(jù)，請求服務(wù)器進(jìn)行處理。如：表單提交、文件上傳。

PUT：PUT請求會身向指定資源位置上傳其最新內(nèi)容，通過該方法客戶端可以將指定資源的最新數(shù)據(jù)傳送給服務(wù)器取代指定的資源的內(nèi)容。

DELETE：DELETE請求用于請求服務(wù)器刪除所請求URI所標(biāo)識的資源。DELETE請求后指定資源會被刪除。

TRACE：返回接受到的請求，用來查看數(shù)據(jù)經(jīng)過中間服務(wù)器時發(fā)生了哪些變動。

OPTIONS：OPTIONS請求與HEAD類似，一般也是用于客戶端查看服務(wù)器的性能。 這個方法會請求服務(wù)器返回該資源所支持的所有HTTP請求方法，該方法會用"*"來代替資源名稱，向服務(wù)器發(fā)送OPTIONS請求，可以測試服務(wù)器功能是否正常。JavaScript的XMLHttpRequest對象進(jìn)行CORS跨域資源共享時，就是使用OPTIONS方法發(fā)送嗅探請求，以判斷是否有對指定資源的訪問權(quán)限。

CONNECT：要求使用SSL和TLS進(jìn)行TCP通信。

PATCH：請求修改局部數(shù)據(jù)

REST是一種架構(gòu)風(fēng)格：無狀態(tài)，以資源為中心，充分利用HTTP協(xié)議和URI協(xié)議，提供統(tǒng)一的接口定義，使得它作為一種設(shè)計Web服務(wù)的方法而變得流行。在某種意義上，通過強(qiáng)調(diào)URI和HTTP等早期Internet標(biāo)準(zhǔn)，REST是對大型應(yīng)用程序服務(wù)器時代之前的Web方式的回歸。

架構(gòu)約束：

客戶-服務(wù)器:通信只能由客戶端單方面發(fā)起，表現(xiàn)為請求-響應(yīng)的形式。

無狀態(tài):通信的會話狀態(tài)（Session State）應(yīng)該全部由客戶端負(fù)責(zé)維護(hù)。

緩存:響應(yīng)內(nèi)容可以在通信鏈的某處被緩存，以改善網(wǎng)絡(luò)效率。

統(tǒng)一接口:通信鏈的組件之間通過統(tǒng)一的接口相互通信，以提高交互的可見性。

分層系統(tǒng):通過限制組件的行為（即，每個組件只能"看到"與其交互的緊鄰層），將架構(gòu)分解為若干等級的層。

按需代碼:支持通過下載并執(zhí)行一些代碼（例如Java Applet、Flash或JavaScript），對客戶端的功能進(jìn)行擴(kuò)展。

主要特征：

面向資源（Resource Oriented）

可尋址（Addressability）

連通性（Connectedness）

無狀態(tài)（Statelessness）

統(tǒng)一接口（Uniform Interface）

超文本驅(qū)動（Hypertext Driven）

防止全局聲明的修改

防止其他來源代碼的修改

  var ValidateUtil = {
    type1 : function(){};
    type2: function(){};
  };

## 原生ajax

  //1. 創(chuàng)建ajax對象
  var xhr = null;
  if(window.XMLHttpRequest){
      xhr = new XMLHttpRequest();
  } else {
      //為了兼容IE6
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }

  //2. 連接服務(wù)器open(方法GET/POST，請求地址， 異步傳輸)
  xhr.open("GET",  "data.txt",  true);

  //3. 發(fā)送請求
  xhr.send();

  //4.處理返回數(shù)據(jù)
  /*
  ** 每當(dāng)readyState改變時，就會觸發(fā)onreadystatechange事件
  ** readyState屬性存儲有XMLHttpRequest的狀態(tài)信息
  ** 0 ：請求未初始化
  ** 1 ：服務(wù)器連接已建立
  ** 2 ：請求已接受
  ** 3 : 請求處理中
  ** 4 ：請求已完成，且相應(yīng)就緒
  */
  xhr.onreadystatechange = function(){
      if(xhr.readyState == 4){
          /*
          ** Http狀態(tài)碼
          ** 1xx ：信息展示
          ** 2xx ：成功
          ** 3xx ：重定向
          ** 4xx : 客戶端錯誤
          ** 5xx ：服務(wù)器端錯誤
          */
          if(xhr.status == 200){
              success(xhr.responseText);
          } else {
              if(failed){
                  failed(xhr.status);
              }
          }
      }
  }

JavaScript中最常用的垃圾收集方式是標(biāo)記清除(mark-and-sweep)。當(dāng)變量進(jìn)入環(huán)境（例如，在函數(shù)中聲明一個變量）時，就將這個變量標(biāo)記為“進(jìn)入環(huán)境”。從邏輯上講，永遠(yuǎn)不能釋放進(jìn)入環(huán)境的變量所占的內(nèi)存，因為只要執(zhí)行流進(jìn)入相應(yīng)的環(huán)境，就可能用到它們。而當(dāng)變量離開環(huán)境時，這將其 標(biāo)記為“離開環(huán)境”。
雖然JavaScript 會自動垃圾收集，但是如果我們的代碼寫法不當(dāng)，會讓變量一直處于“進(jìn)入環(huán)境”的狀態(tài)，無法被回收。

全局變量引起的內(nèi)存泄漏

function yyy(){
yyy = "xxxxxx";//yyy 成為一個全局變量，不會被回收
}

閉包引起的內(nèi)存泄漏

var yyy = (function(){
var yyy = "xxxxxx";// 被閉包所引用，不會被回收
return function(){
    console.log(yyy);
}
})()

dom清空或刪除時，事件未清除導(dǎo)致的內(nèi)存泄漏

$("#container").bind("click", function(){
console.log("click");
}).remove();
//把事件清除了，即可從內(nèi)存中移除


$("#container").bind("click", function(){
console.log("click");
}).off("click").remove();

$(document).ready() 與window.onload的區(qū)別

執(zhí)行時間不同

window.onload必須等到頁面內(nèi)包括圖片的所有元素加載完畢后才能執(zhí)行。
$(document).ready()是DOM結(jié)構(gòu)繪制完畢后就執(zhí)行，不必等到加載完畢。

編寫個數(shù)不同

window.onload不能同時編寫多個，如果有多個window.onload方法，只會執(zhí)行一個
$(document).ready()可以同時編寫多個，并且都可以得到執(zhí)行

簡化寫法

window.onload沒有簡化寫法
$(document).ready(function(){})可以簡寫成$(function(){});

element.addEventListener(type, listener[, useCapture]); // IE6~8不支持

element.attachEvent("on" + type, listener); // IE6~10，IE11不支持

element["on" + type] = function(){} // 所有瀏覽器

DEMO:

function test() {
    console.log(1);
    }
element.addEventListener("click", test, false);
element.attachEvent("onclick", test);
element.onclick = test;

在JavaScript中，每個對象都有一個指向它的原型對象的內(nèi)部鏈接。這個原型對象又有自己的原型，知道某個對象的原型為null為止，組成這條鏈的最后一環(huán)。這種一級一級的鏈結(jié)構(gòu)就成為原型鏈。

ES6寫法：

class a {
    constructor(name) {
    this.name = name;
    }
speak() {
    console.log(this.name + " lalala");
    }
}
class aa extends a {
    speak() {
    console.log(this.name + " hahaha");
     }
}

JS方法：

  var reverseString = function(string) {
     string = string.split("").reverse().join("");
     return string;
  };

CSS方法：

  p{
      direction: rtl;
      unicode-bidi: bidi-override;
  }

JSONP

CORS 通過設(shè)置響應(yīng)頭的 Access-Control-Allow-Origin

window.name

window.postMessage() HTML5新特性

location.hash

document.domain

對“事件處理程序過多” 問題的解決方案就是事件委托。事件委托利用了事件冒泡，只指定一個事件處理程序，就可以管理某一類的所有事件。例如，click事件會一直冒泡到document層次，所以我們可以為整個頁面制定一個onclick事件處理程序，而不必給每個可單機(jī)的元素分別添加事件處理程序。

HTML

JavaScript

  var list = document.getElementById("myLinks");

  EventUtil.addHandler(list, "click", function(event){
    event = EventUtil.getEvent(event);

    switch(target.id){
      case "a":
        console.log("1");
        break;

      case "b":
        console.log("2");
        break;

      case "c":
        console.log("3"):
        break;
    }
  });

指定參數(shù)名稱，返回該參數(shù)的值或者空字符串

不指定參數(shù)名稱，返回全部的參數(shù)對象或者{}

如果存在多個同名參數(shù)，則返回數(shù)組

function getUrlParam(sUrl,sKey){
    var result = {};
    sUrl.replace(/??(w+)=(w+)&?/g,function(a,k,v){
        if(result[k] !== void 0){
            var t = result[k];
            result[k] = [].concat(t,v);
        }else{
            result[k] = v;
        }
    });
    if(sKey === void 0){
        return result;
    }else{
        return result[sKey] || "";
    }
}

輸入大于0的整數(shù)n返回長度為n的斐波那契數(shù)列。

function fibonacci(n) {
  var result = [1,1];
    if(n <= 0){
        return -1;
    }else if(n == 1){
      result.pop(1);
    }else {
       for(var i = 2; i < n; i++){
         result.push(result[i-1] + result[i-2]);
       }
    }
    return result;
}

題目描述

封裝函數(shù) f，使 f 的 this 指向指定的對象
輸入例子:

bindThis(function(a, b){return this.test + a + b}, {test: 1})(2, 3)

輸出例子:

6

    function bindThis(f, oTarget) {
        return f.bind(oTarget);
    }