摘要:寫在前面本小菜雞開學(xué)其實(shí)已經(jīng)開始了就要面臨找實(shí)習(xí)的壓力了。所以在此開一貼記錄一下搜集的前端面試的問題和自己即將被拷問的問題。而有著固定的大小,高度超過規(guī)定高度就會(huì)出現(xiàn)滾動(dòng)條。實(shí)現(xiàn)頁面加載進(jìn)度條我們可以將一整個(gè)頁面大致分為,個(gè)區(qū)域。
寫在前面
本小菜雞開學(xué)(其實(shí)已經(jīng)開始了)就要面臨找實(shí)習(xí)的壓力了。所以在此開一貼記錄一下搜集的前端面試的問題和自己即將被拷問的問題= =。悔不該當(dāng)初沒有好好學(xué)習(xí)quq!努力!
面試題目總結(jié) HTML1.html5新增了哪些內(nèi)容或api,使用過哪些?
HTML5新增input輸入類型:
email類型
url類型
number類型提供選擇數(shù)字的功能,其中min屬性設(shè)定最小值,max屬性設(shè)定最大值,value屬性設(shè)置當(dāng)前值,step屬性設(shè)定每次增長(zhǎng)值。
range類型,表示限制數(shù)字輸入的范圍域
日期和時(shí)間類型:date,month,week,time,datetime,datetime-local
search類型
tel類型
color類型
HTML5新增表單元素
datalist 規(guī)定輸入域的選項(xiàng)列表
keygen提供一種可靠方法來驗(yàn)證用戶
output用于不同類型的輸出
還有更多細(xì)節(jié)內(nèi)容不列在這里啦。請(qǐng)看這篇博客
2.input和textarea的區(qū)別?
是單行文本框。
3.用一個(gè)div模擬textarea的實(shí)現(xiàn)?
首先我們需要知道div是高度自適應(yīng)的,高度會(huì)隨著內(nèi)容的增加而增加。而textarea有著固定的大小,高度超過規(guī)定高度就會(huì)出現(xiàn)滾動(dòng)條。
div有一個(gè)屬性叫做contenteditable,設(shè)置contenteditable屬性為true就可以實(shí)現(xiàn),div內(nèi)容可編輯。
實(shí)現(xiàn)了內(nèi)容可編輯以后,在css中設(shè)置好規(guī)定的高度,設(shè)置overflow-y屬性為auto,即可實(shí)現(xiàn)滾動(dòng)條。
4.移動(dòng)設(shè)備忽略將頁面中的數(shù)字識(shí)別為電話號(hào)碼的方法?
移動(dòng)設(shè)備中經(jīng)常會(huì)出現(xiàn)將一串?dāng)?shù)字識(shí)別為電話的情況,數(shù)字的顏色和樣式都會(huì)變化,點(diǎn)擊可以直接撥打。
添加如下代碼可以關(guān)閉識(shí)別。
5.
問題:
會(huì)影響頁面的并行加載
阻塞onload
可以使用js動(dòng)態(tài)地為iframe的src加載頁面內(nèi)容
6.load事件和DomContentLoaded事件
DomContentLoaded事件在DOM元素加載完畢時(shí)觸發(fā),也就是HTML文檔被加載和解析完成時(shí)。
load事件是在頁面上所有資源(包括圖片、視頻、音頻)全部加載完時(shí)觸發(fā)。
詳情請(qǐng)看這篇文章,寫的非常清晰。
CSS1.左右布局:左邊定寬、右邊自適應(yīng),不少于3種方法
方法一:左邊模塊設(shè)置左浮動(dòng),右邊模塊寬度設(shè)置100%
方法二:父容器設(shè)置display:flex;right部分設(shè)置flex:1。display:flex設(shè)置為彈性盒子,其子元素可以設(shè)置flex的數(shù)值來控制其所占空間的比例。
方法三:使用負(fù)margin。設(shè)置左部分和右部分左浮動(dòng),并為right部分設(shè)置寬度100%。設(shè)置左部分左外邊距為負(fù)100%。為了避免右部分的內(nèi)容被覆蓋,再為右部分設(shè)置添加左邊距(左部分的寬度)。
2.CSS3有哪些新特性?
CSS3的選擇器
E:last-child / E :nth-child(n) / E : nth-last-child(n) 倒數(shù)第n個(gè)元素
@Font-face特性用來加載字體樣式,可以加載服務(wù)器端的字體,顯示到客戶端,即使客戶端并沒有安裝該字體
圓角:border-radius
彈性盒子模式display:flex。 等等屬性
3.BFC與IFC
首先解釋FC(Formatting Contexts),這是CSS規(guī)范中的一個(gè)概念。它指頁面中的一塊渲染區(qū)域,有自己的渲染規(guī)則,規(guī)定了子元素如何定位,以及和其他元素間的相互作用。
BFC(Block Formatting Contexts),塊級(jí)格式化上下文。BFC就是頁面上一塊隔離的渲染區(qū)域,容器內(nèi)的子元素不會(huì)影響外界元素的布局。
IFC(Inline Formatting Contexts),內(nèi)聯(lián)格式化上下文。IFC的line box高度由其包含的行內(nèi)元素最高的實(shí)際高度計(jì)算而來。IFC可以理解為一種盒子從左到右的水平排列方式。
4.對(duì)柵格的理解
柵格布局由三個(gè)部分組成——容器(container)、行(row)、列(column)也就是柵。
不同的列之間有刪間距。
柵格是可以嵌套的。列也可以換行。
5.水平居中有哪些實(shí)現(xiàn)方式?
把行內(nèi)元素包裹在一個(gè)屬性display:block的元素中,并且把父層元素添加屬性:text-align:center;
塊狀元素解決:添加margin : 10px auto;
多個(gè)塊狀元素解決方案:首先將元素的display屬性設(shè)置為inline。然后再設(shè)置父元素text-align:center。
flexbox布局實(shí)現(xiàn)多個(gè)塊狀元素居中:把待居中元素的父元素添加屬性display:flex和justify-content:center即可
6.1像素邊框問題
border-image圖片實(shí)現(xiàn)
background-image漸變實(shí)現(xiàn)
box-shadow實(shí)現(xiàn)
7.flex布局
css3 flex布局詳解
8.盒子模型
盒子模型有兩種標(biāo)準(zhǔn),一種是w3c標(biāo)準(zhǔn),一種是ie標(biāo)準(zhǔn)
基本組成是一樣的,從內(nèi)往外分別是content區(qū)域、padding、border、margin
w3c的盒子寬度和高度實(shí)際上就是 content部分的寬度和高度。
ie盒子模型的高度和寬度是content+padding+border的值,這個(gè)也比較符合我們的理解。
9.實(shí)現(xiàn)一個(gè)三欄布局,兩邊定寬,中間自適應(yīng)
常見的實(shí)現(xiàn)方法有圣杯布局、雙飛翼布局、以及利用display:flex實(shí)現(xiàn)。
實(shí)現(xiàn)細(xì)節(jié)請(qǐng)參考這篇博客
JavaScript1.圖片懶加載
圖片懶加載的原理是頁面加載時(shí)不一下加載全部的圖片,只加載用戶可見區(qū)域內(nèi)的圖片,然后根據(jù)用戶滾動(dòng)到頁面的位置,再生成相應(yīng)的img標(biāo)簽,顯示圖片。
2.實(shí)現(xiàn)頁面加載進(jìn)度條
我們可以將一整個(gè)頁面大致分為4,5個(gè)區(qū)域。
然后在頁面的頂端設(shè)置一個(gè)div用來顯示進(jìn)度條。
每到達(dá)指定的節(jié)點(diǎn)就用jquery實(shí)現(xiàn)進(jìn)度條動(dòng)畫。
最后加載完成隱藏進(jìn)度條即可。
3.eval()函數(shù)
作用:eval函數(shù)會(huì)將傳入的參數(shù)當(dāng)作實(shí)際的javascript語句來執(zhí)行,然后把執(zhí)行結(jié)果插入到eval()函數(shù)所在的位置。
但是eval函數(shù)中的任何變量或函數(shù)都不會(huì)被提升,因?yàn)樵陬A(yù)解析的時(shí)候,這些生命都還只是字符串。
eval函數(shù)可以被用來解析json字符串,將其轉(zhuǎn)換為json對(duì)象。
但是由于安全考慮,最好不要主動(dòng)使用eval函數(shù)。
4.new操作符調(diào)用構(gòu)造函數(shù)的執(zhí)行過程
首先創(chuàng)建一個(gè)新對(duì)象
將構(gòu)造函數(shù)的作用域賦給新對(duì)象(因此this指向了這個(gè)對(duì)象)
執(zhí)行在構(gòu)造函數(shù)中的代碼,為新對(duì)象添加相應(yīng)屬性
返回新對(duì)象
5.Promise對(duì)象
Promise對(duì)象用于表示一個(gè)異步操作的最終狀態(tài)(完成或失敗),以及其返回的值。
關(guān)于Promise的詳細(xì)解析,請(qǐng)看這篇文章
HTTPsession和cookie的區(qū)別
Session是在服務(wù)端保存的一個(gè)數(shù)據(jù)結(jié)構(gòu),用來跟蹤用戶的狀態(tài),這個(gè)數(shù)據(jù)可以保存在集群、數(shù)據(jù)庫、文件中;
Cookie是客戶端保存用戶信息的一種機(jī)制,用來記錄用戶的一些信息,也是實(shí)現(xiàn)Session的一種方式。
session的運(yùn)行依賴于session id 而session id是存在cookie中的,因此如果瀏覽器禁用了cookie,session也會(huì)被禁用。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/115671.html
摘要:收集的一些前端面試題從面試題發(fā)現(xiàn)不足,進(jìn)而查漏補(bǔ)缺,比通過面試更難得及各大互聯(lián)網(wǎng)公司前端筆試面試題篇及各大互聯(lián)網(wǎng)公司前端筆試面試題篇面試題個(gè)和個(gè)經(jīng)典面試題前端開發(fā)面試題如何面試前端工程師很重要個(gè)變態(tài)題解析如何通過餓了么面試輕 收集的一些前端面試題 從面試題發(fā)現(xiàn)不足,進(jìn)而查漏補(bǔ)缺,比通過面試更難得 1 BAT及各大互聯(lián)網(wǎng)公司2014前端筆試面試題--Html,Css篇 2 BAT...
摘要:收集的一些前端面試題從面試題發(fā)現(xiàn)不足,進(jìn)而查漏補(bǔ)缺,比通過面試更難得及各大互聯(lián)網(wǎng)公司前端筆試面試題篇及各大互聯(lián)網(wǎng)公司前端筆試面試題篇面試題個(gè)和個(gè)經(jīng)典面試題前端開發(fā)面試題如何面試前端工程師很重要個(gè)變態(tài)題解析如何通過餓了么面試輕 收集的一些前端面試題 從面試題發(fā)現(xiàn)不足,進(jìn)而查漏補(bǔ)缺,比通過面試更難得 1 BAT及各大互聯(lián)網(wǎng)公司2014前端筆試面試題--Html,Css篇 2 BAT...
摘要:字囊括上百個(gè)前端面試題的項(xiàng)目開源了這個(gè)項(xiàng)目是什么項(xiàng)目?jī)?nèi)容這個(gè)項(xiàng)目目前在上剛剛開源主要內(nèi)容如下前端面試題主要整理了高頻且有一定難度的前端面試題對(duì)這些面試題進(jìn)行解讀前端原理詳解針對(duì)一些有一定難度面試題涉及的知識(shí)點(diǎn)進(jìn)行詳解比如涉及的編譯原理響應(yīng)式 20W字囊括上百個(gè)前端面試題的項(xiàng)目開源了 這個(gè)項(xiàng)目是什么? 項(xiàng)目?jī)?nèi)容 這個(gè)項(xiàng)目目前在GitHub上剛剛開源,主要內(nèi)容如下: 前端面試題: 主要整...
摘要:整理最近的一些面試題請(qǐng)問有哪些數(shù)據(jù)數(shù)據(jù)類型,并畫出內(nèi)存圖有種簡(jiǎn)單的數(shù)據(jù)類型也稱為基本數(shù)據(jù)類型復(fù)雜的數(shù)據(jù)類型即引用數(shù)據(jù)類型包含對(duì)象,對(duì)象和等舉個(gè)例子引用類型數(shù)據(jù)在棧內(nèi)存中保存的實(shí)際上是對(duì)象在堆內(nèi)存中的引用地址。實(shí)際上改變的是堆內(nèi)存對(duì)象。 我們?cè)趈s的學(xué)習(xí)中,往往很多東西看過之后,一段時(shí)間不用,就忘記了。或者當(dāng)時(shí)就沒有深入的理解,能促使我們不斷深入學(xué)習(xí)的動(dòng)力最好的辦法往往參加些面試,能找到...
閱讀 1897·2021-11-22 15:25
閱讀 1258·2021-11-19 09:40
閱讀 1863·2021-09-27 13:57
閱讀 994·2021-09-22 15:10
閱讀 976·2021-08-16 11:01
閱讀 2975·2021-07-23 17:51
閱讀 773·2019-08-30 15:55
閱讀 825·2019-08-30 13:58