2021 HTML面試題（最新）不定時更新

阿新 • • 發佈：2021-02-03

HTML面試題

DOCTYPE有什麼作用？

DOCTYPE宣告一般位於文件的第一行，它的作用主要是告訴瀏覽器以什麼樣的模式來解析文件。一般指定了之後會以標準模式來進行文件解析，否則就以相容模式進行解析。

在標準模式下，瀏覽器的解析規則都是按照最新的標準進行解析的。而在相容模式下，瀏覽器會以向後相容的方式來模擬老式瀏覽器的行為，以保證一些老的網站的正確訪問。

標準模式（又稱嚴格模式）與相容模式（又稱混雜模式）各有什麼區別？

HTML5 為什麼只需要寫 `<!DOCTYPE HTML>`，而不需要引入 DTD？

HTML5 不基於 SGML，因此不需要對 DTD 進行引用，但是需要 DOCTYPE 來告訴瀏覽器以什麼樣的模式來解析文件。而 html5 以前的 html 文件都是基於 SGML 的，所以需要對 DTD 進行引用，才能告知瀏覽器文件所使用的文件型別。

SGML 、XML 、 HTML 和 XHTML 的關係？

SGML 是標準通用標記語言，是一種定義電子文件結構和描述其內容的國際標準語言，是所有電子文件標記語言的起源。

XML 是可擴充套件標記語言。

HTML 是超文字標記語言，是一種基於web網頁的設計語言，主要是用於規定怎麼顯示網頁。XML 和 HTML 的最大區別就在於 XML 的標籤是可以自己建立的，數量無限多，而 HTML 的標籤都是固定的而且數量有限。

XHTML 是現在基本上所有網頁都在用的標記語言，是一種基於XML、語法嚴格、標準的設計語言。他其實和 HTML 沒什麼本質的區別，標籤都一樣，用法也都一樣，就是比 HTML更嚴格，比如標籤必須都用小寫，標籤都必須有閉合標籤等。

什麼是閉合標籤

所謂閉合標籤，就是標籤有開始，有結束。但是有一些標籤是沒有結束標籤的，比如，他有兩種寫法，第一種：，第二種：，現在html5中，做了統一規範，要求所有的標籤必須閉合。

說一下DTD

DTD（ Document Type Definition 文件型別定義）是一組機器可讀的規則，是html文件的驗證機制。DTD定義 XML 或 HTML 的特定版本中所有允許元素以及它們的屬性和層次關係等。在解析網頁時，瀏覽器將使用這些規則檢查頁面的有效性並且採取相應的措施。

行內元素有哪些？塊級元素有哪些？空(void)元素有那些？行內元素和塊級元素有什麼區別？

行內元素：a b span img input label select
塊級元素：div ul ol li dl dt dd h1 p
空元素：br hr link meta img input
兩者的區別：
1. 行內元素不可以設定高寬，不獨佔一行
2. 塊級元素可以設定高寬，並且獨佔一行

在HTML元素中，沒有內容的 HTML 元素被稱為空元素。
hr標籤用於在文字中繪製水平線以分隔內容

談談你對web標準和W3C的理解和認識。

web標準主要強調的是一個網站的結構,樣式,行為相分離，**（優點）**從而達到結構清晰，易於閱讀，易於維護的目的。

W3C對web標準提出了規範化的要求，也就是在實際程式設計中的一些程式碼規範：包含如下幾點：

1.對於結構的要求有：標籤字母要小寫、標籤要閉合、標籤不允許隨意巢狀。用標籤語義化來提高搜尋引擎對頁面的抓取效率。

2.對於樣式和行為的要求有：

儘量使用外鏈css樣式表和js指令碼。這樣做符合結構,樣式,行為分離規範。同時提高頁面渲染速度，提高使用者的體驗。
樣式儘量少用行間樣式表，使結構與表現分離，程式碼精簡，使程式碼易維護、可複用。

什麼是語義化的HTML？

1.什麼是語義化的HTML，舉例
2.語義化HTML的好處
	對於開發者：
	對於網頁SEO優化

語義化的HTML，簡單來說就是用正確的標籤做正確的事。例如：段落用 p 標籤，標題用 h 系列標籤，邊欄用 aside 標籤，主要內容用 main 標籤。正確使用語義標籤可以給我們帶來很多好處。

對我們開發者來說，語義化的HTML能夠增強程式碼可讀性，在沒有 CSS 的情況下也能較好地呈現網頁的結構，便於團隊的開發和維護。另一方面也有利於 SEO優化，提高搜尋引擎對頁面的抓取效率。比如說我們常用的 b 標籤和 strong 標籤，它們在樣式上都是文字的加粗，但是 strong 標籤擁有強調的語義。網路爬蟲對我們網頁進行分析時，那麼它會依賴於 html 標籤來確定上下文和各個關鍵字的權重，一個語義化的文件是有利於爬蟲對文件內容解讀的，從而有利於我們網站的 SEO 優化。

談一談SEO

