1.區域模組分解 ：

按照空間區域，對複雜的案例效果，分解為幾個較簡單的模組部分。目的是：更方便的理解案例原理。

2.VCD分解：

                     view                        視覺     HTML+CSS        基本介面模板

                     controller                控制       Javascript        內容處理、事件處理

                     Data                         資料         data.js              非必須，助於理解

3.onselectstart="return   false"    

可以直接加在body的行間，用於：如果頁面有點選的操作，防止文字被選中。

4.-webkit-font-smoothing: antialiased    

  css3中用於webkit引擎(如chrome)中設定字型的抗鋸齒或者說光滑度的屬性。有3個屬性：none用於小畫素的文字、subpixel-antialiased瀏覽器預設的、antialiased反鋸齒。

5.

把字母統一變成小寫toLowerCase()

把字母統一變成大寫toUpperCase()

6.

alert裡面用\n換行

alert("您好\nhello")

7.localStorage

在客戶端儲存資料，HTML5 提供了兩種在客戶端儲存資料的新方法：localStorage - 沒有時間限制的資料儲存，localStorage 方法儲存的資料沒有時間限制。第二天、第二週或下一年之後，資料依然可用。

這個特性主要是用來作為本地儲存來使用的，解決了cookie儲存空間不足的問題(cookie中每條cookie的儲存空間為4k)，localStorage中一般瀏覽器支援的是5M大小，這個在不同的瀏覽器中localStorage會有所不同。

localStorage 與sessionStorage相似。不同之處在於，儲存在 localStorage 裡面的資料沒有過期時間（expiration time），而儲存在 sessionStorage 裡面的資料會在瀏覽器會話（browsing session）結束時被清除，即瀏覽器關閉時。

應該注意的是，無論是 localStorage 還是 sessionStorage 中儲存的資料都僅限於該頁面的協議。

語法：myStorage=localStorage;

返回值：一個Storage物件

面的程式碼訪問當前域名下的 localStorage物件，並使用Storage.setItem()方法往裡面新增一個資料項。

localStorage.setItem('myCat','Tom');

首先在使用localStorage的時候，我們需要判斷瀏覽器是否支援localStorage這個屬性：

if(！window.localStorage){

alert("瀏覽器不支援localstorage");

return     false;

}else{

//主邏輯業務

}

//localStorage的寫入和讀取

if(！window.localStorage){

alert("瀏覽器不支援localstorage");

return    false;

}else{

var   storage=window.localStorage;

//localStorage的寫入

//寫入a欄位，方式一

storage["a"]=1;

//寫入b欄位，方式二

storage.b=2;

//寫入c欄位，方式三

storage.setItem("c",3);

console.log(typeof   storage["a"]);

console.log(typeof   storage["b"]);

console.log(typeof    storage["c"]);

//localStorage的讀取

//第一種方法讀取

var    a=storage.a;

console.log(a); 

//第二種方法讀取

var    b=storage["b"];

console.log(b);//第三種方法讀取

var    c=storage.getItem("c");

console.log(c);

}

最後在控制檯上面列印出來的結果是:string，剛剛儲存進去的是int型別，但是列印出來卻是string型別，這個與localStorage本身的特點有關，localStorage只支援string型別的儲存。

這裡要特別說明一下localStorage的使用也是遵循同源策略的，所以不同的網站直接是不能共用相同的localStorage

這裡面是三種對localStorage的讀取，其中官方推薦的是getItem\setItem這兩種方法對其進行存取。

localStorage的刪、改

if(！window.localStorage){

alert("瀏覽器不支援localstorage");

return    false;

}else{

var   storage=window.localStorage;

storage["a"]=1;

storage.b=2;

storage.setItem("c",3);

//將a改為4

storage.a=4;

console.log(storage.a);

}

將localStorage的所有內容清除

var   storage=window.localStorage;

storage.a=1;

storage.setItem("c",3);

console.log(storage);

storage.clear();

console.log(storage);

將localStorage中的某個鍵值對刪除

var   storage=window.localStorage;

storage.a=1;

storage.setItem("c",3);

console.log(storage);

storage.removeItem("a");

console.log(storage.a);

localStorage的鍵獲取,使用key()方法，向其中出入索引即可獲取對應的鍵

var  storage=window.localStorage;

storage.a=1;

storage.setItem("c",3);

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

var    key=storage.key(i);

console.log(key);

}

一般我們會將JSON存入localStorage中，但是在localStorage會自動將localStorage轉換成為字串形式,這個時候我們可以使用JSON.stringify()這個方法，來將JSON轉換成為JSON字串.

if(!window.localStorage){

alert("瀏覽器不支援localstorage");

}else{

var   storage=window.localStorage;

var  data={

name:'xiecanyong',

sex:'man',

hobby:'program'

};

var     d=JSON.stringify(data);

storage.setItem("data",d);

console.log(storage.data);

}

讀取之後要將JSON字串轉換成為JSON物件，使用JSON.parse()方法:

var    storage=window.localStorage;

var   data={

name:'xiecanyong',

sex:'man',

hobby:'program'};

var    d=JSON.stringify(data);

storage.setItem("data",d);

//將JSON字串轉換成為JSON物件輸出

var  json=storage.getItem("data");

var   jsonObj=JSON.parse(json);

console.log(typeof    jsonObj);

8.HTML標籤marquee實現滾動效果

<marquee>要進行滾動的內容</marquee>，可以實現多種滾動效果，無需js控制。

margquee可以移動文字，圖片，表格等。

1.滾動方向direction（包括4個值：up、 down、 left和 right）

2.滾動方式behavior（scroll:迴圈滾動，預設效果； slide:只滾動一次就停止； alternate:來回交替進行滾動）

3.滾動速度scrollamount（滾動速度是設定每次滾動時移動的長度，以畫素為單位）

4.滾動延遲scrolldelay（設定滾動的時間間隔，單位是毫秒）

5.滾動迴圈loop（預設值是-1，滾動會不斷的迴圈下去）

6.滾動範圍width、height

7.滾動背景顏色bgcolor

8.空白空間hspace、vspace

<marquee  direction="滾動方向"  behavior="滾動方式"  scrollamount="5"  scrolldelay="100"    loop="2"   width="1000"    height="50"    bgcolor="#0099FF" hspace="10"  vspace="10">··············</marquee>

9.

手機點選瀏覽網頁上的input標籤時，會自動彈出軟鍵盤，如何來阻止呢

<input      type="text"      readonly="readonly"/>