JavaScript异步编程

本文将系统梳理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/)