前端面試題（總結）

lpjustdoit 發布于2019-08-30 15:53 / 2784人閱讀

摘要：為何只要寫不基于標準通用標記語言，所以不需要引用，但需要來規范瀏覽器的行為使得瀏覽器知道應該以何種解析方式對文檔進行解析基于，所以要引用才能告知瀏覽器文檔所使用的文檔類型講講行內元素塊元素空元素有哪些行內元素，，，，，，，標記性元素塊元素，

HTML 1.HTML5為何只要寫

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不會自動把數據發送到服務器上，僅在本地存儲

存儲大小

cookie只有4k；而localStorage和sessionStorage可以達到5M或者更大

過期時間

cookie在設置的過期時間前一直有效，

localStorage長期有效，關閉瀏覽器數據不會丟失，除非用戶主動刪除數據

sessionStorage數據在當前瀏覽器窗口關閉后自動刪除

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

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

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

8.data-屬性的作用

data-*用于存儲頁面或者應用程序的私有自定義的數據，可以在所有的html元素中嵌入data-自定義屬性，可以被js利用來操作數據

注意：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

    fff
    ffffdf
    
// 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

    fff
    ffffddd
    ss
    
// 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：1

// html

    fff
    ss
    ffffddd
    
// 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值實現，也就是固比固（兩邊盒子寬度固定，中間盒子自適應）


    dgdggdgdsgdsfhsgkjsdflkghjsdkghsdghsdhg
        dhgsdhgsdghsdhgjdhkghsdghsdghskdjhgsdhfgsdfhg
    
    
    

.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值，使中間的內容不被遮蓋

9.雙飛翼布局


    
        dgdggdgdsgdsfhsgkjsdflkghjsdkghsdghsdhg
            dhgsdhgsdghsdhgjdhkghsdghsdghskdjhgsdhfgsdfhg
        
    
    
    
    
.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.如何水平居中一個浮動元素，如何水平居中一個絕對定位元素

居中浮動元素


    

.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;
}

11.position的值relative和absolute的定位原點是哪里

absolute：生成絕對定位元素，相對于值不為static的第一個父元素進行定位

fixed：生成絕對定位，相對于瀏覽器窗口進行定位

relative：生成相對定位元素，相對于其正常位置進行定位

static：沒有定位，元素出現在正常的流中（忽略偏移聲明：top、left、right、bottom、z-index）

inherit：從父元素繼承position屬性的值

12.li與li之間有看不見的空白間隔是什么原因引起的

行框的排列會受到中間空白（回車或者空格）的影響，空格也屬于字符，也會應用樣式，占據空間
將字符大小設為0就可以將間隔去除

13.優雅降級與漸進增強

漸進增強：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進，追加功能達到更好的用戶體驗

優雅降級：先構建完整的功能，再針對低版本瀏覽器進行兼容

JS 部分等待更新

GPU云服務器云服務器面試題棧面試題筆試面試題面試題內容

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116717.html

前端最強面經匯總

摘要：獲取的對象范圍方法獲取的是最終應用在元素上的所有屬性對象即使沒有代碼，也會把默認的祖宗八代都顯示出來而只能獲取元素屬性中的樣式。因此對于一個光禿禿的元素，方法返回對象中屬性值如果有就是據我測試不同環境結果可能有差異而就是。花了很長時間整理的前端面試資源，喜歡請大家不要吝嗇star~ 別只收藏，點個贊，點個star再走哈~ 持續更新中……，可以關注下github 項目地址 https:...

wangjuntytl 2019-08-26 10:41 評論0 收藏0
前端開發面試題鏈接

摘要：手冊網超級有用的前端基礎技術面試問題收集前端面試題目及答案匯總史上最全前端面試題含答案常見前端面試題及答案經典面試題及答案精選總結前端面試過程中最容易出現的問題前端面試題整理騰訊前端面試經驗前端基礎面試題部分最新前端面試題攻略前端面試前端入手冊網：http://www.shouce.ren/post/index 超級有用的前端基礎技術面試問題收集：http://www.codec...

h9911 2019-08-02 16:11 評論0 收藏0
前端開發面試題鏈接

摘要：手冊網超級有用的前端基礎技術面試問題收集前端面試題目及答案匯總史上最全前端面試題含答案常見前端面試題及答案經典面試題及答案精選總結前端面試過程中最容易出現的問題前端面試題整理騰訊前端面試經驗前端基礎面試題部分最新前端面試題攻略前端面試前端入手冊網：http://www.shouce.ren/post/index 超級有用的前端基礎技術面試問題收集：http://www.codec...

snifes 2019-08-23 16:48 評論0 收藏0
前端面試 - 收藏集 - 掘金

摘要：一基礎接口的意義百度規范擴展回調抽象類的意義我的前端面試經歷百度前端掘金博主就讀于電子科技大學，大三狗一枚面試是個漫長的過程，從海投到收獲電話面試，一面二面三面，一個步驟出錯那么后面就宣告終結。一道常被人輕視的前端 JS 面試題 - 前端 - 掘金目錄前言第一問第二問變量聲明提升函數表達式第三問第四問第五問第六問構造函數的返回值第七問最后前言年前剛剛離職了，分享下我曾經出過的一道...

lpjustdoit 2019-08-22 11:03 評論0 收藏0
深入理解js

摘要：詳解十大常用設計模式力薦深度好文深入理解大設計模式收集各種疑難雜癥的問題集錦關于，工作和學習過程中遇到過許多問題，也解答過許多別人的問題。介紹了的內存管理。延遲加載 (Lazyload) 三種實現方式延遲加載也稱為惰性加載，即在長網頁中延遲加載圖像。用戶滾動到它們之前，視口外的圖像不會加載。本文詳細介紹了三種延遲加載的實現方式。詳解 Javascript十大常用設計模式力薦~ ...

caikeal 2019-08-26 11:39 評論0 收藏0
求職準備 - 收藏集 - 掘金

摘要：一基礎接口的意義百度規范擴展回調抽象類的意義想不想通過一線互聯網公司面試文檔整理為電子書掘金簡介谷歌求職記我花了八個月準備谷歌面試掘金原文鏈接翻譯者【面試寶典】從對象深入分析 Java 中實例變量和類變量的區別 - 掘金原創文章，轉載請務必保留原出處為：http://www.54tianzhisheng.cn/... , 歡迎訪問我的站點，閱讀更多有深度的文章。實例變量和類變量...

cuieney 2019-08-16 10:36 評論0 收藏0