前端HTML面試題我的總結

一、對web標準以及W3C的理解和認識

• 標籤閉合、標籤小寫，不亂嵌套，使用外鏈css和js腳本，文件下載和頁面加載速度更快，容易維護和修改，提升了網站易用性

二、xhtml和html的區別

• XHTML：可擴展超文本標記語言，XHTML元素必須被正確地嵌套，XHTML 元素必須被關閉。標籤名必須用小寫字母。XHTML 文檔中元素必須被嵌套於 根元素中。
• HTML：超文本標記語言，在HTML中容許一些不規範的寫法，HTML對於各大瀏覽器兼容性較差，如今web前端開發的靜態網頁，通常都是html4.0，HTML5就另當別論了。

三、HTML5的新特性

• 標籤語義化<header></header>、<footer></footer>等等
• 增長多個表單輸入類型、表單元素、表單屬性
• Canvas繪圖，Canvas 經過 JavaScript 來繪製 2D 圖形。
• SVG繪圖，SVG是指可伸縮的矢量圖形，SVG 是一種使用 XML 描述 2D 圖形的語言。
• 地理定位，Geolocation 用於定位用戶的位置
• 拖放API，任何元素都可以拖放 drag
• Web Worker，web worker 是運行在後臺的 JavaScript，獨立於其餘腳本，不會影響頁面的性能
• Web Storage，本地存儲用戶的瀏覽數據
• WebSocket，一種在單個 TCP 鏈接上進行全雙工通信的協議，瀏覽器經過 JavaScript 向服務器發出創建 WebSocket 鏈接的請求，鏈接創建之後，客戶端和服務器端就能夠經過 TCP 鏈接直接交換數據，當你獲取 Web Socket 鏈接後，你能夠經過 send() 方法來向服務器發送數據，並經過 onmessage 事件來接收服務器返回的數據。

四、介紹cookie

• Cookie一詞用在程序設計中是一種可以讓網站服務器把少許數據儲存到客戶端的硬盤或內存，或是從客戶端的硬盤讀取數據的一種技術。從本質上講，它能夠看做是你的身份證，硬盤中的Cookies屬於文本文件，不是程序。
• cookie 經常使用於識別用戶。cookie 是一種服務器留在用戶計算機上的小文件。每當同一臺計算機經過瀏覽器請求頁面時，這臺計算機將會發送 cookie。經過 PHP，您可以建立並取回 cookie 的值。
• 補充說明一下cookie的做用：
  保存用戶登陸狀態。例如將用戶id存儲於一個cookie內，這樣當用戶下次訪問該頁面時就不須要從新登陸了，如今不少論壇和社區都提供這樣的功能。 cookie還能夠設置過時時間，當超過期間期限後，cookie就會自動消失。所以，系統每每能夠提示用戶保持登陸狀態的時間：常見選項有一個月、三個 月、一年等。
  跟蹤用戶行爲。例如一個天氣預報網站，可以根據用戶選擇的地區顯示當地的天氣狀況。若是每次都須要選擇所在地是煩瑣的，當利用了cookie後就會顯得很人性化了，系統可以記住上一次訪問的地區，當下次再打開該頁面時，它就會自動顯示上次用戶所在地區的天氣狀況。由於一切都是在後 臺完成，因此這樣的頁面就像爲某個用戶所定製的同樣，使用起來很是方便定製頁面。若是網站提供了換膚或更換佈局的功能，那麼可使用cookie來記錄用戶的選項，例如：背景色、分辨率等。當用戶下次訪問時，仍然能夠保存上一次訪問的界面風格。

五、說一下都有哪些本地存儲方式，區別是什麼？

特性	cookie	sessionStorage	localStorage
生命週期	可設置失效時間，沒有設置的話，默認是關閉瀏覽器後失效	當用戶關閉瀏覽器窗口後，數據會被刪除	數據能夠永久保存，除非手動清除
存放數據大小	不能超過4KB左右	能夠保存5MB的信息甚至更大	能夠保存5MB的信息甚至更大
http請求	每次都會攜帶在HTTP頭中，若是使用cookie保存過多數據會帶來性能問題	僅在客戶端（即瀏覽器）中保存，不參與和服務器的通訊	僅在客戶端（即瀏覽器）中保存，不參與和服務器的通訊

六、Doctype做用?嚴格模式和混雜模式的區分，以及如何觸發和區分這2種模式?

