前端工程師面試題彙總（個人解析，可能不必定對）（HTML部分）

時間 2019-11-08

原文原文鏈接

一、Doctype做用？嚴格模式與混雜模式如何區分？它們有何意義？HTML5 爲何只須要寫 <!DOCTYPE HTML>？

<!DOCTYPE> 的做用 <!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位於 <html> 標籤以前。
<!DOCTYPE> 聲明不是 HTML 標籤；它是指示 web 瀏覽器關於頁面使用哪一個 HTML 版本進行編寫的指令。

//常常見到的兩種聲明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
//瀏覽器會認爲他是html4.01，在 HTML 4.01 中，<!DOCTYPE> 聲明引用 DTD，由於 HTML 4.01 基於 SGML。DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。
 
<!DOCTYPE html>  
//這是html5，HTML5 不基於 SGML，因此不須要引用 DTD。

還有一些經常使用的聲明，具體參照W3S

這裏的表格列出了全部的 HTML5/HTML 4.01/XHTML 元素，以及它們會出如今什麼文檔類型 (DTD) 中：全部html標籤

什麼是標準模式與混雜模式？它們有何意義？
 （1）、嚴格模式的排版和 JS 運做模式是  以該瀏覽器支持的最高標準運行。
 （2）、在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。
 （3）、DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。
 （4）、當前環境下全部的DOCTYPE所有這樣寫： <!DOCTYPE html>就當沒有其餘寫法，完畢。
告知瀏覽器的解析器，用什麼文檔類型 規範來解析這個文檔。

doctype是document type（文檔類型）的簡寫，在頁面中，用來指定頁面所使用的xhtml（或者html）的版本。

要想製做符合標準的頁面，一個必不可少的關鍵組成部分就 是doctype聲明。只有肯定了一個正確的doctype，xhtml裏的標識和css才能正常生效。

html 告訴瀏覽器這個文件是html格式網頁文件。

兩個合起來就是 html5標準網頁聲明,原先的是一串很長的字符串,如今是這個簡潔形式,支持html5標準的主流瀏覽器都認識這個聲明。

二、行內元素有哪些？塊級元素有哪些？空(void)元素有那些？

//行內元素：
a - 錨點，
em - 強調，
strong - 粗體強調，
span - 定義文本內區塊，
i - 斜體，
img - 圖片，
b - 粗體，
label - 表格標籤，
select - 項目選擇，
textarea - 多行文本輸入框，
sub - 下標，
sup - 上標，
q - 短引用，

塊元素：
div - 經常使用塊級，
dl - 定義列表，
dt - 標籤訂義了定義列表中的項目（即術語部分）。，
dd - 定義列表中的內容，
//<dl>
//   <dt>計算機</dt>
//   <dd>用來計算的儀器 ... ...</dd>
//   <dt>顯示器</dt>
//   <dd>以視覺方式顯示信息的裝置 ... ...</dd>
//</dl>
ul - 非排序列表，
li - 列表項目，
ol - 排序表單，
p - 段落，
h1，h2，h3，h4，h5 - 標題，
table - 表格，
fieldset - form控制組，
form - 表單，

//空元素（void）
br - 換行，
hr - 水平分割線

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

//兩種寫法
<style type="text/css" media="screen"> 
    @import url("http://www.taobao.com/home/css/global/v2.0.css?t=20070518.css"); 
</style> 

<link rel="stylesheet" rev="stylesheet" href="default.css" type="text/css" media="all" /> 

本質上，這兩種方式都是爲了加載CSS文件，但仍是存在着細微的差異。

差異1：老祖宗的差異。
link屬於XHTML標籤，而@import徹底是CSS提供的一種方式。

link標籤除了能夠加載CSS外，還能夠作不少其它的事情，好比定義RSS，定義rel鏈接屬性等，@import就只能加載CSS了。

差異2：加載順序的差異。
當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS會等到頁面所有被下載完再被加載。
因此有時候瀏覽@import加載CSS的頁面時開始會沒有樣式（就是閃爍），網速慢的時候還挺明顯。

差異3：兼容性的差異。
因爲@import是CSS2.1提出的因此老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標籤無此問題。

差異4：使用dom控制樣式時的差異。
當使用javascript控制dom去改變樣式的時候，只能使用link標籤，由於@import不是dom能夠控制的。

差異5：@import能夠在css中再次引入其餘樣式表。
好比能夠建立一個主樣式表，在主樣式表中再引入其餘的樣式表。

大體就這幾種差異了（若是還有什麼差異，你們告訴我，我再補充上去），其它的都同樣，從上面的分析來看，仍是使用link標籤比較好。

四、介紹一下你對瀏覽器內核的理解？常見的瀏覽器內核有哪些？

主要分紅兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎

渲染引擎 ：負責取得網頁的內容（HTML、）、XML、整理訊息（例如加入CSS、、圖像、），以及計算網頁的顯示方式，後會輸出至顯示器或打印機。

