目录
10.25 -html
1、html5 有哪些新特性？
// 新特性
1、拖拽释放
2、语义化更好的内容标签
3、音频、视频api
4、画布api
5、地理api
6、本地离线存储localStorage长期存储数据，游览器关闭后数据不丢失
7、sessionStorage 的数据在游览器关闭后自动删除
8、表单控件 calendar、data、time、email、URL、search
9、新的技术 webworker、websocket、Geolocation
2、lframe的作用及其优缺点?
//优点
可以解决第三方静态内容加载缓慢问题；
iframe无刷新文件上传；
iframe跨域通信
//缺点
iframe会阻塞主页面的onload事件；
无法被搜索引擎捕获到导致不利于SEO；
增加服务器的http请求；
内存开销大；
3、常见浏览器内核是什么?
ie游览器，微软的Trident内核，前缀-ms-
Chrome,谷歌的webkit内核，已经转向Blink内核，前缀-webkit
Firefox，火狐的Gecko内核，前缀-moz-
欧朋游览器，欧朋的Presto内核，前缀-o-
Safari，苹果的webkit内核，前缀-webkit-
4、image标签title 与alt属性的区别是什么?
alt是图片无法加载时显示的图片描述
title是鼠标悬停在图片上时显示的文字信息
5、对WEB标准以及W3C的理解与认识?
标签闭合、标签小写、不乱嵌套、提高搜索机器人的搜索几率、使用外链css和js脚本，结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户访问、内容能被更广泛的设备所访问、更少的代码和组件、容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性
6、Doctype作用?严格模式与混杂模式如何区分?它们有何意义?
1.<!Doctype> 申明位于文档的最前面，处于html标签之前，告知游览器的解析器。用什么文档类型规范解析这个文档
2.严格模式的排版和js运作模式是该游览器支持的最高标准运行
3.在混乱模式中，页面以宽松的向后兼容的方式显示，模拟老式游览器行为以防站点无法工作
4.doctype 不存在或者格式不正确会导致文档以混杂模式呈现
7、HTML5新标签的浏览器兼容问题如何处理
1、双边距bug float导致，使用display
2、3像素问题 float导致，使用 display：inline -3px
3、超链接hover点击后失效 使用正确的书写顺序 link > visited > hover > active
4、ie里面 z-index 问题 给父级添加 position：relative
5、png透明 使用js代码改
6、min-height最小高度 使用 ！important解决
7、select 在ie6 下遮盖，使用 iframe解决
8、为什么没有办法定义1px左右的宽度容器（ie6默认的行高造成的，使用 over:hidden,zoom:0.8,line-height:1px）
9、ie5-8不支持opacity，解决：
.opacity{
opacity:0.4;
filter:alpha(opacity=60); /* for ie5-7 */
-ms-filter:"progid:DXImageTransform Microsoft.Alpha(opacity=60)"; /* for ie8 */
}
10、ie6 不支持png透明背景，解决 ie6下使用gif图片
10.26 - css
1、CSS3新特性有哪些?
1、css3实现圆角（border-radius），阴影（box-shadow）
2、对文字加特效（text-shadow）、线性渐变（gradient）、旋转（transform）
3、transform：rotate（9deg） scal（0.85,0.90） translate(0px,-30px) skew(-9deg,0deg); // 旋转 缩放 定位 倾斜
4、增加了许多的css选择器、多背景 rgba
5、在css3中唯一引入的伪元素是 ::selection
6、媒体查询、多栏查询
7、border-image
2、BFC 规则
bfc规则是一个隔离的独立容器，子元素与外面的元素互不影响，当BFC区域的位置变化不会影响其子元素的内部布局，bfc区域的高度是包含浮动元素的高度，进而不会影响外部的布局；如果是普通的块级元素在垂直方向上是会发生margin重叠的现象，且margin的实际值取决于两个元素之间的最大值。
3、清除浮动有几种方式?141
1、需要清除浮动的区域增加一个新的块级元素(div)，给他加一个属性：clear：both；缺点：结构多了无用的标签
2、需要清除的元素设置clear：both，它的左右就不会存在浮动元素
3、利用伪元素 ::before 来在元素内部插入两个元素块，注意一定设置 content：""
4、给父盒子设置高度，限制内部子元素的活动范围，缺点：很多时候不知道后期元素有多少，无法给父盒子添加明确高度
5、利用css的BFC特性，给父盒子添加 overflow：auto / hidden
4、px/em/rem区别是什么?如何去用?
1、em值不固定，em继承父元素的字体大小，em代表父容器的倍数当标签层层嵌套时需要修改某一个标签的em值需要重新计算；
2、rem值不固定，rem相对与根元素（html）元素的字体大小，浏览器1rem默认是16px；
3、px值固定，px在页面缩放时无法进行调整；
4、这也是为什么给font-size设置62.5%值，因为浏览器默认的字体高度是16px，未调整时1rem等于16px，不好进行判断，设置字体为62.5%时，1rem=10px，比较容易计算。
5、CSS制作3三角形
<style>
.d1 {
width: 0;
height: 0;
border-width: 100px;
border-color: red orange blue blueviolet;
border-color: transparent transparent blue transparent;
border-style: solid;
}
</style>
<body>
<div class="d1"></div>
</body>
6、常见行内元素和块级元素
// 行级元素
1.当屏幕还有空间时默认占满屏幕而不会发生折行；
2.无法设置宽高；
3 仅水平方向上的margin和padding有效；
4 常见的行级元素标签：input、img、a、span、textarea、label、code、
5 select，可通过display: flex | block转换成为块级标签。
// 块级元素
垂直排布；
可以设置宽高；
常见的块级元素标签：address、caption、div、dd、form、h、br、ul、table，可通过display: inline;转变成为行级标签。
7、水平垂直居中的方式有几种? (至少理解两种)
// 无宽高
1、
绝对定位和translate；
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
2、
为其父元素设置为flex水平垂直轴居中；
display: flex;
align-items: center;
justify-content: center;
3、
绝对定位和margin实现；
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
// 有宽高
4、
为其父元素设置line-height=高度配合text-align: center（仅限行级元素）；
text-align: center;
line-height: 等于高度;
绝对定位配合margin-left左右偏移
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -200px;
10.28 - JS 1
1、介绍一下JS有哪些内置对象。
Object 是JavaScript 中所有对象的父对象
数据封装类对象：Object、Array、Boolean、Number、String
其他对象：Function、Argument、Math、Date、RegExp、Error
2、什么闭包?
指有权访问另一个函数作用域中变量的函数。简单理解就是 ，一个作用域可以访问另外一个函数内部的局部变量。
3、什么是原型链?
1、由构造函数prototype原型对象通过__proto__连接组成的一条指针链路就指原型链
2、我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念。
4、数组去重你有几种办法?
- Array.from() + new Set() 或者 展开运算符 + new Set() （ES6新增）
function unique(arr) {
// 先判断是不是数组
if (Array.isArray(arr)) {
// return Array.from(new Set(arr))
return [...new Set(arr)]
} else {
return false
}
}
不考虑兼容性，这种去重的方法代码最少。这种方法还无法去掉“{}”空对象，后面的高阶方法会添加去掉重复“{}”的方法。
- filter+indexOf
function unlink(arr) {
return arr.filter(function (item, index, arr) {
//当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
return arr.indexOf(item, 0) === index;
});
}
- for循环 +includes+push
function unique2(arr) {
// 先判断是不是数组
if (!Array.isArray(arr)) {
console.log('type error!')
return
}
let array = [];
for (let i = 0; i < arr.length; i++) {
if (!array.includes(arr[i])) {//includes 检测数组是否有某个值
array.push(arr[i]);
}
}
return array
}
4.for循环 +continue跳出本次循环+push
let newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] === arr[i + 1]) {
continue;
}
newArr.push(arr[i]);
}
5.map+indexOf+push
function unlink2(arr) {
let newArr = []
arr.forEach(r => {
if (newArr.indexOf(r) == -1) {
newArr.push(r);
}
})
return newArr
}
5.数组方法pop()、 push()、 unshift()、 shift()?
pop() //尾部删除
push() //尾部添加
unshift() //头部添加
shift() //头部删除
6、怎样添加、移除、移动、复制、创建和查找节点?
（1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
（2）添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
（3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个 数组，其中包括id等于name值的)
getElementById() //通过元素Id，唯一性
7、JavaScript 的事件流模型都有什么,以及怎么阻止他们?
function stopDefault( e ) {
//阻止默认浏览器动作(W3C)
if ( e && e.preventDefault )
e.preventDefault();
//IE 中阻止函数器默认动作的方式
else
window.event.returnValue = false;
return false;
}
11.06 - JS 2
1.什么是回调函数?
回调函数就是一个通过函数指针调用的函数。如果你把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用来调用其所指向的函数叫回调函数
2.函数fn1.函数fn2. 函数fn3, 如果想在三个函数都执行完成后执行某一个事件应该如何实现?
//1、设置事件监听。
//2、回调函数：
function fn1(){
console.log("执行fn1");
fn2();
}
function fn2(){
console.log("执行fn2");
fn3();
}
function fn3(){
console.log("执行fn3");
mou();
}
function mou(){
console.log("执行某个函数");
}
fn1();
3、简述创建函数的几种方式。(至少写出三种)
//第一种---函数声明
function fn(num1,num2){
return num1+num2
}
//第二种---函数表达式
let fn=function(num1,num2){
return num1+num2
}
//第三种---箭头函数
let fn=()=>{
return 0
}
4、简述for in循环的特点及使用场景?
特点：for ... in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作
作用场景：用于数组或者对象的属性进行循环操作
5、split() 与join{}的区别?
split（）是把一串字符（根据某个分隔符）分成若干元素存放在一个数组里即切割成数组形式；
join（）是把数组中的字符串连城一个长串，可以大体认为是split（）的逆操作
6、JS的数据类型有哪些?
1、基本数据类型
number
string
boolean
null
undefined
2、引用类型
function
array
object
7.说说你对this 的理解?
this是一个关键字，他代表函数运行时自动生成的一个内部对象，只能在函数内部使用。
1、作为函数调用时，this指向全局对象
2、作为对象的方法调用时，this指向调用对象
3、作为构造函数调用时，this指向新的对象（new 会改变 this 的指向）
4、apply 调用this指向apply方法的的第一个参数
11.09 - JS3
1.简述列举文档对象模型DOM里document的常用的查找访问节点的方法并做简单说明。
Document.getElementById 根据元素id 查找元素
Document.getElementByName 根据元素name 查找元素
Document.getElementTagName 根据指定的元素名查找元素
2.Javascript 创建对象的几种方式? (至少三种)
1. 简单对象的创建使用对象字面量的方式{}创建一个对象（最简单，好理解，推荐使用）
代码如下
var Cat = {};//JSON
Cat.name="kity";//添加属性并赋值
Cat.age=2;
Cat.sayHello=function(){
alert("hello "+Cat.name+",今年"+Cat["age"]+"岁了");//可以使用“.”的方式访问属性，
也可以使用HashMap 的方式访问
}
Cat.sayHello();//调用对象的（方法）函数
/***********************************/
2.用function(函数)来模拟class
2.1 创建一个对象，相当于new 一个类的实例(无参构造函数)
代码如下
function Person(){
}
var personOne=new Person();//定义一个function，如果有new 关键字去"实例化",那么该function 可以看作是一个类
personOne.name="dylan";
personOne.hobby="coding";
personOne.work=function(){
alert(personOne.name+" is coding now...");
}
personOne.work();
/*********************/
2.2 可以使用有参构造函数来实现，这样定义更方便，扩展性更强（推荐使用）
代码如下
function Pet(name,age,hobby){
this.name=name;//this 作用域：当前对象
this.age=age;
this.hobby=hobby;
this.eat=function(){
alert("我叫"+this.name+",我喜欢"+this.hobby+",也是个吃货");
}
}
var maidou =new Pet("麦兜",5,"睡觉");//实例化/创建对象
maidou.eat();//调用eat 方法(函数)
/****************************************/
3.使用工厂方式来创建（Object 关键字）
代码如下：
var wcDog =new Object();
wcDog.name="旺财";
wcDog.age=3;
wcDog.work=function(){
alert("我是"+wcDog.name+",汪汪汪......");
}
wcDog.work();
/**********************************/
4.使用原型对象的方式prototype 关键字代码如下：
function Dog(){
}
Dog.prototype.name="旺财";
Dog.prototype.eat=function(){
alert(this.name+"是个吃货");
}
var wangcai =new Dog();
wangcai.eat();
/*********************************/
5.混合模式(原型和构造函数)
代码如下：
function Car(name,price){
this.name=name;
this.price=price;
}
Car.prototype.sell=function(){
alert("我是"+this.name+"，我现在卖"+this.price+"万元");
}
var camry =new Car("凯美瑞",27);
camry.sell();
/********************************/
6.动态原型的方式(可以看作是混合模式的一种特例)
代码如下：
function Car(name,price){
this.name=name;
this.price=price;
if(typeof Car.sell=="undefined"){
Car.prototype.sell=function(){
alert("我是"+this.name+"，我现在卖"+this.price+"万元");
}
Car.sell=true;
}
}
var camry =new Car("凯美瑞",27);
camry.sell();
以上几种，是javascript 中最常用的创建对象的方式。
3.什么是事件冒泡/捕获?
事件冒泡：子元素事件的触发会影响父元素事件；
开关事件冒泡：
A，开启事件冒泡：element.addEventListener(eventName，handler，false)；
B，关闭事件冒泡：假设传统方式事件的返回值为e，就可以通过
e.stopPropagation()来关闭事件冒泡；
事件捕获：父元素的事件会影响子元素的事件；
开启事件捕获：element.addEventListener(eventName，handler，true)
4、例举强制类型转换和隐式类型转换?
//强制
转化成字符串toString() String()
转换成数字Number()、parseInt()、parseFloat()
转换成布尔类型Boolean()
//隐式
拼接字符串例子var str = "" + 18
- / % === ==
5.怎么判断一个变量是否null/undefined?
//解释null和undefined
Undefined:
if (typeof(reValue) == "undefined") {
alert("undefined");
}
typeof 返回的是字符串，有六种可能："number"、"string"、"boolean"、"object"、
"function"、"undefined"
Null:
var exp = null;
if (!exp && typeof(exp)!=”undefined” && exp!=0)
{
alert(“is null”);
}
//判断方法
我们在DOM 应用中，一般只需要用(!exp) 来判断就可以了
6.相等符号" == “和" === “区别。
== ：判断值是否相等，会自动转换类型
===：是判断值和类型是否完全相等，不会自动转换类型
7.继承的几种方式?
// 原型链继承
Cat.prototype = new Animal();
// 构造继承，使用借用构造函数，通过call构造函数传入数据将父类的实例属性绑定到当前实例this。
function Cat(name){
Animal.call(this); // 可以传入数据
this.name = name || 'Tom';
}
// 遍历拷贝继承，遍历父类的属性并赋值给子类的原型对象，注意深浅拷贝问题。
function Cat(name){
var animal = new Animal();
for(var key in animal){
Cat.prototype[key] = animal[key];
}
this.name = name || 'Tom';
}
// 寄生组合继承
function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
(function(){
// 创建一个没有实例方法的类
var Super = function(){};
Super.prototype = Animal.prototype;
//将实例作为子类的原型
Cat.prototype = new Super();
})();
// class继承
class Cat extends Animal {
constructor() {
}
}
11.10 - JS3
1、新增声明命令let 和const.
let 表示变量、const 表示常量。
let 和const 都是块级作用域。以{}代码块作为作用域范围只能在代码块里面使用。
*不存在变量提升，只能先声明再使用，否则会报错。在代码块内，在声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称TDZ）。
*在同一个代码块内，不允许重复声明。
*const 声明的是一个只读常量，在声明时就需要赋值。（如果const 的是一个对象，对象所包含的值是可以被修改的。抽象一点儿说，就是对象所指向的地址不能改变，而变量成员是可以修改的。
2、Promise 对象
Promise 是异步编程的一种解决方案，将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。
3、数组解构
数组中的值会自动被解析到对应接收该值的变量中，数组的解构赋值要一一对应
如果有对应不上的就是undefined
4、新增对象Set
Set 数据结构，类似数组。所有的数据都是唯一的，没有重复的值。它本身是一个
构造函数。
属性和方法：
* size 数据的长度
* add() 添加某个值，返回Set 结构本身。
* delete() 删除某个值，返回一个布尔值，表示删除是否成功。
* has() 查找某条数据，返回一个布尔值。
* clear() 清除所有成员，没有返回值。
5、promise的三种状态和基础使用
*它有三种状态，分别是pending-进行中、resolved-已完成、rejected-已失败
*Promise 构造函数包含一个参数和一个带有resolve（解析）和reject（拒绝）两个参数的回调。在回调中执行一些操作（例如异步），如果一切都正常，则调用resolve，否则调用reject。对于已经实例化过的promise 对象可以调用promise.then() 方法，传递resolve 和reject 方法作为回调。then()方法接收两个参数：onResolve 和onReject，分别代表当前promise 对象在成功或失败时。