• Doctype聲明於文檔最前面，告訴瀏覽器以何種方式來渲染頁面，這裏有兩種模式，嚴格模式和混雜模式。
  嚴格模式的排版和JS 運做模式是 以該瀏覽器支持的最高標準運行。
  混雜模式，向後兼容，模擬老式瀏覽器，防止瀏覽器沒法兼容頁面。
• 嚴格模式：又稱標準模式就是瀏覽器根據web標準去解析頁面，是一種要求嚴格的DTD，不容許使用任何表現層的語法。
• 混雜模式：又稱怪異模式或兼容模式，是指瀏覽器用本身的方式解析代碼。
• 如何觸發：觸發標準模式或者說嚴格模式很簡單，就是Html前申明正確的DTD，出發混雜模式能夠在html文檔開始不聲明DTD，或者在DOCTYPE前加入XML聲明。
• 如何區分：瀏覽器解析時到底使用嚴格模式仍是混雜模式，與網頁中的 DTD 直接相關。
  一、若是文檔包含嚴格的 DOCTYPE ，那麼它通常以嚴格模式呈現。（嚴格 DTD ——嚴格模式）
  二、包含過渡 DTD 和 URI 的 DOCTYPE ，也以嚴格模式呈現，但有過渡 DTD 而沒有 URI （統一資源標識符，就是聲明最後的地址）會致使頁面以混雜模式呈現。（有 URI 的過渡 DTD ——嚴格模式；沒有 URI 的過渡 DTD ——混雜模式）
  三、DOCTYPE 不存在或形式不正確會致使文檔以混雜模式呈現。（DTD不存在或者格式不正確——混雜模式）
  四、HTML5 沒有 DTD ，所以也就沒有嚴格模式與混雜模式的區別，HTML5 有相對寬鬆的語法，實現時，已經儘量大的實現了向後兼容。（ HTML5 沒有嚴格和混雜之分）

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

• Trident內核：IE
• Gecko內核：NETSCAPE6及以上版本，火狐
• Presto內核：Opera7及以上。[Opera內核原爲：Presto，現爲：Blink;]
• Webkit內核：Safari，Chrome等。[Chrome的：Blink（WebKit的分支）]
  瀏覽器內核又能夠分紅兩部分：渲染引擎和JS引擎。 渲染引擎主要負責取得網頁的內容、整理訊息、計算網頁的顯示方式等，JS引擎則是解析Javascript語言，執行javascript語言來實現網頁的動態效果。

八、HTML5的聲明

• HTML5 不基於 SGML，所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲
• 因此HTML5 只須要寫<!DOCTYPE>

九、前端頁面有哪三層構成，分別是什麼，做用是什麼?

• 結構層：html ；做用：由 HTML 或 XHTML之類的標記語言負責建立。標籤，也就是那些出如今尖括號裏的單詞，對網頁內容的語義含義作出了描述，但這些標籤不包含任何關於如何顯示有關內容的信息。例如，P標籤表達了這樣一種語義：「這是一個文本段。」
• 表示層:css ，做用：由 CSS 負責建立，CSS對「如何顯示有關內容」的問題作出了回答。
• 行爲層：js，做用：負責回答「內容應該如何對事件作出反應」這一問題。這是 Javascript 語言和 DOM主宰的領域。

十、說一下http和https

• http和https的基本概念

  • http: 超文本傳輸協議，是互聯網上應用最爲普遍的一種網絡協議，是一個客戶端和服務器端請求和應答的標準（TCP），用於從WWW服務器傳輸超文本到本地瀏覽器的傳輸協議，它可使瀏覽器更加高效，使網絡傳輸減小。
  • https: 是以安全爲目標的HTTP通道，簡單講是HTTP的安全版，即HTTP下加入SSL層，HTTPS的安全基礎是SSL，所以加密的詳細內容就須要SSL。https協議的主要做用是：創建一個信息安全通道，來確保數組的傳輸，確保網站的真實性

• http和https的區別？

  • http傳輸的數據都是未加密的，也就是明文的，網景公司設置了SSL協議來對http協議傳輸的數據進行加密處理，簡單來講https協議是由http和ssl協議構建的可進行加密傳輸和身份認證的網絡協議，比http協議的安全性更高。

  • 主要的區別以下：

    Https協議須要ca證書，費用較高。

    http是超文本傳輸協議，信息是明文傳輸，https則是具備安全性的ssl加密傳輸協議。

    使用不一樣的連接方式，端口也不一樣，通常而言，http協議的端口爲80，https的端口爲443，http的鏈接很簡單，是無狀態的；HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網絡協議，比http協議安全。

