Web前端面试题分享

Web前端面试题分享

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、标签上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。