2023最新高頻前端面試題合集（含pdf）
如果大家需要pdf版本的，我已經(jīng)替大家整理好了
1. 什么是 DOCTYPE， 有何作用？
Doctype是HTML5的文檔聲明，通過它可以告訴瀏覽器，使用哪一個HTML版本標準解析文檔。在瀏覽器發(fā)展的過程中，HTML出現(xiàn)過很多版本，不同的版本之間格式書寫上略有差異。如果沒有事先告訴瀏覽器，那么瀏覽器就不知道文檔解析標準是什么？此時，大部分瀏覽器將開啟最大兼容模式來解析網(wǎng)頁，我們一般稱為怪異模式，這不僅會降低解析效率，而且會在解析過程中產(chǎn)生一些難以預知的bug，所以文檔聲明是必須的。
2. 說說對 html 語義化的理解
HTML標簽的語義化，簡單來說，就是用正確的標簽做正確的事情，給某塊內(nèi)容用上一個最恰當最合適的標簽，使頁面有良好的結(jié)構(gòu)，頁面元素有含義，無論是誰都能看懂這塊內(nèi)容是什么。
語義化的優(yōu)點如下：
在沒有CSS樣式情況下也能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)
有利于SEO和搜索引擎建立良好的溝通，有助于爬蟲抓取更多的有效信息，爬蟲是依賴于標簽來確定上下文和各個關(guān)鍵字的權(quán)重
方便團隊開發(fā)和維護，語義化更具可讀性，遵循W3C標準的團隊都遵循這個標準，可以減少差異化
3. src 和 href 的區(qū)別
src和href都是HTML中特定元素的屬性，都可以用來引入外部的資源。兩者區(qū)別如下：
src：全稱source，它通常用于img、video、audio、script元素，通過src指向請求外部資源的來源地址，指向的內(nèi)容會嵌入到文檔中當前標簽所在位置，在請求src資源時，它會將資源下載并應(yīng)用到文檔內(nèi)，比如說：js腳本、img圖片、frame等元素。當瀏覽器解析到該元素時，會暫停其它資源下載，直到將該資源加載、編譯、執(zhí)行完畢。這也是為什么將js腳本放在底部而不是頭部的原因。
href：全稱hyper reference，意味著超鏈接，指向網(wǎng)絡(luò)資源，當瀏覽器識別到它指向的?件時，就會并?下載資源，不會停?對當前?檔的處理，通常用于a、link元素。
4. title 與 h1 的區(qū)別、b 與 strong 的區(qū)別、i 與 em 的區(qū)別？
title 屬性表示網(wǎng)頁的標題，h1 元素則表示層次明確的頁面內(nèi)容標題，對頁面信息的抓取也有很大的影響
strong 是標明重點內(nèi)容，有語氣加強的含義，使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時：strong會重讀，而b是展示強調(diào)內(nèi)容
i 是italic(斜體)的簡寫，是早期的斜體元素，表示內(nèi)容展示為斜體，而 em 是emphasize（強調(diào)）的簡寫，表示強調(diào)的文本
5. 什么是嚴格模式與混雜模式？
嚴格模式：是以瀏覽器支持的最高標準運行
混雜模式：頁面以寬松向下兼容的方式顯示，模擬老式瀏覽器的行為
6. 前端頁面有哪三層構(gòu)成，分別是什么？
構(gòu)成：結(jié)構(gòu)層、表示層、行為層
結(jié)構(gòu)層（structural layer）
結(jié)構(gòu)層類似于蓋房子需要打地基以及房子的懸梁框架，它是由HTML超文本標記語言來創(chuàng)建的，也就是頁面中的各種標簽，在結(jié)構(gòu)層中保存了用戶可以看到的所有內(nèi)容，比如說：一段文字、一張圖片、一段視頻等等
表示層（presentation layer）
表示層是由CSS負責創(chuàng)建，它的作用是如何顯示有關(guān)內(nèi)容，學名：
層疊樣式表，也就相當于裝修房子，看你要什么風格的，田園的、中式的、地中海的，總之CSS都能辦妥行為層（behaviorlayer）
行為層表示網(wǎng)頁內(nèi)容跟用戶之間產(chǎn)生交互性，簡單來說就是用戶操作了網(wǎng)頁，網(wǎng)頁給用戶一個反饋，這是
JavaScript和DOM主宰的領(lǐng)域
7. iframe的作用以及優(yōu)缺點
iframe也稱作嵌入式框架，嵌入式框架和框架網(wǎng)頁類似，它可以把一個網(wǎng)頁的框架和內(nèi)容嵌入到現(xiàn)有的網(wǎng)頁中。
優(yōu)點：
可以用來處理加載緩慢的內(nèi)容，比如：廣告
缺點：
iframe會阻塞主頁面的Onload事件
iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。但是可以通過JS動態(tài)給ifame添加src屬性值來解決這個問題，當然也可以解決iframe會阻塞主頁面的Onload事件的問題
會產(chǎn)生很多頁面，不易管理
瀏覽器的后退按鈕沒有作用
無法被一些搜索引擎識別
8. img上 title 與 alt
alt：全稱
alternate，切換的意思，如果無法顯示圖像，瀏覽器將顯示alt指定的內(nèi)容title：當鼠標移動到元素上時顯示title的內(nèi)容
區(qū)別：
一般當鼠標滑動到元素身上的時候顯示title，而alt是img標簽特有的屬性，是圖片內(nèi)容的等價描述，用于圖片無法加載時顯示，這樣用戶還能看到關(guān)于丟失了什么東西的一些信息，相對來說比較友好。
9. H5和HTML5區(qū)別
H5是一個產(chǎn)品名詞，包含了最新的HTML5、CSS3、ES6等新技術(shù)來制作的應(yīng)用
HTML5是一個技術(shù)名詞，指的就是第五代HTML
10. 行內(nèi)元素和塊級元素分別有哪些？有何區(qū)別？怎樣轉(zhuǎn)換？
常見的塊級元素：p、div、form、ul、li、ol、table、h1、h2、h3、h4、h5、h6、dl、dt、dd
常見的行級元素：span、a、img、button、input、select
塊級元素：
總是在新行上開始，就是每個塊級元素獨占一行，默認從上到下排列
寬度缺少時是它的容器的100%，除非設(shè)置一個寬度
高度、行高以及外邊距和內(nèi)邊距都是可以設(shè)置的
塊級元素可以容納其它行級元素和塊級元素
行內(nèi)元素：
和其它元素都會在一行顯示
高、行高以及外邊距和內(nèi)邊距可以設(shè)置
寬度就是文字或者圖片的寬度，不能改變
行級元素只能容納文本或者其它行內(nèi)元素
使用行內(nèi)元素需要注意的是：
行內(nèi)元素設(shè)置寬度
width無效行內(nèi)元素設(shè)置
height無效，但是可以通過line-height來設(shè)置設(shè)置
margin只有左右有效，上下無效設(shè)置
padding只有左右有效，上下無效
可以通過display屬性對行內(nèi)元素和塊級元素進行切換(主要看第 2、3、4三個值)：
11. label的作用是什么？是怎么用的？
label元素不會向用戶呈現(xiàn)任何特殊效果，但是，它為鼠標用戶改進了可用性，當我們在label元素內(nèi)點擊文本時就會觸發(fā)此控件。也就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉(zhuǎn)到和標簽相關(guān)的表單控件上。最常用label的地方就是表單中的性別單選框了，當點擊文字時也能夠自動聚焦綁定的表單控件。
12. 對于Web標準以及W3C的理解
Web標準簡單來說可以分為結(jié)構(gòu)、表現(xiàn)、行為。其中結(jié)構(gòu)是由HTML各種標簽組成，簡單來說就是body里面寫入標簽是為了頁面的結(jié)構(gòu)。表現(xiàn)指的是CSS層疊樣式表，通過CSS可以讓我們的頁面結(jié)構(gòu)標簽更具美感。行為指的是頁面和用戶具有一定的交互，這部分主要由JS組成
W3C，全稱：world wide web consortium是一個制定各種標準的非盈利性組織，也叫萬維網(wǎng)聯(lián)盟，標準包括HTML、CSS、ECMAScript等等，web標準的制定有很多好處，比如說：
可以統(tǒng)一開發(fā)流程，統(tǒng)一使用標準化開發(fā)工具（VSCode、WebStorm、Sublime），方便多人協(xié)作
學習成本降低，只需要學習標準就行，否則就要學習各個瀏覽器廠商標準
跨平臺，方便遷移都不同設(shè)備
降低代碼維護成本
13. Quirks（怪癖）模式是什么？它和Standards（標準）有什么區(qū)別？
頁面如果寫了DTD，就意味著這個頁面采用對CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式，這就是Quirks模式，有時候也叫怪癖模式、詭異模式、怪異模式。
區(qū)別：總體會有布局、樣式解析、腳本執(zhí)行三個方面區(qū)別，這里列舉一些比較常見的區(qū)別：
盒模型：在W3C標準中，如果設(shè)置一個元素的寬度和高度，指的是元素內(nèi)容的寬度和高度，然而在Quirks模式下，IE的寬度和高度還包含了padding和border設(shè)置行內(nèi)元素的高寬：在Standards模式下，給行內(nèi)元素設(shè)置width和height都不會生效，而在Quriks模式下會生效用margin：0 auto設(shè)置水平居中:在Standards模式下，設(shè)置margin：0 auto；可以使元素水平居中，但是在Quriks模式下失效設(shè)置百分比高度:在Standards模式下，元素的高度是由包含的內(nèi)容決定的，如果父元素沒有設(shè)置百分比的高度，子元素設(shè)置百分比的高度是無效的
14. 知道什么是微格式嗎？談?wù)劺斫?，在前端?gòu)建中應(yīng)該考慮微格式嗎？
所謂的微格式是建立在已有的、被廣泛采用的標準基礎(chǔ)之上的一組簡單的、開放的數(shù)據(jù)格式。
具體表現(xiàn)是把語義嵌入到HTML中，以便有助于分離式開發(fā)，并通過制定一些簡單的約定，來兼顧HTML文檔的人機可讀性，相當于對web網(wǎng)頁進行語義注解。
采用微格式的web頁面，在HTML文檔中給一些標簽增加一些屬性，這些屬性對信息的語義結(jié)構(gòu)進行注解，有助于處理HTML文檔的軟件，更好的理解HTML文檔。當爬取web內(nèi)容時，能夠更為準確地識別內(nèi)容塊的語義，微格式可以對網(wǎng)站進行SEO優(yōu)化。
15. HTML5為什么只需要寫?
為什么HTML5只需要寫一段：
而HTML4卻需要寫很長的一段
其實主要是因為HTML5不基于SGML，所以不需要引用DTD。在HTML4中，<!DOCTYPE>聲明引用DTD，因為HTML4基于SGML。DTD規(guī)定了標記語言的規(guī)則，這樣瀏覽器才能正確的呈現(xiàn)內(nèi)容。
16. HTML5新增了哪些新特性？移除了哪些元素？
HTML5主要是關(guān)于圖像、位置、存儲、多任務(wù)等功能的增加：
語義化標簽，如：article、footer、header、nav等
視頻video、音頻audio
畫布canvas
表單控件，calemdar、date、time、email
地理
本地離線存儲，localStorage長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失，sessionStorage的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除
拖拽釋放
移除的元素：
純表現(xiàn)的元素：
basefont、font、s、strike、tt、u、big、center對可選用性產(chǎn)生負面影響的元素：
frame、frameset、noframes
17. 怎么處理HTML5新標簽兼容問題？
主要有兩種方式：
實現(xiàn)標簽被識別：通過
document.createElement(tagName)方法可以讓瀏覽器識別新的標簽，瀏覽器支持新標簽后。還可以為新標簽添加CSS樣式用JavaScript解決：使用HTML5的shim框架，在
head標簽中調(diào)用以下代碼：
18. 如何實現(xiàn)在一張圖片上的某個區(qū)域做到點擊事件
我們可以通過圖片熱區(qū)技術(shù)：
插入一張圖片，并設(shè)置好圖像的有關(guān)參數(shù)，在
<img>標記中設(shè)置參數(shù)usemap="#Map"，以表示對圖像地圖的引用。用
<map>標記設(shè)定圖像地圖的作用區(qū)域，并取名：Map；分別用
<area>標記針對相應(yīng)位置互粉出多個矩形作用區(qū)域，并設(shè)定好鏈接參數(shù)href
19. a元素除了用于導航外，還有什么作用？
href屬性中的url可以是瀏覽器支持的任何協(xié)議，所以a標簽可以用來手機撥號<a href="tel:110">110</a>，也可以用來發(fā)送短信<a href="sms:110">110</a>，還有郵件等等
當然，a元素最常見的就是用來做錨點和 下載文件。
錨點可以在點擊時快速定位到一個頁面的某個位置，而下載的原理在于a標簽所對應(yīng)的資源瀏覽器無法解析，于是瀏覽器會選擇將其下載下來。
20. 你知道SEO中的TDK嗎？
在SEO中，TDK其實就是title、description、keywords這三個標簽，title表示標題標簽，description是描述標簽，keywords是關(guān)鍵詞標簽
如果大家需要pdf版本的，我已經(jīng)替大家整理好了
