好程式設計師HTML5大前端分享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、使閱讀原始碼的人對網站更容易將網站分塊，便於閱讀維護理解。