文档类型定义（Document Type Definition，简称DTD）是HTML文档的"身份证"，它告诉浏览器："我是一个什么类型的文档，请按照这个标准来解析我"。
东巴文（db-w.cn） 认为：DTD就像建筑的蓝图，它定义了文档的结构和规则，确保浏览器能够正确理解和渲染页面内容。
DTD的概念源于SGML（标准通用标记语言），HTML最初就是基于SGML定义的：
东巴文趣闻：在HTML5之前，DOCTYPE声明非常复杂，开发者经常需要复制粘贴。HTML5的设计者意识到这一点，将其简化为只需15个字符：<!DOCTYPE html>。
DTD决定了浏览器的渲染模式：
| 渲染模式 | 说明 | DTD状态 | 东巴文评价 |
|---|---|---|---|
| 标准模式 | 严格按照W3C标准渲染 | 完整正确的DTD | ✅ 推荐使用 |
| 混杂模式 | 兼容旧页面的宽松渲染 | 缺失或错误的DTD | ⚠️ 避免使用 |
| 准标准模式 | 接近标准但有细微差异 | 某些过渡型DTD | 🔶 特定场景 |
东巴文金句：DTD是浏览器和开发者之间的"契约"，缺失这个契约，浏览器就会"自由发挥"。
<!DOCTYPE html>
特点：
东巴文观点：HTML5的DOCTYPE设计体现了"简单即美"的哲学。它告诉浏览器："这是HTML文档，用最新标准渲染"。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
特点：
<font>、<center>）<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
特点：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
特点：
<frameset>元素<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
特点：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
特点：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
特点：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标准模式示例</title>
</head>
<body>
<p>这个页面将以标准模式渲染</p>
</body>
</html>
东巴文解释：浏览器看到<!DOCTYPE html>，就会切换到标准模式，按照W3C规范渲染页面。
<!-- 缺少DOCTYPE声明 -->
<html>
<head>
<meta charset="UTF-8">
<title>混杂模式示例</title>
</head>
<body>
<p>这个页面将以混杂模式渲染</p>
</body>
</html>
问题：
东巴文提醒：永远不要省略DOCTYPE声明！这是HTML文档的第一行，必须写在<html>标签之前。
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
padding: 20px;
border: 5px solid #333;
/* 标准模式：总宽度 = 200px */
/* 混杂模式：内容宽度 = 200px - 40px - 10px = 150px */
}
</style>
</head>
<body>
<div class="box">盒模型测试</div>
</body>
</html>
| 模式 | width计算方式 | 东巴文说明 |
|---|---|---|
| 标准模式 | width = 内容宽度 | ✅ 符合CSS规范 |
| 混杂模式 | width = 内容 + padding + border | ⚠️ IE5.5的旧方式 |
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 100px;
background: #f0f0f0;
}
img {
vertical-align: baseline; /* 标准模式和混杂模式表现不同 */
}
</style>
</head>
<body>
<div class="container">
<img src="image.jpg" alt="测试图片">
</div>
</body>
</html>
东巴文推荐工具：
W3C Markup Validation Service
HTML5 Outliner
// 在浏览器控制台执行
document.compatMode
// 返回值：
// "CSS1Compat" - 标准模式
// "BackCompat" - 混杂模式
东巴文技巧：快速检查页面是否处于标准模式，一行代码搞定！
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="东巴文HTML教学示例">
<title>正确的HTML5文档</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>欢迎来到东巴文</h1>
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>文章标题</h2>
<p>这是文章内容...</p>
</article>
</main>
<footer>
<p>© 2024 东巴文（db-w.cn）</p>
</footer>
<script src="script.js"></script>
</body>
</html>
东巴文点评：
lang属性meta标签旧版本（XHTML 1.0）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML文档</title>
</head>
<body>
<p>这是一个段落。</p>
<img src="image.jpg" alt="图片" />
<br />
</body>
</html>
新版本（HTML5）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML5文档</title>
</head>
<body>
<p>这是一个段落。</p>
<img src="image.jpg" alt="图片">
<br>
</body>
</html>
东巴文对比：
| 项目 | XHTML 1.0 | HTML5 | 改进 |
|---|---|---|---|
| DOCTYPE | 复杂的长字符串 | 简洁的15字符 | ✅ 更易记忆 |
| 根元素 | 需要xmlns属性 | 只需lang属性 | ✅ 更简洁 |
| meta标签 | http-equiv方式 | charset属性 | ✅ 更直观 |
| 自闭合标签 | 需要/> |
只需> |
✅ 更简单 |
❌ 错误示例：
<!-- 注释或其他内容 -->
<!DOCTYPE html>
<html>
...
✅ 正确示例：
<!DOCTYPE html>
<!-- 注释应该放在DOCTYPE之后 -->
<html>
...
东巴文规则：DOCTYPE必须是文档的第一行，前面不能有任何内容，包括空格、注释或BOM字符。
<!-- 以下写法都是正确的 -->
<!DOCTYPE html>
<!doctype html>
<!DoCtYpE html>
东巴文建议：虽然HTML5不区分大小写，但推荐使用<!DOCTYPE html>（DOCTYPE大写），这是业界惯例，可读性更好。
东巴文解决方案：
<!-- 旧项目第一行添加 -->
<!DOCTYPE html>
<!-- 原有的HTML代码 -->
<html>
...
注意事项：
东巴文SEO观点：
标准模式更友好
语义化标签的前提
性能影响
# 使用命令行工具验证
npm install -g html-validate
html-validate index.html
东巴文推荐：在CI/CD流程中加入HTML验证，确保所有页面都有正确的DOCTYPE声明。
东巴文（db-w.cn） - 让编程学习更有趣、更高效！