1.什麼是SEO，進行SEO的目的。
2.搜尋引擎的工作原理
3.SEO方向
4.前端具體的SEO操作

SEO(Search Engine Optimization)，即搜尋引擎優化。我們進行SEO優化的目的就是為了提升網站在搜尋引擎中的權重，使得使用者在搜尋網站時我們的網站能排在前面。

要進行優化，我們得先了解搜尋引擎是怎麼工作的：

網路爬蟲每天在網際網路上爬行，從一個連結到另一個連結，下載其中的內容，進行分析提煉，找到其中的關鍵詞，如果網路爬蟲認為關鍵詞在資料庫中沒有而對使用者是有用的便存入後臺的資料庫中。反之，如果網路爬蟲認為是垃圾資訊或重複資訊，就捨棄不要，繼續爬行，尋找最新的、有用的資訊儲存起來提供使用者搜尋。當用戶搜尋時，就能檢索出與關鍵字相關的網址顯示給使用者。一個關鍵詞對用多個網址，因此就出現了排序的問題，與關鍵詞最吻合的網址就會排在前面了。

那麼瞭解了他的工作原理，我們就有了優化的方向，讓爬蟲能爬取到網站更多有用的關鍵字，提高我們的權重。

1.網站結構佈局優化。控制首頁連結數量，提倡使用扁平化結構，儘量讓網路爬蟲只要跳轉3次，就能到達網站內的任何一個內部頁面。

2.網頁程式碼優化。使用語義化標籤書寫HTML程式碼，符合W3C標準，實現SEO優化。

具體的SEO操作主要有:

前端需要注意哪些 SEO

（1）合理的 title、description、keywords：搜尋對這三項的權依次減小，title 值強調重點即可；description 把頁面內容高度概括，長度合適；keywords 列舉出重要關鍵詞即可。
（2）語義化的 HTML 程式碼，符合 W3C 規範：語義化程式碼讓搜尋引擎容易理解網頁。
（3）重要內容 HTML 程式碼放在最前：搜尋引擎抓取 HTML 順序是從上到下，有的搜尋引擎對抓取長度有限制，保證重要內容肯定被抓取。
（4）重要內容不要用 js 輸出：爬蟲不會執行 js 獲取內容
（5）少用 iframe：搜尋引擎不會抓取 iframe 中的內容

（6）圖片必須加 alt title

（7）提高網站速度：網站速度是搜尋引擎排序的一個重要指標

請寫出table標籤下面會包含哪些標籤元素

tr th td thead tbody tfoot 等

常用瀏覽器有哪些，核心都是什麼？

常用的瀏覽器有IE、Chrome、Firefox、Safari、Opera。在說其核心之前，我先談談我對瀏覽器核心的理解。所謂的瀏覽器核心指的是一個瀏覽器最核心的部分——渲染引擎，瀏覽器核心，其實除了渲染引擎，有時候也包含了javascript引擎，如WebKit，它由渲染引擎WebCore和javascript引擎JSCore組成。

渲染引擎的主要作用是幫助瀏覽器來渲染網頁的內容，將頁面內容和排版程式碼轉換為使用者所見的檢視。瀏覽器的核心的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。

JS引擎的主要作用是解析和執行JavaScript來實現網頁的動態效果。最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，瀏覽器核心就傾向與只指渲染引擎。

IE核心：Trident
Chrome核心：以前是Webkit，現在是Blink
Firefox核心：Gecko
Safari核心：Webkit
Opera核心：最初是Presto，後來是Webkit，現在是Blink（Webkit的分支）

介紹一下你對瀏覽器核心的理解？

瀏覽器核心主要分成兩部分：渲染引擎和 JS 引擎。
渲染引擎的主要作用是幫助瀏覽器來渲染網頁的內容，將頁面內容和排版程式碼轉換為使用者所見的檢視。瀏覽器的核心的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。
JS引擎的主要作用是解析和執行JavaScript來實現網頁的動態效果。
最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，瀏覽器核心就傾向與只指渲染引擎。

常見的瀏覽器核心比較

Trident：這個核心是 IE 瀏覽器用的核心，因為在早期 IE 佔有大量的市場份額，所以這種核心比較流行，以前有很多網頁也是根據這個核心的標準來編寫的，但是實際上這個核心對真正的網頁標準支援不是很好。
後來由於微軟也很長時間沒有更新 Trident 核心，就導致了 Trident 核心和 W3C 標準脫節。還有就是 Trident 核心的大量 Bug 等安全問題沒有得到解決，使很多使用者開始轉向其他瀏覽器。

Gecko：這是 Firefox 所採用的核心，這個核心的優點就是功能強大、豐富，可以支援很多複雜網頁效果和瀏覽器擴充套件介面，但是代價是也顯而易見就是要消耗很多的資源，比如記憶體。

Presto：Opera 曾經採用的就是 Presto 核心，Presto 核心被稱為公認的瀏覽網頁速度最快的核心，這得益於它在開發時的天生優勢，在處理 JS 指令碼等指令碼語言時，會比其他的核心快3倍左右，缺點就是它為了達到很快的速度而丟掉了一部分網頁相容性。

