1、 請寫出至少20個HTML5標簽

<article><aside>
<audio><video>
<canvas><datalist><command> <details><embed>
<figcaption><figure>
<footer><header><nav><section>
<hgroup><keygen>
<mark><time><summary>

2、 簡述jpg。Gif。png-8.png-24的區別，分別使用場景

　　gif、jpg、png格式的圖片在網站制作中的區別

　　Gif格式特點:
　　1.透明性,Gif是一種布爾透明類型，既它可以是全透明，也可以是全不透明，但是它並沒有半透明（alpha透明）。
　　2.動畫,Gif這種格式支持動畫。
　　3.無損耗性,Gif是一種無損耗的圖像格式，這也意味着你可以對gif圖片做任何操作也不會使得圖像質量產生損耗。
　　4.水平掃描,Gif是使用了一種叫作LZW的算法進行壓縮的，當壓縮gif的過程中，像素是由上到下水平壓縮的，這也意味着同等條件下，橫向的gif圖片比豎向的gif圖片更加小。例如500*10的圖片比10*500的圖片更加小
　　5.間隔漸進顯示,Gif支持可選擇性的間隔漸進顯示
　　由以上特點看出只有256種顏色的gif圖片不適合照片，但它適合對顏色要求不高的圖形（比如說圖標，圖表等），它並不是最優的選擇，我們會在后面中看到png是最優的選擇。
　　Jpeg格式特點:
　　1.透明性,它並不支持透明。
　　2.動畫,它也不支持動畫。
　　3.損耗性,除了一些比如說旋轉（僅僅是90、180、270度旋轉），裁切，從標准類型到先進類型，編輯圖片的原數據之外，所有其它操作對jpeg圖像的處理都會使得它的質量損失。所以我們在編輯過程一般用png作為過渡格式。
　　4.隔行漸進顯示,它支持隔行漸進顯示（但是ie瀏覽器並不支持這個屬性，但是ie會在整個圖像信息完全到達的時候顯示）。
　　由上可以看出Jpeg是最適web上面的攝影圖片和數字照相機中。
　　Png格式特點:
　　1.類型,Png這種圖片格式包括了許多子類，但是在實踐中大致可以分為256色的png和全色的png，你完成可以用256色的png代替gif，用全色的png代替jpeg
　　2.透明性,Png是完全支持alpha透明的（透明，半透明，不透明），盡管有兩個怪異的現象在ie6（下面詳細討論）
　　3.動畫,它不支持動畫
　　PNG圖片格式現在包含三種類型：
　　1.PNG8256色PNG的別名
　　2.PNG24全色PNG的別名
　　3.PNG32全色PNG的別名
　　基本上PNG32就是PNG24，但是附帶了全alpha通道。就是說每個像素上不僅存儲了24位真色彩信息還存儲了8位的alpha通道信息，就如同GIF能存儲透明和不透明信息一樣。當我們把圖片放到不太搭配的背景上的時候，透明PNG圖片的邊緣會顯示得更加平滑。
　　當然，我也知道你的想法，“但是Photoshop也能生成帶透明通道的PNG圖片！”我也知道，它只是表面上這么說是PNG24，讓我也產生困惑了。
　　作為一個傷感的Fireworks倡導者，我只使用PNG32支持附帶alpha通道的真色彩圖片。不管怎樣，如果你習慣使用Photoshop，你就應該知道，Photoshop在“存儲為WEB格式”中只提供PNG8和PNG24兩種PNG格式。
　　我敢肯定你經常會勾選“支持透明”選項，以獲得帶有透明度的PNG圖片，但是這樣你就獲取了一張PNG32圖片。——Photoshop只是覺得把PNG32這個名稱給隱藏掉了。奇怪吧？……
　　對png8的誤解
　　Png8的在ie中的怪異表現：
　　半透明的png8在ie6以下的瀏覽器顯示為全透明。
　　Alpha透明的全色PNG（png32）在ie6中會出現背景顏色（通常是灰色）。
　　由上面可以總結：
　　（a）全透明的png8可以在任一瀏覽器正常顯示（就像gif一樣）。半透明的png8在除了ie6及其以下的瀏覽器下錯誤的顯示成全透明，其它瀏覽器都能正常顯示半透明。這個bug並不需要特殊對待，因為在不支持半透明的瀏覽器下只是顯示為全透明，對用戶體驗影響不大，它反而是透明gif的加強版。
　　（b）第二個bug沒有什么好的方法解決，只能通過影響性能的方法AlphaImageLoader與需要加特殊標簽（VML）。
　　因此得出結論就是：請使用PNG8。
　　Png8的軟件問題：
　　Photoshop只能導出布爾透明的PNG8。
　　Fireworks既能導出布爾透明的PNG8，也能導出alpha透明的PNG8。

3、 能夠設置文本加粗的樣式屬性是什么

字體加粗（font-weight） 　　

功能：用於設置字體筆划的粗細。 　　

屬性值：正常度 - normal 　　

相對度 - bold, bolder, light, lighter 　　

