DOCTYPE（文档类型）的作用是什么？
DOCTYPE（Document Type Declaration，文档类型声明）是 HTML 文档的第一行代码（位于<html>标签之前），它的主要作用是告诉浏览器当前文档使用的是哪个 HTML 或 XHTML 版本规范，从而决定浏览器以何种模式来解析和渲染页面。
简单来说，它是浏览器解析页面的“说明书”或“开关”。
1. 核心作用：触发渲染模式
浏览器在解析 HTML 时，主要有两种渲染模式，DOCTYPE 的存在直接决定了使用哪一种：
| 渲染模式 | 触发条件 | 特点 | 影响 |
| :— | :— | :— | : |
|标准模式 (Standards Mode)|存在正确的 DOCTYPE | 浏览器严格按照 W3C 标准（如 CSS 盒模型、字体大小、行高等）进行渲染。 |推荐。确保页面在不同浏览器中表现一致，符合现代 Web 标准。 |
|怪异模式 (Quirks Mode)|缺失DOCTYPE 或 声明错误 | 浏览器模拟旧版浏览器（如 IE5）的非标准行为，以兼容几十年前的老旧网站。 |不推荐。会导致 CSS 盒模型计算错误（如width包含 padding/border）、行高不一致、图片间距异常等。 |
|近似标准模式 (Almost Standards Mode)| 某些特定的 DOCTYPE | 介于两者之间，主要修正了表格单元格图片的垂直对齐等极少数怪异行为，其他遵循标准。 | 现代浏览器默认行为，通常无需担心。 |
为什么会有“怪异模式”？
在 Web 发展早期，不同浏览器（特别是 Netscape 和 IE）对 HTML/CSS 的解析标准不统一，导致很多网站依赖这些“错误”才能正常显示。为了兼容这些老旧网站，现代浏览器保留了“怪异模式”。如果没有 DOCTYPE，浏览器会“假设”这是一个老旧网站，从而开启怪异模式。
2. DOCTYPE 的写法演变
随着 HTML 版本的迭代，DOCTYPE 的写法越来越简洁：
HTML 4.01 (繁琐)
需要引用 DTD（文档类型定义）文件，写法复杂，容易出错。
<!-- 严格模式 --><!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><!-- 过渡模式 (允许使用一些已废弃的标签) --><!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">XHTML 1.0 (严格)
基于 XML 的 HTML，要求更严格。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">HTML5 (极简，推荐)
HTML5 不再基于 SGML，因此不需要引用 DTD。写法极其简单，且不区分大小写（但通常全大写）。
<!DOCTYPEhtml>这是目前所有现代 Web 开发的标准写法。
3. 如果没有 DOCTYPE 会发生什么？
如果你在 HTML 文件开头忘记写<!DOCTYPE html>，浏览器会进入怪异模式 (Quirks Mode)，导致以下常见问题：
- 盒模型差异：
- 标准模式：
width= 内容宽度（padding 和 border 在 width 之外）。 - 怪异模式：
width= 内容 + padding + border（类似 IE5 的行为）。这会导致布局宽度计算错误，元素溢出或错位。
- 标准模式：
- 行高问题：
- 某些浏览器在怪异模式下，行高计算可能不一致，导致文字重叠或间距异常。
- 图片对齐：
- 图片底部可能会多出几个像素的空白（因为浏览器将其视为文本基线对齐）。
- 表格布局：
- 表格单元格的 padding 和 border 处理方式不同。
- CSS 选择器支持：
- 某些现代 CSS 选择器（如
:nth-child）在怪异模式下可能无法正常工作。
- 某些现代 CSS 选择器（如
4. 最佳实践
- 必须写在第一行：DOCTYPE 必须是 HTML 文档的第一行（除了 XML 声明
<?xml ...?>，但在 HTML5 中通常不需要 XML 声明）。任何在它之前的字符（包括空格、注释、BOM 字符）都可能导致浏览器进入怪异模式。 - 统一使用 HTML5 写法：无论你的项目是 HTML4 还是 HTML5，永远使用
<!DOCTYPE html>。现代浏览器对这种写法有极好的兼容性，且能确保触发标准模式。 - 不要省略：即使是一个简单的测试页面，也请加上 DOCTYPE，养成良好的编码习惯。
总结
- 作用：告诉浏览器使用标准模式还是怪异模式来渲染页面。
- 现状：现代开发中，必须在文件第一行写上
<!DOCTYPE html>。 - 后果：缺少它会导致布局错乱、样式异常，且难以排查。
正确示例：
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>我的页面</title></head><body><h1>你好，世界！</h1></body></html>