2023常见的前端面试题（附加解答）
仅供参考，也是到处收集而来，如有不对的地方可以指点修改，后续追加的面试题在最后
JS
1、说一下innerHTML 与 innerText的作用与区别？
- 作用：都可以获取或者设置元素的内容
- 区别：innerHTML可以解析内容中的html标签
- innerText不能解析内容中的html标签
2、JavaScript 由以下三部分组成：
- ECMAScript（语法部分）：JavaScript 语言基础
- DOM（文档对象模型）：规定了访问 HTML 和 XML 的方法
- BOM（浏览器对象模型）：提供了浏览器窗口之间进行交互的对象和方法
3、介绍 JS 有哪些内置对象？
- 数据封装类对象：Object、Array、Boolean、Number、String
- 其他对象：Function、Arguments、Math、Date、RegExp、Error
- ES6 新增对象：Symbol、Map、Set、Promises、Proxy、Reflect
4、JS 的基本数据类型和引用数据类型
- 基本(原始)数据类型: number、string、boolean、undefined, null, symbol
- 引用数据类型: Object、Function、Array
5、说几条写 JavaScript 书写的基本规范？
- 代码一定要正确缩进，建议使用"二个或者四个空格"缩进
- 语句结束使用分号;
- 规范定义 JSON 对象，补全双引号
- 用{}和[]声明对象和数组
- 变量和函数在使用前进行声明
- 以大写字母开头命名构造函数，全大写命名常量
- 代码段使用花括号{}包裹
- 还有要书写正确的标识标签
6、什么是标识符？
- 在JS中，可以自定义命名的东西都属性标识符；
- 比如变量名，函数名，参数名都是标识符
7、DOM 元素e的 e.getAttribute(propName)和 e.propName 有什么区别和联系
- e.getAttribute：获取的是标签上属性
- 可以通过e.setAttribute(propName, propValue)设置标签上属性
- e.propName：获取的是元素对象上属性
8、offsetWidth/offsetHeight,clientWidth/clientHeight,scrollWidth/scrollHeight 的区别?
- offsetWidth/offsetHeight 返回值包含 content + padding + border + 包含滚动条，效果与 e.getBoundingClientRect()相同
- clientWidth/clientHeight 返回值只包含 content + padding，如果有滚动条，也不包含滚动条
- scrollWidth/scrollHeight 返回值包含 content + padding + 溢出内容的尺寸
9、检测浏览器版本版本有哪些方式？
- 根据 navigator.userAgent // UA.toLowerCase().indexOf('chrome')
10、说一下元素节点、文本节点、属性节点的nodeType、nodeName、nodeValue分别是什么
- nodeType(节点类型) nodeName(节点名称) nodeValue(节点的值)
- 元素节点： 1 元素标签名 null(没有值)
- 属性节点： 2 属性名 属性值
- 文本节点： 3 text 节点内容
11、==和===的区别
- 双等号判断时，只需要值相等
- 三等号判断时，需要值与类型都相等
12、函数声明与函数表达式的区别？
- 数声明就是直接通过function进行声明函数，例如：function show(){}可以在声明函数之前调用0函
13、数组方法pop() push() unshift() shift()
- pop()尾部删除
- push()尾部添加
- unshift()头部添加
- shift()头部删除
14、ajax请求的时候get 和post方式的区别
（1）get请求
参数要跟在url后面
安全性不高
传输数据比较小，但速度快
一般用于获取，删除
（2）post请求
参数会放在请求体中，
安全性相对高些
传输数据大，但相对速度慢些
post一般用于修改或者添加
15、解释什么是Json:
- json是一种轻量级的数据交换格式，一般用于数据传递
- 里边只允许出现双引号
- JSON的语法表示三种类型值，简单值(字符串，数值，布尔值，null), 数组，对象
16、dom事件委托什么原理，有什么优缺点
事件委托原理: 事件冒泡机制（把子元素的事件行为 委托给 父级元素执行优点）
优点:
1. 可以大量节省内存占用，减少事件注册
2. 可以实现当新增子对象时，无需再对其进行事件绑定
缺点:
如果把所有事件都用事件代理，可能会出现事件误判
17、Javascript的事件流模型都有什么?
- “事件冒泡”：事件逐级向上传播
- “事件捕捉”：事件逐级向下传播，一直到最具体的
- “DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡
18、split() join() 的区别
- split()：以指定的字符分割字符串返回一个数组,字符串方法
- join(): 以指定的字符连接数组中元素返回一个字符串,数组方法
19、如何阻止事件冒泡
- ev.stopPropagation();
20、如何阻止默认事件
- 答案：return false 或者 ev.prevent Default();
21、JavaScript中如何检测一个变量是一个 String 类型?
- typeof 变量
- 变量.constructor === String
- Object.prototype.toString.call(变量) // 推荐使用
22、javascript 的 typeof 返回哪些数据类型（至少六个）检测类型如下：
- string、 number、 boolean 、undefined 、object 、function 、symbol（ES6之后新增的类型）
23、如何判断变量为NaN
- 通过isNaN()判断
- isNaN(NaN) // 返回true
- isNaN(1000) // 返回false
- isNaN('小明') // 返回true（判断前会转换成number类型）
- isNaN('101') // 返回false
24、什么是JS变量提升 与 块级作用域
- 变量提升：就是会把变量定义提升到当前作用域的最上面
- 块级作用域：JS 中作用域有：全局作用域、函数作用域。没有块作用域的概念。ES6中新增了块级作用域。块作用域由 { } 包括，if 语句和 for 语句里面的{ }也属于块作用域。在外边不能调用块作用域里边定义的变量
25、null / undefined 的区别
- null值：属于null类型,代表“空值"，代表一个空对象指针；使用typeof运算得到 “object"，所以你可以认为它是一个特殊的对象值。
- undefined值：属于undefined类型，当一个声明的变量未初始化赋值时，得到的就是undefined。使用typeof运算得到“undefined"，
26、foo = foo || bar，这行代码是什么意思？为什么要这样写？
- 如果foo转为false, 则返回bar；否则直接返回foo
- 逻辑或：如果第一个值为true，直接返回第一个值；否则直接返回第二个值
- 逻辑与：如果第一个值为false，直接返回第一个值；否则返回第二个值、
27、target 和 currentTarget 区别
- 都是事件对象上的属性
- event.target：返回触发事件的元素
- event.currentTarget：返回绑定事件的元素(相当于事件中this)
28、prototype 和 proto 的关系是什么
- prototype: 所有函数都会有一个prototype属性, 它就是函数的原型对象
- proto: 所有实例对象上都会有一个proto属性, 它等同于函数的原型对象
(补充说明)
原型链：因为所有实例对象都原型对象，原型对象也个对象，
所以它也自己原型对象(这样形成原型链)
答案：
- 所有的对象都拥有proto属性，它指向对象构造函数的 prototype 属性
- 所有的函数都同时拥有proto和 prototype 属性
- 函数的proto指向自己的函数实现 函数的 protytpe 是一个对象(原型)
- 所以函数的 prototype 也有proto属性 指向 Object.prototype
- Object.prototype.proto指向 null
29、请说一下你常用的数组方法(至少七个)
答案：
- 1）Array.push()：此方法是在数组的后面添加新加元素，此方法改变了数组的长度：
- 2）Array.pop()：此方法在数组后面删除最后一个元素，并返回数组，此方法改变了数组的长度：
- 3） Array.shift()：此方法在数组后面删除第一个元素，并返回数组，此方法改变了数组的长度：
- 4） Array.unshift()：此方法是将一个或多个元素添加到数组的开头，并返回新数组的长度：
- 5）Array.isArray()：判断一个对象是不是数组，返回的是布尔值
- 6） Array.concat()：此方法是一个可以将多个数组拼接成一个数组：
- 7）Array.toString() ： 把数组作为字符串返回
- 8） Array.join() ：以指定字符拼接成字符串，然后返回
- 9） Array.splice：(开始位置， 删除的个数，元素)
- 10）Array.map()：此方法是将数组中的每个元素调用一个提供的函数，结果作为一个新的数组返回，并没有改变原来的数组
- 11）Array.forEach()：此方法是将数组中的每个元素执行传进提供的函数，没有返回值，直接改变原数组，注意和 map 方法区分
- 12）Array.filter()：此方法是将所有元素进行判断，将满足条件的元素作为一个新的数组返回
- 13）Array.every()：此方法是将所有元素进行判断返回一个布尔值，如果所有元素都满足判断条件，则返回 true，否则为 false：
- 14）Array.some()：此方法是将所有元素进行判断返回一个布尔值，如果存在元素都满足判断条件，则返回 true，若所有元素都不满足判断条件，则返回 false：
- 15）Array.reduce()：此方法是所有元素调用返回函数，返回值为最后结果,传入的值必须是函数类型：
与之相对应的还有一个 Array.reduceRight() 方法，区别是这个是从右向左操作
30、请说一下你常用的字符串方法（至少七个）
- trim(): 去首尾空格
- split(sep，limit)：将字符串分割为字符数组，limit 为从头开始执行分割的最大数量
- indexOf(str):返回 str 在父串中第一次出现的位置，若没有则返回-1
- lastIndexOf(str):返回 str 在父串中最后一次出现的位置，若没有则返回-1
- substr(start，length)：从字符索引 start 的位置开始，返回长度为 length 的子串
- substring(from,to)：返回字符索引在 from 和 to（不含）之间的子串
- slice(start,end)：返回字符索引在 start 和 end（不含）之间的子串
- toLowerCase()：将字符串转换为小写
- toUpperCase()：将字符串转换为大写
- replace(str1,str2):str1 也可以为正则表达式，用 str2 替换 str1
- concat(str1,str2,...):连接多个字符串，返回连接后的字符串的副本
- match(regex):搜索字符串，并返回正则表达式的所有匹配
- charAt(index):返回指定索引处的字符串
- charCodeAt(index):返回指定索引处的字符的 Unicode 的值
- fromCharCode():将 Unicode 值转换成实际的字符串
- search(regex):基于正则表达式搜索字符串，并返回第一个匹配的位置
- valueOf()：返回原始字符串值
31、原型和原型链
- 原型：portoType这个属性就是函数的原型
- 原型链：1.所有对象都有原型，而原型本身就是对象，所以原型也有自己的原型对象，就形成原型链
- 如果对象本身没有属性，则就会去原型链上去找
- Object原型对象的原型值为null
32、new操作符具体做了什么？
- 在内存创建一个新对象
- 把构造函数中this指向新建的对象
- 会在新对象上添加一个__proto__属性,指向函数的原型对象prototype
- 判断函数返回值,如果值是引用类型就直接返回值；否则返回this(创建的新对象)
33、说下什么是IIFE函数
- IIFE(立即调用函数表达式)是一个在定义时就会立即执行的函数。
34、浅拷贝与深拷贝有何区别？如何实现？
- 浅拷贝：拷贝的是原对象的内存地址
- 深拷贝：在内存中把原对象复制一份
- 浅拷贝的实现方式有：
（1）直接变量赋值
（2）Object.assign()；但目标对象只有一层的时候，是深拷贝；
（3）扩展运算符(...)；目标对象只有一层的时候，是深拷贝；
深拷贝就是在拷贝数据的时候，将数据的所有引用结构都拷贝一份。
- 深拷贝的实现方式有：
（1）结合使用JSON.parse()和JSON.stringify()方法。
（2）手写遍历递归赋值；
35、字符串截取方法substr、 substring、 slice三者的区别
- substr(n,m)：截取的是字符串中索引为n开始的，并且截取m位
- substring(n,m)：从索引为n的位置开始截取，截取到索引为m的位置但是不包含索引为m这一项
- slice(n,m)：和substring一样，但是他可以支持负数索引
36、函数柯里化
概念：把一个接收多个参数的函数变成接收单一参数 并且返回能够接收新参数的函数；比如：
add(1)(2)(3)(4) = 10;
function add(num){
var sum=num;
var fn=function(v){
sum+=v;
return fn
};
fn.toString=function(){
return sum
};
return fn
}
console.log(add(1)(2)(3)(4)) // 1037、判断Array类型的几种方式
1、[ ] instanceof Array
2、[ ].constructor === Array
3、Object.prototype.toString.call([]) === '[object Array]'
4、Array.isArray([])38.this指向的各种情况都有什么？
- 全局作用域中的函数：非严格模式下其内部this指向window
- 对象内部的函数：其内部this指向对象本身：
- 构造函数：其内部this指向生成的实例：
- 由apply、call、bind改造的函数：其this指向第一个参数：
- 箭头函数：箭头函数没有自己的this，看其外层的是否有函数，如果有，外层函数的this就是内部箭头函数的this，如果没有，则this是window。(函数定义时的this，而不是调用时this)
39.什么是AJAX？如何实现？
- ajax是一种能够实现网页局部刷新的技术，可以使网页异步刷新。
- ajax的实现主要包括四个步骤：
（1）创建核心对象XMLhttpRequest；
（2）利用open方法打开与服务器的连接；
（3）利用send方法发送请求；（"POST"请求时，还需额外设置请求头）
（4）监听服务器响应，接收返回值。
40.什么是高阶函数？
- 高阶函数是对其他函数进行操作的函数;
- 高阶函数就是一个接收函数作为参数或将函数作为输出返回的函数。
- 例如，Array.prototype.map，Array.prototype.filter 和Array.prototype.reduce 是语言中内置的一些高阶函数。
41、描述浏览器的渲染过程？，DOM树和渲染树的区别？
- 浏览器的渲染过程：
- 解析 HTML 构建 DOM(DOM树)，并行请求 css/image/js
- CSS 文件下载完成，开始构建 CSSOM(CSS树)
- CSSOM 构建结束后 和 DOM 一起生成 Render Tree(渲染树)
- 布局(Layout)：计算出每个节点在屏幕中的位置
- 显示(Painting)：通过显卡把页面画到屏幕上
- DOM 树 和 渲染树 的区别：
- DOM 树与 HTML 标签一一对应，包括 head 和隐藏元素
- 渲染树不包括 head 和隐藏元素，大段文本的每一个行都是独立节点，每一个节点都有对应的 css 属性
42、Javascript 如何实现继承？
- 实例继承：将子构造函数的 prototype 指向父构造函数的一个实例
- 原型继承：将子构造函数的 prototype 指向父构造函数的 prototype
- 构造函数绑定：使用 call 或 apply 方法，将父对象的构造函数绑定在子对象上
- 拷贝继承：如果把父对象的所有属性和方法，拷贝进子对象
- ES6 语法 extends：class ColorPoint extends Point {}
43、Javascript 作用域链?
- 如果当前作用域没有找到属性或方法，会向上层作用域查找，
直至全局函数，这种形式就是作用域链
44、eval是做什么的？
eval 的功能是把对应的字符串解析成 JS 代码并运行
- 应该避免使用 eval，不安全，非常耗性能（先解析成 js 语句，再执行）
- 由 JSON 字符串转换为 JSON 对象的时候可以用 eval('('+ str +')');
45、js延迟加载的方式有哪些？
动态创建 DOM 方式（用得最多）、defer 和 async标签属性
46、defer 和 async区别
- defer 并行加载 js 文件，会按照页面上 script 标签的顺序执行
- async 并行加载 js 文件，下载完成立即执行，不会按照页面上 script 标签的顺序执行
47、同步和异步的区别?
- 同步: 下面代码会等待上面 同步代码执行完毕
- 异步: 下面代码不会等待上面异步代码执行完毕
- 同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，
新内容出现，用户看到新内容,进行下一步操作 - 异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。
等请求完，页面不刷新，新内容也会出现，用户看到新内容
48、documen.write 和 innerHTML 的区别
- document.write 只能重绘整个页面
- innerHTML 可以重绘页面的某一部分
49、说说你对闭包的理解
闭包有三个特性：
- 函数嵌套函数
- 函数内部可以引用外部的参数和变量
- 参数和变量不会被垃圾回收机制回收,会永远留驻在内存中
使用闭包主要是为了设计私有的方法和变量。
优点：是可以避免全局变量的污染，缺点：是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。
50、 把
通过var(let、const)定义声明变量，如果var则就仅仅只给变量赋值
通过var(let、const)定义声明变量，如果var则就仅仅只给变量赋值
71、form中的input可以设置为readonly和disabled，请问2者有什么区别？
- readonly不可编辑，但可以选择和复制；值可以传递到后台
- disabled不能编辑，不能复制，不能选择；值不可以传递到后台
72、怎么降维数组 [[1,2],[3,4]] --> [1, 2, 3, 4]
- 使用递归循环，把所有元素放到一个新数组
- Array.prototype.concat.apply([],[[1,2],[3,4]]);
73、请说出三种减低页面加载时间的方法
- 压缩css、js文件
- 合并js、css文件，减少http请求(精灵图)
- 外部js、css文件放在最底下
- 减少dom操作，尽可能用变量替代不必要的dom操作
74、基本数据类型和引用数据类型有什么区别？
（1）变量直接赋值时：
基本数据类型赋值的是数据的副本，原数据的更改不会影响传入后的数据。
引用数据类型赋值的是数据的引用地址，原数据的更改会影响传入后的数据。
（2）两者在内存中的存储位置：
基本数据类型存储在栈中。
引用数据类型在栈中存储了指针，该指针指向的数据实体存储在堆中。
75、如何改变this指针的指向？
可以使用apply、call、bind方法改变this指向(并不会改变函数的作用域)。比较如下：
（1）三者第一个参数都是this要指向的对象，也就是想指定的上下文，上下文就是指调用函数的那个对象(没有就指向全局window)；
（2）apply第二个参数都是数组，call和bind接收多个参数并用逗号隔开；
（3）apply和call只对原函数做改动，bind会返回新的函数(要生效还得再调用一次)。
76、document load事件 和 document ready事件 的区别
页面加载完成有两种事件
1）load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行一个函数
问题：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响
2）$(document).ready()是当DOM文档树加载完成后执行一个函数 （不包含图片，css等）所以会比load较快执行
在原生的jS中不包括ready()这个方法，只有load方法就是onload事件
77、JS中有哪些不同类型的弹出框可用
- 在JS中有三种类型的弹出框可用，分别是：
- Alert
- Confirm
- Prompt
78、线程与进程的区别
- 一个程序至少有一个进程, 一个进程至少有一个线程。
- 线程的划分尺度小于进程，使得多线程程序的并发性高。
- 另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。
- 线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，
- 由应用程序提供多个线程执行控制。
- 从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。
79、什么是回调
- 回调函数是作为参数或选项传递给某个方法的普通JS函数。
- 它是一个函数，在另一个函数完成调用后执行，因此称为回调。
80、如何使用 JS 删除 cookie
- 如果要删除cookie以便后续尝试读取cookie，则只需将过期日期设置为过去的时间。
- 咱们应该定义cookie路径以确保删除正确的cookie。
- 如果未指定路径，某些浏览器将不允许咱们删除cookie
81、2+5+'3'的结果是什么
答案：'73'
由于2和5是整数，它们将以数字形式相加。因为3是一个字符串，它将与 7 拼接，结果是73。
82、如何在JS中清空数组
1、arrayList = []
2、arrayList.length = 0;
3、arrayList.splice(0, arrayList.length);
4、 while(arrayList.length){
arrayList.pop();
}83、innerHTML 和 innerText 的共同点与区别
- 共同点：获取或者设置元素的内容
- 区别：
- innerHTML可以解析内容中html标签
- innerText不可以解析内容中html标签
84、请选择结果为真的表达式：（C）
A.null instanceof Object
B.null === undefined
C.null == undefined+
D.NaN == NaN
86、原生JS中如何从一个页面 跳转 到另一个页面
- 跳转到其它页面（会产生历史记录）
location.href = '路径'
- 跳转且替换页面（不会产生历史记录）
location.replace('路径')
87、在JS中编码与解码URL
- .encodeURI() 可以对字符串编码
- .decodeURI() 可以对字符串解码
88、callee 与 call 与 caller的区别:
- callee是arguments上面的属性，表示当前正在执行的函数
- call改变函数调用时里边this的指向
- caller是函数上的一个属性,它指向当前函数外一层函数，没有外一层函数，则为null
89、什么是jsonp
- jsonp是一种解决跨域请求问题的技术
- 不足点：它只能是get请求
90、[1, 2, 3].map(Math.pow)的结果是什么?
请说出代码的运行结果，为什么？
结果时 129
map()会根据提供提供的函数对指定序列(列表)做映射。
pow()方法返回 x的y次方的值。
map(function(当前元素的值value,下标index));
91、toString() 与 valueOf()的区别
- toString() 方法返回一个表示该对象的字符串。
- valueOf() 方法返回指定对象的原始值, 如果对象没有原始值，则valueOf将返回对象本身
92、怎么自定义一个dom事件，并且编程式触发它？
- 通过new Event('事件名')创建一个事件对象
- 给指定元素绑定事件
- document.dispatchEvent(事件对象)来触发事件
示例
const ev = new Event('abc');
document.addEventListener('abc', function (e) {
console.log('abc事件触发了。。。。。。')
})
document.dispatchEvent(ev)93、continue 与 break的区别
- continue：跳过本次循环，直接进入下一次循环
- break：直接终止循环
94、简述一下你对 HTML 语义化标签的理解？
① 用正确的标签做正确的事情。
② html语义化让页面的 内容结构化，结构更清晰，
便于对浏览器、搜索引擎解析；即使在没有样式 CSS 情况下也以一种文档格式显示，
并且是容易阅读的;
③ 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于SEO;
④ 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
95、图片img标签title与alt属性的区别
- title属性：光标移入要显示图片文字
- alt属性：当图片加载失败时要显示的文字
96、HTML5 的 form 如何关闭自动完成功能？
答案：将不想要自动完成的
form或input设置为autocomplete=off
97、简述一下 src 与 href 的区别。
答案：src 用于引用资源，替换当前元素；
href 用于在当前文档和引用资源之间确立联系。
解析：
● href
href 标识超文本引用，用在 link 和 a 等元素上，href 是引用和页面关联，
是在当前元素和引用资源之间建立联系，在加载它的时候，
不会停止对当前文档的处理，
浏览器会继续往下走
若在文档中添加 href ，浏览器会识别该文档为 CSS 文件，
就会并行下载资源并且不会停止对当前文档的处理。
这也是为什么建议使link方式加载 CSS，而不是使用 @import 方式。
● src
src 表示引用资源，替换当前元素，用在 img，script，iframe 上，
src 是页面内容不可缺少的一部分。
当浏览器解析到 src ，会暂停其他资源的下载和处理
（图片不会暂停其他资源下载和处理），直到将该资源加载、编译、执行完毕，
图片和框架等也如此，类似于将所指向资源应用到当前内容。
这也是为什么建议把 js 脚本放在底部而不是头部的原因。 98、对 WEB 标准以及 W3C 的理解与认识
- 标签闭合、标签小写、不乱嵌套
- 使用外链css 和 js脚本、结构行为表现的分离、文件下载与页面速度更快
- W3C标准使网站容易维护、有利于搜索引擎查找
99、Label的作用是什么？是怎么用的？
答案：label 标签来定义表单控制间的关系,**当用户选择该标签时，
浏览器会自动将焦点转到和标签相关的表单控件上**。两种用法：一种是 id 绑定，一种是嵌套;
示例：
100、每个 HTML 文件头里都有个很重要的东西，Doctype，知道这是干什么的么？
声明位于文档中的最前面的位置，处于 标签之前。
- 告知浏览器文档使用哪种 HTML 或 XHTML 规范。
- 告诉浏览器按照何种规范解析页（如果你的页面没有 DOCTYPE 的声明，那么 compatMode 默认就是 BackCompat,浏览器按照自己的方式解析渲染页面）
解析：
doctype 是一种标准通用标记语言的文档类型声明，目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义（DTD）来解析文档。
浏览器本身分为两种模式，一种是标准模式，一种是怪异模式，浏览器通过 doctype 来区分这两种模式，doctype 在 html
中的作用就是触发浏览器的标准模式，如果 html 中省略了 doctype，浏览器就会进入到 Quirks 模式的怪异状态，在这种模式下，有些样式会和标准模式存在差异，而 html 标准和 dom 标准值规定了标准模式下的行为，没有对怪异模式做出规定，因此不同浏览器在怪异模式下的处理也是不同的，所以一定要在 html 开头使用 doctype。
- 自己总结一下：
- doctype是一种标准通用标记语言的文档类型声明;
- doctype在 html中的作用就是触发浏览器的标准模式,否则为怪异模式;
- 不同浏览器在怪异模式下会有一些不同的表现，不建议使用怪异模式;
- doctype一定需要写html上面才会生效;