• https協議的工做原理

  • 客戶端在使用HTTPS方式與Web服務器通訊時有如下幾個步驟，以下所示：

    客戶使用https url訪問服務器，則要求web 服務器創建ssl連接。

    web服務器接收到客戶端的請求以後，會將網站的證書（證書中包含了公鑰），返回或者說傳輸給客戶端。

    客戶端和web服務器端開始協商SSL連接的安全等級，也就是加密等級。

    客戶端瀏覽器經過雙方協商一致的安全等級，創建會話密鑰，而後經過網站的公鑰來加密會話密鑰，並傳送給網站。

    web服務器經過本身的私鑰解密出會話密鑰。

    web服務器經過會話密鑰加密與客戶端之間的通訊。

• https協議的優勢

  • 使用HTTPS協議可認證用戶和服務器，確保數據發送到正確的客戶機和服務器；
  • HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網絡協議，要比http協議安全，可防止數據在傳輸過程當中不被竊取、改變，確保數據的完整性。
  • HTTPS是現行架構下最安全的解決方案，雖然不是絕對安全，但它大幅增長了中間人攻擊的成本。
  • 谷歌曾在2014年8月份調整搜索引擎算法，並稱「比起同等HTTP網站，採用HTTPS加密的網站在搜索結果中的排名將會更高」。

• https協議的缺點

  • https握手階段比較費時，會使頁面加載時間延長50%，增長10%~20%的耗電。
  • https緩存不如http高效，會增長數據開銷。
  • SSL證書也須要錢，功能越強大的證書費用越高。
  • SSL證書須要綁定IP，不能再同一個ip上綁定多個域名，ipv4資源支持不了這種消耗。

十一、WebSocket的理解

• 什麼是WebSocket?

  WebSocket是HTML5中的協議，支持持久連續，http協議不支持持久性鏈接。Http1.0和HTTP1.1都不支持持久性的連接，HTTP1.1中的keep-alive，將多個http請求合併爲1個

• WebSocket是什麼樣的協議，具體有什麼優勢？

  HTTP的生命週期經過Request來界定，也就是Request一個Response，那麼在Http1.0協議中，此次Http請求就結束了。在Http1.1中進行了改進，是的有一個connection：Keep-alive，也就是說，在一個Http鏈接中，能夠發送多個Request，接收多個Response。可是必須記住，在Http中一個Request只能對應有一個Response，並且這個Response是被動的，不能主動發起。

  WebSocket是基於Http協議的，或者說借用了Http協議來完成一部分握手，在握手階段與Http是相同的。咱們來看一個websocket握手協議的實現，基本是2個屬性，upgrade，connection。

十二、說一下HTML5 drag API

• dragstart：事件主體是被拖放元素，在開始拖放被拖放元素時觸發.
• darg：事件主體是被拖放元素，在正在拖放被拖放元素時觸發。
• dragenter：事件主體是目標元素，在被拖放元素進入某元素時觸發。
• dragover：事件主體是目標元素，在被拖放在某元素內移動時觸發。
• dragleave：事件主體是目標元素，在被拖放元素移出目標元素是觸發。
• drop：事件主體是目標元素，在目標元素徹底接受被拖放元素時觸發。
• dragend：事件主體是被拖放元素，在整個拖放操做結束時觸發

1三、基本狀態碼

