1.xhtml和html有什么區(qū)別

HTML是一種基本的WEB網(wǎng)頁設(shè)計語言，XHTML是一個基于XML的置標(biāo)語言

最主要的不同：

XHTML 元素必須被正確地嵌套。

XHTML 元素必須被關(guān)閉。

標(biāo)簽名必須用小寫字母。

XHTML 文檔必須擁有根元素

2、簡述一下src與href的區(qū)別：

href 是指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素(錨點(diǎn))或當(dāng)前文檔(鏈接)之間的鏈接，用于超鏈接。

src是指向外部資源的位置，指向的內(nèi)容將會嵌入到文檔中當(dāng)前標(biāo)簽所在位置;在請求src資源時會將其指向的資源下載并應(yīng)用到文檔內(nèi)，例如js腳本，img圖片和frame等元素。當(dāng)瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)。這也是為什么將js腳本放在底部而不是頭部。

3、行內(nèi)元素有哪些?塊級元素有哪些? 空(void)元素有那些?

行內(nèi)元素：a、b、span、img、input、strong、select、label、em、button、textarea

塊級元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素：即系沒有內(nèi)容的HTML元素，例如：br、meta、hr、link、input、img

4、 form中的action屬性和method屬性的含義是什么？method常用值有哪些？

action屬性用于指定form表單提交的后臺程序地址；method屬性用于指定form表單提交的方法。

method的常用值有：get和post

5、 表單元素新增的屬性有哪些？

required： 必填項目

placeholder：提示信息，點(diǎn)擊input內(nèi)容時會消失

pattern:校驗正則表達(dá)式

antofocus：自動獲得焦點(diǎn)

aotucomplete:自動完成

6.向指定服務(wù)器提交數(shù)據(jù)的方法有哪些？

Ajax 表單Form

URL?參數(shù)

AngularJS的$HTTP

JQ Ajax: $.POST(,,) $.GET(,,) $.Ajax({})

JS Ajax: 5步。(參考25題)

7、寫一個function，清除字符串前后的空格。(兼容所有瀏覽器)

function trim(str) {

if (str && typeof str === "string") {

return str.replace(/(^s*)|(s*)$/g,""); //去除前后空白符

}

}

8、如何消除一個數(shù)組里面重復(fù)的元素?

var arr1 =[1,2,2,2,3,3,3,4,5,6],

var arr2 = [ ];

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

if(arr2.indexOf(arr1[i]) < 0){

arr2.push(arr1[i]);

}

}

document.write(arr2); // 1,2,3,4,5,6

9、請描述一下cookies，sessionStorage和localStorage的區(qū)別

sessionStorage用于本地存儲一個會話(session)中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當(dāng)會話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。而localStorage用于持久化的本地存儲，除非主動刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會過期的。

web storage和cookie的區(qū)別

Web Storage的概念和cookie相似，區(qū)別是它是為了更大容量存儲設(shè)計的。Cookie的大小是受限的，并且每次你請求一個新的頁面的時候Cookie都會被發(fā)送過去，這樣無形中浪費(fèi)了帶寬，另外cookie還需要指定作用域，不可以跨域調(diào)用。

除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發(fā)者自己封裝setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是與服務(wù)器進(jìn)行交互，作為HTTP規(guī)范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲”數(shù)據(jù)而生。

10、cookie和session的區(qū)別是什么？

Cookie 保存在客戶端本機(jī)；

Session保存在服務(wù)器端；

聯(lián)系：session的id存在cookie中。

11.頁面導(dǎo)入樣式時，使用link和@import有什么區(qū)別？

1）.link屬于XHTML標(biāo)簽，而@import是CSS提供的；

2）.頁面被加載的時，link會同事被加載，而@import引用的CSS會等到頁面被加載完再加載；

3）.import只有在IE5以上才能被識別，而link是XHTML標(biāo)簽，無兼容問題;

4）.link 方式的樣式的權(quán)重>@import的權(quán)重

12.簡單描述下定位Position:

Relative:相對定位。相對于自身原有位置定位，原DOM空間會保留；

Absolute：絕對定位。相對于第一個非static定位的祖先元素進(jìn)行定位，會刪除原DOM空間；

Fixed：固定定位器窗口進(jìn)行定位； 會刪除DOM空間

Static： 默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right z-index 聲明）。

Inherit：規(guī)定從父元素繼承 position 屬性的值。

13.display有哪些值？說明他們的作用。

block 象塊類型元素一樣顯示。

none 缺省值。象行內(nèi)元素類型一樣顯示。

inline-block 象行內(nèi)元素一樣顯示，但其內(nèi)容象塊類型元素一樣顯示。

