． HTML

1. img標(biāo)記屬于什么類型元素？

答案：屬于行內(nèi)(inline)元素.

2.結(jié)構(gòu)標(biāo)記有哪些？他們與div有什么相同之處，又有什么不同之處？

答案：header，nav，section，aside，footer，article

都是用來做布局的，但結(jié)構(gòu)標(biāo)記提高了語義性和可讀性.

3. 行內(nèi)元素，塊元素，空元素有哪些？

答案：

（1）行內(nèi)元素：

a， span，i，img，b ,s,u，sup,sub,label

（2）塊元素：

div ，dl，dt，dd，ul，li，ol，p，h1，h2，h3，h4，h5，結(jié)構(gòu)標(biāo)記

（3）空元素：

br-換行，hr-水平分割線

4. 什么是前端？

答案：

用HTML/CSS/JavaScript以及更多的框架技術(shù)，編寫網(wǎng)站頁面、App應(yīng)用、小程序、2D&3D游戲、Web VR&AR等應(yīng)用，通過內(nèi)容設(shè)計、交互動畫、數(shù)據(jù)操作構(gòu)建項目與用戶的交互界面。前端工程師在項目中可以與UI設(shè)計師和后臺程序員合作，實現(xiàn)設(shè)計意圖并調(diào)用后臺接口，也可以獨立工作完成強用戶交互的各類應(yīng)用。

5. HTML、CSS、JavaScript的作用是什么，為什么會產(chǎn)生這三種語言？

答案：這三種語言都是用來編寫網(wǎng)頁的，HTML用于搭建網(wǎng)頁結(jié)構(gòu)展示內(nèi)容，CSS用于修飾HTML元素，JavaScript用于添加網(wǎng)頁的交互驗證。

6. 說說HTML5，CSS3的新特性，平時使用過哪些？

答案：

H5新特性：

結(jié)構(gòu)標(biāo)記（header，footer，section，article，aside，nav），新表單元素（url，email，number，date，month，color等），canvas，audio，video，地理定位，拖放，web存儲，Web Workers，WebSocket等。

CSS3新特性：

復(fù)雜選擇器器（屬性選擇器，偽類選擇器，偽元素選擇器，兄弟選擇器等），邊框倒角，邊框陰影，漸變，轉(zhuǎn)換，過渡，動畫，彈性盒子，媒體查詢技術(shù)等。

7、Doctype 作用? 嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?

（1）、 聲明位于文檔中的最前面，處于 標(biāo)簽之前。告知瀏覽器的解析器，用什么文檔類型 規(guī)范來解析這個文檔。

（2）、嚴(yán)格模式的排版和 JS 運作模式是 以該瀏覽器支持的最高標(biāo)準(zhǔn)運行。

（3）、在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。

（4）、DOCTYPE 不存在或格式不正確會導(dǎo)致文檔以混雜模式呈現(xiàn)。

8、對語義化如何理解？

答案：用正確的標(biāo)簽做正確的事情！

HTML 語義化就是讓頁面的內(nèi)容結(jié)構(gòu)化，便于對瀏覽器、搜索引擎解析；在沒有樣式 CCS 情況下也以一種文檔格式顯示，并且是容易閱讀的。搜索引擎的爬蟲依賴于標(biāo)記來確定上下文和各個關(guān)鍵字的權(quán)重，利于 SEO。使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。

9、iframe 有那些缺點？

iframe 會阻塞主頁面的 Onload 事件；

iframe 和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。使用 iframe 之前需要考慮這兩個缺點。如果需要使用 iframe，最好是通過 javascript 動態(tài)給 iframe 添加 src 屬性值，這樣可以可以繞開以上兩個問題。

10.對 WEB 標(biāo)準(zhǔn)以及 W3C 的理解與認(rèn)識？

答案：

標(biāo)簽閉合、標(biāo)簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外鏈 css 和 js 腳本、結(jié)構(gòu)與行為表現(xiàn)的分離、文件下載與頁面速度更快、內(nèi)容能被更多的用戶所訪問、內(nèi)容能被更廣泛的設(shè)備所訪問、更少的代碼和組件，容易維護(hù)、改版方便，不需要變動頁面內(nèi)容、提供打印版本而不需要復(fù)制內(nèi)容、提高網(wǎng)站易用性.

11.XHTML 和 HTML 有什么區(qū)別？

