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

作者: cheng 发布时间: 2019-11-30 浏览: 1440 次 编辑

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