更多課程 選擇中心

Web培訓
美國上市教育機構

400-111-8989

Web培訓

2020年Web前端面試常見筆試題匯總

  • 發布:Web前端培訓
  • 來源:web前端面試
  • 時間:2020-05-25 17:42

今天小編要跟大家分享的文章是關于2020年Web前端面試常見筆試題匯總,準備參加Web前端面試的小伙伴們來和小編一起看一看本篇文章,希望能夠對大家有所幫助,幫助大家面試成功。

2020年Web前端面試常見筆試題匯總

1、html5為什么只需要寫<!doctype html>?

答:html5不是基于sgml(標準通用標記語言),不需要對dtd文件進行引用,但是需要doctype來規范瀏覽器的行為,

否則瀏覽器將開啟怪異模式,而html4.01基于sgml,需要引入dtd,才能告知瀏覽器文檔使用的文檔類型

2、行內元素有哪些?塊級元素有哪些?空(void)元素有哪些?

行內元素有:a b span img input select strong(強調的語氣)

塊級元素有:div ul ol li dl dt dd h1 h2 h3 h4…p

知名的空元素:

<br> <hr> <img> <input> <link> <meta>

鮮為人知的是:

<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

3、頁面導入樣式時,使用link和@import有什么區別?

兩者都是外部引用CSS的方式,但是存在一定的區別:

區別1:link是XHTML標簽,除了加載CSS外,還可以定義RSS等其他事務;@import屬于CSS范疇,只能加載CSS。

區別2:link引用CSS時,在頁面載入時同時加載;@import需要頁面網頁完全載入以后加載。

區別3:link是XHTML標簽,無兼容問題;@import是在CSS2.1提出的,低版本的瀏覽器不支持。

區別4:link支持使用Javascript控制DOM去改變樣式;而@import不支持。

補充:@import最優寫法

@import的寫法一般有下列幾種:

@import‘style.css’//Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不識別

@import“style.css”//Windows IE4/ NS4, Macintosh IE4/NS4不識別

@import url(style.css) //Windows NS4, Macintosh NS4不識別

@import url(‘style.css’) //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不識別

@import url(“style.css”) //Windows NS4, Macintosh NS4不識別

由上分析知道,@import url(style.css)和@import url(“style.css”)是最優的選擇,兼容的瀏覽器最多。

從字節優化的角度來看@import url(style.css)最值得推薦。

4、常見的瀏覽器內核有哪些?

使用Trident內核的瀏覽器:IE、Maxthon、TT、The World等;

使用Gecko內核的瀏覽器:Netcape6及以上版本、FireFox、MozillaSuite/SeaMonkey;

使用Presto內核的瀏覽器:Opera7及以上版本;

使用Webkit內核的瀏覽器:Safari、Chrome。

5、html5有哪些新特性?移除了哪些元素?如何處理HTML5新標簽的瀏覽器兼容性問題?如何區分html和html5?

新增的元素有繪畫canvas,用于媒介回放的video和audio元素,本地離線存儲localStorage長期存儲數據,瀏覽器關閉后數據不丟失,而sessionStorage的數據在瀏覽器關閉后自動刪除,此外,還新增了以下的幾大類元素。

內容元素,article、footer、header、nav、section。

表單控件,calendar、date、time、email、url、search。

控件元素,Webworker, Websockt, Geolocation。

移出的元素有下列這些:

顯現層元素:basefont,big,center,font, s,strike,tt,u。

性能較差元素:frame,frameset,noframes。

如何處理HTML5新標簽的瀏覽器兼容問題?如何區分HTML和HTML5?

處理兼容問題有兩種方式:

1.IE8/IE7/IE6支持通過document.方法產生的標簽,利用這一特性讓這些瀏覽器支持HTML5新標簽。

2.使用是html5shim框架

另外,DOCTYPE聲明的方式是區分HTML和HTML5標志的一個重要因素,此外,還可以根據新增的結構、功能元素來加以區分。

6、iframe有哪些優缺點?

優點:

1.用來實現長連接,在Websocket不可用的時候作為一種替代,最開始由google發明。Comet:基于HTTP長連接的”服務器推”技術

2.跨域通信。JavaScript跨域總結與解決辦法 ,類似的還有瀏覽器多頁面通信,比如音樂播放器,用戶如果打開了多個tab頁,應該只有一個在播放。

3.歷史記錄管理,解決ajax化網站響應瀏覽器前進后退按鈕的方案,在html5的history api不可用時作為一種替代。

4.純前端的utf8和gbk編碼互轉。比如在utf8頁面需要生成一個gbk的encodeURIComponent字符串,可以通過頁面加載一個gbk的iframe,然后主頁面與子頁面通信的方式實現轉換,這樣就不用在頁面上插入一個非常巨大的編碼映射表文件了

缺點:

1、在網頁中使用框架結構最大的弊病是搜索引擎的”蜘蛛”程序無法解讀這種頁面。當”蜘蛛”程序遇到由數個框架組成的網頁時,它們只看到框架而 無法找到鏈接,因此它們會以為該網站是個死站點,并且很快轉身離去。對一個網站來說這無異于一場災難。

