html+css+js+bootstrap面試題

HTML 常見面試題

1. DOCTYPE有什麼作用？標準模式與混雜模式如何區分？它們有何意義?

DOCTYPE 是 document type (文檔類型的）的簡寫。
作用：
告訴瀏覽器通過哪種規範(文檔類型定義，DTD) 解析文檔 (如HTML或XHTML規範)；
DTD 是一系列的語法規則，用來定義 XML 或 (X)HTML 的文件類型。
瀏覽器會使用它來判斷文檔類型，決定使用何種協議來解析，以及切換瀏覽器模式。
瀏覽器模式—標準模式（standards mode）：瀏覽器根據W3C標準來渲染頁面。
瀏覽器模式—混雜模式(quirks mode)：瀏覽器採用更寬鬆、向後兼容方式渲染頁面。
混雜模式下，瀏覽器會模仿舊瀏覽器的行爲，比如IE6，在此基礎上兼容新的標準特性。
混雜模式又稱兼容模式、怪異模式等。
瀏覽器根據不同的 DOCTYPE 選擇不同的渲染方法就叫做 DOCTYPE 切換。
DOCTYPE切換就是用來識別和兼容舊網頁的。
!DOCTYPE html 的重要性：聲明文檔的解析類型(document.compatMode)，
避免瀏覽器的怪異模式。

2. image 標籤上title屬性與alt屬性的區別是什麼？

title

title 屬性規定關於元素的額外信息。
title 屬性通常會在鼠標移到元素上時顯示一段工具提示文本。
title 屬性常與 form 以及 a 元素一同使用，以提供關於輸入格式和鏈接目標的信息。
title 屬性是 abbr 和 acronym 元素的必需屬性。

alt

alt 屬性是一個必需的屬性，它規定在圖像無法顯示時的替代文本。
alt 屬性值是一個最多包含 1024 個字符的字符串，包括空格和標點。
字符串必須包含在引號中。
如果圖像包含信息 - 使用 alt 描述圖像
如果圖像在 a 元素中 - 使用 alt 描述目標鏈接
如果圖像僅供裝飾 - 使用 alt=""

3. 請說說你對標籤語義化的理解？

去掉或者丟失CSS樣式的情況下能夠讓頁面呈現出清晰的內容結構，代碼結構。
有利於SEO(搜索引擎優化)：和搜索引擎建立良好溝通，有助爬蟲抓取更多有效信息。
方便其他設備解析(如屏幕閱讀器、盲人閱讀器、移動設備) 以意義的方式來渲染網頁。
便於團隊開發和維護，語義化更具可讀性，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。

4. 簡述一下 src 與 href 的區別

src

src 是source的縮寫，用於替換當前元素。
src 指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置。

href

href 是Hypertext Reference的縮寫，用於在當前文檔和引用資源之間確立聯繫。
href 指向網絡資源所在位置，建立和當前元素(錨點)或當前文檔(鏈接)之間的鏈接

5. 頁面導入樣式時，使用link和@import有什麼區別？

區別：

從屬關係區別：
link 是HTML提供的標籤，不僅可加載 CSS 文件，還可以定義 RSS、rel 連接屬性等。
@import 是 CSS 提供的語法規則，只有導入樣式表的作用。

加載順序區別:
link 引用CSS時候，頁面載入時同時加載。
@import 引入的 CSS需要在頁面完全加載完畢後被加載。

兼容性問題:
link 標籤作爲 HTML 元素，不存在兼容性問題。
@import 是在css2.1提出來的，低版本的瀏覽器不支持。

DOM 可控性區別:
link 支持使用 javascript 控制去改變樣式。
@import 不支持 javascript 方式插入樣式。

權重區別:
link 方式的樣式的權重高於 @import 的權重

6. iframe框架有那些優缺點？

優點：

iframe能夠原封不動的把嵌入的網頁展現出來。
如果有多個網頁引用iframe，那麼你只需要修改iframe的內容，就可以實現調用的每一個頁面內容的更改，方便快捷。
網頁如果爲了統一風格，頭部和版本都是一樣的，就可寫成一個頁面，用iframe嵌套，可以增加代碼的可重用。
如果遇到加載緩慢的第三方內容如圖標和廣告，這些問題可以由iframe來解決。

缺點：

搜索引擎的爬蟲程序無法解讀這種頁面
框架結構中出現各種滾動條
使用框架結構時，保證設置正確的導航鏈接。
iframe頁面會增加服務器的http請求

7. 介紹一下對瀏覽器內核的理解

渲染引擎：負責取得網頁的內容(html,xml和圖像等)，整理訊息(例如假如css)，以及計算網頁的顯示方式，然後輸出到顯示器或打印機。
JS引擎：解析和執行JavaScript來實現網頁的動態效果。
瀏覽器的內核的不同對於網頁的語法解釋會有不同，所以渲染的效果也不同。
所有網頁瀏覽器、電子郵件客戶端及它需要編輯、顯示網絡內容的應用程序都要內核。

8. 常見的瀏覽器內核有哪些？

Trident內核：IE，360，搜過瀏覽器；
Gecko內核：Netscape6及以上版本，
Presto內核：Opera
Blink內核：Opera；
Webkit內核：Safari，Chrome

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

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

10. xhtml 和 html 有什麼區別？

HTML 是一種基本的 WEB 網頁設計語言，XHTML 是一個基於 XML 的置標語言。
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉。
XHTML標籤名必須用小寫字母。
XHTML 文檔必須擁有根元素。

11. 清除浮動的幾種方式，各自的優缺點？

使用空標籤清除浮動 clear:both（理論上能清楚任何標籤，，，增加無意義的標籤）。
使用 overflow:auto（空標籤元素清除浮動不得不增加無意代碼弊端,用 zoom:1 兼容 IE）
使用 afert 僞元素清除浮動(用於非 IE 瀏覽器)。

CSS 經典面試題

CSS3有哪些新特性？

1. CSS3實現圓角（border-radius），陰影（box-shadow），

2. 對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）

3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜

4. 增加了更多的CSS選擇器多背景 rgba

5. 在CSS3中唯一引入的僞類是 ::selection.

6. 媒體查詢，多欄佈局

7. border-image

1. 介紹一下 CSS 的盒子模型？

CSS 框模型 (Box Model) 規定了元素框處理元素內容、內邊距、邊框和外邊距的方式。

背景應用於由內容和內邊距、邊框組成的區域。
內邊距、邊框和外邊距都是可選的，默認值是零。
增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。
內邊距、邊框和外邊距可以應用於一個元素的所有邊，也可以應用於單獨的邊。
外邊距可以是負值，而且在很多情況下都要使用負值的外邊距

1）盒模型：內容(content)、填充(padding)、邊界(margin)、邊框(border)

2）有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 padding;

2. CSS 選擇符有哪些？哪些屬性可以繼承？優先級算法如何計算？

id 選擇器（ # myid）
類選擇器（.myclassname）
標籤選擇器（div, h1, p）
相鄰選擇器（h1 + p）
子選擇器（ul < li）
後代選擇器（li a）
通配符選擇器（ * ）
屬性選擇器（a[rel = “external”]）
僞類選擇器（a: hover, li: nth – child）
可繼承的樣式： font-size font-family color, UL LI DL DD DT;
不可繼承的樣式：border padding margin width height ;
優先級就近原則，同權重情況下樣式定義最近者爲準;
載入樣式以最後載入的定位爲準;
優先級爲: !important > id > class > tag important 比內聯優先級高

3. 爲什麼要初始化 CSS 樣式?

因爲瀏覽器的兼容問題，不同瀏覽器對有些標籤的默認值是不同的。
如果沒對 CSS 初始化往往會出現瀏覽器之間的頁面顯示差異。
初始化樣式會對 SEO 有一定的影響，但力求影響最小的情況下初始化。
最簡單的初始化方法就是： * {padding: 0; margin: 0;} （不建議）

4. div+css 的佈局較 table 佈局有什麼優點？

改版的時候更方便只要改 css 文件。
頁面加載速度更快、結構化清晰、頁面顯示簡潔。
表現與結構相分離。
易於優化（seo）搜索引擎更友好，排名更容易靠前。

5. 什麼是外邊距重疊？重疊的結果是什麼？

外邊距重疊就是 margin-collapse。
在 CSS 中，相鄰兩個盒子（可能是兄弟關係也可能是祖先關係）的外邊距
可以結合成一個單獨的外邊距
這種合併外邊距的方式被稱爲摺疊，並且因而所結合成的外邊距稱爲摺疊外邊距。

摺疊結果遵循下列計算規則：

兩個相鄰的外邊距都是正數時，摺疊結果是它們兩者之間較大的值。
兩個相鄰的外邊距都是負數時，摺疊結果是兩者絕對值的較大值。
兩個外邊距一正一負時，摺疊結果是兩者的相加的和。

6. rgba()和 opacity 的透明效果有什麼異同？

同：rgba()和 opacity 都能實現透明效果

異：

opacity 作用於元素，以及元素內的所有內容的透明度
rgba()作用於元素的顏色或背景色（設置 rgba 透明元素的子元素不會繼承透明效果！）

7. position 的 absolute 與 fixed 共同點與不同點

static: 無特殊定位，對象遵循 HTML 定位規則

absolute: 將對象從文檔流中拖出，用 left ， right ， top ， bottom 等屬性做絕對定位。
而其層疊通過 css z-index 屬性定義。此時對象不具有邊距，但仍有補白和邊框

relative: 對象不可層疊, 但將依據 left, right, top, bottom 等屬性在正常文檔流中偏移位置

A：共同點：

改變行內元素的呈現方式，display 被置爲 block；
讓元素脫離普通流，不佔據空間；
默認會覆蓋到非定位元素上
B 不同點：

absolute 的”根元素“是可以設置的，而 fixed 的”根元素“固定爲瀏覽器窗口。
當你滾動網頁，fixed 元素與瀏覽器窗口之間的距離是不變的。

8. px 和 em 的區別。

px 和 em 都是長度單位。

區別：

px 的值是固定的，指定是多少就是多少，計算比較容易。
em 得值不是固定的，並且 em 會繼承父級元素的字體大小。

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

9. display:none 與 visibility:hidden 的區別是什麼？

display : 隱藏對應的元素但不擠佔該元素原來的空間。
visibility: 隱藏對應的元素並且擠佔該元素原來的空間。

區別：

使用 CSS display:none 屬性後，HTML 元素(對象)的寬度、高度等屬性值都將“丟失”
使用 visibility:hidden 屬性後，HTML 元素(對象)僅僅是在視覺上看不見(完全透明),
而它所佔據的空間位置仍然存在。

10. 簡述 border:none 以及 border:0 的區別，並給出使用建議。

border:none 表示邊框樣式無。 border:0 表示邊框寬度爲 0;
當定義了border:none,即隱藏了邊框的顯示,實際就是邊框寬度爲 0.
當定義邊框時,必須定義邊框的顯示樣式.
因爲邊框默認樣式爲不顯示 none,所以僅設置邊框寬度,由於樣式不存在,
邊框的寬度也自動被設置爲0.

11. display: block;和 display: inline;的區別

block 元素特點：

處於常規流中時，如果 width 沒有設置，會自動填充滿父容器
可以應用 margin/padding
在沒有設置高度的情況下會擴展高度以包含常規流中的子元素
處於常規流中時佈局時在前後元素位置之間（獨佔一個水平空間）
忽略 vertical-align

inline 元素特點：

水平方向上根據 direction 依次佈局
不會在元素前後進行換行
受 white-space 控制
margin/padding 在豎直方向上無效，水平方向上有效
width/height 屬性對非替換行內元素無效，寬度由元素內容決定
非替換行內元素的行框高由 line-height 確定，
替換行內元素的行框高由 height,margin,padding,border 決定
浮動或絕對定位時會轉換爲 block
vertical-align 屬性生效

12. PNG, GIF, JPG 的區別及如何選

GIF:

8 位像素，256 色
無損壓縮
支持簡單動畫
支持 boolean 透明
適合簡單動畫

JPEG：

顏色限於 256
有損壓縮
可控制壓縮質量
不支持透明
適合照片

PNG：

有 PNG8 和 truecolor PNG
PNG8 類似 GIF 顏色上限爲 256，文件小，支持 alpha 透明度，無動畫
適合圖標、背景、按鈕

13. 浮動元素引起的問題和解決辦法？

浮動元素引起的問題：

父元素的高度無法被撐開，影響與父元素同級的元素
與浮動元素同級的非浮動元素會跟隨其後
若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構

解決方法：

1. 使用 CSS 中的 clear:both; 屬性來清除元素的浮動可解決 2、3 問題。

2. 對於問題 1，添加如下樣式，給父元素添加 clearfix 樣式：  
	.clearfix:after{
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	} 
			
	.clearfix{
		display: inline-block;
	} /* for IE/Mac */

清除浮動的幾種方法：

1. 額外標籤法，<div style="clear:both;"></div>
  （缺點：不過這個辦法會增加額外的標籤 使 HTML 結構看起來不夠簡潔。）  
  
2. 使用 after 僞類  
	#parent:after{     
		content:".";     
		height:0;     
		visibility:hidden;     
		display:block;     
		clear:both; 
	} 
	
3. 浮動外部元素  

4. 設置 overflow 爲 hidden 或者 auto

14. 解釋下浮動和它的工作原理？清除浮動的技巧

浮動元素脫離文檔流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

1.使用空標籤清除浮動。
這種方法在所有浮動標籤後添加一個空標籤定義 css clear:both. 弊端是增加無意義標籤
2.使用 overflow。
給包含浮動元素的父標籤添加 css 屬性 overflow:auto; zoom:1; zoom:1 用於兼容 IE6。
3.使用 after 僞對象清除浮動。
該方法只適用於非 IE 瀏覽器。
該方法必須爲需要清除浮動元素的僞對象設置 height:0，否則該元素比實際高若干像素

15. CSS優化、提高性能的方法有哪些？

避免過度約束
避免後代選擇符
避免鏈式選擇符
使用緊湊的語法
避免不必要的命名空間
避免不必要的重複
最好使用表示語義的名字。一個好的類名應該是描述他是什麼而不是像什麼
避免！important，可以選擇其他選擇器
儘可能的精簡規則，你可以合併不同類裏的重複規則

Js 經典面試題

1. 請描述一下 cookies，sessionStorage 和 localStorage 的區別?

cookie 在瀏覽器和服務器間來回傳遞,sessionStorage 和 localStorage 不會
sessionStorage 和 localStorage 的存儲空間更大;
sessionStorage 和 localStorage 有更多豐富易用的接口;
sessionStorage 和 localStorage 各自獨立的存儲空間;

請你談談Cookie的弊端：

cookie雖然在持久保存客戶端數據提供了方便，分擔了服務器存儲的負擔，但還是有很多侷限性的。

缺點：

1.`Cookie`數量和長度的限制。每個domain最多隻能有20條cookie，每個cookie長度不能超過4KB，否則會被截掉。

2.安全性問題。如果cookie被人攔截了，那人就可以取得所有的session信息。即使加密也與事無補，因爲攔截者並不需要知道cookie的意義，他只要原樣轉發cookie就可以達到目的了。

3.有些狀態不可能保存在客戶端。例如，爲了防止重複提交表單，我們需要在服務器端保存一個計數器。如果我們把這個計數器保存在客戶端，那麼它起不到任何作用。

優點：極高的擴展性和可用性

簡單說一下瀏覽器本地存儲是怎樣的

sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問並且當會話結束後數據也隨之銷燬。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。

而localStorage用於持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。

2. 從用戶刷新網頁開始，一次 js 請求一般情況下有哪些地方會有緩存處理?

dns 緩存，cdn 緩存，瀏覽器緩存，服務器緩存。

3. js 如何獲取和設置 cookie?

// 創建 cookie
function setCookie(name, value, expires, path, domain, secure) {
	var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
	if (expires instanceof Date) {
		cookieText += '; expires=' + expires;
	}
	if (path) {
		cookieText += '; expires=' + expires; }
	if (domain) {
		cookieText += '; domain=' + domain;
	}
	if (secure) {
		cookieText += '; secure'; }
		document.cookie = cookieText; }
