html

1、Doctype作用？標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?

告知瀏覽器的解析器用什么文檔標(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ú)法工作。

2、行內(nèi)元素有哪些？塊級(jí)元素有哪些？

行內(nèi)元素: a b img em br i span input select 塊級(jí)元素：div p h1-h6 form ul dl ol table

行元素和塊元素有哪些？有什么特性？空(void)元素有哪些？

行內(nèi)元素不可以設(shè)置寬高，不獨(dú)占一行; 塊級(jí)元素可以設(shè)置寬高，獨(dú)占一行。 空元素

3、頁(yè)面載入時(shí)，link和@import有什么區(qū)別？

（1）link屬于xhtml標(biāo)簽，除了加載css之外，還能用于定義RSS,定義rel連接屬性等作用而@import是css提供的只用于加載css

（2）頁(yè)面加載時(shí)，link會(huì)同時(shí)被加載；@import引用css會(huì)等頁(yè)面加載完畢之后在加載

（3）@import只有ie5以上瀏覽器才兼容，而link屬于xhtml無(wú)兼容問(wèn)題

4、瀏覽器的內(nèi)核分別是什么？

Trident內(nèi)核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱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的分支）]

5、常見(jiàn)的兼容性

png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.

瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個(gè)全局的*{margin:0;padding:0;}來(lái)統(tǒng)一。

IE6雙邊距bug:塊屬性標(biāo)簽float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大。

浮動(dòng)ie產(chǎn)生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;} 這種情況之下IE會(huì)產(chǎn)生20px的距離，解決方案是在float的標(biāo)簽樣式控制中加入 ——_display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(_這個(gè)符號(hào)只有ie6會(huì)識(shí)別)

漸進(jìn)識(shí)別的方式，從總體中逐漸排除局部。

首先，巧妙的使用“\9”這一標(biāo)記，將IE瀏覽器從所有情況中分離出來(lái)。接著，再次使用“+”將IE8和IE7、IE6分離開(kāi)來(lái)，這樣IE8已經(jīng)獨(dú)立識(shí)別。 css .bb{ background-color:#f1ee18;/所有識(shí)別/ .background-color:#00deff\9; /IE6、7、8識(shí)別/ +background-color:#a200ff;/IE6、7識(shí)別/ _background-color:#1e0bd1;/IE6識(shí)別/ }

IE下,可以使用獲取常規(guī)屬性的方法來(lái)獲取自定義屬性, 也可以使用getAttribute()獲取自定義屬性; Firefox下,只能使用getAttribute()獲取自定義屬性。 解決方法:統(tǒng)一通過(guò)getAttribute()獲取自定義屬性。

IE下,even對(duì)象有x,y屬性,但是沒(méi)有pageX,pageY屬性; Firefox下,event對(duì)象有pageX,pageY屬性,但是沒(méi)有x,y屬性。

解決方法：（條件注釋）缺點(diǎn)是在IE瀏覽器下可能會(huì)增加額外的HTTP請(qǐng)求數(shù)。

Chrome 中文界面下默認(rèn)會(huì)將小于 12px 的文本強(qiáng)制按照 12px 顯示,可通過(guò)加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。

超鏈接訪問(wèn)過(guò)后hover樣式就不出現(xiàn)了 被點(diǎn)擊訪問(wèn)過(guò)的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

6、html5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題？如何區(qū)分 HTML 和HTML5？

HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能的增加。 繪畫 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, websocket, 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)的樣式。當(dāng)然也可以直接使用成熟的框架、比如html5shim;

7、HTML5的離線儲(chǔ)存怎么使用，工作原理能不能解釋一下？

在用戶沒(méi)有與因特網(wǎng)連接時(shí)，可以正常訪問(wèn)站點(diǎn)或應(yīng)用，在用戶與因特網(wǎng)連接時(shí)，更新用戶機(jī)器上的緩存文件。原理：HTML5的離線存儲(chǔ)是基于一個(gè)新建的.appcache文件的緩存機(jī)制(不是存儲(chǔ)技術(shù))，通過(guò)這個(gè)文件上的解析清單離線存儲(chǔ)資源，這些資源就會(huì)像cookie一樣被存儲(chǔ)了下來(lái)。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時(shí)，瀏覽器會(huì)通過(guò)被離線存儲(chǔ)的數(shù)據(jù)進(jìn)行頁(yè)面展示。

Css

1、介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

（1）有兩種， IE 盒子模型、W3C 盒子模型； （2）盒模型： 內(nèi)容(content)、填充(padding)、邊界(margin)、 邊框(border)； （3）區(qū) 別： IE的content部分把 border 和 padding計(jì)算了進(jìn)去;

2、CSS 選擇符有哪些？（哪些屬性可以繼承？?jī)?yōu)先級(jí)算法如何計(jì)算？Css3新增偽類有哪些）