答案：

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

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

XHTML 元素必須被關(guān)閉。標(biāo)簽名必須用小寫字母。

XHTML 文檔必須擁有根元素。

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

答案：alt ,當(dāng)圖片不顯示時，在圖片位置所顯示的文字。

title,鼠標(biāo)移入到元素上時，為該元素添加提示信息。

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

答案：解決方案包括：

文件合并

文件最小化/文件壓縮

使用 CDN 托管

緩存的使用.

二． CSS3

1.隱藏網(wǎng)頁中的元素有幾種方式？這些方法有什么區(qū)別？

答案：三種方法，

display:none; 脫離文檔流，不占頁面空間,會改變頁面布局。

visivility:hidden ；不會脫離文檔流，不會改變頁面布局，仍占頁面空間

opacity:0，該元素隱藏起來了，但不會改變頁面布局，并且，如果該元素已經(jīng)綁定一些事件，如click事件，那么點擊該區(qū)域，也能觸發(fā)點擊事件

2.如何解決子元素的上外邊距溢出？

答案：在父元素的第一個子元素位置處添加一個空的table標(biāo)記.

3.常用來設(shè)置透明度的方式有幾種？他們之間有何區(qū)別？

答案：opacity或rgba

opacity能設(shè)置與元素相關(guān)各種顏色的透明度

rgba()只能設(shè)置當(dāng)前某一種顏色的透明度

4.浮動會對父元素的高度帶來什么影響？如何解決這個問題？

答案：子元素一旦浮動，父元素的高度為0，在父元素最后一個子元素位置處添加一個空的塊級元素，并設(shè)置其clear屬性值為both.

.clear:after{

display:block;

content:””;

clear:both;

}

5.哪些元素默認(rèn)有外邊距？

答案：body，p，h1-h6，ul，ol，dl，pre

6.網(wǎng)頁中如何定義錨點？如何連接到錨點位置？

答案：a標(biāo)記用name定義錨點，其他標(biāo)記用id屬性定義錨點，

連接到錨點的位置：href="#錨點名稱"

7.框模型默認(rèn)的計算方式是什么？要改變默認(rèn)的計算方式用哪個屬性及值？

答案：

實際占地寬度=左右外邊距+左右邊框+左右內(nèi)邊距+width

實際占地高度=上下外邊距+上下邊框+上下內(nèi)邊距+height

改變計算方式 box-sizing:border-box

8.實現(xiàn)時針轉(zhuǎn)動效果需要用到CSS中哪些關(guān)鍵技術(shù)？

答案：旋轉(zhuǎn)，動畫，絕對定位

9.設(shè)置行內(nèi)元素居中對齊用什么屬性？

答案：text-align：center

10.如果要將表單中控件的值提交給服務(wù)器必須為控件設(shè)置什么屬性？

答案：name和value屬性

11.transition和animation的區(qū)別？

答案：

Animation和transition大部分屬性是相同的，他們都是隨時間改變元素的屬性值，他們的主要區(qū)別是transition需要觸發(fā)一個事件才能改變屬性，

而animation不需要觸發(fā)任何事件的情況下也會隨時間改變屬性值，并且transition為2幀，從from .... to，而animation可以一幀一幀的，也可以理解為一個animation是由多個transition組成。

12. 如何實現(xiàn)水平垂直居中？

答案：

1、定位+外邊距 盒子寬高已知， position: absolute; left: 50%; top: 50%; margin-left:-自身一半寬度; margin-top: -自身一半高度;

2、定位+transform 盒子高寬已知，

#container{ position:relative; border:1px solid red; width:800px; height:600px; }

#center{ width:100px; height:100px; background:blue; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); }

3、flex 布局

父級：

display: flex;

align-items: center;

justify-content: center;

13. 盒子模型你是怎么理解的？

答案：

元素框處理元素內(nèi)容，內(nèi)邊距外邊距以及邊框的計算方式。

盒子模型有兩種，W3C和IE盒子模型

（1）w3c的盒模型width=content，不包括margin，padding,border

（2）IE盒模型width=content+padding+border

（3）box-sizng border-box在已設(shè)定的寬度和高度之內(nèi)去設(shè)定padding和border

content-box在已設(shè)定的高度和寬度之外設(shè)置padding和border

14. src和href的區(qū)別？

答案：

（1）href：

