❶ Web前端面試的常見面試題匯總
今天小編要跟大家分享的文章是關於參加Web前端面試的常見面試題匯總。准備參加Web前端面試的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對大家有所幫助。1.漸進增強與優雅降級
漸進增強
並不是一種技術，而是一種設計思想。各個瀏覽器的渲染能力各不相同，要做一個每個人都能看到的網頁、感受到的體驗都一致的網站幾乎不可能。但還是得網站的可訪問性，保證用戶在任何環境下都能正常訪問網頁得核心內容或能使用基本功能(避免網頁打不開、排版錯誤等)，並為他們提供當前條件下最好的體驗，這就是漸進增強得核心思想。
優雅降級也是一種設計思想，為了保證在高版本瀏覽器中提供最好的體驗，碰到低版本瀏覽器再降級進行兼容處理，使其能正常瀏覽。
這兩種思想的區別在於：
1.漸進增強是向上兼容，優雅降級是向下兼容;
2.漸進增強是從簡單到復雜，優雅降級是從復雜到簡單;
3.漸進增強關注的是內容(保證核心內容)，優雅降級關注的是瀏覽體驗(為了兼容低版本瀏覽器)
2.DOCTYPE
作用
DTD(DocumentTypeDefinition，文檔類型定義)是一系列的語法規則，用來定義XML或(X)HTML
的文檔類型。瀏覽器會使用它來判斷文檔類型，決定何種協議來解析，以及切換瀏覽模式。
DOCTYPE是用來聲明文檔類型和DTD
規范的，一個主要的用途便是文件的合法性驗證。如果文檔代碼不合法，那麼瀏覽器解析時便會出現一些差錯。
HTML5的文檔類型聲明：
HTML4.01Strict(HTML4.01嚴格模式)的DTD包含所有HTML
元素和屬性，但不包括展示性的和棄用的元素(如font)，它的文檔類型聲明：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
標准模式與怪異模式
怪異模式(Quirks
Mode)用於模擬舊瀏覽器的行為。早期的網站並不會遵循完整的規范，隨著瀏覽器支持越來越多的規范，在那些舊的瀏覽器中開發的頁面在顯示時會被破壞。為了向後兼容，瀏覽器發明了怪異模式，一行錯誤或無效的
DOCTYPE都會觸發怪異模式。
瀏覽器使用文件開頭的DOCTYPE來決定用怪異模式處理或標准模式處理。DOCTYPE
可以確保不同瀏覽器以相同的方式解析文檔，以及執行相同的渲染模式。
怪異模式與標准模式的主要區別：
1.怪異模式的寬度和高度會包含padding和border。標准模式不包含，標准模式下可以通過設置box-sizing:
border-box將標准盒模型轉化成怪異模式下的盒模型。
2.怪異模式下，當內容超出容器高度時，會將容器拉伸，而不是溢出。
3.怪異模式下，在表格中的字體樣式(如font-size)不會繼承。
4.怪異模式下顏色值必須使用十六進制標記法。
3.語義化
HTML5
中的語義化就是讓元素、屬性或屬性值有含義，更准確地標記特定類型的內容。對元素語義化的目的是為了讓元素的語義和呈現分離，元素只負責文檔內容的結構與含義，而CSS
樣式控制內容的呈現，像元素，沒有語義但卻能將字體變粗，這類元素違背了語義化的目的，將會被廢棄。
優點
·使得HTML文檔結構清晰、布局合理、主體突出、可讀性更強。
·有利於SEO，搜索引擎根據標簽來確定上下文和各個關鍵字的權重。
·方便其他設備解析，如盲人閱讀器根據語義渲染網頁。
·有利於開發和維護，語義化更具可讀性，代碼更好維護，與CSS3關系更和諧。
語義化標簽
·
·footer內容的頁腳，通常包含該章節作者、版權數據或者與文檔相關的鏈接等信息;
·article
文檔、頁面、應用或網站中的獨立結構，是可獨立分配的、可復用的結構，如在發布中，它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評論、互動式組件，或者其他獨立的內容項目;
·nav描述一個含有多個超鏈接的區域，該區域包含跳轉到其他頁面或頁面內部其他部分的鏈接列表;
·section表示文檔中的一個區域(或節)，比如，內容中的一個專題組;
·main定義文檔的主要內容，該內容在文檔中應當是獨一無二的，不包含任何在文檔中重復的內容，比如側邊欄，導航欄鏈接，版權信息，網站
logo，搜索框(搜索框作為文檔的主要內容);
·aside
表示一個和其餘頁面內容幾乎無關的部分，被認為是獨立於該內容的一部分且可以被單獨的拆分出來而不會影響整體。通常表現為側邊欄或嵌入內容。
4.超鏈接偽類
:link、:visited、:active和:hover的聲明順序是怎樣的?
:link表示未訪問的鏈接狀態;
:visited表示已訪問狀態;:active表示激活狀態(滑鼠按下);:hover表示懸停狀態。
推薦順序是LVHA，即:link:visited:hover:active。理由如下：
·當滑鼠懸停在未訪問的鏈接上時，:link和:hover都會命中，如果:hover在:link
之前聲明，那麼(:hover)就會被覆蓋;
·當滑鼠懸停在已訪問的連接上時，:visited和:hover都會命中，如果:hover在:visited
之前聲明，那麼(:hover)就會被覆蓋;
·當滑鼠單擊鏈接時，:active和:hover都會命中，我們大多是想讓:hover只在懸停時展示樣式，按下滑鼠時使用:active
樣式，因此:active在:hover之後聲明;
·綜上，:hover應在:link和:visited之後，在:active之前，因此active在最後。而:link和
:visited兩者的順序無所謂，互不影響。
5.CSS常見的長度單位
CSS中除了px長度單位之外，還有下面幾個長度單位：
·pc六分之一英寸，1pc=12pt=1/6*1in=16px;
·pt一磅，72分之一英寸。1pt=1/12_1pc=1/72_1in≈1.33px;
·in一英寸，1in=2.54cm=96px;
·ex在含有「X」字母的字體中，它是該字體的小寫字母的高度。對於很多字體來說，1ex≈0.5em;
·em1em等於父級元素的字體大小，2em就是父級元素字體大小的二倍;
·rem當用在根元素()的font-size上面時，它代表了它的初始值;
·ch代表元素所用字體font中「0」這一字形的寬度;
·vh1vh相當於視口高度的1%，100vh就是視口的高度;
·vw1vw相當於視口寬度的1%，100vw就是視口的寬度;
·vmax視口高度vw和寬度vh兩者中的最小值
·vmin視口高度vw和寬度vh兩種中的最大值;
·%相對於父級元素的大小來確定;
參考：CSS
CSSpercentage[2]
6.事件對象
冒泡與捕獲
事件冒泡與捕獲是事件處理的兩種機制，主要描述當在一個元素上有兩個相同類型的事件處理器被激活會發生什麼。
在點擊子元素時，瀏覽器運行了兩種不同的階段：捕獲階段和冒泡階段。捕獲階段的行為：
·瀏覽器檢查元素的最外層祖先，是否在捕獲階段中注冊了一個onclick事件處理程序，如果是，則運行它;
·
然後，它移動到中單擊元素的下一個祖先元素，並執行相同的操作，然後是單擊元素再下一個祖先元素，依此類推，直到到達實際點擊的元素;
而冒泡與捕獲恰恰相反：
·瀏覽器檢查實際點擊的元素是否在冒泡階段中注冊了一個onclick事件處理程序，如果是，則運行它;
·然後它移動到下一個直接的祖先元素，並做同樣的事情，然後是下一個，等等，直到它到達元素;
而現代瀏覽器在默認情況下，所有事件處理程序都在冒泡階段進行注冊。因此上面代碼在點擊子元素時會先執行子元素綁定的事件，然後向上冒泡，觸發父元素綁定的事件。
addEventListener函數的第三個參數是個布爾值。含義：
·當布爾值是false時(這也是默認值)，表示向上冒泡觸發事件;
·當布爾值是true時，表示向下捕獲觸發事件;
不能冒泡的事件
有些事件是不會冒泡的。比如：
·blur元素失去焦點時觸發，focusout事件也是失去焦點時觸發，但可以冒泡;
·focus元素獲取焦點時觸發;
·mouseenter滑鼠移動到元素上時會觸發該事件，與之對應的是mouseover事件，但會冒泡;
·mouseleave滑鼠離開元素時觸發，與之對應的是mouseout，但會冒泡;
事件冒泡可以讓我們利用事件委託，尤其是處理大量子元素時，如果給每個子元素都綁定事件，這是不優雅的，可以將事件綁定到父元素上，並讓子節點上發生的事件冒泡到父節點上，利用
e.target屬性可以獲取到當前觸發事件的子元素。
事件對象中的方法
·stopPropagation()阻止事件冒泡，當設置後，點擊該元素時父元素綁定的事件就不會再觸發;
·preventDefault()阻止默認事件的發生;
·stopImmediatePropagation()它用來阻止監聽同一事件的其他事件監聽器被調用以及阻止事件冒泡，比如給同一個div
元素綁定多個click事件(使用addEventListener方法可以注冊多個)，當在第二個事件函數中調用
stopImmediatePropagation方法時，點擊div元素時，後面注冊的click將不會被觸發，而且還會阻止事件冒泡;
比如下面的例子，給p綁定多個click事件，在第二個事件函數中調用stopImmediatePropagation，第三個click
事件就不會觸發，因為也阻止了冒泡，因此父元素的click事件也不會觸發。
paragraph