// 獲取 cookie
function getCookie(name) {
	var cookieName = encodeURIComponent(name) + '=';
	var cookieStart = document.cookie.indexOf(cookieName); 
	var cookieValue = null;
	if (cookieStart > -1) {
		var cookieEnd = document.cookie.indexOf(';', cookieStart); 		if (cookieEnd == -1) {
			cookieEnd = document.cookie.length; 
		}
		cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
	}
	return cookieValue; 
}
// 刪除 cookie
function unsetCookie(name) {
	document.cookie = name + "= ; expires=" + new Date(0); 
}

4. 你瞭解 HTTP 狀態碼嗎，請隨便介紹一下。

5. 說說對網站重構的理解。

網站重構: 在不改變外部行爲的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行爲。也就是說是在不改變 UI 的情況下，對網站進行優化，在擴展的同時保持一致的 UI。

對於傳統的網站來說重構通常是:

表格(table)佈局改爲 DIV + CSS
使網站前端兼容於現代瀏覽器(針對於不合規範的 CSS、如對 IE6 有效的)
對於移動平臺的優化
針對於 SEO 進行優化
深層次的網站重構應該考慮的方面
減少代碼間的耦合
讓代碼保持彈性
嚴格按規範編寫代碼
設計可擴展的 API
代替舊有的框架、語言(如 VB)
增強用戶體驗
通常來說對於速度的優化也包含在重構中
壓縮 JS、CSS、image 等前端資源(通常是由服務器來解決)
程序的性能優化(如數據讀寫)
採用 CDN 來加速資源加載
對於 JS DOM 的優化
HTTP 服務器的文件緩存

6. js 數組去重。

