2020前端最新面試題

2020這個開頭太難了,因為疫情的原因公司解散了,我不得不重新找工作,找了兩周多吧,終于找到自己比較滿意的工作了,現(xiàn)在總結一下我面試時遇到的一些問題

一、css與html部分

1.css的基本語句構成
a.(若干條)樣式
b.樣式的屬性名
c.樣式的屬性值
css的好處
a. css將html格式與內容分離,有利于對內容進行統(tǒng)一的設置和修改
b.css樣式嫌貴html格式化標記的功能更加豐富和強大
c. 可以說css對于界面美化起到了很大作用

2.xhtml和html的區(qū)別
xhtml元素必須被正確的嵌套,必須被關閉,標簽名必須用小寫,xhtml文檔必須要有根元素

3.Doctype的嚴格模式和混雜模式,如何觸發(fā)

4.行內元素,塊元素,盒模型
行內元素:span、img、a、label、code、input、abbr、em、b、big、cite、i、q、textarea、select、small、sub、sup,strong、
塊元素:div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr
盒模型:content+padding+border+margin(如果畫出來會更好)

5.css引入方式有哪些?link和@import的區(qū)別
方式:a.行內式(寫在dom元素上)
b.嵌入式(同一個頁面有一個style標簽包裹)
c.外聯(lián)樣式(link)
d.導入式(@impor)
區(qū)別:link是在html頁面寫的,導入式是使用css腳本寫的,在頁面加載時,link是 先加載好了css文檔再顯示html頁面;而導入式是先加載html顯示出來后,再加載
css腳本的效果,所以推薦使用link,不推薦使用

6.css的選擇符?哪些屬性可以繼承,優(yōu)先級
選擇符:1.id選擇 器,2.類名選擇器,3.標簽選擇器,4.相鄰選擇器,5.偽類選擇器,6.父子選擇器(ul>li),7.后代選擇器(li a)8.通配符

繼承屬性:font-size;font-family,color,text-indent 等字體樣式

優(yōu)先級:!important > 內聯(lián) > id > 偽類>class>標簽選擇器

7.前端頁面的構成,作用
html:結構層,超文本標記語言,由html或xhtml之類的標記語言負責創(chuàng)建標簽,也就是出現(xiàn)在尖括號里面的單詞,對網頁內容的語義和含義做了描述,但這些標簽不包含任何關于如何顯示有關內容的信息
css:表現(xiàn)層,層疊樣式表,由css負責創(chuàng)建“如何顯示有關內容”
js:行為,客戶端腳本語言,內容是對應該如何應多事情做出反應

8.ie6中bug的解決方法
a.png圖片的問題,ie6以下版本不支持png圖片的格式
b.ie6的雙倍邊距bug,浮動后本來外邊距是10px,但ie6為20px,解決方法是加上display:inline
(ie6這個是真的沒有做過,所以在網上找了兩個典型的)

9.標簽上的title和alt屬性的作用
a.title是對圖片的描述與進一步說明
b.alt是當圖片不在時替代文字

二、h5

1.新的h5文檔類型和字符集
<!doctype html> <meta charset="utf-8">

2.嵌入音頻
<audio> <source src="音頻路徑"></source></audio>

3.嵌入視頻
<video><source src="視頻路徑"></source></video>

4.媒體標簽
<marquee/> 跑馬燈效果

5.h5中canvas元素的作用
canvas用于在網頁上繪制圖形,可以直接在html上進行圖形操作

6.h5的存儲類型
localstorage:適用于長期存放
sessionstorage:短期存放

7.h5新增的表單元素
<datalist></datalist>
<keygen></keygen>
<output></output>

8.h5廢棄標簽
big basefont center

9.h5新增api
canvas svg

10.h5應用程序緩存和瀏覽器緩存
H5引入了應用程序緩存,意味著WEB應用可進行緩存,可在沒有因特網時進行訪問
應用程序緩存的優(yōu)勢:
離線緩存:用戶可在離線時使用它們
速度:加載速度更快
減少服務器負載:瀏覽器只從服務器下載更新的或者更改過的資源
實現(xiàn)借助manifest文件

