前端面試題（總結）

時間 2019-11-07

標籤端面試題總結简体版

原文原文鏈接

HTML

1.HTML5爲什麼只要寫<!doctype html>

HTML5不基於SGML（標準通用標記語言），因此不須要引用DTD，但須要doctype來規範瀏覽器的行爲（使得瀏覽器知道應該以何種解析方式對文檔進行解析）
HTML4.0基於SGML，因此要引用DTD才能告知瀏覽器文檔所使用的文檔類型

2.講講行內元素、塊元素、空元素有哪些

行內元素：a，span，img，input，select，strong，em，b（標記性元素）
塊元素：div，p，ul，li，ol，dd，dt，dl，h1-h6
空元素：hr，br，input，img，link，meta

3.導入樣式時，使用link與@import的區別

link屬於XHTML標籤，除了能夠加載css外，還能定義SSR，定義rel鏈接屬性等做用，@import是css提供的，只能加載css樣式
頁面加載時，link引入的資源可以同時被加載，而@import引入的css必須等頁面加載完成後才能進行加載
link是XHTML標籤，無兼容問題，而@import是css2.1提出的，IE5如下的低版本瀏覽器不支持

4.簡述對HTML5語義化的理解

在沒有css樣式時，以一種文檔的形式顯示，而且是容易閱讀的
HTML5語義化使頁面的內容結構化，結構更清晰，便於瀏覽器、搜索引擎解析
有利於哪些有視障的人使用屏幕閱讀器根據標記來訪問網站
有利於團隊的開發和維護
有利於SEO：便於爬蟲抓取更多有效的信息

5.描述下cookie、localStorage和sessionStorage的區別

cookie本是用來客戶端與服務端進行通訊的，由於其有存儲功能，而被借用來存儲信息，cookie數據會始終在同源http請求中攜帶
localStorage和sessionStorage不會自動把數據發送到服務器上，僅在本地存儲
存儲大小css
- cookie只有4k；而localStorage和sessionStorage能夠達到5M或者更大
過時時間html
- cookie在設置的過時時間前一直有效，
- localStorage長期有效，關閉瀏覽器數據不會丟失，除非用戶主動刪除數據
- sessionStorage數據在當前瀏覽器窗口關閉後自動刪除

6.實現不用border畫出1px高的線，在不一樣瀏覽器裏，標準模式與怪異模式下都能保持一致的效果

<div style="height: 1px;overflow:hidden;"></div>

7.網頁驗證碼的做用及解決的安全問題

區分用戶是人仍是機器，能夠防止惡意破解密碼、刷票等；能夠防止黑客對某一特定註冊用戶以暴力破解的方式不斷的嘗試登陸web

8.data-屬性的做用

data-*用於存儲頁面或者應用程序的私有自定義的數據，能夠在全部的html元素中嵌入data-自定義屬性，能夠被js利用來操做數據canvas

注意：data屬性應該爲小寫，且data-後至少要有一個字符，不能單單使用data，data屬性值能夠是任意字符串

9.說說HTML5新特性，移除的元素（說說HTML5）

新特性：瀏覽器

繪畫canvas
用於媒介回放的video、audio元素
本地離線locaStorage長期存儲數據，瀏覽器關閉後數據不丟失
sessionStorage在瀏覽器關閉後數據自動刪除
表單控件：data、email、search、url、calendar、time
語義化標籤：header、footer、nav、section、article
新的技術：webworker、websocket、Geolocation

移除的元素 安全

純表現元素：basefont、center、font、big、u、tt、strike、s
對可用性產生負面影響的元素：frame、frameset、noframes

CSS

1.介紹下標準的盒子模型和IE的怪異盒子模型

w3c標準盒子模型：content的width就是設置的width
IE怪異盒子模型：content的width包含border和padding

2.css優先級計算

優先級就近原則，同等權重時樣式最近者優先級更高
!import > id > class > tag
!import比內聯樣式優先級更高

3.簡述css文件爲何要reset

瀏覽器種類衆多，不一樣瀏覽器的默認樣式不同，須要進行reset統一瀏覽器的樣式服務器

4.如何使兩個div進行水平佈局

使用flex佈局：父元素設置：display：flex
使用浮動佈局（或者使用display：inline-block）

// html
<div class="box">
    <div class="left">fff</div>
    <div class="right">dddf</div>
</div>    
// css
.left{
    float: left;
    background: red;
    /*display: inline-block;*/
}
.right{
    overflow: hidden;
    background: green;
    /*display: inline-block;*/
}

5.左邊固定寬度，右邊自適應

左邊定寬+設置浮動width：300px；float：left；右邊設置overflow：hidden（或者margin-left：左邊的寬度）

.left{
    float: left;
    width: 300px;
    background: red;
}
.right{
    overflow: hidden;
    background: green;
}

父元素設置display：flex；左邊設置width：300px；右邊設置flex-grow：1
父元素設置display：table；左邊設置width：300px；右邊設置display：table-cell；width：100%；
父元素設置position：relative；左邊設置position：absolute；width：300px；右邊設置margin-left：左邊的寬度

6.兩個div完成兩列布局：要求高度不定（父元素也是），兩個div實時等高（左邊div高度被子元素撐高時，右邊div高度與左邊一致）

父元素設置display：table；右邊設置：display：table-cell
父元素設置display：flex；右邊設置flex-grow：1

7.實現左右兩邊寬度固定，中間自適應

使用左右浮動佈局，中間居中佈局，此時中間div要放在右浮動下面（由於center的div在正常文檔流中，佔據全屏寬度，右邊的浮動元素會放置在下一行）

// html
<div class="box">
    <div class="left">fff</div>
    <div class="right">ddddd</div>
    <div class="center">ss</div>
</div>    
// css
.left{
    float: left;
    background: red;
}
.right{
    float: right;
    background: green;
}
.center{
    margin: 0 auto;
    background: yellow;
}

使用flex佈局

父元素設置display：flex；左邊定寬width：300px；右邊定寬width：300px；中間設置flex-grow：1websocket

// html
<div class="box">
    <div class="left">fff</div>
    <div class="center">ss</div>
    <div class="right">ddddd</div>
</div>    
// css
.box{
    display: flex;
}
.left{
    width: 300px;
    background: red;
}
.right{
    width: 300px;
    background: green;
}
.center{
    flex-grow: 1;
    background: yellow;
}

使用絕對定位，左右兩邊絕對定位，脫離文檔流，中間使用margin留出定寬的margin值

.left{
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    background: red;
}
.right{
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
    background: green;
}
.center{
    margin: 0 300px;
    background: yellow;
}

8.聖盃佈局（與雙飛翼佈局差很少）

實際上是利用負margin值實現，也就是固比固（兩邊盒子寬度固定，中間盒子自適應）cookie

<div class="box">
    <div class="center col">dgdggdgdsgdsfhsgkjsdflkghjsdkghsdghsdhg
        dhgsdhgsdghsdhgjdhkghsdghsdghskdjhgsdhfgsdfhg</div>
    <div class="left col"></div>
    <div class="right col"></div>
</div>    

.box{
    overflow: hidden;
    padding: 0 150px;
}
.left{
    left: -150px;
    margin-left: -100%;
    width: 150px;
    height: 50px;
    background: red;
}
.right{
    right: -150px;
    margin-left: -150px;
    width: 150px;
    height: 50px;
    background: green;
}
.center{
    width: 100%;
    height: 50px;
    background: yellow;
}
.col{
    position: relative;
    float: left;
}

定位完成後，要進行position：relative；再左右兩欄添加left和right值，使中間的內容不被遮蓋session

9.雙飛翼佈局

<div class="box">
    <div class="wrap col">
        <div class="center">dgdggdgdsgdsfhsgkjsdflkghjsdkghsdghsdhg
            dhgsdhgsdghsdhgjdhkghsdghsdghskdjhgsdhfgsdfhg
        </div>
    </div>
    <div class="left col"></div>
    <div class="right col"></div>
</div>    
.left{
    margin-left: -100%;
    width: 150px;
    height: 50px;
    background: red;
}
.right{
    margin-left: -150px;
    width: 150px;
    height: 50px;
    background: green;
}
.center{
    width: 100%;
    height: 50px;
    background: yellow;
}
.col{
    float: left;
}
.wrap{
    margin: 0 150px;
}
與聖盃佈局只是中間的div增長了包含的容器，防止遮蓋文字使用了在包含容器中設置margin：0 定寬值；

10.如何水平居中一個浮動元素，如何水平居中一個絕對定位元素

居中浮動元素

<div class="box">
    <div class="right col"></div>
</div>
.right{
    float：left;
    width: 150px;
    height: 50px;
    margin: 0 0 0 -75px;
    position: relative;
    left: 50%;
    top: 50%;
    background: green;
}

居中絕對定位元素

.right{
    position: absolute;
    width: 150px;
    height: 50px;
    margin: 0 auto;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: green;
}