本文将系统梳理JavaScript OOP编程，包含原型链、es5继承的社区方案、es6 Class语法、class 继承等内容。


<img width='100%' src="https://blog.warmplace.cn/static/img/977894ae31c095dc8160a554091b49cc.image.webp">

详细思维导图链接[点这里](https://static.warmplace.cn/blog-resources/jsmind/index.html?id=oop)




# OOP编程

## 何为面向对象？
定义： 
- **分析、设计、实现软件的一种编程思想**
- **基于对象的概念建立模型，模拟客观世界**
- 完整定义： 系统中一切事物皆对象。基于对象的概念建立模型，模拟客观世界，分析、设计、实现软件的编程思想。通过面向对象的理念使得计算机软件能与现实中的系统一一对应。
- **面向对象(OOP)是一种常见的编程范式，常见的编程范式有POP、OOP、FP**

## 相关概念
- 类（Class）：定义了一件事物的抽象特点，包含它的属性和方法
- 对象（Object）：类的实例，通过 new 生成
- 面向对象（OOP）的三大特性：封装、继承、多态
- 封装（Encapsulation）：将对数据的操作细节隐藏起来，只暴露对外的接口。外界调用端不需要（也不可能）知道细节，就能通过对外提供的接口来访问该对象，同时也保证了外界无法任意更改对象内部的数据
- 继承（Inheritance）：子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性
- 多态（Polymorphism）：由继承而产生了相关的不同的类，对同一个方法可以有不同的响应。
- 存取器（getter & setter）：用以改变属性的读取和赋值行为
- 修饰符（Modifiers）：修饰符是一些关键字，用于限定成员或类型的性质。比如 public 表示公有属性或方法
- 抽象类（Abstract Class）：抽象类是供其他类继承的基类，抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现
- 接口（Interfaces）：不同类之间公有的属性或方法，可以抽象成一个接口。接口可以被类实现（implements）。一个类只能继承自另一个类，但是可以实现多个接口

# 原型链
JS是基于原型链的继承

![image.png](https://blog.warmplace.cn/static/img/4e86289f85a445fc562b11270af3da72.extend.webp)

写一些代码验证上图
```js
function Foo(){
}
const f = new Foo();
console.log(f.__proto__  === Foo.prototype);
console.log(Foo.prototype.__proto__ === Object.prototype)

const o = new Object({});
console.log(o.__proto__ === Object.prototype);
console.log(Object.__proto__ === null);
console.log(Function.prototype.__proto__ === Object.prototype);
console.log(Object.__proto__ === Function.prototype);

console.log(Function.__proto__ === Function.prototype);
console.log(Foo.__proto__ === Function.prototype);

// 恒等式 Function 与 Object 互为原型
console.log(Function.__proto__ === Object.__proto__);
```
# es5的继承
在es5中 
- 如果是对象可以通过`Object.create`实现继承
- 如果是方法需要构造函数继承和原型继承

```js
/* 手动继承 */
function Rectangle(length, width) {
  this.l = length
  this.w = width
}
Rectangle.prototype.getArea = function () {
  return this.l * this.w
}
function Square(length) {
  // 构造函数继承
  Rectangle.call(this, length, length)
}
// 原型继承
Square.prototype = Object.create(Rectangle.prototype, {
  constructor: { // 修复constructor指向，不然使用instanceof就有问题
    value: Square
  }
})
var square = new Square(3);
// square.__proto__.__proto__ = Rectangle.prototype;
square.__proto__.constructor = Square

console.log(square.getArea())
console.log(square instanceof Square)
console.log(square instanceof Rectangle)
```

# es5继承的社区方案
社区总结了一些继承的方式，关键点围绕构造函数和原型。

## 1.1 直接原型链继承
```js
function Game(name){
  this.name = name ?? 'LOL'
  this.skins = ['s']
}
Game.prototype.getName = function() {
  return this.name;
}

function LOL() {}
LOL.prototype = new Game();
LOL.prototype.constructor = LOL;
/*
本质是重写原型链
缺点:
1) 原型链上的方法和属性都被共享了
2) 子类实例化的时候无法向父类传参
*/
const game1 = new LOL();
const game2 = new LOL();
game1.skins.push('ss');
console.log(game2.skins); // 原型链上的方法和属性是共享的
```
## 1.2 原型式继承
Object.create(proto[, propertiesObject])
第一个参数是父类原型，第二个参数是子类原型
```js
var person = {
    name: 'Yvette',
    hobbies: ['reading']
}
var person1 = Object.create(person);
person1.name = 'Jack';
person1.hobbies.push('coding');
var person2 = Object.create(person);
person2.name = 'Echo';
person2.hobbies.push('running');
console.log(person.hobbies); // [ 'reading', 'coding', 'running' ]
console.log(person1.hobbies); // [ 'reading', 'coding', 'running' ]

// 补充 Object.create原理
function create(super, properties) {
    function F(){}
    F.prototype = new super();
    var f = new F();
    properties && Object.defineProperties(F, properties);
    return f;
}
```



## 2. 构造函数（对象冒充）继承
```js
function SuperType(name) {
    this.name = name;
    this.colors = ['pink', 'blue', 'green'];
}
SuperType.prototype.work = function() {
    console.log(`I am ${this.name}, I can work`);
}
function SubType(name) {
    SuperType.call(this, name);
}
let instance1 = new SubType('Yvette');
instance1.colors.push('yellow');
console.log(instance1.colors); // ['pink', 'blue', 'green', yellow]
 
let instance2 = new SubType('Jack');
console.log(instance2.colors); // ['pink', 'blue', 'green']

w.run() // 已经继承造函数里面的属性和方法
w.work() // 但是没有继承原型链上面的属性和方法
```
## 3.1 组合继承(原型链 + 借用构造函数
```js
function Game() {
  this.name = 'LOL'
  this.skins = ['s']
}
// 继承属性
function LOL() {
  Game.call(this, arguments);
}
// 遗传方法
LOL.prototype = new Game();
LOL.prototype.constructor = LOL;

/*
优点：
  可以向超类传递参数
  每个实例都有自己的属性
  实现了函数复用
缺点是什么（考虑一个问题应该从功能、性能、可读性三方面讲）
  父类构造方法执行了两次
*/
```

## 3.2 寄生组合继承
```js
function Game() {
  this.name = 'LOL'
  this.skins = ['s']
}
// 继承属性
function LOL() {
  Game.call(this, arguments);
}
// 遗传方法
LOL.prototype = Object.create(Game.prototype);
LOL.prototype.constructor = LOL;

// 优点： 解决了父类构造方法执行了两次的问题
```
> 扩展： 有道面试题： `{}`, `new Object()` 及 `Object.create`的区别

## 3.3 封装一个方法
```
function extend(subClass, superClass) {
  function F() {}
  F.prototype = superClass.prototype;
  subClass.prototype = new F();
  subClass.prototype.constructor = subClass;
  subClass.superClass = superClass.prototype;
  if(superClass.prototype.constructor === Object) {
    superClass.prototype.constructor = superClass;
  }
}

// 测试用例
function Person(name, age) { // 父类构造函数
  this.name = name
  this.age = age
  this.sayIntroduce = function() { // 实例方法
    console.log(`My name is ${name}, I am ${age} years old`)
  }
}
Person.prototype.eat = function () {
  console.log('Person.prototype.eat 我是个吃货')
}
function Student(name, age, school) {
  Student.superClass.constructor.call(this, name, age);
  this.school = school
  this.say = function () { // 实例方法
    console.log('爸爸妈妈在上班，我上幼儿园')
  }
}
extend(Student, Person);

var feifei = new Student('feifei', '3', '乡村幼儿园')
console.log(feifei.age) // 子类实例属性
console.log(feifei.school) // 父类实例属性
console.log(feifei.say()) // 子类实例方法
console.log(feifei.sayIntroduce()) // 父类实例方法
console.log(feifei.eat()) // 父类原型方法
```

## 4. 多继承-混入方式
```js
function MyClass() {
     SuperClass.call(this);
     OtherSuperClass.call(this);
}

// 继承一个类
MyClass.prototype = Object.create(SuperClass.prototype);
// 混合其它
Object.assign(MyClass.prototype, OtherSuperClass.prototype);
// 重新指定constructor
MyClass.prototype.constructor = MyClass;

MyClass.prototype.myMethod = function() {
     // do something
};
```

# es6 Class语法
## 基本语法
```js
class Foo {
    age = 12; // 定义实例属性新方式 建议写在头部
    get school () {  // 定义实例属性 支持 get set 存取器
        return '清华';
    }
    // 构造函数， 不写默认会填充
    constructor(name) {
        // 构造函数可以定义实例方法
        this.name = name;
        // return this  // 默认返回this
    }
    
    /**
     * 原型方法   相当于es5 
        Object.defineProperty(Foo, 'say', {
            configurable: true,
            writable: true,
            enumerable: false,
            value: ƒ say()
        })
     */
    say(){
        console.log(`Hello, I am ${this.name}`)
    }

    // 不管是实例还是静态是属性或方法 都支持属性简写
    // [methodName] () {}

    // 静态方法  不可枚举
    static staticMethod(){}
    // 静态属性  可枚举
    static staticProp = 'staticProp'
}
const foo = new Foo('zs'); // 必须new
const foo2 = new Foo('ls');
foo.__proto__ === foo2.__proto__; // 与es5继承一样，原型是共享的

// 支持class表达式
const MyClass = class Me { };
```
## 私有属性
- 传统方案
    - “_”命名
    - 移除到外部
    - 利用symbol
- ES2022 增加了class私有属性 以#开头

### 私有属性的定义和使用
```js
/* 私有属性定义与使用 */
class Bar {
  #age = 101; // 私有属性
  #getAge() {
    // 私有方法
    return this.#age;
  }
  // 私有属性也支持存取器
  get #x() {}

  /**
   * 私有属性和方法使用方式一：在内部(构造函数或原型方法中)通过this引用
   * 并且必须知道名字才能使用 无法通过Reflect.ownKeys获取
   */
  constructor() {
    console.log(this.#age, this.#getAge());
    console.log(Reflect.ownKeys(this));
    console.log(Object.getOwnPropertyDescriptor(this, "#age"));
  }
}
const bar = new Bar();
// console.log(bar.#age);  // 严格模式下报错
// console.log(bar.#getAge());  // 严格模式下报错

// 私有属性和方法使用方式二: 类内部的静态方法中
// 私有属性不限于从this引用，只要是在类的内部，实例也可以引用私有属性
class Foo {
  #privateValue = 42;
  static getPrivateValue(foo) {
    return this.#privateValue;
  }
}
Foo.getPrivateValue(new Foo()); // 42

// 私有属性必须声明才能使用，否则编译时就报错，
// 访问不存在的私有属性也一样编译时就报错

// 私有静态属性及方法 与 私有属性及方法的 用法特性一致
```

### 检测私有属性
```js
// 可以通过静态方法try/catch的方式检测是否存在私有属性
// es2022 改进了 in  可以检测私有属性了
class C {
  #brand;
  static isC(obj) {
    /* try {
            obj.#brand;
            return true;
        } catch {
            return false;
        } */
    return #brand in obj;
  }
}

// 子类从父类继承的私有属性，也可以使用in运算符来判断。
class A {
  #foo = 0;
  static test(obj) {
    console.log(#foo in obj);
  }
}

class SubA extends A {}

A.test(new SubA()); // true
// 注意，in运算符对于Object.create()、Object.setPrototypeOf形成的继承，
// 是无效的，因为这种继承不会传递私有属性。
class A {
  #foo = 0;
  static test(obj) {
    console.log(#foo in obj);
  }
}
const a = new A();

const o1 = Object.create(a);
A.test(o1); // false
A.test(o1.__proto__); // true

const o2 = {};
Object.setPrototypeOf(o2, a);
A.test(o2); // false
A.test(o2.__proto__); // true
```

## 静态块
- 静态块用于静态代码初始化
- 静态块的另一个作用是将私有属性与类的外部代码分享

```js
// 静态块 处理静态属性需要初始话的逻辑
class polygon {
    static x = ...;
    static y;
    static {
        try {
            this.y = doSomethingWith(this.x)
        } catch {
            this.y = ...;
        }
    }
}

// 静态块 将私有属性与类的外部代码分享
let getX;
class D {
    #x = 1;
    static {
        getX = (inst) => inst.#x;
    }
}
console.log(getX(new D())) // 1
```
## 解构会导致this指向错乱，如何固定class中的this?
1. 箭头函数
2. Proxy 劫持 放入缓存池时进行bind

## new.target 属性
如果构造函数不是通过new命令或Reflect.construct()调用的，new.target会返回undefined
```js
function Person(name) {
  if (new.target === Person) {
    this.name = name;
  } else {
    throw new Error('必须使用 new 命令生成实例');
  }
}
var p1 = new Person('张三'); // ok
var p2 = Reflect.construct(Person, ['ls']); // ok
p2 instanceof Person // true
Person.call(person, '张三');  // 报错

// Class 内部调用new.target，返回当前 Class
class A {
    constructor() {
        console.log(new.target === A); // true
    }
}
class B extends A {}
new B(); // false // 子类继承父类时，new.target会返回子类
// 这个特性用于创建抽象类
```
## 其他
- 类和模块的内部，默认就是严格模式
- 不存在提升，可重复声明
- 如果定义了`symbol.iterator`方法，该类创建的实例就可以遍历

# Class 继承
## class extends 语法
```js
class A {
    constructor(name, age) {
        this.name = name;
        this.age = age
    }
}
class B extends A {
    // 构造函数可以省略 默认填充如下内容
    constructor() {
        super(...arguments)
    }
}
class C extends B {
    constructor(...args) {
        /* 一但写了构造函数就不能省略super()
         这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，
         得到与父类同样的实例属性和方法，然后再对其进行加工，添加子类自己的实例属性和方法 
        */
        super(...args);
        // 只有调用super()之后才可以使用this关键字，否则报错
        console.log(this.age);
    }
}
// 私有属性或（方法包含静态的）都不能继承
class AA {
    #a = 1
    #getA() {return this.#a}
    static #b = 'static prop';
    static #getB(){return this.#b};
}
class BB extends AA {
    constructor() {
        super();
        console.log(this.#a); // 编译时报错
        this.#getA(); // 编译时报错
    }
    static log() {
        console.log(this.#b); // 编译时报错
        console.log(this.#getB()); // 编译时报错
    }
}
// 想要访问私有属性需要借助普通方法
class Foo {
    #p = 1;
    getP() {
      return this.#p;
    }
    setP(num) {
        this.#p=num;
    }
}
  
class Bar extends Foo {
    constructor() {
      super();
    }
}
let bar1 = new Bar();
let bar2 = new Bar();
bar1.setP(123);
bar1.getP(); // 123
bar2.getP(); // 1
// 这个可否理解私有实例属性是被继承的？
```

## es6继承与es5继承的异同
```js
class A{}
class B extends A{}
let b = new B();
```
1. es6的继承包含静态继承
    - `B.__proto__ === A`; // 类继承 静态属性的继承是浅copy
    - `B.prototype.__proto__ === A.prototype` // 原型继承继承
    - 构造函数继承
2. es6内部定义的方法都是不可枚举的
3. 机制不同 es6 "继承在前，实例在后" 对原生构造函数的继承继承就能体现这一点。
4. 与 ES5 一样，类的所有实例共享一个原型对象。


## super关键字
- 必须指明是作为函数还是作为对象使用
- 作为函数时只能用在子类的构造函数中
    - 由于`super()`在子类构造方法中执行时，子类的属性和方法还没有绑定到`this`，所以如果存在同名属性，此时拿到的是父类的属性。
- 作为对象时
    - 在普通方法中指向父类的原型对象，
    - 在静态方法中指向父类
    - `super.x` 取值，可以取到父类原型上的属性或方法，取不到实例上的属性或方法
    - `super.x` 赋值，修改的是子类的实例属性
    - `super.x()`作为方法调用父类方法，父类静态方法中的this指向子类，父类普通方法中的`this`指向子类实例

由于对象总是继承其他对象的，所以可以在任意对象中使用`super`

```js
var obj = {
    toString() {
        return `MyToString ${super.toString()}`;
    }
}
obj.toString(); // 'MyToString [object Object]'
```

## 原生构造函数的继承
- es6与es5继承的行为差异
- 带版本功能的`MyArray`
- 继承`Object`的子类，有一个行为差异

```js
class VersionedArray extends Array {
    constructor() {
        super();
        this.history = [[]];
    }
    commit() {
        this.history.push(this.slice());
    }
    revert() {
        const last = this.history.pop() || [];
        this.splice(0, this.length, ...last);
    }
}
```

## Mix模式的实现
```js
function mix(...mixins) {
  class Mix {
    constructor() {
      for (let mixin of mixins) {
        copyProperties(this, new mixin()); // 拷贝实例属性
      }
    }
  }

  for (let mixin of mixins) {
    copyProperties(Mix, mixin); // 拷贝静态属性
    copyProperties(Mix.prototype, mixin.prototype); // 拷贝原型属性
  }

  return Mix;
}

function copyProperties(target, source) {
  for (let key of Reflect.ownKeys(source)) {
    if ( key !== 'constructor'
      && key !== 'prototype'
      && key !== 'name'
    ) {
      let desc = Object.getOwnPropertyDescriptor(source, key);
      Object.defineProperty(target, key, desc);
    }
  }
}
```

JavaScript面向对象

JavaScript模块化

Web前端JS知识梳理

本文系统梳理HTML知识点，常见面试题




# 1. src与href的区别


| src | href  |
| --- | --- |
|src用于替换当前元素  | href用于在当前文档和引用资源之间确立联系 |
|src是source的缩写  | href是Hypertext Reference 的缩写 |
|在 `<img>`、`<script>`、`<iframe>`中， 表示引入  | 用在 `<link>`、`<a>` |
|会暂停其他资源的下载和处理  | 并行下载资源 |


# 2. 对HTML语义化的理解
**语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）**。

语义化的优点
1. 有利于SEO，支持读屏软件（如根据文章生成目录）
2. 对开发者友好，增强代码的可读性，便于团队开发和维护

常见的语义化标签：
- `<header>` `<nav>` `<main>` `<article>` `<aside>` `<footer>`
- ![image.png](https://blog.warmplace.cn/static/img/4bd9a9f39a15f56a0c9c5eb7db6656f6.image.webp)

# 3. DOCTYPE的作用
DOCTYPE(⽂档类型)是HTML5中一种标准通用标记语言的文档类型声明，它的目的是**告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档**，不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。

浏览器渲染页面的两种模式
> 可通过document.compatMode获取，比如，语雀官网的文档类型是CSS1Compat

- CSS1Compat：**标准模式**（Strick mode），**默认模式，浏览器使用W3C的标准解析渲染页面**。在标准模式中，浏览器以其支持的最高标准呈现页面。
- BackCompat：**怪异模式**(混杂模式)(Quick mode)，浏览器使用自己的怪异模式解析渲染页面。**混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作**.

# 4. script标签中defer和async的区别
如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。

![image.png](https://blog.warmplace.cn/static/img/2e25107c12ffb9a3d1b09fb35750e543.image.webp)

其中蓝色代表js脚本网络加载时间，红色代表js脚本执行时间，绿色代表html解析。

**defer 和 async属性都是去异步加载外部的JS脚本文件，它们都不会阻塞页面的解析**，其区别如下：

- **执行顺序： 多个带async属性的标签，不能保证加载的顺序；多个带defer属性的标签，按照加载顺序执行**；
- 脚本是否并行执行：async属性，表示后续文档的加载和执行与js脚本的加载和执行是并行进行的，即异步执行；defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js脚本需要等到文档所有元素解析完成之后才执行，**DOMContentLoaded事件触发执行之前**。

# 5. 常⽤的meta标签有哪些
`<meta>` 标签由 `name` 和 `content` 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等，除了HTTP标准固定了一些name作为大家使用的共识，开发者还可以自定义name。

常用的meta标签：
-  设置编码 `<meta charset="UTF-8" >`
-  设置关键字 SEO `<meta name="keywords" content="关键词" />`
-  页面描述 SEO `<meta name="description" content="页面描述内容" />`
-  页面重定向和刷新 `<meta http-equiv="refresh" content="0;url=" />`
-  禁止缓存 `<meta http-equiv="Pragma" content="no-cache">`
-  不使用强缓存 `<meta http-equiv="Cache-Control" content="no-cache">`
-  viewport适配移动端 `<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">`  禁用双指缩放
    -  viewport还有一个作用，处理ios刘海，不写该属性则设置iphone刘海无效
-  搜索引擎索引方式：`<meta name="robots" content="index,follow" />`
-  隐藏safari界面
    -  `<meta name="apple-mobile-web-app-capable" content="yes">`
    -   ios专门定义来实现全屏显示，通过window.navigator.standalone来侦测的
-  改变状态栏 `<meta name="apple-mobile-web-app-status-bar-style" content="black">`
-  WebApp全屏模式：伪装app，离线应用。 `<meta name="apple-mobile-web-app-capable" content="yes" />`
-  添加到主屏后的标题 `<meta name="apple-mobile-web-app-title" content="标题">`
-  忽略数字自动识别为电话号码 `<meta content="telephone=no" name="format-detection" />`
-  忽略识别邮箱 　`<meta content="email=no" name="format-detection" />`
-  添加智能 App 广告条 下载app

总结，meta标签用途很广，设置编码、http相关（设置缓存与重定向）、SEO、CSP、离线App、safari相关、



搜索引擎索引方式 content属性值
| 类型 | 含义 |
| --- | --- |
| `all` | 文件被索引，且页面上的链接可以被查询 |
| `none` | 文件不被索引，且页面上的链接不可以被查询 |
| `index` | 文件将被检索 |
| `follow` | 页面上的链接可以被查询 |
| `noindex` | 文件将不被检索 |
| `nofollow` | 页面上的链接不可以被查询 |


# 6. HTML5有哪些更新
1. 语义化标签
1. 标签 `<audio>` `<video>`
1. 废弃元素
    - 表现类 用css替代
    - 属性类 用css替代
        - 如body标签上的link、vlink、alink、text属性
        - 如height和width
    - 框架类 frame frameset 
    - 其他
        - object取代了applet
    - [《html5废弃了哪些元素》](https://www.gxlsystem.com/qianduan-19304.html)
1. 表单
1. 进度条、度量器
1. DOM查询操作
    - querySelector  querySelectorAll
1. Web存储 `localStorage` `sessionStorage`
1. SVG、Canvas
1. 拖拽

# 7. html表单元素
## 表单类型
| type | 作用 |
| --- | --- |
| email | 能够验证当前输入的邮箱地址是否合法 |
| url | 验证URL |
| number | 只能输入数字，其他输入不了，而且自带上下增大减小箭头，max属性可以设置为最大值，min可以设置为最小值，value为默认值 |
| search | 输入框后面会给提供一个小叉，可以删除输入的内容，更加人性化 |
| range | 可以提供给一个范围，其中可以设置max和min以及value，其中value属性可以设置为默认值 |
| color | 提供了一个颜色拾取器 |
| time | 时分秒 |
| data | 日期选择年月日 |
| datatime | 时间和日期(目前只有Safari支持) |
| datatime-local | 日期时间控件 |
| week | 周控件 |
| month | 月控件 |

如日期相关控制，支持性不是很好， 一般项目中使用开源UI组件。

## 表单属性
| 属性 | 作用 |
| --- | --- |
| placeholder | 提示信息 |
| autofocus | 自动获取焦点 |
| autocomplete | 有两个值`on` `off` <br>使用前提:表单必须提交过,必须有name属性 |
| required | 要求输入框不能为空，必须有值才能够提交 |
| pattern | 正则表达式校验 |
| multiple | 可以选择多个文件或者多个邮箱 |
| form | form表单的ID |

## 表单事件：
- oninput 每当input里的输入框内容发生变化都会触发此事件。
- oninvalid 当验证不通过时触发此事件。


# 8. 标签分类
- 自闭和标签与非自闭标签
    - [可省略关闭的标签](https://html.spec.whatwg.org/multipage/syntax.html#void-elements)
- 行内标签与块标签

> - html标签 及属性 不区分大小写，属性值区分大小写
> - 某些 HTML 元素对于放在其中的元素类型有限制例如 `<ul>`，`<ol>`，`<table>` 和 `<select>`，相应的，某些元素仅在放置于特定元素中时才会显示，例如 `<li>`，`<tr>` 和 `<option>`。

自闭合的标签
- 表单元素 input
- img 
- br hr
- meta link base

非自闭合标签，如果强行自闭合会出问题，但使用了框架如vue可以兼容这种情况

行内元素有：`a` `b` `span` `img` `input` `select` `strong`

块级元素有：`div` `ul` `ol` `li` `dl` `dt` `dd` `h1~6` `p`

# 9.img的srcset属性的作⽤？
响应式页面中经常用到根据屏幕密度设置不同的图片。

srcset 属性通常与 sizes 属性一起使用，后者指定了不同视口条件下图像的大小。两者共同使得浏览器能够选择最合适的图像进行显示，从而优化用户体验，减少带宽使用和加载时间。
```html
<img src="fallback-image.jpg"
     srcset="image1.jpg 1024w,
             image2.jpg 800w,
             image3.jpg 480w"
     sizes="(max-width: 600px) 480px,
            (max-width: 1024px) 800px,
            1024px">
```

# 10. iframe 有那些优点和缺点？
优点：
- 用来加载速度较慢的内容（如广告）
- 可以使脚本可以并行下载
- 可以实现跨子域通信

缺点：
- iframe 会阻塞主页面的 onload 事件
- 无法被一些搜索引擎索识别
- 会产生很多页面，不容易管理


# 11. label 的作用是什么？如何使用？
label标签来定义表单控件的关系：当用户选择label标签时，浏览器会自动将焦点转到和label标签相关的表单控件上。

```html

<label for="mobile">Number:</label>
<input type="text" id="mobile"/>


<label>Date:<input type="text"/></label>
```

# 12. head 标签有什么作用，其中什么标签必不可少？

- 用于定义文档的头部，它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。
- 文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。除去`<title>`包含的数据都不会真正作为内容显示给读者。


# 13. html元素之间的嵌套关系
- 块级元素可以包含行内元素
- 块级元素不一定能包含块级元素 p
- “行内元素一般不能包含块级元素”  特例 a标签包含div
[具体规则在这个网站查询](https://html.spec.whatwg.org/multipage/grouping-content.html) 

# 14. SVG

定义：SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言XML描述的2D图形的语言，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

特点：
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序（比如谷歌地图）
- 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
- 不适合游戏应用

# 15. Canvas
Canvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。

特点：
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

svg 与 canvas 区别


| - | Canvas | Svg |
| --- | --- | --- |
| 历史  | 较新、由Apple私有技术发展而来 | 历史悠久，2003年成为W3C标准 |
| 功能 | 功能简单，2D绘图API | 功能丰富，各种图像、滤镜、动画等 |
| 特点 | 像素，只能脚本驱动 | 矢量，XML,CSS,元素操作 |
| 兼容性 | 主流浏览器，IE9+ | 主流浏览器，IE9+，其它SVG阅读器 |
| 操作对象 | 基于像素（动态点阵图） | 基于图形元素 |
| 元素 | 单个HTML元素 | 多种图形元素 |
| 驱动 | 只能脚本驱动 | 支持脚本和CSS |
| 事件交互 | 用户交互到像素点(x,y) | 用户交互到图形元素(rect, path) |
| 性能 | 适合小面积，大数量应用场景 | 适合大面积，小数量应用场景 |



# 16. 浏览器乱码是什么原因？如何解决？
编码和解码使用的字符集不同就会导致乱码

一般浏览器乱码的原因， 开发者使用window电脑创建的html文件默认是gbk编码，网页中也没有编码声明 `<meta charset="utf-8">`，浏览器使用默认方式`utf-8`解码，这就导致了乱码

解决方案
1. 使用软件编辑HTML修改编码
2. 或修改http响应头`content-type: text/html; charset=utf-8`
3. 配置meta标签 `<meta charset="utf-8">`

补充知识点：**浏览器有一套自己的编码解析机制**
1. 文件开头的 Byte Order mark 字符
2. http响应头字段content-type
3. html <meta @charset='XX'>
4. 默认utf-8

# 17 渐进增强和优雅降级之间的区别
- **渐进增强：主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果、交互等方面的改进和追加功能，以达到更好的用户体验。**
- **优雅降级： 一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。**

# 18. 说一下HTML5 drag API
原生的JavaScript拖拽有两种方式
- html5 draggable API
- 鼠标事件

## draggable属性
- 图片默认是可以拖拽的，但并不是所有元素默认都是可以拖拽的，如`<div>`
- 在元素本身加上draggable属性，这个属性是H5新增的，定义这个属性就可以注册事件了
- 拖动时  `dragstart` `drag` `dragend`  发生在拖拽元素身上
- 进入区域 进入时`dragenter` 进入后`dragover` 离开`dragleave` 放置`drop`  发生在目标元素身上

我写一个drag的Demo
![image](https://static.warmplace.cn/blog-resources/browser/dragable/drag.gif)

[示例&源码点这里](https://static.warmplace.cn/blog-resources/browser/dragable/index.html)


## 鼠标事件-滑动验证码
- `mousedown` 鼠标按下
- `mousemove` 鼠标移动
- `mouseup`  鼠标松开

我也写了一个滑块验证的demo
![yzm.gif](https://blog.warmplace.cn/static/img/228293cc02147134fd2dea2864a616f7.yzm.gif)

[示例&源码点这里](https://static.warmplace.cn/blog-resources/browser/mouse/index.html)


推荐资料
- [《网道 HTML教程》](https://wangdoc.com/html/)

HTML梳理

1. 本文异或算法聊起，循序渐进推导了对称加密算法的设计
2. 为了解决密钥的传输问题必须介绍了非对称加密技术
3. 为了实现密钥的安全传输，引入了DH密钥交换协议和PKI证书体系
4. 最后介绍了ECDH协议，它RSA非对称加密，安全性更高。



# XOR与填充
**加解密技术的核心是异或运算**
 - 比如明文为  `1011` 密钥为 `0101` 进行异或运算得到 密码`1110`
 - 拿到密码之后与密钥再进行异或运算 得到`1011` 即明文！

异或运算的好处是  执行速度非常快，执行一遍即可

填充
- 前面执行异或运算的前提是 明文和密钥长度是一样的，但通常密钥不可能那么长
- 那么就需要对明文分成多组，每组与密钥长度一致， 当最后一个明文块长度不够时需要填充

# 分组工作模式
我们来讨论下实现加密技术如何对明文进行分组。

## ECB模式
最简单的分组模式时ECB模式，直接将明文分解为多个块，对每个块独立加密

![image.png](https://blog.warmplace.cn/static/img/05a7bddddb22a26976ccfc92cf4b30cd.image.webp)

这种模式的缺点是**无法隐藏数据特征**

![image.png](https://blog.warmplace.cn/static/img/4a629ad79240b269530c0de4e278c784.image.webp)

我们实际期望的是全躁点


![image.png](https://blog.warmplace.cn/static/img/5e3af61afafdc419ad90907ae2f22605.image.webp)


## CBC模式
我们改进一下方案， **每个明文块先与前一个密文块进行异或后，再进行加密**，这样就消除了躁点

![image.png](https://blog.warmplace.cn/static/img/f416505b9464b8647fc28f7525fbaa25.image.webp)

这种方式的缺点是： 加密过程串行化， 无法利用多核CPU的优势

## CTR模式
如果 **通过递增一个加密计数器以产生连续的密钥流** 进行加密如何呢？ 可以对内容进行分片，从而利用多核CPU进行加密

![image.png](https://blog.warmplace.cn/static/img/378a1411cb2f77c327874286ed436921.image.webp)

这种方式的确解决了利用多核CPU优势的问题，仔细分析还有个问题是，无法验证消息的完整性（网络上数据传输可能丢失，而我们不知道）

## hash函数验证消息的完整性

![image.png](https://blog.warmplace.cn/static/img/ec15f7549b7b42476b2d4bc92df468f3.image.webp)

- hash函数的特征， 无论输入多长的内容， 经过hash函数后，可以得到一个定长的较短的hash编码
- hash编码可以理解为子文
- 通常一个好的hash函数，会使得不同的输入很难得到相同的值（也就是碰撞概率很低）

MAC(Message Authentication Code)算法是 hash函数的一种

![image.png](https://blog.warmplace.cn/static/img/6c2f7b97c0b71b2e5af4b30950a20283.image.webp)

- 我们将消息（MESSAGE）经过MAC算法处理 得到 摘要1（MAC）
- 我们再将摘要和密文一起发送给接收者
- 接收者接受的密文， 使用密钥解密出原文， 再将原文进行MAC算法处理 得到的摘要2和原来的摘要1进行对比，就可以验证消息是否完整

有了MAC函数就有了GCM

## GCM工作模式
GCM = CTR + GMAC

![image.png](https://blog.warmplace.cn/static/img/ffba5c04aa59d3a2b0a8ef4ead99a262.image.webp)

对于密文进行MAC算法得到hash

# AES对称加密算法
AES（Advanced Encryption Standard）
- 为比利时密码学家Joan Daemen和Vincent Rijmen所设计，又称Rijindael加密算法
- 常用填充算法: PKCS7
- 常用分组工作模式: GCM


- AES的三种密钥长度
- AES分组长度是128位（16字节）

![image.png](https://blog.warmplace.cn/static/img/1f3ba0a73664aa75afc1b57700e6895e.image.webp)

AES加密步骤

1. 把明文按照128bit (16字节)拆分成若干个明文块，每个明文块是4*4矩阵
2. 按照选择的填充方式来填充最后一个明文块
3. 每一个明文块利用AES加密器和密钥，加密成密文块
4. 拼接所有的密文块，成为最终的密文结果


不管AES如何安全，那么它如何将密钥传送给对方呢？非对称加密就可以解决这个问题。

# 非对称加密
- 每个参与方都有一对密钥 即 公钥和私钥
- 公钥向对方公开， 私钥仅自己使用
- 你给对方发消息 使用自己的私钥加密，另外还要将自己的公钥发给对方， 对方得到密文使用你的公钥解密
- 对方给你发消息 使用你的公钥加密， 你收到密文后使用自己的私钥解密


常用的非对称加密算法： RSA

非对称加密的应用： PKI证书体系、DH密钥交换协议

# RSA非对称加密算法

**1. 我们先看一下公钥和私钥如何产生**

![image.png](https://blog.warmplace.cn/static/img/393fa506ee0e0623c772e6214dd76228.image.webp)

我们选取了p=11 q=29 k=3，按照上述流程得到
- **公钥(3,319)**
- **私钥(187,319)**

**2. 有了公钥和私钥，我们再看一下加解密过程**

![image.png](https://blog.warmplace.cn/static/img/e2db482abbe9fb3f5eb8ed1da60b272a.image.webp)

按照上述流程我们来验证一下

![image.png](https://blog.warmplace.cn/static/img/706a93f22e99264ad7f5912c16521a02.image.webp)


我们在选一个数 26吧，进行私钥加密公钥解密

![image.png](https://blog.warmplace.cn/static/img/1396ac347a8c3dc76f85e2bfc52b6e8b.image.webp)


因为涉及大量乘法，所以非对称加密很耗费性能

注意: **明文 要小于 p和q的乘积n**, 如我们 选取明文320（320>319） 加密后就无法进行解密

:::tip{title=思考：为什么公私钥加密是安全的呢？}
参考第一张图
- 假设我们拿到了 公钥(k,n) 能不能推导出私钥（d,n）呢
- n已经有了，只要找到d
- 由于k是随机选的，只要找到v，就能找到d
- v=(p-1)(q-1)，由于n是一个很大的数字,对n进行质数因式分解是很困难的
- **所以AES算法的安全性在于对一个大数字进行因式分解是很困难的**
:::

# 使用openssl生成公私钥证书
- 生成私钥(公私钥格式参见RFC3447)  `openssl genrsa -out private.pem`
- 从私钥中提取出公钥 `openssl rsa -in private.pem -pubout -out public.pem`
- 查看ASN.1格式的私钥 `openssl asn1parse -l -in private.pem `

![image.png](https://blog.warmplace.cn/static/img/68ef55b39ff13d3f312771b6ef472b67.image.webp)

![image.png](https://blog.warmplace.cn/static/img/817b08c0188578cb1fe4c0dc3c726b56.image.webp)

![image.png](https://blog.warmplace.cn/static/img/e75cee1af6c8718bb5acd1ff007329ff.image.webp)

![image.png](https://blog.warmplace.cn/static/img/7024cf2a531211c46c4cda6626673962.image.webp)

# PKI证书体系
PKI证书体系是非对称加密的应用

为什么需要PKI证书体系
- Web世界是开放互联的，很多时候我们是第一次访问该网站， 如何获取网站的公钥呢？
- 通过通过握手的方式， DNS被劫持，服务端发送的消息就被破解了
- 与现实生活中问题买房子，证明这个房子是我的，需要房产证一样，网络中的这些机构组成了PKI证书体系

公钥的管理: Public Key Infrastructure (PKI) 公钥基础设施
- 由Certificate Authority (CA) 数字证书认证机构将用户个人身份与公开密钥关联在一起
- 公钥数字证书组成 `CA信息`、`公钥用户信息`、`公钥`、`权威机构的签字`、`有效期`
- PKI用户
    - 向CA注册公钥的用户
    - 希望使用已注册公钥的用户

签发证书流程

![image.png](https://blog.warmplace.cn/static/img/bd82a0dd4c61236ef22009177ec770be.image.webp)


签名与验签流程

![image.png](https://blog.warmplace.cn/static/img/e985b9f6aa998be8594dc0a03fd1e3af.image.webp)

证书信任链

![image.png](https://blog.warmplace.cn/static/img/fa790003dea205f14d69dd11bb782e48.image.webp)

证书分类
- DV证书
- OV证书
- EV证书 

# DH 密钥交换协议
在TLS/SSL握手中，DH协议是一种常用的算法，用来沟通协商出后面对称加密所使用的密钥

## DH协议的背景（RSA密钥交换的问题）

事实上 我们使用RSA算法所生成的公私钥，基于这些公私钥生成对称加密所使用的密钥也是可行的

具体流程如下：<br>
<img src="https://blog.warmplace.cn/static/img/674e2852ae3de90f70ea1ca8dce81fb9.image.webp" style="width: 300px"> <br>

1. 客户端发送 hello 到服务端
2. 服务端将公钥发给客户端
3. 客户端生成一个密码（只有它自己知道）使用前一步的公钥加密 发给服务端
4. 服务端使用私钥解码得到密码， 只有都使用这个密码进行对称加密传输数据

有人会说这个模型有个问题是服务端的消息会被机密，这个我们可以通过`PKI`证书体系传递公钥解决服务端消息的保密性。这里我们讨论另一个问题，**消息的前向保密性**

什么叫前向保密性呢？ 假设有个中间人，我现在没有破解server的私钥， 我先通过网络设备，把中间的报文都保存下来，当某一天我破解了 server的私钥，我们就可计算出密码传输的密钥， 就可以对所有的消息解密了。

DH密钥交换协议，就是解决这个问题的

## DH协议内容
- 它可以让双方在完全没有任何预先信息的条件下通过不安全信道创建起一个密钥
- 由于它的每一次会话密钥都是实时生成的， 所以具有前向保密性

具体流程如下图；
<img src="https://blog.warmplace.cn/static/img/4d2a27826620b9b1db46fffab4c23fa0.image.webp" style="width: 300px"> <br>

1. 客户端发送 hello 到服务端
2. 服务端生成公私钥（`publickey1` `privatekey1`）把自己的公钥 `publickey1` 发给客户端
3. 客户端生成公私钥（`publickey2` `privatekey2`）并将`publickey2`发给服务端
4. 通过一种算法，使得客户端使用`privatekey2`和`publickey1` 生成的密钥 与 服务端使用 `privatekey1`和`publickey2`生成的密钥一致

这样即使 privatekey1被破解， 由于 privatekey2 不会知道， 所以还是无法破解之前保存的报文， 从而具有前向保密性

具体示例如下图

![image.png](https://blog.warmplace.cn/static/img/1fe1897efe7a2b6a74b22c2c210a0ca5.image.webp)
- A、a分别是Alice的公钥和私钥
- B、b分别是Bob的公钥和私钥
- K就是协商出的密钥
- g和p两个随机数是公开的，另外再把两个公钥A、B公开

$K = A^b\;mod\;p = (g^a\;mod\;p)^{b}\;mod\;p = g^{ab}\;mod\;p = (g^b\;mod\;p)^a\;mod\;p = B^a\;mod\;p$

我们来验证一下
```js
var p = 23n, g = 5n; // 公开数
var a = 6n, b = 15n; // 双方私钥
var A = g**a % p;
var B = g**b % p;
var K1 = A**b % p;
var K2 = B**a % p;
console.log(K1 === K2, A, B, K1, K2); // true 8n 19n 2n 2n
// p g a b可以随便调整， K1与K2值不变
```

DH密钥交换协议存在一个问题 中间人攻击
- 中间人拦截 A与B的通信
- 先假装自己是B，与A通信，破解A的消息
- 再假装自己是A，与B通信，破解B的消息

> Q: 什么情况下会出现中间人攻击呢？<br>
> A: 代理工具、DNS劫持等。

解决方案就是引入第三方 解决身份验证问题， 即KPI证书体系


# ECDH协议

由于DH密钥交换协议有两个问题
1. 涉及大量乘法运算，所以很耗性能
2. 它的安全基于大因数分解比较困难，所以通常需要很长的位数

现在互联网中主要使用的是ECDH密钥交换协议，它其实是DH密钥交换的升级，它基于ECC椭圆曲线的特性来实现

## ECC椭圆曲线的特性

![image.png](/static/img/72ef635d2e8e8280c893e82210e59e98.image.webp)

上图 $y^2=x^3+a*x+b$ 就是维尔斯特拉斯椭圆函数

椭圆曲线始终沿X轴对称。

从上面四张图来看，它跟椭圆无关，之所以叫做椭圆曲线，是因为它在计算某些属性的时候与计算椭圆弧长相关的属性具有相似之处。


ECC曲线的特性： `+运算`

![image.png](/static/img/c9d86fdc9cc83e934699165b3e2e34b4.image.webp)

这里的`+运算`并非数学中的`+`运算，只是一种假设运算，利用数学中`+`运算的特性（结合律、交换律）

![image.png](https://blog.warmplace.cn/static/img/03c4c7d2b176847545faf0b65e0c3761.image.webp)

`P`和`Q`是曲线上的两点，`P`和`Q`连线交与曲线`R1`点，`R`是`R1`关于X轴的对称点，也在曲线上.

假设 $P + Q  + R1 = 0$ ，那么 $P + Q = - R1$ ，即 $P + Q = R$ 
如果 `P`和`Q`是同一点，则$2P = R$


## 例子
- 设曲线 $y^2=x^3-7x+10$
- $P=(1,2)$, $Q=(3,4)$在曲线上 求 $R$ 点坐标
    - P在曲线上 $2^2=4=1^3-7*1+10$
    - Q在曲线上 $4^2=16=3^3-7*3+10=27-21-10$

我在[这个网站](https://www.shuxuele.com/data/grapher-equation.html)绘制了一张图

![image.png](/static/img/bb4ed72d3e479c0dbe1da0c0ac91e923.image.webp)

求解 $R$ 有个公式

<img src='/static/img/1d070a295aebfaf812e24d556764310c.image.webp' width=200>

- $m$ 是斜率  
- $x_R$ 是R点X轴坐标
- $y_R$ 是R点Y轴坐标

$m=(y_P-y_Q)/(x_P-x_Q)=(2-4)/(1-3)=1$<br>
$x_R=m^2-x_P-x_Q=1^2-1-3=-3$<br>
$y_R=y_P+m(x_R-x_P)=2+1*(-3-1)=-2$
$y_R=y_Q+m(x_R-x_Q)=4+1*(-3-3)=-2$

以上就是椭圆曲线`+运算`的几何意义和代数意义。那么它与加解密有什么关系呢？

ECC的关键原理

$Q=K.P$ &emsp; <img src='/static/img/03b0f81013e53a6bbd27370d2c382ecb.image.webp' width='150'>
- 已知K与P，求解Q容易，即加密过程正向运算快， 
- 已知Q与P，计算K困难，即破解密钥逆向运算非常困难

为什么正向运算快？ 这里有个可以借助指数运算
1. 对$P$点做切线 按前面的公式求出 $2P$
2. 对$2P$点做切线 按前面的公式求出 $4P$

逆向运算，已知Q与P，求出多少个K，这是没有规律的，只能暴力求解。


<img src="https://blog.warmplace.cn/static/img/3785de615074bcaa864f932bf18025f1.image.webp" style="width: 200px"> <br>


这个公式里 $P$ 是已值的， $Q$ 是公钥，$K$ 就是私钥。


## ECDH协议
ECDH协议就是DH协议使用椭圆曲线ECC后的变种，优点是比DH计算速度快，同等安全条件下密钥更短

![image.png](https://blog.warmplace.cn/static/img/5b31942bdbf73c5c251fe43f59df91bf.image.webp)


# 非对称加密总结
前面讲了非称加密有两种方案
1. 第一种是基于大因数分解困难的RSA非对称加密算法
2. 对于中间人攻击、DNS劫持等引起的服务端消息的保密性引入PKI证书体系
3. 公钥是用来暴露给别人，让别人给你发消息用的，私钥用来解密接受的消息，你回复消息需要私钥加密，别人通过你的公钥解密。
4. 为了解决消息的前向保密性引入DH密钥协议，具体算法为
    - 已知 g和p 两个公开数，双方各自生成私钥a和b
    - 使用公式 `g**私钥 % p` 生成各自的公钥A和B进行交换
    - 通过 `对方公钥**自己私钥 % p`, 双方得到同一个密钥K
    - 通过这个密钥K，双方就可以使用对城加密传输数据了。
5. 第二种是ECDH协议，更加安全。借助椭圆曲线公式上和定义一种`+运算`实现求解困难验证容易。