前端開發面試題-HTML（轉載）

時間 2019-11-08

原文原文鏈接

本文由本文的原做者markyun 收集總結了一些前端面試題，初學者閱後也要用心鑽研其中的原理，重要知識須要系統學習、透徹學習，造成本身的知識鏈。萬不可投機取巧，臨時抱佛腳只求面試僥倖混過關是錯誤的！也是不可能的！不可能的！不可能的！javascript

前端仍是一個年輕的行業，新的行業標準，框架，庫都不斷在更新和新增，正如赫門在2015深JS大會上的《前端服務化之路》主題演講中說的一句話：「每18至24個月，前端都會難一倍」，這些變化使前端的能力更加豐富、創造的應用也會更加完美。因此關注各類前端技術，跟上快速變化的節奏，也是身爲一個前端程序員必備的技能之一。css

最近也收到許多微博私信的鼓勵和更正題目信息，後面會常常更新題目和答案到github博客。但願前端er達到既能使用也會表達，對理論知識有本身的理解。可根據下面的知識點一個一個去進階學習，造成本身的職業技能鏈。html

前端開發知識點：前端

HTML&CSS：
    對Web標準的理解、瀏覽器內核差別、兼容性、hack、CSS基本功：佈局、盒子模型、選擇器優先級、
    HTML五、CSS三、Flexbox

JavaScript：
    數據類型、運算、對象、Function、繼承、閉包、做用域、原型鏈、事件、RegExp、JSON、Ajax、
    DOM、BOM、內存泄漏、跨域、異步裝載、模板引擎、前端MVC、路由、模塊化、Canvas、ECMAScript 六、Nodejs

其餘：
    移動端、響應式、自動化構建、HTTP、離線存儲、WEB安全、優化、重構、團隊協做、可維護、易用性、SEO、UED、架構、職業生涯、快速學習能力

做爲一名前端工程師，不管工做年頭長短都應該掌握的知識點：html5

HTML

Doctype做用？標準模式與兼容模式各有什麼區別?java

（1）、<!DOCTYPE>聲明位於位於HTML文檔中的第一行，處於 <html> 標籤以前。告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會致使文檔以兼容模式呈現。

  （2）、標準模式的排版 和JS運做模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點沒法工做。

HTML5 爲何只須要寫 <!DOCTYPE HTML>？git

HTML5 不基於 SGML，所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行）；

   而HTML4.01基於SGML,因此須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

行內元素有哪些？塊級元素有哪些？空(void)元素有那些？程序員

首先：CSS規範規定，每一個元素都有display屬性，肯定該元素的類型，每一個元素都有默認的display值，如div的display默認值爲「block」，則爲「塊級」元素；span默認display屬性值爲「inline」，是「行內」元素。

  （1）行內元素有：a b span img input select strong（強調的語氣）
  （2）塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

  （3）常見的空元素：
      <br> <hr> <img> <input> <link> <meta>
      不爲人知的是：
      <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

  不一樣瀏覽器（版本）、HTML4（5）、CSS2等實際略有差別
  參考: http://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements

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

（1）link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS, 定義rel鏈接屬性等做用；而@import是CSS提供的，只能用於加載CSS;

  （2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;

  （3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題;

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

主要分紅兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
  渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要內核。

  JS引擎則：解析和執行javascript來實現網頁的動態效果。

  最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎。

常見的瀏覽器內核有哪些？

Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
  Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
  Presto內核：Opera7及以上。      [Opera內核原爲：Presto，現爲：Blink;]
  Webkit內核：Safari,Chrome等。   [ Chrome的：Blink（WebKit的分支）]

詳細文章：[瀏覽器內核的解析和對比](http://www.cnblogs.com/fullhouse/archive/2011/12/19/2293455.html)

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;
       <!--[if lt IE 9]>
          <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
       <![endif]-->

  * 如何區分HTML5： DOCTYPE聲明\新增的結構元素\功能元素

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

用正確的標籤作正確的事情。
  html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;
  即便在沒有樣式CSS狀況下也以一種文檔格式顯示，而且是容易閱讀的;
  搜索引擎的爬蟲也依賴於HTML標記來肯定上下文和各個關鍵字的權重，利於SEO;
  使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

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

在用戶沒有與因特網鏈接時，能夠正常訪問站點或應用，在用戶與因特網鏈接時，更新用戶機器上的緩存文件。
  原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，經過這個文件上的解析清單離線存儲資源，這些資源就會像cookie同樣被存儲了下來。以後當網絡在處於離線狀態下時，瀏覽器會經過被離線存儲的數據進行頁面展現。


  如何使用：
  一、頁面頭部像下面同樣加入一個manifest的屬性；
  二、在cache.manifest文件的編寫離線存儲的資源；
      CACHE MANIFEST
      #v0.11
      CACHE:
      js/app.js
      css/style.css
      NETWORK:
      resourse/logo.png
      FALLBACK:
      / /offline.html
  三、在離線狀態時，操做window.applicationCache進行需求實現。

詳細的使用請參考：

HTML5 離線緩存-manifest簡介

有趣的HTML5：離線存儲

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

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

詳細請參考：有趣的HTML5：離線存儲

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

cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）。
  cookie數據始終在同源的http請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回傳遞。
  sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

  存儲大小：
      cookie數據大小不能超過4k。
      sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

  有期時間：
      localStorage    存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
      sessionStorage  數據在當前瀏覽器窗口關閉後自動刪除。
      cookie          設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉

iframe有那些缺點？

*iframe會阻塞主頁面的Onload事件；
  *搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO;

  *iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。

  使用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、SharedWorker；
  也能夠調用localstorge、cookies等本地存儲方式；

  localstorge另外一個瀏覽上下文裏被添加、修改或刪除時，它都會觸發一個事件，
  咱們經過監聽事件，控制它的值來進行頁面信息通訊；
  注意quirks：Safari 在無痕模式下設置localstorge值時會拋出 QuotaExceededError 的異常；

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

Adobe Flash Socket 、
  ActiveX HTMLFile (IE) 、
  基於 multipart 編碼發送 XHR 、
  基於長輪詢的 XHR

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

經過 visibilityState 的值檢測頁面當前是否可見，以及打開網頁的時間等;
  在頁面被切換到其餘後臺進程的時候，自動暫停音樂或視頻的播放；

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

一、map+area或者svg
  二、border-radius
  三、純js實現 須要求一個點在不在圓上簡單算法、獲取鼠標座標等等

實現不使用 border 畫出1px高的線，在不一樣瀏覽器的標準模式與怪異模式下都能保持一致的效果。
```
<div style="height:1px;overflow:hidden;background:red"></div>
```

網頁驗證碼是幹嗎的，是爲了解決什麼安全問題。

區分用戶是計算機仍是人的公共全自動程序。能夠防止惡意破解密碼、刷票、論壇灌水；
  有效防止黑客對某一個特定註冊用戶用特定程序暴力破解方式進行不斷的登錄嘗試。

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
  應該準確使用語義樣式標籤, 但不能濫用, 若是不能肯定時首選使用天然樣式標籤。