注：花一个多月时间，重学基础，学习完、整理完、总结归纳完，痛并快乐着。
（欢迎提出问题和建议，采纳后会附上提议者名字链接）
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 属性加入到