2019秋招你必須知道的前端知識

時間 2019-12-14

標籤必須知道前端知識简体版

原文原文鏈接

引言

又是一輪金九銀十的校招黃金期，藉此更新部分前端面試題，並提供詳解（答案不保證百分百正確，但我自信，可參考性仍是很高的），但願對你們會有幫助^~^！css

版本

v0.1：添加HTML相關面試筆試題 + 添加一些CSS的筆試題

HTML篇（2018-9-15 19:10）

1. 你作過的網站在哪些瀏覽器中運行過？他們的內核分別是什麼？它們的兼容性樣式前綴是什麼？

IE:      trident    -ms-
chrome:  webkit     -webkit-
safari:  webkit     -webkit-
firefox: gecko      -moz-
opera:   blink      -o-

2. HTML文檔開頭的 `!DOCTYPE` 有什麼做用？

做用是告訴瀏覽器用什麼樣的規範來解析這段文檔。html

3. `!DOCTYPE` 有哪些聲明方式？

分爲 H五、HTML 4.0一、XHTML 1.0、XHTML 1.1:
1. H5： <!DOCTYPE html> 
2. HTML 4.01 嚴格模式：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
3. HTML 4.01 過分模式：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4. HTML 4.01 框架模式：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
5. XHTML 1.0 嚴格模式：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
6. XHTML 1.0 過分模式：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
7. XHTML 1.0 框架模式：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
8. XHTML 1.1：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

4. 什麼是怪異模式？怪異模式與標準模式有什麼區別？

　　在IE6以前，IE瀏覽器對CSS的支持不好，在IE6時，爲了對CSS有着更好的支持，它將HTML文檔首部的DTD做爲一個參數，若DTD存在，則使用更好的CSS支持進行網頁的渲染，若沒有DTD，則使用兼容以前的CSS解析規則，這就是怪異模式。
　　怪異模式與標準模式的區別：
　　主要是盒模型上的區別：怪異模式下，元素的寬度和高度包含了padding、border與content(元素內容)，而標準模式下的盒模型元素寬度和高度只包含元素的content，不包含padding與border。前端

5. 什麼是web語義化？它有什麼好處？

　　web語義化就是使用語義化的HTML標籤描述文檔結構。
　　優勢：
　　1.一個遵照web語義化規則的文檔，每每具備的html標籤相對較少，將會被更快速地被解析；
　　2.丟失樣式表的支持下，頁面一樣呈現良好的結構，每每歸功於瀏覽器對H5標籤的默認樣式支持；
　　3.有利於SEO，更容易被爬蟲機器人根據標籤抓取主要內容；
　　4.屏幕閱讀器等設備將會更容易閱讀網頁，提升了網站的可訪問性；web

6. meta標籤的做用是什麼？

　　提供頁面的元信息，好比標題、描述、關鍵詞等信息，以及不一樣平臺的適配，如移動端、win8系統，還有有關緩存的相關信息。面試

CSS篇

// 2018-9-18 22:16chrome

1.請描述下什麼是盒模型？

　　基礎的通常回答：盒模型主要構成部分是由margin、border、padding、content四部分構成
　　更好的回答是：盒模型主要分爲IE低版本瀏覽器的怪異盒模型與如今的標準盒模型，在上部分的基礎上，再增長回答：在怪異盒模型中，當css設置width時，實際上是設置了boeder+padding+content的寬度，而標準的盒模型的width則是只包含content部分；屬性box-sizing則能夠選擇使用哪一種版本的盒模型規範（content-box，border-box）。
　　這樣在回答了盒模型的基礎上，你本身也延伸出了一些本身關於盒模型更深刻的理解。瀏覽器

2.行內元素、塊級元素、行內塊級元素它們分別有什麼特色？

　　1. 行內元素：通常沒法設置width與height屬性，且它們能夠共同佔有同一行，能夠設置padding與margin在橫向（left、right）的間距，但沒法設置縱向上的間距（top、bottom）。
　　2. 塊級元素：能夠設置width、height，獨佔一行，能夠設置margin、padding
　　3. 行內塊級元素：能夠設置width、height，能夠共用佔用同一行，能夠設置margin、padding緩存

3. css選擇器的優先級（含權重）

　　!important(這個其實不算選擇器) > 內聯樣式(也不算) > ID選擇器（1000） > Class選擇器（100） = 屬性選擇器（100） = 僞類選擇器（100） > 標籤選擇器（10） > 通配符(*)（1） > 瀏覽器默認樣式
　　權重的計算方式：有哪些選擇器就按照各自權重相加（#a .b {} -> 1000 + 100 = 1100）網絡

4. CSS3新增特性

　　1. 僞類 => :before :after :disabled :nth-child() :first-child and so on!框架

這裏能夠吹一個歷史問題： 在CSS3以前是存在`:before :after`的，在這裏爲何說是新增的呢？由於CSS3以前的`:before :after`是`僞元素`，而CSS3更新時`規範僞類的寫法`是`（：+ XXX）`，所以之前的`:before :after 僞元素`被改名爲`::before ::after`，且兩個冒號`::`是CSS3的僞元素寫法

　　2. 媒體查詢 => @media screen and (max-width: 780px) 固然還有其餘寫法，好比區分橫豎屏
　　3. 動畫 => transform、transition、@keyframes{} 等
　　4. 顏色漸變
　　5. 陰影 => 元素陰影 與 文字陰影
　　6. flex => 佈局方式，主要用於移動端
　　7. 圓角 => border-radius
　　8. 透明度 => rgba

5. 僞元素與僞類的區別

　　僞元素是能夠在當前元素的前或後虛擬添加一個僞元素，而且能夠設置其樣式，一般用於作動畫效果，或者清除浮動
　　僞類是元素經過一些特定的操做觸發事件，而後改變相應的樣式。

6. 如何作到兼容IE瀏覽器的CSS樣式

　　1. CSS hack : 條件hack、屬性hack、選擇器前綴hack
　　2. 在雙核瀏覽器（IE內核：trident，chrome內核：blink--基於webkit，......）中，能夠設置強制使用某種內核

// 強制Chromium內核，做用於360瀏覽器、QQ瀏覽器等國產雙核瀏覽器：
    <meta name="renderer" content="webkit"/>
    // 強制Chromium內核，做用於其餘雙核瀏覽器：
    <meta name="force-rendering" content="webkit"/>
    // 若是有安裝 Google Chrome Frame 插件則強制爲Chromium內核，不然強制本機支持的最高版本IE內核，做用於IE瀏覽器：
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>

7. CSS hack是什麼？

　　1. 條件hack：經過if判斷IE瀏覽器版本，應用不一樣的樣式

<!--[if <keywords>? IE <version>?]>
        HTML代碼塊
    <![endif]-->
    大於IE6（大於：gt，大於等於：gte，小於：lt，小於等於：lte，非：！）
    <!--[if gt IE 6]>
    <style>
    .test{color:red;}
    </style>
    <![endif]-->

　　2. 屬性hack：爲某個css屬性設置hack

.test {
        color: #090\9; /* For IE8+ */
        *color: #f00;  /* For IE7 and earlier */
        _color: #ff0;  /* For IE6 and earlier */
    }

　　3. 選擇器hack

* html .test { color: #090; }       /* For IE6 and earlier */
* + html .test { color: #ff0; }     /* For IE7 */
.test:lang(zh-cmn-Hans) { color: #f00; }  /* For IE8+ and not IE */
.test:nth-child(1) { color: #0ff; } /* For IE9+ and not IE */

8. CSS精靈是什麼（CSS sprites）

　　一種圖片處理方式，將多張圖片合併到同一張圖片上，經過CSS3的background-position、background-repeat、background-image來定位到某個特定的圖片區域。減小了http請求的數量，同時減小了圖片的整體積，有利於頁面的優化。

9. 請解釋下什麼是內邊距摺疊？怎麼避免呢？

JS篇

... ...

計算機網絡篇

... ...

... ... (也許會添加框架系列，也可能夭折..)

結語

今天就先更新完HTML部分的相關基礎知識，後續，也就是近幾天會更新餘下部分，感受有用的點個贊吧 ^_^

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。