Webkit：Webkit 是 Safari 採用的核心，它的優點就是網頁瀏覽速度較快，雖然不及 Presto 但是也勝於 Gecko 和 Trident。缺點是對於網頁程式碼的容錯性不高，也就是說對網頁程式碼的相容性較低，會使一些編寫不標準的網頁無法正確顯示。WebKit 前身是 KDE 小組的 KHTML 引擎，可以說 WebKit 是 KHTML 的一個開源的分支。

Blink： 谷歌在 Chromium 專案中研發 Blink 渲染引擎（即瀏覽器核心），內置於 Chrome 瀏覽器之中。其實 Blink 引擎就是 Webkit 的一個分支，Blink 引擎現在是谷歌公司與 Opera Software 共同研發，上面提到過的，Opera 棄用了自己的 Presto核心，加入 Google 陣營，跟隨谷歌一起研發 Blink。

什麼是靜態頁面？什麼是動態頁面？

靜態頁面是指沒有資料互動的網頁，就是沒有資料庫參與，沒有伺服器端資料的載入。比如靜態網頁就是隻有HTML+CSS+Javasript作出的網站；動態頁面就是指有後臺數據參與的網頁，網頁中的資料是從資料庫中提取的，需要後臺邏輯的支援，比如動態網頁就是JSP頁面（後臺語言是JAVA）、ASP頁面（後臺語言是ASP.NET）等。

如何建立錨點？錨點的作用是什麼？

錨點是文件中某一行的一個記號，類似於書籤，用於連結到文件中的某個位置。建立錨點的方法是，使用元素建立錨點時，使用name屬性為其命名，對其他元素，還可以使用id屬性為其命名。當定義錨點後，可以建立直接跳至該錨點的連結，這樣使用者就無須不停的滾動頁面來尋找他們需要的資訊了，設定錨點連結的時候就是href ="#xxx"。

列舉常用的結構標籤，並描述其作用

1.結構標籤是什麼
2.用處
3.列舉+作用。

結構標籤是專門用於標識頁面的不同結構，相對於使用

元素而言，結構標籤可以實現標籤的語義化。

常用的結構標籤有以下幾種：

header標籤，用於定義文件的頁首。
nav標籤，用於定義頁面的導航連結部分。
section標籤，用於定義文件中的節，表示文件中的一個具體的組成部分。
article標籤，常用於定義獨立於文件其他部分的內容。
aside標籤，常用於定義頁面的一些額外組成部分，如廣告欄，側邊欄和相關引用資訊。
footer標籤，定義某區域的腳註資訊。

div是什麼？在div出現之前用什麼做網站佈局？

div是網站佈局的盒子標籤。div出現之前使用table佈局，因為table佈局巢狀很多。網站載入慢（table無法區域性渲染），佈局層級不清晰。

img標籤上的title和alt屬性的區別是什麼？

title屬性是為元素提供標題資訊，即當游標懸浮在標籤上後顯示的資訊；

alt屬性是圖片的替換文字，即當圖片不能正常顯示時（如載入失敗），用文字代替。除了純裝飾圖片外都必須設定有意義的alt值，搜尋引擎會重點分析。

簡述src和href的區別

src表示來源地址，用在img、script等元素上。 href表示超文字引用（hypertext reference），用在link和a等元素上。總的來說， src表示資源的一個引入。href的內容與該頁面有關聯，即引用。它們的區別就是一個引入和引用。

簡述< strong > < em >和< b>< i>標籤的區別

標籤和標籤一樣，用於強調文字，但強調的程度更強一些；是斜體強調標籤，強調更強烈、表示內容的強調點。視覺上相等於html元素中的…。和是即語義化元素。 是視覺元素，即非語義化元素，分別表示無意義的加粗和無意義的斜體。

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

（1）作用的區別。 @import 是 CSS 提供的語法規則，只有匯入樣式表的作用；link 是 HTML 提供的標籤，不僅可以載入 CSS 檔案，還可以定義 RSS、rel 連線屬性、引入網站圖示等。

（2）載入順序區別。載入頁面時，link 標籤引入的 CSS 被同時載入；@import 引入的 CSS 將在頁面載入完畢後被載入。

（3）相容性區別。@import 是 CSS2.1 才有的語法，故只可在 IE5+ 才能識別；link 標籤作為 HTML 元素，不存在相容性問題。

（4）DOM 可控性區別。可以通過 JS 操作 DOM ，插入 link 標籤來改變樣式；由於 DOM 方法是基於文件的，無法使用 @import 的方式插入樣式。

瀏覽器的渲染原理？

瀏覽器渲染總體來說分為以下幾步

