目錄
1.DOCTYPE作用？嚴格模式與混雜模式如何區分？它們有何意義？
3.行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
4.頁面導入樣式時，使用link和@import有什麼區別？
6.html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
15.頁面可見性（Page Visibility API） 可以有哪些用途？
17.實現不使用 border 畫出1px高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果。
19.title與h1的區別、b與strong的區別、i與em的區別？
1.DOCTYPE作用？嚴格模式與混雜模式如何區分？它們有何意義？
<!DOCTYPE>是放在HTML文檔第一行，用來告訴瀏覽器以什麼形式解析該文檔。DOCTYPE不正確會使瀏覽器以混雜模式解析文檔。
嚴格模式（標準模式）：以W3C標準解析代碼。
混雜模式（怪異模式、兼容模式）：以瀏覽器自身標準解析代碼。向後兼容，通常模擬老瀏覽器的行爲，以防老站點無法工作。
意義：IE5.5引入了文檔模式的概念，通過使用DOCTYPE實現模式切換，它的主要作用是告訴瀏覽器以哪種模式呈現，如何解析文檔，也就是說兩種模式主要影響CSS內容的呈現，某些情況下也會影響JavaScript的執行。
判別方法：通過doctument.compatMode來判斷。
if(document.compatMode=="CSS1Compat" ) {
console.log('標準模式');
}else {
console.log('混雜模式');
}
[擴展]另外兩種模式：準標準模式，超級標準模式
參考:http://www.cnblogs.com/qianlegeqian/p/4067635.html
2.HTML5 爲什麼只需要寫 <!DOCTYPE HTML>？
因爲HTML5不是基於SGML，不需要引用DTD，但是需要doctype來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行），而HTML4.01是基於SGML，需要引用DTD才能告知瀏覽器文檔所使用的文檔類型。
因爲HTML5沒有DTD，因此沒有嚴格模式與混雜模式的區別，語法相對寬鬆，儘可能大的實現了向後兼容。
3.行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
行內元素：span，strong，em，br，img，input，label，select，textarea，cite（引用）
塊元素：div，p，form，ul，li，ol，dl，address，fieldset，hr，menu，table
空元素：在HTML元素中，沒有內容的 HTML 元素被稱爲空元素。
常見的空元素：<br> <hr> <img> <input> <link> <meta>
可變元素：applet，button，del，ins（插入的文本），map（圖片區塊），object，script
行內元素和塊元素的區別：塊元素會獨佔一行，其寬度會自動填滿其父元素寬度，可以設置寬高，margin，padding；
行內元素不會獨佔一行，相鄰的元素會排在同一行，除非這一行排不下才會換行，其寬度隨元素內容變化。並且height，width屬性設置無效，margin，padding只在水平方向有效，豎直方向無效。
4.頁面導入樣式時，使用link和@import有什麼區別？
1.link是HTML標籤，用於定義文檔與外部資源的關係。而@import是CSS提供的，只能用於加載CSS。
2.link是HTML標籤，無兼容性問題，而@import是CSS2.1 提出的，只在IE5以上才能被識別。
3.link是與頁面同時加載，@import是在頁面加載完之後才加載。
4.link支持JS控制DOM修改CSS樣式，@import不支持。
參考：https://www.cnblogs.com/zbo/archive/2010/11/17/1879590.html
5.介紹一下你對瀏覽器內核的理解？
概念：瀏覽器內核是可以稱爲“解釋引擎”，負責對網頁語法的解釋（如HTML、JavaScript）並渲染（顯示）網頁。 所以，通常所謂的瀏覽器內核也就是瀏覽器所採用的渲染引擎，渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式信息。不同的瀏覽器內核對網頁編寫語法的解釋也有不同，因此同一網頁在不同的內核的瀏覽器裏的渲染（顯示）效果也可能不同，這也是網頁編寫者需要在不同內核的瀏覽器中測試網頁顯示效果的原因。
五大瀏覽器內核：IE（Trident），火狐（Gecko）、Opera（Presto）、Safari、Chrome（Webkit）
reflow：當瀏覽器發現某個部分發生了點變化影響了佈局，需要倒回去重新渲染。
reflow幾乎是無法避免的。現在界面上流行的一些效果，比如樹狀目錄的摺疊、展開（實質上是元素的顯示與隱藏）等，都將引起瀏覽器的 reflow。鼠標滑過、點擊……只要這些行爲引起了頁面上某些元素的佔位面積、定位方式、邊距等屬性的變化，都會引起它內部、周圍甚至整個頁面的重新渲染。通常我們都無法預估瀏覽器到底會reflow哪一部分的代碼，它們都彼此相互影響着。
reflow問題是可以優化的，我們可以儘量減少不必要的reflow。比如開頭的例子中的<img>圖片載入問題，這其實就是一個可以避免的reflow——給圖片設置寬度和高度就可以了。這樣瀏覽器就知道了圖片的佔位面積，在載入圖片前就預留好了位置。
repaint，中文叫重繪。 如果只是改變某個元素的背景色、文字顏色、邊框顏色等等不影響它周圍或內部佈局的屬性，將只會引起瀏覽器repaint。repaint的速度明顯快於 reflow（在IE下需要換一下說法，reflow要比repaint 更緩慢）。
參考：https://www.cnblogs.com/ada-zheng/p/4308581.html
http://www.cnblogs.com/fullhouse/archive/2011/12/19/2293455.html
6.html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
1. HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。
繪畫 canvas;
用於媒介回放的 video 和 audio 元素;
本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失;
sessionStorage 的數據在瀏覽器關閉後自動刪除;
語意化更好的內容元素，比如 article、footer、header、nav、section;
表單控件，calendar、date、time、email、url、search;
新的技術webworker, websocket, Geolocation;
2.移除的元素：
純表現的元素：basefont，big，center，font, s，strike，tt，u;
對可用性產生負面影響的元素：frame，frameset，noframes；
3.支持HTML5新標籤：
IE8/IE7/IE6支持通過document.createElement方法產生的標籤，
可以利用這一特性讓這些瀏覽器支持HTML5新標籤，
瀏覽器支持新標籤後，還需要添加標籤默認的樣式。
當然也可以直接使用成熟的框架、比如html5shim;
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
4. 如何區分HTML5： DOCTYPE聲明\新增的結構元素\功能元素
7.簡述一下你對HTML語義化的理解？
語義化是根據內容的結構化（內容語義化），選擇合適的標籤（代碼語義化）便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。
意義：使HTML文檔結構更清晰，便於代碼的後期維護，利於SEO（瀏覽器優化）和其他設備解析。
參考：https://www.cnblogs.com/freeyiyi1993/p/3615179.html
8.HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
在用戶沒有與因特網連接時，可以正常訪問站點或應用，在用戶與因特網連接時，更新用戶機器上的緩存文件。
原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之後當網絡在處於離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示。
如何使用：
1、頁面頭部像下面一樣加入一個manifest的屬性；
2、在cache.manifest文件的編寫離線存儲的資源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
3、在離線狀態時，操作window.applicationCache進行需求實現。
參考：http://yanhaijing.com/html/2014/12/28/html5-manifest/
https://segmentfault.com/a/1190000000732617
9.請描述一下 cookies，sessionStorage 和 localStorage 的區別？
cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（通常經過加密）。
cookie數據始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務器間來回傳遞。
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
存儲大小：
cookie數據大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
有期時間：
localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。
cookie 設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉
[擴展]session是存在服務器端的，而cookies,sessionStroage和localStorage是存在於瀏覽器端的。cookies是不可靠的，session是可靠的。
參考：https://www.cnblogs.com/st-leslie/p/5617130.html
https://blog.csdn.net/u014753892/article/details/52821268
https://blog.csdn.net/duan1078774504/article/details/51912868
10.iframe有那些缺點？
iframe 元素會創建包含另外一個文檔的內聯框架（即行內框架）。
*iframe會阻塞主頁面的Onload事件；
*搜索引擎的檢索程序無法解讀這種頁面，不利於SEO;
*iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的並行加載。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript
動態給iframe添加src屬性值，這樣可以繞開以上兩個問題。
參考：http://www.w3school.com.cn/tags/tag_iframe.asp
https://www.cnblogs.com/lvhw/p/7107436.html
11.Label的作用是什麼？是怎麼用的？
定義：<label> 標籤爲 input 元素定義標註（標記）。
用法：label 元素不會向用戶呈現任何特殊效果。不過，它爲鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上。<label> 標籤的 for 屬性應當與相關元素的 id 屬性相同。
12.HTML5的form如何關閉自動完成功能？
給不想要提示的 form 或某個 input 設置爲 autocomplete=off。
13.如何實現瀏覽器內多個標籤頁之間的通信? (阿里)
1.使用sessionStorage增加，刪除時，都會有storage事件，在另一個頁面監聽事件即可得到localstorge存儲的值，實現不同標籤頁之間的通信。
2.使用cookie+setInterval，將要傳遞的信息存儲在cookie中，每隔一定時間讀取cookie信息，即可隨時獲取要傳遞的信息。
參考：https://blog.csdn.net/zhouziyu2011/article/details/58595904
14.webSocket如何兼容低瀏覽器？(阿里)
Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基於 multipart 編碼發送 XHR 、 基於長輪詢的 XHR
參考：https://www.cnblogs.com/jingmoxukong/p/7755643.html
15.頁面可見性（Page Visibility API） 可以有哪些用途？
1.自動暫停和播放音頻
2.登錄同步
3.精準計算在線時長
4.頁面切換時切換聊天狀態
5.通過 visibilityState 的值檢測頁面當前是否可見，以及打開網頁的時間等;
參考：https://www.zhangxinxu.com/wordpress/2012/11/page-visibility-api-introduction-extend/
16.如何在頁面上實現一個圓形的可點擊區域？
1、map標籤和area標籤進行圖片映射
2、border-radius
3、純js實現 需要求一個點在不在圓上簡單算法、獲取鼠標座標等等
參考：area標籤
https://blog.csdn.net/lxcao/article/details/52809221
17.實現不使用 border 畫出1px高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果。
<div style="height:1px;overflow:hidden;background:red"></div>
18.網頁驗證碼是幹嘛的，是爲了解決什麼安全問題。
區分用戶是計算機還是人的公共全自動程序。可以防止惡意破解密碼、刷票、論壇灌水； 有效防止黑客對某一個特定註冊用戶用特定程序暴力破解方式進行不斷的登陸嘗試。
參考：https://blog.csdn.net/owen_william/article/details/66477421
19.title與h1的區別、b與strong的區別、i與em的區別？
b標籤和i標籤是物理標籤，而strong標籤和em標籤是邏輯標籤。
title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取也有很大的影響；
Physical Style Elements -- 自然樣式標籤
b, i, u, s, pre
Semantic Style Elements -- 語義樣式標籤
strong, em, ins, del, code
應該準確使用語義樣式標籤, 但不能濫用, 如果不能確定時首選使用自然樣式標籤。
參考：https://blog.csdn.net/qq_33769914/article/details/76436751