一、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)语义标签
(2)增强型表单
placehoder 属性,简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认 提示,在用户输入后消失。
required 属性,是一个 boolean 属性。要求填写的输入域不能为空
pattern 属性,描述了一个正则表达式用于验证 元素的值。
min 和 max 属性,设置元素最小值与最大值。
autofocus 属性,是一个 boolean 属性。规定在页面加载时,域自动地获得焦点。
multiple 属性 ,是一个 boolean 属性。规定 元素中可选择多个值。
(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
父:
子接受:props:['name-list']
(3) 子组件向父组件传值(通过事件传值) $on(event)监听事件,$emit(event)触发事件
子: