持續(xù)更新完善中...

目錄
1、HTML篇
2、CSS篇
3、ECMAScript篇
4、DOM篇
5、瀏覽器常見兼容問題篇
6、網(wǎng)絡(luò)協(xié)議篇
7、網(wǎng)絡(luò)安全篇
8、性能優(yōu)化篇

1、HTML篇

1、DOCTYPE的理解？

答：DOCTYPE 是一種標(biāo)準(zhǔn)通用標(biāo)記語言的文檔類型聲明，它的目的是要告訴標(biāo)準(zhǔn)通用標(biāo)記語言解析器，它應(yīng)該使用什么樣的文檔類型定義來解析文檔。只有確定了一個正確的文檔類型，超文本標(biāo)記語言或可擴(kuò)展超文本標(biāo)記語言中的標(biāo)簽和層疊樣式表才能生效，甚至對 javascript 腳本都會有所影響。

作用: doctype聲明位于文檔中最前面的位置，處于標(biāo)簽之前，告知瀏覽器使用的是哪種規(guī)范。

doctype三種類型: Strict、Transitional 以及 Frameset

混雜模式：如果不聲明doctype，瀏覽器不引入w3c的標(biāo)準(zhǔn)，那么早期的瀏覽器會按照自己的解析方式渲染頁面。瀏覽器采用自身方式解析頁面的行為稱為"quirks mode（混雜模式也稱怪異模式）"；

標(biāo)準(zhǔn)模式：采用w3c方式解析就是"strict mode（標(biāo)準(zhǔn)模式）"。 如果完全采用strictmode就不會出任何的差錯，但這樣會降低程序的容錯率，加重開發(fā)人員的難度

特殊情況：
對于那些瀏覽器不能識別的doctype ,瀏覽器采用quirks mode；
沒有聲明DTD或者h(yuǎn)tml版本聲明低于4.0采用quirks mode，其他使用standard mode；
ie6中，如果在doctype聲明前有一個xml聲明(比如:<?xml version="1.0" encoding="iso-8859-1"?>)，則采用quirks mode解析

標(biāo)準(zhǔn)模式與怪異模式的區(qū)別:

標(biāo)準(zhǔn)模式：瀏覽器根據(jù)規(guī)范呈現(xiàn)頁面
混雜模式（怪異模式）：頁面以一種比較寬松的兼容方式顯示。

他們最大的不同是對盒模型的解析。
嚴(yán)格模式（strict mode）中：width是內(nèi)容寬度 ，也就是說,元素真正的寬度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width + margin-right;

混雜模式（quirks mode） ：width則是元素的實際寬度 ，內(nèi)容寬度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + 　border-right-width)

2、position幾個屬性的作用？

答：position的常見四個屬性值： relative，absolute，fixed，static。一般都要配合"left"、"top"、"right"以及 "bottom"屬性使用。

1）Static：默認(rèn)位置，設(shè)置為 static 的元素，它始終會處于頁面流給予的位置（static 元素會忽略任何 top、bottom、left 或 right 聲明）。一般不常用。

2）Relative：位置被設(shè)置為 relative 的元素，可將其移至相對于其正常位置的地方，意思就是如果設(shè)置了 relative 值，那么，它偏移的 top，right，bottom，left 的值都以它原來的位置為基準(zhǔn)偏移，而不管其他元素會怎么樣。注意 relative 移動后的元素在原來的位置仍占據(jù)空間。

3）Absolute：位置設(shè)置為 absolute 的元素，可定位于相對于包含它的元素的指定坐標(biāo)。意思就是如果它的

父容器設(shè)置了 position 屬性，并且 position 的屬性值為 absolute 或者 relative，那么就會依據(jù)父容器進(jìn)行偏移。如

果其父容器沒有設(shè)置 position 屬性，那么偏移是以 body 為依據(jù)。注意設(shè)置 absolute 屬性的元素在標(biāo)準(zhǔn)流中不占位置。

4）Fixed：位置被設(shè)置為 fixed 的元素，可定位于相對于瀏覽器窗口的指定坐標(biāo)。不論窗口滾動與否，元素都會留在那個位置。它始終是以 body 為依據(jù)的。 注意設(shè)置 fixed 屬性的元素在標(biāo)準(zhǔn)流中不占位置。

3、px，em，rem的區(qū)別？

答：
1）px 像素（Pixel）。絕對單位。像素 px 是相對于顯示器屏幕分辨率而言的，是一個虛擬長度單位，是計算機(jī)系統(tǒng)的數(shù)字化圖像長度單位，如果 px 要換算成物理長度，需要指定精度 DPI。

2）em 是相對長度單位，相對于當(dāng)前對象內(nèi)文本的字體尺寸。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認(rèn)字體尺寸。它會繼承父級元素的字體大小，因此并不是一個固定的值。

3）rem是CSS3新增的一個相對單位（rootem，根 em），使用 rem 為元素設(shè)定字體大小時，仍然是相對大小，但相對的只是 HTML 根元素。

4）區(qū)別：IE 無法調(diào)整那些使用 px 作為單位的字體大小，而 em 和 rem 可以縮放，rem 相對的只是 HTML 根元素。這個單位可謂集相對大小和絕對大小的優(yōu)點于一身，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。目前，除了 IE8 及更早版本外，所有瀏覽器均已支持 rem。

4、什么是BFC？

答：
1）定義：BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區(qū)域，只有Block-level box 參與， 它規(guī)定了內(nèi)部的Block-level Box 如何布局，并且與這個區(qū)域外部毫不相干。