返回值是否是當前引用
“重複”的判斷條件

Array.prototype.uniq = function () {
// 長度只有 1，直接返回當前的拷貝 
	if (this.length <= 1) {
		return this.slice(0); 
	}
	var aResult = [];
	for (var i = 0, l = this.length; i < l; i++) {
		if (!_fExist(aResult, this[i])) { 
			aResult.push(this[i]);
		} 
	}
	return aResult;
	// 判斷是否重複 
	function _fExist(aTmp, o) {
		if (aTmp.length === 0) { 
			return false;
		}
		var tmp;
		for (var i = 0, l = aTmp.length; i < l; i++) {
			tmp = aTmp[i]; 
			if (tmp === o) {
				return true; 
			}
			// NaN 需要特殊處理
			if (!o && !tmp && tmp !== undefined && o !== undefined && isNaN(tmp) && isNaN(o)) {
				return true; 
			}
		}
		return false; 
	}
}

7. Ajax 是什麼?Ajax 的交互模型?同步和異步的區別?如何解決跨域問題?

AJAX 的全稱是異步的 Javascript 和 XML ，是一種創建快速動態的技術，通過在後臺與服務器進行少量數據交互，實現網頁的異步更新，在不重新加載整個界面的情況下，做到網頁的部分刷新;
AJAX 的交互模型( AJAX 的過程)

交互過程：

用戶發出異步請求;
創建 XMLHttpRequest 對象;
告訴 XMLHttpRequest 對象哪個函數會處理 XMLHttpRequest 對象狀態的改變，爲此要把對象的 onReadyStateChange 屬性設置爲響應該事件的JavaScript 函數的引用
創建請求，用 open 方法指定是 get 還是 post ，是否異步， url 地址;
發送請求， send 方法
接收結果並分析
實現刷新

10. Flash、Ajax 各自的優缺點，在使用中如何取捨?

Flash:

Flash 適合處理多媒體、矢量圖形、訪問機器
對 CSS、處理文本上不足，不容易被搜索

Ajax:

Ajax 對 CSS、文本支持很好，支持搜索
多媒體、矢量圖形、機器訪問不足

共同點:

與服務器的無刷新傳遞消息
可以檢測用戶離線和在線狀態
操作 DOM

12. 哪些操作會造成內存泄漏?

內存泄漏： 指任何對象在您不再擁有或需要它之後仍然存在。
垃圾回收器定期掃描對象，並計算引用了每個對象的其他對象的數量。如果一個對象的引用數量爲 0(沒有其他對象引用過該對象)，或對該對象的惟一引用是循環的，那麼該對象的內存即可回收。

14. 寫出至少 5 個前端優化的方法，並寫明理由。

15. ajax 原理、如何實現刷新數據及優點?

Ajax 的工作原理：
相當於在用戶和服務器之間加了—箇中間層,使用戶操作與服務器響應異步化。
並不是所有的用戶請求都提交給服務器,像—些數據驗證和數據處理等都交給 Ajax 引擎自己來做,只有確定需要從服務器讀取新數據時再由 Ajax 引擎代爲向
服務器提交請求

優點:

- 減輕服務器負擔
- 無刷新更新頁面
- 更好的用戶體驗

17. javascript 的本地對象，內置對象和宿主對象。

本地對象爲 array obj regexp 等可以 new 實例化。
內置對象爲 gload Math 等不可以實例化的。
宿主爲瀏覽器自帶的 document,window 等。

18. 談談 this 對象的理解。

this 是 js 的一個關鍵字，隨着函數使用場合不同，this 的值會發生變化。
但是有一個總原則，那就是 this 指的是調用函數的那個對象。
this 一般情況下:是全局對象 Global。作爲方法調用，那麼 this 就是指這個對象

19. new 操作符具體幹了什麼呢?

創建一個空對象，並且 this 變量引用該對象，同時還繼承該函數的原型。
屬性和方法被加入到 this 引用的對象中。
新創建的對象由 this 所引用，並且最後隱式的返回 this 。
var obj = {};
obj.proto = Base.prototype;
Base.call(obj);

20. JSON 的瞭解?

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。
它是基於 JavaScript 的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小 {‘age’:‘12’, ‘name’:‘back’}

21. 異步加載的方式有哪些?

defer，只支持 IE
async:
創建 script，插入到 DOM 中，加載完畢後 callBack

題目練習：https://www.nowcoder.com/ta/front-end-interview?query=&asc=true&order=&tagQuery=&page=1

框架bootstrap：https://blog.csdn.net/qq_32888087/article/details/89447576?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task