分享web前端面試題

這篇文章主要講解了“分享web前端面試題”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“分享web前端面試題”吧！

1. 頁面導(dǎo)入樣式時(shí)，使用link和@import有什么區(qū)別？

答案：差別1：本質(zhì)的差別：link屬于XHTML標(biāo)簽，而@import完全是CSS提供的一種方式。

差別2：加載順序的差別：當(dāng)一個(gè)頁面被加載的時(shí)候（就是被瀏覽者瀏覽的時(shí)候），link引用的CSS會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁面全部被下載完再被加載。所以有時(shí)候?yàn)g覽@import加載CSS的頁面時(shí)開始會(huì)沒有樣式（就是閃爍），網(wǎng)速慢的時(shí)候還挺明顯。

差別3：兼容性的差別：@import是CSS2.1提出的，所以老的瀏覽器不支持，@import只有在IE5以上的才能識(shí)別，而link標(biāo)簽無此問題。

差別4：使用dom(document o bject model文檔對(duì)象模型 )控制樣式時(shí)的差別：當(dāng)使用javascript控制dom去改變樣式的時(shí)候，只能使用link標(biāo)簽，因?yàn)锧import不是dom可以控制的.

1. <img>標(biāo)簽上title屬性與alt屬性的區(qū)別是什么？

答案：  title屬性是鼠標(biāo)劃上去顯示的內(nèi)容

alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。

1. 請(qǐng)寫出至少5個(gè)html5新增的標(biāo)簽，并說明其語義和應(yīng)用場景

答案：section：定義文檔中的一個(gè)章節(jié)

nav：定義只包含導(dǎo)航鏈接的章節(jié)

header：定義頁面或章節(jié)的頭部。它經(jīng)常包含 logo、頁面標(biāo)題和導(dǎo)航性的目錄。

footer：定義頁面或章節(jié)的尾部。它經(jīng)常包含版權(quán)信息、法律信息鏈接和反饋建議用的地址。

aside：定義和頁面內(nèi)容關(guān)聯(lián)度較低的內(nèi)容——如果被刪除，剩下的內(nèi)容仍然很合理。

1. HTML與XHTML——二者有什么區(qū)別？

答案：

1. HTML 元素必須被正確地嵌套。

2. XHTML 元素必須被關(guān)閉。

3. 標(biāo)簽名必須用小寫字母。

4. XHTML 文檔必須擁有根元素。

5、iframe的優(yōu)缺點(diǎn)？

答案：優(yōu)點(diǎn)：

a. 解決加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告等的加載問題

b. iframe無刷新文件上傳   c. iframe跨域通信

缺點(diǎn)：

a. iframe會(huì)阻塞主頁面的Onload事件  b. 無法被一些搜索引擎索引到

c. 頁面會(huì)增加服務(wù)器的http請(qǐng)求   d. 會(huì)產(chǎn)生很多頁面，不容易管理。

1. 全屏滾動(dòng)的原理是什么？用到了CSS的哪些屬性？

答案：原理：有點(diǎn)類似于輪播，整體的元素一直排列下去，假設(shè)有5個(gè)需要展示的全屏頁面，那么高度是500%，只是展示100%，剩下的可以通過transform進(jìn)行y軸定位，也可以通過margin-top實(shí)現(xiàn)

overflow：hidden；transition：all 1000ms ease；

1. 什么是響應(yīng)式設(shè)計(jì)？響應(yīng)式設(shè)計(jì)的基本原理是什么？如何兼容低版本的IE？

答案：響應(yīng)式網(wǎng)站設(shè)計(jì)(Responsive Web design)是一個(gè)網(wǎng)站能夠兼容多個(gè)終端，而不是為每一個(gè)終端做一個(gè)特定的版本。

基本原理是通過媒體查詢檢測(cè)不同的設(shè)備屏幕尺寸做處理。

頁面頭部必須有meta聲明的viewport。

<meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

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

答案：單冒號(hào)(:)用于CSS3偽類，雙冒號(hào)(::)用于CSS3偽元素。

::before就是以一個(gè)子元素的存在，定義在元素主體內(nèi)容之前的一個(gè)偽元素。并不存在于dom之中，只存在在頁面之中。

:before 和 :after 這兩個(gè)偽元素，是在CSS2.1里新出現(xiàn)的。起初，偽元素的前綴使用的是單冒號(hào)語法，但隨著Web的進(jìn)化，在CSS3的規(guī)范里，偽元素的語法被修改成使用雙冒號(hào)，成為::before ::after

1. 怎么讓Chrome支持小于12px 的文字？

答案：p{font-size:10px;-webkit-transform:scale(0.8);}//0.8是縮放比例

1. 簡述一下你對(duì)HTML語義化的理解？

答案：1、用正確的標(biāo)簽做正確的事情。

2、html語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對(duì)瀏覽器，搜索引擎解析；

3、即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的；

4、搜索引擎的爬蟲也依賴于HTML標(biāo)記確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利用SEO;

5、使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。

感謝各位的閱讀，以上就是“分享web前端面試題”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)分享web前端面試題這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！