前端面试题集锦

1、概念基础：

    一、HTML

        HTML（HyperText Markup Language），即超文本标记语言。HTML文本是由 HTML命令组成的描述性文本，HTML 命令能够说明文字、 图形、动画、声音、表格、连接等。 HTML的结构包括头部 (Head)、主体 (Body) 两大部分。头部描述浏览器所需的信息，主体包含所要说明的具体内容。

什么是HTML5？

    html5是最新的html标准，它的主要目标是提供全部内容而不须要任何的像flash、silverlight等的额外插件这些内容来自动画、视频、富GUI等。

    html5是万维网联盟（W3C）和网络超文本应用技术工做组（ＷＨＡＴＷＧ）之间合做输出的。

HTML5新元素标签：<header>、<footer>、<nav>、<article>、<section >、

    ２、CSS

        CSS（Cascading Style Sheets），即层叠样式表。

什么是CSS3？

    CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。之前的规范做为一个模块实在是太庞大并且比较复杂，因此，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超连接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

    三、JS

        JS（JavaScript），即一种基于对象和事件驱动而且具备相对安全性的客户端脚本语言。

经常使用的JS库有：

    JQuery.js、Zepto.js

    四、CSS Sprite CSS雪碧图生成工具

        css精灵，一种网页图片应用处理方式。将全部零星图片整合到一张大图中。

        优势：减小网页的http请求；减小图片的字节；解决图片命名困扰、更换风格方便，维护方便。

        缺点：图片不够宽时容易出现背景断裂；合成图片比较繁琐；改动时，须要改整张合并的图片。

    五、什么是响应式布局

        一个网站可以兼容多个终端，而不是为每一个终端作一个特定的版本。

        推荐框架：Bootstrap

        或者用CSS的媒体查询属性控制某个分辨率下的页面样式：

@media only screen and (min-width: 100px) and (max-width: 300px){
  //当前分辨率下的样式
}

    六、什么是事件流

        从页面接受事件的顺序。

        当一个事件产生时，这个事件的传播过程就是事件流。

    七、浏览器内核

Trident	IE内核
Gecko	Firefox内核
Presto	Opera前内核（已废弃）Opera现已改用Google Chrome的Blink内核
Webkit	Safari内核，Chrome内核原型

    八、JS有哪些数据类型

        string、int、float、bool、object、array（数组）、null、undefined

2、技术题：

    一、CSS元素垂直居中的方法

        http://www.javashuo.com/article/p-tngicsfd-u.html

    二、前端性能优化的方法

        http://www.cnblogs.com/lei2007/archive/2013/08/16/3262897.html

    三、CSS清楚浮动的方法

        （1）添加新元素，设置属性：clear: both;

        （2）父级div定义：overflow: auto;

        （3）after方法：（！做用于浮动元素的父亲）不经常使用

    四、split和join的区别

        join函数获取一批字符串，而后用分隔符字符串将它们联接起来，从而返回一个字符串。

        split函数获取一个字符串，而后在分隔符处将其断开，从而返回一批字符串。

        这两个函数的主要区别在于：join可使用任何分隔符字符串将多个字符串联接起来，而split只能使用一个字符分隔符将字符串断开。

        简单的说，若是你用split，是把一串字符（根据某个分隔符）分红若干个元素存在一个数组里；而join是把数组中的字符串连成一个长串。

        二者互为逆向操做。

    五、CSS选择符有哪些？哪些属性能够继承？优先级？

        CSS选择符有：类型选择符（body）、群组选择符（h1，h2，h3，span）、包含选择符（h2 span）、ID选择符（#id）、Class选择符（.content）

        可继承的有： CLASS属性，伪类A标签，列表ul、li、dl、dd、dt能够继承

        优先级：遵循就近原则，样式定义最近者为准，载入样式以最后载入的定位为准，

                        ！important > [ id > class > tag ]

    六、经常使用排序算法有哪些？冒泡排序怎么写？

        插入排序（直接插入排序、希尔排序）；

        选择排序（简单选择排序、堆排序）；

        交换排序（冒泡排序、快速排序）；

        归并排序；

        基数排序

//冒泡排序-升序
var arr = [3,1,6,23,2,5,10,9];
for(var x = 0; x < arr.length; x++){
   for(var y = x+1; y < arr.length; y++){
      if(arr[x] > arr[y]){
         var temp = arr[x];
         arr[x] = arr[y];
         arr[y] = temp;
      }
   }
}
console.log(arr);

//冒泡排序-降序
var arr = [3,1,6,23,2,5,10,9];
for(var x = 0; x < arr.length; x++){
   for(var y = x+1; y < arr.length; y++){
      if(arr[x] < arr[y]){
         var temp = arr[x];
         arr[x] = arr[y];
         arr[y] = temp;
      }
   }
}
console.log(arr);

    七、浏览器兼容问题

        http://www.javashuo.com/article/p-nadbttof-hh.html

    八、页面适配？

    九、闭包？

3、开放题：

    一、你怎么看待前端？

        “前端就是把设计变活，给后台一个表现的机会”，“前端是一个项目的门面担当”