好程序员HTML5大前端分享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能够控制的.

1. <img>标签上title属性与alt属性的区别是什么？

答案：  title属性是鼠标划上去显示的内容

alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。

1. 请写出至少5个html5新增的标签，并说明其语义和应用场景

答案：section：定义文档中的一个章节

nav：定义只包含导航连接的章节

header：定义页面或章节的头部。它常常包含 logo、页面标题和导航性的目录。

footer：定义页面或章节的尾部。它常常包含版权信息、法律信息连接和反馈建议用的地址。

aside：定义和页面内容关联度较低的内容——若是被删除，剩下的内容仍然很合理。

1. HTML与XHTML——两者有什么区别？

答案：

1. HTML 元素必须被正确地嵌套。
2. XHTML 元素必须被关闭。
3. 标签名必须用小写字母。
4. XHTML 文档必须拥有根元素。

五、iframe的优缺点？

答案：优势：

a. 解决加载缓慢的第三方内容如图标和广告等的加载问题

b. iframe无刷新文件上传   c. iframe跨域通讯

缺点：

a. iframe会阻塞主页面的Onload事件  b. 没法被一些搜索引擎索引到

c. 页面会增长服务器的http请求   d. 会产生不少页面，不容易管理。

 

1. 全屏滚动的原理是什么？用到了CSS的哪些属性？

答案：原理：有点相似于轮播，总体的元素一直排列下去，假设有5个须要展现的全屏页面，那么高度是500%，只是展现100%，剩下的能够经过transform进行y轴定位，也能够经过margin-top实现

overflow：hidden；transition：all 1000ms ease；

1. 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的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" />

1. ::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的做用

答案：单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

::before就是以一个子元素的存在，定义在元素主体内容以前的一个伪元素。并不存在于dom之中，只存在在页面之中。

:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改为使用双冒号，成为::before ::after

1. 怎么让Chrome支持小于12px 的文字？

答案：p{font-size:10px;-webkit-transform:scale(0.8);}//0.8是缩放比例

1. 简述一下你对HTML语义化的理解？

答案：一、用正确的标签作正确的事情。

二、html语义化让页面的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析；

三、即便在没有样式CSS状况下也以一种文档格式显示，而且是容易阅读的；

四、搜索引擎的爬虫也依赖于HTML标记肯定上下文和各个关键字的权重，利用SEO;

五、使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。