- CSS引入的方式有哪些惑折？link和@import的有什么區(qū)別学赛？各種方式的優(yōu)先級如何雹顺？
A.內(nèi)聯(lián)（行內(nèi)）： 寫在頁面上
<header>
<style>
div{color : red;}
<style>
</header>
B. 內(nèi)嵌： 直接在 HTML 標簽中的 style 屬性中添加 CSS
<div style="color: red;"><div>
C.外鏈（鏈接）： 通過link 標簽引入外部文件
<link rel="stylesheet" type="text/css" href="style.css">
D.導入： 通過@import 導入外部文件
<header>
<style type="text/css">
@import url("css/style.css");
</style>
</header>
link和@import兩者都是外部引用CSS的方式野来，但是存在一定的區(qū)別：
- link是XHTML標簽，除了加載CSS外望拖，還可以定義RSS等其他事務渺尘；@import屬于CSS范疇，只能加載CSS说敏。
- link是XHTML標簽，無兼容問題丢郊；@import是在CSS2.1提出的盔沫，低版本的瀏覽器不支持。
- link引用CSS時枫匾，在頁面載入時同時加載架诞；@import需要頁面網(wǎng)頁完全載入以后加載。
- link支持使用Javascript控制DOM去改變樣式干茉；而@import不支持谴忧。
優(yōu)先級情況
- 理論上：內(nèi)聯(lián)（行內(nèi)）>內(nèi)嵌>鏈接>導入；
- 實際上：內(nèi)嵌角虫、鏈接沾谓、導入在同一個文件頭部，誰離相應的代碼近戳鹅，誰的優(yōu)先級高均驶；
- 一般情況下，在webkit中優(yōu)先級情況為：!important > inline style > ID > class > tag枫虏；
前端頁面的三層結構：結構層（Html ）妇穴，表示層（CSS）爬虱，行為層（Javascript）
css的基本語句構成：選擇器{屬性1:值1;屬性2:值2;……}
主流瀏覽器內(nèi)核：Ie(Ie內(nèi)核) 火狐（Gecko） 谷歌（webkit） opear(Presto)
-
幾種IE6 BUG的解決方法：
- 雙邊距BUG float引起的 使用display；
- 3像素問題 使用float引起的 使用dislpay:inline -3px腾它；
- 超鏈接hover 點擊后失效 使用正確的書寫順序 link visited hover active跑筝；
- IE z-index問題 給父級添加position:relative；
- Png 透明 使用js代碼 改瞒滴；
- min-height 最小高度 !important 解決继蜡；
- select 在ie6下遮蓋 使用iframe嵌套；
- 為什么沒有辦法定義1px左右的寬度容器（IE6默認的行高造成的逛腿，使用over:hidden,zoom:0.08 line-height:1px）稀并；
-
標簽上title與alt屬性有什么區(qū)別：
- alt 設置當圖片因各種原因（網(wǎng)絡故障、圖片丟失）不能顯示時用來代替顯示的文字单默，使用戶獲取的信息相對完整碘举；
- title 設置當鼠標移上元素上是顯示的提示文本；
CSS reset 重置瀏覽器的css默認屬性搁廓，讓其樣式統(tǒng)一引颈，達到兼容不同瀏覽器的目的；了解詳情
css sprites（精靈） 是把一堆小的圖片整合到一張大的圖片上境蜕，減輕服務器對圖片的請求次數(shù)從而提高訪問效率蝙场，但是開發(fā)和維護相對麻煩；一般當有一堆圖標時用得比較多粱年。
-
在W3C標準出來前各瀏覽器不統(tǒng)一的渲染模式稱之為--怪異模式 售滤，在W3C標準出來后各瀏覽器統(tǒng)一的渲染模式稱之為--標準模式 ，兩種模式之間主要的區(qū)別在于對盒子模型渲染的方式不同 台诗。了解詳情
- 在嚴格模式中 ：width是內(nèi)容寬度 完箩，元素真正的寬度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width + margin-right；
- 在怪異模式中 ：width則是元素的實際寬度 拉队，內(nèi)容寬度 = width - ( padding-left + padding-right + border-left-width + border-right-width)弊知；
- 通過指定
DOCTYPE可以指定以標準模式渲染； - 通過window.top.document.compatMode 可查看當前模式粱快；
語義化的HTML：合理的使用html標簽對于搜索引擎的抓取有好處秩彤；
清除浮動的幾種方式以及各自的優(yōu)缺點：
- 使用空標簽清除浮動 clear:both（理論上能清除任何標簽的浮動，但是會增加無意義的標簽）事哭；
- 使用overflow:auto（空標簽元素清除浮動而不得不增加無意義代碼的弊端漫雷，使用zoom:1用于兼容IE）
- 使用:afert偽元素清除浮動(用于非IE瀏覽器)；
javascript的typeof()函數(shù)返回的數(shù)據(jù)類：object, number, function, boolean, underfind
常見的強制類型轉(zhuǎn)換 和隱式類型轉(zhuǎn)換 ：
- 制類型轉(zhuǎn)換（parseInt, parseFloat, Number）慷蠕；
- 隱式類型轉(zhuǎn)換（== – ===）珊拼；
- Javascript 常用方法：
- split() 切割成數(shù)組的形式；
- join() 將數(shù)組轉(zhuǎn)換成字符串流炕；
- push() 尾部添加澎现；
- pop() 尾部刪除仅胞；
- unshift() 頭部添加；
- shift() 頭部刪除剑辫；
事件綁定 和普通事件 有的區(qū)別：普通事件中的onclick是DOM0級事件只支持單個 事件干旧，會被其他onclick事件覆蓋，而事件綁定中的addEventListener是DOM2級事件可以添加多個事件而不用擔心被覆蓋妹蔽；
Javascript Event事件中IE與標準DOM事件流的區(qū)別：IE采用冒泡型事件 Netscape使用捕獲型事件 DOM使用先捕獲后冒泡型事件椎眯；了解詳情
IE和標準下有哪些兼容性的寫法
/*
在IE8或者IE8以下的瀏覽器中，事件處理函數(shù)中使用的時間對象是window.event胳岂，IE8以上瀏覽器既可以使用window.event也可以使用傳遞的事件對象编整，不過火狐瀏覽器只能夠使用傳遞的事件對象，所以以上代碼主要是為了兼容火狐瀏覽器
*/
var ev = ev || window.event;
//獲取視窗的高度
var width = document.documentElement.clientWidth || document.body.clientWidth;
//獲取事件的觸發(fā)源
var target = ev.srcElement||ev.target;
- 常用的解析json的方式通常用JSON.parse()乳丰，但是eval()方法也可以解析掌测，兩者區(qū)別如下：
- JSON.parse()解析json前會對其是否符合json格式進行檢查，如果格式不正確則不進行解析产园，為保證安全性推薦使用汞斧；但某些低級的瀏覽器尚不支持JSON.parse()；
- eval()可以解析任何字符串而不對格式進行檢查什燕，所以eval()是不安全的粘勒；
js事件委托 ：利用事件冒泡的原理，讓自己的所觸發(fā)的事件屎即，讓他的父元素代替執(zhí)行庙睡，事件監(jiān)聽器會分析從子元素冒泡上來的事件，找到是那個觸發(fā)事件的子元素剑勾，進而進行相關處理埃撵，這樣處理的目的是不需要為每一個子元素分別添加事件，特別是當子元素有增加或減少的時候虽另，提高性能，添加的元素還會有之前的事件饺谬。捂刺；了解詳情
閉包 閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)，由于在Javascript語言中募寨，只有函數(shù)內(nèi)部的子函數(shù)才能讀取局部變量族展，因此可以把閉包簡單理解成“定義在一個函數(shù)內(nèi)部的函數(shù)”。作用： 一個是前面提到的可以讀取函數(shù)內(nèi)部的變量拔鹰，另一個就是讓這些變量的值始終保持在內(nèi)存中仪缸。使用中需要注意的點：了解詳情
> * 由于閉包會使得函數(shù)中的變量都被保存在內(nèi)存中，內(nèi)存消耗很大列肢，所以不能濫用閉包恰画，否則會造成網(wǎng)頁的性能問題宾茂，在IE中可能導致內(nèi)存泄露。解決方法是拴还，在退出函數(shù)之前跨晴，將不使用的局部變量全部刪除。
> * 閉包會在父函數(shù)外部片林，改變父函數(shù)內(nèi)部變量的值端盆。所以，如果你把父函數(shù)當作對象（object）使用费封，把閉包當作它的公用方法（Public Method）焕妙，把內(nèi)部變量當作它的私有屬性（private value），這時一定要小心弓摘，不要隨便改變父函數(shù)內(nèi)部變量的值
- 阻止事件冒泡和默認事件的方法：
``` javascript
//阻止事件冒泡
function stopBubble(e) {
if(e && e.stopPropagation){
e.stopPropagation();
} else {
window.event.cancelBubble = true;
}
};
// 阻止瀏覽器的默認事件
function stopDefault(e){
if(e && e.preventDefault) {
e.preventDefault();
} else {
window.event.returnValue = false;
}
return false;
};
```
- 解釋jsonp的原理焚鹊，以及為什么不是真正的ajax。了解詳情
jsonp動態(tài)創(chuàng)建script標簽衣盾，回調(diào)函數(shù)
Ajax是頁面無刷新請求數(shù)據(jù)操作
- javascript的本地對象寺旺，內(nèi)置對象和宿主對象
> * 本地對象為array obj regexp等可以new實例化
> * 內(nèi)置對象為gload Math 等不可以實例化的
> * 宿主為瀏覽器自帶的document,window 等
?
Javascript的同源策略： 一種安全策略，限制一段腳本只能讀取來自于同一來源的窗口和文檔的屬性势决，這里的同一來源指的是主機名阻塑、協(xié)議和端口號的組合。
什么是盒子模型:
> 在網(wǎng)頁中果复，一個元素占有空間的大小由幾個部分構成陈莽，其中包括元素的內(nèi)容（content），元素的內(nèi)邊距（padding）虽抄，元素的邊框（border）走搁，元素的外邊距（margin）四個部分。這四個部分占有的空間中迈窟，有的部分可以顯示相應的內(nèi)容私植，而有的部分只用來分隔相鄰的區(qū)域或區(qū)域。4個部分一起構成了css中元素的盒模型车酣。
- 行內(nèi)元素有哪些曲稼？塊級元素有哪些？ 空(void)元素有那些湖员？
> 行內(nèi)元素：a贫悄、b、span娘摔、img窄坦、input、strong、select鸭津、label彤侍、em、button曙博、textarea
> 塊級元素：div拥刻、ul、li父泳、dl般哼、dt、dd惠窄、p蒸眠、h1-h6、blockquote
> 空元素：即系沒有內(nèi)容的HTML元素杆融，例如：br楞卡、meta、hr脾歇、link蒋腮、img
- 簡述一下src與href的區(qū)別:
> * href 是指向網(wǎng)絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接藕各，用于超鏈接池摧。
> * src是指向外部資源的位置，指向的內(nèi)容將會嵌入到文檔中當前標簽所在位置激况；在請求src資源時會將其指向的資源下載并應用到文檔內(nèi)作彤，例如js腳本，img圖片和frame等元素乌逐。當瀏覽器解析到該元素時竭讳，會暫停其他資源的下載和處理，直到將該資源加載浙踢、編譯绢慢、執(zhí)行完畢，圖片和框架等元素也如此洛波，類似于將所指向資源嵌入當前標簽內(nèi)呐芥。這也是為什么將js腳本放在底部而不是頭部。
- 什么是CSS Hack?
一般來說是針對不同的瀏覽器或同一瀏覽器不同的版本寫不同的CSS,就是 CSS Hack奋岁。
IE瀏覽器Hack一般又分為三種，條件Hack荸百、屬性級Hack闻伶、選擇符Hack。例如：
``` css
/* 條件Hack */
<!--[if IE]>
<style>
.test{color:red;}
</style>
<![end if]-->
/* 屬性Hack */
.test{
color:#090\9; /* For IE8+ */
color:#f00; /* For IE7 and earlier */
_color:#ff0; /* For IE6 and earlier */
}
/* 選擇符Hack */
- html .test{color:#090;} /* For IE6 and earlier */
-- html .test{color:#ff0;} /* For IE7 */
```
- 簡述同步和異步的區(qū)別（過橋模型）
> * 同步是**阻塞模式** 够话，異步是**非阻塞模式** 蓝翰。
> * 同步就是指一個進程在執(zhí)行某個請求的時候光绕，若該請求需要一段時間才能返回信息，那么這個進程將會一直等待下去畜份，直到收到返回信息才繼續(xù)執(zhí)行下去诞帐；
> * 異步是指進程不需要一直等下去，而是繼續(xù)執(zhí)行下面的操作爆雹，不管其他進程的狀態(tài)停蕉。當有消息返回時系統(tǒng)會通知進程進行處理，這樣可以提高執(zhí)行的效率钙态。
- 什么叫優(yōu)雅降級和漸進增強慧起？
> * 漸進增強 progressive enhancement：
> 針對低版本瀏覽器進行構建頁面，保證最基本的功能册倒，然后再針對高級瀏覽器進行效果蚓挤、交互等改進和追加功能達到更好的用戶體驗。
> * 優(yōu)雅降級 graceful degradation：
> 一開始就構建完整的功能驻子，然后再針對低版本瀏覽器進行兼容灿意。
> * 區(qū)別：
> a. 優(yōu)雅降級是從復雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給
> b. 漸進增強則是從一個非吵绾牵基礎的缤剧，能夠起作用的版本開始，并不斷擴充演熟，以適應未來環(huán)境的需要
> c. 降級（功能衰減）意味著往回看鞭执；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶
px和em都是長度單位芒粹，區(qū)別是px的值是固定的兄纺，指定是多少就是多少，計算比較容易化漆。em得值不是固定的估脆，并且em會繼承父級元素的字體大小 。瀏覽器的默認字體高都是16px座云。所以未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px疙赠。那么12px=0.75em, 10px=0.625em
瀏覽器的內(nèi)核分別是什么?
> * IE: trident內(nèi)核
> * Firefox：gecko內(nèi)核
> * Safari：webkit內(nèi)核
> * Chrome：Blink(基于webkit，Google與Opera Software共同開發(fā))
> * Opera：以前是presto內(nèi)核朦拖，Opera現(xiàn)已改用Google Chrome的Blink內(nèi)核
- 怎樣添加圃阳、移除、移動璧帝、復制捍岳、創(chuàng)建和查找節(jié)點？
> * 1）創(chuàng)建新節(jié)點
> * createDocumentFragment() //創(chuàng)建一個DOM片段
> * createElement() //創(chuàng)建一個具體的元素
> * createTextNode() //創(chuàng)建一個文本節(jié)點
> * 2）添加、移除锣夹、替換页徐、插入
> * appendChild() //添加
> * removeChild() //移除
> * replaceChild() //替換
> * insertBefore() //插入
> * 3）查找
> * getElementsByTagName() //通過標簽名稱
> * getElementsByName() //通過元素的Name屬性的值
> * getElementById() //通過元素Id，唯一性
caller是返回一個對函數(shù)的引用银萍，該函數(shù)調(diào)用了當前函數(shù)变勇；callee是返回正在被執(zhí)行的function函數(shù)，也就是所指定的function對象的正文贴唇，它是arguments的一個屬性搀绣。了解詳情
請描述一下cookies，sessionStorage和localStorage的區(qū)別
> * sessionStorage用于本地存儲一個會話（session）中的數(shù)據(jù)滤蝠，這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當會話結束后數(shù)據(jù)也隨之銷毀豌熄。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲
> * localStorage用于持久化的本地存儲物咳，除非主動刪除數(shù)據(jù)锣险，否則數(shù)據(jù)是永遠不會過期的。
> * web storage和cookie的區(qū)別Web Storage的概念和cookie相似览闰，區(qū)別是它是為了更大容量存儲設計的芯肤。
> * Cookie的大小是受限的；
> * 并且每次你請求一個新的頁面的時候Cookie都會被發(fā)送過去压鉴，這樣無形中浪費了帶寬崖咨；
> * 另外cookie還需要指定作用域，不可以跨域調(diào)用油吭；
> * Web Storage擁有setItem,getItem,removeItem,clear等方法击蹲，不像cookie需要前端開發(fā)者自己封裝setCookie，getCookie婉宰。
> * 但是Cookie也是不可以或缺的：Cookie的作用是與服務器進行交互歌豺，作為HTTP規(guī)范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲”數(shù)據(jù)而生心包。
- 一次完整的HTTP事務是怎樣的一個過程：
> * 域名解析
> * 發(fā)起TCP的3次握手
> * 建立TCP連接后發(fā)起http請求
> * 服務器端響應http請求类咧，瀏覽器得到html代碼
> * 瀏覽器解析html代碼，并請求html代碼中的資源
> * 瀏覽器對頁面進行渲染呈現(xiàn)給用戶