瀏覽器的內核的不一樣對於網頁的語法解釋會擁有不一樣，因此渲染的效果也不相同。 全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要內核

JS引擎則 ：解析和執行javascript來實現網頁的動態效果。

最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎


常見瀏覽器的內核：

Trident：　IE六、IE七、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）； 360安全瀏覽器（1.0-5.0爲Trident，6.0爲Trident+Webkit，7.0爲Trident+Blink）獵豹極輕瀏覽器，360極速瀏覽器（7.5以前爲Trident+Webkit，7.5爲Trident+Blink）獵豹安全瀏覽器（1.0-4.2版本爲Trident+Webkit，4.3及之後版本爲Trident+Blink）獵豹極輕瀏覽器，傲遊瀏覽器（傲遊1.x、2.x爲IE內核，3.x爲IE與Webkit雙核）、百度瀏覽器（早期版本）、世界之窗瀏覽器[2]  （最初爲IE內核，2013年採用Chrome+IE內核）、2345瀏覽器、騰訊TT、淘寶瀏覽器、採編讀瀏覽器、搜狗高速瀏覽器（1.x爲Trident，2.0及之後版本爲Trident+Webkit）、阿雲瀏覽器（早期版本）、瑞星安全瀏覽器、Slim Browser、 GreenBrowser、愛帆瀏覽器（12 以前版本）、115瀏覽器、155瀏覽器、閃遊瀏覽器、N氧化碳瀏覽器、糖果瀏覽器、彩虹瀏覽器、瑞影瀏覽器、勇者無疆瀏覽器、114瀏覽器、螞蟻瀏覽器、飛騰瀏覽器、速達瀏覽器、佐羅瀏覽器、海豚瀏覽器（iPhone/iPad/Android）、UC瀏覽器（Blink內核+Trident內核）等。

Gecko：Firefox內核，這是個開源內核。

Webkit：Safari內核,Chrome內核原型,開源。Google Chrome、360極速瀏覽器以及搜狗高速瀏覽器高速模式也使用Webkit做爲內核。Webkit也是自由軟件，同時開放源代碼。在安全方面不受IE、Firefox的制約，因此Safari瀏覽器在國內仍是很安全的。WebKit內核常見的瀏覽器：傲遊瀏覽器三、[1]  Apple Safari (Win/Mac/iPhone/iPad)、Symbian手機瀏覽器、Android 默認瀏覽器。移動端都是webKit內核。

QQ瀏覽器X5內核，也就是說微信、手機QQ內置瀏覽器都是騰訊的QQ瀏覽器。

五、html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？（講一下你對html5的理解？）

萬維網的核心語言、標準通用標記語言下的一個應用超文本標記語言（HTML）的第五次重大修改。

2014年10月29日，萬維網聯盟宣佈，通過接近8年的艱苦努力，該標準規範終於制定完成。
 HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。

(1)繪畫 canvas;

(2)用於媒介回放的 video 和 audio 元素;

(3)本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失;

(4)sessionStorage 的數據在瀏覽器關閉後自動刪除;

(5)語意化更好的內容元素，好比 article、nav、footer、header、section;

(6)表單控件，calendar、date、time、email、url、search;input的type屬性添加。

(7)新的技術webworker, websocket, Geolocation;

(8)拖拽釋放(Drag and drop) API ;

移除的元素
 
純表現的元素：basefont，big，center，font, s，strike，tt，u；
 
對可用性產生負面影響的元素：frame，frameset，noframes；

* IE8/IE7/IE6支持經過document.createElement方法產生的標籤，能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，瀏覽器支持新標籤後，還須要添加標籤默認的樣式。
 
* 固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
   <!--[if lt IE 9]> 
   　　<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> 
   <![endif]-->

* 如何區分：DOCTYPE聲明\新增的結構元素\功能元素

六、簡述一下你對HTML語義化的理解？

1、什麼是HTML語義化？
*<基本上都是圍繞着幾個主要的標籤，像標題（H1~H6）、列表（li）、強調（strong em）等等>
*根據內容的結構化（內容語義化），選擇合適的標籤（代碼語義化）便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。

2、爲何要語義化？
*爲了在沒有CSS的狀況下，頁面也能呈現出很好地內容結構、代碼結構:爲了裸奔時好看；
*用戶體驗：例如title、alt用於解釋名詞或解釋圖片信息、label標籤的活用；
*有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重；
*方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
*便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化。

3、寫HTML代碼時應注意什麼？
*儘量少的使用無語義的標籤div和span；
*在語義不明顯時，既可使用div或者p時，儘可能用p, 由於p在默認狀況下有上下間距，對兼容特殊終端有利；
*不要使用純樣式標籤，如：b、font、u等，改用css設置。
*須要強調的文本，能夠包含在strong或者em標籤中（瀏覽器預設樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）；
*使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和通常單元格要區分開，表頭用th，單元格用td；
*表單域要用fieldset標籤包起來，並用legend標籤說明表單的用途；
*每一個input標籤對應的說明文本都須要使用label標籤，而且經過爲input設置id屬性，在lable標籤中設置for=someld來讓說明文本和相對應的input關聯起來。