list-item 象塊類型元素一樣顯示，并添加樣式列表標(biāo)記。

table 此元素會作為塊級表格來顯示

inherit 規(guī)定應(yīng)該從父元素繼承 display 屬性的值

14、jquery中如何將數(shù)組轉(zhuǎn)化為json字符串，然后再轉(zhuǎn)化回來？

$.parseJSON

$.fn.stringify = function() {

return JSON.stringify(this);

}

使用：$(array).stringify();

15.JSON 的了解？

JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式。

它是基于JavaScript的一個子集。數(shù)據(jù)格式簡單, 易于讀寫, 占用帶寬小

如：{"age":"12", "name":"back"}

JSON字符串轉(zhuǎn)換為JSON對象:

var obj =eval('('+ str +')');

var obj = str.parseJSON();

var obj = JSON.parse(str);

JSON對象轉(zhuǎn)換為JSON字符串：

var last=obj.toJSONString();

var last=JSON.stringify(obj);

16、什么是響應(yīng)式設(shè)計？響應(yīng)式設(shè)計的基本原理是什么？

根據(jù)不同設(shè)備的屏幕大小、分辨率、方向等，統(tǒng)一網(wǎng)站展示為不同效果。

移動優(yōu)先?？梢允褂?/span>JS跳轉(zhuǎn)不同手機(jī)站和PC站，可以使用MediaQuery檢測不同設(shè)備的屬性展示不同的CSS，可以使用各種響應(yīng)式前端框架。

優(yōu)點(diǎn)：用戶體驗好，尤其是手機(jī)端。

缺點(diǎn)：包含大量冗余代碼，開發(fā)成本較大(但是遠(yuǎn)低于開發(fā)手機(jī)站+PC站的模式)

17. visibility：hidden和display：none的區(qū)別？

使用display：none隱藏以后，元素的空間被釋放，其余元素可以占用空間；

使用visibility：hidden僅僅是看不見，但是元素的空間依然占據(jù)，別的元素?zé)o法使用。

18、 列舉數(shù)組相關(guān)的常用方法

push/pop, shift/unshift, split/join, slice/splice/concat, sort/reverse, map/reduce, forEach, filter

19、 列舉字符串相關(guān)的常用方法

indexOf/lastIndexOf/charAt, split/match/test, slice/substring/substr, toLowerCase/toUpperCase

20、常見的瀏覽器內(nèi)核有哪些？

Trident內(nèi)核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]

Gecko內(nèi)核：Netscape6及以上版本，FireFox（火狐）,MozillaSuite/SeaMonkey等

Presto內(nèi)核：Opera7及以上。 [Opera內(nèi)核原為：Presto，現(xiàn)為：Blink;]

Webkit內(nèi)核：Safari（蘋果自帶的瀏覽器）,Chrome（谷歌）等。 [ Chrome的：Blink（WebKit的分支）]

21.title與h1的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別？

title屬性沒有明確意義只表示是個標(biāo)題，H1則表示層次明確的標(biāo)題，對頁面信息的抓取也有很大的影響；

strong是標(biāo)明重點(diǎn)內(nèi)容，有語氣加強(qiáng)的含義，使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時：<strong>會重讀，而<b>是展示強(qiáng)調(diào)內(nèi)容。

i內(nèi)容展示為斜體，em表示強(qiáng)調(diào)的文本；

22、網(wǎng)頁驗證碼是干嘛的，是為了解決什么安全問題。

區(qū)分用戶是計算機(jī)還是人的公共全自動程序?？梢苑乐箰阂馄平饷艽a、刷票、論壇灌水；

有效防止黑客對某一個特定注冊用戶用特定程序暴力破解方式進(jìn)行不斷的登陸嘗試。

23.對前端工程師這個職位你是怎么樣理解的?

a. 前端是最貼近用戶的程序員，前端的能力就是能讓產(chǎn)品從 90分進(jìn)化到 100 分，甚至更好

b. 參與項目，快速高質(zhì)量完成實(shí)現(xiàn)效果圖，精確到1px;

c. 與團(tuán)隊成員，UI設(shè)計，產(chǎn)品經(jīng)理的溝通;

d. 做好的頁面結(jié)構(gòu)，頁面重構(gòu)和用戶體驗;

e. 處理hack，兼容、寫出優(yōu)美的代碼格式;

f. 針對服務(wù)器的優(yōu)化、擁抱最新前端技術(shù)。

24、什么是閉包(closure),為什么要用它？