布局規(guī)則：

A. 內(nèi)部的 Box 會在垂直方向，一個接一個地放置。

B. Box 垂直方向的距離由 margin 決定。屬于同一個 BFC 的兩個相鄰 Box的margin 會發(fā)生重疊。

C. 每個元素的 margin box 的左邊， 與包含塊 border box 的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。

D. BFC 的區(qū)域不會與 float box 重疊。

E. BFC 就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。

F. 計算 BFC 的高度時，浮動元素也參與計算。

3）哪些元素會生成 BFC：

A. 根元素

B. float 屬性不為 none

C. position 為 absolute 或 fixed

D. display 為 inline-block， table-cell，table-caption， flex， inline-flex F. overflow 不為visible

5、表格自動換行怎么實現(xiàn)？

答：word-break：normal 使用瀏覽器默認(rèn)的換行規(guī)則；

break-all允許單詞內(nèi)換行；

keep-all只能在半角空格或連字符處換行

word-wrap：normal 是用瀏覽器默認(rèn)的換行規(guī)則；break-word 在長單詞或 URL 地址內(nèi)部進(jìn)行換行。

6、box-sizing、transition、translate分別是什么？

答：Box-sizing： 用來指定盒模型的大小的計算方式。主要分為boreder-box（從邊框固定盒子大?。?、content-box（從內(nèi)容固定盒子大?。﹥煞N計算方式。

transition： 當(dāng)前元素只要有“屬性”發(fā)生變化時，可以平滑的進(jìn)行過渡。通過 transtion-propety 設(shè)置過渡屬性；

transtion-duration 設(shè)置過渡時間；

trantion-timing-function 設(shè)置過渡速度；

trantion-delay 設(shè)置過渡延時

translate：通過移動改變元素的位置；有 x、y、z 三個屬性

7、選擇器優(yōu)先級是怎樣的？

答：！important>行內(nèi)樣式>id 選擇器>類選擇器>標(biāo)簽選擇器>通配符>繼承

權(quán)重算法：（0，0，0，0）==》第一個 0 對應(yīng)的是 important 的個數(shù)，第二個 0 對應(yīng)的是 id 選擇器的個數(shù)，第三個 0 對應(yīng)的類選擇器的個數(shù)，第四個 0 對應(yīng)的是標(biāo)簽選擇器的個數(shù)，就是當(dāng)前選擇器的權(quán)重。

比較：

先從第一個 0 開始比較，如果第一個 0 大，那么說明這個選擇器的權(quán)重高，如果第一個相同，比較第二個，依次類推

8、Iframe的作用？

答：
用法：Iframe是用來在網(wǎng)頁中插入第三方頁面，早期的頁面使用 iframe 主要是用于導(dǎo)航欄這種很多頁面都相同的部分，這樣可以在切換頁面的時候避免重復(fù)下載。

優(yōu)點：便于修改，模塊分離，像一些信息管理系統(tǒng)會用到。但現(xiàn)在基本上不推薦使用。除非特殊需要，一般不推薦使用。

缺點 :
（1）iframe 的創(chuàng)建比一般的 DOM 元素慢了 1-2 個數(shù)量級

（2）iframe 標(biāo)簽會阻塞頁面的加載，如果頁面的onload 事件不能及時觸發(fā)，會讓用戶覺得網(wǎng)頁加載很慢，用戶體驗不好.在 Safari 和 Chrome 中可以通過 js 動態(tài)設(shè)置 iframe 的 src 屬性來避免阻塞.

（3）iframe 對于 SEO 不友好，替代方案一般就是動態(tài)語言的 Incude 機(jī)制和 ajax 動態(tài)填充內(nèi)容等.

9、有一個導(dǎo)航欄在chrome 里面樣式完好？在 IE 里文字都聚到一起了，是哪個兼容性問題？

答：用了 display：flex 屬性，在 ie10 以下都是無效的。

10、xhtml和 html 有什么區(qū)別？

答：HTML是一種基本的 WEB 網(wǎng)頁設(shè)計語言，XHTML 是一個基于 XML 的置標(biāo)語言最主要的不同：

XHTML元素必須被正確地嵌套。

XHTML元素必須被關(guān)閉。

標(biāo)簽名必須用小寫字母。

XHTML文檔必須擁有根元素。

11、標(biāo)簽上title 與alt 屬性的區(qū)別是什么?

答：Alt 當(dāng)圖片不顯示時，用文字代表。Title為該屬性提供信息。

12、改變元素的外邊距用什么屬性？改變元素的內(nèi)填充用什么屬性？

答：改變元素的外邊距用 margin，改變元素的內(nèi)填充用 padding。

13、在新窗口打開鏈接的方法是？

答：target：_blank。

14、合理的頁面布局中常聽過結(jié)構(gòu)與表現(xiàn)分離，那么結(jié)構(gòu)是什么？表現(xiàn)是什么？

答：結(jié)構(gòu)是 html，表現(xiàn)是 css。

15、簡述對Web 語義化的理解？

答：根據(jù)內(nèi)容的結(jié)構(gòu)（內(nèi)容語義化），選擇合適的標(biāo)簽（代碼語義化）便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時讓瀏覽器的爬蟲和機(jī)器很好地解析。

優(yōu)點

