注：花一个多月时间，重学基础，学习完、整理完、总结归纳完，痛并快乐着。

（欢迎提出问题和建议，采纳后会附上提议者名字链接）

HTML 篇

1.图片中 title 和 alt 区别？

• 通常当鼠标滑动到元素上的时候显示
• alt 是是图片内容的等价形容，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必需设置有意义的值，搜索引擎会重点分析。

2.Html5 有哪些新特性、移除了哪些元素

• 新添加元素：
  • 绘画canvas
  • 用于媒介回放的video 和 audio 元素
  • 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
  • sessionStorage 的数据在浏览器关闭后自动删除
  • 语义化更好的内容元素，比方 article 、footer、header、nav、section
  • 表单控件 ，calendar 、 date 、 time 、 email 、 url 、 search
  • 新的技术 webworker 、 websocket 、 Geolocation
• 移除的元素：
  • 纯体现的元素： basefont 、 big 、 center 、 font 、 s 、 strike 、 tt 、 u
  • 对可用性产生负面影响的元素： frame 、 frameset 、 noframes
• 支持 HTML5 新标签：
  • IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签
  • 可以利用这一特性让这些浏览器支持 HTML5 新标签
  • 浏览器支持新标签后，还需要增加标签默认的样式

3.浏览器是怎样对 Html5 的离线储存资源进行管理和加载的呢

如何使用：

• 页面头部像下面一样加入一个 manifest 的属性；
• 在 cache.manifest 文件的编写离线存储的资源
• 在离线状态时，操作 window.applicationCache 进行需求实现

在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，假如是第一次访问 app ，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。假如已经访问过 app 并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，而后浏览器会比照新的manifest 文件与旧的 manifest 文件，假如文件没有发生改变，就不做任何操作，假如文件改变了，那么就会重新下载文件中的资源并进行离线存储。

4.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。
常用的块状元素有： <div>、<p>、<h1>…<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有： <a>、<span>、
、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有： <img>、<input>
知名的空元素：<img/> <input/> <link/> <meta/> <br />

5.canvas在标签上设置宽高 和在style中设置宽高有什么区别

canvas标签的width和height是画布实际宽度和高度，绘制的图形都是在这个上面。而style的width和height是canvas在浏览器中被渲染的高度和宽度。假如canvas的width和height没指定或者值不正确，就被设置成默认值 。

6.浏览器是怎样对HTML5的离线储存资源进行管理和加载的呢？

在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，假如是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。假如已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，而后浏览器会比照新的manifest文件与旧的manifest文件，假如文件没有发生改变，就不做任何操作，假如文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。

7.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

• <!DOCTYPE> 公告位于文档中的最前面，处于 html 标签之前。告知浏览器的解析器， 用什么文档类型、规范来解析这个文档
• 严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行
• 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作DOCTYPE 不存在或者格式不正确会导致文档以混杂模式呈现

8.HTML全局属性(global attribute)有哪些

class :为元素设置类标识
data-* : 为元素添加自己设置属性
draggable : 设置元素能否可拖拽
id : 元素 id ，文档内唯一
lang : 元素内容的的语言
style : 行内 css 样式
title : 元素相关的建议信息

9.div+css的布局较table布局有什么优点

改版的时候更方便 只需改 css 文件。
页面加载速度更快、结构化清晰、页面显示简洁。
体现与结构相分离。
易于优化（ seo ）搜索引擎更友好，排名更容易靠前。

因为内容较多，为了避免阅读体验仅展现部分面试题，完整版的面试题+解析，【点击我】免费获取。

CSS 篇

1.CSS中link与@import的区别：

@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
加载页面时，link引入的CSS被同时加载，@import引入的CSS将在页面加载完毕后加载。
link标签作为HTML元素，不存在兼容性问题，而@import是CSS2.1才有的语法，故老版本浏览器（IE5之前）不能识别。
可以通过JS操作DOM，来插入link标签改变样式；因为DOM方法是基于文档的，无法使用@import方式插入样式。

2.position的absolute与fixed共同点与不同点：

共同点：
1.改变行内元素的呈现方式，display被置为block；
2.让元素脱离普通流，不占据空间；
3.默认会覆盖到非定位元素上不同点：
absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

3.BFC 有什么用

• 创立规则：
  根元素
  浮动元素（ float 不取值为 none ）
  绝对定位元素（ position 取值为 absolute 或者 fixed ）
  display 取值为 inline-block 、 table-cell 、 table-caption 、 flex 、inline-flex 之一的元素
  overflow 不取值为 visible 的元素
• 作用：
  可以包含浮动元素
  不被浮动元素覆盖
  阻止父子元素的 margin 折叠

4.清理浮动的几种方式