首先解析收到的文件，根據文件定義構建一棵 DOM 樹，DOM 樹是由 DOM 元素及屬性節點組成的。
然後對 CSS 進行解析，構建 CSSOM 規則樹。
根據 DOM 樹和 CSSOM 規則樹構建渲染樹
根據渲染樹來佈局，以計算每個節點的幾何資訊。
將各個節點繪製到螢幕上。

 （1）首先解析收到的文件，根據文件定義構建一棵 DOM 樹，DOM 樹是由 DOM 元素及屬性節點組成的。

 （2）然後對 CSS 進行解析，構建 CSSOM 規則樹。

 （3）根據 DOM 樹和 CSSOM 規則樹構建渲染樹。渲染樹的節點被稱為渲染物件，渲染物件是一個包含有顏色和大小等屬性的矩形，渲染物件和 DOM 元素相對應，但這種對應關係不是一對一的，不可見的 DOM 元素不會被插入渲染樹。還有一些 DOM元素對應幾個可見物件，它們一般是一些具有複雜結構的元素，無法用一個矩形來描述。

 （4）當渲染物件被建立並新增到樹中，它們並沒有位置和大小，所以當瀏覽器生成渲染樹以後，就會根據渲染樹來進行佈局（也可以叫做迴流）。這一階段瀏覽器要做的事情是要弄清楚各個節點在頁面中的確切位置和大小。通常這一行為也被稱為“自動重排”。

 （5）佈局階段結束後是繪製階段，遍歷渲染樹並呼叫渲染物件的 paint 方法將它們的內容顯示在螢幕上，繪製使用 UI 基礎元件。值得注意的是，這個過程是逐步完成的，為了更好的使用者體驗，渲染引擎將會盡可能早的將內容呈現到螢幕上，並不會等到所有的html 都解析完成之後再去構建和佈局 render 樹。它是解析完一部分內容就顯示一部分內容，同時，可能還在通過網路下載其餘內容。

詳細資料可以參考：《瀏覽器渲染原理》《瀏覽器的渲染原理簡介》《前端必讀：瀏覽器內部工作原理》《深入淺出瀏覽器渲染原理》

渲染過程中遇到 JS 檔案怎麼處理？/JavaScript如何阻塞文件解析（瀏覽器解析過程）

JavaScript 的載入、解析與執行會阻塞文件的解析，也就是說，在構建 DOM 時，HTML 解析器若遇到了 JavaScript，那麼它會暫停文件的解析，將控制權移交給 JavaScript 引擎，等 JavaScript 引擎執行完畢，瀏覽器再從中斷的地方恢復繼續解析文件。

也就是說，如果你想首屏渲染的越快，就越不應該在首屏就載入 JS 檔案，這也是都建議將 script 標籤放在 body 標籤底部的原因。當然在當下，並不是說 script 標籤必須放在底部，因為我們可以給 script 標籤新增 defer 或者 async 屬性來改變。

async 和 defer 的作用是什麼？有什麼區別？（瀏覽器解析過程）

（1）指令碼沒有 defer 或 async，瀏覽器會立即載入並執行指定的指令碼，也就是說不等待後續載入的文件元素，讀到就載入並執行。

（2）defer 屬性表示延遲執行引入的 JavaScript，即這段 JavaScript 載入時 HTML 並未停止解析，這兩個過程是並行的。當整個 document 解析完畢後再執行指令碼檔案，在 DOMContentLoaded 事件觸發之前完成。多個指令碼按順序執行。

（3）async 屬性表示非同步執行引入的 JavaScript，與 defer 的區別在於，如果已經載入好，就會開始執行，也就是說它的執行仍然會阻塞文件的解析，只是它的載入過程不會阻塞。多個指令碼的執行順序無法保證。

詳細資料可以參考：《defer 和 async 的區別》

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/optimizing-critical-rendering-path?hl=zh-cn)

什麼是文件的預解析？（瀏覽器解析過程）

1.xxx採用了，什麼是預解析
2.好處
2.需要注意，不改變DOM，其職責是。

Webkit 和 Firefox 都做了這個優化，當執行 JavaScript 指令碼時，另一個執行緒解析剩下的文件，並載入後面需要通過網路載入的資源。這種方式可以使資源並行載入從而使整體速度更快。需要注意的是，預解析並不改變 DOM 樹，它將這個工作留給主解析過程，自己只解析外部資源的引用，比如外部指令碼、樣式表及圖片。

CSS 如何阻塞文件解析？

CSS 不會阻塞 DOM 的解析，但會阻塞頁面渲染。我們想象一個場景，JavaScript 指令碼執行時，可能請求樣式資訊，如果樣式還沒有載入和解析，指令碼將得到錯誤的值。
所以如果瀏覽器尚未成功構建 CSSOM，而我們卻想在此時執行指令碼，那麼瀏覽器將延遲 JavaScript 指令碼執行和文件的解析，優先構建 CSSOM。也就是說，在這種情況下，瀏覽器會優先構建 CSSOM，然後再執行 JavaScript，最後再繼續文件的解析。

渲染頁面時常見哪些不良現象？（瀏覽器渲染過程）

FOUC：主要指的是樣式閃爍的問題，由於瀏覽器渲染機制（比如firefox），在 CSS 載入之前，先呈現了 HTML，就會導致展示出無樣式內容，然後樣式突然呈現的現象。會出現這個問題的原因主要是 css 載入時間過長，或者 css 被放在了文件底部。