在沒有CSS的情況下，頁面也能呈現(xiàn)出很好地內(nèi)容結(jié)構(gòu)、代碼結(jié)構(gòu):為了裸奔時好看；
用戶體驗：例如title、alt用于解釋名詞或解釋圖片信息、label標(biāo)簽的活用；
有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個關(guān)鍵字的權(quán)重
方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動設(shè)備）以意義的方式來渲染網(wǎng)頁；
便于團(tuán)隊開發(fā)和維護(hù)，語義化更具可讀性，是下一步吧網(wǎng)頁的重要動向，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊都遵循這個標(biāo)準(zhǔn)，可以減少差異化。

如何做？

盡可能少的使用無語義的標(biāo)簽div和span；
在語義不明顯時，既可以使用div或者p時，盡量用p, 因為p在默認(rèn)情況下有上下間距，對兼容特殊終端有利；
不要使用純樣式標(biāo)簽，如：b、font、u等，改用css設(shè)置。
需要強(qiáng)調(diào)的文本，可以包含在strong或者em標(biāo)簽中（瀏覽器預(yù)設(shè)樣式，能用CSS指定就不用他們），strong默認(rèn)樣式是加粗（不要用b），em是斜體（不用i）；
使用表格時，標(biāo)題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開，表頭用th，單元格用td；
表單域要用fieldset標(biāo)簽包起來，并用legend標(biāo)簽說明表單的用途；
每個input標(biāo)簽對應(yīng)的說明文本都需要使用label標(biāo)簽，并且通過為input設(shè)置id屬性，在lable標(biāo)簽中設(shè)置for=someld來讓說明文本和相對應(yīng)的input關(guān)聯(lián)起來。

16、display：none；與 visibility： hidden 的區(qū)別是什么？

答：display：none； 使用該屬性后，HTML 元素（對象）的寬度、高度等各種屬性值都將“丟失”；

visibility：hidden； 使用該屬性后，HTML 元素（對象）僅僅是在視覺上看不見（完全透明），而它所占據(jù)的空間位置仍然存在，也即是說它仍具有高度、寬度等屬性值。

17、塊級元素和有行內(nèi)元素分別有哪些？他們分別有什么特點？空（void）元素有哪些？

塊級元素： div、ul、li、dl、dt、dd、p、h1-h6、blockquote
特點：單獨占一行，可以設(shè)置 width、height、margin，padding
display 屬性值： block

行內(nèi)元素：a、b、span、img、input、strong、select、label、em、button、textarea
特點： 和其他行內(nèi)元素同在一行，不能設(shè)置width、height，margin-top/margin-bottom無效，padding-top/padding-bottom無效
display屬性值： inline

display：inline-block 行內(nèi)塊元素，可以設(shè)置 width，height，margin，padding

空元素：即系沒有內(nèi)容的HTML元素，例如：br、meta、hr、link、input、img

17、cookie、localstorage和 sessionstorage 的區(qū)別？

cookie是網(wǎng)站為了標(biāo)示用戶身份而儲存在用戶本地終端（Client Side）上的數(shù)據(jù)（通常經(jīng)過加密）。
cookie數(shù)據(jù)始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務(wù)器間來回傳遞。

sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。

存儲大小
cookie數(shù)據(jù)大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達(dá)到5M或更大。

有效時間
localStorage 存儲持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù)；
sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動刪除。
cookie 設(shè)置的cookie過期時間之前一直有效，即使窗口或瀏覽器關(guān)閉

作用域不同
sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面；
localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
Web Storage 支持事件通知機(jī)制，可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者。
Web Storage 的 api 接口使用更方便。

了解sessionStorage 和 localStorage

sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，這兩種方式都允許開發(fā)者使用js設(shè)置的鍵值對進(jìn)行操作，在在重新加載不同的頁面的時候讀出它們。這一點與cookie類似?？梢苑奖愕脑趙eb請求之間保存數(shù)據(jù)。有了本地數(shù)據(jù)，就可以避免數(shù)據(jù)在瀏覽器和服務(wù)器間不必要地來回傳遞。

sessionStorage、localStorage、cookie都是在瀏覽器端存儲的數(shù)據(jù)，
其中sessionStorage的概念很特別，引入了一個“瀏覽器窗口”的概念。 sessionStorage是在同源的同窗口（或tab）中，始終存在的數(shù)據(jù)。也就是說只要這個瀏覽器窗口沒有關(guān)閉，即使刷新頁面或進(jìn)入同源另一頁面，數(shù)據(jù)仍然存在。關(guān)閉窗口后，sessionStorage即被銷毀。同時“獨立”打開的不同窗口，即使是同一頁面，sessionStorage對象也是不同的。
Web Storage 數(shù)據(jù)完全存儲在客戶端, 不需要通過瀏覽器的請求將數(shù)據(jù)傳給服務(wù)器, 因此比cookies能夠存儲更多的數(shù)據(jù),大概5M左右。

Web Storage帶來的好處：使用 local storage和session storage主要通過在js中操作這兩個對象來實現(xiàn)，分別為window.localStorage和window.sessionStorage. 這兩個對象均是Storage類的兩個實例，自然也具有Storage類的屬性和方法。

減少網(wǎng)絡(luò)流量：一旦數(shù)據(jù)保存在本地后，就可以避免再向服務(wù)器請求數(shù)據(jù)，因此減少不必要的數(shù)據(jù)請求，減少數(shù)據(jù)在瀏覽器和服務(wù)器間不必要地來回傳遞。

