一年工作經(jīng)驗(yàn)……
HTML篇：
1. doctype是什么？有哪些類型？
doctype用于聲明文檔類型；
HTML4的doctype有三種：過渡的（不嚴(yán)格）//嚴(yán)格的（不允許使用任何表現(xiàn)層的表示和屬性）//框架的
2.input有哪些新類型？簡要說明其用法。
email || url || number || range || Date || pickers (date, month, week, time, datetime, datetime-local) || search || color
==大多數(shù)瀏覽器不支持==
3.html5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？
新特性
canvas
video和audio標(biāo)簽
本地存儲(chǔ)：localStorage和sessionStorage
語義化：article、footer、header、nav、section
表單控件新類型
地理定位Geolocation
移除的元素
big/center/tt/u/s/frame/frameset/noframes
解決兼容性
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
區(qū)分HTML4.0和HTML5
DOCTYPE聲明\新增的結(jié)構(gòu)元素\功能元素
4.bootstrap響應(yīng)式的實(shí)現(xiàn)原理是什么？
百分比和媒體查詢
5.多終端頁面適配是怎樣實(shí)現(xiàn)的？
1.使用淘寶的rem.js，基本原理是根據(jù)通過dpr設(shè)置縮放比，實(shí)現(xiàn)布局視口大小，然后通過js動(dòng)態(tài)計(jì)算font-size
2.根據(jù)設(shè)計(jì)稿的大小，設(shè)置一個(gè)參考值計(jì)算font-size
CSS篇：
1.實(shí)現(xiàn)兩列布局，左邊自適應(yīng)，右邊固定寬度
網(wǎng)上有很多種方法，我只嘗試了一種：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>removeProp demo</title>
<style>
*{margin:0; padding:0;}
html,body{height:100%;width:100%;overflow: hidden;}
div{height:100%;position:absolute;}
.box1{width:300px;background: pink;}
.box2{width:100%;background: #0f0;left:300px;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
2.用css畫一個(gè)三角形
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>triangle</title>
<style>
.box1{
width:0;
height:0;
border:50px solid rgba(0,0,0,0);
border-bottom-color:#f00;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
3.css實(shí)現(xiàn)字體大寫
<html>
<head>
<style type="text/css">
p.uppercase {text-transform: uppercase};//大寫
p.lowercase {text-transform: lowercase};//小寫
p.capitalize {text-transform: capitalize};//首字母大寫
</style>
</head>
<body>
<p class="uppercase">This is some text in a paragraph.</p>
<p class="lowercase">This is some text in a paragraph.</p>
<p class="capitalize">This is some text in a paragraph.</p>
</body>
</html>
4.display有哪些常用屬性值，各是什么意思？
block:顯示為塊級(jí)元素（塊級(jí)元素和行內(nèi)元素的區(qū)別略）
inline-block || inline || none || flex || grid
5.position為absolute、relative、fixed的定點(diǎn)位置。
absolute：相對與除了static定位的父集元素;
relative：相對于自身原來的起點(diǎn)位置;
fixed：相對于可視窗口
6.用三種方法清除浮動(dòng)
1.在父級(jí)末尾添加空div，并設(shè)css樣式clear:both;
2.父級(jí)使用偽類after,具體如下：
el:after{
content:"";
height:0;
position:absolute;
clear:both;
display:block;
}
el{
zoom:1;//兼容IE
}
3.父級(jí)設(shè)置height
Javascript篇：
1.什么是事件捕獲和冒泡？如何阻止事件冒泡？（js原生和jQuery兩種）
2.js創(chuàng)建對象，至少用三種方式實(shí)現(xiàn)。
3.簡述一下事件穿透，及解決辦法。
4.用三種方式判斷變量類型是否是數(shù)組
5.怎樣實(shí)現(xiàn)對象的拷貝？（ES5）
var cloneObj = function (obj) {
var newObj = {};
if (obj instanceof Array) {
newObj = [];
}
for (var key in obj) {
var val = obj[key];
//newObj[key] = typeof val === 'object' ? arguments.callee(val) : val; //arguments.callee 在哪一個(gè)函數(shù)中運(yùn)行，它就代表哪個(gè)函數(shù), 一般用在匿名函數(shù)中。
newObj[key] = typeof val === 'object' ? cloneObj(val): val;
}
return newObj;
};
6.什么是閉包？閉包有何優(yōu)缺點(diǎn)？
7.簡述一下new一個(gè)構(gòu)造函數(shù)的過程。
8.簡述一下ajax請求過程
9.為什么會(huì)有跨域？怎么實(shí)現(xiàn)的？簡述一下實(shí)現(xiàn)原理。
10.js的原始數(shù)據(jù)類型有哪些？
string , boolean , number , null , undefined
11.寫一個(gè)函數(shù)，判斷一個(gè)變量是否是字符串(一種數(shù)據(jù)類型)。
typeof str != "string" && str.constructor != String
12.以下代碼有否正確？如不正確，請改正
f = function(){return true;}
g = function(){return false;}
(function(){
if(g()&&[]==![]){
f = function f(){return false;}
function g(){return true;} }
})();
console.log(f());//true or false?
13.typeof有哪幾種結(jié)果？
string || number|| undefined || boolean || function|| object
14.箭頭函數(shù)和普通函數(shù)有什么區(qū)別？
1.箭頭函數(shù)沒有綁定this指針，普通函數(shù)的this指向調(diào)用函數(shù)的對象（匿名函數(shù)的this都指向全局window對象）;
2.箭頭函數(shù)沒有構(gòu)造器
15.請用三種方法實(shí)現(xiàn)數(shù)組去重
1.使用空對象，將數(shù)組元素作為對象key值，出現(xiàn)次數(shù)作為value值，循環(huán)數(shù)組
2.使用ES6的Set類型，[...new Set([1,2,3,2,3,1,4,5])];//[1,2,3,4,5];
3.普通的for循環(huán)，循環(huán)之前排序，會(huì)高效一點(diǎn)點(diǎn)
16.檢測一個(gè)對象是否有prop屬性，沒有就拋出異常，有的話返回true，并刪掉該屬性
var o = {
age:10,
prop:"prop"
}
function hasProperty(pro,obj){
if(obj.hasOwnProperty(pro)){
delete obj.prop;
}else{
throw new Error("沒有該屬性");
}
}
hasProperty("prop",o)
console.log(o)
17.href和src有什么區(qū)別？
href是文檔之間的跳轉(zhuǎn)
src是資源的引用，將指定資源插入到src所在的位置
jQuery篇：
1.attr()和prop()的區(qū)別？
對于HTML元素本身就帶有的固有屬性，在處理時(shí)，使用prop方法。
對于HTML元素我們自己自定義的DOM屬性，在處理時(shí)，使用attr方法。
具有 true 和 false 兩個(gè)屬性的屬性，如 checked, selected 或者 disabled 使用prop()
典型應(yīng)用：用checkbox類型實(shí)現(xiàn)radio的功能，有興趣的話可以實(shí)驗(yàn)一把
<body>
<div class="checkBox">
<input type="checkbox" />1
<input type="checkbox" />2
<input type="checkbox" />3
<input type="checkbox" />4
</div>
<script type="text/javascript">
$(":checkbox").click(function(){
if($(this).prop("checked")!=undefined) {
$(this).prop("checked",true).siblings().prop("checked",false);
}
})
</script>
2.on和bind有什么區(qū)別？js動(dòng)態(tài)添加的DOM元素，用on還是bind綁定？
bind現(xiàn)在基本已經(jīng)被棄用，不做討論
on常用于事件委托，如：
$(el).on("click","subel1,subel2",function(){});
之后動(dòng)態(tài)添加的el的同類型子元素自動(dòng)被綁上此事件?。?！
3.touch和click有何區(qū)別？
touch有延遲，等待是否雙擊事件
4.window.onload和jQuery的ready有什么區(qū)別？
略！
Vue篇：
1.簡述一下Vue的生命周期及其特點(diǎn)
2.Vue的雙向綁定原理是什么？
3.Vue的特點(diǎn)有哪些？和jQuery有何區(qū)別？
4.父子組件之間傳遞數(shù)據(jù)的方法
5.子組件之間如何共享數(shù)據(jù)
Vuex
6.一般用什么工具進(jìn)行數(shù)據(jù)交互？
7.webpack原理是什么？
8.簡述一下$nextTick的用法
瀏覽器篇：
1.有用過瀏覽器緩存嗎？請介紹一下基本的緩存機(jī)制。
瀏覽器緩存有兩種：強(qiáng)緩存和協(xié)商緩存，強(qiáng)緩存類型不會(huì)發(fā)送請求到服務(wù)器，協(xié)商緩存會(huì)發(fā)送請求到服務(wù)器，但不會(huì)請求新的響應(yīng)數(shù)據(jù)；
js禁止緩存：設(shè)置請求頭 // 在鏈接后手動(dòng)添加隨機(jī)數(shù)
2.cookie，sessionStorage，localStorage的區(qū)別是什么？
兼容性問題篇：
1.key up,key down,key press在不同瀏覽器下有何不同？
主要是瀏覽器兼容性問題
2.請介紹一下margin “塌陷”問題。
網(wǎng)絡(luò)篇：
1.url請求所經(jīng)歷的過程有哪些？
判斷請求類型，是否用緩存，是否是異步數(shù)據(jù)交互等幾種情況，
詳見https://blog.csdn.net/u014600626/article/details/78720763
2.從服務(wù)器端安全考慮，請求方式用get還是post？
get！！ 因?yàn)間et方式是查詢操作，而post可能會(huì)惡意修改數(shù)據(jù)