白屏：有些瀏覽器渲染機制（比如chrome）要先構建 DOM 樹和 CSSOM 樹，構建完成後再進行渲染，如果 CSS 部分放在 HTML尾部，由於 CSSOM 樹未構建完成，瀏覽器遲遲未渲染，從而導致白屏；也可能是把 js 檔案放在頭部，指令碼的載入會阻塞後面文件內容的解析，從而頁面遲遲未渲染出來，出現白屏問題。

詳細資料可以參考：《前端魔法堂：解祕 FOUC》《白屏問題和 FOUC》

如何優化關鍵渲染路徑？（瀏覽器渲染過程）

關鍵渲染路徑優化的目的在於縮短首次渲染頁面的時間。為儘快完成首次渲染，我們需要最大限度減小以下三種可變因素：

（1）關鍵資源的數量。
（2）關鍵路徑長度。
（3）關鍵位元組的數量。
關鍵資源是可能阻止網頁首次渲染的資源。這些資源越少，瀏覽器的工作量就越小，對 CPU 以及其他資源的佔用也就越少。

關鍵路徑長度是獲取所有關鍵資源所需的往返次數或總時間。某些資源只能在上一資源處理完畢之後才能開始下載,並且資源越大，下載所需的往返次數就越多。

關鍵位元組是實現網頁首次渲染所需的總位元組數。瀏覽器需要下載的關鍵位元組越少，處理內容並顯示到螢幕上的速度就越快。要減少位元組數，我們可以減少資源數（將它們刪除或設為非關鍵資源），此外還要壓縮和優化各項資源，比如CSS等，確保最大限度減小傳送大小。

優化關鍵渲染路徑的常規步驟如下：
（1）對關鍵路徑進行分析和特性描述：資源數、位元組數、長度。
（2）最大限度減少關鍵資源的數量：刪除它們，延遲它們的下載，將它們標記為非同步等。
（3）優化關鍵資源的載入順序：儘早下載所有關鍵資源，以縮短關鍵路徑長度。
（4）優化關鍵位元組數以縮短下載時間。

參考資料：優化關鍵渲染路徑

什麼是重繪和迴流？（瀏覽器繪製過程）

重繪: 當渲染樹中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，而不會影響佈局的操作，比如改變background-color、color等，我們將這樣的操作稱為重繪。
迴流：當渲染樹中的部分或全部，因為元素的尺寸、佈局、隱藏等改變而需要重新構建的操作，會影響到佈局的操作，這樣的操作我們稱為迴流。
任何會改變元素幾何資訊（元素的位置和尺寸大小）的操作，都會觸發迴流。
（1）瀏覽器視窗尺寸改變——resize事件發生時
（2）修改網頁的預設字型時
（3）元素內容變化，比如使用者在 input 框中輸入文字
（4）元素尺寸改變——邊距、填充、邊框、寬度和高度
（5）新增或者刪除可見的 DOM 元素；

要注意的是，迴流必定會發生重繪，重繪不一定會引發迴流。迴流所需的成本比重繪高的多，改變父節點裡的子節點很可能會導致父節點的一系列迴流。

詳細資料可以參考：《瀏覽器的迴流與重繪》

如何減少/避免迴流？（瀏覽器繪製過程）

主要分成2部分來避免。

在CSS方面

避免使用table佈局。因為可能很小的一個小改動會造成整個 table 的重新佈局。
將動畫效果應用到position屬性為absolute或fixed的元素上。
避免使用CSS表示式（例如：calc()）。

在JavaScript方面

避免頻繁操作樣式，最好一次性重寫style屬性，或者將樣式列表定義為class並一次性更改class屬性。
避免頻繁操作DOM，推薦DOM 離線後修改，使用 documentFragment物件在記憶體裡操作 DOM，最後再把它新增到文件中。

為什麼操作 DOM 慢？（瀏覽器繪製過程）

一些 DOM 的操作或者屬性訪問可能會引起頁面的迴流和重繪，從而引起效能上的消耗。

DOMContentLoaded 事件和 Load 事件的區別？

當 HTML 文件被完全載入和解析完成之後，DOMContentLoaded 事件被觸發，而無需等待樣式表、影象和子框架的載入完成。

Load 事件是當所有資源載入完成後觸發的。

詳細資料可以參考：《DOMContentLoaded 事件和 Load 事件的區別？》

HTML5 有哪些新特性、移除了那些元素？

HTML5 現在已經不是基於SGML的了，主要是對影象，位置，儲存，多工等功能進行了增加。

新增的一些特性有：

新增了多媒體標籤，用於媒介回放的 video 和 audio 元素;
新增了語義化標籤，比如 article、footer、header、nav、section;
新增了input的型別，例如date、time、email、url、search;
對本地離線儲存有了更好的支援,它提供了兩種方法： localStorage和 sessionStorage。
localStorage 長期儲存資料，瀏覽器關閉後資料不丟失;
sessionStorage 的資料在瀏覽器關閉後自動刪除;
新的技術 web worker, web socket;
繪畫 canvas;