href是Hypertext Reference的縮寫，表示超文本引用。用來建立當(dāng)前元素和文檔之間的鏈接。

并行下載該文檔，不會停止對當(dāng)前文檔的處理

（2）src：

src是source的縮寫，src指向的內(nèi)容會嵌入到文檔當(dāng)前標(biāo)簽所在位置

如img、script、iframe當(dāng)瀏覽器解析到該元素時，會暫停瀏覽器的渲染，直到該資源加載完畢。

15. 說出link和import的區(qū)別？

答案：

（1）使用方法不同：

link一般在html頭部定義，作為html標(biāo)簽，鏈接資源，主要用于鏈接外部的樣式表

import一般定義在css內(nèi)部，并且一定要在其他所有規(guī)則之前，也就是一般寫在文件頭部，并且專門拿來鏈css的。

（2）加載順序差別

import比link延遲一些，它會等到頁面下載完后才加載，因而可能會產(chǎn)生閃爍

16. 改變頁面元素位置的定位方式及他們的區(qū)別？

答案：

relative 相對定位 相對于自身原來位置進(jìn)行偏移，仍處于標(biāo)準(zhǔn)文檔流中；

absolute 絕對定位 相對于最近的已定位的祖先元素, 有已定位(指position不是static的元素)祖先元素, 以最近的祖先元素為參考標(biāo)準(zhǔn)。如果無已定位祖先元素, 以body元素為偏移參照， 完全脫離文檔流；

fixed 固定定位的元素會相對于視窗來定位,這意味著即便頁面滾動，它還是會停留在固定的位置。固定定位也會脫離文檔流。

17. display有哪些值，說明他們的作用？

答案：

display的取值可以是none/inline/block/inline-block/table

none:元素隱藏不可見，并且元素也不占頁面空間。

Inline:元素將呈現(xiàn)行內(nèi)元素的特點，多個元素在一行中顯示，不允許修改尺寸，也不能設(shè)置垂直外邊距。

block:元素將呈現(xiàn)塊級元素的特點，每個元素獨占一行，允許修改尺寸。

inline-block:元素將呈現(xiàn)行內(nèi)塊元素的特點，多個元素在一行中顯示，但是可以修改尺寸。

table:元素將呈現(xiàn)表格的特點，由內(nèi)容決定表格的顯示方式。元素獨占一行，允許修改尺寸。

18. 有兩個div，外框和內(nèi)框高度寬度都不定，內(nèi)框垂直水平居中，利用css如何實現(xiàn)？

答案：.center{

display:flex;

justify-content:center;

align-items:center;

}

19. 說說em和rem的區(qū)別

答案：rem是基于html元素的字體大小來決定，而em則根據(jù)使用它的元素的字體大小決定（很多人錯誤以為是根據(jù)父類元素，實際上是元素繼承了父類的屬性才會產(chǎn)生的錯覺）

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

答案：IE 瀏覽器的內(nèi)核 Trident、Mozilla 的 Gecko、Chrome 的 Blink（WebKit 的分支）、 Opera 內(nèi)核原為 Presto，現(xiàn)為 Blink；

21、為什么要初始化 CSS 樣式？

因為瀏覽器的兼容問題，不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的，如果沒對 CSS 初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。當(dāng)然，初始化樣式會對 SEO 有一定的影響，但力求影響最小的情況下初始化。最簡單的初始化方法就是： * {padding: 0; margin: 0;} （不建議）淘寶的樣式初始化： body, h1, h2, h3, h4, h5, h6, hr, p,, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }

body, button, input, select, textarea { font:12px/1.5tahoma, arial, /5b8b/4f53; }

h1, h2, h3, h4, h5, h6{ font-size:100%; }

ul, ol{ list-style:none;}

a{text-decoration:none; }

a:hover {text-decoration:underline; }

img{ border:0;}

button,input, select,textarea{ font-size:100%; }

table { border-collapse:collapse; border-spacing:0; }

22、CSS哪些屬性可以繼承？優(yōu)先級算法如何計算？ CSS3 新增偽類有那些？

答案：

可繼承的樣式： font-size ,font-family ,color, background等;

不可繼承的樣式：border, padding ,margin ,width ,height ;

優(yōu)先級就近原則，同權(quán)重情況下以最近者為準(zhǔn);

優(yōu)先級為: !important > id > class > tag

