摘要：元素的位置通過以及屬性進行規定。請求會向指定資源提交數據，請求服務器進行處理。無狀態通信的會話狀態應該全部由客戶端負責維護。

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

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

繪畫 canvas;

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

語意化更好的內容元素:article、footer、header、nav、section;

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

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

新的技術:webworker, websocket, Geolocation;

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

全域屬性：id, tabindex, repeat。

新的全域屬性：contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。

新應用程序接口:

HTML Geolocation

HTML Drag and Drop

HTML Local Storage

HTML Application Cache

HTML Web Workers

HTML SSE

HTML Canvas/WebGL

HTML Audio/Video

移除的元素：

純表現的元素：basefont，big，center，font, s，strike，tt，u;

對可用性產生負面影響的元素：frame，frameset，noframes；

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

JS : worker.js

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

HTML:

button

checkbox

file

hidden

image

password

radio

reset

submit

text

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

區 別： IE的content部分把 border 和 padding計算了進去;

布局所占寬度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：默認的屬性值，按照標準流（包括浮動方式）進行布局。

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

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

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

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

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 缺省值。象行內元素類型一樣顯示。

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

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

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

inherit 規定應該從父元素繼承 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）

標簽選擇器（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 控制表單控件的禁用狀態。
:checked 單選框或復選框被選中。

Meta標簽定義

使用 viewport meta 標簽在手機瀏覽器上控制布局

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

隱藏狀態欄

iPhone會將看起來像電話號碼的數字添加電話連接，應當關閉

使用Media Queries適配對應樣式

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

設備類型(media type):

all所有設備；

screen 電腦顯示器；

print打印用紙或打印預覽視圖；

handheld便攜設備；

tv電視機類型的設備；

speech語意和音頻盒成器；

braille盲人用點字法觸覺回饋設備；

embossed盲文打印機；

projection各種投影設備；

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

設備特性(media feature):

width瀏覽器寬度；

height瀏覽器高度；

device-width設備屏幕分辨率的寬度值；

device-height設備屏幕分辨率的高度值；

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

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

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

設置多種視圖寬度

@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%;}

響應式圖片

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

字體設置

一個響應式的字體應關聯它的父容器的寬度，這樣才能適應客戶端屏幕。css3引入了新的單位叫做rem,和em類似但對于Html元素，rem更方便使用。em是相對于根元素的，需重置根元素字體大小：

html{font-size:100%;}
完成后，可以定義響應式字體：
@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的設置相對于其正常位置進行定位。可通過z-index進行層次分級。

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

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

absolute

生成絕對定位的元素，相對于static定位以外的第一個父元素進行定位。元素的位置通過"left","top","right"以及"bottom"屬性進行規定。可通過z-index進行層次分級。

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

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

overflow

opacity

visibility

display

postion

clip/clip-path

z-index

200 - 請求成功

301 - 資源（網頁等）被永久轉移到其它URL

404 - 請求的資源（網頁等）不存在

500 - 內部服務器錯誤

1** 信息，服務器收到請求，需要請求者繼續執行操作

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

3** 重定向，需要進一步的操作以完成請求

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

5** 服務器錯誤，服務器在處理請求的過程中發生了錯誤

GET：GET是http的默認請求方式， 一般用來獲取數據。

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

POST：POST請求會向指定資源提交數據，請求服務器進行處理。如：表單提交、文件上傳。

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

DELETE：DELETE請求用于請求服務器刪除所請求URI所標識的資源。DELETE請求后指定資源會被刪除。

TRACE：返回接受到的請求，用來查看數據經過中間服務器時發生了哪些變動。

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

CONNECT：要求使用SSL和TLS進行TCP通信。

PATCH：請求修改局部數據

REST是一種架構風格：無狀態，以資源為中心，充分利用HTTP協議和URI協議，提供統一的接口定義，使得它作為一種設計Web服務的方法而變得流行。在某種意義上，通過強調URI和HTTP等早期Internet標準，REST是對大型應用程序服務器時代之前的Web方式的回歸。

架構約束：

客戶-服務器:通信只能由客戶端單方面發起，表現為請求-響應的形式。

無狀態:通信的會話狀態（Session State）應該全部由客戶端負責維護。

緩存:響應內容可以在通信鏈的某處被緩存，以改善網絡效率。

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

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

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

主要特征：

面向資源（Resource Oriented）

可尋址（Addressability）

連通性（Connectedness）

無狀態（Statelessness）

統一接口（Uniform Interface）

超文本驅動（Hypertext Driven）

防止全局聲明的修改

防止其他來源代碼的修改

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

## 原生ajax

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

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

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

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

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

全局變量引起的內存泄漏

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

閉包引起的內存泄漏

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

dom清空或刪除時，事件未清除導致的內存泄漏

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


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

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

執行時間不同

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

編寫個數不同

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

簡化寫法

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中，每個對象都有一個指向它的原型對象的內部鏈接。這個原型對象又有自己的原型，知道某個對象的原型為null為止，組成這條鏈的最后一環。這種一級一級的鏈結構就成為原型鏈。

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 通過設置響應頭的 Access-Control-Allow-Origin

window.name

window.postMessage() HTML5新特性

location.hash

document.domain

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

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;
    }
  });

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

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

如果存在多個同名參數，則返回數組

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的整數n返回長度為n的斐波那契數列。

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;
}

題目描述

封裝函數 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);
    }