如果問到webworker，就說只瞭解了一些沒使用過。
Web Worker 的作用，就是為 JavaScript 創造多執行緒環境，允許主執行緒建立 Worker 執行緒，將一些任務分配給worker執行緒執行。在主執行緒執行的同時，Worker 執行緒在後臺執行，兩者互不干擾。等到 Worker 執行緒完成計算任務，再把結果返回給主執行緒。這樣的好處是，一些計算密集型或高延遲的任務，被 Worker 執行緒負擔了，主執行緒就會很流暢，不會被阻塞或緩慢。

WebSocket 是 HTML5 開始提供的在單個 TCP 連線上進行全雙工通訊的協議。
WebSocket 使得客戶端和伺服器之間的資料交換變得更加簡單，允許服務端主動向客戶端推送資料。在 Web Socket API 中，瀏覽器和伺服器只需要完成一次握手，兩者之間就可以建立永續性的連線，並進行雙向資料傳輸。

HTML5移除的元素有：

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

如何處理 HTML5 新標籤的瀏覽器相容問題？

（1） IE8/IE7/IE6 支援通過 document.createElement 方法產生新標籤，可以利用這一特性讓這些瀏覽器支援 HTML5 新標籤，瀏覽器支援新標籤後，還需要新增標籤預設的樣式。

（2）當然也可以直接使用成熟的框架，比如 html5shiv 。當瀏覽器指令碼小於IE9的時候引入該js指令碼。

 <!--[if lt IE 9]>
     <script src="https://cdn.jsdelivr.net/npm/html5shiv/dist/html5shiv.min.js"> </script>
 <![endif]-->
 
 使用[if lt IE 9]……[endif]判斷 IE 的版本，限定只有 IE9 以下瀏覽器版本需要執行的語句。

HTML5 的離線儲存怎麼使用，工作原理能不能解釋一下？

離線儲存就是在使用者沒有網路時，可以正常訪問站點或應用，在使用者有網路時，更新使用者機器上的快取檔案。

HTML5 的離線儲存的原理：是基於一個新建的 .appcache 檔案的快取機制，通過這個檔案上的解析清單離線儲存資源，這些資源就會像 cookie 一樣被儲存了下來。之後當網路在處於離線狀態下時，瀏覽器會通過被離線儲存的資料進行頁面展示。

如何使用的大致步驟：

（1）建立一個和 html 同名的 manifest 檔案，例如cache.manifest，然後在頁面頭部加入一個 manifest 的屬性，屬性值為剛剛建立的檔案。

 <html lang="en" manifest="cache.manifest">

（2）在如下 cache.manifest 檔案的編寫離線儲存的資源。

   	CACHE MANIFEST
   	#v0.11
   	
   	CACHE:
   	
   	js/app.js
   	css/style.css
   	
   	NETWORK:
   	resourse/logo.png
   	
   	FALLBACK:
   	/ /offline.html

離線儲存的manifest一般由三個部分組成：

CACHE: 表示需要離線儲存的資源列表，由於包含 manifest 檔案的頁面將被自動離線儲存，所以不需要把頁面自身也列出來。

NETWORK: 表示在它下面列出來的資源只有在線上的情況下才能訪問，他們不會被離線儲存，所以在離線情況下無法使用這些資源。不過，如果在 CACHE 和NETWORK 中有一個相同的資源，那麼這個資源還是會被離線儲存，也就是說 CACHE 的優先順序更高。

FALLBACK: 指定了一個後備頁面，當資源無法訪問時，瀏覽器會使用該頁面。比如上面這個檔案表示的就是如果訪問根目錄下任何一個資源失敗了，那麼就去訪問 offline.html 。

（3）在離線狀態時，操作 window.applicationCache 進行離線快取的操作。

如何更新快取：

（1）更新 manifest 檔案
（2）通過 javascript 操作
（3）清除瀏覽器快取

注意事項：

（1）如果 manifest 檔案，或者內部列舉的某一個檔案不能正常下載，整個更新過程都將失敗，瀏覽器繼續全部使用老的快取。
（2）引用 manifest 的 html 必須與 manifest 檔案同源，在同一個域下。
（3）FALLBACK 中的資源必須和 manifest 檔案同源。
（4）當 manifest 檔案發生改變時，資源請求本身也會觸發更新。

詳細的使用可以參考：《HTML5 離線快取-manifest 簡介》《有趣的 HTML5：離線儲存》

瀏覽器是怎麼對 HTML5 的離線儲存資源進行管理和載入的呢？

線上的情況下，瀏覽器發現 html 頭部有 manifest 屬性，它會請求 manifest 檔案，如果是第一次訪問，那麼瀏覽器就會根據 manifest 檔案的內容下載相應的資源並且進行離線儲存。如果已經訪問過並且資源已經離線儲存了，那麼瀏覽器就會使用離線的資源載入頁面，然後瀏覽器會對比新的 manifest 檔案與舊的 manifest 檔案，如果檔案沒有發生改變，就不做任何操作，如果檔案改了，那麼就會重新下載檔案中的資源並進行離線儲存。
離線的情況下，瀏覽器就直接使用離線儲存的資源。

