． HTML

1. img標記屬于什么類型元素？

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

2.結構標記有哪些？他們與div有什么相同之處，又有什么不同之處？

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

都是用來做布局的，但結構標記提高了語義性和可讀性.

3. 行內元素，塊元素，空元素有哪些？

答案：

（1）行內元素：

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

（2）塊元素：

div ，dl，dt，dd，ul，li，ol，p，h1，h2，h3，h4，h5，結構標記

（3）空元素：

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

4. 什么是前端？

答案：

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

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

答案：這三種語言都是用來編寫網頁的，HTML用于搭建網頁結構展示內容，CSS用于修飾HTML元素，JavaScript用于添加網頁的交互驗證。

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

答案：

H5新特性：

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

CSS3新特性：

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

7、Doctype 作用? 嚴格模式與混雜模式如何區分？它們有何意義?

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

（2）、嚴格模式的排版和 JS 運作模式是 以該瀏覽器支持的最高標準運行。

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

（4）、DOCTYPE 不存在或格式不正確會導致文檔以混雜模式呈現。

8、對語義化如何理解？

答案：用正確的標簽做正確的事情！

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

9、iframe 有那些缺點？

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

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

10.對 WEB 標準以及 W3C 的理解與認識？

答案：

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

11.XHTML 和 HTML 有什么區別？

答案：

HTML 是一種基本的 WEB 網頁設計語言，XHTML 是一個基于 XML 的置標語言最主要的不同：

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

XHTML 元素必須被關閉。標簽名必須用小寫字母。

XHTML 文檔必須擁有根元素。

12.img 標簽上 title 與 alt 屬性的區別是什么?

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

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

13.你如何對網站的文件和資源進行優化?

答案：解決方案包括：

文件合并

文件最小化/文件壓縮

使用 CDN 托管

緩存的使用.

二． CSS3

1.隱藏網頁中的元素有幾種方式？這些方法有什么區別？

答案：三種方法，

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

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

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

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

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

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

答案：opacity或rgba

opacity能設置與元素相關各種顏色的透明度

rgba()只能設置當前某一種顏色的透明度

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

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

.clear:after{

display:block;

content:””;

clear:both;

}

5.哪些元素默認有外邊距？

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

6.網頁中如何定義錨點？如何連接到錨點位置？

答案：a標記用name定義錨點，其他標記用id屬性定義錨點，

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

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

答案：

實際占地寬度=左右外邊距+左右邊框+左右內邊距+width

實際占地高度=上下外邊距+上下邊框+上下內邊距+height

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

8.實現時針轉動效果需要用到CSS中哪些關鍵技術？

答案：旋轉，動畫，絕對定位

9.設置行內元素居中對齊用什么屬性？

答案：text-align：center

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

答案：name和value屬性

11.transition和animation的區別？

答案：

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

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

12. 如何實現水平垂直居中？

答案：

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. 盒子模型你是怎么理解的？

答案：

元素框處理元素內容，內邊距外邊距以及邊框的計算方式。

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

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

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

（3）box-sizng border-box在已設定的寬度和高度之內去設定padding和border

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

14. src和href的區別？

答案：

（1）href：

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

并行下載該文檔，不會停止對當前文檔的處理

（2）src：

src是source的縮寫，src指向的內容會嵌入到文檔當前標簽所在位置

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

15. 說出link和import的區別？

答案：

（1）使用方法不同：

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

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

（2）加載順序差別

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

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

答案：

relative 相對定位 相對于自身原來位置進行偏移，仍處于標準文檔流中；

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

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

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

答案：

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

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

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

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

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

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

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

答案：.center{

display:flex;

justify-content:center;

align-items:center;

}

19. 說說em和rem的區別

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

20、瀏覽器的內核分別是什么?

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

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

因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對 CSS 初始化往往會出現瀏覽器之間的頁面顯示差異。當然，初始化樣式會對 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哪些屬性可以繼承？優先級算法如何計算？ CSS3 新增偽類有那些？

答案：

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

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

