面试题 前端（一）DOCTYPE作用 标准模式与混杂模式区分

一、DOCTYPE作用

Document Type(Declaration)的缩写，是一种标记语言的文档类型声明，必须在HTML文档的第一行，位于HTML标签之前。

作用是告诉浏览器使用哪个版本的HTML规范来渲染文档。

如果不存在或者不正确会导致文档以混杂模式呈现。

<!DOCTYPE html>

二、标准模式与混杂模式区分

1. 概念

标准模式（Standard Mode）：以浏览器支持的最高标准运行。

混杂模式（Quirks Mode）：以一种比较宽松的向后兼容的方式显示。

2. 判断

if (document.compatMode === "CSS1Compat") {
  console.log("标准模式");    
} else {
  console.log("混杂模式");   //混杂模式为BackCompat
}

3. 区分

1. 盒模型

标准模式按标准盒模型解析（宽度 = content）

混杂模式按IE盒模型解析（宽度 = content + padding + border）

2. 字体继承

标准模式严格遵循CSS继承规则，子元素会继承父元素的字体样式，除非被明确覆盖。

混杂模式可能会忽略或不完全继承父元素的字体样式。

3. 行内元素

标准模型下内联元素（inline）默认不接受 width 和 height 设置，若想控制内联元素大小，可将其display属性设为 inline-block 或 block 。

混杂模式下给 inline 元素设置宽高有效。

4. 溢出（overflow）

标准模式溢出时内容不会让元素大小自动增大，可能会被裁切。

混杂模式下元素的内容超出尺寸，元素大小自动调整以适应内容。

三、HTML5为什么只需要写<!DOCTYPE html>

HTML5 不基于 SGML（Standard Generalized Markup Language，标准通用标记语言），不需要引用 DTD（Document Type Definition，文档类型定义）文件。

基于 SGML 的需要通过 DOCTYPE 引用一个 DTD 文件来定义规则：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

告诉浏览器使用 HTML 4.01 Transitional 这个DTD，以及这个文件在哪里（后面的url）。

HTML5 只需要告诉浏览器"以标准模式渲染"。

四、SGML、HTML、XML和XHTML区别

SGML ：标准通用标记语言，是定义其他标记语言的元语言，用于各种文档标记，可自定义标签和结构，与HTML、XML不兼容。

HTML ：超文本标记语言，用于网页设计，标签固定，与XML不兼容。

XML ：可扩展标记语言，用于数据存储与传输，例如配置文件，可自定义标签，与HTML不兼容。

XHTML ：用于网页设计 ，标签严格，必须小写，标签必须闭合，属性必须小写，属性必须加引号等。

总结：SGML更复杂且灵活，HTML和XHTML专注于网页结构化，XML专注数据交换。

补充：XHTML是HTML用XML语法重写的版本，目标是让 HTML 更严谨、更可扩展，现在基本不用。