整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
近來一直在做微信開發，涉及的東西很多，但是思路基本是從微信接口拿數據這樣一個流程。在開發過程中，順便寫了一個聊天頁面。個人感覺還不錯，所以把其中遇到的幾個知識點分享給大家。
整體的界面就是上面的樣子，排版方面的知識就不多說了，畢竟我也不是做前端的，而且很多樣式都是直接從官網拿過來。還是主要說一說流程邏輯方面的知識。其實并沒有太深的學問，只要有基礎的Js,循環，判斷語句就可以了。我主要想表達的還是實戰思路。接下來我先把問題拋出來，如果已經想到了很好的方法大可不必再浪費時間看下去了。
1，中框部分的聊天記錄顯示問題（各部分均為獨立iframe框架）
難點：因為顯示的條數受限，假設只顯示最近5條，那么應該是用時間倒序獲取5條數據，這樣能實現最近5條數據，但是顯示結果會是自上而下從晚到早。相反，如果按照時間順序提取5條，那么顯示順序沒問題，可是獲取的5條數據卻不是最近的而是最早的。
2，與第1點同步的會出現每條發送信息的時間，但是每條數據后面跟著一串‘2017-01-20 15:30:23’肯定會很難看。理想的效果是，短時間內（例如半小時內）就顯示一次發送時間，當天聊天記錄就只顯示時分秒，今天以前的聊天就顯示年月日時分秒。如果判斷是否當天還好說，可是判斷是否距離上一條記錄（嚴格來說是上一條顯示時間的記錄）半小時以內就要動動腦筋了。
3，中框的聊天信息展示肯定要隨時更新的，如果你發送一條信息用post提交，相當于刷新一次頁面還好理解。但是如果是收到一條信息又怎么能即時刷新呢。
4，倘若中框的聊天記錄有10條，窗口大小只能顯示5條，怎么能讓它顯示到最底部一條信息。當然，你可以只讓它獲取到最近5條數據，但是如果某一條數據內容特別長，還是會出現滾動條，還是不是顯示頁面底部。
5，發送信息采用ctrl+enter發送，因為如果只按enter發送，就不能換行了。網上可以搜到相關代碼，但是很有可能出現ctrl+enter鍵按下時，打開新的窗口。所以我在下面會放上測試好的代碼。
6，當聊天頁面處于關閉狀態，收到新信息會有消息提醒。這一點比較容易就不說了。另外一種情況，你在聊天頁面與某一個好友聊天時，另一個或多個好友來消息時，也需要在對應的頭像和分組菜單有消息提醒。
7，發送消息方式一般采用post提交，提交后頁面刷新也能獲取到最新消息。但是如果提交信息用的是其它接口（比如用微信公眾號發送），就會首先獲取到接口返回的數據后才能算發送成功，才能進行寫入數據庫或其它操作。在這個過程可能會3到5秒，體驗效果就會變差。所以建議采用ajax異步提交，并且提交后利用Js顯示到聊天主窗口（發送中狀態），當收到ajax發送成功的反饋時刷新頁面，否則提示發送失敗。
針對以上的問題，在下面一一解答或者直接粘貼代碼。
問題一思路：把獲取到的最近5條信息遍歷出來，逆序賦值給一個變量，然后把這個變量當成html元素放到頁面。
$res= mysql_query(“select * from msg where sid= 23 and user=23 order bycreat_time limit 0,5”);//從數據庫獲取最近5條數據
$str= ‘’;//聲明變量
While($rows = mysql_fetch_array($res))
{
$str = “<div><span>{$rows[‘name’]}</span><span>{$rows[‘con’]}</span></div>”.$str;
}
Html 部分
<divclass=”content”>
{$str}
</div>
問題二思路：是否當天可以用拿到的時間與當天日期進行比較（如果字段有時分秒可以截取前10位），判斷是否與上一條顯示時間相隔半小時，就需要先聲明一個時間變量，當每次需要顯示時間時就賦值一次。
這里還有一個問題，因為顯示時第一條信息是5條里面最早的，最后一條是最近的，然后獲取數據的順序正好相反。所以判斷時間是否相隔半小時，是拿到的一條時間與下一條時間做比較。這當然是不可能的。那么我想到的方法先把獲取的數據賦值給數組，再用數據遍歷輸出。
問題三思路：在<head>里加入一行代碼
<metahttp-equiv="Refresh" content="5;URL=imshow.php">
讓這個頁面每5秒刷新一次。這當然是個方法，只是不太好。原因很簡單，頁面會不斷的閃動也會占用服務器承載量。所以建議用ajax獲取是否有新消息，如果有，則啟動刷新。
functionget_msg(){
var str = '';
$.get("./ajax/ajax_wechat_new_list.php?uid="+uid+"&mid="+mid,function(data,status){
if(data>0){
window.location.reload();
}
});
setTimeout(function(){
get_msg();
},3000)
}
get_msg();
問題四思路：這個問題是個很實用的問題，曾很困擾。我嘗試用模擬點擊事件，自動運行js效果都不太好。其實最簡單的方法是在頁面末端加一個全局選擇器，例如id.
<astyle="text-indent:-9999px" id="go_foot"href="#go_foot"></a>
然后在url地址尾處加一個#go_foot,,,倘若不好用的話，再設置瞄點模擬點擊。
document.getElementById('go_foot').click();
問題五思路：
$("#sms_content").keyup(function(event){
if(event.ctrlKey && event.which ==13) //13等于回車鍵(Enter)鍵值,ctrlKey 等于 Ctrl
{
$('#send').trigger("click");
}
});
備注：其中‘sms_content’是input提交標簽的Id, keyup（松開按鍵）可以改為keydown（按下鍵盤），但是會出現打開新窗口的情況。
問題六思路：預先給每個好友設置好提醒的html元素（id名需要與該好友的id相關聯以便查找），并處理隱藏狀態。當用ajax獲取到該好友的新消息時，則找到對應標簽變為顯示狀態。
functionget_msg(){
var str = '';
$.get("./ajax/ajax_wechat_notice1.php?uid="+uid+"&show="+show,function(data,status){
if(data!=0){
varmsg = eval("("+data+")");
for(vari=0;i<msg.length;i++)
{
varmid = msg[i].id;
vartime = msg[i].time;
varcon = msg[i].msg.substring(0,16)+'...';
$("#show_msg"+mid).show();
$("#show_msg"+mid).parent().prevAll('.time_tag').text(time);
$("#show_msg"+mid).parent().prevAll('.ext').children('.new_msg').text(con);
$("#show_msg"+mid).parent().parent().parent().prev().prev('.group_user').children('img').show();
}
}
});
setTimeout(function(){
get_msg();
},10000);
}
get_msg();
備注：以上代碼在消息提醒的同時，也會獲取到未讀消息的發送時間和內容，需要在相關頁面設置，僅供參考。
問題七思路：首先在中框聊天列表的頁面里，預先插入一條備用聊天記錄（包括發送人，發送信息，發送中狀態圖標），使其隱藏狀態。當點擊發送時，需要處理幾個動作。a,利用ajax把文本框內容發送，b,文本框的內容賦值給備用聊天記錄，c,令備用聊天記錄可見，同時文本框內容清空d,模擬點擊事件讓聊天頁面顯示底部，f,獲取ajax發送反饋，如果成功則刷新聊天記錄窗口。如果失敗利用js把發送中圖標改為失敗圖標，并且彈出發出失敗的反饋信息。
多大公司面試喜歡問這樣一道面試題，輸入URL到看見頁面發生了什么？ 簡單來說，共有以下幾個過程：
DNS解析
DNS解析實際上就是尋找你所需要的資源的過程。假設你輸入www.baidu.com，而這個網址并不是百度的真實地址，互聯網中每一臺機器都有唯一標識的IP地址，這個才是關鍵，但是它不好記，亂七八糟一串數字誰記得住啊，所以就需要一個網址和IP地址的轉換，也就是DNS解析。下面看看具體的解析過程
具體解析
DNS解析其實是一個遞歸的過程
輸入www.google.com網址后，首先在本地的域名服務器中查找，沒找到去根域名服務器查找，沒有再去com頂級域名服務器查找，，如此的類推下去，直到找到IP地址，然后把它記錄在本地，供下次使用。大致過程就是.-> .com ->google.com. -> www.google.com。 (你可能覺得我多寫 .，并木有，這個.對應的就是根域名服務器，默認情況下所有的網址的最后一位都是.，既然是默認情況下，為了方便用戶，通常都會省略，瀏覽器在請求DNS的時候會自動加上)DNS優化
既然已經懂得了解析的具體過程，我們可以看到上述一共經過了N個過程，每個過程有一定的消耗和時間的等待，因此我們得想辦法解決一下這個問題！
DNS緩存
DNS存在著多級緩存，從離瀏覽器的距離排序的話，有以下幾種: 瀏覽器緩存，系統緩存，路由器緩存，IPS服務器緩存，根域名服務器緩存，頂級域名服務器緩存，主域名服務器緩存。
DNS負載均衡
不知道你們有沒有注意這樣一件事，你訪問baidu.com的時候，每次響應的并非是同一個服務器（IP地址不同），一般大公司都有成百上千臺服務器來支撐訪問，假設只有一個服務器，那它的性能和存儲量要多大才能支撐這樣大量的訪問呢？DNS可以返回一個合適的機器的IP給用戶，例如可以根據每臺機器的負載量，該機器離用戶地理位置的距離等等，這種過程就是DNS負載均衡
發起TCP連接
TCP提供一種可靠的傳輸，這個過程涉及到三次握手，四次揮手，下面我們詳細看看 TCP提供一種面向連接的，可靠的字節流服務。 其首部的數據格式如下
字段分析
TCP報頭中的源端口號和目的端口號同IP數據報中的源IP與目的IP唯一確定一條TCP連接。
需要注意的是： （A）不要將確認序號Ack與標志位中的ACK搞混了。 （B）確認方Ack=發起方Req+1，兩端配對。
第一次握手：
客戶端發送syn包(Seq=x)到服務器，并進入SYN_SEND狀態，等待服務器確認；
第二次握手：
服務器收到syn包，必須確認客戶的SYN（ack=x+1），同時自己也發送一個SYN包（Seq=y），即SYN+ACK包，此時服務器進入SYN_RECV狀態；
第三次握手：
客戶端收到服務器的SYN＋ACK包，向服務器發送確認包ACK(ack=y+1)，此包發送完畢，客戶端和服務器進入ESTABLISHED狀態，完成三次握手。
握手過程中傳送的包里不包含數據，三次握手完畢后，客戶端與服務器才正式開始傳送數據。理想狀態下，TCP連接一旦建立，在通信雙方中的任何一方主動關閉連接之前，TCP 連接都將被一直保持下去。
為什么會采用三次握手，若采用二次握手可以嗎？ 四次呢？
建立連接的過程是利用客戶服務器模式，假設主機A為客戶端，主機B為服務器端。
采用三次握手是為了防止失效的連接請求報文段突然又傳送到主機B，因而產生錯誤。失效的連接請求報文段是指：主機A發出的連接請求沒有收到主機B的確認，于是經過一段時間后，主機A又重新向主機B發送連接請求，且建立成功，順序完成數據傳輸?？紤]這樣一種特殊情況，主機A第一次發送的連接請求并沒有丟失，而是因為網絡節點導致延遲達到主機B，主機B以為是主機A又發起的新連接，于是主機B同意連接，并向主機A發回確認，但是此時主機A根本不會理會，主機B就一直在等待主機A發送數據，導致主機B的資源浪費。
采用兩次握手不行，原因就是上面說的失效的連接請求的特殊情況。而在三次握手中， client和server都有一個發syn和收ack的過程， 雙方都是發后能收， 表明通信則準備工作OK.
為什么不是四次握手呢？ 大家應該知道通信中著名的藍軍紅軍約定， 這個例子說明， 通信不可能100%可靠， 而上面的三次握手已經做好了通信的準備工作， 再增加握手， 并不能顯著提高可靠性， 而且也沒有必要。
數據傳輸完畢后，雙方都可釋放連接。最開始的時候，客戶端和服務器都是處于ESTABLISHED狀態，假設客戶端主動關閉，服務器被動關閉。
第一次揮手：
客戶端發送一個FIN，用來關閉客戶端到服務器的數據傳送，也就是客戶端告訴服務器：我已經不會再給你發數據了(當然，在fin包之前發送出去的數據，如果沒有收到對應的ack確認報文，客戶端依然會重發這些數據)，但是，此時客戶端還可以接受數據。 FIN=1，其序列號為seq=u（等于前面已經傳送過來的數據的最后一個字節的序號加1），此時，客戶端進入FIN-WAIT-1（終止等待1）狀態。 TCP規定，FIN報文段即使不攜帶數據，也要消耗一個序號。
第二次揮手：
服務器收到FIN包后，發送一個ACK給對方并且帶上自己的序列號seq，確認序號為收到序號+1（與SYN相同，一個FIN占用一個序號）。此時，服務端就進入了CLOSE-WAIT（關閉等待）狀態。TCP服務器通知高層的應用進程，客戶端向服務器的方向就釋放了，這時候處于半關閉狀態，即客戶端已經沒有數據要發送了，但是服務器若發送數據，客戶端依然要接受。這個狀態還要持續一段時間，也就是整個CLOSE-WAIT狀態持續的時間。
此時，客戶端就進入FIN-WAIT-2（終止等待2）狀態，等待服務器發送連接釋放報文（在這之前還需要接受服務器發送的最后的數據）。
第三次揮手：
服務器發送一個FIN，用來關閉服務器到客戶端的數據傳送，也就是告訴客戶端，我的數據也發送完了，不會再給你發數據了。由于在半關閉狀態，服務器很可能又發送了一些數據，假定此時的序列號為seq=w，此時，服務器就進入了LAST-ACK（最后確認）狀態，等待客戶端的確認。
第四次揮手：
主動關閉方收到FIN后，發送一個ACK給被動關閉方，確認序號為收到序號+1，此時，客戶端就進入了TIME-WAIT（時間等待）狀態。注意此時TCP連接還沒有釋放，必須經過2?MSL（最長報文段壽命）的時間后，當客戶端撤銷相應的TCB后，才進入CLOSED狀態。
服務器只要收到了客戶端發出的確認，立即進入CLOSED狀態。同樣，撤銷TCB后，就結束了這次的TCP連接。可以看到，服務器結束TCP連接的時間要比客戶端早一些。
至此，完成四次揮手。
為什么客戶端最后還要等待2MSL？
MSL（Maximum Segment Lifetime），TCP允許不同的實現可以設置不同的MSL值。
第一，保證客戶端發送的最后一個ACK報文能夠到達服務器，因為這個ACK報文可能丟失，站在服務器的角度看來，我已經發送了FIN+ACK報文請求斷開了，客戶端還沒有給我回應，應該是我發送的請求斷開報文它沒有收到，于是服務器又會重新發送一次，而客戶端就能在這個2MSL時間段內收到這個重傳的報文，接著給出回應報文，并且會重啟2MSL計時器。
第二，防止類似與“三次握手”中提到了的“已經失效的連接請求報文段”出現在本連接中?？蛻舳税l送完最后一個確認報文后，在這個2MSL時間中，就可以使本連接持續的時間內所產生的所有報文段都從網絡中消失。這樣新的連接中不會出現舊連接的請求報文。
為什么建立連接是三次握手，關閉連接確是四次揮手呢？
建立連接的時候， 服務器在LISTEN狀態下，收到建立連接請求的SYN報文后，把ACK和SYN放在一個報文里發送給客戶端。 而關閉連接時，服務器收到對方的FIN報文時，僅僅表示對方不再發送數據了但是還能接收數據，而自己也未必全部數據都發送給對方了，所以己方可以立即關閉，也可以發送一些數據給對方后，再發送FIN報文給對方來表示同意現在關閉連接，因此，己方ACK和FIN一般都會分開發送，從而導致多了一次。
發送HTTP請求
首先科補一個小知識，HTTP的端口為80/8080，而HTTPS的端口為443
發送HTTP請求的過程就是構建HTTP請求報文并通過TCP協議中發送到服務器指定端口 請求報文由請求行，請求報頭，請求正文組成。
請求行
請求行的格式為Method Request-URL HTTP-Version CRLF eg: GET index.html HTTP/1.1 常用的方法有: GET,POST, PUT, DELETE, OPTIONS, HEAD。
常見的請求方法區別
這里主要展示POST和GET的區別
常見的區別
注意一點你也可以在GET里面藏body，POST里面帶參數
重點區別
GET會產生一個TCP數據包，而POST會產生兩個TCP數據包。
詳細的說就是：
注意一點，并不是所有的瀏覽器都會發送兩次數據包，Firefox就發送一次
請求報頭
請求報頭允許客戶端向服務器傳遞請求的附加信息和客戶端自身的信息。
從圖中可以看出，請求報頭中使用了Accept, Accept-Encoding, Accept-Language, Cache-Control, Connection, Cookie等字段。Accept用于指定客戶端用于接受哪些類型的信息，Accept-Encoding與Accept類似，它用于指定接受的編碼方式。Connection設置為Keep-alive用于告訴客戶端本次HTTP請求結束之后并不需要關閉TCP連接，這樣可以使下次HTTP請求使用相同的TCP通道，節省TCP連接建立的時間。
請求正文
當使用POST, PUT等方法時，通常需要客戶端向服務器傳遞數據。這些數據就儲存在請求正文中。在請求包頭中有一些與請求正文相關的信息，例如: 現在的Web應用通常采用Rest架構，請求的數據格式一般為json。這時就需要設置Content-Type: application/json。
HTTP屬于客戶端緩存，我們常認為瀏覽器有一個緩存數據庫，用來保存一些靜態文件，下面我們分為以下幾個方面來簡單介紹HTTP緩存
緩存的規則
緩存規則分為強制緩存和協商緩存
強制緩存
當緩存數據庫中有客戶端需要的數據，客戶端直接將數據從其中拿出來使用（如果數據未失效），當緩存服務器沒有需要的數據時，客戶端才會向服務端請求。
協商緩存
又稱對比緩存。客戶端會先從緩存數據庫拿到一個緩存的標識，然后向服務端驗證標識是否失效，如果沒有失效服務端會返回304，這樣客戶端可以直接去緩存數據庫拿出數據，如果失效，服務端會返回新的數據
強制緩存的優先級高于協商緩存，若兩種緩存皆存在，且強制緩存命中目標，則協商緩存不再驗證標識。
緩存的方案
上面的內容讓我們大概了解了緩存機制是怎樣運行的，但是，服務器是如何判斷緩存是否失效呢？我們知道瀏覽器和服務器進行交互的時候會發送一些請求數據和響應數據，我們稱之為HTTP報文。報文中包含首部header和主體部分body。與緩存相關的規則信息就包含在header中。boby中的內容是HTTP請求真正要傳輸的部分。舉個HTTP報文header部分的例子如下：
我們依舊分為強制緩存和協商緩存來分析。
強制緩存
對于強制緩存，服務器響應的header中會用兩個字段來表明——Expires和Cache-Control。
Expires
Exprires的值為服務端返回的數據到期時間。當再次請求時的請求時間小于返回的此時間，則直接使用緩存數據。但由于服務端時間和客戶端時間可能有誤差，這也將導致緩存命中的誤差，另一方面，Expires是HTTP1.0的產物，故現在大多數使用Cache-Control替代。
Cache-Control
Cache-Control有很多屬性，不同的屬性代表的意義也不同。
協商緩存
協商緩存需要進行對比判斷是否可以使用緩存。瀏覽器第一次請求數據時，服務器會將緩存標識與數據一起響應給客戶端，客戶端將它們備份至緩存中。再次請求時，客戶端會將緩存中的標識發送給服務器，服務器根據此標識判斷。若未失效，返回304狀態碼，瀏覽器拿到此狀態碼就可以直接使用緩存數據了。
對于協商緩存來說，緩存標識我們需要著重理解一下，下面我們將著重介紹它的兩種緩存方案。
Last-Modified
Last-Modified：服務器在響應請求時，會告訴瀏覽器資源的最后修改時間。
這兩個的區別是一個是修改了才下載一個是沒修改才下載。
Last-Modified 說好卻也不是特別好，因為如果在服務器上，一個資源被修改了，但其實際內容根本沒發生改變，會因為Last-Modified時間匹配不上而返回了整個實體給客戶端（即使客戶端緩存里有個一模一樣的資源）。為了解決這個問題，HTTP1.1推出了Etag。
Etag
Etag：服務器響應請求時，通過此字段告訴瀏覽器當前資源在服務器生成的唯一標識（生成規則由服務器決定）
但是實際應用中由于Etag的計算是使用算法來得出的，而算法會占用服務端計算的資源，所有服務端的資源都是寶貴的，所以就很少使用Etag了。
緩存的優點
不同刷新的請求執行過程
瀏覽器地址欄中寫入URL，回車
F5
Ctrl+F5
它會對TCP連接進行處理，對HTTP協議進行解析，并按照報文格式進一步封裝成HTTP Request對象，供上層使用。這一部分工作一般是由Web服務器去進行，我使用過的Web服務器有Tomcat, Nginx和Apache等等 HTTP報文也分成三份，狀態碼 ，響應報頭和響應報文
狀態碼
狀態碼是由3位數組成，第一個數字定義了響應的類別，且有五種可能取值:
常見狀態碼區別
200 成功
請求成功，通常服務器提供了需要的資源。
204 無內容
服務器成功處理了請求，但沒有返回任何內容。
301 永久移動
請求的網頁已永久移動到新位置。 服務器返回此響應（對 GET 或 HEAD 請求的響應）時，會自動將請求者轉到新位置。
302 臨時移動
服務器目前從不同位置的網頁響應請求，但請求者應繼續使用原有位置來進行以后的請求。
304 未修改
自從上次請求后，請求的網頁未修改過。 服務器返回此響應時，不會返回網頁內容。
400 錯誤請求
服務器不理解請求的語法。
401 未授權
請求要求身份驗證。 對于需要登錄的網頁，服務器可能返回此響應。
403 禁止
服務器拒絕請求。
404 未找到
服務器找不到請求的網頁。
422 無法處理
請求格式正確，但是由于含有語義錯誤，無法響應
500 服務器內部錯誤
服務器遇到錯誤，無法完成請求。
響應報頭
常見的響應報頭字段有: Server, Connection...。
響應報文
你從服務器請求的HTML,CSS,JS文件就放在這里面
性能優化之回流重繪
回流
當Render Tree中部分或全部元素的尺寸、結構、或某些屬性發生改變時，瀏覽器重新渲染部分或全部文檔的過程稱為回流。
會導致回流的操作：
一些常用且會導致回流的屬性和方法：
重繪
當頁面中元素樣式的改變并不影響它在文檔流中的位置時（例如：color、background-color、visibility等），瀏覽器會將新樣式賦予給元素并重新繪制它，這個過程稱為重繪。
CSS
JavaScript
.html & js & css
1.AMD和CMD是什么？它們的區別有哪些？
AMD和CMD是二種模塊定義規范?，F在都使用模塊化編程，AMD，異步模塊定義；CMD，通用模塊定義。AMD依賴前置，CMD依賴就近。CMD的API職責單一，沒有全局require，AMD的一個API可以多用。
2.web開發常見的漏洞。
XSS（跨站腳本攻擊）：其原理是攻擊者向有XSS漏洞的網站中輸入(傳入)惡意的HTML代碼，當其它用戶瀏覽該網站時，這段HTML代碼會自動執行，從而達到攻擊的目的。如，盜取用戶Cookie、破壞頁面結構、重定向到其它網站等。
SQL注入：用戶可以提交一段數據庫查詢代碼，根據程序返回的結果，獲得某些他想得知的數據，這就是所謂的SQL Injection，即SQL注入。
3.cookie和session
當你在瀏覽網站的時候，WEB 服務器會先送一小小資料放在你的計算機上，Cookie 會幫你在網站上所打的文字或是一些選擇，
都紀錄下來。當下次你再光臨同一個網站，WEB 服務器會先看看有沒有它上次留下的 Cookie 資料，有的話，就會依據 Cookie
里的內容來判斷使用者，送出特定的網頁內容給你。
當程序需要為某個客戶端的請求創建一個session時，服務器首先檢查這個客戶端的請求里是否已包含了一個session標識（稱為session id），如果已包含則說明以前已經為此客戶端創建過session，服務器就按照session id把這個session檢索出來使用（檢索不到，會新建一個），如果客戶端請求不包含session id，則為此客戶端創建一個session并且生成一個與此session相關聯的session id
4.MVC BFC
mvc是模型(model)－視圖(view)－控制器(controller)的縮寫，一種軟件設計典范使用MVC的目的是將M和V的實現代碼分離，從而使同一個程序可以使用不同的表現形式。MVC對應Html，CSS，js。
BFC全稱”Block Formatting Context”, 中文為“塊級格式化上下文”。流體特性：塊狀水平元素，如div元素（下同），在默認情況下（非浮動、絕對定位等），水平方向會自動填滿外部的容器；BFC元素特性表現原則就是，內部子元素不會影響外部的元素。
5.HTTP狀態碼：
1.消息 2.成功 3.重定向 4.請求錯誤 5.服務器錯誤 304：響應禁止包含消息體，如果客戶端發送了一個帶條件的 GET 請求且該請求已被允許，而文檔的內容（自上次訪問以來或者根據請求的條件）并沒有改變，則服務器應當返回這個狀態碼。 305：被請求的資源必須通過指定的代理才能被訪問。 400：語義有誤，當前請求無法被服務器理解。除非進行修改，否則客戶端不應該重復提交這個請求，或者請求參數有誤。 403：服務器已經理解請求，但是拒絕執行它。 404：請求失敗，請求所希望得到的資源未被在服務器上發現。 500：服務器遇到了一個未曾預料的狀況，導致了它無法完成對請求的處理。一般來說，這個問題都會在服務器端的源代碼出現錯誤時出現。
6.HTML 5 增加了一項新功能是 自定義數據屬性 ，也就是 data- 自定義屬性。在HTML5中我們可以使用以 data- 為前綴來設置我們需要的自定義屬性，來進行一些數據的存放。
<div id = "user" data-uid = "12345" data-uname = "愚人碼頭" > </div> // 使用getAttribute獲取 data- 屬性 var user = document . getElementById ( 'user' ) ; var userName =user . getAttribute ( 'data-uname' ) ; // userName = '愚人碼頭' var userId = user . getAttribute ( 'data-uid' ) ; // userId = '12345'
使用setAttribute設置 data- 屬性
user . setAttribute ( 'data-site' , 'http://www.css88.com' ) ;
7.使div水平垂直都居中
知道DIV的自身長度和寬度，其實解決的思路是這樣的：首們需要position:absolute;絕對定位。而層的定位點，使用外補丁margin負值的方法。負值的大小為層自身寬度高度除以二。[style="position: absolute;top:50%;left: 50%"]只能實現DIV離左邊框和上邊框的距離為屏幕的物理尺寸的一半，忽略了DIV本身的長度和寬度，所以不會實現DIV的水平垂直居中。
不知道DIV的本身長度和寬度時:
$(window).load(function(){
$(".mydiv").css({position: "absolute", left: ($(window).width() -
$(".mydiv").width())/2, top: ($(window).height() - $(".mydiv").height())/2
});
});
8.Call（）和apply（）
構造函數：
function showname(){
this.name="zygg"；
}
var qq=new showname();
console.log(qq.name);
我們發現apply()和call()的真正用武之地是能夠擴充函數賴以運行的作用域，可以改變函數體內部 this 的指向：
window.firstName = "diz";
window.lastName = "song";
var myname = { firstName: "my", lastName: "Object" };
function show() {
console.log("Hello " + this.firstName + " " +this.lastName, " glad to meet you!");
}
show();
show.call(myname);//如果不這樣寫，對象myname是沒法調用函數 show()的。
二者作用類似，區別就是參數不同：
call(thisObj，Object)
apply(thisObj，[argArray])
9.動態節點綁定事件
Live（） delegate（） bind（）【處理文檔中的靜態部分，不用于。。?！?
delegate()和live（）作用類似，附加的事件處理程序適用于匹配選擇器的當前及未來的元素（比如由腳本創建的新元素）。但二者參數不一樣。
$(selector).delegate(childSelector,event,function)
$(selector).live(event,function)
$("div").delegate("p","click",function(){
$(this).slideToggle();
});//只有DIV內的p元素會被綁定事件。
$("p").live("click",function(){
$(this).slideToggle();
});//文檔內所有p元素都會被綁定事件
bind（）可以向元素添加的一個或多個事件處理程序，以及當事件發生時運行的函數。
$(selector).bind(event,function)
$("button").bind("click",function(){
$("p").slideToggle();
});//bind【捆綁】
10.Position的四個屬性詳解
Position的四個屬性：static，fixed，absolute，relative
首先，static，是position屬性的默認值，也就是無特殊定位，遵循html定位規則。
然后，fixed，是相對于瀏覽器窗口進行定位，不隨頁面的上下翻動而移動，比如固定在頁面末端的二維碼等。
下來，就是absolute，它是相對于它的第一個父元素進行定位，如果你想讓這個div#demo里的一個子div#sub相對于#demo定位在右上角的某個地方，應該給#demo相對定位，#sub絕對定位。 此時，它的第一個父元素就是id=demo的div；否則它的父元素就是body，這樣它的位置在頁面中保持不變，但是隨著頁面移動會發生變化（區別fixed）。
最后，relative，relative是相對于自己來定位的，相對于其正常位置進行定位。例如：#demo{position:relative;top:-50px;},這時#demo會在相對于它原來的位置上移50px。
P.S:采用左列left浮動，右列不浮動，采用margin-left定位的方式。
11.理解CSS盒子模型
什么是CSS的盒子模式呢？為什么叫它是盒子？先說說我們在網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。
CSS盒子模式
這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也具有這些屬性，所以叫它盒子模式。那么內容就是盒子里裝的東西；而填充就是怕盒子里裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料；邊框就是盒子本身了；至于邊界則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙保持通風，同時也為了方便取出嘛。在網頁設計上，內容常指文字、圖片等元素，但是也可以是小盒子（DIV嵌套），與現實生活中盒子不同的是，現實生活中的東西一般不能大于盒子，否則盒子會被撐壞的，而CSS盒子具有彈性，里面的東西大過盒子本身最多把它撐大，但它不會損壞的。而且填充只有寬度屬性。
12.區別onmouseover和mouseover
onmouseover是Event 對象的一個屬性，Mouseover是jQuery中的一個事件 。
推薦使用jQuery，直接執行方法$("#id").mouseover(function(){});
完全使用js則是如下寫法：document.getElementById("id").onmouseover=function(){};
document.getElementsByTagName("body")[0].style.backgroundColor="pink”; //注意不要忘了style，深刻理解DOM的本質。
13.一個簡單的AJAX 的請求
<script type="text/javascript">
function loadXMLDoc(){
var xmlhttp;
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/ajax/demo_get.asp",true);
xmlhttp.send();
}
</script>
14.Javascript 的addEventListener()及attachEvent()區別分析
addEventListener()和attachEvent()是一個偵聽事件并處理相應的函數，
可以動態的為網頁內的元素添加一個或多個事件?？梢詫⑹录驮胤蛛x，這樣可編輯性就高了。
addEventListener的使用方式：
target.addEventListener(type, listener, useCapture);
target： 文檔節點、document、window 或 XMLHttpRequest。
type： 字符串，事件名稱，不含“on”，比如“click”、“mouseover”、“keydown”等。
listener ：實現了 EventListener 接口或者是 JavaScript 中的函數。
useCapture ：是否使用捕捉，一般用 false 。例如：document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);
而attachEvent()則是，target.attachEvent(type, listener);
注意：attachEvent（）中的type： 字符串，事件名稱，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。
15.關于事件監聽
比如，<button onclick='A();' /> 就表示"你正在監聽 click 事件", 而事件監聽器就是我們為了要響應這個事件而寫的函數。至于事件監聽機制了，就是冒泡和捕獲。
16.事件監聽機制（冒泡和捕獲）
事件捕獲：事件從最上一級標簽開始往下查找，直到捕獲到事件目標(target)。
事件冒泡：事件從事件目標(target)開始，往上冒泡直到頁面的最上一級標簽。
假設一個元素div，它有一個下級元素p。
<div> <p>元素</p> </div>
這兩個元素都綁定了click事件，如果用戶點擊了p，它在div和p上都觸發了click事件，那這兩個事件處理程序哪個先執行呢？
如div先觸發，這就叫做事件捕獲。
如p先觸發，這就叫做事件冒泡。
IE只支持事件冒泡，其他主流瀏覽器兩種都支持。
程序員可以自己選擇綁定事件時采用事件捕獲還是事件冒泡，方法就是綁定事件時通過addEventListener函數，它有三個參數，第三個參數若是true，則表示采用事件捕獲，若是false，則表示采用事件冒泡。
事件的傳播是可以阻止的：
? 在W3c中，使用stopPropagation（）方法
在捕獲的過程中stopPropagation（）；后，后面的冒泡過程也不會發生了~
propagation 【傳播，蔓延】
阻止事件的默認行為，例如click a標簽后的跳轉~
? 在W3c中，使用preventDefault（）方法；
? 在IE下設置window.event.returnValue = false;
17.DNS的工作原理（遞歸和迭代）（應用層）
DNS的工作原理及過程分下面幾個步驟：
第一步：客戶機提出域名解析請求，并將該請求發送給本地的域名服務器。
第二步：當本地的域名服務器收到請求后，就先查詢本地的緩存，如果有該紀錄項，則本地的域名服務器就直接把查詢的結果返回。
第三步：如果本地的緩存中沒有該紀錄，則本地域名服務器就直接把請求發給根域名服務器，然后根域名服務器再返回給本地域名服務器一個所查詢域(根的子域) 的主域名服務器的地址。
第四步：本地服務器再向上一步返回的域名服務器發送請求，然后接受請求的服務器查詢自己的緩存，如果沒有該紀錄，則返回相關的下級的域名服務器的地址。
第五步：重復第四步，直到找到正確的紀錄。
第六步：本地域名服務器把返回的結果保存到緩存，以備下一次使用，同時還將結果返回給客戶機。
18.什么是DOM事件處理程序？
首先要理解什么是DOM？Dom是針對HTML文檔的一個API。什么是事件流？事件流分為：事件冒泡（IE的事件流）和事件捕獲。事件冒泡就是由最具體的元素開始接收，然后逐級向上；事件捕獲就是由不太具體的元素開始接收，逐級向下，最具體的元素最后才接收到事件。
DOM事件處理程序分為DOM0級、DOM2級。DOM0級具有簡單，跨瀏覽器的優勢，它是把函數賦值給一個事件的處理程序屬性。例如：btn.onlick=function（）{。。。}；DOM2級事件定義了兩個方法，用于處理指定和刪除事件處理程序的操作。addEventListener()和removeEventListener()。它們都接收三個參數，要處理的事件名、作為事件處理程序的函數和布爾值。布爾值為true表示在捕獲階段調用事件處理程序，布爾值為false是在冒泡處調用。注意：事件名要去掉“on”。通過addEventListener（）添加的事件，只能由removeEventListener()刪除。IE存在兼容問題，可以用attachEvent()添加事件和detachEvent（）刪除事件。接收兩個參數，事件處理程序的名稱和函數。注意：事件名此時要加”on”。
19.如果給一個元素同時綁定兩個事件，會怎么樣？
Dom 0級和Dom 2級都可以給一個元素添加多個事件，Dom 0級的每個事件只支持一個事件處理程序，如果綁定同一個事件，那么后邊的那個事件，函數會覆蓋掉前邊的那個事件函數。Dom2級可以添加多個事件處理程序，他們會按照添加的順序觸發。
20.深入理解閉包
要理解閉包，首先必須理解Javascript特殊的變量作用域。我的理解是，閉包就是能夠讀取其他函數內部變量的函數。
既然函數b可以讀取函數a中的局部變量，那么只要把b作為返回值，我們不就可以在a外部讀取它的內部變量了嗎！
閉包可以用在許多地方。它的最大用處有兩個，一個是前面提到的可以讀取函數內部的變量，另一個就是讓這些變量的值始終保持在內存中。
21.jQuery源碼分析：
選擇器 Sizzle引擎 回調對象 - Callbacks 事件綁定 - 綁定設計
DOM操作方法與核心 Ajax - 整體結構
選擇器 Sizzle引擎：個人認為，sizzle選擇器是增強版的querySelectorAll 函數：返回指定元素節點的子樹中匹配selector的節點集合，采用的是深度優先預查找；如果沒有匹配的，這個方法返回空集合）
22.設計模式：
一共有23種設計模式
1.觀察者模式
2.監聽模式
23.CSS框架：
YUI、JQuery、Prototype，bootstrap。
24.幾個前端框架的區別：
jQuery
核心js只有50K，小而精，占用帶寬小，側重于對js dom編程。有靈活便捷的Ajax請求和回調操作。
ExtJS
一整套帶有UI的js庫，封裝得很多，核心js就600多K，這么大的東西門戶網站當然就別想了，里面的效果當然也不會運用到門戶網站，所以它是專門為管理系統而生的。
3、YUI
或者是類似于網盤應用這種東東。
4.Dojo
Dojo是功能最為強大的javascript框架，刻意提醒一下：功能最強大。所以它幾乎包含了所有你可能想要用到的東西。）。 Dojo更適合企業應用和產品開發的需要，
5、Prototype
最成熟的。但個人認為可以被Jquery取代。兩者相似度也比較高。
25.說說float和position
float:none|left|right|inherit
Inherit:規定應該從父元素繼承 float 屬性的值。
float是相對定位的，會隨著瀏覽器的大小和分辨率的變化而改變，而position就不行了，所以一般情況下還是float布局！在局部可能會用到position進行定位！既然是布局，就用float好，這個我比較常用。這個浮動是可以清除的，一般不會影響整體布局。 而position，定位，是不受約束的，這個貌似都談不上布局了，一般要是做什么特殊的定位或者浮動層的時候，可以考慮使用！float會影響后面的元素，而position不會影響后面的元素。
26.清除浮動：
父級div定義 height,父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。
結尾處加空div標簽 clear:both
父級div定義 overflow:hidden /auto
27.前端性能優化
①對于頁面來說：盡量減少DOM元素的數量。
減少iframe的數量
減少http的請求次數
提前加載
②對于CSS來說：將樣式表置頂
使用link代替@important
區別1：link引用CSS時，在頁面載入時同時加載；@import需要頁面網頁完全載入以后加載。
區別2：link是XHTML標簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。link支持定義RSS(簡易信息聚合).
區別3：link支持使用Javascript控制DOM去改變樣式；而@import不支持。
③對于JS來說： 將腳本置底
使用外部JS和CSS文件 ，精簡JS和CSS文件，去除重復腳本
目前，前端性能測試的執行工具也有很多，比如YSlow，Page Speed，dynaTrace AJAX Edition，webload等等。
28.HTML語義化
就是當你寫html時，要按照人們的思考邏輯寫。不但要自己能看懂，也要讓別人也能看懂，不要讓別人覺得你的代碼很亂。語義化的主要目的就是讓大家直觀的認識標簽(markup)和屬性(attribute)的用途和作用。
語義化的網頁的好處，最主要的就是對搜索引擎友好，有了良好的結構和語義你的網頁內容自然容易被搜索引擎抓取，你網站的推廣便可以省下不少的功夫。
語義 Web 技術有助于利用基于開放標準的技術，從數據、文檔內容或應用代碼中分離出意義。
29.可以談談自己對SEO和title和keywords堆砌問題。
30.說說jsonp，getJSON(),getScript():
Jsonp（解決跨域）
一種非正式傳輸協議，人們把它稱作JSONP，該協議的一個要點就是允許用戶傳遞一個callback參數給服務端，然后服務端返回數據時會將這個callback參數作為函數名來包裹住JSON數據，這樣客戶端就可以隨意定制自己的函數來自動處理返回數據了。
因為，<script> 元素的這個開放策略。
getJSON():
所以getJSON和ajax的方式(實際就是jsonp)想比較，也就是callback函數一個是自動生成的函數名，一個是手工指定的函數名。
getScript():
客戶端：
<script type="text/javascript">
jQuery.getScript("http://alloyteamzygg.sinaapp.com/js/test.js",
function(){
console.log(zy.name)
})
</script>
服務端：
Var zy={“name”:”zygg”,
“age”:”22”
};
31.prototype屬性
每一個構造函數都有一個屬性叫做原型(prototype)。這個屬性非常有用：為一個特定類聲明通用的變量或者函數。prototype是一個對象，因此，你能夠給它添加屬性。你添加給prototype的屬性將會成為使用這個構造函數創建的對象的通用屬性。
32.js實現類:
構造函數方式：
由于js類的定義方法和函數的定義方法一樣，所以定義構造函數的同時就定義了類。構造函數內的方法和屬性也就是類中的方法和屬性。
原型方式
該方式利用了對象的prototype屬性。首先定義了一個空函數，然后通過prototype屬性來定義對象的屬性。調用該函數時，原型的所有屬性都會立即賦予要創建的對象
33.js面向對象
面向對象的語言有一個標志，即擁有類的概念
34.構造函數
js創建對象的方式包括兩種：對象字面量和使用new表達式。對應代碼：
Var zy={
“name”:”zygg”,
“age”:22} function zy(name,age){ this.name=name; this.age=age;
}
zy.prototype.sex="male"; var zygg=new zy("bailu",18) console.log(zygg.name) //bailu
35.js繼承
繼承是指一個對象直接使用另一對象的屬性和方法
實現方法：
對象冒充，及call（）Apply（）參見上述call和apply的用法。
原型鏈方式：
js中每個對象均有一個隱藏的__proto__屬性，一個實例化對象的__proto__屬性指向其類的prototype方法，而這個prototype方法又可以被賦值成另一個實例化對象，這個對象的__proto__又需要指向其類，由此形成一條鏈。
那么__proto__是什么？我們在這里簡單地說下。每個對象都會在其內部初始化一個屬性，就是__proto__，當我們訪問一個對象的屬性 時，如果這個對象內部不存在這個屬性，那么他就會去__proto__里找這個屬性，這個__proto__又會有自己的__proto__，于是就這樣 一直找下去，也就是我們平時所說的原型鏈的概念。
36.js事件委托
“事件處理程序過多”問題的解決方案就是事件委托。
事件委托利用的是事件冒泡機制，只制定一事件處理程序，就可以管理某一類型的所有事件（使用事件委托，只需在DOM樹中盡量最高的層次上添加一個事件處理程序）。
這里要用到事件源：event 對象，需要用到target屬性，其 事件屬性可返回事件的目標節點（觸發該事件的節點）
dom.onmouseover = function(ev){
var target = ev.target
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "red";
}
}
37.js自定義事件：
js自定義事件用處較多，最主要的就是實現觀察者模式.
觀察者模式( 又叫發布者-訂閱者模式 )應該是最常用的設計模式之一。
平時接觸的dom事件. 也是js和dom之間實現的一種觀察者模式.
觀察者模式舉例：
div.onclick = function click (){
alert ( ''click' )
}
只要訂閱了div的click事件. 當點擊div的時候, function click就會被觸發.Div為發布者，click事件為訂閱者
自定義事件例子：
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('body').on('someclick', function () {
console.log('被點擊了~~');
});
$('body').trigger('someclick');
});
</script>
on（）是jQuery中的類似于bind（），live（），delegate（）等綁定事件的方法。
trigger() 方法觸發被選元素的指定事件類型。先給固定元素綁定一個自定義事件”someclick”，然后必須通過trigger（）來使自定義事件可以使用。
Trigger【引發，觸發;】
38.回調函數：
函數a有一個參數，這個參數是個函數b，當函數a執行完以后執行函數b。那么這個過程就叫回調。函數b是你以參數形式傳給函數a的，那么函數b就叫回調函數?；卣{函數可以繼續擴展一個函數的功能，可以是程序非常靈活。
function zy(callback){
alert("開始");
callback();
}
function zygg(){
alert("我是回調函數");
}
function test(){
zy(zygg)
}
39.說一說css中box和flex
恩恩，首先'box'吶是比較早的語法，使用它時需要帶上前綴，比如 display: -webkit-box; / Chrome 4+, Safari 3.1, iOS Safari 3.2+ /，而"flex"是2012年的語法，是css3新規定的，也將是以后標準的語法。將父元素的display屬性設置為-webkit-box（box），然后子元素通過屬性-webkit-box-flex來指定一個框的子元素是否是靈活的或固定的大小，如上，定義兩個靈活的p元素。如果父級box的總寬度為300px，＃P1將有一個100px的寬度，＃P2將有一個200px的寬度，也就是呈固定比例劃分。當然了，也可以這樣寫：
<div style="background-color: pink;width: 500px;height:500px;display:flex"> <p style="background-color: orange; flex:1.0;border:1px solid red;">111111111111</p> <p style="background-color: orangered; flex:2.0;border:1px solid blue;">22222222222</p></div
當然了css3規定了，一系列的有關box的屬性，比如 box-shadow。。。。。
40.JavaScript內置對象有以下幾種。
String對象：處理所有的字符串操作 Math對象：處理所有的數學運算 Date對象：處理日期和時間的存儲、轉化和表達 Array對象：提供一個數組的模型、存儲大量有序的數據 Event對象：提供JavaScript事件的各種處理信息
41.JavaScript內置函數
①：escape( )escape() 函數可對字符串進行編碼，這樣就可以在所有的計算機上讀取該字符串。 eg:?=%3
②：eval( ) eval() 函數可計算某個字符串，并執行其中的的 JavaScript 代碼。
eg:eval("x=10;y=20;document.write(x*y)")
③：isFinite( )isFinite() 函數用于檢查其參數是否是無窮大。返回true或者false。
④：isNaN( ) isNaN( ) 函數可用于判斷其參數是否是 NaN
⑤：parseFloat( )parseFloat() 函數可解析一個字符串，并返回一個浮點數。
⑥;parseInt( ) parseInt() 函數可解析一個字符串，并返回一個整數。
⑦：unescape( ) unescape() 函數可對通過 escape() 編碼的字符串進行解碼。
42.自適應問題
自適應指的就是指其長（寬）度可以根據瀏器窗口的大小自動改變其長（寬）度（隨瀏覽器長（寬）的改變而改變）,而不會被瀏覽器遮住。
實現方法（以左側固定，右側自適應為例）：
①采用左列 left 浮動，右列不浮動，采用 margin-left 定位的方式。
②左列使用絕對定位，右列使用 margin-left 定位。
43.我們給一個dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡，你來說下會執行幾次事件，然后會先執行冒泡還是捕獲?。。?/p>
44.jQuery的三種綁定事件方式：bind（），live（），delegate（）
45.從輸入 URL 到頁面加載完的過程中都發生了什么事情？
①首先如果我們如果輸入的不是ip地址，而是域名的話，就需要IP解析，DNS域名解析（具體見DNS工作機制）。
②解析出來對應的IP后，如不包含端口號，http協議默認端口號是80；https（http+ssl（傳輸層））是430！然后向IP發起網絡連接，根據http協議要求，組織一個請求的數據包，里面包含大量請求信息。
③服務器響應請求，將數據返回給瀏覽器。數據可能是根據HTML協議組織的網頁，里面包含頁面的布局、文字。數據也可能是圖片、腳本程序等。
④開始根據資源的類型，將資源組織成屏幕上顯示的圖像，這個過程叫渲染，網頁渲染是瀏覽器最復雜、最核心的功能。
⑤將渲染好的頁面圖像顯示出來，并開始響應用戶的操作。
46.jQuery 選擇器種類
47.Unicode和ASCII的區別是什么回答
計算機發明后，為了在計算機中表示字符，人們制定了一種編碼，叫ASCII碼。
中國人利用連續2個擴展ASCII碼的擴展區域（0xA0以后）來表示一個漢字，該方法的標準叫GB-2312。因為各個國家地區定義的字符集有交集，因此使用GB-2312的軟件，就不能在BIG-5的環境下運行（顯示亂碼），反之亦然。
為了把全世界人民所有的所有的文字符號都統一進行編碼，于是制定了UNICODE標準字符集。UNICODE 使用2個字節表示一個字符(unsigned shor int、WCHAR、_wchar_t、OLECHAR)。
48.JS的數據類型：字符串、數字、布爾、數組、對象、Null、Undefined
Null和undefined的區別：
undefined表示變量聲明但未初始化時的值，javascript解釋器不知道這是什麼東西,會拋出"未定義"的錯誤
null表示準備用來保存對象，還沒有真正保存對象的值。從邏輯角度看，null值表示一個空對象指針，意思是你定義了它,但它沒有分配內存空間。
二.CSS(3)
css3總的說來大概就是邊框的一些特殊樣式，比如圓角，還有就是漸變，動畫。
在CSS3中border-radius屬性被用于創建圓角（前提是有邊框屬性）：border-radius:10px;
如果你在 border-radius 屬性中只指定一個值，那么將生成 4 個 圓角。 其也可以這樣寫：border-radius:1px 2px 3px 4px [可以給四個角同時設置] 也可以border-top/bottom-left/right-radius，給某個角給值。 其值也可以這樣： border-radius: 15px/50px; border-radius: 50% ;【橢圓效果】
CSS3中的box-shadow屬性被用來添加陰影:box-shadow : 3px 3px 3px yellow;[上右下左]
有了CSS3的border-image屬性，你可以使用圖像創建一個邊框：
-webkit-border-image : url(border.png) 30 30 round;
round : 圖像平鋪（重復）來填充該區域。
Stretch 這里，圖像被拉伸以填充該區域。
background-size指定背景圖像的大小。CSS3以前，背景圖像大小由圖像的實際大小決定。
background-size:80px 60px;
background-Origin屬性指定了背景圖像的位置區域。
content-box, padding-box,和 border-box區域內可以放置背景圖像。
background-origin:border-box;
CSS3 允許你在元素,那個添加多個背景圖像。
background-image:url(img_flwr.gif),url(img_tree.gif);
CSS3 background-clip 屬性，類比background-origin[背景圖片]
作用：指定繪圖區的背景，也就是規定背景的真正作用區域。
語法：
background-clip: border-box|padding-box|content-box;
CSS3 定義了兩種類型的漸變（gradients）：
線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
徑向漸變（Radial Gradients）- 由它們的中心定義
語法：background: -webkit-linear-gradient(red, pink); 從上到下
background: -webkit-linear-gradient(left, red , blue); 從左向右
-moz代表firefox瀏覽器私有屬性
-ms代表IE瀏覽器私有屬性
-webkit代表chrome、safari（蘋果瀏覽器）私有屬性
-o代表opera（歐朋瀏覽器）的私有屬性
background: -webkit-linear-gradient(left top, red , blue); 漸變呈對角線變化，從左上角開始。
漸變的方向上也可以做更多的控制，您可以定義一個角度，而不用預定義方向：
background: -webkit-linear-gradient(180deg, red, blue);
也可以同時使用多個顏色節點：
background: -webkit-linear-gradient(red, green, blue);
CSS3 漸變也支持透明度（transparency），可用于創建減弱變淡的效果：
background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1));
我們使用 rgba() 函數來定義顏色結點。rgba() 函數中的最后一個參數可以是從 0 到 1 的值，它定義了顏色的透明度：0 表示完全透明，1 表示完全不透明。r代表紅色，g代表綠色，b代表藍色，a代表透明度。
重復的漸變：
background: -webkit-repeating-linear-gradient(...);
為了創建一個徑向漸變，您也必須至少定義兩種顏色結點。
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);
比例越大，”半徑越大”，它的默認形狀是橢圓。也可以自定義形狀;
background: -webkit-radial-gradient(circle, red, yellow, green);
CSS3的文本陰影:
text-shadow: 5px 5px 5px #FF0000;分別對應水平陰影，垂直陰影，模糊的距離，以及陰影的顏色.
CSS3文本的強制換行：
p {word-wrap:break-word;}
CSS3 @font-face 規則，自定義字體。
<style> @font-face{font-family: myFirstFont;src: url('Sansation_Light.ttf')
}div{font-family:myFirstFont;
}</style>
CSS3 2D 轉換：
您將了解2D變換方法：
translate()
rotate()
scale()
skew()
matrix()
rotate()方法，在一個給定度數順時針旋轉的元素。負值是允許的，這樣是元素逆時針旋轉。
-webkit-transform:rotate(30deg); /* Safari and Chrome */ 注意是-webkit-transform :是冒號
translate()方法，根據左(X軸)和頂部(Y軸)位置給定的參數，從當前元素位置移動:
-webkit-transform:translate(50px,100px)
scale()方法，該元素增加或減少的大小，取決于寬度（X軸）和高度（Y軸）的參數
-webkit-transform:scale(1,2); 也就是寬度和高度呈對應的倍數增加。
skew()方法，該元素會根據橫向（X軸）和垂直（Y軸）線參數給定角度：
skew(30deg,20deg)是繞X軸和Y軸周圍20度30度的元素。
matrix 方法有六個參數，包含旋轉，縮放，移動（平移）和傾斜功能。
rty 描述 CSS
transform 適用于2D或3D轉換的元素 3
transform-origin 允許您更改轉化元素位置 3
函數 描述
matrix(n,n,n,n,n,n) 定義 2D 轉換，使用六個值的矩陣。
translate(x,y) 定義 2D 轉換，沿著 X 和 Y 軸移動元素。
translateX(n) 定義 2D 轉換，沿著 X 軸移動元素。
translateY(n) 定義 2D 轉換，沿著 Y 軸移動元素。
scale(x,y) 定義 2D 縮放轉換，改變元素的寬度和高度。
scaleX(n) 定義 2D 縮放轉換，改變元素的寬度。
scaleY(n) 定義 2D 縮放轉換，改變元素的高度。
rotate(angle) 定義 2D 旋轉，在參數中規定角度。
skew(x-angle,y-angle) 定義 2D 傾斜轉換，沿著 X 和 Y 軸。
skewX(angle) 定義 2D 傾斜轉換，沿著 X 軸。
skewY(angle) 定義 2D 傾斜轉換，沿著 Y 軸。
CSS3 3D 轉換:
rotateX()
rotateY()
-webkit-transform:rotateX/Y(120deg); / Safari and Chrome /
CSS3 過渡 : transition 屬性.
CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果。
要實現這一點，必須規定兩項內容：
指定要添加效果的CSS屬性
指定效果的持續時間
-webkit-transition: -webkit-transform 3s;
-webkit-transition-delay 規定過渡效果何時開始。默認是 0。
CSS3 動畫
當在@keyframe創建動畫，把它綁定到一個選擇器，否則動畫不會有任何效果。
指定至少這兩個CSS3的動畫屬性綁定向一個選擇器：
規定動畫的名稱
規定動畫的時長
<style>
div{
width:100px;
height:100px;
background:red;
-webkit-animation:myfirst 5s; / Safari and Chrome /
}
@-webkit-keyframes myfirst / Safari and Chrome /
{
from {background:red;}
to {background:yellow;}
}
</style>
也可以這樣寫：
@-webkit-keyframes myfirst / Safari and Chrome /
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
其中不僅僅跟background屬性，可以跟一系列屬性。
屬性 描述 CSS
@keyframes 規定動畫。 3
animation 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。 3
animation-name 規定 @keyframes 動畫的名稱。 3
animation-duration 規定動畫完成一個周期所花費的秒或毫秒。默認是 0。 3
animation-timing-function 規定動畫的速度曲線。默認是 "ease"。 3
animation-delay 規定動畫何時開始。默認是 0。 3
animation-iteration-count 規定動畫被播放的次數。默認是 1。 3
animation-direction 規定動畫是否在下一周期逆向地播放。默認是 "normal"。 3
animation-play-state 規定動畫是否正在運行或暫停。默認是 "running"。 3
通過 CSS3多列，您能夠創建多個列來對文本進行布局 - 就像報紙那樣！
在本章中，您將學習如下多列屬性：
column-count
column-gap
column-rule
div{
-webkit-column-count:3; /* Safari and Chrome */ 將文章劃為3列
-webkit-column-gap:40px; /* Safari and Chrome */ 每列間的距離為40px
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */ 設置列之間
的寬度，樣式和顏色
}
三．Html5
Html5新加了一些語義元素，畫布，拖放，web存儲（localstarge，sessionstrage）等。
1.HTML5 定了 8 個新的 HTML 語義（semantic） 元素。所有這些元素都是 塊級 元素。
為了能讓舊版本的瀏覽器正確顯示這些元素，你可以設置 CSS 的 display 屬性值為 block:
2.你可以為 HTML 添加新的元素。
fuck{
Font-family：simhei;
Color:pink
}
本例中，JavaScript 語句 document.createElement("myHero") 是為了為 IE 瀏覽器添加新的元素。Internet Explorer 8 及更早 IE 版本的瀏覽器不支持以上的方式。幸運的是， Sjoerd Visscher 創建了 "HTML5 Enabling JavaScript", " shiv":以上代碼是一個注釋，作用是在 IE 瀏覽器的版本小于 IE9 時將讀取 html5.js 文件，并解析它。
3.HTML5 <canvas> 元素用于圖形的繪制，通過腳本 (通常是JavaScript)來完成.
<canvas> 標簽只是圖形容器，您必須使用腳本來繪制圖形。Ie8以及以前不支持、
<script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);</script>
getContext() 方法返回一個用于在畫布上繪圖的環境。
設置fillStyle屬性可以是CSS顏色，漸變，或圖案。fillStyle 默認設置是#000000（黑色）。
fillRect(x,y,width,height) 方法定義了矩形當前的填充方式。
canvas 是一個二維網格。canvas 的左上角坐標為 (0,0)
在Canvas上畫線，我們將使用以下兩種方法：
moveTo(x,y) 定義線條開始坐標
lineTo(x,y) 定義線條結束坐標
然后使用 stroke() 方法來繪制線條:
在canvas中繪制圓形, 我們將使用以下方法: arc(x,y,r,start,stop)
ctx.arc(95,50,20,0,2*Math.PI);
參數分別為，圓心的橫坐標，縱坐標，半徑，起始角（以弧度記），結束角（以弧度記）
使用 canvas 繪制文本，重要的屬性和方法如下：
font - 定義字體
fillText(text,x,y) - 在 canvas 上繪制實心的文本
strokeText(text,x,y) - 在 canvas 上繪制空心的文本
漸變可以填充在矩形, 圓形, 線條, 文本等等, 各種形狀可以自己定義不同的顏色。
以下有兩種不同的方式來設置Canvas漸變：
createLinearGradient(x,y,x1,y1) - 創建線條漸變
createRadialGradient(x,y,r,x1,y1,r1) - 創建一個徑向/圓漸變
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");// Create gradientvar grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");// Fill with gradientctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
將圖片畫在畫布上：
var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有損失
Canvas 與 SVG 的比較：
SVG 是一種使用 XML 描述 2D 圖形的語言。Canvas 通過 JavaScript 來繪制 2D 圖形。
Svg支持事件處理器，canvas不支持事件處理器
在 SVG 中，每個被繪制的圖形均被視為對象，而canvas能夠以 .png 或 .jpg 格式保存結果圖像
如果 SVG 對象的屬性發生變化，那么瀏覽器能夠自動重現圖形。
Html5的拖放功能、
HTML5 - 使用地理定位：請使用 getCurrentPosition() 方法來獲得用戶的位置。
Html5新的input類型：
color date datetime datetime-local email month number range search tel time url Week
HTML5 新的表單元素：
<datalist> <keygen> <output>
Select和datalist的區別：
select：5個值里面選擇1個；
datalist：你可以在文本框里填值，也可以在下面5個值里選1個。
<input list="browser" name="browser"> <datalist id="browser"> <option value="Internet Explorer"></option> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit">
<keygen> 元素的作用是提供一種驗證用戶的可靠方法。
<keygen>標簽規定用于表單的密鑰對生成器字段。
當提交表單時，會生成兩個鍵，一個是私鑰，一個公鑰。
<output> 元素用于不同類型的輸出，比如計算或腳本輸出：
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output> </form>
屬性 值 描述
for element_id 定義輸出域相關的一個或多個元素。
form form_id 定義輸入字段所屬的一個或多個表單。
name name 定義對象的唯一名稱。（表單提交時使用）
P.S：別忘了給range和number設置value屬性。
<form>新屬性：
autocomplete
novalidate
<input>新屬性：
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step
①. autocomplete 屬性規定 form 或 input 域應該擁有自動完成功能。
當用戶在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項。有on（開）,off（關）。
②．novalidate 屬性規定在提交表單時不驗證 form 或 input 域輸入元素的合法性。
③．autofocus 屬性是一個 boolean 屬性.autofocus 屬性規定在頁面加載時，域自動地獲得焦點，就是進去就可以直接輸入。
④．form 屬性規定輸入域所屬的一個或多個表單。Eg:
<form action="demo-form.php" id="form1">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
Last name: <input type="text" name="lname" form="form1">
"Last name" 字段沒有在form表單之內，但它也是form表單的一部分。
⑤The formaction 屬性用于描述表單提交的URL地址.
⑥formenctype 屬性描述了表單提交到服務器的數據編碼 (只對form表單中 method="post" 表單)
⑦formmethod 屬性定義了表單提交的方式。
⑧novalidate屬性描述了 <input> 元素在表單提交時無需被驗證。
⑨formtarget 屬性指定一個名稱或一個關鍵字來指明表單提交數據接收后的展示。
<input type="submit" formtarget="_blank" value="提交到一個新的頁面上">
10.height 和 width 屬性規定用于 image 類型的 <input> 標簽的圖像高度和寬度。
<input type="image" src="05.jpg">這種形式寫在表單里，可以實現點擊圖片提交表單。
11.list 屬性規定輸入域的 datalist。datalist 是輸入域的選項列表。結合datalist標簽使用。
12.min、max 和 step 屬性用于為包含數字或日期的 input 類型規定限定（約束）。
13. multiple 屬性是一個 boolean 屬性. multiple 屬性規定<input> 元素中可選擇多個值。例如同時選擇多個文件上傳。
14.pattern 屬性描述了一個正則表達式用于驗證 <input> 元素的值。
15.placeholder 屬性提供一種提示（hint），描述輸入域所期待的值
16.required 屬性規定必須在提交之前填寫輸入域（不能為空）。
17.step 屬性為輸入域規定合法的數字間隔。
如果 step="3"，則合法的數是 -3,0,3,6 等
語義元素：
一個語義元素能夠清楚的描述其意義給瀏覽器和開發者。
無語義 元素實例: <div> 和 <span> - 無需考慮內容.
語義元素實例: <form>, <table>, and <img> - 清楚的定義了它的內容.
HTML5中新的語義元素：
許多現有網站都包含以下HTML代碼： <div id="nav">, <div class="header">, 或者 <div id="footer">, 來指明導航鏈接, 頭部, 以及尾部.
<section> 標簽定義文檔中的節（section、區段）。比如章節、頁眉、頁腳或文檔中的其他部分。
<article> 標簽定義獨立的內容。.
<nav> 標簽定義導航鏈接的部分。
<aside> 標簽定義頁面主區域內容之外的內容（比如側邊欄）。
<header>元素描述了文檔的頭部區域
<footer> 元素描述了文檔的底部區域.
<figure>標簽規定獨立的流內容（圖像、圖表、照片、代碼等等）。
<figcaption> 標簽定義 <figure> 元素的標題.
為了讓這些塊及元素在所有版本的瀏覽器中生效，你需要在樣式表文件中設置一下屬性 (以下樣式代碼可以讓舊版本瀏覽器支持本章介紹的塊級元素):
header, section, footer, aside, nav, article, figure
{
display: block;
}
HTML5 Shiv解決ie舊版本不支持h5新元素。瀏覽器小于IE9版本時會加載html5shiv.js文件. 你必須將其放置于<head> 元素中。讓CSS 樣式應用在未知元素上只需執行 document.createElement(elementName) 即可實現。html5shiv就是根據這個原理創建的。如下：
<!--[ifltIE9]> <script type="text/javascript" src="scripts/html5shiv.js"></script> <![endif]-->
HTML5 Web 存儲
早些時候,本地存儲使用的是cookies。但是Web 存儲需要更加的安全與快速.
localStorage - 沒有時間限制的數據存儲
sessionStorage - 針對一個 session 的數據存儲
if(typeof(Storage)!=="undefined")
{ if (localStorage.clickcount)
{ localStorage.clickcount=Number(localStorage.clickcount)+1;
} else
{ localStorage.clickcount=1;
}
HTML5 應用程序緩存
1.離線瀏覽 - 用戶可在應用離線時使用它們
2.速度 - 已緩存資源加載得更快
3.減少服務器負載 - 瀏覽器將只從服務器下載更新過或更改過的資源。
<!DOCTYPE HTML><html manifest="demo.appcache">...</html>
manifest 文件需要配置正確的 MIME-type，即 "text/cache-manifest"。必須在 web 服務器上進行配置。manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。
manifest 文件可分為三個部分：
CACHE MANIFEST - 在此標題下列出的文件將在首次下載后進行緩存
NETWORK - 在此標題下列出的文件需要與服務器的連接，且不會被緩存
FALLBACK - 在此標題下列出的文件規定當頁面無法訪問時的回退頁面（比如 404 頁面）
HTML5 Web Workers
web worker 是運行在后臺的 JavaScript，不會影響頁面的性能。
當在 HTML 頁面中執行腳本時，頁面的狀態是不可響應的，直到腳本已完成。
web worker 是運行在后臺的 JavaScript，獨立于其他腳本，不會影響頁面的性能。您可以繼續做任何愿意做的事情：點擊、選取內容等等，而此時 web worker 在后臺運行。
首先，檢測瀏覽器是否支持web worker。
if(typeof(Worker)!=="undefined"){
......
}
首先創建 web worker 文件，也就是外部的js文件
var i=0;
postMessage(i);
創建 Web Worker 對象
w=new Worker("demo_workers.js");
當我們創建 web worker 對象后，它會繼續監聽消息（即使在外部腳本完成之后）直到其被終止為止。
w.terminate(); terminate【終止】
具體實例：
if(typeof(Worker)!=="undefined"){ var w=new Worker("client.js");
w.onmessage=function(ev){
alert(ev.data)
}
}
關鍵：postMessage() onmessage;
HTML5 服務器發送事件(Server-Sent Events):
Server-Sent 事件指的是網頁自動獲取來自服務器的更新。 單向消息傳遞.
客戶端代碼：
<!DOCTYPE html><html>
<meta http-equiv="content-type" content="text/html charset=utf-8"><body><h1>獲得服務器更新</h1><div id="result"></div><script>if(typeof(EventSource)!=="undefined")
{ var source=new EventSource("test.php");
source.onmessage=function(event) { document.getElementById("result").innerHTML+=event.data+ "<br />";
};
}else
{ document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events...";
}</script></body></html>
服務器代碼：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