快速顯示數(shù)據(jù)：性能好，從本地讀數(shù)據(jù)比通過網(wǎng)絡(luò)從服務(wù)器獲得數(shù)據(jù)快得多，本地數(shù)據(jù)可以即時獲得。再加上網(wǎng)頁本身也可以有緩存，因此整個頁面和數(shù)據(jù)都在本地的話，可以立即顯示。

臨時存儲：很多時候數(shù)據(jù)只需要在用戶瀏覽一組頁面期間使用，關(guān)閉窗口后數(shù)據(jù)就可以丟棄了，這種情況使用sessionStorage非常方便。

18、瀏覽器本地存儲與服務(wù)器端存儲之間的區(qū)別？

其實數(shù)據(jù)既可以在瀏覽器本地存儲，也可以在服務(wù)器端存儲。
瀏覽器端可以保存一些數(shù)據(jù)，需要的時候直接從本地獲取，sessionStorage、localStorage和cookie都由瀏覽器存儲在本地的數(shù)據(jù)。

服務(wù)器端也可以保存所有用戶的所有數(shù)據(jù)，但需要的時候瀏覽器要向服務(wù)器請求數(shù)據(jù)。
1）服務(wù)器端可以保存用戶的持久數(shù)據(jù)，如數(shù)據(jù)庫和云存儲將用戶的大量數(shù)據(jù)保存在服務(wù)器端。

2）服務(wù)器端也可以保存用戶的臨時會話數(shù)據(jù)。服務(wù)器端的session機(jī)制，如jsp的 session 對象，數(shù)據(jù)保存在服務(wù)器上。

實現(xiàn)上，服務(wù)器和瀏覽器之間僅需傳遞session id即可，服務(wù)器根據(jù)session id找到對應(yīng)用戶的session對象。會話數(shù)據(jù)僅在一段時間內(nèi)有效，這個時間就是server端設(shè)置的session有效期。

服務(wù)器端保存所有的用戶的數(shù)據(jù)，所以服務(wù)器端的開銷較大，而瀏覽器端保存則把不同用戶需要的數(shù)據(jù)分布保存在用戶各自的瀏覽器中。

瀏覽器端一般只用來存儲小數(shù)據(jù)，而服務(wù)器可以存儲大數(shù)據(jù)或小數(shù)據(jù)。
服務(wù)器存儲數(shù)據(jù)安全一些，瀏覽器只適合存儲一般數(shù)據(jù)。

HTML5

1、canvas： <canvas> 元素用于圖形的繪制，通過腳本 (通常是JavaScript)來完成

2、音頻audio
3、視頻video
4、語義性標(biāo)簽： article, nav , footer, section, aside, hgroup等.
5、時間time
6、表單
7、本地存儲
8、websocket
9、拖放 draggable

• 新屬性

  • 拖放: draggable <img draggable="true">
  • 可編輯: contenteditable

• 新事件

  • 拖放 ondrag ondrop
  • 關(guān)閉頁面 onunload
  • 窗口大小改變 onresize

• 取消了一些元素: font center等

• 新的DOCTYPE聲明 <!DOCTYPE html>

• 完全支持CSS3

• Video和Audio

• 2D/3D制圖

• 本地存儲

• 本地SQL數(shù)據(jù)

• Web應(yīng)用

2、CSS篇

CSS3新特性：

選擇器：(: not(.input): 所有class不是“input”的節(jié)點）
圓角：border-radiuis
多列布局：
陰影和反射：box-shadow
文字特效：text-shadow
線性漸變： gradient
旋轉(zhuǎn)：transform
縮放：scale(0.85,0.90)
定位：translate(0px, -30px)
傾斜：skew(-9deg, 0deg)
動畫：Animation
多背景：

怎么讓一個不定寬高的DIV，垂直水平居中？

答：
1）使用CSS方法

父盒子設(shè)置：display：table-cell； text-align：center；vertical-align：middle；

Div 設(shè)置： display：inline-block；vertical-align：middl；

2）使用CSS3 transform

父盒子設(shè)置：display：relative

Div 設(shè)置： transform： translate(-50%，-50%)；position： absolute；top： 50%；left： 50%；

解釋浮動和工作原理

浮動可以理解為讓某個div元素脫離標(biāo)準(zhǔn)流，漂浮在標(biāo)準(zhǔn)流之上，和標(biāo)準(zhǔn)流不是一個層次。
假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那么A元素會跟隨在上一個元素的后邊(如果一行放不下這兩個元素，那么A元素會被擠到下一行)；如果A元素上一個元素是標(biāo)準(zhǔn)流中的元素，那么A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。
清除浮動是為了清除使用浮動元素產(chǎn)生的影響。浮動的元素，高度會塌陷，而高度的塌陷使我們頁面后面的布局不能正常顯示。
關(guān)于清除浮動:清除浮動可以理解為打破橫向排列。 clear: none | left | right | both
對于CSS的清除浮動(clear)，一定要牢記：這個規(guī)則只能影響使用清除的元素本身，不能影響其他元素。

清除浮動

浮動元素后面添加空標(biāo)簽 clear:both
給父標(biāo)簽使用overflow: hidden/auto;zoom:1
父級div定義, 使用偽類:after和zoom
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}

.clearfloat{zoom:1}

zoom:1的作用： 觸發(fā)IE下的hasLayout。zoom是IE瀏覽器專有屬性，可以設(shè)置或檢索對象的縮放比例。

