2019HTML5前端全新面試題分享

　一、HTML語義化的理解?

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

　　二、父元素透明，可是又不影響子元素的透明度怎麼實現?

　　答案：方法一：用rgba

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

　　三、對web標準以及w3c的理解與認識?

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

　　對結構的要求：(標籤規範能夠提升搜索引擎對頁面的抓取效率，對SEO頗有幫助)

　　標籤字母要小寫;標籤要閉合;標籤不容許隨意嵌套

　　對css和js的要求：

　　儘可能使用外聯css樣式表和js腳本，使結構、表現、行爲相分離，符合規範，同時提升頁面渲染速度，提升用戶體驗;

　　樣式儘可能少用行間樣式表，使結構與表現分離，標籤的id和class命名要作到見文知義，標籤越少，加載越快，用戶體驗更高，代碼維護更簡單，便於改版;

　　不須要變更頁面內容，即可提供打印版本而不須要複製內容，提升網站易用性

　　四、display none visibility hidden區別?

　　答案：display:none是完全消失，不在文檔流中佔位，瀏覽器也不會解析該元素;visibility:hidden是視覺上消失了，能夠理解爲透明度爲0的效果，在文檔流中佔位，瀏覽器會解析該元素;

　　使用visibility:hidden比display:none性能上要好，display:none切換顯示時visibility，頁面產生迴流(當頁面中的一部分元素須要改變規模尺寸、佈局、顯示隱藏等，頁面從新構建，此時就是迴流。全部頁面第一次加載時須要產生一次迴流)，而visibility切換是否顯示時則不會引發迴流。

　　五、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。