Web前端入门第 8 问：HTML <!DOCTYPE> 申明有何用处？如果没有此申明有什么问题？

HELLO，这里是大熊学习前端开发的入门笔记。

本系列笔记基于 windows 系统。

先电脑端浏览器打开任何一个网页，比如百度。

再用 ctrl + u 快捷键即可查看源码，瞅瞅第一行代码，是不是都是 <!DOCTYPE xxx> 开头。

是否好奇这这行代码有嘛用？

DOCTYPE 语法规则

声明必须是 HTML 文档的第一行，位于 `` 标签之前。
声明不是 HTML 标签，它告诉 web 浏览器使用哪个 HTML 版本进行代码解析。

作用

规范模式触发

声明 doctype 后，浏览器会以标准模式（Standards Mode）渲染页面，确保按照 W3C/WHATWG 规范解析 HTML/CSS。
声明 HTML 版本

明确文档类型（如HTML4/XHTML/HTML5），指导浏览器按对应规则处理文档。
避免浏览器兼容性问题

未声明时，浏览器可能退化为怪异模式（Quirks Mode），模仿旧浏览器（如IE5）的非标准渲染行为，导致布局错乱。

未声明 <!DOCTYPE> 的问题

渲染不一致

浏览器可能会进入怪异模式，导致页面在不同浏览器上的表现不一致。这可能导致布局错乱、字体大小变化、边距和填充不一致等问题。
跨浏览器不一致

不同浏览器对怪异模式的实现差异较大，页面可能在不同浏览器中表现迥异。
新特性支持受限

部分 HTML5/CSS3 功能可能依赖标准模式才能生效。
搜索引擎优化（SEO）影响

虽然搜索引擎主要关注的是内容，但渲染不一致可能会影响网页的可读性和用户体验，间接影响 SEO。

几种声明方式

先看对比图：

除了 HTML 5 的声明，是否有发现其他声明后面都有一个 dtd 的链接？那么 dtd 的作用是什么？

文档类型定义（DTD，Document Type Definition）是一种特殊文档，它规定、约束符合标准通用标示语言（SGML）或SGML子集可扩展标示语言（XML）规则的定义和陈述。---- 来源：百度百科

关于上图中的几种声明方式说明：

HTML 5

于2014年正式发布，是目前最新的 HTML 标准，引入了许多新的元素、属性和功能，如语义化标签、多媒体支持、表单验证等。

HTML5 是目前最常用和推荐的 HTML 标准，它具有更好的语义化、多媒体支持、跨平台兼容性和更丰富的功能。开发者应该尽可能使用 HTML5 标准来构建现代的 Web 应用程序。

XHTML 1.1

于2001年发布，是 XHTML 1.0 的一个扩展版本，增加了一些新的元素和属性。

这个 DTD 与 XHTML 1.0 Strict 相同，但是允许您添加模块（例如为东亚语言提供 ruby 支持）。

XHTML 1.0

于2000年发布，是 HTML 4.01 的一个更严格的版本，基于 XML。

XHTML 1.0 Strict

包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。结构必须按标准格式的 XML 进行书写。
XHTML 1.0 Transitional

包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。结构必须按标准格式的 XML 进行书写。
XHTML 1.0 Frameset

这个 DTD 与 XHTML 1.0 Transitional 相同，但是允许使用框架集内容。

HTML 4.01

于1999年发布，分为严格（ Strict ）、过渡（ Transitional ）和框架集（ Frameset ）三个版本，引入了更多的样式和脚本支持。

HTML 4.01 Strict

包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
HTML 4.01 Transitional

包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
HTML 4.01 Frameset

这个 DTD 与 HTML 4.01 Transitional 相同，但是允许使用框架集内容。

结论

为了确保网页在不同浏览器和设备上的正确渲染和一致性，推荐使用 <!DOCTYPE html> 声明，这是 HTML5 的标准声明，简洁且兼容性好。在编写 HTML 文档时，应始终在文档的最顶部包含此声明。