當(dāng)設(shè)置了zoom的值之后，所設(shè)置的元素就會擴(kuò)大或縮小，高度寬度就會重新計算了，這里一旦改變zoom值時其實也會發(fā)生重新渲染，運用這個原理，也就解決了ie下子元素浮動時候父元素不隨著自動擴(kuò)大的問題。

CSS中可以和不可以繼承的屬性

一、無繼承性的屬性

1、display：規(guī)定元素應(yīng)該生成的框的類型

2、文本屬性：

vertical-align：垂直文本對齊

text-decoration：規(guī)定添加到文本的裝飾

text-shadow：文本陰影效果

white-space：空白符的處理

unicode-bidi：設(shè)置文本的方向

3、盒子模型的屬性：
width、height、margin、padding、border

4、背景屬性：background、background-color、background-image、background-repeat、background-position、background-attachment

5、定位屬性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

6、生成內(nèi)容屬性：content、counter-reset、counter-increment

7、輪廓樣式屬性：outline-style、outline-width、outline-color、outline

8、頁面樣式屬性：size、page-break-before、page-break-after

9、聲音樣式屬性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

二、有繼承性的屬性

1、字體系列屬性

font：組合字體

font-family：規(guī)定元素的字體系列

font-weight：設(shè)置字體的粗細(xì)

font-size：設(shè)置字體的尺寸

font-style：定義字體的風(fēng)格

font-variant：設(shè)置小型大寫字母的字體顯示文本，這意味著所有的小寫字母均會被轉(zhuǎn)換為大寫，但是所有使用小型大寫字體的字母與其余文本相比，其字體尺寸更小。

font-stretch：對當(dāng)前的 font-family 進(jìn)行伸縮變形。所有主流瀏覽器都不支持。

font-size-adjust：為某個元素規(guī)定一個 aspect 值，這樣就可以保持首選字體的 x-height。

2、文本系列屬性

text-indent：文本縮進(jìn)

text-align：文本水平對齊

line-height：行高

word-spacing：增加或減少單詞間的空白（即字間隔）

letter-spacing：增加或減少字符間的空白（字符間距）

text-transform：控制文本大小寫

direction：規(guī)定文本的書寫方向

color：文本顏色

3、元素可見性：visibility

4、表格布局屬性：caption-side、border-collapse、border-spacing、empty-cells、table-layout

5、列表布局屬性：list-style-type、list-style-image、list-style-position、list-style

6、生成內(nèi)容屬性：quotes

7、光標(biāo)屬性：cursor

8、頁面樣式屬性：page、page-break-inside、windows、orphans

9、聲音樣式屬性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

三、所有元素可以繼承的屬性

1、元素可見性：visibility

2、光標(biāo)屬性：cursor

四、內(nèi)聯(lián)元素可以繼承的屬性

1、字體系列屬性

2、除text-indent、text-align之外的文本系列屬性

五、塊級元素可以繼承的屬性

1、text-indent、text-align

3、ECMAScript篇

一、 ES5

1、ECMAScript有哪些基本類型?

Undefined, Null, Boolean, Number, String

Object是復(fù)雜數(shù)據(jù)類型, 其本質(zhì)是由一組無序的名值對組成的.

2、原型，原型鏈？

3、閉包

閉包是指有權(quán)訪問另一個函數(shù)作用域中的變量的函數(shù). 創(chuàng)建閉包常見方式,就是在一個函數(shù)內(nèi)部創(chuàng)建另一個函數(shù).

作用: 匿名自執(zhí)行函數(shù) (function (){ ... })(); 創(chuàng)建了一個匿名的函數(shù)，并立即執(zhí)行它，由于外部無法引用它內(nèi)部的變量，因此在執(zhí)行完后很快就會被釋放，關(guān)鍵是這種機(jī)制不會污染全局對象。
緩存, 可保留函數(shù)內(nèi)部的值
實現(xiàn)封裝
實現(xiàn)模板

4、作用域

5、this的理解與用法？

this 在 JavaScript 中主要由以下5種使用場景。

1、函數(shù)調(diào)用，this 綁定全局對象，瀏覽器環(huán)境全局對象為 window
2、內(nèi)部函數(shù)的 this 也綁定全局對象，應(yīng)該綁定到其外層函數(shù)對應(yīng)的對象上，這是 JavaScript的缺陷，用that替換。
3、構(gòu)造函數(shù)使用，this 綁定到新創(chuàng)建的對象。
4、對象方法使用，this 綁定到該對象。
5、使用apply或call調(diào)用 this 將會被顯式設(shè)置為函數(shù)調(diào)用的第一個參數(shù)。

6、call、apply 、bind的用法與區(qū)別？

call/apply用法：都能繼承另一個對象的方法和屬性,區(qū)別在于參數(shù)列表不一樣

區(qū)別：Function.apply(obj, args) args是一個數(shù)組,作為參數(shù)傳給Function
Function.call(obj, arg1, arg2,...) arg*是參數(shù)列表
apply一個妙用: 可以將一個數(shù)組默認(rèn)的轉(zhuǎn)化為一個參數(shù)列表
舉個栗子: 有一個數(shù)組arr要push進(jìn)一個新的數(shù)組中去, 如果用call的話需要把數(shù)組中的元素一個個取出來再push, 而用apply只有Array.prototype.push.apply(this, arr)

bind用法:
bind()函數(shù)會創(chuàng)建一個新函數(shù), 為綁定函數(shù)。當(dāng)調(diào)用這個綁定函數(shù)時,綁定函數(shù)會以創(chuàng)建它時傳入bind方法的第一個參數(shù)作為this,傳入bind方法的第二個以及以后的參數(shù)加上綁定函數(shù)運行時本身的參數(shù)按照順序作為原函數(shù)的參數(shù)來調(diào)用原函數(shù).

