本文講解前端面試的 HTML 的內容。
複習前端面試的知識，是為了鞏固前端的基礎知識，最重要的還是平時的積累！
注意：文章的題與題之間用下劃線分隔開，答案僅供參考。
筆者技術博客首發地址 GitHub，歡迎關注。
2. HTML為什麼利用多個域名來存儲網站資源會更有效 ？
確保用戶在不同地區能用最快的速度打開網站，其中某個域名崩潰用戶也能通過其他域名訪問網站。
window 常用屬性與方法有哪些 ？
window 對象的常用屬性
window.self 返回當前窗口的引用
window.parent 返回當前窗體的父窗體對象
window.top 返回當前窗體最頂層的父窗體的引用
window.outerwidth 返回當前窗口的外部寬
window.outerheight 返回當前窗口的外部高
window.innerwidth 返回當前窗口的可顯示區域寬
window.innerheight 返回當前窗口的可顯示區域高 提示：通過直接在 Chrome 控制臺中輸入 console.log(window) 可以查看到其所有的被當前瀏覽器支持的屬性及值。
window 對象的常用方法
window.prompt() 彈出一個輸入提示框，若用戶點擊了「取消」則返回 null
window.alert() 彈出一個警告框
window.confirm() 彈出一個確認框
window.close() 關閉當前瀏覽器窗口。有些瀏覽器對此方法有限制。
window.open(uri, [name], [features]) 打開一個瀏覽器窗口，顯示指定的網頁。name 屬性值可以是「_blank」、「_self」、「_parent」、「_top」、任意指定的一個窗口名。
window.blur( ) 指定當前窗口失去焦點
window.focus( ) 指定當前窗口獲得焦點
window.showModalDialog(uri, [dataFromParent]) 打開一個「模態窗口」（打開的子窗口只要不關閉，其父窗口即無法獲得焦點；且父子窗口間可以傳遞數據）
document 常用屬性與方法有哪些 ？
document 常見的屬性
body 提供對 元素的直接訪問。對於定義了框架集的文檔，該屬性引用最外層的 。
cookie 設置或返回與當前文檔有關的所有 cookie。
domain 返回當前文檔的域名。
lastModified 返回文檔被最後修改的日期和時間。
referrer 返回載入當前文檔的文檔的 URL。
title 返回當前文檔的標題。
URL 返回當前文檔的 URL。
document常見的方法
write()：動態向頁面寫入內容
createElement(Tag)：創建一個 HTML 標籤對象
getElementById(ID)：獲得指定 id 的對象
getElementsByName(Name)：獲得之前 Name 的對象
body.appendChild(oTag)：向 HTML 中插入元素對象
簡述一下 src 與 href 的區別
href 是指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（連結）之間的連結，用於超連結。
src 是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；
在請求 src 資源時會將其指向的資源下載並應用到文檔內，例如 js 腳本，img 圖片和 frame 等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，類似於將所指向資源嵌入當前標籤內。這也是為什麼將 js 腳本放在底部而不是頭部。
寫一個 div + css 布局，左邊圖片，右邊文字，文字環繞圖片，外面容器固定寬度，文字不固定。
直接就一個 img，它 float：left，加文字加 p 標籤就好了。
html 中 title 屬性和 alt 屬性的區別 ？
alt
<img src="#" alt="alt 信息" />
當圖片不輸出信息的時候，會顯示 alt 信息， 滑鼠放上去沒有信息。當圖片正常讀取，不會出現 alt 信息。
title
<img src="#" alt="alt 信息" title="title 信息" />
當圖片不輸出信息的時候，會顯示 alt 信息，滑鼠放上去會出現 title 信息。當圖片正常輸出的時候，不會出現 alt 信息，滑鼠放上去會出現 title 信息。---
講述你對 reflow 和 repaint 的理解。
repaint 就是重繪，reflow 就是回流。
嚴重性： 在性能優先的前提下，性能消耗 reflow 大於 repaint。
體現：repaint 是某個 DOM 元素進行重繪；reflow 是整個頁面進行重排，也就是頁面所有 DOM 元素渲染。
如何觸發：style 變動造成 repaint 和 reflow。
不涉及任何 DOM 元素的排版問題的變動為 repaint，例如元素的 color/text-align/text-decoration 等等屬性的變動。
除上面所提到的 DOM 元素 style 的修改基本為 reflow。例如元素的任何涉及 長、寬、行高、邊框、display 等 style 的修改。
常見觸發場景
觸發 repaint：
觸發 reflow：
width/height/border/margin/padding 的修改，如 width=778px；
動畫，:hover 等偽類引起的元素表現改動，display=none 等造成頁面回流；
appendChild 等 DOM 元素操作；
font 類 style 的修改；
background 的修改，注意著字面上可能以為是重繪，但是瀏覽器確實回流了，經過瀏覽器廠家的優化，部分 background 的修改只觸發 repaint，當然 IE 不用考慮；
scroll 頁面，這個不可避免；
resize 頁面，桌面版本的進行瀏覽器大小的縮放，移動端的話，還沒玩過能拖動程序，resize 程序窗口大小的多窗口作業系統。
讀取元素的屬性（這個無法理解，但是技術達人是這麼說的，那就把它當做定理吧）：讀取元素的某些屬性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))；
如何避免：
儘可能在 DOM 末梢通過改變 class 來修改元素的 style 屬性：儘可能的減少受影響的 DOM 元素。
避免設置多項內聯樣式：使用常用的 class 的方式進行設置樣式，以避免設置樣式時訪問 DOM 的低效率。
設置動畫元素 position 屬性為 fixed 或者 absolute：由於當前元素從 DOM 流中獨立出來，因此受影響的只有當前元素，元素 repaint。
犧牲平滑度滿足性能：動畫精度太強，會造成更多次的 repaint/reflow，犧牲精度，能滿足性能的損耗，獲取性能和平滑度的平衡。
避免使用 table 進行布局：table 的每個元素的大小以及內容的改動，都會導致整個 table 進行重新計算，造成大幅度的 repaint 或者 reflow。改用 div 則可以進行針對性的 repaint 和避免不必要的 reflow。
避免在 CSS 中使用運算式：學習 CSS 的時候就知道，這個應該避免，不應該加深到這一層再去了解，因為這個的後果確實非常嚴重，一旦存在動畫性的 repaint/reflow，那麼每一幀動畫都會進行計算，性能消耗不容小覷。
Doctype 作用 ？標準模式與兼容模式各有什麼區別 ?
HTML5 為什麼只需要寫 < !DOCTYPE HTML> ？
HTML5 不基於 SGML(標準通用標記語言（以下簡稱「通用標言」)，因此不需要對 DTD 進行引用，但是需要 doctype 來規範瀏覽器的行為（讓瀏覽器按照它們應該的方式來運行）；而 HTML4.01 基於 SGML，所以需要對 DTD 進行引用，才能告知瀏覽器文檔所使用的文檔類型。
行內元素有哪些 ？塊級元素有哪些 ？空(void)元素有那些 ？
CSS 規範規定，每個元素都有 display 屬性，確定該元素的類型，每個元素都有默認的 display 值。如 div 的 display 默認值為 「block」，則為「塊級」元素；span 默認 display 屬性值為 「inline」，是「行內」元素。
行內元素有：a b span img input select strong（強調的語氣）
塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4 p
常見的空元素：img input link meta br hr ，鮮為人知的是：area base col command embed keygen param source track wbr
HTML5 有哪些新特性、移除了那些元素 ？如何處理 HTML5 新標籤的瀏覽器兼容問題 ？如何區分 HTML 和 HTML5 ？
HTML5 現在已經不是 SGML（標準通用標記語言）的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。
新特性
繪畫 canvas;
用於媒介回放的 video 和 audio 元素;
本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失;
sessionStorage 的數據在瀏覽器關閉後自動刪除;
語意化更好的內容元素，比如 article、footer、header、nav、section;
表單控制項：calendar、date、time、email、url、search;
新的技術：webworker, websocket, Geolocation;
移除的元素
支持 HTML5 新標籤
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
簡述一下你對 HTML 語義化的理解 ？
1、用正確的標籤做正確的事情。
2、html 語義化讓頁面的內容結構化，結構更清晰，
3、便於對瀏覽器、搜尋引擎解析;
4、即使在沒有樣式 CSS 情況下也以一種文檔格式顯示，並且是容易閱讀的;
5、搜尋引擎的爬蟲也依賴於 HTML 標記來確定上下文和各個關鍵字的權重，利於 SEO;
6、使閱讀原始碼的人對網站更容易將網站分塊，便於閱讀維護理解。
HTML5 的離線儲存怎麼使用，工作原理能不能解釋一下 ？
在用戶沒有與網際網路連接時，可以正常訪問站點或應用，在用戶與網際網路連接時，更新用戶機器上的緩存文件。
原理
HTML5 的離線存儲是基於一個新建的 .appcache 文件的緩存機制(不是存儲技術)，通過這個文件上的解析清單離線存儲資源，這些資源就會像 cookie 一樣被存儲了下來。之後當網絡在處於離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示。
如何使用
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
//offline.html
瀏覽器是怎麼對 HTML5 的離線儲存資源進行管理和加載的呢 ？
在線的情況下，瀏覽器發現 html 頭部有 manifest 屬性，它會請求 manifest 文件，如果是第一次訪問 app，那麼瀏覽器就會根據 manifest 文件的內容下載相應的資源並且進行離線存儲。
如果已經訪問過 app 並且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面，然後瀏覽器會對比新的 manifest 文件與舊的 manifest 文件，如果文件沒有發生改變，就不做任何操作，如果文件改變了，那麼就會重新下載文件中的資源並進行離線存儲。
離線的情況下，瀏覽器就直接使用離線存儲的資源。
請描述一下 cookies，sessionStorage 和 localStorage 的區別 ？
cookie 是網站為了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（通常經過加密）。
cookie 數據始終在同源的 http 請求中攜帶（即使不需要），也會在瀏覽器和伺服器間來回傳遞。
sessionStorage 和 localStorage 不會自動把數據發給伺服器，僅在本地保存。
存儲大小
有期時間
localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。
cookie 設置的 cookie 過期時間之前一直有效，即使窗口或瀏覽器關閉。
iframe 內嵌框架有那些缺點 ？
內聯框架 iframe一般用來包含別的頁面，例如 我們可以在我們自己的網站頁面加載別人網站的內容，為了更好的效果，可能需要使 iframe 透明效果；
iframe 會阻塞主頁面的 onload 事件；
搜尋引擎的檢索程序無法解讀這種頁面，不利於 SEO 搜尋引擎優化（Search Engine Optimization）
iframe 和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的並行加載。
如果需要使用 iframe，最好是通過 javascript 動態給 iframe 添加 src 屬性值，這樣可以繞開以上兩個問題。
Label 的作用是什麼？是怎麼用的 ？
label 標籤來定義表單控制間的關係，當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控制項上。
<label for="Name">Number:</label>
<input type=「text「 name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>
HTML5 的 form 如何關閉自動完成功能 ？
給不想要提示的 form 或某個 input 設置為 autocomplete=off。
如何實現瀏覽器內多個標籤頁之間的通信 ? (阿里)
webSocket 如何兼容低瀏覽器 ？(阿里)
Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基於 multipart 編碼發送 XHR 、
基於長輪詢的 XHR。
頁面可見性（Page Visibility API） 可以有哪些用途 ？
網頁驗證碼是幹嘛的，是為了解決什麼安全問題。
title 與 h1 的區別、b 與 strong 的區別、i 與 em 的區別 ？
title 屬性沒有明確意義只表示是個標題，H1 則表示層次明確的標題，對頁面信息的抓取也有很大的影響；
strong 是標明重點內容，有語氣加強的含義，使用閱讀設備閱讀網絡時：strong 會重讀，而 b 是展示強調內容。
i 內容展示為斜體，em 表示強調的文本；
Physical Style Elements -- 自然樣式標籤：b, i, u, s, pre
Semantic Style Elements -- 語義樣式標籤：strong, em, ins, del, code
應該準確使用語義樣式標籤, 但不能濫用, 如果不能確定時，首選使用自然樣式標籤。
談談以前端的角度出發，做好 SEO ，需要考慮什麼 ？
了解搜尋引擎如何抓取網頁和如何索引網頁你需要知道一些搜尋引擎的基本工作原理，各個搜尋引擎之間的區別，搜索機器人（SE robot 或叫 web cra何進行工作，搜尋引擎如何對搜索結果進行排序等等。
Meta 標籤優化主要包括主題（Title)，網站描述(Description)，和關鍵詞（Keywords）。還有一些其它的隱藏文字比如 Au 者），Category（目錄），Language（編碼語種）等。
如何選取關鍵詞並在網頁中放置關鍵詞搜索就得用關鍵詞。關鍵詞分析和選擇是 SEO 最重要的工作之一。首先要給網站確定主關鍵詞（一般在 5 個上後針對這些關鍵詞進行優化，包括關鍵詞密度（Density），相關度（Relavancy），突出性（Prominency）等等。
了解主要的搜尋引擎雖然搜尋引擎有很多，但是對網站流量起決定作用的就那麼幾個。比如英文的主要有 Google，Yahoo，Bing 等有百度，搜狗，有道等。不同的搜尋引擎對頁面的抓取和索引、排序的規則都不一樣。還要了解各搜索門戶和搜索的關係，比如 AOL 網頁搜索用的是 Google 的搜索技術，MSN 用的是 Bing 的技術。
主要的網際網路目錄Open Directory 自身不是搜尋引擎，而是一個大型的網站目錄，他和搜尋引擎的主要區別是網站內容的收集方目錄是人工編輯的，主要收錄網站主頁；搜尋引擎是自動收集的，除了主頁外還抓取大量的內容頁面。
按點擊付費的搜尋引擎搜尋引擎也需要生存，隨著網際網路商務的越來越成熟，收費的搜尋引擎也開始大行其道。最典型的有 Overture 當然也包括 Google 的廣告項目 Google Adwords。越來越多的人通過搜尋引擎的點擊廣告來定位商業網站，這裡面化和排名的學問，你得學會用最少的廣告投入獲得最多的點擊。
搜尋引擎登錄網站做完了以後，別躺在那裡等著客人從天而降。要讓別人找到你，最簡單的辦法就是將網站提交（submit）擎。如果你的是商業網站，主要的搜尋引擎和目錄都會要求你付費來獲得收錄（比如 Yahoo 要 299 美元），但是好消少到目前為止）最大的搜尋引擎 Google 目前還是免費，而且它主宰著 60％ 以上的搜索市場。
連結交換和連結廣泛度（Link Popularity）網頁內容都是以超文本（Hypertext）的方式來互相連結的，網站之間也是如此。除了搜尋引擎以外，人們也不同網站之間的連結來 Surfing（「衝浪」）。其它網站到你的網站的連結越多，你也就會獲得更多的訪問量。更重你的網站的外部連結數越多，會被搜尋引擎認為它的重要性越大，從而給你更高的排名。
標籤的合理使用
前端頁面有哪三層構成，分別是什麼 ？作用是什麼 ？
網頁分成三個層次，即：結構層、表示層、行為層。
網頁的結構層（structurallayer）由 HTML 或 XHTML 之類的標記語言負責創建。標籤，也就是那些出現在尖括號裡的單詞，對網頁內容的語義含義做出這些標籤不包含任何關於如何顯示有關內容的信息。例如，P 標籤表達了這樣一種語義：「這是一個文本段。」
網頁的表示層（presentationlayer）由 CSS 負責創建。CSS 對「如何顯示有關內容」的問題做出了回答。
網頁的行為層（behaviorlayer）負責回答 「內容應該如何對事件做出反應」 這一問題。這是 Javascript 語言和 DOM 主宰的領域。
有這麼一段 HTML，請挑毛病 ？
哥寫的不是HTML，是寂寞。< br>< br> 我說：< br>不要迷戀哥，哥只是一個傳說
答案：缺少 p 標記的結束標記。
最後前端硬核面試專題的完整版在此：前端硬核面試專題，包含：HTML + CSS + JS + ES6 + Webpack + Vue + React + Node + HTTPS + 數據結構與算法 + Git 。
如果覺得本文還不錯，記得給個 star ， 你的 star 是我持續更新的動力！
往期精文
1. 強烈推薦 GitHub 上值得前端學習的數據結構與算法項目
2. JavaScript 數據結構與算法之美 - 十大經典排序算法匯總