HTML相關(guān)問(wèn)題
1.XHTML和HTML有什么區(qū)別
HTML是一種基本的WEB網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言，XHTML是一個(gè)基于XML的置標(biāo)語(yǔ)言
最主要的不同：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關(guān)閉。
標(biāo)簽名必須用小寫(xiě)字母。
XHTML 文檔必須擁有根元素。
2.什么是語(yǔ)義化的HTML?
直觀的認(rèn)識(shí)標(biāo)簽 對(duì)于搜索引擎的抓取有好處，用正確的標(biāo)簽做正確的事情！
html語(yǔ)義化就是讓頁(yè)面的內(nèi)容結(jié)構(gòu)化，便于對(duì)瀏覽器、搜索引擎解析；
在沒(méi)有樣式CCS情況下也以一種文檔格式顯示，并且是容易閱讀的。搜索引擎的爬蟲(chóng)依賴(lài)于標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于 SEO。
使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。
3.常見(jiàn)的瀏覽器內(nèi)核有哪些？
Trident內(nèi)核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱(chēng)MSHTML]Gecko內(nèi)核：Netscape6及以上版本，F(xiàn)F,MozillaSuite/SeaMonkey等
Presto內(nèi)核：Opera7及以上。? ?? ?[Opera內(nèi)核原為：Presto，現(xiàn)為：Blink;]Webkit內(nèi)核：Safari,Chrome等。? ?[ Chrome的：Blink（WebKit的分支）]
4.HTML5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題？如何區(qū)分 HTML 和HTML5？
HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能的增加。
繪畫(huà) canvas
用于媒介回放的 video 和 audio 元素
本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；
sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除
語(yǔ)意化更好的內(nèi)容元素，比如 article、footer、header、nav、section
表單控件，calendar、date、time、email、url、search
新的技術(shù)webworker, websockt, Geolocation
移除的元素
純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u；
對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；
支持HTML5新標(biāo)簽：
IE8/IE7/IE6支持通過(guò)document.createElement方法產(chǎn)生的標(biāo)簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，
瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式：
5.請(qǐng)描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？
cookie在瀏覽器和服務(wù)器間來(lái)回傳遞。 sessionStorage和localStorage不會(huì)
sessionStorage和localStorage的存儲(chǔ)空間更大；
sessionStorage和localStorage有更多豐富易用的接口；
sessionStorage和localStorage各自獨(dú)立的存儲(chǔ)空間；
6.如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信?
調(diào)用localstorge、cookies等本地存儲(chǔ)方式
7.HTML5 為什么只需要寫(xiě) !DOCTYPE HTML？
HTML5 不基于 SGML，因此不需要對(duì)DTD進(jìn)行引用，但是需要doctype來(lái)規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來(lái)運(yùn)行）；而HTML4.01基于SGML,所以需要對(duì)DTD進(jìn)行引用，才能告知瀏覽器文檔所使用的文檔類(lèi)型。
8.Doctype作用？標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?
!DOCTYPE聲明位于位于HTML文檔中的第一行，處于html 標(biāo)簽之前。告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔。DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以兼容模式呈現(xiàn)。
標(biāo)準(zhǔn)模式的排版 和JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。在兼容模式中，頁(yè)面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作。
9.Doctype? 嚴(yán)格模式與混雜模式-如何觸發(fā)這兩種模式，區(qū)分它們有何意義?
用于聲明文檔使用那種規(guī)范（html/Xhtml）一般為 嚴(yán)格 過(guò)度 基于框架的html文檔。
加入XMl聲明可觸發(fā)，解析方式更改為IE5.5 擁有IE5.5的Bug。
10.請(qǐng)描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？
cookie在瀏覽器和服務(wù)器間來(lái)回傳遞。 sessionStorage和localStorage不會(huì)
sessionStorage和localStorage的存儲(chǔ)空間更大；
sessionStorage和localStorage有更多豐富易用的接口；
sessionStorage和localStorage各自獨(dú)立的存儲(chǔ)空間；
11.如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信?
調(diào)用localstorge、cookies等本地存儲(chǔ)方式
CSS相關(guān)問(wèn)題
1.CSS實(shí)現(xiàn)垂直水平居中
一道經(jīng)典的問(wèn)題，實(shí)現(xiàn)方法有很多種，以下是其中一種實(shí)現(xiàn)：
HTML結(jié)構(gòu)：
CSS：
.wrapper{position:relative;}
.content{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute;? ?? ???//父元素需要相對(duì)定位
top: 50%;
left: 50%;
margin-top:-100px ;? ?//二分之一的height，width
margin-left: -100px;
}
2.display有哪些值？說(shuō)明他們的作用。
block? ?? ?? ?塊類(lèi)型。默認(rèn)寬度為父元素寬度，可設(shè)置寬高，換行顯示。
none? ?? ?? ? 缺省值。象行內(nèi)元素類(lèi)型一樣顯示。
inline? ?? ???行內(nèi)元素類(lèi)型。默認(rèn)寬度為內(nèi)容寬度，不可設(shè)置寬高，同行顯示。
inline-block??默認(rèn)寬度為內(nèi)容寬度，可以設(shè)置寬高，同行顯示。
list-item? ???象塊類(lèi)型元素一樣顯示，并添加樣式列表標(biāo)記。
table? ?? ?? ?此元素會(huì)作為塊級(jí)表格來(lái)顯示。
inherit? ?? ? 規(guī)定應(yīng)該從父元素繼承 display 屬性的值。
3.行內(nèi)元素有哪些?塊級(jí)元素有哪些?CSS的盒模型?
塊級(jí)元素：div,p,h1,form,ul,li;
行內(nèi)元素 : span>,a,label,input,img,strong,em;
CSS盒模型:內(nèi)容，border ,margin，padding
4.CSS引入的方式有哪些? link和@import的區(qū)別是?
內(nèi)聯(lián) 內(nèi)嵌 外鏈 導(dǎo)入
區(qū)別 ：同時(shí)加載
前者無(wú)兼容性，后者CSS2.1以下瀏覽器不支持
Link 支持使用javascript改變樣式，后者不可
5.CSS選擇符有哪些?哪些屬性可以繼承?優(yōu)先級(jí)算法如何計(jì)算?內(nèi)聯(lián)和important哪個(gè)優(yōu)先級(jí)高?
標(biāo)簽選擇符 類(lèi)選擇符 id選擇符
繼承不如指定 Id>class>標(biāo)簽選擇
后者優(yōu)先級(jí)高
6.CSS清除浮動(dòng)的幾種方法（至少兩種）
使用帶clear屬性的空元素
使用CSS的overflow屬性；
使用CSS的:after偽元素；
使用鄰接元素處理；
7.CSS居中（包括水平居中和垂直居中）
內(nèi)聯(lián)元素居中方案
水平居中設(shè)置：
1.行內(nèi)元素
設(shè)置 text-align:center；
2.Flex布局
設(shè)置display:flex;justify-content:center;(靈活運(yùn)用,支持Chroime，F(xiàn)irefox，IE9+)
垂直居中設(shè)置：
1.父元素高度確定的單行文本（內(nèi)聯(lián)元素）
設(shè)置 height = line-height；
2.父元素高度確定的多行文本（內(nèi)聯(lián)元素）
a:插入 table （插入方法和水平居中一樣），然后設(shè)置 vertical-align:middle；
b:先設(shè)置 display:table-cell 再設(shè)置 vertical-align:middle；
塊級(jí)元素居中方案
水平居中設(shè)置：
1.定寬塊狀元素
設(shè)置 左右 margin 值為 auto；
2.不定寬塊狀元素
a:在元素外加入 table 標(biāo)簽（完整的，包括 table、tbody、tr、td），該元素寫(xiě)在 td 內(nèi)，然后設(shè)置 margin 的值為 auto；
b:給該元素設(shè)置 displa:inine 方法；
c:父元素設(shè)置 position:relative 和 left:50%，子元素設(shè)置 position:relative 和 left:50%；
垂直居中設(shè)置：
使用position:absolute（fixed）,設(shè)置left、top、margin-left、margin-top的屬性;
利用position:fixed（absolute）屬性，margin:auto這個(gè)必須不要忘記了;
利用display:table-cell屬性使內(nèi)容垂直居中;
使用css3的新屬性transform:translate(x,y)屬性;
使用:before元素;
8.在書(shū)寫(xiě)高效 CSS 時(shí)會(huì)有哪些問(wèn)題需要考慮？
reset。參照上題“描述下 “reset” CSS 文件的作用和使用它的好處”的答案。
規(guī)范命名。尤其對(duì)于沒(méi)有語(yǔ)義化的html標(biāo)簽，例如div，所賦予的class值要特別注意。
抽取可重用的部件，注意層疊樣式表的“優(yōu)先級(jí)”。
JS相關(guān)問(wèn)題
1.談一談JavaScript作用域鏈
當(dāng)執(zhí)行一段JavaScript代碼（全局代碼或函數(shù)）時(shí)，JavaScript引擎會(huì)創(chuàng)建為其創(chuàng)建一個(gè)作用域又稱(chēng)為執(zhí)行上下文（Execution Context），在頁(yè)面加載后會(huì)首先創(chuàng)建一個(gè)全局的作用域，然后每執(zhí)行一個(gè)函數(shù)，會(huì)建立一個(gè)對(duì)應(yīng)的作用域，從而形成了一條作用域鏈。每個(gè)作用域都有一條對(duì)應(yīng)的作用域鏈，鏈頭是全局作用域，鏈尾是當(dāng)前函數(shù)作用域。
作用域鏈的作用是用于解析標(biāo)識(shí)符，當(dāng)函數(shù)被創(chuàng)建時(shí)（不是執(zhí)行），會(huì)將this、arguments、命名參數(shù)和該函數(shù)中的所有局部變量添加到該當(dāng)前作用域中，當(dāng)JavaScript需要查找變量X的時(shí)候（這個(gè)過(guò)程稱(chēng)為變量解析），它首先會(huì)從作用域鏈中的鏈尾也就是當(dāng)前作用域進(jìn)行查找是否有X屬性，如果沒(méi)有找到就順著作用域鏈繼續(xù)查找，直到查找到鏈頭，也就是全局作用域鏈，仍未找到該變量的話，就認(rèn)為這段代碼的作用域鏈上不存在x變量，并拋出一個(gè)引用錯(cuò)誤（ReferenceError）的異常。
2.如何理解JavaScript原型鏈
JavaScript中的每個(gè)對(duì)象都有一個(gè)prototype屬性，我們稱(chēng)之為原型，而原型的值也是一個(gè)對(duì)象，因此它也有自己的原型，這樣就串聯(lián)起來(lái)了一條原型鏈，原型鏈的鏈頭是object,它的prototype比較特殊，值為null。
原型鏈的作用是用于對(duì)象繼承，函數(shù)A的原型屬性(prototype property)是一個(gè)對(duì)象，當(dāng)這個(gè)函數(shù)被用作構(gòu)造函數(shù)來(lái)創(chuàng)建實(shí)例時(shí)，該函數(shù)的原型屬性將被作為原型賦值給所有對(duì)象實(shí)例，比如我們新建一個(gè)數(shù)組，數(shù)組的方法便從數(shù)組的原型上繼承而來(lái)。
當(dāng)訪問(wèn)對(duì)象的一個(gè)屬性時(shí), 首先查找對(duì)象本身, 找到則返回; 若未找到, 則繼續(xù)查找其原型對(duì)象的屬性(如果還找不到實(shí)際上還會(huì)沿著原型鏈向上查找, 直至到根). 只要沒(méi)有被覆蓋的話, 對(duì)象原型的屬性就能在所有的實(shí)例中找到，若整個(gè)原型鏈未找到則返回undefined
3.JavaScript如何實(shí)現(xiàn)繼承？
構(gòu)造繼承
原型繼承
實(shí)例繼承
拷貝繼承
原型prototype機(jī)制或apply和call方法去實(shí)現(xiàn)較簡(jiǎn)單，建議使用構(gòu)造函數(shù)與原型混合方式。
function Parent(){
this.name = 'wang';
}
function Child(){
this.age = 28;
}
Child.prototype = new Parent();//繼承了Parent，通過(guò)原型
var demo = new Child();
alert(demo.age);
alert(demo.name);//得到被繼承的屬性
4.JavaScript的typeof返回哪些數(shù)據(jù)類(lèi)型
Ｏbject number function boolean underfind;
5.例舉3種強(qiáng)制類(lèi)型轉(zhuǎn)換和2種隱式類(lèi)型轉(zhuǎn)換?
強(qiáng)制（parseInt,parseFloat,number）隱式（== – ===）；
6.split() join() 的區(qū)別
前者是切割成數(shù)組的形式，后者是將數(shù)組轉(zhuǎn)換成字符串
7.數(shù)組方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部刪除
Unshift()頭部添加 shift()頭部刪除
8.IE和DOM事件流的區(qū)別
執(zhí)行順序不一樣、
參數(shù)不一樣
事件加不加on
this指向問(wèn)題
9.ajax請(qǐng)求的時(shí)候get 和post方式的區(qū)別
一個(gè)在url后面 一個(gè)放在虛擬載體里面
有大小限制
安全問(wèn)題
應(yīng)用不同 一個(gè)是論壇等只需要請(qǐng)求的，一個(gè)是類(lèi)似修改密碼的
10.IE和標(biāo)準(zhǔn)下有哪些兼容性的寫(xiě)法
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
11.ajax請(qǐng)求時(shí)，如何解釋json數(shù)據(jù)
使用eval parse,鑒于安全性考慮 使用parse更靠譜;
12.事件委托是什么
讓利用事件冒泡的原理，讓自己的所觸發(fā)的事件，讓他的父元素代替執(zhí)行！
13.閉包是什么，有什么特性，對(duì)頁(yè)面有什么影響?簡(jiǎn)要介紹你理解的閉包
閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。
14.添加 刪除 替換 插入到某個(gè)接點(diǎn)的方法
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
15..”==”和“===”的不同
前者會(huì)自動(dòng)轉(zhuǎn)換類(lèi)型，后者不會(huì)
16.編寫(xiě)一個(gè)b繼承a的方法
function A(name){
this.name = name;
this.sayHello = function(){alert(this.name+” say Hello!”);};
}
function B(name,id){
this.temp = A;
this.temp(name);? ?? ???//相當(dāng)于new A();
delete this.temp;
this.id = id;
this.checkId = function(ID){alert(this.id==ID)};
}
17.如何阻止事件冒泡和默認(rèn)事件
function stopBubble(e)
{
if (e && e.stopPropagation)
e.stopPropagation()
else
window.event.cancelBubble=true
}
return false
18.下面程序執(zhí)行后彈出什么樣的結(jié)果?
function fn() {
this.a = 0;
this.b = function() {
alert(this.a)
}
}
fn.prototype = {
b: function() {
this.a = 20;
alert(this.a);
},
c: function() {
this.a = 30;
alert(this.a);
}
}
var myfn = new fn();
myfn.b();
myfn.c();
19.談?wù)凾his對(duì)象的理解。
this是js的一個(gè)關(guān)鍵字，隨著函數(shù)使用場(chǎng)合不同，this的值會(huì)發(fā)生變化。
但是有一個(gè)總原則，那就是this指的是調(diào)用函數(shù)的那個(gè)對(duì)象。
this一般情況下：是全局對(duì)象Global。 作為方法調(diào)用，那么this就是指這個(gè)對(duì)象
20.下面程序的結(jié)果
function fun(n,o) {
console.log(o)
return {
fun:function(m){
return fun(m,n);
}
};
}
var a = fun(0);??a.fun(1);??a.fun(2);??a.fun(3);
var b = fun(0).fun(1).fun(2).fun(3);
var c = fun(0).fun(1);??c.fun(2);??c.fun(3);
//答案：
//a: undefined,0,0,0
//b: undefined,0,1,2
//c: undefined,0,1,1
21.下面程序的輸出結(jié)果
var name = 'World!';
(function () {
if (typeof name === 'undefined') {
var name = 'Jack';
console.log('Goodbye ' + name);
} else {
console.log('Hello ' + name);
}
})();
22.了解Node么？Node的使用場(chǎng)景都有哪些？
高并發(fā)、聊天、實(shí)時(shí)消息推送
23.介紹下你最常用的一款框架
jquery,rn,angular等;
24.對(duì)于前端自動(dòng)化構(gòu)建工具有了解嗎？簡(jiǎn)單介紹一下
Gulp,Grunt等；
25.說(shuō)一下什么是JavaScript的同源策略？
一段腳本只能讀取來(lái)自于同一來(lái)源的窗口和文檔的屬性，這里的同一來(lái)源指的是主機(jī)名、協(xié)議和端口號(hào)的組合
代碼相關(guān)的問(wèn)題
1.說(shuō)說(shuō)最近最流行的一些東西吧？常去哪些網(wǎng)站？
Node.js、MVVM、React-native,Angular,Weex等
CSDN,Segmentfault,博客園,掘金,Stackoverflow,伯樂(lè)在線等
2.如果今年你打算熟練掌握一項(xiàng)新技術(shù)，那會(huì)是什么？
via開(kāi)發(fā)單頁(yè)webapp的技術(shù)。
SAP能夠是頁(yè)面與頁(yè)面之間無(wú)縫連接，避免出現(xiàn)白頁(yè)，且?guī)в袆?dòng)態(tài)效果，提高用戶(hù)體驗(yàn)。同時(shí)SAP，有JavaScript渲染頁(yè)面，然后在從服務(wù)器獲取小量的數(shù)據(jù)顯示，如此反復(fù)，請(qǐng)求的數(shù)據(jù)無(wú)需要服務(wù)器處理，減少服務(wù)器負(fù)荷。
SAP對(duì)技術(shù)要求高。要考慮首屏加載事件過(guò)長(zhǎng)；動(dòng)畫(huà)效果要考慮低端手機(jī)；垃圾收集，需要自己釋放資源，避免頁(yè)面變卡。
（問(wèn)題整理于網(wǎng)絡(luò)，一只程序媛、知乎程序猿、以及秦至-前端大全）
摘自前端網(wǎng)：http://www.w3cfuns.com/notes/24610/01b6dcaafaf78da4a2b79ebcbca9e4b6.html