優先級就近原則，同權重情況下以最近者為準;

優先級為: !important > id > class > tag

important 比 內聯優先級高

CSS3 新增偽類：

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

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

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

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

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

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

23.描述 css reset 的作用。

答案：reset 重置瀏覽器為元素設置的默認樣式，瀏覽器的種類不同，樣式可能不同，重置是為了讓他們統一樣式。

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

答案：

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

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

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

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

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

25.px 和 em 的區別

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

瀏覽器的默認字體高都是 16px。所以未經調整的瀏覽器都符合: 1em=16px。那么 12px=0.75em, 10px=0.625em

三． AJAX

1.用post方式異步向服務器端提交數據時，需要在發送請求前設置什么？提交的數據放在什么位置？

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

數據放在send（）括號中

2.什么是異步數據加載？

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

3.異步請求數據的步驟分為哪幾步？

答案：創建異步對象，綁定監聽事件，創建異步請求，發送異步請求

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.異步請求中滿足什么條件時才能取出響應的結果數據？

答案：請求狀態碼為4，響應狀態碼為200時

5.如何理解JSON？

答案：

JSON是JS對象的一種表現方式，即以js對象的數據格式表現出來的字符串，JSON中的兩個api如下：

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

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

6. http和https的區別？

答案：

http傳輸的數據都是未加密的，也就是明文的

https協議是由http和ssl協議構建的可進行加密傳輸和身份認證的網絡協議，比http協議的安全性更高。

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

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

答案：

301 ：永久性重定向

302 ：臨時重定向

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

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

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

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

8. 什么是ajax？有哪些優缺點？

答案：AJAX是“Asynchronous JavaScript and XML”的縮寫。他是指一種創建交互式網頁應用的網頁開發技術。

優點：

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

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

3.基于xml標準化,并被廣泛支持,不需安裝插件。

4.促進頁面和數據的分離。

缺點：

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

2.AJAX安全問題

3.對搜索引擎支持較弱

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

5.AJAX不是很好支持移動設備

四． Bootstrap

1.用bootstrap中的柵格做網頁布局的基本結構是什么？默認將一行分為多少列？

答案：容器中設置行，行內設置列

默認將一行分為12個單元格（列）

2.如何編寫響應式網頁？

答案：

(1)聲明viewport元標簽

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

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

(4)使用CSS3 Media Query技術

3.同時監聽多個scss文件的命令是什么？

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

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

答案：

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

通過@include來使用混合器。

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

答案

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

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

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

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

6.Bootstrap如何設置響應式表格？

增加class="table-responsive"

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

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

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

8、Bootstrap有哪些關于<img>的class？

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

（2）.img-circle 將圖片變為圓形

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

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

9、Bootstrap中有關元素浮動及清除浮動的class？

class="clearfix" 清除浮動

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

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

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

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

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

11、Bootstrap如何制作按鈕組？

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

12、Bootstrap中的導航都有哪些？

（1）導航元素：有class="nav nav-tabs"的標簽頁導航，還有class="nav nav-pills"的膠囊式標簽頁導航；

（2）導航欄：class="navbar navbar-default" role="navigation"；

（3）面包屑導航：class="breadcrumb"

13、Bootstrap中設置分頁的class？

默認的分頁：class="pagination"

14、Bootstrap中如何制作徽章？

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

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

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

16、Bootstrap 網格系統列與列之間的間隙寬度是多少？

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

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

class="text-center" 設置居中文本

class="text-right" 設置向右對齊文本

class="text-left" 設置向左對齊文本.

文本標記語言（HTML）是用于在 Internet 上顯示 Web 頁面的主要標記語言。換句話說，網頁由 HTML 組成，用于通過 Web 瀏覽器顯示文本，圖像或其他資源。

使用標記來描述文檔結構和表現形式并通過瀏覽器進行解析,然后把結果顯示在網頁上. 它是網頁構成的基礎,你見到的所有網頁都離不開HTML,所以學習HTML是基礎中的基礎。

什么是HTML？

