前端面試題 -- HTML+CSS

shiina 發(fā)布于2019-08-30 15:56 / 2572人閱讀

摘要：內(nèi)核原為，現(xiàn)為內(nèi)核，等。但盒子的大小由這幾部分決定是一個(gè)屬性，與盒子模型有著密切聯(lián)系。

前言

貌似又到了一年一度跑路跳槽的時(shí)刻，由于個(gè)人的一些原因最近也參加了很多面試，發(fā)現(xiàn)有很多基礎(chǔ)性的東西掌握程度還是不夠，故此想總結(jié)一下最近面試遇到的問(wèn)題以及個(gè)人認(rèn)為比較重要的東西，留給自己消化，也分享給有需要的小伙伴

GitHub完整版面試題，歡迎小伙伴們star關(guān)注

如果文章中有出現(xiàn)紕漏、錯(cuò)誤之處，還請(qǐng)看到的小伙伴多多指教，先行謝過(guò)

好了，廢話不多說(shuō)，以下 ↓

HTML 1. Doctype作用，HTML5 為什么只需要寫(xiě)

doctype是一種標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的文檔類型聲明，目的是告訴標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言解析器要使用什么樣的文檔類型定義（DTD）來(lái)解析文檔.聲明必須是HTML文檔的第一行，位于html標(biāo)簽之前HTML5不基于SGML，所以不需要引用DTD。在HTML5中只有一種
SGML: 標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言,是現(xiàn)時(shí)常用的超文本格式的最高層次標(biāo)準(zhǔn)

2. 行內(nèi)元素有哪些，塊級(jí)元素有哪些，空(void)元素有那些

行內(nèi)元素：a span i img input select b 等

塊級(jí)元素：div ul ol li h1~h6 p table 等

空元素：br hr link 等

3. 簡(jiǎn)述一下你對(duì)HTML語(yǔ)義化的理解

簡(jiǎn)單來(lái)說(shuō)，就是合適的標(biāo)簽做合適的事情，這樣具有以下好處：

有助于構(gòu)架良好的HTML結(jié)構(gòu)，有利于搜索引擎的建立索引、抓取，利于SEO

有利于不同設(shè)備的解析

有利于構(gòu)建清晰的機(jī)構(gòu)，有利于團(tuán)隊(duì)的開(kāi)發(fā)、維護(hù)

4. 常見(jiàn)的瀏覽器內(nèi)核有哪些，介紹一下你對(duì)瀏覽器內(nèi)核的理解

Trident內(nèi)核：IEGecko內(nèi)核：NETSCAPE6及以上版本，火狐
Presto內(nèi)核：Opera7及以上。[Opera內(nèi)核原為：Presto，現(xiàn)為：Blink;]
Webkit內(nèi)核：Safari，Chrome等。[Chrome的：Blink（WebKit的分支）]

瀏覽器內(nèi)核又可以分成兩部分：渲染引擎和JS引擎。 渲染引擎主要負(fù)責(zé)取得網(wǎng)頁(yè)的內(nèi)容、整理訊息、計(jì)算網(wǎng)頁(yè)的顯示方式等，JS引擎則是解析Javascript語(yǔ)言，執(zhí)行javascript語(yǔ)言來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果。

5. html5有哪些新特性

語(yǔ)義化標(biāo)簽: header footer nav section article aside 等

增強(qiáng)型表單：date(從一個(gè)日期選擇器選擇一個(gè)日期) email(包含 e-mail 地址的輸入域) number(數(shù)值的輸入域) range(一定范圍內(nèi)數(shù)字值的輸入域) search(用于搜索域) tel(定義輸入電話號(hào)碼字段) 等

視頻和音頻：audio video

Canvas繪圖 SVG繪圖

地理定位：Geolocation

拖放API：drag

web worker：是運(yùn)行在后臺(tái)的 JavaScript，獨(dú)立于其他腳本，不會(huì)影響頁(yè)面的性能

web storage: localStorage sessionStorage

WebSocket: HTML5開(kāi)始提供的一種在單個(gè) TCP 連接上進(jìn)行全雙工通訊的協(xié)議

