2019HTML5前端全新面试题分享

 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。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 6,598评论 0 8
  • 目录 1. 介绍一下盒子模型 2. box-sizing属性 3. CSS选择器的权重的概念 4. 介绍一下BFC...
    嘻哈圣阅读 5,138评论 0 4
  • 1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素? 行内元素:和有他元素都在一行上,高度、行高及外...
    极乐君阅读 7,237评论 0 20
  • 所有题目答案整理自网络,如有错误,接受指正,拒绝批评! 关于html5 HTML5的十大新特性 语义化标签使得页面...
    黄金原野阅读 5,333评论 0 0

友情链接更多精彩内容