下面是一篇入门清晰 + 可直接作为学习笔记或博客内容的说明，专门讲清
👉 HTML 文档类型声明标签（DOCTYPE）是什么、怎么写、有什么用。
HTML 文档类型声明标签（DOCTYPE）详解
在 HTML 文档的最顶部，几乎都会看到这样一行代码：
<!DOCTYPE html>
它就是 HTML 文档类型声明（Document Type Declaration，简称 DOCTYPE）。
一、DOCTYPE 是什么？
DOCTYPE 不是 HTML 标签，而是一条浏览器指令，用来告诉浏览器：
👉 当前页面使用的是哪一种 HTML 规范
👉 浏览器应该用哪种模式来解析和渲染页面
📌 位置要求
DOCTYPE 必须写在 HTML 文档的第一行，在 <html> 标签之前。
二、DOCTYPE 的作用（非常重要）
1️⃣ 告诉浏览器使用“标准模式”
有了 DOCTYPE，浏览器会使用：
- 标准模式（Standards Mode）
没有 DOCTYPE 或写错，浏览器可能进入：
- 怪异模式（Quirks Mode）
2️⃣ 防止页面样式错乱
怪异模式下可能出现：
- CSS 盒模型计算错误
- margin / padding 表现异常
- 不同浏览器显示不一致
📌 很多布局问题，根源就是 DOCTYPE 写错或缺失
三、HTML5 的 DOCTYPE（推荐）
✅ 正确写法（HTML5）
<!DOCTYPE html>
特点：
- 写法极简
- 向后兼容
- 所有现代浏览器都支持
📌 这是目前唯一推荐的写法
四、旧版 HTML 的 DOCTYPE（了解即可）
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
❗ 这些写法现在几乎不用，只在维护老项目时会见到。
五、DOCTYPE 与浏览器渲染模式关系
| DOCTYPE 情况 | 浏览器模式 |
|---|---|
正确的 <!DOCTYPE html> | 标准模式 |
| 缺失 DOCTYPE | 怪异模式 |
| 错误 / 不完整 | 近怪异模式 |
你可以在浏览器 DevTools 中查看当前模式：
document.compatMode
返回结果：
CSS1Compat→ 标准模式BackCompat→ 怪异模式
六、DOCTYPE 常见错误示例
❌ 写在 <html> 后面
<html>
<!DOCTYPE html>
❌ 错误：浏览器不会识别
❌ 大小写或格式错误
<!doctype HTML>
虽然多数浏览器能容忍，但不规范
❌ 完全缺失
<html>
<head>...</head>
⚠️ 极易引发布局 Bug
七、一个完整、规范的 HTML5 页面结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>DOCTYPE 示例</title>
</head>
<body>
<h1>Hello HTML5</h1>
</body>
</html>
八、面试高频问法（一句话回答）
DOCTYPE 的作用是什么？
标准答案：
DOCTYPE 用于声明 HTML 文档类型，告诉浏览器使用标准模式解析页面，避免进入怪异模式，从而保证页面在不同浏览器中的一致性。
九、总结
✔ DOCTYPE 是浏览器解析指令，不是标签
✔ 必须写在文档第一行
✔ HTML5 推荐写法只有一个：<!DOCTYPE html>
✔ 缺失或错误会导致 CSS 和布局问题