6. 描述一下 cookie，sessionStorage 和 localStorage 的區(qū)別

特性	Cookie	localStorage	sessionStorage
生命周期	可設(shè)置失效時(shí)間，沒(méi)有設(shè)置的話，默認(rèn)是關(guān)閉瀏覽器后失效	除非被手動(dòng)清除，否則將會(huì)永久保存	僅在當(dāng)前網(wǎng)頁(yè)會(huì)話下有效，關(guān)閉頁(yè)面或?yàn)g覽器后就會(huì)被清除
存放數(shù)據(jù)大小	4KB左右	可以保存5MB的信息
http請(qǐng)求	每次都會(huì)攜帶在HTTP頭中，如果使用cookie保存過(guò)多數(shù)據(jù)會(huì)帶來(lái)性能問(wèn)題	僅在客戶端（即瀏覽器）中保存，不參與和服務(wù)器的通信

7. 如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信

使用localStorage: localStorage.setItem(key,value)、localStorage.getItem(key)

websocket協(xié)議

webworker

多個(gè)標(biāo)簽頁(yè)之間的通信

8. HTML5的離線存儲(chǔ)怎么使用，解釋一下工作原理

HTML5的離線存儲(chǔ)

9. src與href的區(qū)別

區(qū)別：src用于替代這個(gè)元素，而href用于建立這個(gè)標(biāo)簽與外部資源之間的關(guān)系

瀏覽器加載到這里的時(shí)候，html的渲染和解析不會(huì)暫停，css文件的加載是同時(shí)進(jìn)行的

當(dāng)瀏覽器解析到這句代碼時(shí)，頁(yè)面的加載和解析都會(huì)暫停直到瀏覽器拿到并執(zhí)行完這個(gè)js文件

10. 表單提交中Get和Post方式的區(qū)別

Get一般用于從服務(wù)器上獲取數(shù)據(jù)，Post向服務(wù)器傳送數(shù)據(jù)

Get傳輸?shù)臄?shù)據(jù)是拼接在Url之后的，對(duì)用戶是可見(jiàn)的；Post的傳輸數(shù)據(jù)對(duì)用戶是不可見(jiàn)的

Get傳送的數(shù)據(jù)量較小，不能大于2KB。Post傳送的數(shù)據(jù)量較大，一般被默認(rèn)為不受限制

Get安全性非常低，Post安全性較高

在FORM提交的時(shí)候，如果不指定Method，則默認(rèn)為Get請(qǐng)求

CSS 1. css盒子模型，box-sizing屬性的理解

css的盒模型由content(內(nèi)容)、padding(內(nèi)邊距)、border(邊框)、margin(外邊距)組成。但盒子的大小由content+padding+border這幾部分決定

box-sizing是一個(gè)CSS3屬性，與盒子模型有著密切聯(lián)系。即決定元素的寬高如何計(jì)算，box-sizing有三個(gè)屬性：

box-sizing: content-box|border-box|inherit:

content-box 使得元素的寬高即為內(nèi)容區(qū)的寬高(默認(rèn)模式)

border-box: 計(jì)算方式content + padding + border = 本身元素大小，即縮小了content大小

inherit 指定box-sizing屬性的值，應(yīng)該從父元素繼承

2. 清除浮動(dòng)，什么時(shí)候需要清除浮動(dòng)，清除浮動(dòng)都有哪些方法

浮動(dòng)的元素是脫離文檔標(biāo)準(zhǔn)流的，如果我們不清楚浮動(dòng)，那么就會(huì)造成父元素高度塌陷，影響頁(yè)面布局。

清除浮動(dòng)的方式：

為父元素設(shè)置高度

為父元素添加overflow:hidden

偽元素

.fix::after { 
     content:""; 
     display:block; 
     clear:both;
}

使用偽元素的好處：不增加冗余的DOM節(jié)點(diǎn)，符合語(yǔ)義化

