一、html
1. 块级元素、行内元素和空(void)元素有哪些？
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
空(void)元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img
2. 清除浮动的方式有哪些，哪种方式最好？
（1）clear：both
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
父元素：after{
display：block；
content:'';
clear:both;
}
（2）overflow：hidden；解决高度塌陷，在父容器里写
优点：简单，代码少，浏览器支持好
3. DOCTYPE的作用是什么？
告知浏览器的解释器用什么文档标准解析这个文档。
4. html5有哪些新特性？
(1)语义标签
<header/><footer/><nav/>
(2)增强型表单
placehoder 属性，简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认 提示，在用户输入后消失。
required 属性，是一个 boolean 属性。要求填写的输入域不能为空
pattern 属性，描述了一个正则表达式用于验证<input> 元素的值。
min 和 max 属性，设置元素最小值与最大值。
autofocus 属性，是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
multiple 属性 ，是一个 boolean 属性。规定<input> 元素中可选择多个值。
(3)视频和音频
(4)Canvas绘图
(5)SVG绘图
(6)地理定位
(7)拖放API
(8)Web Storage
客户端存储数据的两个对象为：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储, 当用户关闭浏览器窗口后，数据会被删除。
5.前端页面有哪三层构成，分别是什么?作用是什么?
结构层 Html 表示层 CSS 行为层 js
6.描述css reset的作用和用途。
Reset重置浏览器的css默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一
7.解释css sprites，如何使用。
Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量
其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出[背景图片](http://baike.baidu.com/view/950110.htm%22%20%5Ct%20%22_blank)的位置。
-
数组方法pop() push() unshift() shift() splice() slice()
Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除
9.call和apply的区别
两者是指当前的this指针指向调用你的那个function
Object.call(this,obj1,obj2,obj3)，call()的参数是单个单个的形式
Object.apply(this,arguments)有两个参数(当前方法，数组)
用处：实现继承
10.Javascript的typeof返回哪些数据类型
object number string boolean underfind function
- js继承三种方式
js原型（prototype）实现继承
构造函数实现继承
call , apply实现继承
- JavaScript中如何检测一个变量是一个String类型？请写出函数实现
typeof(obj) == String;
obj instanceof String
- 页面导入css样式有哪几种？link和@import的区别是？
(1) 从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
（2）加载顺序的区别
link先加载网页再显示结构，import相反
（3）兼容性的区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
（4）DOM的可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
（5）权重区别
在link标签引入的 CSS 文件中使用@import时，相同样式将被该 CSS 文件本身的样式层叠。
- css选择器有哪些？
（1）标签选择器（如：body,div,p,ul,li）
（2）类选择器（如：class="head",class="head_logo"）
（3）ID选择器（如：id="name",id="name_txt"）
（4）全局选择器（如：*号）
（5）组合选择器（如：.head .head_logo,注意两选择器用空格键分开）
（6）继承选择器（如：div p,注意两选择器用空格键分开）
（7）伪类选择器（如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。）
（8）字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含)
15. js的基础类型有哪些？
Undefined、Null、Boolean、Number和String。还有1中复杂的数据类型————Object，Object本质上是由一组无序的名值对组成的
16. ajax是如何是实现的？
(1) 创建 XMLHTTPRequest对象
(2) open(method, url, async)
method：发送请求所使用的方法（GET或POST）；与POST相比，GET更简单也更快，并且在大部分情况下都能用；
url：访问路径；
async：规定应当对请求进行异步（true）或同步（false）处理；true是在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理；false是等待服务器响应再执行。
(3) send() 方法可将请求送往服务器。
(4) onreadystatechange：存有处理服务器响应的函数，每当 readyState 改变时，onreadystatechange 函数就会被执行。
(5) readyState：存有服务器响应的状态信息。
(6) responseText：获得字符串形式的响应数据。
(7) setRequestHeader()：POST传数据时，用来添加 HTTP 头，然后send(data)，注意data格式；GET发送信息时直接加参数
到url上就可以，比如url?a=a1&b=b1。
代码示例：
$.ajax({
url:"{:U('ajax_question')}", //请求路径
dataType:'json', //数据类型
async:true,//请求是否异步，默认为异步，这也是ajax重要特性
success:function(res){
//请求成功时处理
$('.answer-wrap').append(res);//通过append的方式动态添加html代码
},
error:function(res){
//请求成功时处理
layer.msg('服务器繁忙,请稍后重试')
}
});
17. "==="和“==”区别
“===”代表类型和值相同
“==”代表值相同
18. 什么是闭包？什么是回调？什么是跨域？
闭包：定义一个函数，函数里嵌套函数，外层函数调用内层函数方法。(可以访问别的方法内部的参数)
回调：一个方法作为参数传给另一个方法，另一个方法里调用这个函数.
跨域：协议、域名、端口与当前不同
19.优化前端性能的方法有哪些？
(1)页面级优化
a.减少HTTP请求次数
从设计实现层面简化页面
合理设置 HTTP缓存
资源合并与压缩
合并 CSS图片
将 CSS放在 HEAD中
b.将外部脚本置底（将脚本内容在页面信息内容加载后再加载）
将引入的js放在行为层（最底部）
c.减少不必要的 HTTP跳转
d.避免重复的资源请求
(2)代码级优化
a.少用字符串拼接，+
缓存节点，尽量减少节点的查找
避免无谓的循环，break、continue、return的适当使用
减少节点的操作（innerHTML）
(3)Image压缩
20.get 和post有哪些区别？以及各自的使用环境
POST和GET都是向服务器提交数据，并且都会从服务器获取数据。
**区别：**
1、传送方式：get通过地址栏传输，post通过报文传输。
2、传送长度：get参数有长度限制（受限于url长度），而post无限制
3、get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息。
get请求只能进行url编码，而post支持多种编码方式
get请求会浏览器主动cache，而post支持多种编码方式。
get请求参数会被完整保留在浏览历史记录里，而post中的参数不会被保留。
4.最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。
21. ajax请求方式？
get，post，delete，put，update
22.window.onload与$.onload区别
两者都是在dom文档树加载完执行的，但window.onload是在dom文档树加载完和所有文件加载完执行的一个函数。$(document).ready要比window.onload先执行
- es6的新增功能
1. 新的变量声明方式 let/const
2. 箭头函数的使用
const fn = (a, b) => a + b;
箭头函数最直观的三个特点。
不需要 function 关键字来创建函数
省略 return 关键字
继承当前上下文的 this 关键字
3. 模板字符串 ``
4. 函数默认参数 ,不定参数，拓展参数
function add(x = 20, y = 30) {
return x + y;
}
console.log(add());
5. 展开运算符 ...
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 10, 20, 30];
// 这样，arr2 就变成了[1, 2, 3, 10, 20, 30];
6. 类的支持，引入class关键字
7. for of
- CSS3的新特性
圆角border-radius
阴影box-shadow
文字阴影text-shadow
线性渐变gradient
旋转transform
二. vue框架
- 创建vuejsjiao'shou'jia：vue init webpack 项目名
- 传值
（1）A组件向B组建传值
A: this.$router.push({path:'/B',query:{id:11}})
B接收：this.$router.query.id
(2) 父组件向子组件传值 props
父：<child:name-list="names">
子接受：props：['name-list']
(3) 子组件向父组件传值（通过事件传值） $on(event)监听事件，$emit(event)触发事件
子：<button @click="submit">
submit(){
this.$emit('code',888)
}
父接收：<child @code='getcode'>