一個綁定函數(shù)也能使用new操作符創(chuàng)建對象：這種行為就像把原函數(shù)當(dāng)成構(gòu)造器。提供的 this 值被忽略，同時調(diào)用時的參數(shù)被提供給模擬函數(shù)。

7、jsonp

8、偽數(shù)組

偽數(shù)組是能通過Array.prototype.slice 轉(zhuǎn)換為真正的數(shù)組的帶有l(wèi)ength屬性的對象
比如arguments對象,還有像調(diào)用getElementsByTagName,document.childNodes之類的，它們都返回NodeList對象都屬于偽數(shù)組
我們可以通過Array.prototype.slice.call(fakeArray)將偽數(shù)組轉(zhuǎn)變?yōu)檎嬲腁rray對象: 返回新數(shù)組而不會修改原數(shù)組

9、undefined和null的區(qū)別, 以及對undeclared的理解？

null表示沒有對象, 即此處不該有此值. 典型用法:
（1） 作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對象。

（2） 作為對象原型鏈的終點。

( 3 ) null可以作為空指針. 只要意在保存對象的值還沒有真正保存對象,就應(yīng)該明確地讓該對象保存null值.

undefined表示缺少值, 即此處應(yīng)該有值, 但還未定義.
（1）變量被聲明了，但沒有賦值時，就等于undefined。

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

（3）對象沒有賦值的屬性，該屬性的值為undefined。

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

undeclared即為被污染的命名, 訪問沒有被聲明的變量, 則會拋出異常, 終止執(zhí)行. 即undeclared是一種語法錯誤

10、事件冒泡機(jī)制:

從目標(biāo)元素開始，往頂層元素傳播。途中如果有節(jié)點綁定了相應(yīng)的事件處理函數(shù)，這些函數(shù)都會被一次觸發(fā)。如果想阻止事件起泡，可以使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）來組織事件的冒泡傳播。

二、 ES6

1、let和const關(guān)鍵字: 可以把let看成var，只是它定義的變量被限定在了特定范圍內(nèi)才能使用，而離開這個范圍則無效。const則很直觀，用來定義常量，即無法被更改值的變量。

2、箭頭函數(shù)，inputs => outputs：剪頭操作符左邊是輸入的參數(shù)，而右邊則是進(jìn)行的操作以及返回的值

