　　好程式設計師 web 前端分享 HTML5 常見面試題集錦五

　　 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 可以控制的 .

　　 2 、 <img> 標籤上 title 屬性與 alt 屬性的區別是什麼？

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

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

　　 3 、請寫出至少 5 個 html5 新增的標籤，並說明其語義和應用場景

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

　　 nav ：定義只包含導航連結的章節

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

　　 footer ：定義頁面或章節的尾部。它經常包含版權資訊、法律資訊連結和反饋建議用的地址。

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

　　 4 、 HTML 與 XHTML ——二者有什麼區別？

　　答案：

　　 1 、 HTML 元素必須被正確地巢狀。

　　 2 、 XHTML 元素必須被關閉。

　　 3 、標籤名必須用小寫字母。

　　 4 、 XHTML 文件必須擁有根元素。

　　 5 、 iframe 的優缺點？

　　答案：優點：

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

　　 b. iframe 無重新整理檔案上傳 c. iframe 跨域通訊

　　缺點：

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

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

　　 6 、全屏滾動的原理是什麼？用到了 CSS 的哪些屬性？

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

　　 overflow ： hidden ； transition ： all 1000ms ease ；

　　 7 、什麼是響應式設計？響應式設計的基本原理是什麼？如何相容低版本的 IE ？

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

　　基本原理是透過媒體查詢檢測不同的裝置螢幕尺寸做處理。

　　頁面頭部必須有meta 宣告的 viewport 。

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

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

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

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

　　 9 、怎麼讓 Chrome 支援小於 12px 的文字？

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

　　 10 、簡述一下你對 HTML 語義化的理解？

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

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

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

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

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

好程式設計師web前端分享HTML5常見面試題集錦五

相關文章