『壹』 Web前端面試題小集
一、一個頁面上兩個div左右鋪滿整個瀏覽器，要保證左邊的div一直為100px，右邊的div跟隨瀏覽器大小變化(比如瀏覽器為500，右邊div為400，瀏覽器為900，右邊div為800)，請寫出大概的css代碼。
1.使用flex
//html
『貳』 2020年Web前端面試題及答案匯總
今天小編要跟大家分享的文章是關於2020年Web前端面試題及答案匯總。正准備參加Web前端面試的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對大家有所幫助。 『叄』 Web前端5道面試題
1.請說明ECMAScript,JavaScript,Jscript之間的關系? 『肆』 Web前端崗位面試題有哪些 前端面試題匯總，基本上會有四大類問題，具體如下： 2、CSS選擇符有哪些？哪些屬性可以繼承？ 11、一個滿屏 品 字布局 如何設計? 三、常見兼容性問題？ Definition）規范區別？ 『伍』 Web前端面試之css高頻面試題
今天小編要跟大家分享的文章是關於web前端面試之css高頻面試題。想要參加web前端面試的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對大家有所幫助。 『陸』 常見的web前端面試題及答案分享 1、 說下行內元素和塊級元素的區別?行內塊元素的兼容性使用?(IE8 以下) 答：行內元素：會在水平方向排列，不能包含塊級元素，設置width無效，height無效(可以設置line-height)，margin上下無效，padding上下無效。塊級元素：各占據一行，垂直方向排列。從新行開始結束接著一個斷行。兼容性：display:inline-block;*display:inline;*zoom:1。 2、box-sizing常用的屬性有哪些?分別有什麼作用? 答：box-sizing: content-box|border-box|inherit。content-box:寬度和高度分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距和邊框(元素默認效果)。 border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。 3、Doctype作用?標准模式與兼容模式各有什麼區別? 答：告知瀏覽器的解析器用什麼文檔標准解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。 標准模式的排版和JS運作模式都是以該瀏覽器支持的最高標准運行。在兼容模式中，頁面以寬松的向後兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。 4、html5有哪些新特性?如何處理HTML5新標簽的瀏覽器兼容問題?如何區分 HTML 和 HTML5? 答：HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。 (1)繪畫 canvas; (2)用於媒介回放的 video 和 audio 元素; (3)本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失; (4)sessionStorage 的數據在瀏覽器關閉後自動刪除; (5)語意化更好的內容元素，比如 article、footer、header、nav、section; (6)表單控制項，calendar、date、time、email、url、search; (7)新的技術webworker, websocket, Geolocation; IE8/IE7/IE6支持通過document.createElement方法產生的標簽，可以利用這一特性讓這些瀏覽器支持HTML5新標簽，瀏覽器支持新標簽後，還需要添加標簽默認的樣式。當然也可以直接使用成熟的框架、比如html5shim。 以上就是環球青藤小編關於web前端面試題的相關分享，希望對大家有所幫助，想要了解更多相關內容，請及時關注本平台並進行查看! 『柒』 Web前端企業面試題 答： 一、display和visibility的相同與不同點 1、相同點：display和visibility都有講元素隱藏的意思 2、不同點：display是元素隱藏，隱藏的元素不佔文檔流 而visibility隱藏的元素仍然占文檔流 二、display和visibility的屬性值 1、display 2、visibility 答： 在開發過程中經常需要循環遍歷數組或者對象，使用最多的方法 forEach、for…in 、 for…of ，整理一下他們的異同點 for循環 其實除了這三種方法以外還有一種最原始的遍歷，自Javascript誕生起就一直用的 就是for循環，它用來遍歷數組 for循環中可以使用return、break等來中斷循環 結果： forEach 對數組的每一個元素執行一次提供的函數（不能使用return、break等中斷循環），不改變原數組，無返回值undefined。 輸出結果： for…in 循環遍歷的值都是數據結構的鍵值 總結一句: for in也可以循環數組但是特別適合遍歷對象 結果： for…of 它是ES6中新增加的語法，用來循環獲取一對鍵值對中的值 循環一個數組 循環一個普通對象（報錯） 答： px：像素（Pixel）,相對長度單位。像素px是相對於顯示器屏幕解析度而言的 。--即解析度不同的機型當前對應的距離可能發生變化。(1Inches=xPx)。 所以相對於同一機型來說是一個絕對的長度單位。 em：是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對於瀏覽器的默認字體尺寸 。 以其父級元素為基準來變化長度。所以其演算法不是一個固定的值。 rem：是CSS3新增的一個相對單位（root em，根em） 。 那麼其好用在用可以直接設置HTML的font-size，然後在其子類都是以這個大小為基準變化的值。 在移動設備上，我們常常設置 此方式的目的是為了將當前屏幕(PC)解析度的px轉化成手機端的px，讓px在手機上能夠兼容此方式。 因此，此時看見的12px與PC端的12px無異。但是，如果不寫著個meta的話，那麼，瀏覽器會一直以PC的視圖來決定手機端的px的大小，讓視圖看起來變小了很多。 那麼，響應式頁面則經常配合媒體查詢media 來設置不同解析度下手機的各種不同的配置機構，然後根據父級來變化所有的相對長度。 基礎篇 1.shift // 刪除原數組的第一項，並返回刪除元素的值，如果數組為空則返回undefined 2.unshift // 將參數添加到原數組開頭，並返回數組的長度 //註：此方法在ie6.0下 // 測試的返回值始終為undefined，在firefox下測試的返回值為7，所以此方法不可靠 // 一般需要用返回值時可用splice代替 3.pop // 刪除原數組的最後一項，並返回刪除元素的值；如果數組為空則返回undefined 4.push // 將參數添加到原數組末尾，並返回數組的長度 5.concat // 返回一個新數組，是將參數添加到原數組中構成的 6.splice 7.reverse 8.sort(orderfunction) 9.slice(start,end) 10.join(separator) 11.indexOf 12.lastIndexOf 13. Array.isArray() 14. Array.toString() 進階篇 1.forEach 是最為常用的情景，它至於遍歷，可以在獲取當前數據項的前提下，對數據進行修改。它沒有返回值。理解起來也是最容易的。 2.map map的本意就是映射，也就是將一個值從一種形式映射到另一種形式，比如將key映射到value。它的每一次遍歷都會有一個返回值。這些返回值組合成最終的結果數組。事實就是如此 forEach和map對比 相同點 1）都是循環遍歷數組中的每一項； 2）forEach()和map()匿名函數的參數相同，參數分別是item（當前每一項）、index（索引值）、arr（原數組）； 3）this都是指向調用方法的數組； 4) 只能遍歷數組； 不相同點 1）map()創建了新數組，不改變原數組；forEach()可以改變原數組。 2）遇到空缺的時候map()雖然會跳過，但保留空缺；forEach()遍歷時跳過空缺，不保留空缺。 3）map()按照原始數組元素順序依次處理元素；forEach()遍歷數組的每個元素，將元素傳給回調函數。 3.filter 它致力於從已有的數組中篩選出符合一定條件的數據項，最後的返回值是所有符合條件的數據項構成的數組。它不會修改原來的數組。記住，它的立足點就是篩選。也僅僅是篩選。還有一點需要注意：每一次遍歷都會有一個返回值，它的類型是布爾類型。返回值只有是true，當前遍歷項才會被篩選中。不要試圖在filter中去修改原始數組。 理解: 就是在一堆數據裡面去篩選你需要的數據 或者 剔除你不需要的數據 4.find() 返回通過測試的數組的第一個元素的值, 理解:假如你去一個一群人的地方去找人 你說我找xxb 他要是在那裡就找到 不在那裡就是undefined 在第一次調用 callback 函數時會確定元素的索引范圍，因此在 find 方法開始執行之後添加到數組的新元素將不會被 callback 函數訪問到。如果數組中一個尚未被callback函數訪問到的元素的值被callback函數所改變，那麼當callback函數訪問到它時，它的值是將是根據它在數組中的索引所訪問到的當前值。被刪除的元素仍舊會被訪問到。 語法 array.find(function(value, index, arr),thisValue) value:必須，代表當前元素，其他四個參數都是可選，index代表當前索引值，arr代表當前的數組，thisValue代表傳遞給函數的值，一般用this值，如果這個參數為空，undefined會傳遞給this值 返回值：返回符合測試條件的第一個數組元素的值，如果沒有符合條件的則返回undefined。 擴展: findIndex()方法的用法與find()方法非常類似，返回第一個符合條件的數組成員的位置，如果所有成員都不符合條件，則返回-1。自己try吧 5.every 理解: 這個就像 上課了 老師說 昨天布置的作業 只要有一個人沒有寫完 今天就不講課 然後挨個檢查 當檢查到有一個沒有寫完的時候 就不檢查了 返回 不講課了(false) 6.some 理解: 相當於在一個數組裡面找你想要的那個數 找到了 就返回true 找不到就返回false 7.rece 它這個方法是接收一個函數作為累加器,將數組中的值(從左向右)開始合並,最總為一個值 然後返回出來,callback 他可以傳四個參數: 1,previousValue:上一次調用回調返回的值,或者是提供的初始值(initialValue) 2,currentValue:數組中當前被處理的元素 3,index:不啰嗦,自己顧名思義去吧 4,array:返回調用rece的數組 彩蛋: 這里附上前幾天某某人比較喜歡的切割字元串的方法 substring() 和 substr() 相同點： 如果只是寫一個參數，兩者的作用都一樣：都是是截取字元串從當前下標以後直到字元串最後的字元串片段。 不同點： 第二個參數 substr(startIndex, lenth) // 第二個參數是截取字元串的長度（從起始點截取某個長度的字元串）； substring(startIndex, endIndex) // 第二個參數是截取字元串最終的下標 （截取2個位置之間的字元串,『含頭不含尾'）。 1：在使用vue框架的過程中，我們經常需要給一些數據做一些初始化處理，這時候我們常用的就是在created與mounted選項中作出處理。 首先來看下官方解釋，官方解釋說created是在實例創建完成後唄立即調用。在這一步，實例已完成以下配置：數據觀測 (data observer)，屬性和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。 這話的意思我覺得重點在於說掛架階段還沒開始，什麼叫還沒開始掛載，也就是說，模板還沒有被渲染成html，也就是這時候通過id什麼的去查找頁面元素是找不到的。下面看下實例來證明。 所以，一般creadted鉤子函數主要是用來初始化數據。 2：mounted鉤子函數一般是用來向後端發起請求拿到數據以後做一些業務處理。官方解釋如下： el 被新創建的 vm.$el 替換，並掛載到實例上去之後調用該鉤子。如果 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。 這意思是該鉤子函數是在掛在完成以後也就是模板渲染完成以後才會被調用。下面看實例 下面是結果 nihao 取到了值，這說明這時候vue模板已經渲染完畢。因此，Dom操作一般是在mounted鉤子函數中進行的 computed:{} 計算屬性，什麼是計算屬性呢，我個人理解就是對數據進行一定的操作，可以包含邏輯處理操作，對計算屬性中的數據進行監控。計算屬性是基於它的以來進行更新的，只有在相關依賴發生改變時側能更新變化，以函數的形式返回結果。然後可以像綁定普通屬性一樣在模板中綁定計算屬性。 總結： computed:{} 計算屬性，什麼是計算屬性呢，我個人理解就是對數據進行一定的操作，可以包含邏輯處理操作，對計算屬性中的數據進行監控。計算屬性是基於它的以來進行更新的，只有在相關依賴發生改變時側能更新變化，以函數的形式返回結果。然後可以像綁定普通屬性一樣在模板中綁定計算屬性。 mounted 是生命周期鉤子，vue的生命周期中一個實例的mounted只會運行一次。mounted在vue的渲染模板掛載到$el元素上才會調用，很顯然你export的時候el都么有自然不會運行mounted鉤子函數了。 6、Vue中組件之間的傳參方式有哪些方式？ Vue 組件傳參的八種方式總結 Vue 組件的使用不管是在平常工作還是在面試面試中，都是頻繁出現的。因此系統的梳理一下組件之間的傳參還是非常有必要的 一、props 傳參 子組件定義 props 有三種方式: // 第一種數組方式 // 第二種對象方式 // 第三種對象嵌套對象方式 第三種對象默認支持 4 種屬性，並且都是非必填的。可以隨意使用 父組件傳參的倆種方式 第一種靜態屬性傳參 注意： 1、在不定義 props 類型的情況下 props 接受到的均為 String。 2、當 props 屬性指定為 Boolean 時，並且只有屬性 key 沒有值 value 時接受到的是 true 第二種動態屬性傳參 注意： 1、需要區分非簡寫形式傳入的值是對象，則會對應 props 中多個值 2、會保留傳入值的類型 3、如果是表達式則獲取到的是表達式的計算結果 二、attrs 和listeners $attrs $attrs 會獲取到 props 中未定義的屬性（class 和 style 屬性除外）,支持響應式。常用的場景有倆種： 組件嵌套組件時可以使用 $attrs 來支持過多的屬性支持。比如 elementUI 的 table 組件。支持的屬性十幾個，而平常封裝的時候用的最多的也就一倆個。 屬性默認是添加在父組件上的，有時候想把多餘的屬性添加在子組件上（可以結合 inheritAttrs: false 屬性，讓父屬性不接受多餘的屬性） $listeners 定義的事件都在子組件的根元素上，有時候想加到其他元素上。就可以使用 $listerners。它包含了父組件中的事件監聽器(除了帶有 .native 修飾符的監聽器) 三、$emit 通知 這里有一道考題: for 循環的時候如何拿到子組件的傳值和 for 中循環的值 答案有倆種，一是 $event, 二是 閉包。只是需要注意 $event 只能獲取到第一個值 四、v-model 這個其實是一種通過 emit，on 的組合方式。優點再於同步值方便,寫法優雅。下面三種寫法其實是一個意思 五、插槽 六、$refs, $root, $parent, $children $root 獲取根組件 $parent 獲取父組件 $children 獲取子組件(所有的子組件，不保證順序) $refs 組件獲取組件實例，元素獲取元素 七、project / inject 注意：注入的值是非響應的 八、Vuex 這個相當於單獨維護的一組數據，就不過多的說了。 watch，computed和methods的關系 1.watch和computed都是以Vue的依賴追蹤機制為基礎的 ，它們都試圖處理這樣一件事情：當某一個數據（稱它為依賴數據）發生變化的時候，所有依賴這個數據的「相關」數據「自動」發生變化，也就是自動調用相關的函數去實現數據的變動。 2.對methods:methods裡面是用來定義函數的，很顯然，它需要手動調用才能執行。而不像watch和computed那樣，「自動執行」預先定義的函數 watch和computed各自處理的數據關系場景不同 1. watch 擅長處理的場景： 一個數據影響多個數據 2. computed 擅長處理的場景： 一個數據受多個數據影響 watch用法 監聽下記haiZeiTuan_Name的值，會改變其他所有的值 結果：this.suoLong會變為 '橡膠海賊團索隆',以此類推 computed用法 監聽下記firstName，secName，thirdName的值，會改變luFei_Name的值 methods和computed的區別例子 注意兩次點擊computed返回的時間是相同的！！ 1.兩次點擊methods返回的時間是不同的 2.注意兩次點擊computed返回的時間是相同的 【注意】為什麼兩次點擊computed返回的時間是相同的呢？new Date()不是依賴型數據 （不是放在data等對象下的實例數據） ，所以computed只提供了緩存的值，而沒有重新計算 只有符合：1.存在依賴型數據 2.依賴型數據發生改變這兩個條件 ,computed才會重新計算。 參考：http://www.cnblogs.com/penghuwan/p/7194133.html 答：https://codecat.blog.csdn.net/article/details/100031285 1、Promise Promise 是非同步編程的一種解決方案，比傳統的解決方案——回調函數和事件——更合理和更強大，簡單地說，Promise好比容器，裡面存放著一些未來才會執行完畢（非同步）的事件的結果，而這些結果一旦生成是無法改變的 2、async await async await也是非同步編程的一種解決方案，他遵循的是Generator 函數的語法糖，他擁有內置執行器，不需要額外的調用直接會自動執行並輸出結果，它返回的是一個Promise對象。 兩者的主要用法、語法就不贅述了，感興趣的同學可以自行查閱 es6中文文檔 兩者的區別 1、Promise的出現解決了傳統callback函數導致的「地域回調」問題，但它的語法導致了它向縱向發展行成了一個回調鏈，遇到復雜的業務場景，這樣的語法顯然也是不美觀的。而async await代碼看起來會簡潔些，使得非同步代碼看起來像同步代碼，await的本質是可以提供等同於」同步效果「的等待非同步返回能力的語法糖，只有這一句代碼執行完，才會執行下一句。 2、async await與Promise一樣，是非阻塞的。 3、async await是基於Promise實現的，可以說是改良版的Promise，它不能用於普通的回調函數。 簡單來看，這兩者除了語法糖不一樣外，他們解決的問題、達到的效果是大同小異的，我們可以在不同的應用場景，根據自己的喜好來選擇使用。 『捌』 一份超全的Web前端工程師面試題!收藏~
今天小編為大家准備了一份超全的Web前端工程師面試題,准備換工作參加Web前端工程師面試的小夥伴們快來和小編一起看一看這些題目吧，希望能夠對你的面試有所幫助! 『玖』 Web前端面試的常見面試題匯總 paragraph 『拾』 阿里巴巴web前端開發面試題
第一部分：用CSS實現布局
一、Mysql資料庫
1.MySQL中varchar與char的區別以及varchar(50)中的50代表的涵義?
答案：
Varchar是變長字元串，最多存儲的大小是65535位元組，查詢速度相對較慢;Char
是定常字元串，最多存儲的大小是255位元組，查詢速度相對較快;
varchar(50)表示：Mysql4.0表示存放50個位元組，5.0存放50個字元。
2.簡述瀏覽器打開#顯示頁面，中間都經過哪些過程?
答案：
向DNS伺服器獲取域名對應的IP地址並返回瀏覽器，通過IP地址向Web伺服器發請求，Web伺服器從文件伺服器獲取網頁中所需要的文件，從資料庫伺服器獲取網頁中所需要的數據，最後講完整的網頁相應給瀏覽器。
3.如何解決MySQL中存儲中文亂碼問題?
答案：
腳本文件採用UTF8編碼
客戶端連接資料庫使用UTF8編碼
伺服器端創建資料庫使用UTF8編碼
4.Float和Double的區別是什麼?
答案：
FLOAT(單精度浮點數)類型數據可以存儲至多8位十進制數，並在內存中佔4位元組。
DOUBLE(雙精度浮點數)類型數據可以存儲至多18位十進制數，並在內存中佔8位元組。
5.把數據id等於1的名字oldboy更改為oldgirl?
答案：
updatetestsetname='oldgirl'whereid=1;
6.如何登錄mysql數據?
答案：
mysql-uroot。
二、JS基礎
1.continue和break有什麼區別?
答案：
break和continue都是用來控制循環結構的：
break終止循環，跳出循環體執行循環後面的語句。
continue跳過本次循環，執行下一次循環。
2.i++和++i的區別?
答案：
i++：先用i值後加1,
++i：先加1後用i值，
計算：varn=5;求varnum=n+++++n+n+++++n+n;//37
3.JavaScript都有哪些數據類型?
答案：
原始類型：數值型/字元串型/布爾型/undefined/null
引用類型：對象
4.自調用函數是什麼?用於什麼地方?
答案：立即執行的函數。(function(){//函數體})();
用於創建一個局部作用域。
5.slice和splice有什麼區別?
答案：
slice截取子數組，從指定的數組中，截取幾個連續的元素組成一個新數組
splice允許從指定數組中，刪除一部分元素，同時再添加另一部分元素
6.typeof返回的類型有哪些?
答案：
number、string、boolean、undefined、object、function
ex:
vararr=[1,2,3,4,5];
console.log(typeof(arr));//object
functionmyDemo(){
returnfunctiontest(){};
}
console.log(typeof(myDemo()));//function
7.取1~11之間的隨機數(即包括1不包括11)?
答案：
Math.floor(Math.random()*10+1)
parseInt(Math.random()*10+1)
8.什麼是變數聲明提前?
答案：
使用var關鍵字聲明的變數，會將聲明提升到所在作用域的最前邊。。
9.push、pop、shift和unshift區別?
答案：
這兩組同為對數組的操作，並且會改變數組的本身的長度及內容。
不同的是push()、pop()是從數組的尾部進行增減，unshift()、shift()是從數組的頭部進行增減。。
10.例舉4種強制類型轉換和3種隱式類型轉換?
答案：
強制轉換：parseInt/parseFloat/Number/toString
隱式轉換：
字元串+數值數值轉字元串
數值+布爾型布爾型中true轉為1，false轉為0
字元串+布爾型布爾型轉為字元串。
11.函數聲明與函數表達式的區別?
答案：
相同點：兩者都可以創建函數。
不同點：函數聲明可以存在函數提升(前)，函數表達式不存在函數提升(前)。
//函數聲明
functionmyFunction(){
functioninnerFunction(){}
}
//以下為函數表達式
varmyFunc=function(){};
myFunc(function(){
returnfunction(){};
});
12.請指出JavaScript宿主對象和原生對象的區別?
答案：
宿主對象：指JavaScript解釋器提供的對象，由解釋器廠家自定義並提供實現，不同的解釋器提供的擴展對象存在較大的差異(DOM和BOM對象)。
原生對象：JavaScript語言本身預定義的對象，在ECMAScript標准中定義，由所有的解釋器廠家來提供具體實現(Array,Date,Math,Number,String,Boolean等)。
13.js中有哪些內置函數?
答案：Object,Array,Boolean,Number,String,Function,Date,Math,RegExp,
Error,Global
14.列舉出獲取日期相關函數
答案：
console.log(Date.now());//返回當前日期和時間/01/0100:00:00'之間的毫秒值
vardt=newDate();//獲取當前時間---年月日時分秒
console.log(dt.getTime());//返回當前日期和時間/01/0100:00:00'之間的毫秒值
console.log(dt.getFullYear());//年份
console.log(dt.getMonth()+1);//月份(0-11)
console.log(dt.getDate());//日期(0/1-31)
console.log(dt.getDay());//星期(0-6)
console.log(dt.getHours());//小時(0-23)
console.log(dt.getMinutes());//分鍾(0-59)
console.log(dt.getMilliseconds);//返回毫秒(0-999)
console.log(dt.getSeconds());//秒(0-59)
15.Math相關函數
答案：
Math.random()-返回0~1之間的隨機數
Math.abs(x)-返回數的絕對值
Math.ceil(x)-向上取整
Math.floor(x)-向下取整
Math.round()四捨五入
Math.max()和Max.min()獲取一組數據中的最大值和最小值
Math.PI獲取圓周率π的值Math.pow()獲取一個值的多少次冪
Math.sqrt()對數值開方
Math.pow(10，2)=100;
Math.sqrt(100)=10;
16.null和undefined的區別?
答案：
undefined是訪問一個未初始化的變數時返回的值，
null是訪問一個尚不存在的對象時所返回的值。因此，可以把undefined看作是空的變數，而null看作是空的對象。
17.==和===有什麼不同?
答案：
==抽象相等，比較時，會先進行類型轉換，然後再比較值;
===嚴格相等，判斷兩個值相等同時數據類型也得相同。
18.setTimeout和setInterval的區別是什麼?
答案：
二者都是用來設置定時操作的。
setTimeout:設置一個定時器，在定時器到期後執行一次函數或代碼段
setInterval:設置一個定時器，以固定的時間間隔重復調用一個函數或者代碼段
19.請說出以下代碼執行結果
for(vari=0;i<3;i++){
setTimeout(function(){
console.log(i);
},0);
console.log(i);
}
答案：012333，執行過程如下
vari=0;
console.log(i);i++;
console.log(i);i++;
console.log(i);i++;
setTimeout(function(){console.log(i);
},0);s
etTimeout(function(){
console.log(i);
},0);
setTimeout(function(){
console.log(i);
},0);//輸出012333
20.請說出(true+flase)>2+true的執行結果
答案：false
21.當前代碼塊輸出結果是什麼?
varz=10;
functionfoo(){console.log(z);}
(function(funArg){varz=20;funArg();})(foo);
答案：10，自調用函數。
22.setTimeout(function(){},10)表示什麼意思?
答案：每隔10毫秒調用一次函數。
23.程序中捕獲異常的方法?
答案：
try{
}catch(e){
}finally{
}
24.以下代碼執行結果?
varuname='jack'
functionchange(){
alert(uname)//?
varuname='lily'
alert(uname)//?
}
change()
答案：undefinedlily
25.如何使用npm下載express模塊?
答案：npminstallexpress
26.split和join的區別?
答案：split()將字元串按照指定的字元分割成一個數組，並返回
join()將數組用指定的字元連接成一個字元串，並返回
27.看下列代碼會有什麼樣的輸出?
varfoo="11"+2-"1";
console.log(foo);
console.log(typeoffoo);
答案：111number
28.foo=foo||bar，這行代碼是什麼意思?為什麼要這樣寫?
答案：這種寫法稱之為短路表達式
相當於：
varfoo;
if(foo){
foo=foo;
}else{
foo=bar;
}
常用於函數參數的空判斷
29.用js實現隨機選取10_100之間的10個數字，存入一個數組，並排序
答案：
functiongetRandom(istart,iend){
variChoice=iend-istart+1;
returnMath.floor(Math.random()*iChoice+istart);
}variArray=[];
for(vari=0;i<10;i++){
varresult=getRandom(10,100);
iArray.push(result);
}iArray.sort();
30.如何獲取javascript三個數中的最大值和最小值?
答案：Math.max(a,b,c);//最大值
Math.min(a,b,c)//最小值
31.實現冒泡排序?
vararray=[5,4,3,2,1];
vartemp=0;
for(vari=0;i
for(varj=0;j
if(array[j]>array[j+1]){
temp=array[j+1];
array[j+1]=array[j];
array[j]=temp;
}
}
三、NODEJS
1.同步和非同步有何區別?
答案：
同步：指發送一個請求,需要等待返回,然後才能夠發送下一個請求，有等待過程(在一個任務進行中時不能開啟其他的任務)。
非同步：指發送一個請求,不需要等待返回,隨時可以再發送下一個請求，即不需要等待(在一個任務進行中時可以開啟其他的任務)。
2.NodeJS中有哪些類型模塊，文件操作用哪一個模塊?
答案：
模塊類型：核心模塊、自定義模塊、第三方模塊。
文件操作：fs模塊
3.對NodeJS的優點和缺點提出自己的看法?
答案：CPU密集型任務的特點是進行大量的計算，消耗CPU資源，比如計算圓周率(上千位)、對視頻進行編碼等,全靠CPU的運算能力
(一般用C語言，java)IO(Input/
Output)密集型任務，這類任務的特點是CPU消耗很少，大部分時間都在等待IO操作。常見的大部分任務都是IO密集型任務，比如Web應用(一般用腳本語言：python/Nodejs)。Nodejs設計思想中以事件驅動、非同步、非堵塞I/O密集型為核心，他提供的大多數api都是基於事件的、非同步的風格。所以非常適合處理高並發請求。此外，與Node伺服器交互的客戶端代碼是由js語言編寫的，因此客戶端和伺服器端都用同一種語言編寫，減少了成本。
4.使用NodeJS完成登錄功能(編寫HTML頁面和路由介面中的代碼)?
答案：
HTML頁面：
用戶：
密碼：
user.js路由
constexpress=require('express');
constpool=require('../pool.js');
varrouter=express.Router();
router.post('/login',(req,res)=>{
varobj=req.body;
var$uname=obj.uname;
if(!$uname){
res.send({code:401,msg:'unamerequired'});
return;
}
var$upwd=obj.upwd;
if(!$upwd){res.send({code:402,msg:'upwdrequired'});
return;
}
varsql='SELECT*FROMxz_userWHEREuname=?ANDupwd=?'
pool.query(sql,[$uname,$upwd],(err,result)=>{
if(err)throwerr;
if(result.length>0){
res.send({code:200,msg:'loginsuccess'});
}else{
res.send({code:301,msg:'loginerror'});
}});
});
//路由器導出
mole.exports=router;
5.什麼是Nodejs?
Nodejs是一個JavaScript的運行環境，是一個伺服器端的「JavaScript解釋器」，用於方便高效地搭建一些響應速度快、易於擴展的網路應用。它採用事件驅動、非同步編程，為網路服務而設計
ECMAScript提供腳本語言必須遵守的規則、
細節和准則，是腳本語言的規范。
比如：ES5，ES6就是具體的一js版本。
JavaScript是ECMAScript的一個分支版本,
JavaScript實現了多數ECMA-262中
描述的ECMAScript規范，但存在少數差異。
JScript是微軟公司對ECMA-262語言規范的
一種實現,除了少數例外(這是為了保持向後兼容),
微軟公司宣稱JScript完全實現了ECMA標准.
關系:
JavaScript和JScript都是ECMAScript的版本分支,
二者在語法上沒有多大的區別;
只不過一個是NetScape公司的,一個是微軟的;
IE系列默認是JScript,其它的則反之用JavaScript。
2.頁面載入過程中可能觸發哪些事件?它們的順序是?
頁面載入時，大致可以分為以下幾個步驟：1)開始解析HTML文檔結構2)載入外部樣式表及JavaScript腳本3)解析執行JavaScript腳本4)DOM樹渲染完成5)載入未完成的外部資源6)頁面載入成功
執行順序:1)documentreadystatechange事件2)documentDOMContentLoaded事件3)windowload事件
3.函數中在聲明變數a前使用a會產生錯誤嗎?為什麼?
不會,JS中能夠進行變數作用域提升,
把所有變數、函數的聲明提升到當前
作用域的最前面,但不進行賦值操作;
所以可能造成獲取的值是undefined。
4.什麼是hash,以及hashchange事件?
先了解下什麼是hash:hash即URL中"#"字元後面的部分。
a)使用瀏覽器訪問網頁時，
如果網頁URL中帶有hash，
頁面就會定位到id(或name)
與hash值一樣的元素的位置;
b)hash還有另一個特點，
它的改變不會導致頁面重新載入;
c)hash值瀏覽器是不會隨請求發送到伺服器端的;
d)通過window.location.hash屬性獲取和設置hash值。
window.location.hash值的變化會直接
反應到瀏覽器地址欄(#後面的部分會發生變化)，同時，瀏覽器地址欄hash值的變化也會觸發
window.location.hash值的變化，
從而觸發onhashchange事件。
再來了解下什麼是hashchange事件:
a)當URL的片段標識符更改時，
將觸發hashchange事件(跟在#符號後面的URL部分，包括#符號)b)
hashchange事件觸發時，
事件對象會有hash改變前的URL(oldURL)和hash改變後的URL(newURL)兩個屬性。
5.什麼是CDN,CDN對於網站有什麼意義,它有什麼樣的缺點?
CDN又稱為內容分發網路;本意在於
盡可能避開互聯網上有可能影響數據
傳輸速度和穩定性的瓶頸和環節，
使內容傳輸的更快、更穩定。
主要目的:
解決因分布、帶寬、伺服器性能帶來的訪問延遲問題，
適用於站點加速、點播、直播等場景。
使用戶可就近取得所需內容，解決Internet網路擁擠的狀況，
提高用戶訪問網站的響應速度和成功率。
缺點:
a)實施復雜,投資大;
b)目前大部分的CDN還只是對靜態內容加速，
對動態加速效果不好;
而雙線對動態加速的效果跟靜態是一樣的。
一、HTML
1、Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義?
2、HTML5 為什麼只需要寫 <!DOCTYPE HTML>？
3、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
4、頁面導入樣式時，使用link和@import有什麼區別？
5、介紹一下你對瀏覽器內核的理解？
6、常見的瀏覽器內核有哪些？
7、html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
8、簡述一下你對HTML語義化的理解？
9、HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
10、瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢？
11、請描述一下 cookies，sessionStorage 和 localStorage 的區別？
12、iframe有那些缺點？
13、Label的作用是什麼？是怎麼用的？（加 for 或 包裹）
14、HTML5的form如何關閉自動完成功能？
15、如何實現瀏覽器內多個標簽頁之間的通信? (阿里)
16、webSocket如何兼容低瀏覽器？(阿里)
17、頁面可見性（Page Visibility）API 可以有哪些用途？
18、如何在頁面上實現一個圓形的可點擊區域？
19、實現不使用 border 畫出1px高的線，在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。
20、網頁驗證碼是幹嘛的，是為了解決什麼安全問題？
21、tite與h1的區別、b與strong的區別、i與em的區別？
二、css
1、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？
3、CSS優先順序演算法如何計算？
4、CSS3新增偽類有那些？
5、如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
6、display有哪些值？說明他們的作用。
7、position的值relative和absolute定位原點是？
8、CSS3有哪些新特性？
9、請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場景？
10、用純CSS創建一個三角形的原理是什麼？
1、li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？
2、經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什麼，常用hack的技巧 ？
3、為什麼要初始化CSS樣式。
4、absolute的containing block計算方式跟正常流有什麼不同？
5、CSS里的visibility屬性有個collapse屬性值是幹嘛用的？在不同瀏覽器下以後什麼區別？
6、position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？
7、對BFC規范(塊級格式化上下文：block formatting context)的理解？
8、CSS權重優先順序是如何計算的？
9、請解釋一下為什麼會出現浮動和什麼時候需要清除浮動？清除浮動的方式
10、移動端的布局用過媒體查詢嗎？
11、使用 CSS 預處理器嗎？喜歡那個？
12、CSS優化、提高性能的方法有哪些？
13、瀏覽器是怎樣解析CSS選擇器的？
14、在網頁中的應該使用奇數還是偶數的字體？為什麼呢？
15、margin和padding分別適合什麼場景使用？
16、抽離樣式模塊怎麼寫，說出思路，有無實踐經驗？[阿里航旅的面試題]
17、元素豎向的百分比設定是相對於容器的高度嗎？
18、全屏滾動的原理是什麼？用到了CSS的那些屬性？
19、什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的IE？
20、視差滾動效果，如何給每頁做不同的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎麼做？）
21、::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個偽元素的作用。
22、如何修改chrome記住密碼後自動填充表單的黃色背景 ？
23、你對line-height是如何理解的？
24、設置元素浮動後，該元素的display值是多少？（自動變成display:block）
25、怎麼讓Chrome支持小於12px 的文字？
26、讓頁面里的字體變清晰，變細用CSS怎麼做？（-webkit-font-smoothing: antialiased;）
27、font-style屬性可以讓它賦值為「oblique」 oblique是什麼意思？
28、position:fixed;在android下無效怎麼處理？
29、如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？（阿里）
30、display:inline-block 什麼時候會顯示間隙？(攜程)
31、overflow: scroll時不能平滑滾動的問題怎麼處理？
32、有一個高度自適應的div，裡面有兩個div，一個高度100px，希望另一個填滿剩下的高度。
33、png、jpg、gif 這些圖片格式解釋一下，分別什麼時候用。有沒有了解過webp？
34、什麼是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎麼做）
35、style標簽寫在body後與body前有什麼區別？
四、JavaScript
1、介紹JavaScript的基本數據類型。
2、說說寫JavaScript的基本規范？
3、JavaScript原型，原型鏈 ? 有什麼特點？
4、JavaScript有幾種類型的值？（堆：原始數據類型和 棧：引用數據類型），你能畫一下他們的內存圖嗎？
5、Javascript如何實現繼承？
6、Javascript創建對象的幾種方式？
7、Javascript作用鏈域?
8、談談This對象的理解。
9、eval是做什麼的？
10、什麼是window對象? 什麼是document對象?
11、null，undefined的區別？
12、寫一個通用的事件偵聽器函數(機試題)。
13、[「1」, 「2」, 「3」].map(parseInt) 答案是多少？
14、關於事件，IE與火狐的事件機制有什麼區別？ 如何阻止冒泡？
15、什麼是閉包（closure），為什麼要用它？
16、javascript 代碼中的」use strict」;是什麼意思 ? 使用它區別是什麼？
17、如何判斷一個對象是否屬於某個類？
18、new操作符具體幹了什麼呢?
19、用原生JavaScript的實現過什麼功能嗎？
20、Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？
21、對JSON的了解？
22、[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }) 能解釋一下這段代碼的意思嗎？
23、js延遲載入的方式有哪些？
24、Ajax 是什麼? 如何創建一個Ajax？
25、同步和非同步的區別?
26、如何解決跨域問題?
27、頁面編碼和被請求的資源編碼如果不一致如何處理？
28、模塊化開發怎麼做？
29、AMD（Moles/Asynchronous-Definition）、CMD（Common Mole
30、requireJS的核心原理是什麼？（如何動態載入的？如何避免多次載入的？如何 緩存的？）
31、讓你自己設計實現一個requireJS，你會怎麼做？
32、談一談你對ECMAScript6的了解？
33、ECMAScript6 怎麼寫class么，為什麼會出現class這種東西?
34、非同步載入的方式有哪些？
35、documen.write和 innerHTML的區別?
36、DOM操作——怎樣添加、移除、移動、復制、創建和查找節點?
37、.call() 和 .apply() 的含義和區別？
38、數組和對象有哪些原生方法，列舉一下？
39、JS 怎麼實現一個類。怎麼實例化這個類
40、JavaScript中的作用域與變數聲明提升？
41、如何編寫高性能的Javascript？
42、那些操作會造成內存泄漏？
43、JQuery的源碼看過嗎？能不能簡單概況一下它的實現原理？
44、jQuery.fn的init方法返回的this指的是什麼對象？為什麼要返回this？
45、jquery中如何將數組轉化為json字元串，然後再轉化回來？
46、jQuery 的屬性拷貝(extend)的實現原理是什麼，如何實現深拷貝？
47、jquery.extend 與 jquery.fn.extend的區別？
48、jQuery 的隊列是如何實現的？隊列可以用在哪些地方？
49、談一下Jquery中的bind(),live(),delegate(),on()的區別？
50、JQuery一個對象可以同時綁定多個事件，這是如何實現的？
51、是否知道自定義事件。jQuery里的fire函數是什麼意思，什麼時候用？
52、jQuery 是通過哪個方法和 Sizzle 選擇器結合的？（jQuery.fn.find()進入Sizzle）
53、針對 jQuery性能的優化方法？
54、Jquery與jQuery UI有啥區別？
55、JQuery的源碼看過嗎？能不能簡單說一下它的實現原理？
56、jquery 中如何將數組轉化為json字元串，然後再轉化回來？
57、jQuery和Zepto的區別？各自的使用場景？
58、針對 jQuery 的優化方法？
59、Zepto的點透問題如何解決？
60、jQueryUI如何自定義組件?
61、需求：實現一個頁面操作不會整頁刷新的網站，並且能在瀏覽器前進、後退時正確響應。給出你的技術實現方案？
62、如何判斷當前腳本運行在瀏覽器還是node環境中？（阿里）
63、移動端最小觸控區域是多大？
64、jQuery 的 slideUp動畫 ，如果目標元素是被外部事件驅動, 當滑鼠快速地連續觸發外部元素事件, 動畫會滯後的反復執行，該如何處理呢?
65、把 Script 標簽 放在頁面的最底部的body封閉之前 和封閉之後有什麼區別？瀏覽器會如何解析它們？
66、移動端的點擊事件的有延遲，時間是多久，為什麼會有？ 怎麼解決這個延時？（click 有 300ms 延遲,為了實現safari的雙擊事件的設計，瀏覽器要知道你是不是要雙擊操作。）
67、知道各種JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能講出他們各自的優點和缺點么?
68、Underscore 對哪些 JS 原生對象進行了擴展以及提供了哪些好用的函數方法？
69、解釋JavaScript中的作用域與變數聲明提升？
70、那些操作會造成內存泄漏？
71、JQuery一個對象可以同時綁定多個事件，這是如何實現的？
72、Node.js的適用場景？
(如果會用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
73、解釋一下 Backbone 的 MVC 實現方式？
74、什麼是「前端路由」?什麼時候適合使用「前端路由」? 「前端路由」有哪些優點和缺點?
75、知道什麼是webkit么? 知道怎麼用瀏覽器的各種工具來調試和debug代碼么?
76、如何測試前端代碼么? 知道BDD, TDD, Unit Test么? 知道怎麼測試你的前端工程么(mocha, sinon, jasmin, qUnit..)?
77、前端templating(Mustache, underscore, handlebars)是幹嘛的, 怎麼用?
78、簡述一下 Handlebars 的基本用法？
79、簡述一下 Handlerbars 的對模板的基本處理流程， 如何編譯的？如何緩存的？
80、用js實現千位分隔符?(來源：前端農民工，提示：正則+replace)
檢測瀏覽器版本版本有哪些方式？
81、我們給一個dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡，你來說下會執行幾次事件，然後會先執行冒泡還是捕獲
1.什麼是BFC機制
BFC(BlockFormattingContext)，塊級格式化上下文，是一個獨立的渲染區域，讓處於BFC內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。
·___シ⑻跫(以下任意一條)
§_loat的值不為none
§_verflow的值不為visible
§_isplay的值為table-cell、tabble-caption和inline-block之一
§_osition的值不為static或則releative中的任何一個
在IE下,Layout,可通過zoom:1_シ
·___FC布局與普通文檔流布局區別:
BFC布局規則:
1._浮動的元素會被父級計算高度(父級元素觸發了BFC)
2._非浮動元素不會覆蓋浮動元素的位置(非浮動元素觸發了BFC)
3._margin不會傳遞給父級(父級觸發BFC)
4._屬於同一個BFC的兩個相鄰元素上下margin會重疊
5._普通文檔流布局:浮動的元素是不會被父級計算高度
6._非浮動元素會覆蓋浮動元素的位置
7._margin會傳遞給父級元素
8._兩個相鄰元素上下的margin會重疊
·___⒅械撓τ
§_柚_argin重疊
§_梢園《亍宄誆扛《(清除浮動的原理是兩個div都位於同一個BFC區域之中)
§_允視α嚼覆季
§_梢宰柚乖乇桓《馗哺
2.CSS3中新增的選擇器以及屬性
這里只是列出來,具體的使用,請查看我的關於css3新增選擇器與屬性文章
·___糶匝≡衿
td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}
屬性選擇器
含義描述
E[att^="val"]
屬性att的值以"val"開頭的元素
E[att$="val"]
屬性att的值以"val"結尾的元素
E[att*="val"]
屬性att的值包含"val"字元串的元素
·___峁刮崩嘌≡衿
td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}
選擇器
含義描述
E:root
匹配文檔的根元素，對於HTML文檔，就是HTML元素
E:nth-child(n)
匹配其父元素的第n個子元素，第一個編號為1
E:nth-last-child(n)
匹配其父元素的倒數第n個子元素，第一個編號為1
E:nth-of-type(n)
與:nth-child()作用類似，但是僅匹配使用同種標簽的元素
E:nth-last-of-type(n)
與:nth-last-child()作用類似，但是僅匹配使用同種標簽的元素
E:last-child
匹配父元素的最後一個子元素，等同於:nth-last-child(1)
E:first-of-type
匹配父元素下使用同種標簽的第一個子元素，等同於:nth-of-type(1)
E:last-of-type
匹配父元素下使用同種標簽的最後一個子元素，等同於:nth-last-of-type(1)
E:only-child
匹配父元素下僅有的一個子元素，等同於:first-child:last-child或:nth-child(1):nth-last-child(1)
E:only-of-type
匹配父元素下使用同種標簽的唯一一個子元素，等同於:first-of-type:last-of-type或:nth-of-type(1):nth-last-of-type(1)
E:empty
匹配一個不包含任何子元素的元素，注意，文本節點也被看作子元素
·___ss3新增屬性
td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}
屬性
含義描述
兼容
transition
設置過渡效果
transform
變換效果(移動、縮放、轉動、拉長或拉伸)
animation
動畫效果
box-shadow
陰影效果
FF3.5,Safari4,Chrome3
text-shadow
文本陰影
FF3.5,Opera10,Safari4,Chrome3
border-colors
為邊框設置多種顏色
FF3+
boder-image
圖片邊框
FF3.5,Safari4,Chrome3
text-overflow
文本截斷
IE6+,Safari4,Chrome3,Opera10
word-wrap
自動換行
IE6+,FF3.5,Safari4,Chrome3
border-radius
圓角邊框
FF3+,Safari4,Chrome3
opacity
不透明度
all
box-sizing
控制盒模型的組成模式
FF3+,Opera10,Safari4,Chrome3
outline
外邊框
FF3+,safari4,chrome3,opera10
background-size
不指定背景圖片的尺寸
safari4,chrome3,opera10
background-origin
指定背景圖片從哪裡開始顯示
safari4,chrome3,FF3+
background-clip
指定背景圖片從什麼位置開始裁切
safari4,chrome3
rgba
基於r,g,b三個顏色通道來設置顏色值,通過a來設置透明度
safari4,chrome3,FF3,opera10
3.居中布局
·___驕又
1._行內元素:_ext-align:center
2._塊級元素:_argin:0auto
3._絕對定位和移動:_bsolute+transform
4._絕對定位和負邊距:_bsolute+margin
5._flex布局:_lex+
justify-content:center
·___怪本又
1._子元素為單行文本:_ine-height:height
2._absolute+transform
3._flex+align-items:center
4._table:_isplay:table-cell;vertical-align:
middle
5._利用position和top和負margin
·___醬怪本又_HAPE*MERGEFORMAT
1.已知元素寬高:絕對定位+margin:auto:
_div{
___idth:200px;
___eight:200px;
___ackground:
green;
___osition:absolute;
___eft:0;
___op:0;
___ottom:0;
___ight:0;
___argin:
auto;
_
2.已知元素寬高:_遠ㄎ+負margin
_div{
___idth:200px;
___eight:200px;
___ackground:
green;
___osition:absolute;
___eft:0;
___op:0;
___ottom:0;
___ight:0;
___argin:
auto;
_
3.absolute+transform
_div{
__width:200px;
__height:200px;
__background:
green;
__position:absolute;
__left:50%;_/*定位父級的50%*/
__top:50%;
__transform:translate(-50%,-50%);/*自己的50%*/
_}
4.flex+justify-content
+align-items
.box{
_height:600px;
_display:flex;
_justify-content:center;//子元素水平居中
_align-items:center;__//子元素垂直居中
__/*aa只要三句話就可以實現不定寬高水平垂直居中。*/
__
.box>div{
__ackground:
green;
__idth:200px;
__eight:200px;
_
4.清除浮動有哪些方法,各有什麼優缺點
·___褂_lear屬性的空元素
在浮動元素後使用一個空元素如
通常created使用的次數多，而mounted通常是在一些插件的使用或者組件的使用中進行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常會有這一步，而如果你寫入組件中，你會發現在created中無法對chart進行一些初始化配置，一定要等這個html渲染完後才可以進行，那麼mounted就是不二之選。
methods:{}中的方法都需要主動去觸發，比如點擊click之類的
而created(){}、mounted(){}、裡面的代碼都是自動去執行的，即vue生命周期到了哪一步就直接去執行對應鉤子函數裡面的代碼了，無需手動去執行
created中主要放初始化獲取數據之類，mounted()中掛載到具體的DOM節點
所有的方法都應該在methods里定義，然後在created或者mounted里 使用this調用方法，用這種方式實現初始化
一、HTML
§Doctype作用?嚴格模式與混雜模式如何區分?它們有何意義?
§HTML5為什麼只需要寫?
§行內元素有哪些?塊級元素有哪些?空(void)元素有那些?
§頁面導入樣式時，使用link和@import有什麼區別?
§介紹一下你對瀏覽器內核的理解?
§常見的瀏覽器內核有哪些?
§html5有哪些新特性、移除了那些元素?如何處理HTML5新標簽的瀏覽器兼容問題?如何區分HTML和HTML5?
§簡述一下你對HTML語義化的理解?
§HTML5的離線儲存怎麼使用，工作原理能不能解釋一下?
§瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢?
§請描述一下cookies，sessionStorage和localStorage的區別?
§iframe有那些缺點?
§Label的作用是什麼?是怎麼用的?(加for或包裹)
§HTML5的form如何關閉自動完成功能?
§如何實現瀏覽器內多個標簽頁之間的通信?(阿里)
§webSocket如何兼容低瀏覽器?(阿里)
§頁面可見性(PageVisibility)API可以有哪些用途?
§如何在頁面上實現一個圓形的可點擊區域?
§實現不使用border畫出1px高的線，在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。
§網頁驗證碼是幹嘛的，是為了解決什麼安全問題?
§tite與h1的區別、b與strong的區別、i與em的區別?
二、CSS
§介紹一下標準的CSS的盒子模型?與低版本IE的盒子模型有什麼不同的?
§CSS選擇符有哪些?哪些屬性可以繼承?
§CSS優先順序演算法如何計算?
§CSS3新增偽類有那些?
§如何居中div?如何居中一個浮動元素?如何讓絕對定位的div居中?
§display有哪些值?說明他們的作用。
§position的值relative和absolute定位原點是?
§CSS3有哪些新特性?
§請解釋一下CSS3的Flexbox(彈性盒布局模型),以及適用場景?
§用純CSS創建一個三角形的原理是什麼?
§一個滿屏品字布局如何設計?
§常見兼容性問題?
§li與li之間有看不見的空白間隔是什麼原因引起的?有什麼解決辦法?
§經常遇到的瀏覽器的兼容性有哪些?原因，解決方法是什麼，常用hack的技巧?
§為什麼要初始化CSS樣式。
§absolute的containingblock計算方式跟正常流有什麼不同?
§CSS里的visibility屬性有個collapse屬性值是幹嘛用的?在不同瀏覽器下以後什麼區別?
§position跟display、margincollapse、overflow、float這些特性相互疊加後會怎麼樣?
§對BFC規范(塊級格式化上下文：blockformattingcontext)的理解?
§CSS權重優先順序是如何計算的?
§請解釋一下為什麼會出現浮動和什麼時候需要清除浮動?清除浮動的方式
§移動端的布局用過媒體查詢嗎?
§使用CSS預處理器嗎?喜歡那個?
§CSS優化、提高性能的方法有哪些?
§瀏覽器是怎樣解析CSS選擇器的?
§在網頁中的應該使用奇數還是偶數的字體?為什麼呢?
§margin和padding分別適合什麼場景使用?
§抽離樣式模塊怎麼寫，說出思路，有無實踐經驗?[阿里航旅的面試題]
§元素豎向的百分比設定是相對於容器的高度嗎?
§全屏滾動的原理是什麼?用到了CSS的那些屬性?
§什麼是響應式設計?響應式設計的基本原理是什麼?如何兼容低版本的IE?
§視差滾動效果，如何給每頁做不同的動畫?(回到頂部，向下滑動要再次出現，和只出現一次分別怎麼做?)
§::before和:after中雙冒號和單冒號有什麼區別?解釋一下這2個偽元素的作用。
§如何修改chrome記住密碼後自動填充表單的黃色背景?
§你對line-height是如何理解的?
§設置元素浮動後，該元素的display值是多少?(自動變成display:block)
§怎麼讓Chrome支持小於12px的文字?
§讓頁面里的字體變清晰，變細用CSS怎麼做?(-webkit-font-smoothing:antialiased;)
§font-style屬性可以讓它賦值為「oblique」oblique是什麼意思?
§position:fixed;在android下無效怎麼處理?
§如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼?(阿里)
§display:inline-block什麼時候會顯示間隙?(攜程)
§overflow:scroll時不能平滑滾動的問題怎麼處理?
§有一個高度自適應的div，裡面有兩個div，一個高度100px，希望另一個填滿剩下的高度。
§png、jpg、gif這些圖片格式解釋一下，分別什麼時候用。有沒有了解過webp?
§什麼是Cookie隔離?(或者說：請求資源的時候不要讓它帶cookie怎麼做)
§style標簽寫在body後與body前有什麼區別?
三、JavaScript
§介紹JavaScript的基本數據類型。
§說說寫JavaScript的基本規范?
§JavaScript原型，原型鏈?有什麼特點?
§JavaScript有幾種類型的值?(堆：原始數據類型和棧：引用數據類型)，你能畫一下他們的內存圖嗎?
§Javascript如何實現繼承?
§Javascript創建對象的幾種方式?
§Javascript作用鏈域?
§談談This對象的理解。
§eval是做什麼的?
§什麼是window對象?什麼是document對象?
§null，undefined的區別?
§寫一個通用的事件偵聽器函數(機試題)。
§[「1」,「2」,「3」].map(parseInt)答案是多少?
§關於事件，IE與火狐的事件機制有什麼區別?如何阻止冒泡?
§什麼是閉包(closure)，為什麼要用它?
§javascript代碼中的」usestrict」;是什麼意思?使用它區別是什麼?
§如何判斷一個對象是否屬於某個類?
§new操作符具體幹了什麼呢?
§用原生JavaScript的實現過什麼功能嗎?
§Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是?
§對JSON的了解?
§[].forEach.call($$("*"),function(a){a.style.outline="1pxsolid
#"+(~~(Math.random()*(1<<24))).toString(16)})能解釋一下這段代碼的意思嗎?
§js延遲載入的方式有哪些?
§Ajax是什麼?如何創建一個Ajax?
§同步和非同步的區別?
§如何解決跨域問題?
§頁面編碼和被請求的資源編碼如果不一致如何處理?
§模塊化開發怎麼做?
§AMD(Moles/Asynchronous-Definition)、CMD(CommonMole
Definition)規范區別?
§requireJS的核心原理是什麼?(如何動態載入的?如何避免多次載入的?如何緩存的?)
§讓你自己設計實現一個requireJS，你會怎麼做?
§談一談你對ECMAScript6的了解?
§ECMAScript6怎麼寫class么，為什麼會出現class這種東西?
§非同步載入的方式有哪些?
§documen.write和innerHTML的區別?
§DOM操作——怎樣添加、移除、移動、復制、創建和查找節點?
§.call()和.apply()的含義和區別?
§數組和對象有哪些原生方法，列舉一下?
§JS怎麼實現一個類。怎麼實例化這個類
§JavaScript中的作用域與變數聲明提升?
§如何編寫高性能的Javascript?
§那些操作會造成內存泄漏?
§JQuery的源碼看過嗎?能不能簡單概況一下它的實現原理?
§jQuery.fn的init方法返回的this指的是什麼對象?為什麼要返回this?
§jquery中如何將數組轉化為json字元串，然後再轉化回來?
§jQuery的屬性拷貝(extend)的實現原理是什麼，如何實現深拷貝?
§jquery.extend與jquery.fn.extend的區別?
§jQuery的隊列是如何實現的?隊列可以用在哪些地方?
§談一下Jquery中的bind(),live(),delegate(),on()的區別?
§JQuery一個對象可以同時綁定多個事件，這是如何實現的?
§是否知道自定義事件。jQuery里的fire函數是什麼意思，什麼時候用?
§jQuery是通過哪個方法和Sizzle選擇器結合的?(jQuery.fn.find()進入Sizzle)
§針對jQuery性能的優化方法?
§Jquery與jQueryUI有啥區別?
§JQuery的源碼看過嗎?能不能簡單說一下它的實現原理?
§jquery中如何將數組轉化為json字元串，然後再轉化回來?
§jQuery和Zepto的區別?各自的使用場景?
§針對jQuery的優化方法?
§Zepto的點透問題如何解決?
§jQueryUI如何自定義組件?
§需求：實現一個頁面操作不會整頁刷新的網站，並且能在瀏覽器前進、後退時正確響應。給出你的技術實現方案?
§如何判斷當前腳本運行在瀏覽器還是node環境中?(阿里)
§移動端最小觸控區域是多大?
§jQuery的slideUp動畫，如果目標元素是被外部事件驅動,當滑鼠快速地連續觸發外部元素事件,
動畫會滯後的反復執行，該如何處理呢?
§把Script標簽放在頁面的最底部的body封閉之前和封閉之後有什麼區別?瀏覽器會如何解析它們?
§移動端的點擊事件的有延遲，時間是多久，為什麼會有?怎麼解決這個延時?(click有300ms
延遲,為了實現safari的雙擊事件的設計，瀏覽器要知道你是不是要雙擊操作。)
§知道各種JS框架(Angular,Backbone,Ember,React,Meteor,Knockout)么?
能講出他們各自的優點和缺點么?
§Underscore對哪些JS原生對象進行了擴展以及提供了哪些好用的函數方法?
§解釋JavaScript中的作用域與變數聲明提升?
§那些操作會造成內存泄漏?
§JQuery一個對象可以同時綁定多個事件，這是如何實現的?
§Node.js的適用場景?
§(如果會用node)知道route,middleware,cluster,nodemon,pm2,server-side
rendering么?
§解釋一下Backbone的MVC實現方式?
§什麼是「前端路由」?什麼時候適合使用「前端路由」?「前端路由」有哪些優點和缺點?
§知道什麼是webkit么?知道怎麼用瀏覽器的各種工具來調試和debug代碼么?
§如何測試前端代碼么?知道BDD,TDD,UnitTest么?知道怎麼測試你的前端工程么(mocha,sinon,jasmin,
qUnit..)?
§前端templating(Mustache,underscore,handlebars)是幹嘛的,怎麼用?
§簡述一下Handlebars的基本用法?
§簡述一下Handlerbars的對模板的基本處理流程，如何編譯的?如何緩存的?
§用js實現千位分隔符?(來源：前端農民工，提示：正則+replace)
§檢測瀏覽器版本版本有哪些方式?
§我們給一個dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡，你來說下會執行幾次事件，然後會先執行冒泡還是捕獲。
四、其他問題
§原來公司工作流程是怎麼樣的，如何與其他人協作的?如何誇部門合作的?
§你遇到過比較難的技術問題是?你是如何解決的?
§設計模式知道什麼是singleton,factory,strategy,decrator么?
§常使用的庫有哪些?常用的前端開發工具?開發過什麼應用或組件?
§頁面重構怎麼操作?
§列舉IE與其他瀏覽器不一樣的特性?
§99%的網站都需要被重構是那本書上寫的?
§什麼叫優雅降級和漸進增強?
§是否了解公鑰加密和私鑰加密。
§WEB應用從伺服器主動推送Data到客戶端有那些方式?
§對Node的優點和缺點提出了自己的看法?
§你有用過哪些前端性能優化的方法?
§http狀態碼有那些?分別代表是什麼意思?
§一個頁面從輸入URL到頁面載入顯示完成，這個過程中都發生了什麼?(流程說的越詳細越好)
§部分地區用戶反應網站很卡，請問有哪些可能性的原因，以及解決方法?
§從打開app到刷新出內容，整個過程中都發生了什麼，如果感覺慢，怎麼定位問題，怎麼解決?
§除了前端以外還了解什麼其它技術么?你最最厲害的技能是什麼?
§你用的得心應手用的熟練地編輯器&開發環境是什麼樣子?
§對前端界面工程師這個職位是怎麼樣理解的?它的前景會怎麼樣?
§你怎麼看待WebApp、hybridApp、NativeApp?
§你移動端前端開發的理解?(和Web前端開發的主要區別是什麼?)
§你對加班的看法?
§平時如何管理你的項目?
§說說最近最流行的一些東西吧?常去哪些網站?
§如何設計突發大規模並發架構?
§說說最近最流行的一些東西吧?常去哪些網站?
§是否了解開源的工具bower、npm、yeoman、grunt、gulp，一個npm的包里的package.json
具備的必要的欄位都有哪些?(名稱、版本號，依賴)
§每個模塊的代碼結構都應該比較簡單，且每個模塊之間的關系也應該非常清晰，隨著功能和迭代次數越來越多，你會如何去保持這個狀態的?
§Git知道branch,diff,merge么?
§如何設計突發大規模並發架構?
§當團隊人手不足，把功能代碼寫完已經需要加班的情況下，你會做前端代碼的測試嗎?
§說說最近最流行的一些東西吧?平時常去哪些網站?
§知道什麼是SEO並且怎麼優化么?知道各種metadata的含義么?
§移動端(AndroidIOS)怎麼做好用戶體驗?
§簡單描述一下你做過的移動APP項目研發流程?
§你在現在的團隊處於什麼樣的角色，起到了什麼明顯的作用?
§你認為怎樣才是全端工程師(FullStackdeveloper)?
§介紹一個你最得意的作品吧?
§你有自己的技術博客嗎，用了哪些技術?
§對前端安全有什麼看法?
§是否了解Web注入攻擊，說下原理，最常見的兩種攻擊(XSS和CSRF)了解到什麼程度?
§項目中遇到國哪些印象深刻的技術難題，具體是什麼問題，怎麼解決?。
§最近在學什麼東西?
§你的優點是什麼?缺點是什麼?
§如何管理前端團隊?
§最近在學什麼?能談談你未來3，5年給自己的規劃嗎?
§
以上就是小編今天為大家分享的關於web前端工程師面試題的文章，希望本篇文章能夠對正准備學習編程技術的小夥伴們有所幫助。想要了解更多web前端相關知識記得關注北大青鳥web前端培訓官網哦!最後希望小夥伴們能夠好好准備這些問題的答案，在面試中取得好成績，成為一名優秀的web前端工程師!
§
1.漸進增強與優雅降級
漸進增強
並不是一種技術，而是一種設計思想。各個瀏覽器的渲染能力各不相同，要做一個每個人都能看到的網頁、感受到的體驗都一致的網站幾乎不可能。但還是得網站的可訪問性，保證用戶在任何環境下都能正常訪問網頁得核心內容或能使用基本功能(避免網頁打不開、排版錯誤等)，並為他們提供當前條件下最好的體驗，這就是漸進增強得核心思想。
優雅降級也是一種設計思想，為了保證在高版本瀏覽器中提供最好的體驗，碰到低版本瀏覽器再降級進行兼容處理，使其能正常瀏覽。
這兩種思想的區別在於：
1.漸進增強是向上兼容，優雅降級是向下兼容;
2.漸進增強是從簡單到復雜，優雅降級是從復雜到簡單;
3.漸進增強關注的是內容(保證核心內容)，優雅降級關注的是瀏覽體驗(為了兼容低版本瀏覽器)
2.DOCTYPE
作用
DTD(DocumentTypeDefinition，文檔類型定義)是一系列的語法規則，用來定義XML或(X)HTML
的文檔類型。瀏覽器會使用它來判斷文檔類型，決定何種協議來解析，以及切換瀏覽模式。
DOCTYPE是用來聲明文檔類型和DTD
規范的，一個主要的用途便是文件的合法性驗證。如果文檔代碼不合法，那麼瀏覽器解析時便會出現一些差錯。
HTML5的文檔類型聲明：
HTML4.01Strict(HTML4.01嚴格模式)的DTD包含所有HTML
元素和屬性，但不包括展示性的和棄用的元素(如font)，它的文檔類型聲明：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
標准模式與怪異模式
怪異模式(Quirks
Mode)用於模擬舊瀏覽器的行為。早期的網站並不會遵循完整的規范，隨著瀏覽器支持越來越多的規范，在那些舊的瀏覽器中開發的頁面在顯示時會被破壞。為了向後兼容，瀏覽器發明了怪異模式，一行錯誤或無效的
DOCTYPE都會觸發怪異模式。
瀏覽器使用文件開頭的DOCTYPE來決定用怪異模式處理或標准模式處理。DOCTYPE
可以確保不同瀏覽器以相同的方式解析文檔，以及執行相同的渲染模式。
怪異模式與標准模式的主要區別：
1.怪異模式的寬度和高度會包含padding和border。標准模式不包含，標准模式下可以通過設置box-sizing:
border-box將標准盒模型轉化成怪異模式下的盒模型。
2.怪異模式下，當內容超出容器高度時，會將容器拉伸，而不是溢出。
3.怪異模式下，在表格中的字體樣式(如font-size)不會繼承。
4.怪異模式下顏色值必須使用十六進制標記法。
3.語義化
HTML5
中的語義化就是讓元素、屬性或屬性值有含義，更准確地標記特定類型的內容。對元素語義化的目的是為了讓元素的語義和呈現分離，元素只負責文檔內容的結構與含義，而CSS
樣式控制內容的呈現，像元素，沒有語義但卻能將字體變粗，這類元素違背了語義化的目的，將會被廢棄。
優點
·使得HTML文檔結構清晰、布局合理、主體突出、可讀性更強。
·有利於SEO，搜索引擎根據標簽來確定上下文和各個關鍵字的權重。
·方便其他設備解析，如盲人閱讀器根據語義渲染網頁。
·有利於開發和維護，語義化更具可讀性，代碼更好維護，與CSS3關系更和諧。
語義化標簽
·
·footer內容的頁腳，通常包含該章節作者、版權數據或者與文檔相關的鏈接等信息;
·article
文檔、頁面、應用或網站中的獨立結構，是可獨立分配的、可復用的結構，如在發布中，它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評論、互動式組件，或者其他獨立的內容項目;
·nav描述一個含有多個超鏈接的區域，該區域包含跳轉到其他頁面或頁面內部其他部分的鏈接列表;
·section表示文檔中的一個區域(或節)，比如，內容中的一個專題組;
·main定義文檔的主要內容，該內容在文檔中應當是獨一無二的，不包含任何在文檔中重復的內容，比如側邊欄，導航欄鏈接，版權信息，網站
logo，搜索框(搜索框作為文檔的主要內容);
·aside
表示一個和其餘頁面內容幾乎無關的部分，被認為是獨立於該內容的一部分且可以被單獨的拆分出來而不會影響整體。通常表現為側邊欄或嵌入內容。
4.超鏈接偽類
:link、:visited、:active和:hover的聲明順序是怎樣的?
:link表示未訪問的鏈接狀態;
:visited表示已訪問狀態;:active表示激活狀態(滑鼠按下);:hover表示懸停狀態。
推薦順序是LVHA，即:link:visited:hover:active。理由如下：
·當滑鼠懸停在未訪問的鏈接上時，:link和:hover都會命中，如果:hover在:link
之前聲明，那麼(:hover)就會被覆蓋;
·當滑鼠懸停在已訪問的連接上時，:visited和:hover都會命中，如果:hover在:visited
之前聲明，那麼(:hover)就會被覆蓋;
·當滑鼠單擊鏈接時，:active和:hover都會命中，我們大多是想讓:hover只在懸停時展示樣式，按下滑鼠時使用:active
樣式，因此:active在:hover之後聲明;
·綜上，:hover應在:link和:visited之後，在:active之前，因此active在最後。而:link和
:visited兩者的順序無所謂，互不影響。
5.CSS常見的長度單位
CSS中除了px長度單位之外，還有下面幾個長度單位：
·pc六分之一英寸，1pc=12pt=1/6*1in=16px;
·pt一磅，72分之一英寸。1pt=1/12_1pc=1/72_1in≈1.33px;
·in一英寸，1in=2.54cm=96px;
·ex在含有「X」字母的字體中，它是該字體的小寫字母的高度。對於很多字體來說，1ex≈0.5em;
·em1em等於父級元素的字體大小，2em就是父級元素字體大小的二倍;
·rem當用在根元素()的font-size上面時，它代表了它的初始值;
·ch代表元素所用字體font中「0」這一字形的寬度;
·vh1vh相當於視口高度的1%，100vh就是視口的高度;
·vw1vw相當於視口寬度的1%，100vw就是視口的寬度;
·vmax視口高度vw和寬度vh兩者中的最小值
·vmin視口高度vw和寬度vh兩種中的最大值;
·%相對於父級元素的大小來確定;
參考：CSS
CSSpercentage[2]
6.事件對象
冒泡與捕獲
事件冒泡與捕獲是事件處理的兩種機制，主要描述當在一個元素上有兩個相同類型的事件處理器被激活會發生什麼。
在點擊子元素時，瀏覽器運行了兩種不同的階段：捕獲階段和冒泡階段。捕獲階段的行為：
·瀏覽器檢查元素的最外層祖先，是否在捕獲階段中注冊了一個onclick事件處理程序，如果是，則運行它;
·
然後，它移動到中單擊元素的下一個祖先元素，並執行相同的操作，然後是單擊元素再下一個祖先元素，依此類推，直到到達實際點擊的元素;
而冒泡與捕獲恰恰相反：
·瀏覽器檢查實際點擊的元素是否在冒泡階段中注冊了一個onclick事件處理程序，如果是，則運行它;
·然後它移動到下一個直接的祖先元素，並做同樣的事情，然後是下一個，等等，直到它到達元素;
而現代瀏覽器在默認情況下，所有事件處理程序都在冒泡階段進行注冊。因此上面代碼在點擊子元素時會先執行子元素綁定的事件，然後向上冒泡，觸發父元素綁定的事件。
addEventListener函數的第三個參數是個布爾值。含義：
·當布爾值是false時(這也是默認值)，表示向上冒泡觸發事件;
·當布爾值是true時，表示向下捕獲觸發事件;
不能冒泡的事件
有些事件是不會冒泡的。比如：
·blur元素失去焦點時觸發，focusout事件也是失去焦點時觸發，但可以冒泡;
·focus元素獲取焦點時觸發;
·mouseenter滑鼠移動到元素上時會觸發該事件，與之對應的是mouseover事件，但會冒泡;
·mouseleave滑鼠離開元素時觸發，與之對應的是mouseout，但會冒泡;
事件冒泡可以讓我們利用事件委託，尤其是處理大量子元素時，如果給每個子元素都綁定事件，這是不優雅的，可以將事件綁定到父元素上，並讓子節點上發生的事件冒泡到父節點上，利用
e.target屬性可以獲取到當前觸發事件的子元素。
事件對象中的方法
·stopPropagation()阻止事件冒泡，當設置後，點擊該元素時父元素綁定的事件就不會再觸發;
·preventDefault()阻止默認事件的發生;
·stopImmediatePropagation()它用來阻止監聽同一事件的其他事件監聽器被調用以及阻止事件冒泡，比如給同一個div
元素綁定多個click事件(使用addEventListener方法可以注冊多個)，當在第二個事件函數中調用
stopImmediatePropagation方法時，點擊div元素時，後面注冊的click將不會被觸發，而且還會阻止事件冒泡;
比如下面的例子，給p綁定多個click事件，在第二個事件函數中調用stopImmediatePropagation，第三個click
事件就不會觸發，因為也阻止了冒泡，因此父元素的click事件也不會觸發。
讓我們一起來做一個頁面
首先，我們需要一個布局。
請使用CSS控制3個div，實現如下圖的布局。
第二部分：用javascript優化布局
由於我們的用戶群喜歡放大看頁面
於是我們給上一題的布局做一次優化。
當滑鼠略過某個區塊的時候，該區塊會放大25%，
並且其他的區塊仍然固定不動。
提示：
也許，我們其他的布局也會用到這個放大的效果哦。
可以使用任何開源代碼，包括曾經你自己寫的。
關鍵字：
javascript、封裝、復用
第三部分：處理緊急情況
好了，我們的頁面完成了。
於是我們將頁面發布上網。
突然，晴天霹靂，頁面無法訪問了，這時候，你會怎麼做？
第一題個人實現：
___
______body,_iv{margin:0;padding:0;}
______.fl{float:_eft;_isplay:_nline;}
______.bc_C{background-color:#CCC;}
______.h120{height:120px;}
______.h250{height:250px;}
______.w120{width:120px;}
______.w220{width:220px;}
______.t130{top:130px;}
______.pa{position:_bsolute;}
______.mr10{margin-right:10px;}
______.mb10{margin-bottom:10px;}
___
___
______