四、 HTML5新增了哪些語義標籤，詳述之。詳細請看
主要經常使用到的：

header元素：header 元素表明「網頁」或「section」的頁眉。

footer元素：footer元素表明「網頁」或「section」的頁腳，一般含有該節的一些基本信息，譬如：做者，相關文檔連接，版權資料。
若是footer元素包含了整個節，那麼它們就表明附錄，索引，提拔，許可協議，標籤，類別等一些其餘相似信息。

hgroup元素：hgroup元素表明「網頁」或「section」的標題，當元素有多個層級時，該元素能夠將h1到h6元素放在其內，譬如文章的主標題和副標題的組合。
eg：<hgroup>
    <h1>這是一篇介紹HTML 5語義化標籤和更簡潔的結構</h1>
    <h2>HTML 5</h2>
</hgroup>

nav元素：nav元素表明頁面的導航連接區域。用於定義頁面的主要導航部分。

aside元素：aside元素被包含在article元素中做爲主要內容的附屬信息部分，其中的內容能夠是與當前文章有關的相關資料、標籤、名次解釋等。（特殊的section）
eg：
<article>
    <p>內容</p>
    <aside>
        <h1>做者簡介</h1>
        <p>小北，前端一枚</p>
    </aside>
</article>

section元素：section元素表明文檔中的「節」或「段」，「段」能夠是指一篇文章裏按照主題的分段；「節」能夠是指一個頁面裏的分組。
section一般還帶標題，雖然html5中section會自動給標題h1-h6降級，可是最好手動給他們降級。
eg:
<section>
    <h1>section是啥？</h1>
    <article>
        <h2>關於section</h1>
        <p>section的介紹</p>
        <section>
            <h3>關於其餘</h3>
            <p>關於其餘section的介紹</p>
        </section>
    </article>
</section>

article元素：article元素最容易跟section和div容易混淆，其實article表明一個在文檔，頁面或者網站中自成一體的內容，其目的是爲了讓開發者獨立開發或重用。
譬如論壇的帖子，博客上的文章，一篇用戶的評論，一個互動的widget小工具。（特殊的section）
除了它的內容，article會有一個標題（一般會在header裏），會有一個footer頁腳。

HTML5節元素標籤包括body article nav aside section header footer hgroup ，還有h1-h6 address。

address表明區塊容器，必須是做爲聯繫信息出現，郵編地址、郵件地址等等,通常出如今footer。
h1-h6由於hgroup，section和article的出現，h1-h6定義也發生了變化，容許一張頁面出現多個h1。

七、HTML5的離線儲存怎麼使用，工做原理能不能解釋一下？瀏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的呢？請描述一下 cookies，sessionStorage 和 localStorage 的區別？

八、關於iframe？

iframe 元素會建立包含另一個文檔的內聯框架（即行內框架）。
在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 元素。
您能夠把須要的文本放置在 <iframe> 和 </iframe> 之間，這樣就能夠應對沒法理解 iframe 的瀏覽器。

缺點：
*在網頁中使用框架結構最大的弊病是搜索引擎的「蜘蛛」程序沒法解讀這種頁面。
當「蜘蛛」程序遇到由數個框架組成的網頁時，它們只看到框架而沒法找到鏈 接，所以它們會覺得該網站是個死站點，而且很快轉身離去。
*重載頁面時不須要重載整個頁面，只須要重載頁面中的一個框架頁(減小了數據的傳輸，增長了網頁下載速度)。
*方便製做導航欄。
*iframe會阻塞主頁面的Onload事件；

*iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。

注意：使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript動態給iframe添加src屬性值，這樣能夠繞開以上兩個問題。

優勢：
*會產生不少頁面，不容易管理 *不容易打印 *瀏覽器的後退按鈕無效 *代碼複雜,沒法被一些搜索引擎索引到 *多數小型的移動設備（PDA 手機）沒法徹底顯示框架 

*多框架的頁面會增長服務器的http請求 *因爲上面諸多缺點，所以不符合標準網頁設計的理念,已經被標準網頁設計拋棄 

提示: 目前框架的全部優勢徹底可使用Ajax實現，所以已經沒有必要使用框架了。

九、webSocket的實現，以及如何兼容低版本的瀏覽器？

十、網頁驗證碼是幹嗎的，是爲了解決什麼安全問題？

防止惡意註冊和暴力破解 
所謂惡意註冊和暴力破解都是用軟件進行的。人工註冊再快，也須要一項一項輸入資料，速度很慢，對服務器基本沒有影響。若是沒有驗證碼可使用軟件註冊的話，能夠同時運行成千上萬個線程，一次能註冊成千上萬個用戶，讓服務器的數據庫很快變得臃腫不堪，運行效率降低。 若是一個無聊的人或競爭對手對某網站懷有敵意，那麼這種方法很容易就能讓對方癱瘓。