前端面试题（一）

1、HTML5中新增的语义化标签以及表单控件

语义化标签：header、footer、nav、hgroup、section、article、aside、figure、figcaption、time、datalist、details、dialog、address、mark、keygen、progress

表单控件：email邮箱、url网址、submit提交、tel电话、range数值选择器（step，min，max）、number包含数字的输入值、datetime显示完整的日期、datetime-local显示完整的日期不包含时区、time小时分钟、date显示日期、week周、month月、color颜色

2、简述HTML5web worker、web socket ,geo location,local storage适用场景

web worker: 在Javascript单线程执行的基础上，开启一个子线程，进行程序解决，而不影响主线程的执行，当子线程执行完毕之后再回到主线程上，在这个过程中并不影响主线程的执行过程。能加载一个JS进行大量的复杂计算而不挂起主进程，并通过postMessage，onmessage进行通信。
web socket：在做少量需要即时通信的功可以时候，我们首选就是消耗web socket，只要要建立一次连接，传递一次必要的请求头和响应头信息，之后再传递数据的时候就不需要在交换这些信息了。节省了带宽。
geo location： 提供了一个能精确知道浏览器消耗户当前位置的方法。

local storage：客户端存储数据，有时间限制的数据存储。

3、css中position的值有那些？relative和absolute分别是相对于谁进行定位的？

position:fixed;固定定位，相对于浏览器窗口定位

position:absolute;绝对定位，相对于其正常位置进行定位。

position:relative;相对定位，原位置保留

position： static 默认值，没有定位

position：inherit  继续父级的属性

4、css中清楚浮动的方法有那些？

使用overflow属性 overflow：hidden
使用额外属性.clear{clear:both;}
使用伪元素来清除浮动
.clearfix:after{content:"";height:0;line-height:0;display:block;visibility:hidden;clear:both;}
.clearfix{zoom:1;}
使用双伪元素来清除浮动
.clearfix:before,.clearfic:after{content:"";display:block;clear:both;}

clearfix{zoom:1;}

5、介绍一下css中box-sizing属性？

box-sizing属性在FireFox中存在兼容问题，需要兼容-moz- box-sizing
box-sizing：content-box；默认属性值 
// 在CSS中定义的宽度和高度之外绘制元素的内边距和边框
box-sizing：border-box；
// CSS中设定的宽度和高度减去边框和内间距才能得到元素内容所占的实际宽度和高度
box-sizing：inherit；

//继承父元素的box-sizing属性值

6、如何用Flex布局实现垂直和水平同时居中

水平居中：justify-content：center

垂直居中：align-items：center

7、例举js中3中强制类型转换和2种隐士类型转换

Boolean(value)——把给定的值转换成Boolean型；
Number(value)——把给定的值转换成数字（能是整数或者浮点数）；
String(value)——把给定的值转换成字符串。
隐式类型转换
①比方-, , /,和%等算术运算符都会把操作数转换成数字的‘5+6’

②假如字符串和数字相加，JavaScript会自动把数字转换成字符的“ + 5 ”

8、如何阻止冒泡事件

event.stopPropagation()方法
event.preventDefault()方法

return false；

9、获取当前页面所有a标签的href的值所组成的数组

var arrs=[];
var arr=document.querySelectorAll("a");
arr.forEach((item, index) => { 
    arrs.push(item.href)    
})    
console.log(arrs);

10、ES6、ES7中引入了哪些新的内容？

11、前端跨域解决方法

12、前端性能优化方法

请减少HTTP请求基本原理

13、对于前端自动化构建工具有了解吗？简单介绍一下

grunt  // 前端自动化小工具，基于任务的命令行构建工具 
gulp   //gulp是基于Nodejs的自动任务运行器，它能自动化地完成javascript/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。

webpack  //Webpack是一个模块打包的工具，它的作用是把互相依赖的模块处理成静态资源。

14、如果今年打算熟练一项新技术，会是什么？你选择的理由？

vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。

Node.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。