前端
行内标签和块标签有哪些以及都有什么特点
块标签 每一个块属性标签都是从新的一行开始，而且之后的元素也都会从新的一行开始 可以设置宽度、高度，行高，距顶部距离，距底部距离 块属性标签的宽度假如不做设置，会直接默认为父元素宽度的100% 块属性标签是可以直接嵌套的 p标签中不能嵌套div标签
<div>、<p>、<h1>…<h6>、<ol>、<ul>、<li>、<address>、<blockquote>、<form>
行内标签 行属性标签它和其它标签处在同一行内 无法设置宽度，高度 行高 距顶部距离 距底部距离 宽度是直接由内部的文字或者图片等内容撑开的 行属性标签内部不能嵌套行属性标签
<a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
img标签的用法
<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />img 元素向网页中嵌入一幅图像。
请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。
HTML 与 XHTML 之间的差异 在 HTML 中，<img> 标签没有结束标签。
在 XHTML 中，<img> 标签必须被正确地关闭。
请描述一下cookies，sessionStorage和localStorage的区别？
相同点：都存储在客户端 不同点： 1.存储大小 2.有效时间
- 数据与服务器之间的交互方式
image.png
image.png
image.png
设置Cookie
image.png
var name = "jack";
var pwd = "123";
var now = new Date();
now.setTime(now.getTime() +1 * 24 * 60 * 60 * 1000);//转毫秒
var path = "/";//可以是具体的网页
document.cookie = "name=" + name + ";expires=" + now.toUTCString() + ";path=" + path;//姓名
document.cookie= "pwd=" + pwd + ";expires=" + now.toUTCString()+ ";path=" + path; //密码 高度跟据内容自适应的div 如何实现垂直居中？
div{
display:flex;
align-items:center;
}Bom是什么？列举你知道的Bom对象
BOM是browser object model的缩写，简称浏览器对象模型
Bom对象 window对象 document对象 location对象 navigator对象 screen对象 history对象
hybrid通信的实现原理
1.H5向Native通信 2.Native向H5通信 3.H5页面之间通信
fetch和ajax的区别
Ajax 利用的是XMLHttpRequest对象来请求数据的
fetch window的一个方法 主要特点是 1、第一个参数是URL 2、第二个参数可选参数 可以控制不同的init对象 3、使用了js 中的promise对象
data-xxx 属性的作用是什么？
data-为H5新增的为前端开发者提供自定义的属性，这些属性集可以通过对象的 dataset 属性获取，不支持该属性的浏览器可以通过 getAttribute 方法获取
什么是浏览器的标准模式和怪异模式
标准模式：浏览器按W3C标准解析执行代码 怪异模式：使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以称之为怪异模式。
这里写图片描述
XSS是什么说一下？
XSS 指的是：黑客通过 “HTML 注入 ” 篡改网页，插入恶意脚本，从而在用户浏览网页时，控制用户浏览器的一种攻击 。
CSRF了解吗？
CSRF（Cross-site request forgery）跨站请求伪造，也被称为“One Click Attack”或者Session Riding，通常缩写为CSRF或者XSRF，是一种对网站的恶意利用。
如何理解跨域
跨域是浏览器施加的安全显示，即不同源的的网站不能问其他网站的内容
跨域，所谓域就是指http(s)://host:port，只要这一串与当前网站不一致，浏览器会认为你已经跨域了。
image.png
cookie是什么，怎么存储
Cookie是保存在客户端的纯文本文件 jquery.cookie.js扩展包
$.cookie("test", "1", { expires: 7 });
//读取cookie
$.cookie("test");
//删除cookie
$.cookie("test", "1", { expires: -1 });
//设置过期时间为负就失效了如何用CSS实现一个三角形
image.png
手写bind函数
image.png
什么是函数节流？ 简单讲就是让一个函数无法在短时间内连续调用，只有当上一次函数执行后过了规定的时间间隔，才能进行下一次该函数的调用。
image.png
实现一个响应式的正方形
image.png
倒计时怎么做？
image.png
React 组件生命周期
image.png
React生命周期分为了 挂载（装配） 、 更新 、 卸载 以及 捕错 四个状态阶段
image.png
react怎样提高性能
react的组件渲染分为初始化渲染和更新渲染
vue页面之间的通信
第一种，父子组件通信
一.父组件向子组件传值
image.png
image.png
image.png
二.子组件向父组件传值或更新父组件值
image.png
image.png
vuex
状态管理模式、集中式存储管理
介绍一下CSS的盒子模型
盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)
有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 、padding
绝对定位、相对定位相关知识
positon:relative; 和 position:absolute
绝对定位：该元素相对于其父元素 相对定位：该元素相对于自己原有位置，偏移一定距离。相对的是自己。
什么时候需要清除浮动？清除浮动方法总结
父元素高度塌陷了 在父元素的最后加一个冗余元素并为其设置clear:both 采用伪元素，这里我们使用:after 使用overflow属性，给父元素添加overflow:hidden ||auto
保持浮动层水平垂直居中
image.png
利用定位与margin：auto
image.png
如何保持文字水平垂直居中
text-align:center; /*水平居中*/
div{
width:200px;height:200px; /*设置div的大小*/
border:1px solid green; /*边框*/
text-align: center; /*文字水平居中对齐*/
line-height: 200px; /*设置文字行距等于div的高度*/
overflow:hidden;
}display和position的取值、各自的意思和用法
position属性取值：static(默认)、relative、absolute、fixed、inherit
display属性取值：none、inline、inline-block、block、flex、inherit
选择器的种类及其优先级
1、类型选择器 2、简单属性选择器 3、组合选择器类型
归纳为!important > 内联 > ID > 类 > 伪类 | 属性选择 > 标签 | 伪对象 > 通配符 > 继承
canvas与svg的区别
image.png
px、em、rem的区别
PX px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的
EM em是相对长度单位。相对于当前对象内文本的字体尺寸。
rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。
JavaScript的基本数据类型有哪些、解释一下原始数据类型和引用数据类型
ECMAScript包括两个不同类型的值：基本数据类型和引用数据类型。
JS有六大数据类型： Number、String、Boolean、Null、Undefined、Object
存在堆中：引用数据类型（object、function）
存在栈中：基本数据类型（number、string、boolean、null、unedfined）
基本数据类型(5个)：Undefined,Null,Boolean,Number,String 引用（复杂）数据类型：Object (object,array,function,date等)
声明变量时不同的内存分配 不同的内存分配机制也带来了不同的访问机制 复制变量时的不同 参数传递的不同
谈谈null与undefined的区别
在JavaScript中，将一个变量赋值为undefined或null，老实说，几乎没区别。
image.png
null表示"没有对象"，即该处不应该有值。 undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。
变量类型检测的方法有哪些
判断数据类型共有四种方法：
1.typeof
2.instanceof
3.constructor
4.Object.prototype.toString.call
谈谈对原型链的理解，prototype是什么，什么时候用
prototype对象是实现面向对象的一个重要机制 在JavaScript中没有类的概念，都是函数 1.原型和原型链是JS实现继承的一种模型。 2.原型链的形成是真正是靠proto 而非prototype
函数里的this什么含义，this的指向问题
1.当函数没有用作构造函数时，this指向window 2.用作构造函数时，this指向新生成的对象
apply与call的区别，有哪些应用
本身无该方法，才选择调用 call方法：call(obj,x,y,z,.....)
调用一个对象的一个方法，以另一个对象替换当前对象
apply方法：apply(obj,[x,y,z])
应用某一对象的一个方法，用另一个对象替换当前对象。
参数方式是不一样的
各大浏览器的内核总结
image.png
JavaScript中split()和join()的区别
split()用于分割字符串，返回一个数组 join()用于连接多个字符或字符串
数组方法push()、pop()、unshift()、shift()
不同的是 push()、pop() 是从数组的尾部进行增减，unshift()、shift() 是从数组的头部进行增减。
pop()用于移除数组末尾的最后一项，然后返回移除的项
unshift:将参数添加到原数组开头，并返回数组的长度 shift()：删除原数组第一项，并返回删除元素的值
HTTP协议的理解、TCP/IP三次握手
image.png
HTML5新增标签、属性
语义化标签的完善 section article aside hgroup header footer nav figure figcaption mark progress time wbr datalist details
Forms 新增input元素的种类： search : 搜索输入框 tel : 电话号码输入框 url : 输入url地址 email : 邮件输入框 number : 数字输入框 range :特定范围内的数值选择器(通过拖动滚动条改变一定范围内的数字) color : 颜色选取器 只在 Opera 和 Blackberry 浏览器 datetime : 显示完整日期和时间 UTC标准时间 datetime-local : 显示完整日期和时间 time : 显示时间 month : 显示月 week : 显示周
es6与es5的差别
JavaScript一种动态类型、弱类型、基于原型的客户端脚本语言 什么是ES5 作为ECMAScript第五个版本 什么是ES6 ECMAScript6在保证向下兼容的前提下，提供大量新特性
CSS中clear的作用
图像的左侧和右侧均不允许出现浮动元素：
img
{
float:left;
clear:both;
}对闭包的理解
image.png
如何判断一个变量是否是数组
1、instanceof
function isArray (obj) {
return obj instanceof Array;
}
2、Array对象的 isArray方法
function isArray (obj) {
return Array.isArray(obj);
}
3、Object.prototype.toString
function isArray (obj) {
return Object.prototype.toString.call(obj) === '[object Array]';
}页面加载完成有两种事件 1.load是当页面所有资源全部加载完成后 2.ready()是当DOM文档树加载完成后执行一个函数
谈谈你对es6箭头函数的理解
在函数被传递后, 如果使用了箭头函数, this 最终将指向其定义处上下文的 this 对象。
箭头函数和普通函数一个很大的区别在于箭头函数不重新绑定作用域。
谈谈你对模块化的理解
模块化——把程序划分成独立运行且可以独立访问的模块，每个模块完成一个子功能，把这些模块集成起来构成一个整体，可以完成指定的功能满足用户的需求。
写一个数组去重的方法，使用hash表的方式
image.png
border-radius:3px 4px 5px 6px 代表设置对象左上角3px圆角、右上角4px圆角、右下角5px圆角、左下角6px圆角。
对vuex的理解
核心概念 Vuex 是适用于 Vue.js 应用的状态管理库
对JavaScript面向对象的了解，是否有应用过？
image.png
谈谈你对MVVM开发模式的理解
MVVM分为Model、View、ViewModel三者。 Model 代表数据模型，数据和业务逻辑都在Model层中定义； View 代表UI视图，负责数据的展示； ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作；
Vue 有哪些指令？
v-html、v-show、v-if、v-for等等
v-if 和 v-show 有什么区别？
image.png
Vue中如何监控某个属性值的变化？
watch: {
obj: {
handler (newValue, oldValue) {
console.log('obj changed')
},
deep: true
}
}delete和Vue.delete删除数组的区别
image.png
前端如何优化网站性能？
减少 HTTP 请求数量 控制资源文件加载优先级 利用浏览器缓存 减少重排 减少 DOM 操作 图标使用 IconFont 替换
原生DOM对象转jQuery对象：
var box = document.getElementById('box');
var $box = $(box);
jQuery对象转原生DOM对象：
var $box = $('#box');
var box = $box[0];jQuery如何扩展自定义方法
(jQuery.fn.myMethod=function () {
alert('myMethod');
})
// 或者：
(function ($) {
$.fn.extend({
myMethod : function () {
alert('myMethod');
}
})
})(jQuery)
(function($){
$.fn.extend({
myMethod: function() {
alert('myMethod');
}
})
})(jquery)
image.png
image.png
image.png
ES5的基本数据类型，Undefined，Null，Number，String，Boolean。引用类型，Object
image.png
JavaScript 数据类型
字符串值，数值，布尔值，数组，对象。
image.png
image.png
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。
JavaScript 对象是拥有属性和方法的数据。
JavaScript 数据类型 在 JavaScript 中有 5 种不同的数据类型：
string number boolean object function 3 种对象类型：
Object Date Array 2 个不包含任何值的数据类型：
null undefined
image.png
ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。
let 声明的变量只在 let 命令所在的代码块内有效。
const 声明一个只读的常量，一旦声明，常量的值就不能改变。
image.png
JSON 语法规则 数据为 键/值 对。 数据由逗号分隔。 大括号保存对象 方括号保存数组
javascript:void(0) 这样的代码
javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。
# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。
而javascript:void(0), 仅仅表示一个死链接。