overflow:hidden可以觸發(fā)BFC機(jī)制。BFC：塊級(jí)格式化上下文，創(chuàng)建了 BFC的元素就是一個(gè)獨(dú)立的盒子，它規(guī)定了內(nèi)部如何布局，并且與這個(gè)獨(dú)立盒子里的布局不受外部影響，當(dāng)然它也不會(huì)影響到外面的元素，計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算

3. 如何讓一個(gè)不定寬高的盒子水平垂直居中

定位的方式

.father {
    position: relative;
}
.son {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

css3屬性

.father {
    position: relative;
}
.son {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

flex布局

.father {
    display: flex;
    justify-content: center;
    align-items: center;
}

4. px和em和rem的區(qū)別

px: 像素，相對(duì)長(zhǎng)度單位。像素px是相對(duì)于顯示器屏幕分辨率而言的em的值并不是固定的，會(huì)繼承父級(jí)元素的字體大小，代表倍數(shù)
rem的值并不是固定的，始終是基于根元素  的，也代表倍數(shù)

5. position的值有哪些

static： 默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中relative（相對(duì)定位）：生成相對(duì)定位的元素,相對(duì)于其正常（原先本身）位置進(jìn)行定位
absolute（絕對(duì)定位）：生成絕對(duì)定位的元素，相對(duì)于static定位以外的第一個(gè)父元素進(jìn)行定位
fixed（固定定位）：生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位

6. display:none與visibility：hidden的區(qū)別

區(qū)別	display:none	visibility：hidden的
是否占據(jù)空間	不占據(jù)任何空間，在文檔渲染時(shí)，該元素如同不存在（但依然存在文檔對(duì)象模型樹(shù)中）	該元素空間依舊存在
是否渲染	會(huì)觸發(fā)reflow（回流），進(jìn)行渲染	只會(huì)觸發(fā)repaint（重繪），因?yàn)闆](méi)有發(fā)現(xiàn)位置變化，不進(jìn)行渲染
是否是繼承屬性	不是繼承屬性，元素及其子元素都會(huì)消失	是繼承屬性，若子元素使用了visibility:visible，則不繼承，這個(gè)子孫元素又會(huì)顯現(xiàn)出

7. CSS中l(wèi)ink 和@import的區(qū)別

link屬于XHTML標(biāo)簽，@import完全是CSS提供的一種方式,只能加載CSS加載順序的差別，當(dāng)一個(gè)頁(yè)面被加載的時(shí)候，link引用的CSS會(huì)同時(shí)被加載，而@import引用的CSS 會(huì)等到頁(yè)面全部被下載完再被加載
兼容性的差別。由于@import是CSS2.1提出的所以老的瀏覽器不支持，而link標(biāo)簽無(wú)此問(wèn)題
當(dāng)使用javascript控制dom去改變樣式的時(shí)候，只能使用link標(biāo)簽，因?yàn)锧import不是dom可以控制的

8. 什么是響應(yīng)式設(shè)計(jì)，響應(yīng)式設(shè)計(jì)的基本原理是什么

響應(yīng)式網(wǎng)站設(shè)計(jì)是一個(gè)網(wǎng)站能夠兼容多個(gè)終端，而不是為每一個(gè)終端做一個(gè)特定的版本?；驹硎峭ㄟ^(guò)媒體查詢檢測(cè)不同的設(shè)備屏幕尺寸做處理

9. 為什么要初始化CSS樣式

因?yàn)闉g覽器的兼容問(wèn)題，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的，如果沒(méi)對(duì) CSS 初始化往往會(huì)出現(xiàn)瀏覽器之間的頁(yè)面顯示差異初始化樣式會(huì)對(duì) SEO 有一定的影響

10. CSS3有哪些新特性

實(shí)現(xiàn)圓角border-radius，陰影box-shadow，邊框圖片border-image

對(duì)文字加特效text-shadow，強(qiáng)制文本換行word-wrap，線性漸變linear-gradient

實(shí)現(xiàn)旋轉(zhuǎn)transform:rotate(90deg),縮放scale(0.85,0.90),translate(0px,-30px)定位,傾斜skew(-9deg,0deg);