important 比 內(nèi)聯(lián)優(yōu)先級高

CSS3 新增偽類：

:first-child 選擇屬于其父元素的首個元素。

:last-child 選擇屬于其父元素的最后一個元素。

:only-child 選擇屬于其父元素唯一的元素。

:nth-child(n) 選擇屬于其父元素的任意一個子元素。

:empty 選擇沒有子元素的元素。

:not(selector) 將滿足指定選擇器的元素給排除在外。

23.描述 css reset 的作用。

答案：reset 重置瀏覽器為元素設(shè)置的默認(rèn)樣式，瀏覽器的種類不同，樣式可能不同，重置是為了讓他們統(tǒng)一樣式。

24.清除浮動帶來影響的幾種方式，各自的優(yōu)缺點

答案：

1、直接設(shè)置父元素高度，但不是每次都知道父元素的高度。

2、設(shè)置父元素也浮動，但不是任何時候父元素都需要浮動，而且浮動會影響后續(xù)元素。

3、為父元素設(shè)置 overflow屬性，但如果有內(nèi)容需要溢出顯示的話，也會一同被隱藏。

4、在父元素中，追加空子元素，并設(shè)置其clear:both,但頁面中會多出一個空元素。

5、用內(nèi)容生成的方式:after{content:””;display:block;clear:both;}

25.px 和 em 的區(qū)別

px 和 em 都是長度單位，區(qū)別是，px 的值是固定的，指定是多少就是多少，計算比較容易。em 得值不是固定的，并且 em 會繼承父級元素的字體大小。

瀏覽器的默認(rèn)字體高都是 16px。所以未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么 12px=0.75em, 10px=0.625em

三． AJAX

1.用post方式異步向服務(wù)器端提交數(shù)據(jù)時，需要在發(fā)送請求前設(shè)置什么？提交的數(shù)據(jù)放在什么位置？

答案：xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

數(shù)據(jù)放在send（）括號中

2.什么是異步數(shù)據(jù)加載？

答案：瀏覽器在向服務(wù)器發(fā)送請求的時候，不耽誤用戶在網(wǎng)頁上做其它操作，可以同時開啟多個任務(wù)，并且可以以無刷新的效果來更改頁面中的局部內(nèi)容。

3.異步請求數(shù)據(jù)的步驟分為哪幾步？

答案：創(chuàng)建異步對象，綁定監(jiān)聽事件，創(chuàng)建異步請求，發(fā)送異步請求

var xhr=new XMLHttpRequest();

xhr.onreadystatechange=function(){

if(xhr.readyState==4&&xhr.status==200){

var resText=xhr.responseText;

}

}

xhr.open(method,url,true);

xhr.send(body);

4.異步請求中滿足什么條件時才能取出響應(yīng)的結(jié)果數(shù)據(jù)？

答案：請求狀態(tài)碼為4，響應(yīng)狀態(tài)碼為200時

5.如何理解JSON？

答案：

JSON是JS對象的一種表現(xiàn)方式，即以js對象的數(shù)據(jù)格式表現(xiàn)出來的字符串，JSON中的兩個api如下：

將JSON字符串轉(zhuǎn)換成JSON對象 JSON.parse()

將JSON對象轉(zhuǎn)換成JSON字符串 JSON.stringify()

6. http和https的區(qū)別？

答案：

http傳輸?shù)臄?shù)據(jù)都是未加密的，也就是明文的

https協(xié)議是由http和ssl協(xié)議構(gòu)建的可進(jìn)行加密傳輸和身份認(rèn)證的網(wǎng)絡(luò)協(xié)議，比http協(xié)議的安全性更高。

兩者使用不同的鏈接方式，端口也不同，一般而言，http協(xié)議的端口為80，https的端口為443

7.列舉幾種常見的3和4開頭的狀態(tài)碼以及他們的意義？

答案：

301 ：永久性重定向

302 ：臨時重定向

304 ：請求資源未被修改，命中緩存

400 (錯誤請求) 服務(wù)器不理解請求的語法。

403 (禁止) 服務(wù)器拒絕請求。

404 (未找到) 服務(wù)器找不到請求的網(wǎng)頁。

8. 什么是ajax？有哪些優(yōu)缺點？

答案：AJAX是“Asynchronous JavaScript and XML”的縮寫。他是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。

優(yōu)點：

