一、HTTP 與 HTTPS 的區(qū)別

1. http不需要證書；https協(xié)議需要到ca申請(qǐng)證書，一般免費(fèi)證書較少，因而需要一定費(fèi)用。?

2. http信息是明文傳輸；https協(xié)議是由SSL+http協(xié)議構(gòu)建的可進(jìn)行加密傳輸、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議，可以防止傳輸內(nèi)容被竊取篡改，比http協(xié)議安全。

3. http和https使用的是完全不同的連接方式，用的端口也不一樣，前者是80，后者是443。

二、CSS Sprite是什么，談?wù)勥@個(gè)技術(shù)的優(yōu)缺點(diǎn)？

CSS sprites在國(guó)內(nèi)很多人叫css精靈，是一種網(wǎng)頁圖片應(yīng)用處理方式。它允許你將一個(gè)頁面涉及到的所有零星圖片都包含到 中去，減少對(duì)服務(wù)器的請(qǐng)求次數(shù)，提高訪問速度。

1、優(yōu)點(diǎn)：

（1）減少了網(wǎng)頁的http請(qǐng)求，從而大大的提高了頁面的性能。

（2）解決了網(wǎng)頁設(shè)計(jì)師在圖片命名上的困擾，只需對(duì)一張集合的圖片上命名就可以了，不需要對(duì)每一個(gè)小元素命名，從而提高了網(wǎng)頁的制作效率。

（3）換風(fēng)格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個(gè)網(wǎng)頁的風(fēng)格就可以改變。維護(hù)起來也很方便。

2、缺點(diǎn)：

（1）在圖片合并的時(shí)候，你要把多張圖片有序的合理的合并成一張圖片，還要留好足夠的空間，防止板塊內(nèi)顯示不必要的背景。在寬屏，高分辨率的屏幕下的自適應(yīng)頁面，圖片如果不夠?qū)?，很容易將背景斷裂?/p>

（2）CSS Sprites在開發(fā)的時(shí)候比較麻煩，要通過photoshop或其他工具測(cè)量計(jì)算每一個(gè)背景單元的精確位，很繁瑣。

（3）CSS Sprites在維護(hù)的時(shí)候比較麻煩，如果頁面背景有少許改動(dòng)，一般就要改這張合并的圖片，無需改的最好不要?jiǎng)?，這樣避免改動(dòng)更多的css，如果在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字加了，還要改動(dòng)css。

三、行內(nèi)、行內(nèi)塊、塊級(jí)元素，空（void）元素有哪些？CSS的盒模型？

• 行內(nèi)元素有：a b span i em img input select strong ins u

• 塊級(jí)元素有：div ul ol li dl dt dd h1~h6 p

• 行內(nèi)塊元素：img input td

• 空（void）元素：br hr link

• 盒模型：margin border padding content

四、前端頁面有哪三層構(gòu)成，分別是什么？作用是什么？

網(wǎng)頁分成三個(gè)層次，即：結(jié)構(gòu)層、表示層、行為層。

????1、結(jié)構(gòu)層（structurallayer）由HTML 或XHTML 之類的標(biāo)記語言負(fù)責(zé)創(chuàng)建。標(biāo)簽，也就是那些出現(xiàn)在尖括號(hào)里的單詞，對(duì)網(wǎng)頁內(nèi)容的語義含義做出這些標(biāo)簽不包含任何關(guān)于如何顯示有關(guān)內(nèi)容的信息。例如，P標(biāo)簽表達(dá)了這樣一種語義："這是一個(gè)文本段。"

????2、表示層（presentationlayer）由CSS 負(fù)責(zé)創(chuàng)建。CSS對(duì)"如何顯示有關(guān)內(nèi)容"的問題做出了回答。

????3、行為層（behaviorlayer）負(fù)責(zé)回答"內(nèi)容應(yīng)該如何對(duì)事件做出反應(yīng)"這一問題。這是Javascript 語言和DOM 主宰的領(lǐng)域。

五、html 標(biāo)簽有何區(qū)別？如何轉(zhuǎn)換？

????1）行內(nèi)標(biāo)簽不能設(shè)置寬高，僅可設(shè)置行高，不能容納塊級(jí)元素，只能容納其他行內(nèi)元素和文本，設(shè)置 margin 和 padding 上下值無效、左右值有效，行內(nèi)元素一條水平線內(nèi)排列，在同一行。

????塊級(jí)標(biāo)簽獨(dú)占一行，可以設(shè)置寬高，可以容納塊級(jí)元素、行內(nèi)元素及其他內(nèi)聯(lián)元素等，可以設(shè)置 margin 和 padding，塊級(jí)元素獨(dú)占一行垂直向下排列。

????行內(nèi)塊級(jí)標(biāo)簽綜合了行內(nèi)標(biāo)簽和塊級(jí)標(biāo)簽的特性，在一行上排列，可以設(shè)置寬高和內(nèi)外邊距。

????2）這三類標(biāo)簽可以相互轉(zhuǎn)換，通過修改 display 的屬性值。

????display:inline; 設(shè)置為行內(nèi)元素? ? ? display:block; 設(shè)置為塊級(jí)元素? ? ? ?display:inline-block; 設(shè)置為行內(nèi)塊級(jí)標(biāo)簽

六、常見的瀏覽器內(nèi)核

????Trident內(nèi)核（IE內(nèi)核）：IE、百度

????Gecko內(nèi)核（Firefox內(nèi)核）：火狐

????Presto內(nèi)核：Opera7及以上。

????Webkit內(nèi)核：Safari、Chrome（現(xiàn)在是Blink內(nèi)核）。

瀏覽器內(nèi)核又可以分成兩部分：渲染引擎和JS引擎。渲染引擎主要負(fù)責(zé)取得網(wǎng)頁的內(nèi)容、整理訊息、計(jì)算網(wǎng)頁的顯示方式等，JS引擎則是解析 JavaScript語言，執(zhí)行JavaScript語言來實(shí)現(xiàn)網(wǎng)頁的動(dòng)態(tài)效果。

七、HTML5有哪些新特性

????1. 語義化標(biāo)簽：

header定義文檔頭部、nav定義導(dǎo)航鏈接、section定義文檔中的節(jié)，段落、article定義頁面獨(dú)立內(nèi)容區(qū)域、aside定義頁面的側(cè)邊欄內(nèi)容、details定義文檔某部分細(xì)節(jié)、dialog定義對(duì)話框，提示框，等等。

????2. 音頻、視頻標(biāo)簽：audio、vedio

? ? 3. 增強(qiáng)input表單的類型和屬性：

1) 新增類型：

2) 新增屬性：

????4.?Canvas繪圖

????5. SVG繪圖

????6. 地理定位： Geolocation

????7. 拖放API: drag

? ? 8. Web Worker: 是運(yùn)行在后臺(tái)的 JavaScript，獨(dú)立于其他腳本，不會(huì)影響頁面的性能。

????9.?Web Storage：HTML5開始提供的一種在當(dāng)個(gè)TCP連接上進(jìn)行全雙工通訊的協(xié)議。