好程序员web前端分享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、<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、使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。