HTML是用來制作網頁的標記語言

HTML是Hypertext MarkupLanguage的英文縮寫, 即超文本標記語言

HTML語言是一種標記語言,不需要編譯,直接由瀏 HTML語言是一種標記語言,不需要編譯,直接由瀏覽器執行

HTML文件是一個文本文件,包含了一些HTML元素, HTML文件是一個文本文件,包含了一些HTML元素,標簽等.

HTML文件必須使用html或htm為文件名后綴

HTML是大小寫不敏感的,HTML與html是一樣的

Html和CSS的關系

學習web前端開發基礎技術需要掌握：HTML、CSS、JavaScript語言。下面我們就來了解下這三門技術都是用來實現什么的：

1. HTML是網頁內容的載體。內容就是網頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。

2. CSS樣式是表現(外觀控制)。就像網頁的外衣。比如，標題字體、顏色變化，或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現。

3. JavaScript是用來實現網頁上的特效效果。如：鼠標滑過彈出下拉菜單。或鼠標滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這么理解，有動畫的，有交互的一般都是用JavaScript來實現的。

HTML形象案例理解

為了簡化對復雜Internet的理解，暫時把復雜的Internet抽象成：向女生宿舍發送信號。

為了能夠在斷網后繼續聯絡女神，我們買來了電池和開關，然后拉了普通電線線到女神的寢室。女神把小燈泡接在了電線的兩端。

這時只需要開閉開關，就可以控制女神屋里的燈泡了。

發送信號

關閉著小燈泡1秒鐘，代表發送一個0。

打開了小燈泡1秒鐘，代表發送一個1。

此時可以向女神發送任意二進制內容了。

發送文本

我們只希望發送一個“Good Night”。所以必須想辦法對“Good Night”進行編碼。

'G','o','o','d'的ASCII編碼是：071，111，111，100，轉換成二進制就是：0100 0001 0110 1111 0110 1111 0110 0100

使用發送二進制信號的方法發過去，女神需要自己解碼來閱讀出“Good”。

發送富文本

有一天，我們希望發送“I miss you”。

為了表達心意，你希望加粗“you”，并使用紅色的字體發送“miss”，而這一根簡陋的電線似乎很難理解“加粗”和“紅色”

于是機智的我們發送了：I <red>miss</red> <b>you</b>

同樣機智的女神理解了這件事情。

你發明了一種語言

我們很喜歡這種編碼格式，這是一種標記語言，于是我們稱其為：TGML （To Girl Markup Language）

平時你使用TGML來和你的女神通信，TGML可以非常好的解決富文本的傳輸問題。

表白

終于決定表白了，我們繪制了很美麗的心形圖片，還有兩個按鈕：接受、拒絕。

兩個按鈕分別會鏈接到 "接受.tgml"和"拒絕.tgml"

為了描述圖片，我們使用了<img src="pic">

為了描述按鈕，我們使用了<a href="接受.tgml">

現在發送給女神的內容，已經不只是帶格式的富文本，而是帶鏈接的富文本。

于是在這個世界上，擁有了一種能夠描述超文本的語言，叫做TGML

超文本

描述超文本的方式有很多，例如：HTML，TGML，還有markdown。HTML的誕生是為了描述超文本。

超文本的用途也很多，例如：描述一個網頁，或者描述一個Word文檔。HTML文件是超文本文件。但是超文本未必是HTML。

Microsoft Word

Microsoft Word是Office的一個組件。它同樣代表一個超文本資源。

如果你解壓一個docx文件并仔細翻一翻，你能找到你剛才寫的作業，是以HTML方式記載著。

當然，描述超文本還有markdown。所以你可以使用一些工具，比如pandoc，把markdown轉換成word。

故事的結局

女神的名字叫瀏覽器，我們的名字叫Web服務器，女神和我們中間的那根線叫HTTP。

<div style="background: red"></div>

<head>
 <style>
 .content {
 background: red;
 }
 </style>
</head>

<head>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>

<style>
 @import url(style.css);
</style>