1.xhtml和html有什麼區別 HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言 最主要的不同： XHTML 元素必須被正確地嵌套。 XHTML 元素必須被關閉。 標簽名必須用小寫字母。 XHTML 文檔必須擁有根元素 2、簡述一下src與href的區別： href ...
1.xhtml和html有什麼區別
HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言
最主要的不同：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉。
標簽名必須用小寫字母。
XHTML 文檔必須擁有根元素
2、簡述一下src與href的區別：
href 是指向網路資源所在位置，建立和當前元素(錨點)或當前文檔(鏈接)之間的鏈接，用於超鏈接。
src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置;在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源載入、編譯、執行完畢，圖片和框架等元素也如此，類似於將所指向資源嵌入當前標簽內。這也是為什麼將js腳本放在底部而不是頭部。
3、行內元素有哪些?塊級元素有哪些? 空(void)元素有那些?
行內元素：a、b、span、img、input、strong、select、label、em、button、textarea
塊級元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系沒有內容的HTML元素，例如：br、meta、hr、link、input、img
4、 form中的action屬性和method屬性的含義是什麼？method常用值有哪些？
action屬性用於指定form表單提交的後臺程式地址；method屬性用於指定form表單提交的方法。
method的常用值有：get和post
5、 表單元素新增的屬性有哪些？
required： 必填項目
placeholder：提示信息，點擊input內容時會消失
pattern:校驗正則表達式
antofocus：自動獲得焦點
aotucomplete:自動完成
6.向指定伺服器提交數據的方法有哪些？
Ajax 表單Form
URL?參數
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、如何消除一個數組裡面重覆的元素?
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的區別
sessionStorage用於本地存儲一個會話(session)中的數據，這些數據只有在同一個會話中的頁面才能訪問並且當會話結束後數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。而localStorage用於持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。
web storage和cookie的區別
Web Storage的概念和cookie相似，區別是它是為了更大容量存儲設計的。Cookie的大小是受限的，並且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨域調用。
除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發者自己封裝setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是與伺服器進行交互，作為HTTP規範的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲”數據而生。
10、cookie和session的區別是什麼？
Cookie 保存在客戶端本機；
Session保存在伺服器端；
聯繫：session的id存在cookie中。
11.頁面導入樣式時，使用link和@import有什麼區別？
1）.link屬於XHTML標簽，而@import是CSS提供的；
2）.頁面被載入的時，link會同事被載入，而@import引用的CSS會等到頁面被載入完再載入；
3）.import只有在IE5以上才能被識別，而link是XHTML標簽，無相容問題;
4）.link 方式的樣式的權重>@import的權重
12.簡單描述下定位Position:
Relative:相對定位。相對於自身原有位置定位，原DOM空間會保留；
Absolute：絕對定位。相對於第一個非static定位的祖先元素進行定位，會刪除原DOM空間；
Fixed：固定定位器視窗進行定位； 會刪除DOM空間
Static： 預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right z-index 聲明）。
Inherit：規定從父元素繼承 position 屬性的值。
13.display有哪些值？說明他們的作用。
block 象塊類型元素一樣顯示。
none 預設值。象行內元素類型一樣顯示。
inline-block 象行內元素一樣顯示，但其內容象塊類型元素一樣顯示。
list-item 象塊類型元素一樣顯示，並添加樣式列表標記。
table 此元素會作為塊級表格來顯示
inherit 規定應該從父元素繼承 display 屬性的值
14、jquery中如何將數組轉化為json字元串，然後再轉化回來？
$.parseJSON
$.fn.stringify = function() {
return JSON.stringify(this);
}
使用：$(array).stringify();
15.JSON 的瞭解？
JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。
它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 占用帶寬小
如：{"age":"12", "name":"back"}
JSON字元串轉換為JSON對象:
var obj =eval('('+ str +')');
var obj = str.parseJSON();
var obj = JSON.parse(str);
JSON對象轉換為JSON字元串：
var last=obj.toJSONString();
var last=JSON.stringify(obj);
16、什麼是響應式設計？響應式設計的基本原理是什麼？
根據不同設備的屏幕大小、解析度、方向等，統一網站展示為不同效果。
移動優先。可以使用JS跳轉不同手機站和PC站，可以使用MediaQuery檢測不同設備的屬性展示不同的CSS，可以使用各種響應式前端框架。
優點：用戶體驗好，尤其是手機端。
缺點：包含大量冗餘代碼，開發成本較大(但是遠低於開發手機站+PC站的模式)
17. visibility：hidden和display：none的區別？
使用display：none隱藏以後，元素的空間被釋放，其餘元素可以占用空間；
使用visibility：hidden僅僅是看不見，但是元素的空間依然占據，別的元素無法使用。
18、 列舉數組相關的常用方法
push/pop, shift/unshift, split/join, slice/splice/concat, sort/reverse, map/reduce, forEach, filter
19、 列舉字元串相關的常用方法
indexOf/lastIndexOf/charAt, split/match/test, slice/substring/substr, toLowerCase/toUpperCase
20、常見的瀏覽器內核有哪些？
Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko內核：Netscape6及以上版本，FireFox（火狐）,MozillaSuite/SeaMonkey等
Presto內核：Opera7及以上。 [Opera內核原為：Presto，現為：Blink;]
Webkit內核：Safari（蘋果自帶的瀏覽器）,Chrome（谷歌）等。 [ Chrome的：Blink（WebKit的分支）]
21.title與h1的區別、b與strong的區別、i與em的區別？
title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取也有很大的影響；
strong是標明重點內容，有語氣加強的含義，使用閱讀設備閱讀網路時：<strong>會重讀，而<b>是展示強調內容。
i內容展示為斜體，em表示強調的文本；
22、網頁驗證碼是幹嘛的，是為瞭解決什麼安全問題。
區分用戶是電腦還是人的公共全自動程式。可以防止惡意破解密碼、刷票、論壇灌水；
有效防止黑客對某一個特定註冊用戶用特定程式暴力破解方式進行不斷的登陸嘗試。
23.對前端工程師這個職位你是怎麼樣理解的?
a. 前端是最貼近用戶的程式員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好
b. 參與項目，快速高質量完成實現效果圖，精確到1px;
c. 與團隊成員，UI設計，產品經理的溝通;
d. 做好的頁面結構，頁面重構和用戶體驗;
e. 處理hack，相容、寫出優美的代碼格式;
f. 針對伺服器的優化、擁抱最新前端技術。
24、什麼是閉包(closure),為什麼要用它？
閉包是指有權訪問另一個函數作用域中變數的函數，創建閉包的最常見的方式就是在一個函數內創建另一個函數，通過另一個函數訪問這個函數的局部變數,利用閉包可以突破作用鏈域，將函數內部的變數和方法傳遞到外部。可以把閉包簡單理解成“定義在一個函數內部的函數”
閉包的特性：
1.函數內再嵌套函數
2.內部函數可以引用外層的參數和變數
3.參數和變數不會被垃圾回收機制回收
//li節點的onclick事件都能正確的彈出當前被點擊的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是什麼？如何創建一個Ajax？
ajax全稱為：Asynchronous javascript and XML,即非同步的JavaScript和xml，也稱頁面無刷技術。這裡的非同步可以簡單的理解為：向伺服器發送請求的時候，我們不必等待結果，而是可以同時做其他的事情，等到有了結果它自己會根據設定進行後續操作，與此同時，頁面是不會發生整頁刷新的，提高了用戶體驗。
如何創建一個Ajax？
(1)創建XMLHttpRequest對象,也就是創建一個非同步調用對象
(2)創建一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息
(3)設置響應HTTP請求狀態變化的函數
(4)發送HTTP請求
(5)獲取非同步調用返回的數據
(6)使用JavaScript和DOM實現局部刷新
26.原生JS的window.onload與Jquery的$(document).ready(function(){})有什麼不同？如何用原生JS實現Jq的ready方法？
window.onload()方法是必須等到頁面內包括圖片的所有元素載入完畢後才能執行。
$(document).ready()是DOM結構繪製完畢後就執行，不必等到載入完畢。
27.（設計題）想實現一個對頁面某個節點的拖曳？如何做？（使用原生JS）
回答出概念即可，下麵是幾個要點
給需要拖拽的節點綁定mousedown, mousemove, mouseup事件
mousedown事件觸發後，開始拖拽
mousemove時，需要通過event.clientX和clientY獲取拖拽位置，並實時更新位置
mouseup時，拖拽結束
28、 apply, call和bind有什麼區別?
三者都可以把一個函數應用到其他對象上，註意不是自身對象．apply,call是直接執行函數調用，bind是綁定，執行需要再次調用．
apply和call的區別是apply接受數組作為參數，而call是接受逗號分隔的無限多個參數列表，
代碼演示
function Person() {
}
Person.prototype.sayName() { alert(this.name); }
var obj = {name: 'michaelqin'}; // 註意這是一個普通對象，它不是Person的實例
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需要先綁定，再執行
sn(param1, param2, param3); // bind需要先綁定，再執行
29、iframe有那些缺點？
*iframe會阻塞主頁面的Onload事件；
*搜索引擎的檢索程式無法解讀這種頁面，不利於SEO;
*iframe和主頁面共用連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的並行載入。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript
動態給iframe添加src屬性值，這樣可以繞開以上兩個問題。
30、如何解決ajax跨域問題？
jsonp、 iframe、window.name、window.postMessage、伺服器上設置代理頁面
自己的做法：
jQuery中ajax的使用
$.ajax({
dataType:’jsonp’
})