增加了更多的CSS選擇器、多背景、rgba()

唯一引入的偽元素是::selection；

實(shí)現(xiàn)媒體查詢@media，多欄布局flex

過(guò)渡transition 動(dòng)畫(huà)animation

11. ::before 和 :after中雙冒號(hào)和單冒號(hào)有什么區(qū)別？解釋一下這2個(gè)偽元素的作用

單冒號(hào)(:)用于CSS3偽類，雙冒號(hào)(::)用于CSS3偽元素。（偽元素由雙冒號(hào)和偽元素名稱組成）,雙冒號(hào)是在當(dāng)前規(guī)范中引入的，用于區(qū)分偽類和偽元素

12. CSS優(yōu)化、提高性能的方法有哪些

移除空的css規(guī)則（Remove empty rules）

正確使用display的屬性

不濫用浮動(dòng)、web字體

不聲明過(guò)多的font-size

不在選擇符中使用ID標(biāo)識(shí)符

遵守盒模型規(guī)則

盡量減少頁(yè)面重排、重繪

抽象提取公共樣式，減少代碼量

13. 重繪和回流

重繪和回流

14. flex布局

可以參考一下阮大大的文章 flex布局教程--阮一峰

15. css預(yù)處理器

提供了一種css的書(shū)寫(xiě)方式，常見(jiàn)的就是 SAAS文檔和 LESS文檔

后記

面試問(wèn)題會(huì)不定時(shí)更新，后面也會(huì)抽時(shí)間總結(jié)一些javaScript、框架以及小程序方面的面試題，有需要的小伙伴可以點(diǎn)擊關(guān)注我哦，最后祝大家都能找到一份滿意的工作。

GPU云服務(wù)器云服務(wù)器 html面試題 html前端工程師面試面試題 html5前端css3

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117526.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

shiina

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

DogYun國(guó)慶促銷：動(dòng)態(tài)云7折,經(jīng)典云8折,獨(dú)立服務(wù)器優(yōu)惠100元/月,充100送10元

閱讀 1499·2021-09-30 09:57
【一年總結(jié)】記我的大二生活

閱讀 1507·2021-09-09 09:33
聊聊自動(dòng)化測(cè)試?yán)锏臄?shù)據(jù)驅(qū)動(dòng)和關(guān)鍵字驅(qū)動(dòng)

閱讀 2286·2021-09-04 16:40
美國(guó)特價(jià)云服務(wù)器真的便宜嗎?美國(guó)vps云服務(wù)器價(jià)格多少錢?

閱讀 1846·2021-09-01 10:50
谷歌母公司旗下Wing無(wú)人機(jī)快遞訂單量突破10萬(wàn)件

閱讀 3280·2021-09-01 10:31
前端面試題 -- HTML+CSS

閱讀 2573·2019-08-30 15:56
練習(xí)九宮格

閱讀 3000·2019-08-30 15:44
【每日一包0022】through2-map,through2-filter,stream-spig

閱讀 3512·2019-08-29 17:29

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

前端面試題 -- HTML+CSS

相關(guān)文章

前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

**前端面試題-CSS選擇器**

**前端面試題-CSS選擇器**

**前端面試題-CSS選擇器**

前端最強(qiáng)面經(jīng)匯總

前端開(kāi)發(fā)面試題

發(fā)表評(píng)論

0條評(píng)論

shiina

男|高級(jí)講師

TA的文章

DogYun國(guó)慶促銷：動(dòng)態(tài)云7折,經(jīng)典云8折,獨(dú)立服務(wù)器優(yōu)惠100元/月,充100送10元

【一年總結(jié)】記我的大二生活

聊聊自動(dòng)化測(cè)試?yán)锏臄?shù)據(jù)驅(qū)動(dòng)和關(guān)鍵字驅(qū)動(dòng)

美國(guó)特價(jià)云服務(wù)器真的便宜嗎?美國(guó)vps云服務(wù)器價(jià)格多少錢?

谷歌母公司旗下Wing無(wú)人機(jī)快遞訂單量突破10萬(wàn)件