分享web前端面試題

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

1. 頁面導入樣式時，使用link和@import有什么區別？

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

差別2：加載順序的差別：當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS會等到頁面全部被下載完再被加載。所以有時候瀏覽@import加載CSS的頁面時開始會沒有樣式（就是閃爍），網速慢的時候還挺明顯。

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

差別4：使用dom(document o bject model文檔對象模型 )控制樣式時的差別：當使用javascript控制dom去改變樣式的時候，只能使用link標簽，因為@import不是dom可以控制的.

1. <img>標簽上title屬性與alt屬性的區別是什么？

答案：  title屬性是鼠標劃上去顯示的內容

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

1. 請寫出至少5個html5新增的標簽，并說明其語義和應用場景

答案：section：定義文檔中的一個章節

nav：定義只包含導航鏈接的章節

header：定義頁面或章節的頭部。它經常包含 logo、頁面標題和導航性的目錄。

footer：定義頁面或章節的尾部。它經常包含版權信息、法律信息鏈接和反饋建議用的地址。

aside：定義和頁面內容關聯度較低的內容——如果被刪除，剩下的內容仍然很合理。

1. HTML與XHTML——二者有什么區別？

答案：

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

2. XHTML 元素必須被關閉。

3. 標簽名必須用小寫字母。

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

5、iframe的優缺點？

答案：優點：

a. 解決加載緩慢的第三方內容如圖標和廣告等的加載問題

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

缺點：

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

c. 頁面會增加服務器的http請求   d. 會產生很多頁面，不容易管理。

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

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

overflow：hidden；transition：all 1000ms ease；

1. 什么是響應式設計？響應式設計的基本原理是什么？如何兼容低版本的IE？

答案：響應式網站設計(Responsive Web design)是一個網站能夠兼容多個終端，而不是為每一個終端做一個特定的版本。

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

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

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

1. ::before 和 :after中雙冒號和單冒號有什么區別？解釋一下這2個偽元素的作用

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

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

:before 和 :after 這兩個偽元素，是在CSS2.1里新出現的。起初，偽元素的前綴使用的是單冒號語法，但隨著Web的進化，在CSS3的規范里，偽元素的語法被修改成使用雙冒號，成為::before ::after

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

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

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

答案：1、用正確的標簽做正確的事情。

2、html語義化讓頁面的內容結構化，結構更清晰，便于對瀏覽器，搜索引擎解析；

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

4、搜索引擎的爬蟲也依賴于HTML標記確定上下文和各個關鍵字的權重，利用SEO;

5、使閱讀源代碼的人對網站更容易將網站分塊，便于閱讀維護理解。

感謝各位的閱讀，以上就是“分享web前端面試題”的內容了，經過本文的學習后，相信大家對分享web前端面試題這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！