摘要：前言本文講解前端面試的的內容。復習前端面試的知識，是為了鞏固前端的基礎知識，最重要的還是平時的積累注意文章的題與題之間用下劃線分隔開，答案僅供參考。返回當前文檔的標題。改用則可以進行針對性的和避免不必要的。

本文講解前端面試的 HTML 的內容。

復習前端面試的知識，是為了鞏固前端的基礎知識，最重要的還是平時的積累！

注意：文章的題與題之間用下劃線分隔開，答案僅供參考。

筆者技術博客首發地址 GitHub，歡迎關注。

為什么利用多個域名來存儲網站資源會更有效 ？

確保用戶在不同地區能用最快的速度打開網站，其中某個域名崩潰用戶也能通過其他域名訪問網站。

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

當圖片不輸出信息的時候，會顯示 alt 信息， 鼠標放上去沒有信息。
當圖片正常讀取，不會出現 alt 信息。

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：

color 的修改，如 color=#ffffd；

text-align 的修改，如 text-align=center；

a:hover 也會造成重繪。

:hover 引起的顏色等不導致頁面回流的 style 變動。

觸發 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 作用 ？標準模式與兼容模式各有什么區別 ?

聲明位于位于 HTML 文檔中的第一行，處于 標簽之前。告知瀏覽器的解析器用什么文檔標準解析這個文檔。DOCTYPE 不存在或格式不正確會導致文檔以兼容模式呈現。

標準模式的排版和 JS 運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示，模擬老式瀏覽器的行為以防止站點無法工作。

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;

移除的元素

純表現的元素：basefont，big，center，font, s，strike，tt，u;

對可用性產生負面影響的元素：frame，frameset，noframes；

支持 HTML5 新標簽

IE8/IE7/IE6 支持通過 document.createElement 方法產生的標簽，可以利用這一特性讓這些瀏覽器支持 HTML5 新標簽，瀏覽器支持新標簽后，還需要添加標簽默認的樣式。

當然也可以直接使用成熟的框架、比如 html5shim;

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

1、用正確的標簽做正確的事情。

2、html 語義化讓頁面的內容結構化，結構更清晰，

3、便于對瀏覽器、搜索引擎解析;

4、即使在沒有樣式 CSS 情況下也以一種文檔格式顯示，并且是容易閱讀的;

5、搜索引擎的爬蟲也依賴于 HTML 標記來確定上下文和各個關鍵字的權重，利于 SEO;

6、使閱讀源代碼的人對網站更容易將網站分塊，便于閱讀維護理解。

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 進行需求實現。

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

在線的情況下，瀏覽器發現 html 頭部有 manifest 屬性，它會請求 manifest 文件，如果是第一次訪問 app，那么瀏覽器就會根據 manifest 文件的內容下載相應的資源并且進行離線存儲。

如果已經訪問過 app 并且資源已經離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的 manifest 文件與舊的 manifest 文件，如果文件沒有發生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資源并進行離線存儲。

離線的情況下，瀏覽器就直接使用離線存儲的資源。

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

cookie 是網站為了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（通常經過加密）。

cookie 數據始終在同源的 http 請求中攜帶（即使不需要），也會在瀏覽器和服務器間來回傳遞。

sessionStorage 和 localStorage 不會自動把數據發給服務器，僅在本地保存。

存儲大小

cookie 數據大小不能超過 4k。

sessionStorage 和 localStorage 雖然也有存儲大小的限制，但比 cookie 大得多，可以達到 5M 或更大。

有期時間

localStorage 存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據；

sessionStorage 數據在當前瀏覽器窗口關閉后自動刪除。

cookie ?設置的 cookie 過期時間之前一直有效，即使窗口或瀏覽器關閉。

iframe 內嵌框架有那些缺點 ？

內聯框架 iframe一般用來包含別的頁面，例如 我們可以在我們自己的網站頁面加載別人網站的內容，為了更好的效果，可能需要使 iframe 透明效果；

iframe 會阻塞主頁面的 onload 事件；

搜索引擎的檢索程序無法解讀這種頁面，不利于 SEO 搜索引擎優化（Search Engine Optimization）

iframe 和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。

如果需要使用 iframe，最好是通過 javascript 動態給 iframe 添加 src 屬性值，這樣可以繞開以上兩個問題。

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

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

Number:


Date:

HTML5 的 form 如何關閉自動完成功能 ？

給不想要提示的 form 或某個 input 設置為 autocomplete=off。

如何實現瀏覽器內多個標簽頁之間的通信 ? (阿里)

WebSocket、SharedWorker；

也可以調用 localstorge、cookies 等本地存儲方式；

localstorge 在另一個瀏覽上下文里被添加、修改或刪除時，它都會觸發一個事件，我們通過監聽事件，控制它的值來進行頁面信息通信；

注意 quirks：Safari 在無痕模式下設置 localstorge 值時會拋出 QuotaExceededError 的異常；

webSocket 如何兼容低瀏覽器 ？(阿里)

Adobe Flash Socket 、

ActiveX HTMLFile (IE) 、

基于 multipart 編碼發送 XHR 、

基于長輪詢的 XHR。

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

通過 visibilityState 的值檢測頁面當前是否可見，以及打開網頁的時間等;

在頁面被切換到其他后臺進程的時候，自動暫停音樂或視頻的播放；

網頁驗證碼是干嘛的，是為了解決什么安全問題。

區分用戶是計算機還是人的公共全自動程序；

可以防止惡意破解密碼、刷票、論壇灌水；

有效防止黑客對某一個特定注冊用戶用特定程序暴力破解方式進行不斷的登陸嘗試。

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 是我持續更新的動力！。