• 100 Continue 繼續。客戶端應繼續其請求
• 101 Switching Protocols 切換協議。服務器根據客戶端的請求切換協議。只能切換到 更高級的協議，例 如，切換到HTTP的新版本協議
• 200 OK 請求成功。通常用於GET與POST請求
• 201 Created 已建立。成功請求並建立了新的資源
• 202 Accepted 已接受。已經接受請求，但未處理完成
• 203 Non-Authoritative Information 非受權信息。請求成功。但返回的meta信息不在 原始的服務器，而 是一個副本
• 204 No Content 無內容。服務器成功處理，但未返回內容。在未更新網頁的狀況下， 可確保瀏覽器繼續 顯示當前文檔
• 205 Reset Content 重置內容。服務器處理成功，用戶終端（例如：瀏覽器）應重置文 檔視圖。可經過此 返回碼清除瀏覽器的表單域
• 206 Partial Content 部份內容。服務器成功處理了部分GET請求
• 300 Multiple Choices 多種選擇。請求的資源可包括多個位置，相應可返回一個資源特 徵與地址的列表用 於用戶終端（例如：瀏覽器）選擇
• 301 Moved Permanently 永久移動。請求的資源已被永久的移動到新URI，返回信息 會包括新的URI，瀏 覽器會自動定向到新URI。從此任何新的請求都應使用新的URI代替
• 302 Found 臨時移動。與301相似。但資源只是臨時被移動。客戶端應繼續使用原URI
• 303 See Other 查看其它地址。與301相似。使用GET和POST請求查看
• 304 Not Modified 未修改。所請求的資源未修改，服務器返回此狀態碼時，不會返回 任何資源。客戶端通 常會緩存訪問過的資源，經過提供一個頭信息指出客戶端但願只返回 在指定日期以後修改的資源
• 305 Use Proxy 使用代理。所請求的資源必須經過代理訪問
• 306 Unused 已經被廢棄的HTTP狀態碼
• 307 Temporary Redirect 臨時重定向。與302相似。使用GET請求重定向
• 400 Bad Request 客戶端請求的語法錯誤，服務器沒法理解
• 401 Unauthorized 請求要求用戶的身份認證
• 402 Payment Required 保留，未來使用
• 403 Forbidden 服務器理解請求客戶端的請求，可是拒絕執行此請求
• 404 Not Found 服務器沒法根據客戶端的請求找到資源（網頁）。經過此代碼，網站 設計人員可設置"您 所請求的資源沒法找到"的個性頁面
• 405 Method Not Allowed 客戶端請求中的方法被禁止
• 406 Not Acceptable 服務器沒法根據客戶端請求的內容特性完成請求
• 407 Proxy Authentication Required 請求要求代理的身份認證，與401相似，但請求 者應當使用代理進行 受權
• 408 Request Time-out 服務器等待客戶端發送的請求時間過長，超時
• 409 Conflict 服務器完成客戶端的PUT請求是可能返回此代碼，服務器處理請求時發生 了衝突
• 410 Gone 客戶端請求的資源已經不存在。410不一樣於404，若是資源之前有如今被永 久刪除了可以使用410 代碼，網站設計人員可經過301代碼指定資源的新位置
• 411 Length Required 服務器沒法處理客戶端發送的不帶Content-Length的請求信息
• 412 Precondition Failed 客戶端請求信息的先決條件錯誤
• 413 Request Entity Too Large 因爲請求的實體過大，服務器沒法處理，所以拒絕起請 求。爲防止客戶端 的連續請求，服務器可能會關閉鏈接。若是隻是服務器暫時沒法處理， 則會包含一個Retry-After的響應信息
• 414 Request-URI Too Large 請求的URI過長（URI一般爲網址），服務器沒法處理
• 415 Unsupported Media Type 服務器沒法處理請求附帶的媒體格式
• 416 Requested range not satisfiable 客戶端請求的範圍無效
• 417 Expectation Failed 服務器沒法知足Expect的請求頭信息
• 500 Internal Server Error 服務器內部錯誤，沒法完成請求
• 501 Not Implemented 服務器不支持請求的功能，沒法完成請求
• 502 Bad Gateway 做爲網關或者代理工做的服務器嘗試執行請求時，從遠程服務器接 收到了一個無效的響應
• 503 Service Unavailable 因爲超載或系統維護，服務器暫時的沒法處理客戶端的請 求。延時的長度可包含 在服務器的Retry-After頭信息中
• 504 Gateway Time-out 充當網關或代理的服務器，未及時從遠端服務器獲取請求
• 505 HTTP Version not supported 服務器不支持請求的HTTP協議的版本，沒法完成處理

1四、 fetch發送2次請求的緣由

• fetch發送post請求的時候，老是發送2次，第一次狀態碼是204，第二次才成功，是由於 用fetch的post請求的時候，致使fetch 第一次發送了一個Options請求，詢問服務器是否 支持修改的請求頭，若是服務器支持，則在第二次中發送真正的請求。

1五、說一下web worker

• 在HTML頁面中，若是在執行腳本時，頁面的狀態是不可相應的，直到腳本執行完成後，頁面才變成可相應。web worker是運行在後臺的js，獨立於其餘腳本，不會影響頁面你的性能。而且經過postMessage將結果回傳到主線程。這樣在進行復雜操做的時候，就不會阻塞主線程了。

• 如何建立web worker：

  檢測瀏覽器對於web worker的支持性

  建立web worker文件（js，回傳函數等）

  建立web worker對象

1六、iframe是什麼？有什麼缺點？

• iframe元素會建立包含另外一個文檔的內聯框架，能夠將提示文字放在<iframe></iframe>之間，來提示某些不支持iframe的瀏覽器

• 缺點：

  會阻塞主頁面的onload事件

  搜索引擎沒法解讀這種頁面，不利於SEO

  iframe和主頁面共享鏈接池，而瀏覽器對相同區域有限制因此會影響性能。