写在前面

本小菜鸡开学(其实已经开始了)就要面临找实习的压力了。所以在此开一贴记录一下搜集的前端面试的问题和自己即将被拷问的问题= =。悔不该当初没有好好学习quq！努力！

面试题目总结

HTML

1.html5新增了哪些内容或api，使用过哪些？

• HTML5新增input输入类型：

  • email类型
  • url类型
  • number类型提供选择数字的功能，其中min属性设定最小值，max属性设定最大值，value属性设置当前值，step属性设定每次增长值。
  • range类型，表示限制数字输入的范围域
  • 日期和时间类型:date,month,week,time,datetime,datetime-local
  • search类型
  • tel类型
  • color类型

• HTML5新增表单元素

  • datalist 规定输入域的选项列表
  • keygen提供一种可靠方法来验证用户
  • output用于不同类型的输出
• 还有更多细节内容不列在这里啦。请看这篇博客

2.input和textarea的区别?

• <input type= "textarea">是单行文本框。<textarea>是多行文本框。

3.用一个div模拟textarea的实现？

• 首先我们需要知道div是高度自适应的，高度会随着内容的增加而增加。而textarea有着固定的大小，高度超过规定高度就会出现滚动条。
• div有一个属性叫做contenteditable，设置contenteditable属性为true就可以实现，div内容可编辑。
• 实现了内容可编辑以后，在css中设置好规定的高度，设置overflow－y属性为auto,即可实现滚动条。

4.移动设备忽略将页面中的数字识别为电话号码的方法?

• 移动设备中经常会出现将一串数字识别为电话的情况，数字的颜色和样式都会变化，点击可以直接拨打。
• 添加如下代码可以关闭识别。

   <meta name = "format-detection" content = "telephone=no">  

5.<iframe>标签

• <iframe>标签会创造一个包含另外一个文档的内联框架。
• <iframe>标签很多用在页面广告。

• 问题：

  • 会影响页面的并行加载
  • 阻塞onload
• 可以使用js动态地为iframe的src加载页面内容

6.load事件和DomContentLoaded事件

• DomContentLoaded事件在DOM元素加载完毕时触发，也就是HTML文档被加载和解析完成时。
• load事件是在页面上所有资源(包括图片、视频、音频)全部加载完时触发。
• 详情请看这篇文章,写的非常清晰。

CSS

1.左右布局：左边定宽、右边自适应，不少于3种方法

• 方法一：左边模块设置左浮动，右边模块宽度设置100%
• 方法二：父容器设置display：flex；right部分设置flex：1。display：flex设置为弹性盒子，其子元素可以设置flex的数值来控制其所占空间的比例。
• 方法三：使用负margin。设置左部分和右部分左浮动，并为right部分设置宽度100%。设置左部分左外边距为负100%。为了避免右部分的内容被覆盖，再为右部分设置添加左边距（左部分的宽度）。

2.CSS3有哪些新特性?

• CSS3的选择器

  • E:last-child / E :nth-child(n) / E : nth-last-child(n) 倒数第n个元素
• @Font-face特性用来加载字体样式，可以加载服务器端的字体，显示到客户端，即使客户端并没有安装该字体
• 圆角:border-radius
• 弹性盒子模式display：flex。 等等属性

3.BFC与IFC

• 首先解释FC(Formatting Contexts),这是CSS规范中的一个概念。它指页面中的一块渲染区域，有自己的渲染规则，规定了子元素如何定位，以及和其他元素间的相互作用。
• BFC(Block Formatting Contexts),块级格式化上下文。BFC就是页面上一块隔离的渲染区域，容器内的子元素不会影响外界元素的布局。
• IFC(Inline Formatting Contexts),内联格式化上下文。IFC的line box高度由其包含的行内元素最高的实际高度计算而来。IFC可以理解为一种盒子从左到右的水平排列方式。

4.对栅格的理解

• 栅格布局由三个部分组成——容器(container)、行(row)、列(column)也就是栅。
• 不同的列之间有删间距。

• 栅格是可以嵌套的。列也可以换行。

5.水平居中有哪些实现方式？

• 把行内元素包裹在一个属性display：block的元素中，并且把父层元素添加属性：text-align：center;
• 块状元素解决：添加margin : 10px auto;
• 多个块状元素解决方案：首先将元素的display属性设置为inline。然后再设置父元素text-align：center。
• flexbox布局实现多个块状元素居中:把待居中元素的父元素添加属性display:flex和justify-content:center即可

6.1像素边框问题

• border-image图片实现
• background-image渐变实现
• box-shadow实现

7.flex布局

• css3 flex布局详解

8.盒子模型

• 
• 盒子模型有两种标准，一种是w3c标准，一种是ie标准
• 基本组成是一样的，从内往外分别是content区域、padding、border、margin
• w3c的盒子宽度和高度实际上就是 content部分的宽度和高度。
• ie盒子模型的高度和宽度是content+padding+border的值，这个也比较符合我们的理解。

9.实现一个三栏布局，两边定宽，中间自适应

• 常见的实现方法有圣杯布局、双飞翼布局、以及利用display:flex实现。
• 实现细节请参考这篇博客

JavaScript

1.图片懒加载

• 图片懒加载的原理是页面加载时不一下加载全部的图片，只加载用户可见区域内的图片，然后根据用户滚动到页面的位置，再生成相应的img标签，显示图片。

2.实现页面加载进度条

• 我们可以将一整个页面大致分为4，5个区域。
• 然后在页面的顶端设置一个div用来显示进度条。
• 每到达指定的节点就用jquery实现进度条动画。
• 最后加载完成隐藏进度条即可。

3.eval()函数

• 作用：eval函数会将传入的参数当作实际的javascript语句来执行，然后把执行结果插入到eval()函数所在的位置。
• 但是eval函数中的任何变量或函数都不会被提升，因为在预解析的时候，这些生命都还只是字符串。
• eval函数可以被用来解析json字符串，将其转换为json对象。
• 但是由于安全考虑，最好不要主动使用eval函数。

4.new操作符调用构造函数的执行过程

• 首先创建一个新对象
• 将构造函数的作用域赋给新对象(因此this指向了这个对象)
• 执行在构造函数中的代码，为新对象添加相应属性
• 返回新对象

5.Promise对象

• Promise对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值。
• 关于Promise的详细解析，请看这篇文章

HTTP

1. session和cookie的区别

• Session是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据可以保存在集群、数据库、文件中；
• Cookie是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现Session的一种方式。
• session的运行依赖于session id 而session id是存在cookie中的，因此如果浏览器禁用了cookie，session也会被禁用。