美文网首页前端面试题
2019web前端全新面试题及答案

2019web前端全新面试题及答案

作者: Eric_V | 来源:发表于2019-05-27 18:09 被阅读1980次

      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。

    <meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"  />

      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、使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。

    相关文章

      网友评论

        本文标题:2019web前端全新面试题及答案

        本文链接:https://www.haomeiwen.com/subject/nnhktctx.html