1.局部刷新頁面,減少用戶心理和實際的等待時間,帶來更好的用戶體驗。

2.減輕服務(wù)器的壓力,按需取數(shù)據(jù),最大程度的減少冗余數(shù)據(jù)請求。

3.基于xml標(biāo)準(zhǔn)化,并被廣泛支持,不需安裝插件。

4.促進(jìn)頁面和數(shù)據(jù)的分離。

缺點：

1.AJAX破壞了瀏覽器的Back和History功能

2.AJAX安全問題

3.對搜索引擎支持較弱

4.破壞程序的異常處理機制

5.AJAX不是很好支持移動設(shè)備

四． Bootstrap

1.用bootstrap中的柵格做網(wǎng)頁布局的基本結(jié)構(gòu)是什么？默認(rèn)將一行分為多少列？

答案：容器中設(shè)置行，行內(nèi)設(shè)置列

默認(rèn)將一行分為12個單元格（列）

2.如何編寫響應(yīng)式網(wǎng)頁？

答案：

(1)聲明viewport元標(biāo)簽

(2)所有容器/文字/圖片 使用相對尺寸

(3)流式布局+彈性布局

(4)使用CSS3 Media Query技術(shù)

3.同時監(jiān)聽多個scss文件的命令是什么？

答案：node-sass -w scss文件夾 –o css文件夾

4.在scss中如何定義混合器以及引用？

答案：

@mixin 混合器名稱{ 樣式聲明 }

通過@include來使用混合器。

5.對于各類尺寸的設(shè)備，Bootstrap設(shè)置的class前綴分別是什么？

答案

超小設(shè)備手機（<768px）：.col-xs-

小型設(shè)備平板電腦（>=768px）：.col-sm-

中型設(shè)備臺式電腦（>=992px）：.col-md-

大型設(shè)備臺式電腦（>=1200px）：.col-lg-

6.Bootstrap如何設(shè)置響應(yīng)式表格？

增加class="table-responsive"

7、使用Bootstrap激活或禁用按鈕要如何操作？

激活按鈕：給按鈕增加.active的class

禁用按鈕：給按鈕增加disabled="disabled"的屬性

8、Bootstrap有哪些關(guān)于<img>的class？

（1）.img-rounded 為圖片添加圓角

（2）.img-circle 將圖片變?yōu)閳A形

（3）.img-thumbnail 縮略圖功能

（4）.img-responsive 圖片響應(yīng)式 (將很好地擴展到父元素)

9、Bootstrap中有關(guān)元素浮動及清除浮動的class？

class="clearfix" 清除浮動

10、Bootstrap如何制作下拉菜單？

（1）將下拉菜單包裹在class="dropdown"的<div>中；

（2）在觸發(fā)下拉菜單的按鈕中添加：class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"

（3）在包裹下拉菜單的ul中添加：class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"

（4）在下拉菜單的列表項中添加：role="presentation"。其中，下拉菜單的標(biāo)題要添加class="dropdown-header"，選項部分要添加tabindex="-1"。

11、Bootstrap如何制作按鈕組？

用class="btn-group"的<div>去包裹按鈕組；class="btn-group-vertical"可設(shè)置垂直按鈕組。

12、Bootstrap中的導(dǎo)航都有哪些？

（1）導(dǎo)航元素：有class="nav nav-tabs"的標(biāo)簽頁導(dǎo)航，還有class="nav nav-pills"的膠囊式標(biāo)簽頁導(dǎo)航；

（2）導(dǎo)航欄：class="navbar navbar-default" role="navigation"；

（3）面包屑導(dǎo)航：class="breadcrumb"

13、Bootstrap中設(shè)置分頁的class？

默認(rèn)的分頁：class="pagination"

14、Bootstrap中如何制作徽章？

<span class="badge">26</span>

15、Bootstrap中超大屏幕的作用是什么？

設(shè)置class="jumbotron"可以制作超大屏幕，該組件可以增加標(biāo)題的大小并增加更多的外邊距。

16、Bootstrap 網(wǎng)格系統(tǒng)列與列之間的間隙寬度是多少？

間隙寬度為30px（一個列的每邊分別是15px）。

17、用Bootstrap，如何設(shè)置文字的對齊方式？

class="text-center" 設(shè)置居中文本

class="text-right" 設(shè)置向右對齊文本

class="text-left" 設(shè)置向左對齊文本.