好程式設計師web前端學習路線分享前端基礎面試題

好程式設計師web 前端學習路線分享前端基礎面試題，希望對大家有所幫助。

1 、 HTML 語義化的理解？

　　 答案：HTML 語義化就是讓頁面的內容結構化，便於對瀏覽器、搜尋引擎解析；在沒有樣式 CSS 的情況下也以一種文件格式顯示，並且是容易閱讀的；搜尋引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重，利於 SEO ；使閱讀原始碼的人對網站更容易將網站分塊，便於閱讀維護理解。

2 、 父元素透明，但是又不影響子元素的透明度怎麼實現？

　　 答案：方法一：用rgba

　 方法二：再加上一層與父元素同級的div 裝載子元素，定位到子元素原來的位置

3 、 對web 標準以及 w3c 的理解與認識？

　　 答案：web 標準就是將頁面的結構、表現和行為各自獨立實現， w3c 對標註提出了規範化的要求

　　 對結構的要求：（標籤規範可以提高搜尋引擎對頁面的抓取效率，對SEO 很有幫助）

　　 標籤字母要小寫；標籤要閉合；標籤不允許隨意巢狀

　　 對css 和 js 的要求：

　　 儘量使用外聯css 樣式表和 js 指令碼，使結構、表現、行為相分離，符合規範，同時提高頁面渲染速度，提高使用者體驗；

　　 樣式儘量少用行間樣式表，使結構與表現分離，標籤的id 和 class 命名要做到見文知義，標籤越少，載入越快，使用者體驗更高，程式碼維護更簡單，便於改版；

　　 不需要變動頁面內容，便可提供列印版本而不需要複製內容，提高網站易用性

4 、 display none visibility hidden 區別？

　　 答案：display:none 是徹底消失，不在文件流中佔位，瀏覽器也不會解析該元素； visibility:hidden 是視覺上消失了，可以理解為透明度為 0 的效果，在文件流中佔位，瀏覽器會解析該元素；

　　 使用visibility:hidden 比 display:none 效能上要好， display:none 切換顯示時 visibility ，頁面產生迴流（當頁面中的一部分元素需要改變規模尺寸、佈局、顯示隱藏等，頁面重新構建，此時就是迴流。所有頁面第一次載入時需要產生一次迴流），而 visibility 切換是否顯示時則不會引起迴流。

5 、 Px 、 em 、 rem 的區別

　　 答案：相同點：px 、 em 和 rem 都是長度單位；

　　 異同點：px 的值是固定的，指定是多少就是多少，計算比較容易。 em 得值不是固定的，並且 em 會繼承父級元素的字型大小。 Rem 是根據跟標籤 HTML 的字型大小計算的

　　 瀏覽器的預設字型高都是16px 。所以未經調整的瀏覽器都符合 : 1em=1rem=16p

　　 那麼12px=0.75em=0.75rem, 10px=0.625em=0.625rem 。