HTML文档类型声明是每一个HTML文件开头必须包含的内容，它的作用是告知浏览器当前页面遵循的HTML规范版本，让浏览器以对应的标准模式解析和渲染页面。如果缺少或者错误声明文档类型，浏览器可能会进入怪异模式，导致页面布局和样式出现不可预期的偏差。
不同HTML版本的文档类型声明差异
在HTML5出现之前，不同版本的HTML文档类型声明语法比较复杂，需要引用对应的DTD文件，而HTML5对声明做了极大的简化，具体差异如下：
| HTML版本 | 文档类型声明语法 |
|---|---|
| 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"> |
| HTML5 | <!DOCTYPE html> |
HTML5文档类型声明的具体方法
1. 标准声明写法
HTML5的文档类型声明非常简洁，只需要在HTML文件的第一行写入以下代码即可，不需要区分大小写，不过通常约定使用大写字母：
<!DOCTYPE html>
2. 完整HTML5文件示例
一个标准的HTML5文件结构如下，文档类型声明必须放在最开头，前面不能有任何内容，包括空格和空行：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5文档类型声明示例</title> </head> <body> <h1>这是一个HTML5页面</h1> <p>页面开头已经正确声明了HTML5文档类型</p> </body> </html>
声明时的常见注意事项
- 文档类型声明必须放在HTML文件的第一行，前面不能有任何字符，包括空格、空行、注释，否则浏览器可能无法识别正确的声明。
- HTML5的声明不区分大小写，写<!doctype html>或者<!DOCTYPE HTML>都是有效的，不过行业惯例使用大写形式。
- 不需要给声明添加闭合标签，它不属于HTML标签，只是浏览器识别版本的指令。
- 如果页面中使用了
<input>、<video>等HTML5新增标签，必须正确声明HTML5文档类型，否则旧版本浏览器可能无法正常解析这些标签。
未正确声明的后果
如果HTML文件没有声明文档类型，或者声明错误，浏览器会默认进入怪异模式（Quirks Mode），此时浏览器的渲染规则会模拟旧版本浏览器的行为，可能导致以下问题：
- CSS盒模型计算方式不符合标准，width和height的计算会包含padding和border，和标准的content-box模式不同。
- 部分CSS3新特性无法生效，比如flex布局、grid布局可能出现兼容性问题。
- HTML5新增的语义化标签如
<header>、<footer>可能无法被正确识别，样式设置失效。
文档类型声明是HTML文件的基础，虽然只有一行代码，但对页面的渲染效果有决定性影响，开发时务必养成开头先写声明的习惯。