閉包是指有權(quán)訪問另一個函數(shù)作用域中變量的函數(shù)，創(chuàng)建閉包的最常見的方式就是在一個函數(shù)內(nèi)創(chuàng)建另一個函數(shù)，通過另一個函數(shù)訪問這個函數(shù)的局部變量,利用閉包可以突破作用鏈域，將函數(shù)內(nèi)部的變量和方法傳遞到外部?？梢园验]包簡單理解成“定義在一個函數(shù)內(nèi)部的函數(shù)”

閉包的特性：

1.函數(shù)內(nèi)再嵌套函數(shù)

2.內(nèi)部函數(shù)可以引用外層的參數(shù)和變量

3.參數(shù)和變量不會被垃圾回收機(jī)制回收

//li節(jié)點(diǎn)的onclick事件都能正確的彈出當(dāng)前被點(diǎn)擊的li索引

<ul id="test">

<li> index = 0</li>

<li> index = 1</li>

<li> index = 2</li>

<li> index = 3</li>

</ul>

<script type="text/javascript">

var nodes = document.getElementsByTagName("li");

for(i = 0;i<nodes.length;i+= 1){

nodes[i].onclick = function(){

console.log(i+1); //不用閉包的話，值每次都是4

}(i);

}

</script>

25、Ajax是什么？如何創(chuàng)建一個Ajax？

ajax全稱為：Asynchronous javascript and XML,即異步的JavaScript和xml，也稱頁面無刷技術(shù)。這里的異步可以簡單的理解為：向服務(wù)器發(fā)送請求的時候，我們不必等待結(jié)果，而是可以同時做其他的事情，等到有了結(jié)果它自己會根據(jù)設(shè)定進(jìn)行后續(xù)操作，與此同時，頁面是不會發(fā)生整頁刷新的，提高了用戶體驗。

如何創(chuàng)建一個Ajax？

(1)創(chuàng)建XMLHttpRequest對象,也就是創(chuàng)建一個異步調(diào)用對象

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

(3)設(shè)置響應(yīng)HTTP請求狀態(tài)變化的函數(shù)

(4)發(fā)送HTTP請求

(5)獲取異步調(diào)用返回的數(shù)據(jù)

(6)使用JavaScript和DOM實(shí)現(xiàn)局部刷新

26.原生JS的window.onload與Jquery的$(document).ready(function(){})有什么不同？如何用原生JS實(shí)現(xiàn)Jq的ready方法？

window.onload()方法是必須等到頁面內(nèi)包括圖片的所有元素加載完畢后才能執(zhí)行。

$(document).ready()是DOM結(jié)構(gòu)繪制完畢后就執(zhí)行，不必等到加載完畢。

27.（設(shè)計題）想實(shí)現(xiàn)一個對頁面某個節(jié)點(diǎn)的拖曳？如何做？（使用原生JS）

回答出概念即可，下面是幾個要點(diǎn)

給需要拖拽的節(jié)點(diǎn)綁定mousedown, mousemove, mouseup事件

mousedown事件觸發(fā)后，開始拖拽

mousemove時，需要通過event.clientX和clientY獲取拖拽位置，并實(shí)時更新位置

mouseup時，拖拽結(jié)束

28、 apply, call和bind有什么區(qū)別?

三者都可以把一個函數(shù)應(yīng)用到其他對象上，注意不是自身對象．apply,call是直接執(zhí)行函數(shù)調(diào)用，bind是綁定，執(zhí)行需要再次調(diào)用．

apply和call的區(qū)別是apply接受數(shù)組作為參數(shù)，而call是接受逗號分隔的無限多個參數(shù)列表，

代碼演示

   function Person() {      }      Person.prototype.sayName() { alert(this.name); }      var obj = {name: 'michaelqin'}; // 注意這是一個普通對象，它不是Person的實(shí)例      1) apply      Person.prototype.sayName.apply(obj, [param1, param2, param3]);      2) call      Person.prototype.sayName.call(obj, param1, param2, param3);      3) bind      var sn = Person.prototype.sayName.bind(obj);          sn([param1, param2, param3]); // bind需要先綁定，再執(zhí)行      sn(param1, param2, param3); // bind需要先綁定，再執(zhí)行

29、iframe有那些缺點(diǎn)？

*iframe會阻塞主頁面的Onload事件；

*搜索引擎的檢索程序無法解讀這種頁面，不利于SEO;

*iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。

使用iframe之前需要考慮這兩個缺點(diǎn)。如果需要使用iframe，最好是通過javascript

動態(tài)給iframe添加src屬性值，這樣可以繞開以上兩個問題。

30、如何解決ajax跨域問題？

jsonp、 iframe、window.name、window.postMessage、服務(wù)器上設(shè)置代理頁面

自己的做法：

jQuery中ajax的使用

$.ajax({

dataType:’jsonp’

})