3、字符串模板: ES6中允許使用反引號 ` 來創(chuàng)建字符串，此種方法創(chuàng)建的字符串里面可以包含由美元符號加花括號包裹的變量${vraible}。

4、Promises是處理異步操作的一種模式

5、class關(guān)鍵字，ES6提供的類實際上就是JS原型模式的包裝

6、默認(rèn)參數(shù)值：現(xiàn)在可以在定義函數(shù)的時候指定參數(shù)的默認(rèn)值了，而不用像以前那樣通過邏輯或操作符來達(dá)到目的了。

7、for of值遍歷 每次循環(huán)它提供的不是序號而是值。

8、Map, Set

9、自動解析數(shù)組或?qū)ο笾械闹?。比如若一個函數(shù)要返回多個值，常規(guī)的做法是返回一個對象，將每個值做為這個對象的屬性返回。但在ES6中，利用解構(gòu)這一特性，可以直接返回一個數(shù)組，然后數(shù)組中的值會自動被解析到對應(yīng)接收該值的變量中。

10、Math, Number, String, Object的新API

11、iterator, generator

4、DOM篇

DOM是針對HTML和XML文檔的一個API(應(yīng)用程序編程接口)，DOM描繪了一個層次化的節(jié)點樹, 允許開發(fā)人員添加, 移除和修改頁面的某一部分.

常用的DOM方法

getElementById(id)
getElementsByTagName()
appendChild(node)
removeChild(node)
replaceChild()
insertChild()
createElement()
createTextNode()
getAttribute()
setAttribute()

常用的DOM屬性

innerHTML 節(jié)點(元素)的文本值
parentNode 節(jié)點(元素)的父節(jié)點
childNodes
attributes 節(jié)點(元素)的屬性節(jié)點

5、瀏覽器知識，以及常見兼容問題篇

瀏覽器知識

先說一下瀏覽器的結(jié)構(gòu)：

1、用戶界面（UI） - 包括菜單欄、工具欄、地址欄、后退/前進(jìn)按鈕、書簽?zāi)夸浀?，也就是能看到的除了顯示頁面的主窗口之外的部分；
2、瀏覽器引擎（Rendering engine） - 也被稱為瀏覽器內(nèi)核、渲染引擎，主要負(fù)責(zé)取得頁面內(nèi)容、整理信息（應(yīng)用CSS）、計算頁面的顯示方式，然后會輸出到顯示器或者打印機(jī)；
3、JS解釋器 - 也可以稱為JS內(nèi)核，主要負(fù)責(zé)處理javascript腳本程序，一般都會附帶在瀏覽器之中，例如chrome的V8引擎；
4、網(wǎng)絡(luò)部分 - 主要用于網(wǎng)絡(luò)調(diào)用，例如：HTTP請求，其接口與平臺無關(guān)，并為所有的平臺提供底層實現(xiàn)；
5、UI后端 - 用于繪制基本的窗口部件，比如組合框和窗口等。
6、數(shù)據(jù)存儲 - 保存類似于cookie、storage等數(shù)據(jù)部分，HTML5新增了web database技術(shù)，一種完整的輕量級客戶端存儲技術(shù)。

注：IE只為每個瀏覽器窗口啟用單獨的進(jìn)程，而chrome瀏覽器卻為每個tab頁面單獨啟用進(jìn)程，也就是每個tab都有獨立的渲染引擎實例。

現(xiàn)在的主流瀏覽器：

IE、Firefox、Safari、Chrome、Opera。

它們的瀏覽器內(nèi)核（渲染引擎）：
IE--Trident、
FF(Mozilla)--Gecko、
Safari--Webkit、
Chrome--Blink（WebKit的分支）、
Opera--原為Presto，現(xiàn)為Blink。
因此在開發(fā)中，兼容IE、FF、Opera（Presto引擎是逐步放棄的）、Chrome和Safari中的一種即可，Safari、Chrome的引擎是相似的。

文件加載順序

瀏覽器加載頁面上引用的CSS、JS文件、圖片時，是按順序從上到下加載的，每個瀏覽器可以同時下載文件的個數(shù)不同，因此經(jīng)常有網(wǎng)站將靜態(tài)文件放在不同的域名下，這樣可以加快網(wǎng)站打開的速度。

reflow

在加載JS文件時，瀏覽器會阻止頁面的渲染，因此將js放在頁面底部比較好。
因為如果JS文件中有修改DOM的地方，瀏覽器會倒回去把已經(jīng)渲染過的元素重新渲染一遍，這個回退的過程叫reflow。
CSS文件雖然不影響js文件的加載，但是卻影響js文件的執(zhí)行，即使js文件內(nèi)只有一行代碼，也會造成阻塞。因為可能會有var width = $('#id').width()這樣的語句，這意味著，js代碼執(zhí)行前，瀏覽器必須保證css文件已下載和解析完成。
辦法：當(dāng)js文件不需要依賴css文件時，可以將js文件放在頭部css的前面。

常見的能引起reflow的行為：

1、改變窗囗大小
2、改變文字大小
3、添加/刪除樣式表
4、腳本操作DOM
5、設(shè)置style屬性

reflow是不可避免的，只能盡量減小，常用的方法有：

1.盡量不用行內(nèi)樣式style屬性，操作元素樣式的時候用添加去掉class類的方式
2.給元素加動畫的時候，可以把該元素的定位設(shè)置成absolute或者fixed，這樣不會影響其他元素

repaint

另外，有個和reflow相似的術(shù)語，叫做repaint（重繪），在元素改變樣式的時候觸發(fā)，這個比reflow造成的影響要小，所以能觸發(fā)repaint解決的時候就不要觸發(fā)reflow……

瀏覽器常見兼容問題

問題1：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補丁和內(nèi)補丁不同.

即隨便寫幾個標(biāo)簽, 在不加樣式控制的情況下, 各自的margin和padding差異較大.
解決方法: CCS里: *{margin:0; padding:0}

問題2：塊屬性標(biāo)簽float后，又有橫行的margin情況下，在IE6顯示margin比設(shè)置的大

會使得ie6后面的一塊被頂?shù)较乱恍?
解決方案: 在float的標(biāo)簽樣式中加入 display: inline; 將其轉(zhuǎn)化為行內(nèi)屬性

問題3：設(shè)置較小高度標(biāo)簽（一般小于10px），在IE6，IE7，遨游中高度超出自己設(shè)置高度

IE6、7和遨游里這個標(biāo)簽的高度不受控制，超出自己設(shè)置的高度
解決方案: 給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-height 小于你設(shè)置的高度
原因: ie8之前的瀏覽器都會給標(biāo)簽一個最小默認(rèn)的行高的高度. 即使標(biāo)簽是空的,這個標(biāo)簽的高度還是會達(dá)到默認(rèn)的行高.

問題4：行內(nèi)屬性標(biāo)簽，設(shè)置display:block后采用float布局，又有橫行的margin的情況，IE6間距bug

解決: 在display:block;后面加入display:inline;display:table;

問題5：圖片默認(rèn)有間距

幾個img標(biāo)簽放在一起的時候，有些瀏覽器會有默認(rèn)的間距，加了問題一中提到的通配符也不起作用。
解決: 使用float屬性為img布局

問題6：標(biāo)簽最低高度設(shè)置min-height不兼容

因為min-height本身就是一個不兼容的CSS屬性，所以設(shè)置min-height時不能很好的被各個瀏覽器兼容
如果我們要設(shè)置一個標(biāo)簽的最小高度200px，需要進(jìn)行的設(shè)置為：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

問題7：透明度的兼容CSS設(shè)置

使用hacker
IE6認(rèn)識的hacker是下劃線_和*
IE7,遨游認(rèn)識的hacker是*

問題8：IE ol的序號全為1, 不遞增

解決: li設(shè)置樣式{display: list-item}

6、網(wǎng)絡(luò)協(xié)議篇

7、網(wǎng)絡(luò)安全篇

8、性能優(yōu)化篇

如何對網(wǎng)站的文件和資源進(jìn)行優(yōu)化?

1、文件合并（同上題“假若你有5個不同的 CSS 文件, 加載進(jìn)頁面的最好方式是？”）
減少調(diào)用其他頁面、文件的數(shù)量。一般我們?yōu)榱俗岉撁嫔鷦踊顫姇罅渴褂胋ackground來加載背景圖，而每個 background的圖像都會產(chǎn)生1次HTTP請求，要改善這個狀況，可以采用css的1個有用的background-position屬 性來加載背景圖，我們將需要頻繁加載的多個圖片合成為1個單獨的圖片，需要加載時可以采用：background:url(....) no-repeat x-offset y-offset;的形式加載即可將這部分圖片加載的HTTP請求縮減為1個。
每個http請求都會產(chǎn)生一次從你的瀏覽器到服務(wù)器端網(wǎng)絡(luò)往返過程，并且導(dǎo)致推遲到達(dá)服務(wù)器端和返回瀏覽器端的時間，我們稱之為延遲。

2、文件最小化/文件壓縮
即將需要傳輸?shù)膬?nèi)容壓縮后傳輸?shù)娇蛻舳嗽俳鈮?，這樣在網(wǎng)絡(luò)上傳輸?shù)?數(shù)據(jù)量就會大幅減小。通常在服務(wù)器上的Apache、Nginx可以直接開啟這個設(shè)置，也可以從代碼角度直接設(shè)置傳輸文件頭，增加gzip的設(shè)置，也可以 從 負(fù)載均衡設(shè)備直接設(shè)置。不過需要留意的是，這個設(shè)置會略微增加服務(wù)器的負(fù)擔(dān)。建議服務(wù)器性能不是很好的網(wǎng)站，要慎重考慮。
js和css文件在百度上搜一個壓縮網(wǎng)站就能壓縮，但是在實際開發(fā)的項目中，使用gulp、webpack等工具可以打包出合并壓縮后的文件，小圖片可以在打包時轉(zhuǎn)換成base64方式引入，大圖片可以被壓縮，html文件也是可以被壓縮的

3、使用 CDN 托管
CDN的全稱是Content Delivery Network，即內(nèi)容分發(fā)網(wǎng)絡(luò)。其基本思路是盡可能避開互聯(lián)網(wǎng)上有可能影響數(shù)據(jù)傳輸速度和穩(wěn)定性的瓶頸和環(huán)節(jié)，使內(nèi)容傳輸?shù)母?、更穩(wěn)定。其目的是使用戶可就近取得所需內(nèi)容，解決 Internet網(wǎng)絡(luò)擁擠的狀況，提高用戶訪問網(wǎng)站的響應(yīng)速度。

4、緩存的使用
Ajax調(diào)用都采用緩存調(diào)用方式，一般采用附加特征參數(shù)方式實現(xiàn)，注意其中的<script src=”xxx.js?{VERHASH}”，{VERHASH}就是特征參數(shù)，這個參數(shù)不變化就使用緩存文件，如果發(fā)生變化則重新下載新文件或更新信息。

5、css文件放置在head，js放置在文檔尾

6、在服務(wù)器端配置control-cache last-modify-date

7、在服務(wù)器配置Entity-Tag if-none-match

8、用更少的時間下載更多的文件，提高網(wǎng)站加載速度，提高用戶體驗，可以使用以下方法：
1）css sprites----將小圖片合并為一張大圖片，使用background-position等css屬性取得圖片位置
2）將資源放在多個域名下-----打開控制臺，可以看到很多網(wǎng)站都是這么做的~
3）圖片延遲加載-----很多電商網(wǎng)站、新聞網(wǎng)站，尤其是用到瀑布流展示圖片的時候，很多都這么做了，這個技術(shù)已經(jīng)很普遍~

9、書寫代碼的時候要注意優(yōu)化：
1）css
將可以合并的樣式合并起來，比如margin-top、margin-bottom等。
給img圖片設(shè)置寬高，因為瀏覽器渲染元素的時候沒有找到這兩個參數(shù)，需要一邊下載圖片一邊計算大小，如果圖片很多，瀏覽器需要不斷地調(diào)整頁面。這不但影響速度，也影響瀏覽體驗。當(dāng)瀏覽器知道了高度和寬度參數(shù)后，即使圖片暫時無法顯示，頁面上也會騰出圖片的空位，然后繼續(xù)加載后面的內(nèi)容。從而加載時間快了，瀏覽體驗也更好了。
2）js
少改變DOM元素，少觸發(fā)reflow，可以復(fù)用的代碼提出來寫成公共的等等……
3）img
優(yōu)化圖片，不失真的情況下盡量減少圖片大小，使用iconfont等

前端開發(fā)的優(yōu)化問題：

1、減少http請求次數(shù)：css spirit,data uri

2、JS，CSS源碼壓縮

3、前端模板 JS+數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費，前端用變量保存AJAX請求結(jié)果，每次操作本地變量，不用請求，減少請求次數(shù)

4、用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能

5、用setTimeout來避免頁面失去響應(yīng)

6、用hash-table來優(yōu)化查找

7、當(dāng)需要設(shè)置的樣式很多時設(shè)置className而不是直接操作style

8、少用全局變量

9、緩存DOM節(jié)點查找的結(jié)果

10、避免使用CSS Expression

11、圖片預(yù)載

12、避免在頁面的主體布局中使用table，table要等其中的內(nèi)容完全下載之后才會顯示出來，顯示比div+css布局慢

如何控制網(wǎng)頁在網(wǎng)絡(luò)傳輸過程中的數(shù)據(jù)量

1、啟用GZIP壓縮

2、保持良好的編程習(xí)慣，避免重復(fù)的CSS，JavaScript代碼，多余的HTML標(biāo)簽和屬性