Web前端工程師面試題彙總（一）

時間 2019-11-10

標籤 web 前端工程師面試彙總欄目 HTML 简体版

原文原文鏈接

前端工程師面試題彙總

本文由我收集總結了一些前端面試題，初學者閱後也要用心鑽研其中的原理，重要知識須要系統學習、透徹學習，造成本身的知識鏈。

HTML

• Doctype做用？嚴格模式與混雜模式如何區分？它們有何意義?

一、聲明叫作文件類型定義（DTD），聲明的做用爲了告訴瀏覽器該文件的類型。讓瀏覽器解析器知道應該用哪一個規範來解析文檔。聲明必須在 HTML 文檔的第一行，這並非一個 HTML 標籤。
二、嚴格模式：又稱標準模式，是指瀏覽器按照 W3C 標準解析代碼。
混雜模式：又稱怪異模式或兼容模式，是指瀏覽器用本身的方式解析代碼。
如何區分：瀏覽器解析時到底使用嚴格模式仍是混雜模式，與網頁中的 DTD 直接相關。

1)、若是文檔包含嚴格的 DOCTYPE ，那麼它通常以嚴格模式呈現。（嚴格 DTD ——嚴格模式） 2)、包含過渡 DTD 和 URI 的 DOCTYPE ，也以嚴格模式呈現，但有過渡 DTD 而沒有 URI （統一資源標識符，就是聲明最後的地址）會致使頁面以混雜模式呈現。（有 URI 的過渡 DTD ——嚴格模式；沒有 URI 的過渡 DTD ——混雜模式） 3)、DOCTYPE 不存在或形式不正確會致使文檔以混雜模式呈現。（DTD不存在或者格式不正確——混雜模式） 4)、HTML5 沒有 DTD，所以也就沒有嚴格模式與混雜模式的區別，HTML5 有相對寬鬆的語法，實現時，已經儘量大的實現了向後兼容。（ HTML5 沒有嚴格和混雜之分）

意義：嚴格模式與混雜模式存在的意義與其來源密切相關，若是說只存在嚴格模式，那麼許多舊網站必然受到影響，若是隻存在混雜模式，那麼會回到當時瀏覽器大戰時的混亂，每一個瀏覽器都有本身的解析模式。

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

html5不基於SGML,所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲（讓瀏覽器按照他們應該的方式來運行）而HTML4.01基於SGML，因此須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

• 行內元素有哪些？塊級元素有哪些？空(void)元素有那些？

CSS規範規定，每一個元素都有display屬性，肯定該元素的類型，每一個元素都有默認的display值，好比div默認display屬性值爲「block」，成爲「塊級」元素；span默認display屬性值爲「inline」，是「行內」元素;img默認display屬性值爲「inline-block」，是「內聯塊狀」元素。
經常使用的塊狀元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

塊級元素特色：
一、每一個塊級元素都重新的一行開始，而且其後的元素也另起一行。（真霸道，一個塊級元素獨佔一行）
二、元素的高度、寬度、行高以及頂和底邊距均可設置。
三、元素寬度在不設置的狀況下，是它自己父容器的100%（和父元素的寬度一致），除非設定一個寬度。
經常使用的內聯元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

內聯元素特色：
一、和其餘元素都在一行上；
二、元素的高度、寬度、行高及頂部和底部邊距不可設置；
三、元素的寬度就是它包含的文字或圖片的寬度，不可改變。
經常使用的內聯塊狀元素有：

<img>、<input>

inline-block元素特色：
一、和其餘元素都在一行上；
二、元素的高度、寬度、行高以及頂和底邊距均可設置。
知名的空元素： `<br/> <hr/> <img/> <input/> <link/> <meta/>`
不爲人知的是：`<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>`

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

頁面中使用CSS的方式主要有3種：行內添加定義style屬性值，頁面頭部內嵌調用和外面連接調用，其中外面引用有兩種：link和@import。外部引用CSS兩種方式link和@import的方式分別是：
XML/HTML代碼

<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />

XML/HTML代碼
`<style type="text/css" media="screen">`

@import url("CSS文件");

`</style>`

二者都是外部引用CSS的方式，可是存在必定的區別：

區別1：link是XHTML標籤，除了加載CSS外，還能夠定義RSS等其餘事務；@import屬於CSS範疇，只能加載CSS。
區別2：link引用CSS時，在頁面載入時同時加載；@import須要頁面網頁徹底載入之後加載。
區別3：link是XHTML標籤，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
區別4：ink支持使用Javascript控制DOM去改變樣式；而@import不支持。

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

主要分紅兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負責取得網頁的內容(HTML、XML、圖像等等)、整理訊息(例如加入CSS等)，以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要內核。 2.JS引擎則：解析和執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎。