一、HTML和CSS
Firefox：gecko內核
Safari:webkit內核
Opera:以前是presto內核，Opera現已改用Google Chrome的Blink內核
Chrome:Blink(基於webkit，Google與Opera Software共同開發)
- 每個HTML文件裏開頭都有個很重要的東西，Doctype，知道這是幹什麼的嗎？
<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標籤之前。此標籤可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範。（重點：告訴瀏覽器按照何種規範解析頁面）
- Quirks模式是什麼？它和Standards模式有什麼區別
從IE6開始，引入了Standards模式，標準模式中，瀏覽器嘗試給符合標準的文檔在規範上的正確處理達到在指定瀏覽器中的程度。
在IE6之前CSS還不夠成熟，所以IE5等之前的瀏覽器對CSS的支持很差， IE6將對CSS提供更好的支持，然而這時的問題就來了，因爲有很多頁面是基於舊的佈局方式寫的，而如果IE6 支持CSS則將令這些頁面顯示不正常，如何在即保證不破壞現有頁面，又提供新的渲染機制呢？
在寫程序時我們也會經常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤其是新功能不兼容舊功能時。遇到這種問題時的一個常見做法是增加參數和分支，即當某個參數爲真時，我們就使用新功能，而如果這個參數 不爲真時，就使用舊功能，這樣就能不破壞原有的程序，又提供新功能。IE6也是類似這樣做的，它將DTD當成了這個“參數”，因爲以前的頁面大家都不會去寫DTD，所以IE6就假定 如果寫了DTD，就意味着這個頁面將採用對CSS支持更好的佈局，而如果沒有，則採用兼容之前的佈局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。
區別：
總體會有佈局、樣式解析和腳本執行三個方面的區別。
盒模型：在W3C標準中，如果設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。
設置行內元素的高寬：在Standards模式下，給<span>等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。
設置百分比的高度：在standards模式下，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的用margin:0 auto設置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。
（還有很多，答出什麼不重要，關鍵是看他答出的這些是不是自己經驗遇到的，還是說都是看文章看的，甚至完全不知道。）
- div+css的佈局較table佈局有什麼優點？
改版的時候更方便 只要改css文件。
頁面加載速度更快、結構化清晰、頁面顯示簡潔。
表現與結構相分離。
易於優化（seo）搜索引擎更友好，排名更容易靠前。
- img的alt與title有何異同？ strong與em的異同？
a:alt(alt text):爲不能顯示圖像、窗體或applets的用戶代理（UA），alt屬性用來指定替換文字。替換文字的語言由lang屬性指定。(在IE瀏覽器下會在沒有title時把alt當成 tool tip顯示)
title(tool tip):該屬性爲設置該屬性的元素提供建議性的信息。
strong:粗體強調標籤，強調，表示內容的重要性
em:斜體強調標籤，更強烈強調，表示內容的強調點
漸進增強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級 graceful degradation：一開始就構建完整的功能，然後再針對低版本瀏覽器進行兼容。
區別：優雅降級是從複雜的現狀開始，並試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，並不斷擴充，以適應未來環境的需要。降級（功能衰減）意味着往回看；而漸進增強則意味着朝前看，同時保證其根基處於安全地帶。
“優雅降級”觀點
“優雅降級”觀點認爲應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認爲“過時”或有功能缺失的瀏覽器下的測試工作安排在開發週期的最後階段，並把測試對象限定爲主流瀏覽器（如 IE、Mozilla 等）的前一個版本。
在這種設計範例下，舊版的瀏覽器被認爲僅能提供“簡陋卻無妨 (poor, but passable)” 的瀏覽體驗。你可以做一些小的調整來適應某個特定的瀏覽器。但由於它們並非我們所關注的焦點，因此除了修復較大的錯誤之外，其它的差異將被直接忽略。
“漸進增強”觀點
“漸進增強”觀點則認爲應關注於內容本身。
內容是我們建立網站的誘因。有的網站展示它，有的則收集它，有的尋求，有的操作，還有的網站甚至會包含以上的種種，但相同點是它們全都涉及到內容。這使得“漸進增強”成爲一種更爲合理的設計範例。這也是它立即被 Yahoo! 所採納並用以構建其“分級式瀏覽器支持 (Graded Browser Support)”策略的原因所在。
那麼問題來了。現在產品經理看到IE6,7,8網頁效果相對高版本現代瀏覽器少了很多圓角，陰影（CSS3），要求兼容（使用圖片背景，放棄CSS3），你會如何說服他？
- 請描述一下cookies，sessionStorage和localStorage的區別？
sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問並且當會話結束後數據也隨之銷燬。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。而localStorage用於持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。
web storage和cookie的區別
Web Storage的概念和cookie相似，區別是它是爲了更大容量存儲設計的。Cookie的大小是受限的(cookie存儲4K,sessionStorage,localStorage 大概儲存5M)，並且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨域調用。
除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發者自己封裝setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是與服務器進行交互，作爲HTTP規範的一部分而存在 ，而Web Storage僅僅是爲了在本地“存儲”數據而生。
- 簡述一下src與href的區別。
src用於替換當前元素，href用於在當前文檔和引用資源之間確立聯繫。
src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。
<script src =”js.js”></script>
當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，類似於將所指向資源嵌入當前標籤內。這也是爲什麼將js腳本放在底部而不是頭部。
Href外部資源的引用,不是加載,不是嵌入,
png-8，png-24，jpeg，gif，svg。
但是上面的那些都不是面試官想要的最後答案。面試官希望聽到是Webp。（是否有關注新技術，新鮮事物）
科普一下Webp：WebP格式，谷歌（google）開發的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，並能節省大量的服務器帶寬資源和數據空間。Facebook Ebay等知名網站已經開始測試並使用WebP格式。
在質量相同的情況下，WebP格式圖像的體積要比JPEG格式圖像小40%。
- 在css/js代碼上線之後開發人員經常會優化性能，從用戶刷新網頁開始，一次js請求一般情況下有哪些地方會有緩存處理？
答案：dns緩存，cdn緩存，瀏覽器緩存，服務器緩存。
圖片懶加載，在頁面上的未可視區域可以添加一個滾動條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，如果前者小於後者，優先加載。
如果爲幻燈片、相冊等，可以使用圖片預加載技術，將當前展示圖片的前一張和後一張優先下載。
如果圖片爲css圖片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技術。
如果圖片過大，可以使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提高用戶體驗。
如果圖片展示區域小於圖片的真實大小，則因在服務器端根據業務需要先行進行圖片壓縮，圖片壓縮後大小與展示一致。
- 你如何理解HTML結構的語義化？
去掉或樣式丟失的時候能讓頁面呈現清晰的結構：
html本身是沒有表現的，我們看到例如<h1>是粗體，字體大小2em，加粗；<strong>是加粗的，不要認爲這是html的表現，這些其實html默認的css樣式在起作用，所以去掉或樣式丟失的時候能讓頁面呈現清晰的結構不是語義化的HTML結構的優點，但是瀏覽器都有有默認樣式，默認樣式的目的也是爲了更好的表達html的語義，可以說瀏覽器的默認樣式和語義化的HTML結構是不可分割的。
屏幕閱讀器（如果訪客有視障）會完全根據你的標記來“讀”你的網頁.
例如,如果你使用的含語義的標記,屏幕閱讀器就會“逐個拼出”你的單詞,而不是試着去對它完整發音.
PDA、手機等設備可能無法像普通電腦的瀏覽器一樣來渲染網頁（通常是因爲這些設備對CSS的支持較弱）
使用語義標記可以確保這些設備以一種有意義的方式來渲染網頁.理想情況下,觀看設備的任務是符合設備本身的條件來渲染網頁.
語義標記爲設備提供了所需的相關信息,就省去了你自己去考慮所有可能的顯示情況（包括現有的或者將來新的設備）.例如,一部手機可以選擇使一段標記了標題的文字以粗體顯示.而掌上電腦可能會以比較大的字體來顯示.無論哪種方式一旦你對文本標記爲標題,您就可以確信讀取設備將根據其自身的條件來合適地顯示頁面.
搜索引擎的爬蟲也依賴於標記來確定上下文和各個關鍵字的權重
過去你可能還沒有考慮搜索引擎的爬蟲也是網站的“訪客”,但現在它們他們實際上是極其寶貴的用戶.沒有他們的話,搜索引擎將無法索引你的網站,然後一般用戶將很難過來訪問.
你的頁面是否對爬蟲容易理解非常重要,因爲爬蟲很大程度上會忽略用於表現的標記,而只注重語義標記.
因此,如果頁面文件的標題被標記,而不是,那麼這個頁面在搜索結果的位置可能會比較靠後.除了提升易用性外,語義標記有利於正確使用CSS和JavaScript,因爲其本身提供了許多“鉤鉤”來應用頁面的樣式與行爲.
SEO主要還是靠你網站的內容和外部鏈接的。
便於團隊開發和維護
W3C給我們定了一個很好的標準，在團隊中大家都遵循這個標準，可以減少很多差異化的東西，方便開發和維護，提高開發效率，甚至實現模塊化開發。
- 談談以前端角度出發做好SEO需要考慮什麼？
瞭解搜索引擎如何抓取網頁和如何索引網頁
你需要知道一些搜索引擎的基本工作原理，各個搜索引擎之間的區別，搜索機器人（SE robot 或叫 web crawler）如何進行工作，搜索引擎如何對搜索結果進行排序等等。
Meta標籤優化
主要包括主題（Title)，網站描述(Description)，和關鍵詞（Keywords）。還有一些其它的隱藏文字比如Author（作者），Category（目錄），Language（編碼語種）等。
如何選取關鍵詞並在網頁中放置關鍵詞
搜索就得用關鍵詞。關鍵詞分析和選擇是SEO最重要的工作之一。首先要給網站確定主關鍵詞（一般在5個上下），然後針對這些關鍵詞進行優化，包括關鍵詞密度（Density），相關度（Relavancy），突出性（Prominency）等等。
瞭解主要的搜索引擎
雖然搜索引擎有很多，但是對網站流量起決定作用的就那麼幾個。比如英文的主要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。不同的搜索引擎對頁面的抓取和索引、排序的規則都不一樣。還要了解各搜索門戶和搜索引擎之間的關係，比如AOL網頁搜索用的是Google的搜索技術，MSN用的是Bing的技術。
主要的互聯網目錄
Open Directory自身不是搜索引擎，而是一個大型的網站目錄，他和搜索引擎的主要區別是網站內容的收集方式不同。目錄是人工編輯的，主要收錄網站主頁；搜索引擎是自動收集的，除了主頁外還抓取大量的內容頁面。
按點擊付費的搜索引擎
搜索引擎也需要生存，隨着互聯網商務的越來越成熟，收費的搜索引擎也開始大行其道。最典型的有Overture和百度，當然也包括Google的廣告項目Google Adwords。越來越多的人通過搜索引擎的點擊廣告來定位商業網站，這裏面也大有優化和排名的學問，你得學會用最少的廣告投入獲得最多的點擊。
搜索引擎登錄
網站做完了以後，別躺在那裏等着客人從天而降。要讓別人找到你，最簡單的辦法就是將網站提交（submit）到搜索引擎。如果你的是商業網站，主要的搜索引擎和目錄都會要求你付費來獲得收錄（比如Yahoo要299美元），但是好消息是（至少到目前爲止）最大的搜索引擎Google目前還是免費，而且它主宰着60％以上的搜索市場。
鏈接交換和鏈接廣泛度（Link Popularity）
網頁內容都是以超文本（Hypertext）的方式來互相鏈接的，網站之間也是如此。除了搜索引擎以外，人們也每天通過不同網站之間的鏈接來Surfing（“衝浪”）。其它網站到你的網站的鏈接越多，你也就會獲得更多的訪問量。更重要的是，你的網站的外部鏈接數越多，會被搜索引擎認爲它的重要性越大，從而給你更高的排名。
合理的標籤使用
- 有哪項方式可以對一個DOM設置它的CSS樣式？
外部樣式表，引入一個外部css文件
內部樣式表，將css代碼放在 <head> 標籤內部
內聯樣式，將css樣式直接定義在 HTML 元素內部
- CSS都有哪些選擇器？
派生選擇器（用HTML標籤申明）
id選擇器（用DOM的ID申明）
類選擇器（用一個樣式類名申明）
屬性選擇器（用DOM的屬性申明，屬於CSS2，IE6不支持，不常用，不知道就算了）
除了前3種基本選擇器，還有一些擴展選擇器，包括
後代選擇器（利用空格間隔，比如div .a{ }）
羣組選擇器（利用逗號間隔，比如p,div,#a{ }）
那麼問題來了，CSS選擇器的優先級是怎麼樣定義的？
基本原則：
一般而言，選擇器越特殊，它的優先級越高。也就是選擇器指向的越準確，它的優先級就越高。
複雜的計算方法：
用1表示派生選擇器的優先級
用10表示類選擇器的優先級
用100標示ID選擇器的優先級
!important
div.test1 .span var 優先級 1+10 +10 +1
span#xxx .songs li 優先級1+100 + 10 + 1
#xxx li 優先級 100 +1
那麼問題來了，看下列代碼，<p>標籤內的文字是什麼顏色的？
<style>
.classA{ color:blue;}
.classB{ color:red;}
</style>
<body>
<p class='classB classA'> 123 </p>
</body>
答案：red。與樣式定義在文件中的先後順序有關，即是後面的覆蓋前面的，與在<p class=’classB classA’>中的先後關係無關。
- CSS中可以通過哪些屬性定義，使得一個DOM元素不顯示在瀏覽器可視範圍內？
最基本的：
設置display屬性爲none(隱藏不佔位置)，或者設置visibility屬性爲hidden(隱藏佔原位置)
技巧性：
設置寬高爲0，設置透明度爲0，設置z-index位置在-1000em
- 超鏈接訪問過後hover樣式就不出現的問題是什麼？如何解決？
答案：被點擊訪問過的超鏈接樣式不在具有hover和active了,解決方法是改變CSS屬性的排列順序: L-V-H-A（link,visited,hover,active）
- 什麼是Css Hack？ie6,7,8的hack分別是什麼？
答案：針對不同的瀏覽器寫不同的CSS code的過程，就是CSS hack。
示例如下：
#test{
width:300px;
height:300px;
background-color:blue; /*firefox*/
background-color:red\9; /*all ie*/
background-color:yellow; /*ie8*/
+background-color:pink; /*ie7*/
_background-color:orange; /*ie6*/ }
:root #test { background-color:purple\9; } /*ie9*/
@media all and (min-width:0px)
{ #test {background-color:black;} } /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0)
{ #test {background-color:gray;} } /*chrome and safari*/
- 行內元素和塊級元素的具體區別是什麼？行內元素的padding和margin可設置嗎？
塊級元素(block)特性：
總是獨佔一行，表現爲另起一行開始，而且其後的元素也必須另起一行顯示;
寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制;
內聯元素(inline)特性：
和相鄰的內聯元素在同一行;
寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變（也就是padding和margin的left和right是可以設置的），就是裏面文字或圖片的大小。
那麼問題來了，瀏覽器還有默認的天生inline-block元素（擁有內在尺寸，可設置高寬，但不會自動換行），有哪些？
答案：<input> 、<img> 、<button> 、<texterea> 、<label>。
外邊距重疊就是margin-collapse。
在CSS當中，相鄰的兩個盒子（可能是兄弟關係也可能是祖先關係）的外邊距可以結合成一個單獨的外邊距。這種合併外邊距的方式被稱爲摺疊，並且因而所結合成的外邊距稱爲摺疊外邊距。
摺疊結果遵循下列計算規則：
兩個相鄰的外邊距都是正數時，摺疊結果是它們兩者之間較大的值。
兩個相鄰的外邊距都是負數時，摺疊結果是兩者絕對值的較大值。
兩個外邊距一正一負時，摺疊結果是兩者的相加的和。
- css中可以讓文字在垂直和水平方向上重疊的兩個屬性是什麼？
垂直方向：line-height
水平方向：letter-spacing
那麼問題來了，關於letter-spacing的妙用知道有哪些麼？
答案:可以用於消除inline-block元素間的換行符空格間隙問題。
- 如何垂直居中一個浮動元素？（答案不唯一）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
// 方法一：已知元素的高寬 #div1{ background-color:#6699FF; width:200px; height:200px; position: absolute; //父元素需要相對定位 top: 50%; left: 50%; margin-top:-100px ; //二分之一的height，width margin-left: -100px; }
//方法二:未知元素的高寬
#div1{ width: 200px; height: 200px; background-color: #6699FF;
margin:auto; position: absolute; //父元素需要相對定位 left: 0; top: 0; right: 0; bottom: 0; } //方法三 width:200px; height:200px; position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%)
|
那麼問題來了，如何垂直居中一個<img>?（用更簡便的方法。）
|
1 2 3 4 5 6 |
#container //<img>的容器設置如下 { display:table-cell; text-align:center; vertical-align:middle; } BFC塊級格式化上下文 觸發BFC的屬性:display , table-cell , overfloat , hidden , display:block 凡是可以觸發BFC的屬性都可以達到清浮動的效果 清浮動: .clearfix:before,.clearfix:after{content:‘’; display:table; } .clearfix{clear:both;} |
- px和em的區別。
px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，並且em會繼承父級元素的字體大小。
瀏覽器的默認字體高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em。
和em和rem的區別；vw的妙用
- 描述一個”reset”的CSS文件並如何使用它。知道normalize.css嗎？你瞭解他們的不同之處？
重置樣式非常多，凡是一個前端開發人員肯定有一個常用的重置CSS文件並知道如何使用它們。他們是盲目的在做還是知道爲什麼這麼做呢？原因是不同的瀏覽器對一些元素有不同的默認樣式，如果你不處理，在不同的瀏覽器下會存在必要的風險，或者更有戲劇性的性發生。
你可能會用Normalize來代替你的重置樣式文件。它沒有重置所有的樣式風格，但僅提供了一套合理的默認樣式值。既能讓衆多瀏覽器達到一致和合理，但又不擾亂其他的東西（如粗體的標題）。
在這一方面，無法做每一個復位重置。它也確實有些超過一個重置，它處理了你永遠都不用考慮的怪癖，像HTML的audio元素不一致或line-height不一致。
- 描述一個”reset”的CSS文件並如何使用它。知道normalize.css嗎？你瞭解他們的不同之處？
重置樣式非常多，凡是一個前端開發人員肯定有一個常用的重置CSS文件並知道如何使用它們。他們是盲目的在做還是知道爲什麼這麼做呢？原因是不同的瀏覽器對一些元素有不同的默認樣式，如果你不處理，在不同的瀏覽器下會存在必要的風險，或者更有戲劇性的性發生。
你可能會用Normalize來代替你的重置樣式文件。它沒有重置所有的樣式風格，但僅提供了一套合理的默認樣式值。既能讓衆多瀏覽器達到一致和合理，但又不擾亂其他的東西（如粗體的標題）。
在這一方面，無法做每一個復位重置。它也確實有些超過一個重置，它處理了你永遠都不用考慮的怪癖，像HTML的audio元素不一致或line-height不一致。
- Sass、LESS是什麼？大家爲什麼要使用他們？
他們是CSS預處理器。他是CSS上的一種抽象層。他們是一種特殊的語法/語言編譯成CSS。
例如Less是一種動態樣式語言. 將CSS賦予了動態語言的特性，如變量，繼承，運算， 函數. LESS 既可以在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可一在服務端運行 (藉助 Node.js)。
爲什麼要使用它們？
結構清晰，便於擴展。
可以方便地屏蔽瀏覽器私有語法差異。這個不用多說，封裝對瀏覽器語法差異的重複處理，減少無意義的機械勞動。
可以輕鬆實現多重繼承。
完全兼容 CSS 代碼，可以方便地應用到老項目中。LESS 只是在 CSS 語法上做了擴展，所以老的 CSS 代碼也可以與 LESS 代碼一同編譯。
- display:none與visibility:hidden的區別是什麼？
display : 隱藏對應的元素但不擠佔該元素原來的空間。
visibility: 隱藏對應的元素並且擠佔該元素原來的空間。
即是，使用CSS display:none屬性後，HTML元素（對象）的寬度、高度等各種屬性值都將“丟失”;而使用visibility:hidden屬性後，HTML元素（對象）僅僅是在視覺上看不見（完全透明），而它所佔據的空間位置仍然存在。
- CSS中link和@import的區別是：
Link屬於html標籤，而@import是CSS中提供的
在頁面加載的時候，link會同時被加載，而@import引用的CSS會在頁面加載完成後纔會加載引用的CSS
@import只有在ie5以上纔可以被識別，而link是html標籤，不存在瀏覽器兼容性問題
Link引入樣式的權重大於@import的引用（@import是將引用的樣式導入到當前的頁面中）
CSS的盒子模型有兩種：IE盒子模型、標準的W3C盒子模型模型
盒模型：內容、內邊距、外邊距（一般不計入盒子實際寬度）、邊框
由於瀏覽器兼容的問題，不同的瀏覽器對標籤的默認樣式值不同，若不初始化會造成不同瀏覽器之間的顯示差異
但是初始化CSS會對搜索引擎優化造成小影響
- HTML與XHTML——二者有什麼區別？
1. 所有的標記都必須要有一個相應的結束標記
2. 所有標籤的元素和屬性的名字都必須使用小寫
3. 所有的 XML 標記都必須合理嵌套
4. 所有的屬性必須用引號 "" 括起來
5. 把所有 < 和 & 特殊符號用編碼表示
- html常見兼容性問題？
1.雙邊距BUG float引起的 使用display
2.3像素問題 使用float引起的 使用dislpay:inline -3px
3.超鏈接hover 點擊後失效 使用正確的書寫順序 link visited hover active
4.Ie z-index問題 給父級添加position:relative
5.Png 透明 使用js代碼 改
6.Min-height 最小高度 ！Important 解決’
7.select 在ie6下遮蓋 使用iframe嵌套
8.爲什麼沒有辦法定義1px左右的寬度容器（IE6默認的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
9.IE5-8不支持opacity，解決辦法：
.opacity {
opacity: 0.4
filter: alpha(opacity=60); /* for IE5-7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
}
10. IE6不支持PNG透明背景，解決辦法: IE6下使用gif圖片
- 列出display的值，說明他們的作用。position的值， relative和absolute定位原點是？
1. block 象塊類型元素一樣顯示。
none 缺省值。向行內元素類型一樣顯示。
inline-block 象行內元素一樣顯示，但其內容象塊類型元素一樣顯示。
list-item 象塊類型元素一樣顯示，並添加樣式列表標記。
2. position的值
*absolute
生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。
*fixed （老IE不支持）
生成絕對定位的元素，相對於瀏覽器窗口進行定位。
* relative
生成相對定位的元素，相對於其正常位置進行定位。
* static 默認值。沒有定位，元素出現在正常的流中
*（忽略 top, bottom, left, right z-index 聲明）。
* inherit 規定從父元素繼承 position 屬性的值。
- css的基本語句構成是?
選擇器{屬性1:值1;屬性2:值2;……}
- 哪些css屬性可以繼承？
可繼承： font-size font-family color,font-weight, ul li dl dd dt;
不可繼承 ：border padding margin width height background;
二、JS基礎
- javascript的typeof返回哪些數據類型
- JS基本數據類型 String Boolean Number Undefined NaN()
- 引用數據類型 Function Array Object
alert(typeof [1, 2]); //object
alert(typeof 'leipeng'); //string
var i = true;
alert(typeof i); //boolean
alert(typeof 1); //number
var a;
alert(typeof a); //undefined
function a(){;};
alert(typeof a) //function
- 例舉3種強制類型轉換和2種隱式類型轉換?
強制（parseInt(),parseFloat(),Number()）
隱式（== ,-）
- split() 、join() 的區別
前者是切割成數組的形式，後者是將數組轉換成字符串
- 數組方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部刪除
Unshift()頭部添加 shift()頭部刪除
普通添加事件的方法：
var btn = document.getElementById("hello");
btn.onclick = function(){
alert(1);
}
btn.onclick = function(){
alert(2);
}
執行上面的代碼只會alert 2
事件綁定方式添加事件：
var btn = document.getElementById("hello");
btn.addEventListener("click",function(){
alert(1);
},false);
btn.addEventListener("click",function(){
alert(2);
},false);
執行上面的代碼會先alert 1 再 alert 2
普通添加事件的方法不支持添加多個事件，最下面的事件會覆蓋上面的，而事件綁定（addEventListener）方式添加事件可以添加多個。
addEventListener不兼容低版本IE
普通事件無法取消
addEventLisntener還支持事件冒泡+事件捕獲
- IE和DOM事件流的區別
1.執行順序不一樣、
2.參數不一樣
3.事件加不加on
4.this指向問題
- IE和標準下有哪些兼容性的寫法
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
封裝ajax:XMLHttpRequest()ActiveXObject(‘’Microsoft‘’)
獲取非行間樣式: ie:
var div=document.getElementById(‘mydiv’);
function a(obj,value){if(obj.currentStyle){
obj.currentStyle[value]
}else{
return obj.currentStyle[obj, ‘’]
}
}
- call和apply的區別
call方法:
語法：call(thisObj，Object1,Object2...)
定義：調用一個對象的一個方法，以另一個對象替換當前對象。
說明：
call 方法可以用來代替另一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變爲由 thisObj 指定的新對象。
如果沒有提供 thisObj 參數，那麼 Global 對象被用作 thisObj。
apply方法：
語法：apply(thisObj，[argArray])
定義：應用某一對象的一個方法，用另一個對象替換當前對象。
說明：
如果 argArray 不是一個有效的數組或者不是 arguments 對象，那麼將導致一個 TypeError。
如果沒有提供 argArray 和 thisObj 任何一個參數，那麼 Global 對象將被用作 thisObj， 並且無法被傳遞任何參數。
- b繼承a的方法
function A( age, name ){
this.age = age;
this.name = name;
}
A.prototype.show = function(){
alert('父級方法');
}
function B(age,name,job){
A.apply( this, arguments );
this.job = job;
}
B.prototype = new A();
var b = new A(14,'俠客行');
var a = new B(15,'狼俠','俠客');
canceBubble()只支持IE,return false,stopPropagation()
setCapture();鎖
releaseCapture();解鎖
- 添加 刪除 替換 插入到某個接點的方法
obj.appendChid()
obj.insertBefore()
obj.replaceChild()
obj.removeChild()
- javascript的本地對象，內置對象和宿主對象
本地對象爲array obj regexp等可以new實例化
內置對象爲gload Math 等不可以實例化的
宿主爲瀏覽器自帶的document,window 等
- window.onload 和document ready的區別
window.onload 是在dom文檔樹加載完和所有文件加載完之後執行一個函數Document.ready原生種沒有這個方法，jquery中有 $().ready(function),在dom文檔樹加載完之後執行一個函數（注意，這裏面的文檔樹加載完不代表全部文件加載完）。
$(document).ready要比window.onload先執行
window.onload只能出來一次，$(document).ready可以出現多次
- ”==”和“===”的不同
前者會自動轉換類型
後者不會
- javascript的同源策略
一段腳本只能讀取來自於同一來源的窗口和文檔的屬性，這裏的同一來源指的是主機名、議和端口號的組合
- JavaScript是一門什麼樣的語言，它有哪些特點？
沒有標準答案。
javaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱爲JavaScript引擎，爲瀏覽器的一部分，廣泛用於客戶端的腳本語言，最早是在HTML網頁上使用，用來給HTML網頁增加動態功能。JavaScript兼容於ECMA標準，因此也稱爲ECMAScript。
基本特點
- 是一種解釋性腳本語言（代碼不進行預編譯）。
- 主要用來向HTML（標準通用標記語言下的一個應用）頁面添加交互行爲。
- 可以直接嵌入HTML頁面，但寫成單獨的js文件有利於結構和行爲的分離。
- 跨平臺特性，在絕大多數瀏覽器的支持下，可以在多種平臺下運行（如Windows、Linux、Mac、Android、iOS等）。
- JavaScript的數據類型都有什麼？
基本數據類型：String,boolean,Number,Undefined, Null
引用數據類型：Object(Array,Date,RegExp,Function)
那麼問題來了，如何判斷某變量是否爲數組數據類型？
方法一.判斷其是否具有“數組性質”，如slice()方法。可自己給該變量定義slice方法，故有時會失效
方法二.obj instanceof Array 在某些IE版本中不正確
/.方法一二皆有漏洞，在ECMA Script5中定義了新方法Array.isArray(), 保證其兼容性，最好的方法如下：
|
|
if(typeof Array.isArray==="undefined") { Array.isArray = function(arg){ return Object.prototype.toString.call(arg)==="[object Array]" }; } |
- 希望獲取到頁面中所有的checkbox怎麼做？(不使用第三方框架)
|
|
var domList = document.getElementsByTagName(‘input’) var checkBoxList = []; var len = domList.length; //緩存到局部變量 while (len--) { //使用while的效率會比for循環更高 if (domList[len].type == ‘checkbox’) { checkBoxList.push(domList[len]); } } |
|
|
var a; alert(typeof a); // undefined alert(b); // 報錯 |
解釋：Undefined是一個只有一個值的數據類型，這個值就是“undefined”，在使用var聲明變量但並未對其賦值進行初始化時，這個變量的值就是undefined。而b由於未聲明將報錯。注意未申明的變量和聲明瞭未賦值的是不一樣的。
- 看下列代碼,輸出什麼？解釋原因。
|
|
var a = null; alert(typeof a); //object |
解釋：null是一個只有一個值的數據類型，這個值就是null。表示一個空指針對象，所以用typeof檢測會返回”object”。
- 看下列代碼,輸出什麼？解釋原因。
|
|
var undefined; undefined == null; // true 1 == true; // true 2 == true; // false 0 == false; // true 0 == ''; // true NaN == NaN; // false [] == false; // true 非空字符串,非0數字,非空對象轉化爲true; [] == ![]; // true 0:false; 1:true; |
- undefined與null相等，但不恆等（===）
一個是number一個是string時，會嘗試將string轉換爲number
嘗試將boolean轉換爲number，0或1
嘗試將Object轉換成number或string，取決於另外一個對比量的類型
所以，對於0、空字符串的判斷，建議使用 “===” 。“===”會先判斷兩邊的值類型，類型不匹配時爲false。
那麼問題來了，看下面的代碼，輸出什麼，foo的值爲什麼？
|
|
var foo = "11"+2-"1"; console.log(foo); console.log(typeof foo); |
執行完後foo的值爲111，foo的類型爲String。
|
|
var a = new Object(); a.value = 1; b = a; b.value = 2; alert(a.value); |
答案：2（考察引用數據類型細節）
堆內存:引用數據類型
棧內存:基本數據類型;引用數據類型的地址
- 已知有字符串foo=”get-element-by-id”,寫一個function將其轉化成駝峯表示法”getElementById”。
|
|
function combo(msg){ var arr=msg.split("-"); for(var i=1;i<arr.length;i++){ arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1); } msg=arr.join(""); return msg; }
|
- 看下列代碼，將會輸出什麼?(變量聲明提升)
解析階段:所有的變量.函數聲明提前(提前到作用域的最頂層)
執行階段:執行代碼
|
|
var foo = 1; (function(){ console.log(foo); var foo = 2; console.log(foo); })() |
答案：輸出undefined 和 2。上面代碼相當於：
|
|
var foo = 1; (function(){ var foo; console.log(foo); //undefined foo = 2; console.log(foo); // 2; })() |
函數聲明與變量聲明會被JavaScript引擎隱式地提升到當前作用域的頂部，但是隻提升名稱不會提升賦值部分。
- 用js實現隨機選取10–100之間的10個數字，存入一個數組，並排序。
|
|
function randomNub(aArray, len, min, max) { if (len >= (max - min)) { return '超過' + min + '-' + max + '之間的個數範圍' + (max - min - 1) + '個的總數'; } if (aArray.length >= len) { aArray.sort(function(a, b) { return a - b }); return aArray; } var nowNub = parseInt(Math.random() * (max - min - 1)) + (min + 1); for (var j = 0; j < aArray.length; j++) { if (nowNub == aArray[j]) { randomNub(aArray, len, min, max); return; } } aArray.push(nowNub); randomNub(aArray, len, min, max); return aArray; } var arr=[]; randomNub(arr,10,10,100); |
- 有這樣一個URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，請寫一段JS程序提取URL中的各個GET參數(參數名和參數個數不確定)，將其按key-value形式返回到一個json結構中，如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}。
答案：
|
|
function serilizeUrl(url) { var urlObject = {}; if (/\?/.test(url)) { var urlString = url.substring(url.indexOf("?") + 1); var urlArray = urlString.split("&"); for (var i = 0, len = urlArray.length; i < len; i++) { var urlItem = urlArray[i]; var item = urlItem.split("="); urlObject[item[0]] = item[1]; } return urlObject; } return null; } |
- 正則表達式構造函數var reg=new RegExp(“xxx”)與正則表達字面量var reg=//有什麼不同？匹配郵箱的正則表達式？
答案：當使用RegExp()構造函數的時候，不僅需要轉義引號（即\”表示”），並且還需要雙反斜槓（即\\表示一個\）。使用正則表達字面量的效率更高。
郵箱的正則匹配：
|
|
var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/; |
|
|
for(var i=1;i<=3;i++){ setTimeout(function(){ console.log(i); },0); }; |
答案：4 4 4。
原因：Javascript事件處理器在線程空閒之前不會運行。追問，如何讓上述代碼輸出1 2 3？
|
|
for(var i=1;i<=3;i++){ setTimeout((function(a){ //改成立即執行函數 console.log(a); })(i),0); };
1 //輸出 2 3 |
for(i=0, j=0; i<10, j<6; i++, j++){
k = i + j;
}
結果：10
- 請你談談Cookie的弊端？
缺點：
1.Cookie數量和長度的限制。每個domain最多隻能有20條cookie，每個cookie長度不能超過4KB，否則會被截掉。
2.安全性問題。如果cookie被人攔截了，那人就可以取得所有的session信息。即使加密也與事無補，因爲攔截者並不需要知道cookie的意義，他只要原樣轉發cookie就可以達到目的了。
3.有些狀態不可能保存在客戶端。例如，爲了防止重複提交表單，我們需要在服務器端保存一個計數器。如果我們把這個計數器保存在客戶端，那麼它起不到任何作用。
內存泄漏指任何對象在您不再擁有或需要它之後仍然存在。
垃圾回收器定期掃描對象，並計算引用了每個對象的其他對象的數量。如果一個對象的引用數量爲 0（沒有其他對象引用過該對象），或對該對象的惟一引用是循環的，那麼該對象的內存即可回收。
1. setTimeout 的第一個參數使用字符串而非函數的話，會引發內存泄漏。
2. 閉包
3. 控制檯日誌
4. 循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）
利用事件冒泡的原理，讓自己的所觸發的事件，讓他的父元素代替執行！
答：我的理解是，閉包就是能夠讀取其他函數內部變量的函數。在本質上，閉包就是將函數內部和函數外部連接起來的一座橋樑。
|
|
function outer(){ var num = 1; function inner(){ var n = 2; alert(n + num); } return inner; } outer()(); |
|
|
function f1(){ var tmp = 1; this.x = 3; console.log(tmp); //A console.log(this.x)； //B } var obj = new f1(); //1 console.log(obj.x) //2 console.log(f1()); //3 |
分析：
這道題讓我重新認識了對象和函數，首先看代碼（1），這裏實例話化了 f1這個類。相當於執行了 f1函數。所以這個時候 A 會輸出 1， 而 B 這個時候的 this 代表的是 實例化的當前對象 obj B 輸出 3.。 代碼（2）毋庸置疑會輸出 3， 重點 代碼（3）首先這裏將不再是一個類，它只是一個函數。那麼 A輸出 1， B呢？這裏的this 代表的其實就是window對象，那麼this.x 就是一個全局變量 相當於在外部 的一個全局變量。所以 B 輸出 3。最後代碼由於f沒有返回值那麼一個函數如果沒返回值的話，將會返回 underfined ，所以答案就是 ： 1， 3， 3， 1， 3， underfined 。
|
|
var o1 = new Object(); var o2 = o1; o2.name = "CSSer"; console.log(o1.name); |
如果不看答案，你回答真確了的話，那麼說明你對javascript的數據類型瞭解的還是比較清楚了。js中有兩種數據類型，分別是：基本數據類型和引用數據類型（object Array）。對於保存基本類型值的變量，變量是按值訪問的，因爲我們操作的是變量實際保存的值。對於保存引用類型值的變量，變量是按引用訪問的，我們操作的是變量值所引用（指向）的對象。答案就清楚了： //CSSer;
|
|
function changeObjectProperty (o) { o.siteUrl = "http://www.csser.com/"; o = new Object(); o.siteUrl = "http://www.popcg.com/"; } var CSSer = new Object(); changeObjectProperty(CSSer); console.log(CSSer.siteUrl); // |
如果CSSer參數是按引用傳遞的，那麼結果應該是"http://www.popcg.com/"，但實際結果卻仍是"http://www.csser.com/"。事實是這樣的：在函數內部修改了引用類型值的參數，該參數值的原始引用保持不變。我們可以把參數想象成局部變量，當參數被重寫時，這個變量引用的就是一個局部變量，局部變量的生存期僅限於函數執行的過程中，函數執行完畢，局部變量即被銷燬以釋放內存。
（補充：內部環境可以通過作用域鏈訪問所有的外部環境中的變量對象，但外部環境無法訪問內部環境。每個環境都可以向上搜索作用域鏈，以查詢變量和函數名，反之向下則不能。）
- a輸出多少？
|
|
var a = 6; setTimeout(function () { var a = 666; alert(a); // 輸出666， }, 1000); |
因爲var a = 666;定義了局部變量a，並且賦值爲666，根據變量作用域鏈，
全局變量處在作用域末端，優先訪問了局部變量，從而覆蓋了全局變量 。
|
|
var a = 6; setTimeout(function () { alert(a); // 輸出undefined var a = 666; }, 1000); |
因爲var a = 666;定義了局部變量a，同樣覆蓋了全局變量，但是在alert(a);之前
a並未賦值，所以輸出undefined。
|
|
var a = 6; setTimeout(function(){ alert(a); var a = 66; }, 1000); a = 666; alert(a); // 666, undefined; |
記住： 異步處理，一切OK 聲明提前
|
|
function setN(obj){ obj.name='屌絲'; obj = new Object(); obj.name = '腐女'; }; var per = new Object(); setN(per); alert(per.name); //屌絲 內部 |
- JS的繼承性
|
|
window.color = 'red'; var o = {color: 'blue'}; function sayColor(){ alert(this.color); } sayColor(); //red sayColor.call(this); //red this-window對象 sayColor.call(window); //red sayColor.call(o); //blue |
- 精度問題: JS 精度不能精確到 0.1 所以 。。。。同時存在於值和差值中
|
|
var n = 0.3,m = 0.2, i = 0.2, j = 0.1; alert((n - m) == (i - j)); //false alert((n-m) == 0.1); //false alert((i-j)==0.1); //true |
|
|
function foo(){ foo.a = function(){alert(1)}; this.a = function(){alert(2)}; a = function(){alert(3)}; var a = function(){alert(4)}; }; foo.prototype.a = function(){alert(5)}; foo.a = function(){alert(6)}; foo.a(); //6 var obj = new foo(); obj.a(); //2 foo.a(); //1 |
|
|
var a = 5; function test(){ a = 0; alert(a); alert(this.a); //沒有定義 a這個屬性 var a; alert(a) } test(); // 0, 5, 0 new test(); // 0, undefined, 0 //由於類它自身沒有屬性a， 所以是undefined |
- JS中的簡單繼承 call方法！
|
|
//頂一個父母類，注意：類名都是首字母大寫的哦！ function Parent(name, money){ this.name = name; this.money = money; this.info = function(){ alert('姓名： '+this.name+' 錢： '+ this.money); } } //定義孩子類 function Children(name){ Parent.call(this, name); //繼承 姓名屬性，不要錢。 this.info = function(){ alert('姓名： '+this.name); } } //實例化類 var per = new Parent('parent', 800000000000); var chi = new Children('child'); per.info(); chi.info(); |
bind： 綁定事件，對新添加的事件不起作用，方法用於將一個處理程序附加到每個匹配元素的事件上並返回jQuery對象。
live： 方法將一個事件處理程序附加到與當前選擇器匹配的所有元素（包含現有的或將來添加的）的指定事件上並返回jQuery對象。
delegate： 方法基於一組特定的根元素將處理程序附加到匹配選擇器的所有元素（現有的或將來的）的一個或多個事件上。
代碼重用
避免全局變量（命名空間，封閉空間，模塊化mvc..）
拆分函數避免函數過於臃腫
註釋
- 以下代碼中end字符串什麼時候輸出
var t=true;
setTimeout(function(){
console.log(123);
t=false;
},1000);
while(t){}
console.log(‘end’);
永遠不輸出
- 在Javascript中什麼是僞數組？如何將僞數組轉化爲標準數組？
答案：
僞數組（類數組）：無法直接調用數組方法或期望length屬性有什麼特殊的行爲，但仍可以對真正數組遍歷方法來遍歷它們。典型的是函數的argument參數，還有像調用getElementsByTagName,document.childNodes之類的,它們都返回NodeList對象都屬於僞數組。可以使用Array.prototype.slice.call(fakeArray)將數組轉化爲真正的Array對象。
- 請寫出一個程序，在頁面加載完成後動態創建一個form表單，並在裏面添加一個input對象並給它任意賦值後義post方式提交到：http://127.0.0.1/save.php
window.onload=function(){
var form=document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "http://127.0.0.1/save.php");
var input=document.createElement("input");
form.appendChild(input);
document.body.appendChild(form);
input.value="cxc";
form.submit();//提交表單
}
- 用JavaScript實現冒泡排序。數據爲23、45、18、37、92、13、24
//升序算法
function sort(arr){
for (var i = 0; i <arr.length; i++) {
for (var j = 0; j <arr.length-i; j++) {
if(arr[j]>arr[j+1]){
var c=arr[j];//交換兩個變量的位置
arr[j]=arr[j+1];
arr[j+1]=c;
}
};
};
return arr.toString();
}
console.log(sort([23,45,18,37,92,13,24]));
window.error
try{}catch(){}finally{}
三、HTML5 CSS3
- CSS3有哪些新特性？
1. CSS3實現圓角（border-radius），陰影（box-shadow），
2. 對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜
4. 增加了更多的CSS選擇器 多背景 rgba
5. 在CSS3中唯一引入的僞元素是 ::selection.
6. 媒體查詢，多欄佈局
7. border-image
8. 倒影 box-reflect
- html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
- header footer section video autio
新特性：
1. 拖拽釋放(Drag and drop) API
2. 語義化更好的內容標籤（header,nav,footer,aside,article,section）
3. 音頻、視頻API(audio,video)
4. 畫布(Canvas) API
5. 地理(Geolocation) API
6. 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
7. sessionStorage 的數據在瀏覽器關閉後自動刪除
8. 表單控件，calendar、date、time、email、url、search
9. 新的技術webworker, websocket, Geolocation
移除的元素：
1. 純表現的元素：basefont，big，center，font, s，strike，tt，u；
2. 對可用性產生負面影響的元素：frame，frameset，noframes；
支持HTML5新標籤：
1. IE8/IE7/IE6支持通過 document.createElement 方法產生的標籤，可以利用這一特性讓這些瀏覽器支持 HTML5 新標籤，瀏覽器支持新標籤後，還需要添加標籤默認的樣式（當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）：
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
如何區分：
DOCTYPE聲明新增的結構元素、功能元素
文件合併
文件最小化/文件壓縮
使用CDN託管
緩存的使用
它是關於網頁製作的過程中讓不同的設備有不同的尺寸和不同的功能。響應式設計是讓所有的人能在這些設備上讓網站運行正常
and(和) not(排除) ,(或)
- HTML5 Canvas 元素有什麼用？
答：Canvas 元素用於在網頁上繪製圖形，該元素標籤強大之處在於可以直接在 HTML 上進行圖形操作。
- CSS3新增僞類有那些？
p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素。
p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每個 <p> 元素。
p:only-of-type 選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素。
p:only-child 選擇.clearfix屬於其父元素的唯一子元素的每個 <p> 元素。
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個 <p> 元素。
:enabled、:disabled 控制表單控件的禁用狀態。
:checked，單選框或複選框被選中。
- 你怎麼來實現頁面設計圖，0 你認爲前端應該如何高質量完成工作? 一個滿屏 品 字佈局 如何設計?
* 首先劃分成頭部、body、腳部；。。。。。
* 實現效果圖是最基本的工作，精確到1px；
與設計師，產品經理的溝通和項目的參與
做好的頁面結構，頁面重構和用戶體驗
處理hack，兼容、寫出優美的代碼格式
針對服務器的優化、擁抱 HTML5。
- 知道css有個content屬性嗎？有什麼作用？有什麼應用？
知道。css的content屬性專門應用在 before/after 僞元素上，用來插入生成內容。最常見的應用是利用僞類清除浮動。
//一種常見利用僞類清除浮動的代碼
.clearfix:after {
content:"."; //這裏利用到了content屬性
display:block;
height:0;
visibility:hidden;
clear:both; }
.clearfix {
*zoom:1;
}
after僞元素通過 content 在元素的後面生成了內容爲一個點的塊級素，再利用clear:both清除浮動。
那麼問題繼續還有，知道css計數器（序列數字字符自動遞增）嗎？如何通過css content屬性實現css計數器？
答案：css計數器是通過設置counter-reset 、counter-increment 兩個屬性 、及 counter()/counters()一個方法配合after / before 僞類實現。
- HTML5 引入什麼新的表單屬性？
Datalist datetime output keygen date month week time number range emailurl
四、移動web開發
1、移動端常用類庫及優缺點
zepto、swiper、mui、bootstrap
2、Zepto庫和JQ區別
Zepto相對jQuery更加輕量，主要用在移動端，jQuery也有對應的jQuerymobile移動端框架
3. 移動端頁面如何適配
- 百分比佈局；2）rem佈局
4.移動端click事件的300ms延時問題如何解決？tap事件的穿透問題如何解決
引入fastClick插件
5.移動端1px邊框如何實現？
Sass代碼風格：
.border-1px(@color){ position:relative; &::after{ display: block; position: absolute; left:0; bottom:0; border-top:1px solid @color; width:100%; content:' '; } } @media (-webkit-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) { .border-1px{ &::after{ -webkit-transform: scaleY(0.7); transform: scaleY(0.7); } } } @media (-webkit-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) { .border-1px{ &::after{ -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } } } @media (-webkit-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) { .border-1px{ &::after{ -webkit-transform: scaleY(0.33); transform: scaleY(0.33); } } }
五、Ajax
1、Ajax 是什麼? 如何創建一個Ajax？
Ajax並不算是一種新的技術，全稱是asychronous javascript and xml，可以說是已有技術的組合，主要用來實現客戶端與服務器端的異步通信效果，實現頁面的局部刷新，早期的瀏覽器並不能原生支持ajax，可以使用隱藏幀（iframe）方式變相實現異步效果，後來的瀏覽器提供了對ajax的原生支持
使用ajax原生方式發送請求主要通過XMLHttpRequest(標準瀏覽器)、ActiveXObject(IE瀏覽器)對象實現異步通信效果
基本步驟：
var xhr =null;//創建對象
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open(“方式”,”地址”,”標誌位”);//初始化請求
xhr.setRequestHeader(“”,””);//設置http頭信息
xhr.onreadystatechange =function(){}//指定回調函數
xhr.send();//發送請求
js框架（jQuery/EXTJS等）提供的ajax API對原生的ajax進行了封裝，熟悉了基礎理論，再學習別的框架就會得心應手，好多都是換湯不換藥的內容
2、同步和異步的區別?
同步：阻塞的
-張三叫李四去喫飯，李四一直忙得不停，張三一直等着，直到李四忙完兩個人一塊去喫飯
=瀏覽器向服務器請求數據，服務器比較忙，瀏覽器一直等着（頁面白屏），直到服務器返回數據，瀏覽器才能顯示頁面
異步：非阻塞的
-張三叫李四去喫飯，李四在忙，張三說了一聲然後自己就去喫飯了，李四忙完後自己去喫
=瀏覽器向服務器請求數據，服務器比較忙，瀏覽器可以自如的幹原來的事情（顯示頁面），服務器返回數據的時候通知瀏覽器一聲，瀏覽器把返回的數據再渲染到頁面，局部更新
3、如何解決跨域問題?
理解跨域的概念：協議、域名、端口都相同才同域，否則都是跨域
出於安全考慮，服務器不允許ajax跨域獲取數據，但是可以跨域獲取文件內容，所以基於這一點，可以動態創建script標籤，使用標籤的src屬性訪問js文件的形式獲取js腳本，並且這個js腳本中的內容是函數調用，該函數調用的參數是服務器返回的數據，爲了獲取這裏的參數數據，需要事先在頁面中定義回調函數，在回調函數中處理服務器返回的數據，這就是解決跨域問題的主流解決方案
4、頁面編碼和被請求的資源編碼如果不一致如何處理？
對於ajax請求傳遞的參數，如果是get請求方式，參數如果傳遞中文，在有些瀏覽器會亂碼，不同的瀏覽器對參數編碼的處理方式不同，所以對於get請求的參數需要使用 encodeURIComponent函數對參數進行編碼處理，後臺開發語言都有相應的解碼api。對於post請求不需要進行編碼
5、簡述ajax 的過程。
1. 創建XMLHttpRequest對象,也就是創建一個異步調用對象
2. 創建一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息
3. 設置響應HTTP請求狀態變化的函數
4. 發送HTTP請求
5. 獲取異步調用返回的數據
6. 使用JavaScript和DOM實現局部刷新
6、闡述一下異步加載。
1. 異步加載的方案： 動態插入 script 標籤
2. 通過 ajax 去獲取 js 代碼，然後通過 eval 執行
3. script 標籤上添加 defer 或者 async 屬性
4. 創建並插入 iframe，讓它異步執行 js
7、請解釋一下 JavaScript 的同源策略。
同源策略是客戶端腳本（尤其是Javascript）的重要的安全度量標準。它最早出自Netscape Navigator2.0，其目的是防止某個文檔或腳本從多個不同源裝載。所謂同源指的是：協議，域名，端口相同，同源策略是一種安全協議，指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。
8、GET和POST的區別，何時使用POST？
GET：一般用於信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，一般在2000個字符，有的瀏覽器是8000個字符
POST：一般用於修改服務器上的資源，對所發送的信息沒有限制
在以下情況中，請使用 POST 請求：
1. 無法使用緩存文件（更新服務器上的文件或數據庫）
2. 向服務器發送大量數據（POST 沒有數據量限制）
3. 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠
9、ajax 是什麼?ajax 的交互模型?同步和異步的區別?如何解決跨域問題?
1. 通過異步模式，提升了用戶體驗
2. 優化了瀏覽器和服務器之間的傳輸，減少不必要的數據往返，減少了帶寬佔用
3. Ajax在客戶端運行，承擔了一部分本來由服務器承擔的工作，減少了大用戶量下的服務器負載。
10、 Ajax的最大的特點是什麼。
Ajax可以實現異步通信效果，實現頁面局部刷新，帶來更好的用戶體驗；按需獲取數據，節約帶寬資源；
11、ajax的缺點
1、ajax不支持瀏覽器back按鈕。
2、安全問題 AJAX暴露了與服務器交互的細節。
3、對搜索引擎的支持比較弱。
4、破壞了程序的異常機制。
12、解釋jsonp的原理，以及爲什麼不是真正的ajax
Jsonp並不是一種數據格式，而json是一種數據格式，jsonp是用來解決跨域獲取數據的一種解決方案，具體是通過動態創建script標籤，然後通過標籤的src屬性獲取js文件中的js腳本，該腳本的內容是一個函數調用，參數就是服務器返回的數據，爲了處理這些返回的數據，需要事先在頁面定義好回調函數，本質上使用的並不是ajax技術
13、一個頁面從輸入 URL 到頁面加載顯示完成，這個過程中都發生了什麼？
分爲4個步驟：
1. 當發送一個 URL 請求時，不管這個 URL 是 Web 頁面的 URL 還是 Web 頁面上每個資源的 URL，瀏覽器都會開啓一個線程來處理這個請求，同時在遠程 DNS 服務器上啓動一個 DNS 查詢。這能使瀏覽器獲得請求對應的 IP 地址。
2. 瀏覽器與遠程 Web 服務器通過 TCP 三次握手協商來建立一個 TCP/IP 連接。該握手包括一個同步報文，一個同步-應答報文和一個應答報文，這三個報文在 瀏覽器和服務器之間傳遞。該握手首先由客戶端嘗試建立起通信，而後服務器應答並接受客戶端的請求，最後由客戶端發出該請求已經被接受的報文。
3. 一旦 TCP/IP 連接建立，瀏覽器會通過該連接向遠程服務器發送 HTTP 的 GET 請求。遠程服務器找到資源並使用 HTTP 響應返回該資源，值爲 200 的 HTTP 響應狀態表示一個正確的響應。
4. 此時，Web 服務器提供資源服務，客戶端開始下載資源。
14、ajax請求時，如何解釋json數據
使用eval() 或者JSON.parse() 鑑於安全性考慮，推薦使用JSON.parse()更靠譜，對數據的安全性更好。
15、請說出三種減低頁面加載時間的方法
1、壓縮css、js文件
2、合併js、css文件，減少http請求
3、外部js、css文件放在最底下
4、減少dom操作，儘可能用變量替代不必要的dom操作
16、HTTP狀態碼都有那些。
200 OK //客戶端請求成功
400 Bad Request //客戶端請求有語法錯誤，不能被服務器所理解
403 Forbidden //服務器收到請求，但是拒絕提供服務
404 Not Found //請求資源不存在，輸入了錯誤的URL
500 Internal Server Error //服務器發生不可預期的錯誤
503 Server Unavailable //服務器當前不能處理客戶端的請求，一段時間後可能恢復正常
六、JS高級
- JQuery一個對象可以同時綁定多個事件，這是如何實現的？
jQuery可以給一個對象同時綁定多個事件，低層實現方式是使用addEventListner或attachEvent兼容不同的瀏覽器實現事件的綁定，這樣可以給同一個對象註冊多個事件。
Webkit是瀏覽器引擎，包括html渲染和js解析功能，手機瀏覽器的主流內核，與之相對應的引擎有Gecko（Mozilla Firefox 等使用）和Trident（也稱MSHTML，IE 使用）。
對於瀏覽器的調試工具要熟練使用，主要是頁面結構分析，後臺請求信息查看，js調試工具使用，熟練使用這些工具可以快速提高解決問題的效率
IE與標準瀏覽器判斷，IE不同版本的判斷，userAgent var ie = /*@cc_on !@*/false;
4、下面這個ul，如何點擊每一列的時候alert其index?（閉包）
|
|
<ul id=”test”> <li>這是第一條</li> <li>這是第二條</li> <li>這是第三條</li> </ul> |
|
|
// 方法一： var lis=document.getElementById('2223').getElementsByTagName('li'); for(var i=0;i<3;i++) { lis[i].index=i; lis[i].οnclick=function(){ alert(this.index); }; } //方法二： var lis=document.getElementById('2223').getElementsByTagName('li'); for(var i=0;i<3;i++){ lis[i].index=i; lis[i].οnclick=(function(a){ return function() { alert(a); } })(i); } |
5. 對作用域上下文和this的理解，看下列代碼：
|
var User = { count: 1, getCount: function() { return this.count; } }; console.log(User.getCount()); // what? var func = User.getCount; console.log(func()); // what? |
問兩處console輸出什麼？爲什麼？
答案是1和undefined。
func是在winodw的上下文中被執行的，所以會訪問不到count屬性。
繼續追問，那麼如何確保Uesr總是能訪問到func的上下文，即正確返回1。正確的方法是使用Function.prototype.bind。兼容各個瀏覽器完整代碼如下：
|
Function.prototype.bind = Function.prototype.bind || function(context){ var self = this; return function(){ return self.apply(context, arguments); }; } var func = User.getCount.bind(User); console.log(func()); |
6.（設計題）想實現一個對頁面某個節點的拖曳？如何做？（使用原生JS）
回答出概念即可，下面是幾個要點
- 給需要拖拽的節點綁定mousedown, mousemove, mouseup事件
- mousedown事件觸發後，開始拖拽
- mousemove時，需要通過event.clientX和clientY獲取拖拽位置，並實時更新位置
- mouseup時，拖拽結束
- 需要注意瀏覽器邊界的情況
7Javascript作用鏈域?
理解變量和函數的訪問範圍和生命週期，全局作用域與局部作用域的區別，JavaScript中沒有塊作用域，函數的嵌套形成不同層次的作用域，嵌套的層次形成鏈式形式，通過作用域鏈查找屬性的規則需要深入理解。
8談談This對象的理解。
理解不同形式的函數調用方式下的this指向，理解事件函數、定時函數中的this指向，函數的調用形式決定了this的指向
9. 如何判斷一個對象是否屬於某個類？
Instanceof constructor
10、new操作符具體幹了什麼呢?
1、創建一個空對象，並且 this 變量引用該對象，同時還繼承了該函數的原型。
2、屬性和方法被加入到 this 引用的對象中。
3、新創建的對象由 this 所引用，並且最後隱式的返回 this 。
11. Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？
12. 模塊化開發怎麼做？
理解模塊化開發模式：瀏覽器端requirejs，seajs；服務器端nodejs；ES6模塊化；fis、webpack等前端整體模塊化解決方案；grunt、gulp等前端工作流的使用
13、AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規範區別？
理解這兩種規範的差異，主要通過requirejs與seajs的對比，理解模塊的定義與引用方式的差異以及這兩種規範的設計原則
14、requireJS的核心原理是什麼？（如何動態加載的？如何避免多次加載的？如何 緩存的？）
核心是js的加載模塊，通過正則匹配模塊以及模塊的依賴關係，保證文件加載的先後順序，根據文件的路徑對加載過的文件做了緩存
15、讓你自己設計實現一個requireJS，你會怎麼做？
核心是實現js的加載模塊，維護js的依賴關係，控制好文件加載的先後順序
16. ECMAScript6 怎麼寫class麼，爲什麼會出現class這種東西?
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '('+this.x+', '+this.y+')';
}
}
17. JS 怎麼實現一個類。怎麼實例化這個類
嚴格來講js中並沒有類的概念，不過js中的函數可以作爲構造函數來使用，通過new來實例化，其實函數本身也是一個對象。
18. JavaScript中的作用域與變量聲明提升？
理解JavaScript的預解析機制，js的運行主要分兩個階段：js的預解析和運行，預解析階段所有的變量聲明和函數定義都會提前，但是變量的賦值不會提前
19、如何編寫高性能的Javascript？
使用 DocumentFragment 優化多次 append
通過模板元素 clone ，替代 createElement
使用一次 innerHTML 賦值代替構建 dom 元素
使用 firstChild 和 nextSibling 代替 childNodes 遍歷 dom 元素
使用 Array 做爲 StringBuffer ，代替字符串拼接的操作
將循環控制量保存到局部變量
順序無關的遍歷時，用 while 替代 for
將條件分支，按可能性順序從高到低排列
在同一條件子的多（ >2 ）條件分支時，使用 switch 優於 if
使用三目運算符替代條件分支
需要不斷執行的時候，優先考慮使用 setInterval
20. 那些操作會造成內存泄漏？
閉包，循環
21、javascript對象的幾種創建方式？
1. 工廠模式
2. 構造函數模式
3. 原型模式
4. 混合構造函數和原型模式
5. 動態原型模式
6. 寄生構造函數模式
7. 穩妥構造函數模式
22、javascript繼承的 6 種方法？
1. 原型鏈繼承
2. 借用構造函數繼承
3. 組合繼承(原型+借用構造)
4. 原型式繼承
5. 寄生式繼承
6. 寄生組合式繼承
23. JavaScript 原型，原型鏈 ? 有什麼特點？
1. 原型對象也是普通的對象，是對象一個自帶隱式的 __proto__ 屬性，原型也有可能有自己的原型，如果一個原型對象的原型不爲 null 的話，我們就稱之爲原型鏈
2. 原型鏈是由一些用來繼承和共享屬性的對象組成的（有限的）對象鏈
24. 簡述一下Sass、Less，且說明區別？
他們是動態的樣式語言，是CSS預處理器,CSS上的一種抽象層。他們是一種特殊的語法/語言而編譯成CSS。
變量符不一樣，less是@，而Sass是$;
Sass支持條件語句，可以使用if{}else{},for{}循環等等。而Less不支持;
Sass是基於Ruby的，是在服務端處理的，而Less是需要引入less.js來處理Less代碼輸出Css到瀏覽器
25. 簡述一下你對web性能優化的方案？
1、儘量減少 HTTP 請求
2、使用瀏覽器緩存
3、使用壓縮組件
4、圖片、JS的預載入
5、將腳本放在底部
6、將樣式文件放在頁面頂部
7、使用外部的JS和CSS
8、精簡代碼
26、在JS中有哪些會被隱式轉換爲false
Undefined、null、關鍵字false、NaN、零、空字符串
27. 前端開發的優化問題（看雅虎14條性能優化原則）。
（1） 減少http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data緩存 ，圖片服務器。
（2） 前端模板 JS+數據，減少由於HTML標籤導致的帶寬浪費，前端用變量保存AJAX請求結果，每次操作本地變量，不用請求，減少請求次數
（3） 用innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能。
（4） 當需要設置的樣式很多時設置className而不是直接操作style。
（5） 少用全局變量、緩存DOM節點查找的結果。減少IO讀取操作。
（6） 避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。
（7） 圖片預加載，將樣式表放在頂部，將腳本放在底部 加上時間戳。
（8） 避免在頁面的主體佈局中使用table，table要等其中的內容完全下載之後纔會顯示出來，顯示比div+css佈局慢。
七、jQuery
1. jQuery裏面$代表哪個對象
jQuery對象
2.jQuery裏面如何獲取原生的DOM對象;
$()[0]; get();
3.如何解決jQuery和其他庫之間的衝突問題;
1)將jQuery放在其他庫之前引用，這樣$屬於jQuery
2)使用jQuery.noConflict()剔除jQuery中的$重新命名
3.jQuery的優勢;
1、像css那樣訪問和 操作DOM；
2、簡化javascript代碼操作；
- 事件處理更加容易；
- 讓ajax技術更加完美；
- 基於jquery的大量的插件；
- 自行擴展功能插件
4.簡述你所知道的每個jquery版本之間的差異；至少3點[單元十]
1）jquery1.x.x的版本還兼容ie6-8；jquery2.x.x及以後版本不在兼容ie6-8
2）jquery1.9以後再解析字符串的時候凡是以尖括號（<）開頭的都按html標籤解析； 以前版本在遇到複雜字符串解析時會不準確
3）jquery1.6.2以後操作disabled、enabled、checked、selected等特性時使用prop （）方法；jquery1.6以前所有的屬性操作都用attr()方法
4）jquery1.9以後棄用了.toggle()複合事件
5）jquery1.8以後廢棄了.live()方法，1.9直接刪除
6）jquery1.7以後將bind（）、unbind（）；live、die();delegate()、undelegate() 統一整合爲了on（）、off（）和one（）方法
7）在解決.queue()在執行列隊動畫不能連綴的問題上jquery1.4以後用next（）函數；以前用.dequeue()方法
5.在模擬用戶操作中.trigger()和.triggerHandle()的不同；至少3點[單元十]
1）.trigger()不能阻止默認行爲；.triggerHandle()可以阻止默認行爲；
2）.trigger()方法會影響所有匹配的元素；triggerHandle()方法隻影響第一個匹配的元素
3）.trigger()方法會返回當前包含事件觸發元素的jquery對象；.triggerHandler()會返回當前事件執行的返回值；沒有返回undefined;
4).trigger在創建事件的時候會冒泡；.triggerHandler不會冒泡；
6.請說出bind、live和on的區別[單元十]
1）bind（）方法不可以給動態添加的節點綁定事件；
2）live（）方法可以給動態添加的節點綁定事件但不可以連綴使用，將事件綁定在了 document上；jquery1.9版本已經刪除了該方法；
3）On（）方法整合了bind、live、delegate的所有功能將事件綁定在父級上；
7.簡述jQuery插件封裝的過程
1.插件名推薦使用 jquery.[插件名].js，以免和其他 js 文件或
者其他庫相沖突；
2.局部對象附加 jquery.fn 對象上，全局函數附加在 jquery 上；
3.插件內部，this 指向是當前的局部對象；
4.可以通過 this.each 來遍歷所有元素；
5.所有的方法或插件，必須用分號結尾，避免出現問題；
6.插件應該返回的是 jQuery 對象，以保證可鏈式連綴；
7.避免插件內部使用$，如果要使用，請傳遞 jQuery 進去。
8.針對 jQuery 的優化方法？
優先使用ID選擇器
在class前使用tag(標籤名)
給選擇器一個上下文
慎用 .live()方法（應該說盡量不要使用）
使用data()方法存儲臨時變量
- Zepto的點透問題如何解決？
點透主要是由於兩個div重合，例如：一個div調用show()，一個div調用hide()；這個時候當點擊上面的div的時候就會影響到下面的那個div；
解決辦法主要有2種：
1.github上有一個叫做fastclick的庫，它也能規避移動設備上click事件的延遲響應，https://github.com/ftlabs/fastclick
將它用script標籤引入頁面（該庫支持AMD，於是你也可以按照AMD規範，用諸如require.js的模塊加載器引入），並且在dom ready時初始化在body上，
2.根據分析，如果不引入其它類庫，也不想自己按照上述fastclcik的思路再開發一套東西，需要1.一個優先於下面的“divClickUnder”捕獲的事件；2.並且通過這個事件阻止掉默認行爲（下面的“divClickUnder”對click事件的捕獲，在ios的safari，click的捕獲被認爲和滾屏、點擊輸入框彈起鍵盤等一樣，是一種瀏覽器默認行爲，即可以被event.preventDefault()阻止的行爲）。
八、HTML5API之Canvas
canvasAPI
方法：
1.獲取2d上下文對象：getContext("2d");
2.繪製矩形：ctx.fillRect(x,y,width,height); ctx.strokeRect(x,y,width,height);
3.填充：ctx.fill(); 繪製邊框：ctx.stroke();
4.開闢新路徑：ctx.beginPath();
5.繪製直線：從ctx.moveTo(x1,y1)到ctx.lineTo(x2,y2);
6.繪製圓弧：ctx.arcTo(x1,y1,x2,y2,r);
7.繪製圓：ctx.arc(x,y,r,startAngle,endAngle,boolearn);
8.閉合路徑：ctx.closePath();
9.清空畫布：ctx.clearRect(x,y,width,height)
10.繪製二次方貝塞爾曲線：ctx.quadraticCurveTo(x1,y1,x2,y2);
11.繪製三次方貝塞爾曲線：ctx.bezierCurveTo(x1,y1,x2,y2,x3,y3)
12.繪製線性漸變：var clg = ctx.createLinearGradient(xStart,yStart,xEnd,yEnd);
13.繪製徑向漸變：var crg = ctx.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);
14.添加漸變顏色：crg.addColorStop(offset,color);
offset爲設置漸變的偏移量（0-1）;
15.圖案平鋪：ctx.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
16.圖形的組合：ctx.globalCompositeOperation = type
type:
source-over（默認值）:在原有圖形上繪製新圖；
destination-over:在原有圖形下繪製新圖；
source-in:顯示原有圖形和新圖形的交集，新圖形在上，所以顏色爲新圖形的顏色
destination-in:顯示原有圖形和新圖形的交集，原有圖形在上，所以顏色爲原有圖形的顏色
source-out:只顯示新圖形非交集部分
destination-out:只顯示原有圖形非交集部分
source-atop:顯示原有圖形和交集部分，新圖形在上，所以交集部分的顏色爲新圖形的顏色
destination-atop:顯示新圖形和交集部分，新圖形在下，所以交集部分的顏色爲原有圖形的顏色
lighter:原有圖形和新圖形都顯示，交集部分做顏色疊加
xor:重疊部分不顯示
copy:只顯示新圖形
16.圖形的轉換：ctx.translate(x,y) //偏移;
ctx.rotate(angle) //旋轉;
ctx.scale(n1,n2) //縮放;
17.圖形狀態的保存與恢復：
ctx.save(); //保存當前圖形的canvas狀態
ctx.restore(); //恢復到離他最近的那個配對的save的狀態
18.繪製圖形：ctx.drawImage(image,x,y);
ctx.drawImage(image,x,y,sw,sh);
ctx.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
19.繪製文字：ctx.fillText("內容",x,y);ctx.strokeText("內容",x,y)
20.獲取文字的寬度：var m = ctx.measureText("內容"); m.width
屬性；
1.設置填充顏色：ctx.fillStyle = "顏色值";
2.設置邊框顏色：ctx.strokeStyle = "顏色值";
3.設置圖形邊框寬度：ctx.lineWidth = 值;
4.設置直線的端點樣式：ctx.lineCap = "butt|round|square";
5.設置圖形的透明度：ctx.globalAlpha = 值(0-1);
6.設置陰影顏色：shadowColor = color;
7.設置陰影模糊半徑：shadowBlur = 值;
8.設置陰影的偏移量：shadowOffsetX,shadowOffsetY;
9.設置文字的樣式: ctx.font ="font-style font-size font-family";
10.設置文字的對齊方式：ctx.textAlign = "start|left|end|rigth|center"
九．HTML5API之離線緩存
什麼是離線存儲？
作用：在用戶沒有與因特網連接時，照樣可以訪問站點或應用，在用戶與因特網連接時自動更新緩存數據。
應用程序緩存爲爲應用帶來的三個優勢？
1.離線瀏覽--用戶可在離線時使用它們
2.速度--以緩存資源加載速度更快
3.減少服務器負載--瀏覽器將只從服務器下載更新過或更改過的資源
開發支持離線web應用時，通常需要使用以下三方面的功能
1.離線資源緩存：需要一種方式來指明應用程序離線工作時所需的資源文件。這樣瀏覽器才能在在線狀態時，把這些文件緩存到本地。此後，當用戶離線訪問應用程序時，這些資源文件會自動加載，從而讓用戶正常使用。
2.在線狀態檢測：開發者需要知道瀏覽器是否在線，這樣才能夠針對在線或離線的狀態，做出對應的處理，可以使用navigator對象的online屬性值來進行在線狀態的判斷。
3.本地數據存儲：離線時，需要能夠把數據存儲到本地，以便在線時同步到服務器。威客滿足不同的
儲存需求，HTML5提供可DOM Storage 和Web SQL Database兩種儲存機制。
實現離線存儲的步驟：
1.配置服務器manifest文件的MIME類型。不同的web服務器配置方法不同
Tomcat(服務器)在（conf/web.xml）文件中手動添加。
<mime-mapping>
<extension>manifest</extension>
<mime-type>text/cache-manifest</mime-type>
</mime-mapping>
Apache(服務器)在（conf/mime.types）文件中手動添加：mime-type text/cache-manifest
2. 編寫manifest文件
CACHE MANIFEST
#VERSION 3.9
CACHE: 在此標題下列出的文件將在首次下載後執行緩存,/html5/test.html
NETWORK: 在此標題下列出的文件需要與服務器連接，且不會被緩存/html5/test.js
FALLBACK: 在此標題下列出的文件規定當頁面無法訪問時的替換頁/html5/test.html /html5/404.html
3.在頁面的html元素的manifest屬性中引入manifest文件
<html manifest="/html5cache/test.manifest">
更新html5離線緩存的方法
1.清除離線緩存的數據，因爲不同的瀏覽器管理離線存儲的方式不同，所以清除離線存儲的方式也不同
2.修改manifest文件，修改manifest文件裏所羅列的文件也不會更新緩存，而是要更新manifest文件
3.使用javascrip提供的api來更新離線緩存
window.addEventListener('load',function(){
window.applicationCache.addEventListener('updateready',function(){ //開始更新
console.log(window.applicationCache.status)
if(window.applicationCache.status==window.applicatonCache.UPDATEREADY){
window.applicationCache.swapCache(); //得到最新版本緩存列表，並且成功下載資源，更新緩存到最新
}
},false)
},false)
使用缺陷：
1.含有manifest屬性的當前請求頁無論如何都會被緩存；
2.更新需要建立在manifest文件的更新，文件更新後是需要頁面再次刷新的（需要2次刷新才能獲取新資源）
3.更新時全局性的，無法單獨更新某個文件；
4.對於鏈接的參數變化是敏感的，任何一個參數的修改都會被（master）重新緩存（重複緩存含參頁面）
index.html和index.html?a=1會被認爲是不同文件，分別緩存；
十．HTML5API之地理位置
一. HTML5地理位置定位
地理位置（Geolocation）是 HTML5 的重要特性之一，提供了確定用戶位置的功能，藉助這個特性能夠開發基於位置信息的應用。HTML5 地理位置定位的基本原理及各個瀏覽器的數據精度情況。
1.核心對象
Geolocation是window.navigator下面的一個對象，該對象提供了實現地理位置定位的接口。要用該功能首先判斷瀏覽器是否支持
navigator.geolocation對象。
2.Geolocation對象詳解
getCurrentPosition(success,error,options)該方法是實現地理定位的核心方法，該方法能夠對獲取到的信息作出處理以及設置。
A.success(position) 獲取信息成功的回調函數
B.error(errorcode)獲取信息失敗的回調函數
C.options獲取信息前可以按照你的需求來設置一些參數
1. success(position) 獲取信息成功的回調函數
當成功獲得信息的時候，會自動調用success函數，而這個函數會自動生成一個包含返回地理信息的position對象，如下：
A.coords.latitude（緯度）
B.coords.longitude（經度）
C.coords.altitude（海拔）
D.coords.accuracy（位置精確度）
E.coords.altitudeAccuracy(海拔精確度)
F.coords.heading（朝向）
G.coords.speed (速度)
H.timestamp(響應的日期)
1. error(errorcode)獲取信息失敗的回調函數
A. 地理信息會因爲各種因素，例如信號不好等等而出錯。因此當獲取信息失敗的時候會自
動調用getCurrentPosition的第二個參數，即error函數，這個函數會自動生成一個包含錯
誤代碼和錯誤信息的對象作爲其參數，code是錯誤代碼，message是錯誤信息。
switch(errorcode.code){
case 1 :
alert(errorcode.message);//用戶選了不允許
break;
case 2:
alert(errorcode.message);/連不上GPS衛星，或者網絡斷了
break;
case 3:
alert(errorcode.message);//超時了
break;
default:
alert(errorcode.message);//未知錯誤，其實是err.code==0的時候
break;
}
1. options 設置一些參數
options是一個對象，可以設置超時時間、緩存時間等，如下：
A.enableHighAccuracy 表示是否允許使用高精度，但這個
參數在很多設備上設置了都沒用，設備綜合考慮電量、
地理情況等，很多時候都是默認的由設備自身來調整。
B.timeout 指定超時時間
C.maximumAge 是指緩存的時間
<script type="text/javascript">
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(success,error,options)
}else{
alert("你的瀏覽器版本需要升級！")
}
function success(position){
//alert(1);
alert(position.coords.latitude);
}
function error(errorCode){
//alert("失敗");
alert(errorCode.code+"=="+errorCode.message);
}
var options={};
//百度地圖API
</script>
時時監守：watchPosition() //監視你的位置變化
十一、es6
1.在瀏覽器裏面如何使用？
需要用到編譯工具
babel
traceur---由谷歌出的編譯器，把ES6語法編譯爲ES5
bootstrap 引導程序，跟css裏面認識的bootscrap不一樣
2.let特點：
1.具備塊級作用域
2.不允許重複聲明
const定義常量，也不能重複聲明(必須要初始化，以後再也沒法賦值了)
3.字符串連接：
var str=``;(這是字符串模板)
之前：'abc'+變量名+'ef';
現在：'abc'${變量名}+'ef';
4.解構賦值：
var [a,b,c]=[12,5,101];
var {a,b,c}={b:5,a:12,c:101}跟順序無關
模式匹配：左邊模式跟右邊一樣
var arr=[{title:"aaa",href:"kkk","img":"image"}]
var [{title,href,img}]=arr;
解構賦值給默認值：var {title=12,id=1}={}
5.複製數組；
var arr=[1,2,3];
var arr2=Array.from(arr);
var arr2=[...arr];
...的用途arguments
6.循環遍歷：for...of;能循環數組，不能循環json
7.Map對象：
和json相似，也是key--value的形式
是爲了和for...of循環配合而生的
var map=new Map();
設置：
map.set(key,value)
獲取：map.get(key)
刪除：map.delete(key)
循環map：
for(var name of map){console.log(map)}==for(var name of map.entries())
for(var [key,value] of map){console.log(key,value)}
只循環key
for(var key of map.keys()){console.log(key)}
只循環vaue
for(var value of map.values()){console.log(key)}
8.箭頭函數：=>
var show=()=>{alert(1)} function show(){alert(1)}
注意：this問題，this指向了window;
arguments不能使用了
9.對象
var neme='張三'；
var age=16；
var person={
name,
age,
showName(){
alert(this.name)
}
}
person.showName();
10.模塊化(必須編譯)
如何定義(導出)模塊
const a=12; //定義模塊
export default a //導出模塊
export default {a,b}
如何引用模塊
import 自定義名 form 路徑
import model form './a.js'
11.promise:承諾
就是一個對象，用來傳遞異步操作的數據
pending(等待，正在處理中)----------->Resolve(完成)
Rejected(失敗，拒絕)
使用：
var p1=new promise(function(Resolve,Reject){
if(異步處理成功了){
console.log(Resolve)
}else{
console.log(Reject)
}
});
p1.then(function(value){ //成功了
console.log(value)
},funtion(value){ //失敗了
console.log(value)
})
p1.catch:捕獲錯誤信息
promise.all：用於將所有的promise對象包裝成一個promise實例
promise.all([p1,p2,p3,...])
所有的promise對象都正確才走成功
否則只要有一個錯誤，失敗了
race:返回的也是一個promise對象；
最先能執行的promise結果，哪個最快就用哪個