HTML相關問題
1.XHTML和HTML有什麼區別
HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的標記語言
最主要的不同：
XHTML 元素必須被正確地巢狀。
XHTML 元素必須被關閉。
標籤名必須用小寫字母。
XHTML 文件必須擁有根元素。
2.什麼是語義化的HTML?
直觀的認識標籤 對於搜尋引擎的抓取有好處，用正確的標籤做正確的事情！
html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜尋引擎解析；
在沒有樣式CCS情況下也以一種文件格式顯示，並且是容易閱讀的。搜尋引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重，利於 SEO。
使閱讀原始碼的人對網站更容易將網站分塊，便於閱讀維護理解。
3.常見的瀏覽器核心有哪些？
Trident核心：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko核心：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto核心：Opera7及以上。 [Opera核心原為：Presto，現為：Blink;]
Webkit核心：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]
4.HTML5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器相容問題？如何區分 HTML 和HTML5？
HTML5 現在已經不是 SGML 的子集，主要是關於影像，位置，儲存，多工等功能的增加。
支援HTML5新標籤：
繪畫 canvas；
用於媒介回放的 video 和 audio 元素；
本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失；
sessionStorage 的資料在瀏覽器關閉後自動刪除；
語意化更好的內容元素，比如 article、footer、header、nav、section；
表單控制元件，calendar、date、time、email、url、search；
新的技術webworker, websockt, Geolocation；
移除的元素：
純表現的元素：basefont，big，center，font, s，strike，tt，u；
對可用性產生負面影響的元素：frame，frameset，noframes；
IE8/IE7/IE6支援通過document.createElement方法產生的標籤，可以利用這一特性讓這些瀏覽器支援HTML5新標籤；瀏覽器支援新標籤後，還需要新增標籤預設的樣式。
5.請描述一下 cookies，sessionStorage 和 localStorage 的區別？
cookie在瀏覽器和伺服器間來回傳遞，sessionStorage和localStorage不會；
sessionStorage和localStorage的儲存空間更大；
sessionStorage和localStorage有更多豐富易用的介面；
sessionStorage和localStorage有各自獨立的儲存空間。
6.如何實現瀏覽器內多個標籤頁之間的通訊?
呼叫localstorge、cookies等本地儲存方式
7.HTML5 為什麼只需要寫 !DOCTYPE HTML？
HTML5 不基於 SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行為（讓瀏覽器按照它們應該的方式來執行）；而HTML4.01基於SGML,所以需要對DTD進行引用，才能告知瀏覽器文件所使用的文件型別。
8.Doctype作用？標準模式與相容模式各有什麼區別?
!DOCTYPE宣告位於HTML文件中的第一行，處於html 標籤之前。告知瀏覽器的解析器用什麼文件標準解析這個文件。DOCTYPE不存在或格式不正確會導致文件以相容模式呈現。
標準模式的排版 和JS運作模式都是以該瀏覽器支援的最高標準執行。在相容模式中，頁面以寬鬆的向後相容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。
9.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?
用於宣告文件使用哪種規範（html/Xhtml）一般為嚴格過度基於框架的html文件。
加入XMl宣告可觸發，解析方式更改為IE5.5 擁有IE5.5的Bug。
10.Canvas 與 SVG 的比較
Canvas
依賴解析度
不支援事件處理器
弱的文字渲染能力
能夠以 .png 或 .jpg 格式儲存結果影像
最適合影像密集型的遊戲，其中的許多物件會被頻繁重繪
SVG
不依賴解析度
支援事件處理器
最適合帶有大型渲染區域的應用程式（比如谷歌地圖）
複雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）
不適合遊戲應用
CSS相關問題
1.CSS實現垂直水平居中
一道經典的問題，實現方法有很多種，以下是其中一種實現：
HTML結構：
<div class="wrapper">
<div class="content"></div>
</div>
CSS：
.wrapper{position:relative;}
.content{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute; //父元素需要相對定位
top: 50%;
left: 50%;
margin-top:-100px ; //二分之一的height，width
margin-left: -100px;
}
2.display有哪些值？說明他們的作用。
block 塊型別。預設寬度為父元素寬度，可設定寬高，換行顯示。
none 預設值。像行內元素型別一樣顯示。
inline 行內元素型別。預設寬度為內容寬度，不可設定寬高，同行顯示。
inline-block 預設寬度為內容寬度，可以設定寬高，同行顯示。
list-item 像塊型別元素一樣顯示，並新增樣式列表標記。
table 此元素會作為塊級表格來顯示。
inherit 規定應該從父元素繼承 display 屬性的值。
3.行內元素有哪些?塊級元素有哪些?CSS的盒模型?
塊級元素：div,p,h1,form,ul,li;
行內元素 : span,a,label,input,img,strong,em;
CSS盒模型:內容，border ,margin，padding，有兩種型別：
IE 盒子模型、標準 W3C 盒子模型；
IE的content部分包含了 border 和 pading;
2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border).
4.CSS引入的方式有哪些? link和@import的區別是?
內聯 內嵌 外鏈 匯入
區別 ：
(1).link屬於HTML標籤，而@import是CSS提供的;
(2).頁面被載入的時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入;
(3).import只在IE5以上才能識別，而link是HTML標籤，無相容問題;
(4).link方式的樣式的權重高於@import的權重.
(5).link支援使用javascript改變樣式，後者不可
5.CSS選擇符有哪些?哪些屬性可以繼承?優先順序演算法如何計算?內聯和important哪個優先順序高?
標籤選擇符 類選擇符 id選擇符
繼承不如指定 Id>class>標籤選擇
!important的優先順序高
6.CSS清除浮動的幾種方法（至少兩種）
使用帶clear屬性的空元素；
使用CSS的overflow屬性；
使用CSS的:after偽元素；
使用鄰接元素處理；
7.CSS居中（包括水平居中和垂直居中）
內聯元素居中方案
水平居中設定：
1.行內元素
設定 text-align:center；
2.Flex佈局
設定display:flex;justify-content:center;(靈活運用,支援Chroime，Firefox，IE9+)
垂直居中設定：
1.父元素高度確定的單行文字（內聯元素）
設定 height = line-height；
2.父元素高度確定的多行文字（內聯元素）
a:插入 table （插入方法和水平居中一樣），然後設定 vertical-align:middle；
b:先設定 display:table-cell 再設定 vertical-align:middle；
塊級元素居中方案
水平居中設定：
1.定寬塊狀元素
設定左右的margin值為 auto；
2.不定寬塊狀元素
a:在元素外加入table標籤（完整的，包括 table、tbody、tr、td），該元素寫在 td 內，然後設定margin的值為 auto；
b:給該元素設定 displa:inine 方法；
c:父元素設定 position:relative 和 left:50%，子元素設定 position:relative 和 left:50%；
垂直居中設定：
使用position:absolute（fixed）,設定left、top、margin-left、margin-top的屬性;
利用position:fixed（absolute）屬性，margin:auto這個必須不要忘記了;
利用display:table-cell屬性使內容垂直居中;
使用css3的新屬性transform:translate(x,y)屬性;
使用:before元素;
8.在書寫高效 CSS 時會有哪些問題需要考慮？
reset。
規範命名。尤其對於沒有語義化的html標籤，例如div，所賦予的class值要特別注意。
抽取可重用的部件，注意層疊樣式表的“優先順序”。
9.display:none和visibility:hidden的區別？
display:none 隱藏對應的元素，在文件佈局中不再給它分配空間，它各邊的元素會合攏，就當他從來不存在。
visibility:hidden 隱藏對應的元素，但是在文件佈局中仍保留原來的空間。
10.position的absolute與fixed共同點與不同點
A.共同點：
1.改變行內元素的呈現方式，display被置為block；
2.讓元素脫離普通流，不佔據空間；
3.預設會覆蓋到非定位元素上
B.不同點：
absolute的”根元素”是可以設定的，而fixed的”根元素”固定為瀏覽器視窗。當你滾動網頁時，fixed元素與瀏覽器視窗之間的距離是不變的。
JS相關問題
1.談一談JavaScript作用域鏈
當執行一段JavaScript程式碼（全域性程式碼或函式）時，JavaScript引擎會為其建立一個作用域又稱為執行上下文（Execution Context），在頁面載入後會首先建立一個全域性的作用域，然後每執行一個函式，會建立一個對應的作用域，從而形成了一條作用域鏈。每個作用域都有一條對應的作用域鏈，鏈頭是全域性作用域，鏈尾是當前函式作用域。
作用域鏈的作用是用於解析識別符號，當函式被建立時（不是執行），會將this、arguments、命名引數和該函式中的所有區域性變數新增到該當前作用域中，當JavaScript需要查詢變數X的時候（這個過程稱為變數解析），它首先會從作用域鏈中的鏈尾也就是當前作用域進行查詢是否有X屬性，如果沒有找到就順著作用域鏈繼續查詢，直到查詢到鏈頭，也就是全域性作用域鏈，仍未找到該變數的話，就認為這段程式碼的作用域鏈上不存在x變數，並丟擲一個引用錯誤（ReferenceError）的異常。
2.如何理解JavaScript原型鏈
JavaScript中的每個物件都有一個prototype屬性，我們稱之為原型，而原型的值也是一個物件，因此它也有自己的原型，這樣就串聯起來了一條原型鏈，原型鏈的鏈頭是object,它的prototype比較特殊，值為null。
原型鏈的作用是用於物件繼承，函式A的原型屬性(prototype property)是一個物件，當這個函式被用作建構函式來建立例項時，該函式的原型屬性將被作為原型賦值給所有物件例項，比如我們新建一個陣列，陣列的方法便從陣列的原型上繼承而來。
當訪問物件的一個屬性時, 首先查詢物件本身, 找到則返回; 若未找到, 則繼續查詢其原型物件的屬性(如果還找不到實際上還會沿著原型鏈向上查詢, 直至到根)。只要沒有被覆蓋的話, 物件原型的屬性就能在所有的例項中找到，若整個原型鏈未找到則返回undefined
3.JavaScript如何實現繼承？
構造繼承
原型繼承
例項繼承
拷貝繼承
原型prototype機制或apply和call方法去實現較簡單，建議使用建構函式與原型混合方式。
function Parent(){
this.name = `wang`;
}
function Child(){
this.age = 28;
}
Child.prototype = new Parent();//繼承了Parent，通過原型
var demo = new Child();
alert(demo.age);
alert(demo.name);//得到被繼承的屬性
4.JavaScript的typeof返回哪些資料型別
object
number
function
boolean
underfind
5.例舉3種強制型別轉換和2種隱式型別轉換?
強制:parseInt、parseFloat、number
隱式：==、===
6.split()和join()的區別
前者是切割成陣列的形式，後者是將陣列轉換成字串
7.陣列方法pop() push() unshift() shift()的理解
pop()尾部刪除
push()尾部新增
unshift()頭部新增
shift()頭部刪除
8.IE和DOM事件流的區別
執行順序不一樣
引數不一樣
事件加不加on
this指向問題
9.ajax請求的時候get和post方式的區別
一個在url後面，一個放在虛擬載體裡面
有大小限制
安全問題
應用不同 一個是論壇等只需要請求的，一個是類似修改密碼的
10.IE和標準下有哪些相容性的寫法
var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
var target = ev.srcElement||ev.target
11.ajax請求時，如何解釋json資料
使用eval parse,鑑於安全性考慮 使用parse更靠譜。
12.事件委託是什麼？
利用事件冒泡的原理，自己所觸發的事件，讓他的父元素代替執行！
13.閉包是什麼，有什麼特性，對頁面有什麼影響?簡要介紹你理解的閉包
閉包就是能夠讀取其他函式內部變數的函式。變數得不到銷燬，一直儲存在記憶體中，可能造成記憶體洩漏。
14.新增 刪除 替換 插入到某個接點的方法
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
15..”==”和“===”的不同
前者會自動轉換型別，後者不會
16.編寫一個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); //相當於new A();
delete this.temp;
this.id = id;
this.checkId = function(ID){alert(this.id==ID)};
}
17.如何阻止事件冒泡和預設事件
function stopBubble(e){
if (e && e.stopPropagation)
e.stopPropagation()
else
window.event.cancelBubble=true
}
return false
18.下面程式執行後彈出什麼樣的結果?
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.談談對this物件的理解。
this是js的一個關鍵字，隨著函式使用場合不同，this的值會發生變化。
但是有一個總原則，那就是this指的是呼叫函式的那個物件。
this一般情況下：是全域性物件Global。 作為方法呼叫，那麼this就是指這個物件
20.下面程式的結果
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.下面程式的輸出結果
var name = `World!`;
(function () {
if (typeof name === `undefined`) {
var name = `Jack`;
console.log(`Goodbye ` + name);
} else {
console.log(`Hello ` + name);
}
})();
22.瞭解Node麼？Node的使用場景都有哪些？
高併發、聊天、實時訊息推送
23.介紹下你最常用的一款框架
jquery,rn,angular等;
24.對於前端自動化構建工具有了解嗎？簡單介紹一下
Gulp,Grunt等；
25.說一下什麼是JavaScript的同源策略？
一段指令碼只能讀取來自於同一來源的視窗和文件的屬性，這裡的同一來源指的是主機名、協議和埠號的組合。
其他問題
1.說說最近最流行的一些東西吧？常去哪些網站？
Node.js、MVVM、React-native,Angular,Weex等
CSDN,Segmentfault,部落格園,掘金,Stackoverflow,伯樂線上等
2.如果今年你打算熟練掌握一項新技術，那會是什麼？
via開發單頁webapp的技術。
SAP能夠是頁面與頁面之間無縫連線，避免出現白頁，且帶有動態效果，提高使用者體驗。同時SAP，有JavaScript渲染頁面，然後在從伺服器獲取小量的資料顯示，如此反覆，請求的資料無需要伺服器處理，減少伺服器負荷。
SAP對技術要求高。要考慮首屏載入事件過長；動畫效果要考慮低端手機；垃圾收集，需要自己釋放資源，避免頁面變卡。
PS：五個典型的JavaScript試題：
問題1: 範圍（Scope）
思考以下程式碼：
(function(){
var a=b=5;
})();
console.log(b);
控制檯（console）會列印出什麼？
答案：上述程式碼會列印出5。
這個問題的陷阱就是，在立即執行函式表示式（IIFE）中，有兩個命名，但是其中變數是通過關鍵詞var來宣告的。這就意味著a是這個函式的區域性變數。與此相反，b是在全域性作用域下的。
這個問題另一個陷阱就是，在函式中他沒有使用”嚴格模式” (`use strict`;)。如果 嚴格模式 開啟，那麼程式碼就會報出未捕獲引用錯誤（Uncaught ReferenceError）：b沒有定義。記住，嚴格模式要求你在需要使用全域性變數時，明確地引用該變數。因此，你需要像下面這麼寫：
(function(){
`use strict`
var a=window.b=5;
})();
console.log(b);
問題2: 建立 “原生（native）” 方法
在String物件上定義一個repeatify函式。這個函式接受一個整數引數，來明確字串需要重複幾次。這個函式要求字串重複指定的次數。舉個例子：
console.log(`hello`.repeatift(3));
應該列印出hellohellohello.
答案：一種可能的實現如下所示：
String.prototype.repeatify=String.prototype.repeatify||function(times){
var str=``;
for(int i=0;i<times;i++){
str+=this;
}
return str;
};
這個問題測試了開發人員對於JavaScript中繼承的掌握，以及prototype這個屬性。這也驗證了開發人員是否有能力擴充套件原生資料型別的功能（雖然不應該這麼做）。
這個問題的另一個重點是驗證你是否意識到並知道如何避免覆蓋已經存在的函式。這可以通過在自定義函式之前判斷該函式是否存在來做到。
String.prototype.repeatify=String.prototype.repeatify||function(times){
/*code here*/
};
當你需要為舊瀏覽器實現向後相容的函式時，這一技巧十分有用。
問題3: 變數提升（Hoisting）
執行以下程式碼會有什麼結果？為什麼？
function test(){
console.log();
console.log(foo());
var a=1;
function foo(){
return 2;
}
}
test();
答案：這段程式碼的執行結果是undefined和2。
這個結果的原因是，變數和函式都被提升了（hoisted）。因此，在a被列印的時候，它已經在函式作用域中存在（即它已經被宣告瞭），但是它的值依然是 undefined。換言之，上述程式碼和以下程式碼是等價的。
function test(){
var a=1;
function foo(){
return 2;
}
console.log();
console.log(foo());
a=1;
}
test();
問題4: this 在 JavaScript 中是如何工作的
以下程式碼的結果是什麼？請解釋你的答案。
var fullname=`AAA`;
var obj={
fullname:`BBB`;
prop:{
fullname:`CCC`,
getFUllname:fullname(){
return this.fullname;
}
}
};
console.log(obj.prop.getFullname());
var test=obj.prop.getFullname;
console.log(test());
答案：上面的程式碼列印出CCC和AAA。原因是在JavaScript中，一個函式的上下文環境，也就是this關鍵詞所引用物件，是依賴於函式是如何被呼叫的，而不是依賴於函式如何被定義的。
在第一個 console.log() 呼叫中，getFullname() 是作為obj.prop的函式被呼叫的。因此，這裡的上下文環境指向後者並且函式返回this物件的fullname屬性。相反，當 getFullname() 被賦為test變數的值時，那個語境指向全域性物件(window)。這是因為，test 被隱式設定為全域性物件的屬性。因此，函式呼叫返回window的fullname屬性值，在此段程式碼中，這個值是通過第一行賦值語句設定的。
問題5: call() 和 apply()
修復上一個問題，讓最後一個console.log()列印出CCC。
答案：要解決這個問題，可以通過為函式call()或者apply()強制函式呼叫的上下文環境。
console.log(test.call(obj.prop));
本文章持續更新中，個人能力有限，錯誤之處希望小夥伴們踴躍指出。