前言
近段時間在整理關於前端面試的一些內容，但是發現在各大部落格中面試題不是沒有答案，就是沒有對題目內容的剖析，再者就是沒有一個適合自己的題目集，所以筆者準備將這段時間中遇到，看到的較為重要的前端面試題整理出來，方便自己閱讀、鞏固，相信對大家也有一定程度的借鑑，話不多說，下面就開始正題。
正題
1、什麼是盒子模型
- content 元素內容
- padding 元素內邊距
- border 元素邊框
- margin 元素外邊距
- 這四者加起來組合成一個元素的盒子模型
- IE6瀏覽器的差異IE的content包括border和padding
2、html有哪些種類的元素？分別是那些？
- 大體分為分為一下三種：塊級元素block、行內元素inline、 內聯塊級元素inline-block
-
- 常見的塊級元素有：
<div> <p> <h1>...<h6> <!-- 有序列表 --> <ol> <!-- 無序列表 --> <ul> <!-- 定義列表 --> <dl> <table> <address> <form> 複製程式碼- 常見的行內元素：
<a> <span> <br> <label> <code> <em> <strong> 複製程式碼- 常見的內聯塊級元素有：
<img> <input> <select> 複製程式碼 - 還有元素在標籤中，不在頁面中展示
<meta> <link> <script>複製程式碼3、<!doctype html>的意義是什麼? 嚴格模式與混雜模式如何區分？它們有何意義?
-
- 讓瀏覽器以標準模式渲染
- 讓瀏覽器知道元素的合法性
-
<!doctype html>的缺失或者書寫錯誤會引起混雜模式- 混雜模式一般是一種向後相容的模式，也就是相容老站點
- 嚴格模式也就是標準模式，按照html5標準解析和渲染
4、HTML、XHTML、HTML5的關係
- HTML屬於SGML
- XHTML屬於XML，是html基於XML的一種強制性規範
- HTML5是一種獨立的規範
6、HTML5有什麼變化？
- 新的語義化元素，比如：
<section> <article>（表示區域）header footer aside(不重要內容)em strong(表強調) - 表單的增強功能，表單控制元件，
date、time、email、url、search。 - 新的API（離線、本地儲存
localStorage、sessionStorage，音視訊，圖形，實時通訊等能力） - 元素的分類和巢狀變更（按照內容分類的變更）
7、Html5移除了那些元素？
- 純表現元素：
<basefont> <big> <center> <font> <s> <strike> <tt> <u> - 對使用者產生負面影響的元素：
<frame> <frameset> <noframes>
8、怎麼處理html5的新標籤相容問題？
-
直接實現不被是被的標籤： 使用
document.creatElement(tagName)讓瀏覽器識別新標籤，還可以為這些標籤建立CSS樣式。 -
使用js庫解決：
- 使用html5shim
- 在head中呼叫一下程式碼
<!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]--> 複製程式碼- 在
</body>之前呼叫一下程式碼
<!--if lte IE 6]> <script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script> <![endif]--> 複製程式碼
9、html5語義化的理解？
- 便於開發者理解
- 便於瀏覽器理解程式碼結構（搜尋引擎）
- 有助於SEO
10、label的作用是什麼？是怎麼用的？
label標籤是用來定義表單控制間的關係，當使用者選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控制元件上。 主要有一下兩種用法：
<!--用法一 -->
<label for="Name">Number:</label>
<input type="text" name="Name" id="Name" />
<!--用法二 -->
<label>Data:<input type="text" name="B" /><label>
<!-- 單選按鈕 name要相同 且包裹可以不使用for-->
<label for="btn1">
<!-- <input type="checkbox" name="aa" id="btn1"/>我是單選按鈕1 -->
<input type="radio" name="aa" id="btn1" />我是單選按鈕1
</label>
<label for='btn2'>
<input type="radio" name="aa" id="btn2" />我是單選按鈕2
</label>
複製程式碼11、html5的form如何關閉自動完成功能？
<form aotocomplete='on|off'>
複製程式碼12、HTML5的離線儲存功能怎麼使用，工作原理？
-
原理：h5離線儲存基於新建一個.appcache的快取機制。通過這個檔案的解析清單離線儲存資源。這樣出於離線模式還是可以看到快取的內容。
-
如何使用：
- 在頭部加一個manifest屬性
<!DOCTYPE HTML> <html manifest = "cache.manifest"> ... </html> 複製程式碼- 然後在cache.manifest檔案的書寫如下：
CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html 複製程式碼- 離線狀態時，使用js的
window.applicationCache進行需求實現
資料 h5使用離線儲存
13、簡述一下cookies、sessionStorage、localStorage的區別
- cookies 由伺服器控制儲存在瀏覽器的資料，傳送和接收http請求的時候都需要攜帶，大小限制為4K，不設定cookies的過期時間，關閉瀏覽器即銷燬，安全性低。
- sessionStorage是儲存在瀏覽器本地的資料，由瀏覽器控制，大小為5M，關閉當前會話則銷燬。安全性高。
- localStorage和sessionStorage是一樣儲存在瀏覽器本地的資料，大小一樣，但是關閉瀏覽器不會被銷燬，必須通過clear()方法清除。安全性高。
WebZStorage的API:
- setItem(key,value) 儲存
- getItem(key) 獲取
- removeItem(key) 刪除單個
- clear() 清除所有
- key(index) 獲取某個索引的key
14、實現瀏覽器內多個標籤頁之間的通訊
呼叫localstorge、cookies等本地儲存方式
localStorage在一個頁面被新增、修改、或者刪除，都會觸發一個storage事件，通過在另一個標籤裡面監聽storage事件，即可得到localstorage的值，實現頁面間的通訊。
<!--頁面一-->
<input id="name">
<input type="button" id="btn" value="提交">
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
var name=$("#name").val();
localStorage.setItem("name", name);
});
});
</script>
<!--頁面二-->
<script type="text/javascript">
$(function(){
window.addEventListener("storage", function(event){
console.log(event.key + "=" + event.newValue);
});
});
</script>
複製程式碼- 使用cookie+setInterval，將要傳遞的資訊儲存在cookie中，每隔一定時間讀取cookie資訊，達到及時傳遞資訊的目的（個人覺得不好用）
15、webSocket如何相容低瀏覽器？(阿里)
- Adobe Flash Socket
- ActiveX HTMLFile (IE)
- 基於 multipart 編碼傳送 XHR
- 基於長輪詢的 XHR
16、頁面可見性（Page Visibility）API 可以有哪些用途？
- API 很簡單，document.hidden 就返回一個布林值，如果是true, 表示頁面可見，false 則表示，頁面隱藏。 不同頁面之間來回切換，觸發visibilitychange事件。 還有一個document.visibilityState, 表示頁面所處的狀態，取值：visible, hidden，prerender，preview 等四個
document.addEventListener("visibilitychange", function(){
if(document.hidden){
document.title ="hidden";
}else {
document.title = "visibile";
}
})
複製程式碼- 用途：在瀏覽器中切換頁面，隱藏標題等。
- 該API一個很好的用處就是能夠在頁面切換到不可見狀態時暫停執行一些不必要的操作,以減少資源的浪費.
17、如何在頁面上實現一個圓形的可點選區域？
有三種方案
- 使用css實現
<style>
.disc{
width:100px;
height:100px;
background-color:dimgray;
border-radius: 50%;
/* 滑鼠放上去變成手指 */
cursor: pointer;
position: absolute;
left:50px;
top:50px;
line-height: 100px;
text-align: center;
color: white;
}
</style>
<div class="disc">點選區域</div>
<script>
document.getElementsByClassName('disc')[0].addEventListener('click',()=>{
alert('wo shi yuan')
})
</script>
</html>
複製程式碼- 使用map+area
<img width="1366" height="768" usemap="#Map" />
<map name="Map" id="Map">
<area shape="circle" coords="100,100,50" href="https://www.baidu.com" target="_blank" />
</map>
<!--shape表示點選熱點區域的形狀，支援矩形rect，圓形circle以及多邊形poly。-->
<!--coords表示點選熱點區域形狀的座標。座標點0,0表示圖片的左上角。其中矩形rect支援4個數值，2個座標，分別是矩形左上角座標和矩形右下角座標。-->
<!--例如，coords="20,20,80,80"生成的就是一個左上角座標20,20寬高都是60px的矩形區域。-->
<!--圓形circle支援3個數值，前2個值為圓心座標，第3個值為圓的半徑大小。-->
<!--多邊形poly就更簡單了，每兩個數值組合表示一個座標點，依次連線形成的區域就是最終的熱點區域。-->
複製程式碼- 使用js 求點選位置到指定區域圓形的位置是否大於圓的半徑
document.onclick = (e)=>{
var r = 50 // 半徑
var x = 100
var y = 100
var clickX = e.clientX
var clcikY = e.clientY
// sqrt 平方根 pow 幾次冪 abs 絕對值
var len = Math.sqrt(Math.pow(x-clintX,2)+Math.pow(y-clientY,2); // 這裡貌似不用取絕對值 咋地都是正數
if(len <= r){
alert('inner')
}else{
alert('outer')
}
}
複製程式碼18、實現不使用 border 畫出1px高的線，在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。
<div style='height:1px;overflow:hidden;background:black'></div>
複製程式碼19、iframe有那些缺點？
iframe可以幹啥？
- 可以嵌入網頁,展示。
- 可以增加程式碼的重用，將不同的程式碼寫在iframe裡
- 可以放置第三方內容，如圖示、廣告。
缺點：
- 會產生很多頁面。
- 當一個頁面iframe過多的時候可能會導致使用者體驗差。
- seo等不好
- 對於移動端裝置相容性差
- 會增加多餘的http請求
20、紹一下你對瀏覽器核心的理解？常見的瀏覽器核心有哪些？
1. 理解：
- 主要分成兩部分：渲染引擎(layout engineer或 Rendering Engine) 和 JS 引擎。
- 渲染引擎：負責取得網頁的內容（HTML、 XML 、影象等等）、整理訊息（例如加入 CSS 等），以及計算網頁的顯示方式，然後會輸出至顯示器或印表機。
瀏覽器的核心的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網路內容的應用程式都需要核心。
- JS引擎則：解析和執行 javascript 來實現網頁的動態效果。
最開始渲染引擎和JS引擎並沒有區分的很明確，後來 JS 引擎越來越獨立，核心就傾向於只指渲染引擎。
2. 常見核心：
- Trident核心：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
- Gecko核心：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
- Presto核心：Opera7及以上。 [Opera核心原為：Presto，現為：Blink;]
- Webkit核心：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]
結語
其實關於HTML的內容還有很多，筆者只是抽離出一些在平時容易忽略的基礎知識放在了這裡，當然個人的理解肯定是會存在些許的偏差，畢竟一百個觀眾心中有一百個哈姆雷特，但是殊途同歸，不同的理解角度可能也會為你帶來新的思路。當然筆者更歡迎大家在閱讀的同時能指出文中的問題，以你的角度來引導我，糾正我，謝謝。