如果你想銷售產品,你需要客戶;如想得到客戶,你首先要讓人們訪問你的網站,而要做到這一點,你就非求助于搜索引擎不可。你花費了大量的時間、 精力和金錢開設了一家網上商店,卻又故意不讓搜索引擎檢索你,這就好象開家零售商店,卻將窗戶全部漆成黑色,而且還不掛任何招牌一樣。

2、框架結構有時會讓人感到迷惑,特別是在幾個框架中都出現上下、左右滾動條的時候。這些滾動條除了會擠占已經非常有限的頁面空間外,還會分散 訪問者的注意力。訪問者遇到這種網站往往會立刻轉身離開。他們會想,既然你的主頁如此混亂,那么網站的其他部分也許更不值得瀏覽。

3、鏈接導航問題。使用框架結構時,你必須保證正確設置所有的導航鏈接,如不然,會給訪問者帶來很大的麻煩。比如被鏈接的頁面出現在導航框架 內,這種情況下訪問者便被陷住了,因為此時他沒有其他地方可去。

7、label的作用是什么?是怎么使用的?

Label中有兩個屬性是非常有用的,一個是FOR、另外一個就是ACCESSKEY了。

FOR屬性

功能:表示Label標簽要綁定的HTML元素,你點擊這個標簽的時候,所綁定的元素將獲取焦點。

用法:<Label FOR=”InputBox”>姓名</Label><input ID=”InputBox”type=”text”>

ACCESSKEY屬性:

功能:表示訪問Label標簽所綁定的元素的熱鍵,當您按下熱鍵,所綁定的元素將獲取焦點。

用法:<Label FOR=”InputBox”ACCESSKEY=”N”>姓名</Label><input ID=”InputBox”type=”text”>

局限性:accessKey屬性所設置的快捷鍵不能與瀏覽器的快捷鍵沖突,否則將優先激活瀏覽器的快捷鍵。

8、實現不使用border,畫出1px高的線,在不同瀏覽器下的Quirksmode和CSSCompat模式下都能保持一致的效果?

<div style=”height:1px;overflow:hidden;background:red”></div>

9、網頁驗證碼是干嘛的?是為了解決什么安全問題?

網頁驗證碼介紹:”驗證碼”的英文表示為CAPTCHA(Completely Automated Public Turing test to tell Computers and Humans Apart),翻譯過來就是”全自動區分計算機和人類的圖靈測試”,顧名思義,它是用來區分計算機和人類的。在CAPTCHA測試中,作為服務器的計算機會自動生成一個問題由用戶來解答。這個問題可以由計算機生成并評判,但是必須只有人類才能解答。由于計算機無法解答CAPTCHA的問題,所以回答出問題的用戶就可以被認為是人類。CAPTCHA是由計算機來考人類,而不是標準圖靈測試中那樣由人類來考計算機,因此人們有時稱CAPTCHA是一種反向圖靈測試。

驗證碼的原理:服務器端隨機生成驗證碼字符串,保存在內存中,并寫入圖片,發送給瀏覽器端顯示,瀏覽器端輸入驗證碼圖片上字符,然后提交服務器端,提交的字符和服務器端保存的該字符比較是否一致,一致就繼續,否則返回提示。攻擊者編寫的robot程序,很難識別驗證碼字符,順利的完成自動注冊,登錄;而用戶可以識別填寫,所以這就實現了阻擋攻擊的作用。而圖片的字符識別,就是看圖片上的干擾強度了。就實際的效果來說,驗證碼只是增加攻擊者的難度,而不可能完全的防止。

10、介紹一下標準的css的盒子模型?與低版本IE的盒子模型有什么不同?

盒子模型有兩種,分別是ie盒子模型和標準w3c盒子模型

W3C盒子模型的范圍包括margin、border、padding、content,并且content部分不包含其他部分

IE盒子模型的范圍也包括margin、border、padding、content,和標準W3C盒子模型不同的是:IE盒子模型的content部分包含了border和pading

11、如何居中div,如何居中一個浮動元素?如何讓絕對定位的div居中?

a.margin:xpx auto;

b.確定容器的寬高,這里寬度是必須的,高度可以不設,設置外層的上外邊距和左外邊距分別是寬高的一半。

實現居中關鍵在于margin設置與position:relative.

.div {

width:500px ;

height:300px;

margin: -150px 0 0 -250px;

position:relative;

left:50%;

top:50%;

}

c.position:absolute;

top: 50%;

left: 50%;只能把div定位在以紅色圈為起點的位置,加上margin:-100px 0px 0px -100

12、display有哪些值?說明他們的作用?

block :塊對象的默認值。用該值為對象之后添加新行

none :隱藏對象。與visibility屬性的hidden值不同,其不為被隱藏的對象保留其物理空間

inline :內聯對象的默認值。用該值將從對象中刪除行

compact :分配對象為塊對象或基于內容之上的內聯對象

marker :指定內容在容器對象之前或之后。要使用此參數,對象必須和:after及:before偽元素一起使用

inline-table :將表格顯示為無前后換行的內聯對象或內聯容器

list-item :將塊對象指定為列表項目。并可以添加可選項目標志