父级 div 定义 height
结尾处加空 div 标签 clear:both
父级 div 定义伪类 :after 和 zoom
父级 div 定义 overflow:hidden
父级 div 也浮动，需要定义宽度
结尾处加 br 标签 clear:both

5.Css3 新添加伪类 – 伪元素

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled 已启用的表单元素。
:disabled 已禁用的表单元素。
:checked 单选框或者复选框被选中。
::before 在元素之前增加内容。
::after 在元素之后增加内容,也可以用来做清理浮动。
::first-line 增加一个特殊的样式到文本的首字母。
::first-letter 增加一行特殊样式到首行。

相信大家也看出来他们的不同，

伪类语法一个：，它是为了弥补css常规类选择器的不足
伪元素语法两个：，它是凭空创立的一个虚拟容器生成的元素

6.IE盒子模型 、W3C盒子模型

W3C盒模型： 内容(content)、填充( padding )、边界( margin )、 边框( border )；

box-sizing: content-box
width = content width;

IE盒子模型： IE 的content 部分把 border 和 padding 计算了进去;

box-sizing: border-box
width = border + padding + content width

7.display:inline-block 什么时候不会显示间隙？

移除空格
使用 margin 负值
使用 font-size:0
letter-spacing
word-spacing

8.行内元素float:left后能否变为块级元素？

行内元素设置成浮动之后变得更加像是 inline-block （行内块级元素，设置
成这个属性的元素会同时拥有行内和块级的特性，最显著的不同是它的默认宽度不是 100% ），这时候给行内元素设置 padding-top 和 padding-bottom或者者 width 、 height 都是有效果的

9.CSS不同选择器的权重(CSS层叠的规则)

！important 规则最重要，大于其它规则
行内样式规则，加 1000
对于选择器中给定的各个 ID 属性值，加 100
对于选择器中给定的各个类属性、属性选择器或者者伪类选择器，加 10
对于选择其中给定的各个元素标签选择器，加1
假如权值一样，则按照样式规则的先后顺序来应用，顺序靠后的覆盖靠前的规则

10.stylus/sass/less区别

均具备“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性
Sass 和 LESS 语法较为严谨， LESS 要求肯定要使用大括号“{}”， Sass 和 Stylus 可以通过缩进表示层次与嵌套关系
Sass 无全局变量的概念， LESS 和 Stylus 有相似于其它语言的作用域概念
Sass 是基于 Ruby 语言的，而 LESS 和 Stylus 可以基于 NodeJS NPM 下载相应库后进行编译；这也是为什么安装Sass的时候有时候会报错，需要安装python脚本

优点：就不用我多说了，谁用谁知道，真香。

因为内容较多，为了避免阅读体验仅展现部分面试题，完整版的面试题+解析，【点击我】免费获取。

JavaScript篇

1.js的各种位置，比方clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？

clientHeight：表示的是可视区域的高度，不包含border和滚动条
offsetHeight：表示可视区域的高度，包含了border和滚动条
scrollHeight：表示了所有区域的高度，包含了由于滚动被隐藏的部分。
clientTop：表示边框border的厚度，在未指定的情况下一般为0
scrollTop：滚动后被隐藏的高度，获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或者body元素)距离顶端的高度。

2.js拖拽功能的实现

首先是三个事件，分别是mousedown，mousemove，mouseup
当鼠标点击按下的时候，需要一个tag标识此时已经按下，可以执行mousemove里面的具体方法。
clientX，clientY标识的是鼠标的坐标，分别标识横坐标和纵坐标，并且我们用offsetX和offsetY来表示元素的元素的初始坐标，移动的举例应该是：
鼠标移动时候的坐标-鼠标按下去时候的坐标。
也就是说定位信息为：
鼠标移动时候的坐标-鼠标按下去时候的坐标+元素初始情况下的offetLeft.
还有一点也是原理性的东西，也就是拖拽的同时是绝对定位，我们改变的是绝对定位条件下的left
以及top等等值。
补充：也可以通过html5的拖放（Drag 和 drop）来实现

3.异步加载js的方法

defer：只支持IE假如您的脚本不会改变文档的内容，可将 defer 属性加入到<script>标签中，以便加快解决文档的速度。由于浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本，它将延迟对脚本的解释，直到文档已经显示给客户为止。
async，HTML5属性仅适用于外部脚本，并且假如在IE中，同时存在defer和async，那么defer的优先级比较高，脚本将在页面完成时执行。
创立script标签，插入到DOM中

4.js的防抖

防抖（Debouncing）
防抖技术即是可以把多个顺序地调用合并成一次，也就是在肯定时间内，规定事件被触发的次数。
浅显一点来说，看看下面这个简化的例子：

