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

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

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.src与href的区别

src 用于替换当前元素，href用于在当前文档和引用资源之间确立联系。 src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部

• href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加
• link href="common.css" rel="stylesheet" 那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css ，而不是使用 @import 方式

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作用? 严格模式与混杂模式如何区分？它们有何意义?

• 声明位于文档中的最前面，处于 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:last-of-type 选择属于其父元素的最后

元素的每个

元素。 p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。 p:only-child 选择属于其父元素的唯一子元素的每个

元素。 p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。 :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 属性加入到