id選擇器（ # myid） 類選擇器（.myclassname） 標(biāo)簽選擇器（div, h1, p） 相鄰選擇器（h1 + p） 子選擇器（ul < li） 后代選擇器（li a） 通配符選擇器（ * ） 屬性選擇器（a[rel = “external”]） 偽類選擇器（a: hover, li: nth - child）

CSS選擇器優(yōu)先級(jí)？

!important > 行內(nèi)樣式 > 后代、交叉 > ID > class > tag > * >瀏覽器預(yù)定義樣式 > 繼承樣式

3、列出display的值，說(shuō)明他們的作用。Position的值，relative和absolute定位原點(diǎn)是？

2. ???*absolute ??????????生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。

*fixed （老IE不支持） ?????????生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。

*relative ??????????生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。

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

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

4、Css3有哪些新特性？

新增各種CSS選擇器 （: not(.input)：所有 class 不是“input”的節(jié)點(diǎn)） 圓角 （border-radius:8px） 多列布局 （multi-column layout） 陰影和反射 （Shadow\Reflect） 文字特效 （text-shadow、） 文字渲染 （text-decoration） 線性漸變 （gradient） 旋轉(zhuǎn) （transform） 增加了旋轉(zhuǎn),縮放,平移,傾斜,動(dòng)畫，多背景transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

5、經(jīng)常遇到的css兼容性有哪些？原因，解決方法是什么？

http://www.tuicool.com/articles/reiYR3m

6、為什么要初始化css樣式

1、因?yàn)闉g覽器的兼容問(wèn)題，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的，如果沒(méi)對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁(yè)面顯示差異。

2、初始化CSS樣式主要是提高編碼質(zhì)量，如果不初始化整個(gè)頁(yè)面做完很糟糕，重復(fù)的CSS樣式很多。去掉標(biāo)簽的默認(rèn)樣式如：margin,padding，其他瀏覽器默認(rèn)解析字體大小，字體設(shè)置

Javascript

1、Javascript原型？有什么特點(diǎn)？

每個(gè)對(duì)象都會(huì)在其內(nèi)部初始化一個(gè)屬性，就是prototype(原型)，當(dāng)我們?cè)L問(wèn)一個(gè)對(duì)象的屬性時(shí)，

如果這個(gè)對(duì)象內(nèi)部不存在這個(gè)屬性，那么他就會(huì)去prototype里找這個(gè)屬性，這個(gè)prototype又會(huì)有自己的prototype，

于是就這樣一直找下去，也就是我們平時(shí)所說(shuō)的原型鏈的概念。

關(guān)系：instance.constructor.prototype = instance.__proto__

特點(diǎn)：

JavaScript對(duì)象是通過(guò)引用來(lái)傳遞的，我們創(chuàng)建的每個(gè)新對(duì)象實(shí)體中并沒(méi)有一份屬于自己的原型副本。當(dāng)我們修改原型時(shí)，與之相關(guān)的對(duì)象也會(huì)繼承這一改變。

2、Eval是做什么的？

把字符串參數(shù)解析成JS代碼并運(yùn)行，并返回執(zhí)行的結(jié)果；作用域在它所有的范圍內(nèi)容有效

3、Null,undefined區(qū)別？

null表示"沒(méi)有對(duì)象"，即該處不應(yīng)該有值。典型用法是：

（1） 作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對(duì)象。

（2） 作為對(duì)象原型鏈的終點(diǎn)。

undefined表示"缺少值"，就是此處應(yīng)該有一個(gè)值，但是還沒(méi)有定義。典型用法是：

（1）變量被聲明了，但沒(méi)有賦值時(shí)，就等于undefined。

（2) 調(diào)用函數(shù)時(shí)，應(yīng)該提供的參數(shù)沒(méi)有提供，該參數(shù)等于undefined。

（3）對(duì)象沒(méi)有賦值的屬性，該屬性的值為undefined。

（4）函數(shù)沒(méi)有返回值時(shí)，默認(rèn)返回undefined。

原文地址（http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html）值得一讀

4、談?wù)則his對(duì)象的理解？

a)函數(shù)的內(nèi)部對(duì)象。

b)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ì)象

5、事件是？IE與火狐的事件機(jī)制有什么區(qū)別？如何阻止冒泡？

1. 我們?cè)诰W(wǎng)頁(yè)中的某個(gè)操作（有的操作對(duì)應(yīng)多個(gè)事件）。例如：當(dāng)我們點(diǎn)擊一個(gè)按鈕就會(huì)產(chǎn)生一個(gè)事件。是可以被 JavaScript 偵測(cè)到的行為

2. 事件處理機(jī)制：IE是事件冒泡、firefox同時(shí)支持兩種事件模型，也就是：捕獲型事件和冒泡型事件

3. ev.stopPropagation();

注意舊ie的方法：ev.cancelBubble = true;