＜!DOCTYPE html＞标签详解-CSDN博客

本文链接：https://blog.csdn.net/afangjie/article/details/142611270

<!DOCTYPE html> 是 HTML 文档中的第一行声明标签，用于告知浏览器当前文档使用的 HTML 版本。在现代网页开发中，<!DOCTYPE html> 主要用于指明文档类型为 HTML5。

1. 什么是 <!DOCTYPE html>？

DOCTYPE 是 Document Type Declaration（文档类型声明）的缩写。它的主要作用是让浏览器知道该如何解析 HTML 文档的内容。如果不声明 DOCTYPE，浏览器可能会进入怪异模式（quirks mode），这会影响页面的正常显示和渲染。

<!-- 声明在第一行 -->
<!DOCTYPE html> 
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

在 HTML5 中，<!DOCTYPE html> 是最简洁的文档声明，它不区分大小写，通常写为小写形式。相比于以前的版本，如 XHTML 或 HTML 4.01，它显得更加简洁。

2. 为什么要使用 <!DOCTYPE html>？

2.1 标准模式 vs 怪异模式

浏览器有两种渲染模式：

标准模式（Standards mode）：严格按照 W3C 规范渲染页面。
怪异模式（Quirks mode）：为了兼容旧网页，浏览器会采用一些过时的解析方式，这可能会导致页面显示不一致。

使用 <!DOCTYPE html> 可以确保浏览器使用标准模式渲染网页，从而避免出现样式和布局问题。

2.2 向前兼容

HTML5 是向前兼容的，这意味着即使在较新的浏览器中，使用 <!DOCTYPE html> 也不会影响文档的正确显示。因此，使用 HTML5 标准有助于提高网页的兼容性和未来的可维护性。

3. 历史版本对比

在早期的 HTML 版本中，DOCTYPE 声明比较复杂。以下是几个常见的历史版本的 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 严格版

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

相比之下，HTML5 只需使用简单的 <!DOCTYPE html>，极大简化了声明语法。

4. 不使用 <!DOCTYPE html> 会有什么影响？

如果不在文档的开头声明 DOCTYPE，浏览器可能会切换到怪异模式。这种模式下，CSS 和 JavaScript 的一些行为可能与标准模式不同，导致页面布局错乱或功能异常。因此，始终建议在 HTML 文档的第一行包含 <!DOCTYPE html> 声明。

5. 总结

<!DOCTYPE html> 是一个非常重要的 HTML 声明，它确保浏览器以标准模式解析和渲染页面。在现代网页开发中，使用 HTML5 标准的 DOCTYPE 声明是最佳实践，可以提高网页的兼容性、可维护性，并减少浏览器之间的差异。