HTML中<!doctype>声明为何使用感叹号(!)？未声明会有什么影响？

关于HTML <!doctype> 的两个常见问题 #

嘿，作为刚入门Web技术的新手，这俩问题问得特别关键——很多人刚开始写HTML时都会忽略这个看似不起眼的声明，咱们把它掰扯明白：

问题1：HTML的<!doctype>声明中为何要使用感叹号(!)？ #

这得从HTML的老祖宗SGML说起。早期的HTML是基于**SGML（标准通用标记语言）**的，而在SGML的语法规则里，<!...>这种格式是用来标记「声明类语句」的，感叹号就是区分普通标签和声明的核心标志。

到了HTML5，虽然它已经脱离了SGML的依赖，不再需要严格遵循SGML的规则，但为了向下兼容老代码，同时保留大家已经习惯的写法，就继续沿用了这个带感叹号的格式。简单说，这既是历史遗留的规范，也是为了让新老浏览器都能毫无障碍地识别这个声明。

问题2：如果不声明<!doctype>会发生什么情况？ #

最直接的后果就是浏览器会触发怪异模式（Quirks Mode），而不是正常的标准模式（Standards Mode）。

啥是怪异模式？就是浏览器为了兼容那些几十年前不遵循标准的老网页，故意切换到一种「模拟旧浏览器行为」的渲染模式。在这种模式下：

• 盒模型计算逻辑混乱：比如IE的怪异模式里，元素的width会包含padding和border，和标准模式下的计算逻辑完全相反
• 布局规则脱离标准：块级元素对齐、行高计算、浮动行为都会和标准模式产生差异
• 跨浏览器一致性彻底崩盘：同样的代码在Chrome、Firefox、老IE里会呈现出完全不同的效果，调试起来头都大

举个实际的例子：你写了一个宽度设为200px的盒子，加了10px的padding，标准模式下它实际占的宽度是220px，但怪异模式下可能还是200px，内部内容直接被挤变形。

所以说，<!doctype html>（HTML5的声明）是每个HTML文档开头必须加的第一行代码，千万别偷懒！

内容的提问来源于stack exchange，提问作者Nilam