常見的瀏覽器端的儲存技術有哪些？

瀏覽器常見的儲存技術有 cookie、localStorage 和 sessionStorage。
還有兩種儲存技術用於大規模資料儲存，webSQL（已被廢除）和 indexDB。
IE 支援 userData 儲存資料，但是基本很少使用到，除非有很強的瀏覽器相容需求。

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

瀏覽器端常用的儲存技術是 cookie 、localStorage 和 sessionStorage。

cookie 其實最開始是伺服器端用於記錄使用者狀態的一種方式，由伺服器設定，在客戶端儲存，然後每次發起同源請求時，傳送給伺服器端。cookie 最多能儲存 4 k 資料，它的生存時間由 expires 屬性指定，並且 cookie 只能被同源的頁面訪問共享。

localStorage 也是 html5 提供的一種瀏覽器本地儲存的方法，它一般也能夠儲存 5M 或者更大的資料。除非手動刪除它，否則它不會失效，並且 localStorage 也只能被同源頁面所訪問共享。

sessionStorage 是 html5 提供的一種瀏覽器本地儲存的方法。它一般能夠儲存 5M 或者更大的資料，它和localStorage 不同的是，它在當前視窗關閉後就失效了，並且 sessionStorage 只能被同一個視窗的同源頁面所訪問共享。

上面幾種方式都是儲存少量資料的時候的儲存方式，當我們需要在本地儲存大量資料的時候，我們可以使用瀏覽器提供的一種本地的資料庫的 indexDB 。它不是關係型資料庫，它內部採用物件倉庫的形式儲存資料，它更接近 NoSQL 資料庫。

詳細的資料可以參考：《請描述一下 cookies，sessionStorage 和 localStorage 的區別？》《瀏覽器資料庫 IndexedDB 入門教程》

iframe 有那些優缺點？

iframe 元素會建立包含另外一個文件的內聯框架。

優點:
1.程式調入靜態頁面比較方便;
2.頁面和程式分離;

缺點：

主要缺點有：
（1） iframe 會阻塞主頁面的 onload 事件。window 的 onload 事件需要在所有 iframe 載入完畢後（包含裡面的元素）才會觸發。在 Safari 和 Chrome 裡，通過 JavaScript 動態設定 iframe 的 src 可以避免這種阻塞情況。
（2）搜尋引擎的檢索程式無法解讀這種頁面，不利於網頁的 SEO 。
（3） iframe 和主頁面共享連線池，而瀏覽器對相同域的連線有限制，所以會影響頁面的並行載入。
（4）瀏覽器的後退按鈕失效。
（5）小型的移動裝置無法完全顯示框架。

詳細的資料可以參考：《使用 iframe 的優缺點》《iframe 簡單探索以及 iframe 跨域處理》

Label 的作用是什麼？是怎麼用的

label 標籤是用來定義表單控制間的關係，當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控制元件上。

例如建立一個Input標籤，設定其name屬性。再建立一個label標籤，設定其for屬性，其屬性值為上面建立的name屬性值。這樣就實現了選擇label，焦點跳轉至Input的效果。

 <label for="Name">Number:</label>
 <input type="text" name="Name" id="Name"/>

HTML5 的 form 的自動完成功能是什麼？

autocomplete 屬性規定輸入欄位是否啟用自動完成功能。預設為啟用，設定為 autocomplete=off 可以關閉該功能。

自動完成功能允許瀏覽器預測對欄位的輸入。當用戶在欄位開始輸入時，瀏覽器基於之前輸入過的值，顯示出在欄位中填寫的選項。

autocomplete 屬性適用於，以及一些的型別：text, search, url, telephone, email, password, datepickers, range 以及 color。

如何實現瀏覽器內多個標籤頁之間的通訊?

實現多個標籤頁之間的通訊，本質上都是通過中介者模式來實現的。因為標籤頁之間沒有辦法直接通訊，因此我們可以找一箇中介者，讓標籤頁和中介者進行通訊，然後讓這個中介者來進行訊息的轉發。

第一種實現的方式是使用 websocket 協議，因為 websocket 協議可以實現伺服器推送，所以伺服器就可以用來當做這個中介者。標籤頁通過向伺服器傳送資料，然後由伺服器向其他標籤頁推送轉發。

第二種是使用 ShareWorker 的方式，shareWorker 會在頁面存在的生命週期內建立一個唯一的執行緒，並且開啟多個頁面也只會使用同一個執行緒。這個時候共享執行緒就可以充當中介者的角色。標籤頁間共享一個執行緒，然後通過這個共享的執行緒來實現資料的交換。