--------------------新增--------------
11.常見的布局,響應式單位
https://blog.csdn.net/zhang6223284/article/details/81909600?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1
這位博主講的超級詳細

12.flex布局的屬性
ustify-content:flex-start | flex-end | center | space-between | space-around;
flex-start(默認值):左對齊
flex-end:右對齊
center: 居中
space-between:兩端對齊,子元素間隔相等。
space-around:子元素兩側的間隔相等。

三、原生js

1.數(shù)據類型
布爾,number,string,null,undefined,object

2.判斷不同的數(shù)據類型

3.undefind和null區(qū)別
null表示"沒有對象",即該處不應該有值
(1) 作為函數(shù)的參數(shù),表示該函數(shù)的參數(shù)不是對象。

(2) 作為對象原型鏈的終點。

undefined表示"缺少值",就是此處應該有一個值,但是還沒有定義
(1)變量被聲明了,但沒有賦值時,就等于undefined。

(2) 調用函數(shù)時,應該提供的參數(shù)沒有提供,該參數(shù)等于undefined。

(3)對象沒有賦值的屬性,該屬性的值為undefined。

(4)函數(shù)沒有返回值時,默認返回undefined。
4.閉包,原型,原型鏈

5.js數(shù)組方法
forEach map 循環(huán),sort排序,reverse 倒序,push添加對象,concat連接兩個數(shù)組,splice,pop等等
6.js數(shù)組去重

7.es6新特性
let聲明一個變量,const聲明一個常量,作用于局部,
模板字符串
解構賦值
展開運算符
箭頭函數(shù)
8.兩個字符串,查重

9.通過遞歸或條件判斷寫一個函數(shù)重復輸出一個字符串

10.'=='和'==='的區(qū)別
==:值相等,'2'==2
===:值相等,類型相等 '2'==='2',2===2

四、vue

1.vue的生命周期
beforecreate create beforeMount Mount beforeUpdate Update beforeDestoryed Destoryed
我在b站看的黑馬程序員的課,講的很清楚

image.png

image.png

2.vue是怎么實現(xiàn)數(shù)據雙向綁定的
其實這個就是問的mvvm模式,還是在b站看的,如下圖

image.png

3. v-if和 v-show
v-if是操作dom的刪除,創(chuàng)建
v-show是通過display:none控制元素的顯示隱藏

4.vuex
vuex這個呢,換個思路就很容易理解了
vuex 主要就是作為一個倉庫存儲數(shù)據的,當一些數(shù)據發(fā)生變化的時候可以做到頁面的及時更新,但是vuex刷新頁面之后數(shù)據就沒有了,適用于商城購物車頁面
vuex里面的有state就相當于普通vue頁面的data,就是定義一個初始值
mutation:就相當于methods,里面寫方法
取值的時候用getters

5.promise,async,await

6.組件傳值

7.路由傳值

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 一、理論基礎知識部分 1.1、講講輸入完網址按下回車,到看到網頁這個過程中發(fā)生了什么 a. 域名解析 b. 發(fā)起T...
    我家媳婦蠢蠢噠閱讀 3,237評論 2 106
  • ?前端面試題匯總 一、HTML和CSS 21 你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什么? ...
    Simon_s閱讀 2,349評論 0 8
  • 一:在制作一個Web應用或Web站點的過程中,你是如何考慮他的UI、安全性、高性能、SEO、可維護性以及技術因素的...
    Arno_z閱讀 1,353評論 0 1
  • HTML、CSS部分 要點:對Web標準的理解、瀏覽器差異、CSS基本功:布局、盒子模型、選擇器優(yōu)先級及使用、HT...
    王鈺峰閱讀 238評論 0 0
  • 1.XHTML和HTML有什么區(qū)別 HTML是一種基本的WEB網頁設計語言,XHTML是一個基于XML的置標語言最...
    耦耦閱讀 590評論 0 6

友情鏈接更多精彩內容