// 简单的防抖动函数function debounce(func, wait, immediate) {    // 定时器变量    var timeout;    return function() {        // 每次触发 scroll handler 时先清理定时器        clearTimeout(timeout);        // 指定 xx ms 后触发真正想进行的操作 handler        timeout = setTimeout(func, wait);    };}; // 实际想绑定在 scroll 事件上的 handlerfunction realFunc(){    console.log("Success");} // 采用了防抖动window.addEventListener('scroll',debounce(realFunc,500));// 没采用防抖动window.addEventListener('scroll',realFunc);

上面简单的防抖的例子可以拿到浏览器下试一下，大概功能就是假如 500ms 内没有连续触发两次 scroll 事件，那么才会触发我们真正想在 scroll 事件中触发的函数。
上面的示例可以更好的封装一下

// 防抖动函数function debounce(func, wait, immediate) {    var timeout;    return function() {        var context = this, args = arguments;        var later = function() {            timeout = null;            if (!immediate) func.apply(context, args);        };        var callNow = immediate && !timeout;        clearTimeout(timeout);        timeout = setTimeout(later, wait);        if (callNow) func.apply(context, args);    };}; var myEfficientFn = debounce(function() {    // 滚动中的真正的操作}, 250); // 绑定监听window.addEventListener('resize', myEfficientFn);

5.绕不过去的闭包

• 闭包就是能够读取其余函数内部变量的函数
• 闭包是指有权访问另一个函数作用域中变量的函数，创立闭包的最常见的方式就是在一个
• 函数内创立另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域
• 闭包的特性：
  函数内再嵌套函数
  内部函数可以引用外层的参数和变量
  参数和变量不会被垃圾回收机制回收
• 优点：能够实现封装和缓存等
• 缺点：消耗内存、使用不当会内存溢出，
• 处理方法：在退出函数之前，将不使用的局部变量一律删除

6.说说你对作用域链的了解

作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到 window对象即被终止，作用域链向下访问变量是不被允许的。
简单的说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期

7.JavaScript原型，原型链 ? 有什么特点？

每个对象都会在其内部初始化一个属性，就是 prototype (原型)，当我们访问一个对象的属性时,假如这个对象内部不存在这个属性，那么他就会去 prototype 里找这个属性，这个prototype 又会有自己的 prototype ，于是就这样一直找下去，也就是我们平常所说的原型链的概念

关系： instance.constructor.prototype = instance.proto
特点：JavaScript 对象是通过引用来传递的，我们创立的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变当我们需要一个属性的时， Javascript 引擎会先看当前对象中能否有这个属性， 假如没有的,就会查找他的 Prototype 对象能否有这个属性，如此递推下去，一直检索到 Object内建对象

8.请解释什么是事件委托/事件代理商

事件代理商（ Event Delegation ），又称之为事件委托。是 JavaScript 中常用的绑定事件的常用技巧。顾名思义，“事件代理商”即是把本来需要绑定的事件委托给父元素，让父元素担当事件监听的职务。事件代理商的原理是DOM元素的事件冒泡。使用事件代理商的好处是可以提高性能
可以大量节省内存占用，减少事件注册，比方在 table 上代理商所有 td 的 click 事件就非常棒
可以实现当新添加子对象时无需再次对其绑定

9.Javascript如何实现继承？

• 构造继承
• 原型继承
• 实例继承
• 拷贝继承
  原型 prototype 机制或者 apply 和 call 方法去实现较简单，建议使用构造函数与原型混合方式

function Parent(){this.name = 'wang';}function Child(){ this.age = 28;}Child.prototype = new Parent();//继承了Parent，通过原型var demo = new Child();alert(demo.age);alert(demo.name);//得到被继承的属性

10.谈谈This对象的了解

this 总是指向函数的直接调用者（而非间接调用者）
假如有 new 关键字， this 指向 new 出来的那个对象
在事件中， this 指向触发这个事件的对象，特殊的是， IE 中的 attachEvent 中的this 总是指向全局对象 Window

11.new操作符具体干了什么呢?

创立一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型
属性和方法被加入到 this 引用的对象中
新创立的对象由 this 所引用，并且最后隐式的返回 this

12.Ajax原理

Ajax 的原理简单来说是在客户和服务器之间加了—个中间层( AJAX 引擎)，通过XmlHttpRequest 对象来向服务器发异步请求，从服务器取得数据，而后用 javascript来操作 DOM 而升级页面。使客户操作与服务器响应异步化。这其中最关键的一步就是从服务器取得请求数据
Ajax 的过程只涉及 JavaScript 、 XMLHttpRequest 和 DOM 。 XMLHttpRequest 是ajax的核心机制

因为内容较多，为了避免阅读体验仅展现部分面试题，完整版的面试题+解析，【点击我】免费获取。