run-in :分配對象為塊對象或基于內容之上的內聯對象

table :將對象作為塊元素級的表格顯示

13、position的值relative和absolute的定位原點是什么?

Absolute,CSS中的寫法是:position:absolute;他的意思是絕對定位,他是參照瀏覽器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進行定位,在沒有設定TRBL,默認依據父級的做標原始點為原始點。如果設定TRBL并且父級沒有設定position屬性,那么當前的absolute則以瀏覽器左上角為原始點進行定位,位置將由TRBL決定。

Relative,CSS中的寫法是:position:relative;他的意思是絕對相對定位,他是參照父級的原始點為原始點,無父級則以BODY的原始點為原始點,配合TRBL進行定位,當父級內有padding等CSS屬性時,當前級的原始點則參照父級內容區的原始點進行定位。

14、display設置為inline-block時,li與li之間有看不見的空白間隔是什么原因引起的?有什么解決辦法?

行框的排列會受到中間空白(回車空格等等)的影響,這些空白也會被應用樣式,占據空間,所以會有間隔

解決:設置ul的font-size為0,缺陷是必須重新在li中去設置字體大小

15、請解釋下為什么會出現浮動和什么時候需要清除浮動?清除浮動的方式?

a.添加新的元素 、應用clear:both;

b.父級定義overflow: auto(注意:是父級div也就是這里的div.outer) 一個對seo比較友好,另個hidden對seo不是太友好

在IE6中還需要觸發hasLayout,例如zoom:1;

c.據說是最高大上的方法:after

方法:(注意:作用于浮動元素的父親)IE6-7不支持:after,

使用zoom:1觸發hasLayout

{zoom:1;} /*==for IE6/7 Maxthon2==*/

:after {clear:both;content:’.’;display:block;width: 0;height: 0;visibility:hidden;}

d.使用br標簽和其自身的html屬性,<br clear=”all”/> clear=”all | left | right | one” 屬性

e.父元素也設置浮動

f.父元素設置display:table盒模型屬性已經改變,由此造成的一系列問題,得不償失,不推薦使用

16、在網頁中的應該使用奇數還是偶數的字體?為什么呢?

偶數字號相對更容易和Web設計的其他部分構成比例關系

使用奇數號字體不好的地方是,文本段落無法對齊

17、margin和padding分別適合什么場景使用?

何時應當使用margin:

(1)需要在border外側添加空白時,

(2)空白處不需要有背景(色)時,

(3)上下相連的兩個盒子之間的空白需要相互抵消時,比如15px+20px的margin,將得到20px的空白(注意地方見第三點)。

何時應當使用padding

(1)需要在border內側添加空白時(往往是文字與邊框距離的設置),

(2)空白處需要背景(色)時,

(3)上下相連的兩個盒子之間的空白希望等于兩者之和時,比如15px+20px的padding,將得到35px的空白。

margin使用時應該注意的地方

margin在垂直方向上相鄰的值相同時會發生疊加,水平方向上相鄰的值會相加。margin取負值時,在垂直方向上,兩個元素的邊界仍然會重疊。但是,此時一個為正值,一個為負值,并不是取其中較大的值,而是用正邊界減去負邊界的絕對值,也就是說,把正的邊界值和負的邊界值相加。

18、元素豎向的百分比設定是相對于容器的高度嗎?

答:相對于父容器的寬度

19、什么是響應式設計?響應式設計的基本原理是什么?如何兼容較低版本的IE?

答:一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。

優點:

面對不同分辨率設備靈活性強

能夠快捷解決多設備顯示適應問題

缺點:

兼容各種設備工作量大,效率低下

代碼累贅,會出現隱藏無用的元素,加載時間加長

其實這是一種折中性質的設計解決方案,多方面因素影響而達不到最佳效果

一定程度上改變了網站原有的布局結構,會出現用戶混淆的情況

respond.js和css3-mediaqueries-js

20、設置元素浮動后,該元素的display值是多少?

display:block;

以上就是小編今天為大家分享的關于2020年Web前端面試常見筆試題匯總的文章,希望本篇文章能夠對正在從事Web前端工作的小伙伴們有幫助,想要了解更多Web前端相關知識記得關注達內Web培訓官網,最后祝愿小伙伴們面試成功,成為一名優秀的Web前端工程師

文章來源:原創 馮夢蘭 IT高級程序吸金

【免責聲明:本文圖片及文字信息均由小編轉載自網絡,旨在分享提供閱讀,版權歸原作者所有,如有侵權請聯系我們進行刪除。】

預約申請免費試聽課

填寫下面表單即可預約申請免費試聽!怕錢不夠?可就業掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業?一地學習,可全國推薦就業!

上一篇:入門Web前端要知道的HTML基礎測試題
下一篇:2020年Web前端工程師面試題集錦

2020年Web前端面試題匯總(六)

2020年Web前端面試題匯總(五)

2020年Web前端面試題匯總(四)

2020年Web前端面試題匯總(三)

選擇城市和中心
黑龍江省

吉林省

河北省

貴州省

云南省

廣西省

海南省

欧美在线v中文字幕