漸變度 - 100, 200, 300, 400(相當於normal), 500, 600, 700(相當於 bold、 lighter、 bolder、以及數值100－900。 　　

語法為：h1 {font-weight: 屬性值}

4、 編寫一個布局，頁面寬度自適應，最小寬度300px，左邊定寬35%，右邊定寬65%

 1 <div class="container">
 2 <div class="left"></div>
 3 <div class="right"></div>
 4 </div>
 5 
 6 <style>
 7 .container {
 8     height: 600px;
 9     _width: 300px;
10     min-width: 300px;
11 }
12 .left {
13     width: 35%;
14     height: 100%;
15     background: #ff0;
16     float: left;
17 }
18 .right {
19     overflow: hidden;
20     width: 65%;
21     height: 100%;
22     background: #0f0;
23 }
24 </style>

5、 談談對html5的了解

（1）、良好的移動性，以移動設備為主。

（2）、響應式設計，以適應自動變化的屏幕尺寸

（3）、支持離線緩存技術，webStorage本地緩存

（4）、新增canvas，video，audio等新標簽元素。新特殊內容元素：article，footer，header，nav，section等，新的表單控件：calendar，date，time，email，url，search。

（5）、地理定位...

（6）、新增webSocket/webWork技術

6、 Js面向對象的幾種方式

（1）、對象的字面量 var obj = {}

（2）、創建實例對象 var obj = new Object();

（3）、構造函數模式 function fn(){} , new fn();

（4）、工廠模式：用一個函數，通過傳遞參數返回對象。function fn(params){var obj =new Object();obj.params = params; return obj;},fn(params);

（5）、原型模式：function clock(hour){} fn.prototype.hour = 0; new clock();

首先，每個函數都有一個prototype(原型)屬性，這個指針指向的就是clock.prototype對象。而這個原型對象在默認的時候有一個屬性constructor，指向clock，這個屬性可讀可寫。而當我們在實例化一個對象的時候，實例newClock除了具有構造函數定義的屬性和方法外（注意，只是構造函數中的）,還有一個指向構造函數的原型的指針，ECMAScript管他叫[[prototype]]，這樣實例化對象的時候，原型對象的方法並沒有在某個具體的實例中，因為原型沒有被實例。

7、前端頁面有哪三層構成，分別是什么，作用是什么

Css: 層疊樣式表 ,表現,  由css負責創建。css對“如何顯示有關內容”的問題做出了回答。

Html:超文本標記語言 ,結構,由 HTML 或 xhtml之類的標記語言負責創建。標簽，也就是那些出現在尖括號里的單詞，對網頁內容的語義含義做出了描述，但這些標簽不包含任何關於如何顯示有關內容的信息。例如，P標簽表達了這樣一種語義：“這是一個文本段。”

Js: 客戶端腳本語言 ,行為, 內容應該如何對事件做出反應。

8、 如何對網站的文件和資源進行優化

（1）、文件合並（目的是減少http請求）

（2）、文件壓縮 （目的是直接減少文件下載的體積）

（3）、使用cdn托管資源

（4）、使用緩存

（5）、gizp壓縮你的js和css文件

（6）、meta標簽優化（title,description,keywords）,heading標簽的優化,alt優化

（7）、反向鏈接，網站外鏈接優化。

9、 JQuery中有幾種類型的選擇器

（1）、層疊選擇器$(“form input”)
（2）、基本過濾選擇器:first:last:not()
（3）、內容過濾選擇器:odd:eq():animated
（4）、可視化過濾選擇器:hidden:visible
（5）、屬性過濾選擇器：div[id]
（6）、子元素過濾選擇器:first-child:last-child:only:child
（7）、表單元素過濾選擇器:enabled:disabled:checked:selected
（8）、id,類，類型,元素...

10、說幾條javasprit的基本規范

（1）、不要在同一行聲明多個變量。
（2）、請使用 ===/!==來比較true/false或者數值
（3）、使用對象字面量替代new Array這種形式
（4）、不要使用全局函數。
（5）、Switch語句必須帶有default分支
（6）、函數不應該有時候有返回值，有時候沒有返回值。
（7）、For循環必須使用大括號
（8）、If語句必須使用大括號
（9）、for-in循環中的變量 應該使用var關鍵字明確限定作用域，從而避免作用域污染。

11、 Html5中本地存儲概念是什么，有什么優點

cookie是網站為了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（通常經過加密）。

cookie數據始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務器間來回傳遞。

sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

存儲大小：

    cookie數據大小不能超過4k。

    sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。

有期時間：

    localStorage    存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據；

    sessionStorage  數據在當前瀏覽器窗口關閉后自動刪除。

    cookie          設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉

12、什么是ajax和json，它們的優缺點

ajax的全稱：Asynchronous Javascript And XML。

異步傳輸+js+xml。

所謂異步，在這里簡單地解釋就是：向服務器發送請求的時候，我們不必等待結果，而是可以同時做其他的事情，等到有了結果它自己會根據設定進行后續操作，與此同時，頁面是不會發生整頁刷新的，提高了用戶體驗。

(1)創建XMLHttpRequest對象,也就是創建一個異步調用對象

(2)創建一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息

(3)設置響應HTTP請求狀態變化的函數

(4)發送HTTP請求

(5)獲取異步調用返回的數據

(6)使用JavaScript和DOM實現局部刷新

13、 你知道那些針對jQuery的優化方法

基於Class的選擇性的性能相對於Id選擇器開銷很大，因為需遍歷所有DOM元素。

頻繁操作的DOM，先緩存起來再操作。用Jquery的鏈式調用更好。

比如：var str=$("a").attr("href");

for (var i = size; i < arr.length; i++) {}

for 循環每一次循環都查找了數組 (arr) 的.length 屬性，在開始循環的時候設置一個變量來存儲這個數字，可以讓循環跑得更快：

for (var i = size, length = arr.length; i < length; i++) {}

14、編寫一個方法求一個字符串的字節長度，假設：一個英文字符占用一個字節，一個中文字符占用兩個字節

 1 function num(str) {
 2     var num1 = str.length;
 3     var num2 = 0;
 4     for (var i = 0; i < str.length; i++) {
 5         if (str.charCodeAt(i) >= 10000) {
 6             num2++;
 7         }
 8     }
 9     console.log(num1 + num2)
10 }

15、簡述ECMASCRIPT6的新特性

1.增加塊作用域

2.增加let const

3.解構賦值

4.函數參數擴展 （函數參數可以使用默認值、不定參數以及拓展參數）

5.增加class類的支持

6.增加箭頭函數

7.增加模塊和模塊加載（ES6中開始支持原生模塊化啦）

8.math, number, string, array, object增加新的API

16、Apply和call方法的異同

相同點:兩個方法產生的作用是完全一樣的，第一個參數都是對象；

不同點:

call()方法參數將依次傳遞給借用的方法作參數，即fn.call(thisobj, arg1,arg2,arg3...argn)，有n個參數

apply()方法第一個參數是對象，第二個參數是數組fn.apply(thisobj,arg)，此處的arg是一個數組,只有兩個參數

 17、 為什么利用多個域名來提供網站資源會更有效？

（1）、突破瀏覽器的並發限制（瀏覽器同一域名最大的並發請求數量為6個，ie6為2個）
（2）、節約cookie帶寬
（3）、CDN緩存更方便
（4）、防止不必要的安全問題（尤其是cookie的隔離尤為重要）
（5）、節約主機域名連接數，優化頁面響應速度

18、身為以為web前端工程師，你肯定知道現在最流行的前端技術吧，有那些？

Vuejs2.0/Angular2.0/React Native /es6//Nodejs

http2

gulp/webpack

19、 你如何從瀏覽器的URL中獲取參數信息

瀏覽器宿主環境中，有一個location對象，同時這個對象也是window對象和document對象的屬性。

location對象中提供了與當前窗口加載的文檔有關的的信息，即URL信息。

如 https://www.baidu.com/api/sousu?search=baidu&id=123#2

location.href: 完整URL

location.protocol: 返回協議（https:）

location.host: 返回服務器名稱和端口號（www.baidu.com）

location.hostname: 返回服務器名稱（www.baidu.com）

location.port:返回服務器端口號（http默認80，https默認443）

location.pathname:返回URL中的目錄和文件名（api/sousu）

location.search:返回查詢字符串（?search=baidu&id=123#2）

location.hash:返回hash值（#2）

20、 請戳出ie6/7下特有的cssbug

（1）、li邊距“無故” 增加

設置ul的顯示形式為*display:inline-block;即可，前面加*是只 針對IE6/IE7有效

（2）、IE6 不支持min-height屬性，但它卻認為height就是最小高度

使用ie6不支持但其余瀏覽器支持的屬性!important。

（3）、Overflow:

在IE6/7中，overflow無法正確的隱藏有相對定位position:relative;的子元素。解決方法就是給外包容器.wrap加上position:relative;。

（4）、border：none 在IE6不起作用： 寫成border：0 就可以了，

（5）、100%高度

在IE6下，如果要給元素定義100%高度，必須要明確定義它的父級元素的高度，如果你需要給元素定義滿屏的高度，就得先給html和body定義 height:100%;。

（6）、雙邊距 Bug

當元素浮動時，IE6會錯誤的的把浮動方式的margin值雙倍計算，給float的元素添加一個display：inline

（7）、躲貓貓bug

些定義了:hover的鏈接，當鼠標移到那些鏈接上時，在IE6下就會觸發躲貓貓。
1.在（那個未浮動的）內容之后添加一個<span style=”clear: both;”></span>
2.觸發包含了這些鏈接的容器的hasLayout，一個簡單的方法就是給其定義height:1%;

（8）、IE6 絕對定位的元素1px 間距bug

當絕對定位的父元素或寬度為奇數時，bottom和right會多出現1px，

解決方案，針對IE6進行hack處理

 

***如果感覺有一點點收獲得話，請幫忙點下推薦！！！