播面 HTML 中的标准模式（Standard Mode）和怪异模式（Quirks Mode）？
HTML 中的标准模式（Standard Mode）和怪异模式（Quirks Mode）是浏览器渲染页面的两种不同机制。
1. 历史背景（为什么要分两种模式？）
在互联网早期（90年代末，IE5 和 Netscape 4 时期），浏览器厂商（主要是微软和网景）为了抢占市场，各自实现了很多非标准的 HTML 和 CSS 特性。那时候 W3C 的标准还没有完全统一或被严格执行。
后来，W3C 标准确立，浏览器厂商开始支持标准。但是，如果浏览器突然全部严格按照标准渲染，那么互联网上成千上万基于“旧浏览器特性”开发的网站就会全部乱套（样式崩坏）。
为了解决这个问题，浏览器引入了两种模式：
- 标准模式：给新建的、符合标准的网站使用。
- 怪异模式：为了兼容旧网站，模拟旧浏览器的行为（主要是 IE5）。
2. 如何触发这两种模式？
浏览器通过页面顶部的 <!DOCTYPE> 声明来判断使用哪种模式。
标准模式 (Standard Mode)：
- 触发方式：页面头部有完整的、正确的
<!DOCTYPE>声明。 - 推荐写法（HTML5）：html
<!DOCTYPE html> - 行为：浏览器按照 W3C/WhatWG 的最新标准来解析和渲染页面。
- 触发方式：页面头部有完整的、正确的
怪异模式 (Quirks Mode)：
- 触发方式：页面没有
<!DOCTYPE>声明，或者声明不正确/过时（例如写了 HTML4 的 DTD 但缺少 URL）。 - 行为：浏览器模拟老式浏览器（如 IE5）的非标准行为，以确保旧网站能正常显示。
- 触发方式：页面没有
补充：近乎标准模式 (Almost Standards Mode)：
- 介于两者之间，大部分符合标准，但在表格单元格内的图片布局等细节上保留了少量怪异行为。通常由某些特定的过渡型 DOCTYPE 触发。
3. 核心区别（面试重点）
最显著的区别在于 CSS 盒模型（Box Model） 的计算方式，以及一些布局细节。
(1) 盒模型 (Box Model) 的计算方式
这是最大的坑，也是面试最常问的点。
- 标准模式：使用的是 W3C 标准盒模型 (
box-sizing: content-box)。width= 内容的宽度 (content)- 总宽度 =
width+padding+border+margin
- 怪异模式：使用的是 IE 盒模型 (
box-sizing: border-box)。width= 内容 +padding+border- 总宽度 =
width+margin - 注：其实 IE 盒模型在现代 UI 开发中更受欢迎，所以 CSS3 引入了
box-sizing: border-box来手动开启这种计算方式。
(2) 行内元素的宽高
- 标准模式：给行内元素（如
<span>）设置width和height是无效的。 - 怪异模式：在某些旧浏览器模式下，行内元素可能会响应宽高的设置。
(3) 元素水平居中 (margin: 0 auto)
- 标准模式：使用
margin: 0 auto可以让块级元素水平居中。 - 怪异模式：
margin: 0 auto可能失效。在旧 IE 中，通常需要给父元素设置text-align: center来实现子元素居中。
(4) 表格内的字体继承
- 标准模式：表格内部的元素会继承父元素的字体样式（font-size, font-family 等）。
- 怪异模式：表格内部元素往往不继承父元素的字体样式，需要专门针对表格重新设置。
(5) 图片的垂直对齐
- 标准模式：图片（
<img>）作为行内块元素，默认基线对齐，底部会有几像素的留白（为了给字母 g, j, p, q 的下行部留空间）。 - 怪异模式：图片底部通常没有这几像素的留白。
4. 如何判断当前页面处于哪种模式？
可以通过 JavaScript 的 document.compatMode 属性来查看：
javascript
console.log(document.compatMode);CSS1Compat：表示 标准模式 (Standards Mode)。BackCompat：表示 怪异模式 (Quirks Mode)。
5. 总结
在现代 Web 开发中，一定要在 HTML 文件第一行写上 <!DOCTYPE html>。这能确保浏览器始终以标准模式渲染页面，避免出现不可预期的布局错误和兼容性问题。