第三種方式是使用 localStorage 的方式，我們可以在一個標籤頁中對 localStorage 的變化事件進行監聽，然後當另一個標籤頁修改資料的時候，我們就可以通過這個監聽事件來獲取到資料。這個時候 localStorage 物件就是充當的中介者的角色。

相關資料：

 （1）使用 WebSocket，通訊的標籤頁連線同一個伺服器，傳送訊息到伺服器後，伺服器推送訊息給所有連線的客戶端。

 （2）使用 SharedWorker （只在 chrome 瀏覽器實現了），兩個頁面共享同一個執行緒，通過向執行緒傳送資料和接收資料來實現標
     籤頁之間的雙向通行。

 （3）可以呼叫 localStorage、cookies 等本地儲存方式，localStorge 另一個瀏覽上下文裡被新增、修改或刪除時，它都會觸
     發一個 storage 事件，我們通過監聽 storage 事件，控制它的值來進行頁面資訊通訊；

 （4）如果我們能夠獲得對應標籤頁的引用，通過 postMessage 方法也是可以實現多個標籤頁通訊的。

詳細的資料可以參考：

《WebSocket 教程》《WebSocket 協議：5分鐘從入門到精通》《WebSocket 學習（一）——基於 socket.io 實現簡單多人聊天室》《使用 Web Storage API》《JavaScript 的多執行緒，Worker 和 SharedWorker》《實現多個標籤頁之間通訊的幾種方法》

頁面可見性（Page Visibility API）可以有哪些用途？如何使用？

這個新的 API 的意義在於，通過監聽網頁的可見性，可以預判網頁的解除安裝，還可以用來節省資源，減緩電能的消耗。比如，一旦使用者不看網頁，下面這些網頁行為都是可以暫停的。
（1）對伺服器的輪詢
（2）網頁動畫
（3）正在播放的音訊或視訊

這個API的具體使用方法

首先這個 API 主要在document物件上，新增了一個document.visibilityState屬性。該屬性返回一個字串，表示頁面當前的可見性狀態，共有三個可能的值：

hidden: 頁面徹底不可見
visible: 頁面至少部分可見
prerender :頁面即將或正在渲染，處於不可見狀態。

只要document.visibilityState屬性發生變化，就會觸發visibilitychange事件。因此，可以通過監聽這個事件（通過document.addEventListener()方法或document.onvisibilitychange屬性），跟蹤頁面可見性的變化。

當頁面可見性狀態為hidden的時候，進行暫停視訊播放等等操作。能夠有效的節省資源，降低電耗。

詳細資料可以參考：《Page Visibility API 教程》

如何在頁面上實現一個圓形的可點選區域？

（1）css 實現，使用 border-radius ，設定border-radius 為50%，即可將正方形變成圓形，實現一個圓形的點選區域。
（2） html 實現，使用來給影象標記熱點區域的方式。標籤用來定義一個客戶端影象對映，標籤用來定義影象對映中的區域，area 元素永遠巢狀在 map 元素內部，我們可以將 area 區域設定為圓形，從而實現可點選的圓形區域。

<img src="shilaimu.jpg" alt="史萊姆照片" title="史萊姆" width="299" height="299" border="0" usemap="#Map" />
<map name="Map" id="Map">
    <area shape="circle" coords="150,150,150" href="www.hao123.com" target="_blank" alt="">
</map>

（3） js 實現，我們將使用判斷一個點在不在圓內的簡單演算法，通過監聽文件的點選事件，獲取每次點選時滑鼠的位置，判斷該位置是否在我們規定的圓形區域內。

詳細資料可以參考：《如何在頁面上實現一個圓形的可點選區域？》《HTML 標籤及在實際開發中的應用》

實現不使用 border 畫出 1 px 高的線，在不同瀏覽器的標準模式與相容模式下都能保持一致的效果。

使用div繪製線，設定高為1px，overflow:hidden。

<div style="height:1px;overflow:hidden;background:red"></div>

title 與 h1 的區別？

title標籤：寫在網頁的head部分，是展示給搜尋引擎看的，搜尋引擎的搜尋結果中展示的標題就是這個title標籤裡的內容。

h1標籤：寫在文章正文的標題部分，是展示給使用者看的。

Canvas 和 SVG 有什麼區別？

Canvas 是一種通過 JavaScript 來繪製 2D 圖形的方法。Canvas 是逐畫素來進行渲染的，因此當我們對 Canvas 進行縮放時，會出現鋸齒或者失真的情況。

SVG 是一種使用 XML 描述 2D 圖形的語言。SVG 基於 XML，這意味著 SVG DOM 中的每個元素都是可用的。我們可以為某個元素附加 JavaScript 事件監聽函式。並且 SVG 儲存的是圖形的繪製方法，因此當 SVG 圖形縮放時並不會失真。

網頁驗證碼是幹嘛的，是為了解決什麼安全問題？

（1）區分使用者是計算機還是人的公共全自動程式。可以防止惡意破解密碼、刷票、論壇灌水。
（2）有效防止黑客對某一個特定註冊使用者用特定程式暴力破解方式進行不斷的登陸嘗試。