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。